/* RegSphere — shared styles for list, detail, and grid cells.
   Scope-free (loaded globally from App.razor) because pill spans are rendered
   inside DevExpress cell templates that live outside razor CSS isolation. */

:root {
    --rs-navy:        #0a3d62;
    --rs-teal:        #00a896;
    --rs-blue:        #1a6fd4;
    --rs-amber:       #d97706;
    --rs-red:         #dc2626;
    --rs-green:       #059669;
    --rs-bg:          #f0f4f8;
    --rs-card:        #ffffff;
    --rs-border:      #e2e8f0;
    --rs-text:        #1a1a2e;
    --rs-text-mid:    #4a5568;
    --rs-text-light:  #94a3b8;
}

/* =========================================================
   Sub-nav — sibling links across top-level RegSphere pages
   ========================================================= */
.rs-subnav {
    display: flex; gap: 0; align-items: stretch;
    padding: 0 20px;
    background: var(--rs-card);
    border-bottom: 1px solid var(--rs-border);
}
.rs-subnav__link {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--rs-text-mid);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.1s ease, border-color 0.1s ease;
}
.rs-subnav__link:hover {
    color: var(--rs-navy);
}
.rs-subnav__link--active {
    color: var(--rs-navy);
    font-weight: 600;
    border-bottom-color: var(--rs-teal);
}

/* =========================================================
   KPI cards — above the case list, clickable to filter
   ========================================================= */
