/* ----------- INSIGHT TILES (functions/ui/insight_tiles/insight_tiles.php, README in functions/ui/docs/) ----------- */

/* --- Tokens and grid --- */
.insight-tiles {
    --insight-bg: #ffffff;
    --insight-bg-hover: #fbf9f7;
    --insight-surface: #f7f4f0;
    --insight-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --insight-key: #8a6a4f;
    --insight-value: #2d2f31;
    --insight-row-value: #3d3f42;
    --insight-note: #76634f;
    --insight-empty: #a08c78;
    --insight-accent: #ea6d10;
    /* Key icons are quiet taupe: in the tiles, orange means a link (and the bar) */
    --insight-icon: #b59c84;
    --insight-track: #ece4da;
    /* Same edge as the page's cards (.tile-section), so rows of tiles and cards line up */
    --insight-border: #f2f2f2;
    --insight-line: rgba(138, 106, 79, 0.16);
    --insight-ok: #0a7f72;
    --insight-ok-bg: #e1f4f1;
    --insight-look: #b5520c;
    --insight-look-bg: #fff1e4;
    --insight-wrong: #c0392b;
    --insight-wrong-bg: #fdecec;
    --insight-info: #2f6fbf;
    --insight-info-bg: #eaf2fc;
    --insight-muted: #6f6a64;
    --insight-muted-bg: #ebe4db;
    /* Test runs (Membership time travel), testing only */
    --insight-test: #ea6d10;
    --insight-radius: 0.55rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 1rem;
}

.insight-tile--sm   { grid-column: span 1; }
.insight-tile--md   { grid-column: span 2; }
.insight-tile--lg   { grid-column: span 3; }
.insight-tile--full { grid-column: 1 / -1; }

@media (max-width: 1199.98px) {
    .insight-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .insight-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-tile--md,
    .insight-tile--lg { grid-column: 1 / -1; }
}

/* --- A tile --- */
.insight-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--insight-border);
    border-radius: var(--insight-radius);
    background: var(--insight-bg);
    box-shadow: var(--insight-shadow);
    color: var(--insight-value);
    font-size: 13px;
    line-height: 1.35;
}

a.insight-tile,
a.insight-tile:hover {
    color: var(--insight-value);
    text-decoration: none;
    border-bottom: none;
}

.insight-tile.is-link:hover {
    background: var(--insight-bg-hover);
}

.insight-tile-key {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--insight-key);
}

.insight-tile-key span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.insight-tile-key i {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--insight-icon);
}

.insight-tile-value {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--insight-value);
    overflow-wrap: anywhere;
}

.insight-tile-note {
    font-size: 12px;
    color: var(--insight-note);
    overflow-wrap: anywhere;
}

/* A dot before the value in a tone's colour (e.g. green for Active); the value stays plain */
.insight-tile-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: 2px;
    background: var(--insight-muted);
}

.insight-tile-dot.is-ok    { background: var(--insight-ok); }
.insight-tile-dot.is-look  { background: var(--insight-look); }
.insight-tile-dot.is-wrong { background: var(--insight-wrong); }
.insight-tile-dot.is-info  { background: var(--insight-info); }

/* A colour square before the value (e.g. a membership type's) */
.insight-tile-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border-radius: 4px;
    background: var(--swatch);
    vertical-align: 1px;
}

html[data-theme="dark"] .insight-tile-swatch {
    background: var(--swatch-dark, var(--swatch));
}

/* No data yet: the slot stays, the value goes quiet */
.insight-tile.is-empty .insight-tile-value {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--insight-empty);
}

/* Orange is for links: a whole-tile link's value (a tone, below, still wins) */
.insight-tile.is-link .insight-tile-value { color: var(--insight-accent); }

/* Tones colour the value (and graphics), never the tile's edge; only the tile's own value, not a group's inner tiles */
.insight-tile.is-ok    > .insight-tile-value { color: var(--insight-ok); }
.insight-tile.is-look  > .insight-tile-value { color: var(--insight-look); }
.insight-tile.is-wrong > .insight-tile-value { color: var(--insight-wrong); }
.insight-tile.is-info  > .insight-tile-value { color: var(--insight-info); }
.insight-tile.is-muted > .insight-tile-value { color: var(--insight-muted); }
/* No data yet stays quiet, whatever the tile's tone */
.insight-tile.is-empty > .insight-tile-value { color: var(--insight-empty); }

/* --- Chips --- */
.insight-tile-chip {
    display: inline-block;
    margin-left: 2px;
    padding: 1px 7px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 2px;
    white-space: nowrap;
}

.insight-tile-chip.is-ok    { background: var(--insight-ok-bg); color: var(--insight-ok); }
.insight-tile-chip.is-look  { background: var(--insight-look-bg); color: var(--insight-look); }
.insight-tile-chip.is-wrong { background: var(--insight-wrong-bg); color: var(--insight-wrong); }
.insight-tile-chip.is-info  { background: var(--insight-info-bg); color: var(--insight-info); }
.insight-tile-chip.is-muted { background: var(--insight-muted-bg); color: var(--insight-muted); }

/* --- List tiles: key-value rows --- */
.insight-tile-rows {
    margin: 4px 0 0;
}

.insight-tile-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    border-top: 1px solid var(--insight-line);
}

.insight-tile-row:first-child {
    border-top: none;
}

.insight-tile-row dt {
    min-width: 0;
    font-weight: 400;
    color: var(--insight-note);
}

/* Row values in the body font: quieter than the bold headline values */
.insight-tile-row dd {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    text-align: right;
    color: var(--insight-row-value);
}

