/**
 * css/targets.css — Core KPI vs Targets section. Version: 1.1.0 (Phase 20.1, T8).
 *
 * Phase 20.1: the green and red status colours are now CONSUMED from
 * css/targets-cards.css's --rag-*-text tokens, with the previous literals kept
 * as fallbacks so this stylesheet still degrades correctly if it is ever loaded
 * without that file. One palette, one definition — targets.html is pixel
 * unchanged, because the tokens carry the same hexes.
 *
 * One stylesheet for all NINE surfaces: the six brand dashboards (css/dashboard.css
 * palette) and the three group dashboard views (css/group-dashboard.css palette).
 * That works because both palettes expose the same custom properties — --card-bg,
 * --border, --text, --text-muted, --text-dim — in both light and dark. Nothing here
 * hard-codes a surface colour except the three RAG hues, which are semantic and
 * deliberately brand-independent (an amber that changed per brand would be unreadable
 * as a status).
 *
 * British English. Every rule that sets display/flex/grid on an element that can also
 * carry [hidden] is :not([hidden])-scoped, because ID and class specificity both beat
 * the UA [hidden] rule (Locked Decision #14).
 */

/* ============ Section shell ============ */

.targets-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 14px);
    padding: 1.15rem 1.35rem 1.35rem;
    margin-bottom: 1.5rem;
    transition: opacity 0.25s ease;
}
/* The section is never hidden — only de-emphasised — when a client filter is on,
   because the targets remain true and brand-wide (D8). */
.targets-section--deemphasised { opacity: 0.62; }

.targets-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.9rem;
}
.targets-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}
.targets-source {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.targets-week {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}

/* ============ Table ============ */

.targets-table-wrap { overflow-x: auto; }

.targets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.targets-table th,
.targets-table td {
    padding: 0.55rem 0.7rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.targets-table th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.targets-table th:first-child,
.targets-table td:first-child {
    text-align: left;
    white-space: normal;
}
.targets-table tbody tr:last-child th,
.targets-table tbody tr:last-child td { border-bottom: none; }

.targets-metric {
    font-weight: 600;
    color: var(--text);
}
.targets-value,
.targets-target-main,
.targets-variance,
.targets-wow {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
}
.targets-variance--over { color: #EF4444; }
.targets-variance--under { color: #22C55E; }
.targets-wow--none { color: var(--text-dim); }

/* Secondary + Best Practice shown alongside the governing tier (D6) — reference
   only, never a selector.
   Phase 20.1 (T20): no renderer emits this class any more — one active tier per
   group replaced the three-tier display (D18/D19). Kept for the same reason as
   .targets-status--amber below: reversible in one place. */
.targets-tier-ref {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}

/* ============ RAG status ============
   Colour is never the only channel: each status carries a distinct GLYPH and its
   text label too (A14), so the table survives greyscale and colour blindness.

   Contrast (T37, measured as the tint composited over each card colour — group
   #F7FAFD and brand #FFFFFF — at 12px/600, which is NORMAL text for WCAG, not
   large): every pair clears AA 4.5:1.
     light  green #166534 6.17   amber #92400E 6.11   red #B91C1C 5.30
     dark   green #4ADE80 8.45   amber #FBBF24 8.50   red #F87171 5.81
   The light green and amber were #15803D and #B45309, which measured 4.34 and
   4.33 — just under AA. Darkened one step rather than left at "looks fine". */

.targets-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.targets-status-glyph { font-size: 0.7rem; line-height: 1; }

.targets-status--green {
    color: var(--rag-green-text, #166534);
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
}
/* Phase 20.1: NO renderer emits this class any more — displayStatus() collapses
   amber to red on every surface (D5/D6). It stays here, dead but harmless, so
   reversing that decision is one change in js/targets-evaluate.js rather than a
   palette archaeology exercise (UI-CONTRACT §11). */
.targets-status--amber {
    color: #92400E;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.4);
}
.targets-status--red {
    color: var(--rag-red-text, #B91C1C);
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.38);
}
.targets-status--unknown {
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
}
/* Dark theme needs lighter text on the same tinted pills to hold contrast. */
[data-theme="dark"] .targets-status--green { color: var(--rag-green-text, #4ADE80); }
[data-theme="dark"] .targets-status--amber { color: #FBBF24; }
[data-theme="dark"] .targets-status--red { color: var(--rag-red-text, #F87171); }

/* ============ Charts ============ */

.targets-charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}
.targets-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 14px);
    padding: 0.85rem 0.9rem 0.9rem;
    min-width: 0;
}
.targets-chart-title {
    margin: 0 0 0.15rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}
.targets-chart-formula {
    margin: 0 0 0.6rem;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-dim);
}
.targets-chart-canvas-wrap {
    position: relative;
    height: 160px;
}

/* ============ Forecast + notes ============ */

.targets-forecast {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text);
}
.targets-forecast-method {
    margin-top: 0.2rem;
    font-size: 0.67rem;
    color: var(--text-dim);
    line-height: 1.35;
}

/* [hidden]-scoped conditional regions (Locked Decision #14). */
.targets-note:not([hidden]) {
    display: block;
    margin-top: 0.85rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}
.targets-shortfall:not([hidden]) {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.targets-forecast-value:not([hidden]) { display: block; }
.targets-forecast-insufficient:not([hidden]) {
    display: block;
    color: var(--text-muted);
}
.targets-loading:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ============ Responsive ============ */

@media (max-width: 900px) {
    .targets-charts { grid-template-columns: 1fr; }
    .targets-chart-canvas-wrap { height: 180px; }
}
@media (max-width: 640px) {
    .targets-section { padding: 1rem 0.9rem 1.1rem; }
    .targets-table { font-size: 0.8rem; }
    .targets-table th,
    .targets-table td { padding: 0.45rem 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .targets-section { transition: none; }
}