.rs-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
    padding: 0 20px 12px;
    background: #fff;
}
.rs-kpi {
    background: var(--rs-card);
    border: 1px solid var(--rs-border);
    border-left: 4px solid var(--rs-teal);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    display: flex; flex-direction: column; gap: 2px;
}
.rs-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(10,61,98,0.12);
}
.rs-kpi.rs-kpi-active {
    background: #f0f9f7;
    border-left-color: var(--rs-teal);
    box-shadow: 0 0 0 2px rgba(0,168,150,0.25);
}
.rs-kpi-label { font-size: 11px; color: var(--rs-text-mid); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.rs-kpi-value { font-size: 22px; font-weight: 700; color: var(--rs-navy); line-height: 1.1; }
.rs-kpi-sub   { font-size: 11px; color: var(--rs-text-light); }

/* Accent variants — left border colour per KPI */
.rs-kpi-total    { border-left-color: var(--rs-navy); }
.rs-kpi-open     { border-left-color: var(--rs-blue); }
.rs-kpi-due      { border-left-color: var(--rs-amber); }
.rs-kpi-overdue  { border-left-color: var(--rs-red); }
.rs-kpi-filed    { border-left-color: var(--rs-teal); }

/* =========================================================
   Filter bar
   ========================================================= */
.rs-filter-bar {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    padding: 10px 20px;
    background: var(--rs-card);
    border-top: 1px solid var(--rs-border);
    border-bottom: 1px solid var(--rs-border);
}
.rs-filter-bar label { font-size: 11px; color: var(--rs-text-mid); margin-right: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.rs-filter-field { min-width: 180px; }

/* =========================================================
   Status pill — used in grid cells AND detail header
   ========================================================= */
.rs-status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 10px; border-radius: 11px;
    font-size: 11px; font-weight: 600;
    min-width: 100px;
    letter-spacing: 0.2px;
}
.rs-status-not_started      { background: #e2e8f0; color: var(--rs-text-mid); }
.rs-status-in_progress      { background: #dbeafe; color: var(--rs-blue); }
.rs-status-under_review     { background: #fef3c7; color: var(--rs-amber); }
.rs-status-evidence_required{ background: #fee2e2; color: var(--rs-red); }
.rs-status-ready_for_filing { background: #d1fae5; color: var(--rs-green); }
.rs-status-filed            { background: var(--rs-teal); color: #fff; }
.rs-status-overdue          { background: var(--rs-red); color: #fff; }
.rs-status-cancelled        { background: #e5e7eb; color: #6b7280; text-decoration: line-through; }
.rs-status-reopened         { background: #ede9fe; color: #6b46c1; }

/* =========================================================
   Regime badge — ES / FATCA / CRS / FISC
   ========================================================= */
.rs-regime-pill {
    display: inline-block;
    padding: 2px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    min-width: 54px; text-align: center;
}
.rs-regime-es            { background: #e6f7f5; color: #00876e; border: 1px solid rgba(0,168,150,0.25); }
.rs-regime-fatca         { background: #ede9fe; color: #6b46c1; border: 1px solid rgba(107,70,193,0.25); }
.rs-regime-crs           { background: #dbeafe; color: var(--rs-blue); border: 1px solid rgba(26,111,212,0.25); }
.rs-regime-fiscalisation { background: #fef3c7; color: var(--rs-amber); border: 1px solid rgba(217,119,6,0.25); }

/* =========================================================
   Evidence flag indicator — Missing / Inconsistent / Risk
   Rendered via CellCssClassFunc in MyDxGrid. ✓ = flag cleared,
   coloured label = flag set.
   ========================================================= */
.rs-flag-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; min-width: 70px;
    letter-spacing: 0.3px;
}
.rs-flag-ok      { background: #d1fae5; color: #065f46; }   /* green tick */
.rs-flag-missing { background: #fee2e2; color: var(--rs-red); }
.rs-flag-warn    { background: #fef3c7; color: var(--rs-amber); }
.rs-flag-risk    { background: #fee2e2; color: #fff; background: var(--rs-red); }

/* Evidence progress pill — list column rendering "2/3" / "N/A". Colour
   classes are applied by EvidencePillClass based on collected vs required. */
.rs-ev-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 700; min-width: 52px;
    font-variant-numeric: tabular-nums;
}
.rs-ev-ok       { background: #d1fae5; color: #065f46; }
.rs-ev-partial  { background: #fef3c7; color: var(--rs-amber); }
.rs-ev-missing  { background: #fee2e2; color: var(--rs-red); }
.rs-ev-na       { background: #f1f5f9; color: #64748b; }

/* FISC Invoice Stream — transmission-state pill. Only renders on the FISC tab. */
.rs-fisc-state-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 10px; border-radius: 10px;
    font-size: 10px; font-weight: 700; min-width: 90px;
    letter-spacing: 0.3px;
}
.rs-fisc-state-queued       { background: #f1f5f9; color: #64748b; }
.rs-fisc-state-acknowledged { background: #d1fae5; color: #065f46; }
.rs-fisc-state-rejected     { background: #fee2e2; color: var(--rs-red); }
.rs-fisc-state-cancelled    { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }

/* FISC missing-TIN flag in the column — red text without a full pill so the
   grid stays readable but the gap is unmissable. */
.rs-fisc-tin-missing { color: var(--rs-red); font-style: italic; font-weight: 600; }

/* Muted explanatory caption sitting above FISC grids. */
.rs-tab-caption          { font-size: 12px; color: #4b5563; padding: 4px 2px 10px; }
.rs-tab-caption--muted   { color: #6b7280; font-style: italic; }

/* =========================================================
   Case detail header — navy gradient + meta-grid
   ========================================================= */
.rs-case-header {
    background: linear-gradient(135deg, #0a3d62 0%, #0d4b78 100%);
    color: #fff;
    padding: 16px 22px;
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 10px;
    margin: 12px 20px 0;
}
.rs-case-header__top {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.rs-case-header__breadcrumb a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 12px;
}
.rs-case-header__breadcrumb a:hover { color: #fff; }
.rs-case-header__title {
    margin: 0;
    font-size: 20px; font-weight: 600;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rs-case-header__ref {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    padding: 2px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
}
.rs-case-header__meta {
    display: flex; gap: 22px; flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 10px 0 0;
}
.rs-case-header__meta__item { display: flex; flex-direction: column; gap: 2px; }
.rs-case-header__meta__label { font-size: 10px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.5px; }
.rs-case-header__meta__value { font-size: 13px; font-weight: 600; }