/* A row that opens something: the value as normal, a small orange chevron, and orange on hover (orange is for links) */
.insight-tile-row-link,
a.insight-tile-row-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: right;
    color: var(--insight-row-value);
    text-decoration: none;
    cursor: pointer;
}

.insight-tile-row-link:hover,
.insight-tile-row-link:focus-visible {
    color: var(--insight-accent);
    text-decoration: underline;
}

.insight-tile-row-link i {
    margin-left: 0.3rem;
    font-size: 0.55rem;
    vertical-align: 1px;
    color: var(--insight-accent);
}

/* A row's tone still shows on its link, e.g. amber when over an allowance */
.insight-tile-row.is-look .insight-tile-row-link  { color: var(--insight-look); }
.insight-tile-row.is-wrong .insight-tile-row-link { color: var(--insight-wrong); }

.insight-tile-row.is-empty dd { font-family: inherit; font-weight: 400; color: var(--insight-empty); }
.insight-tile-row.is-ok dd    { color: var(--insight-ok); }
.insight-tile-row.is-look dd  { color: var(--insight-look); }
.insight-tile-row.is-wrong dd { color: var(--insight-wrong); }
.insight-tile-row.is-info dd  { color: var(--insight-info); }

/* --- Group tiles: a faint tray holding small white tiles in its own grid --- */
.insight-tile--group {
    gap: 6px;
    padding: 8px;
    background: var(--insight-surface);
    box-shadow: none;
}

.insight-tile-inner > .insight-tile {
    box-shadow: none;
}

.insight-tile--group > .insight-tile-key {
    padding: 2px 4px 0;
}

.insight-tile-inner {
    display: grid;
    grid-template-columns: repeat(var(--insight-columns, 2), minmax(0, 1fr));
    gap: 6px;
}

.insight-tile-inner > .insight-tile {
    grid-column: span 1;
}

/* A toned group: its key line takes the tone's colour (tray and edge stay; inner tiles keep their own tones) */
.insight-tile--group.is-ok    > .insight-tile-key, .insight-tile--group.is-ok    > .insight-tile-key i { color: var(--insight-ok); }
.insight-tile--group.is-look  > .insight-tile-key, .insight-tile--group.is-look  > .insight-tile-key i { color: var(--insight-look); }
.insight-tile--group.is-wrong > .insight-tile-key, .insight-tile--group.is-wrong > .insight-tile-key i { color: var(--insight-wrong); }
.insight-tile--group.is-info  > .insight-tile-key, .insight-tile--group.is-info  > .insight-tile-key i { color: var(--insight-info); }
.insight-tile--group.is-muted > .insight-tile-key, .insight-tile--group.is-muted > .insight-tile-key i { color: var(--insight-muted); }

/* --- Graphics --- */
.insight-tile-bar {
    height: 5px;
    margin: 4px 0 2px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--insight-track);
}

.insight-tile-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--insight-accent);
}

.insight-tile-level {
    display: flex;
    gap: 3px;
    margin: 4px 0 2px;
}

.insight-tile-level span {
    flex: 1 1 0;
    height: 6px;
    border-radius: 2px;
    background: var(--insight-track);
}

.insight-tile-level span.is-on {
    background: var(--insight-accent);
}

.insight-tile-columns {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
    margin: 4px 0 2px;
}

.insight-tile-columns span {
    flex: 1 1 0;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--insight-accent);
}

.insight-tile-columns span.is-zero {
    background: var(--insight-track);
}

/* A graphic's tone replaces the accent */
.insight-tile-bar.is-ok span, .insight-tile-level.is-ok span.is-on, .insight-tile-columns.is-ok span:not(.is-zero) { background: var(--insight-ok); }
.insight-tile-bar.is-look span, .insight-tile-level.is-look span.is-on, .insight-tile-columns.is-look span:not(.is-zero) { background: var(--insight-look); }
.insight-tile-bar.is-wrong span, .insight-tile-level.is-wrong span.is-on, .insight-tile-columns.is-wrong span:not(.is-zero) { background: var(--insight-wrong); }
.insight-tile-bar.is-info span, .insight-tile-level.is-info span.is-on, .insight-tile-columns.is-info span:not(.is-zero) { background: var(--insight-info); }
.insight-tile-bar.is-test span, .insight-tile-level.is-test span.is-on, .insight-tile-columns.is-test span:not(.is-zero) { background: var(--insight-test); }
.insight-tile-level.is-over span.is-on { background: var(--insight-look); }

/* --- Dark mode --- */
html[data-theme="dark"] .insight-tiles {
    --insight-bg: #1a1a19;
    --insight-bg-hover: #222120;
    --insight-icon: #8f7a66;
    --insight-surface: #141413;
    --insight-shadow: none;
    --insight-key: #c9a37f;
    --insight-value: #d3cec6;
    --insight-row-value: #d3cec6;
    --insight-note: #c3b4a3;
    --insight-empty: #8f8172;
    --insight-track: #34302b;
    --insight-border: rgba(255, 255, 255, 0.10);
    --insight-line: rgba(201, 163, 127, 0.16);
    --insight-ok: #2bbf9f;
    --insight-ok-bg: #11260f;
    --insight-look: #db9300;
    --insight-look-bg: #311a00;
    --insight-wrong: #ec7e7e;
    --insight-wrong-bg: #3c0e0e;
    --insight-info: #8fb4e8;
    --insight-info-bg: #16202c;
    --insight-muted: #b0a597;
    --insight-muted-bg: #3a3029;
}