/* ============================================================
   portal-custom.css
   ============================================================
   Custom styles for the Data Collection Portal that live ON TOP
   of Radzen's Material 3 theme. The theme variables (--rz-primary,
   --rz-success, etc.) are already provided by material3-base-overrides.css.

   Include AFTER the Radzen theme stylesheets:

     <link href="_content/Radzen.Blazor/css/material3-base.css"            rel="stylesheet" />
     <link href="_content/Radzen.Blazor/css/material3-base-overrides.css"  rel="stylesheet" />
     <link href="css/portal-custom.css"                                    rel="stylesheet" />

   ============================================================ */

/* <FocusOnNavigate Selector="h1"> (App.razor) programmatically focuses the page heading on
   every navigation for accessibility, which makes the browser paint a focus outline (a "black
   box") around the title until focus moves. The <h1> has tabindex=-1 (focused only
   programmatically, never a keyboard tab-stop), so suppressing the ring has no keyboard UX cost
   and keeps the screen-reader benefit. */
h1:focus {
    outline: none;
}

/* Shell chrome is the SDK's now: the brand renders top-left in EwAppShell's full-width top bar
   (inline-styled in MainLayout), and the nav is EwTwoTierNav (slim rail + standing panel) which
   owns its own scoped CSS + collapse. So the old .portal-brand and .ew-app-sidebar.ew-collapsed
   rules were removed -- nothing portal-specific styles the shell anymore. */

/* ---------- KPI tile (used on Home + Validate + Certify) ---------- */
.kpi-tile {
    background: var(--rz-base-lighter);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 6px;
    position: relative; overflow: hidden;
}
.kpi-tile .kpi-label {
    color: var(--rz-base-700); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.kpi-tile .kpi-value {
    font-size: 28px; font-weight: 700;
    color: var(--rz-base-900); line-height: 1.1;
}
.kpi-tile .kpi-sub { font-size: 12px; color: var(--rz-base-700); }

/* ---------- Validate-style summary card row ---------- */
.vs-card { padding: 14px 16px; }
.vs-card .vs-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--rz-base-700);
    margin-bottom: 6px;
}
.vs-card .vs-value {
    font-size: 20px; font-weight: 700;
    color: var(--rz-base-900);
}
.vs-card .vs-sub { font-size: 12px; color: var(--rz-base-700); }

/* (The old .vrule-row Validate findings-table rules were removed: the findings list was refit
   onto EwDataGrid (Clean variant, paging off) like the app's other flat lists, so the
   hand-rolled grid/header/row CSS was dead.) */

/* ---------- Certify per-domain rows ---------- */
.cert-row {
    display: grid;
    grid-template-columns: 44px 1fr 160px 200px 32px;
    align-items: center; gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rz-base-300);
    cursor: pointer;
    transition: background 120ms;
    position: relative;
}
.cert-row:last-child { border-bottom: none; }
.cert-row:hover { background: var(--rz-base-100); }
.cert-row.checked { background: rgba(56,106,32,0.06); }
.cert-row.checked::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--rz-success);
}
.cert-row.blocked { background: rgba(227,80,106,0.04); }
.cert-row.blocked::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--rz-danger);
}
.cert-row .cert-icon {
    width: 40px; height: 40px;
    border-radius: var(--rz-border-radius);
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    display: grid; place-items: center;
}
.cert-row .cert-name { font-size: 14px; font-weight: 600; }
.cert-row .cert-sub { font-size: 12px; color: var(--rz-base-700); margin-top: 2px; }
.cert-row .cert-counts {
    display: flex; gap: 14px; font-size: 12px;
}
.cert-row .cc-block { display: flex; flex-direction: column; }
.cert-row .cc-block .cc-v { font-weight: 700; font-size: 14px; }
.cert-row .cc-block .cc-v.err { color: var(--rz-danger); }
/* warning AS TEXT: base --rz-warning (#f5aa00) is only 1.98:1 on #fff -- it is calibrated
   for FILLS (dark on-warning text over it = 8.55:1), not for colored text. Use the -dark
   role (#7f5600 = 5.99:1 on base-100) for the colored count. Theme-safe: in dark mode
   --rz-warning-dark resolves to #e39e00, which is high-contrast on the dark surface. */
.cert-row .cc-block .cc-v.warn { color: var(--rz-warning-dark); }
.cert-row .cc-block .cc-l {
    color: var(--rz-base-700); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.4px;
}

/* ---------- Domain tag (Review toolbar) ---------- */
.domain-tag-lg {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 12px;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    border: 1px solid var(--rz-primary-light);
    border-radius: 16px;
    font-weight: 600; font-size: 13px;
}

/* ---------- External-link cards (SEA Resources) ---------- */
/* (The old .ext-link-pill rule was removed: the "External" marker on Home is now the SDK's
   EwChip (Icon="open_in_new", warning tone), so the hand-rolled pill CSS was dead.) */
.ext-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.ext-link-card {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    text-decoration: none;
    color: var(--rz-base-900);
    background: var(--rz-base-lighter);
    transition: transform 120ms, box-shadow 120ms, border-color 120ms;
}
.ext-link-card:hover {
    border-color: var(--rz-primary);
    box-shadow: 0 4px 12px rgba(37,95,164,0.10);
    transform: translateY(-1px);
    text-decoration: none;
}
.ext-link-card .ext-link-icon {
    width: 40px; height: 40px;
    border-radius: var(--rz-border-radius);
    background: var(--rz-primary-lighter); color: var(--rz-primary);
    display: grid; place-items: center; flex-shrink: 0;
}
.ext-link-card .ext-link-title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 14px;
}
.ext-link-card .ext-link-sub {
    font-size: 12px; color: var(--rz-base-700);
    margin-top: 4px; line-height: 1.45;
}
.ext-link-card .ext-link-host {
    font-size: 11px; color: var(--rz-primary);
    margin-top: 8px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---------- Reports library ---------- */
.report-cat-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: var(--rz-base-100);
    border-top: 1px solid var(--rz-base-300);
    border-bottom: 1px solid var(--rz-base-300);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--rz-base-700); font-weight: 700;
}
.report-cat-head:first-child { border-top: none; }
.report-cat-head .report-cat-count {
    margin-left: auto; font-weight: 400; text-transform: none;
    letter-spacing: normal; font-size: 11px;
}
.report-row {
    display: grid;
    grid-template-columns: 44px 1fr 160px 160px 160px;
    align-items: center; gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rz-base-300);
}
.report-row:hover { background: var(--rz-base-100); }
.report-row .report-icon {
    width: 40px; height: 40px;
    border-radius: var(--rz-border-radius);
    background: var(--rz-primary-lighter); color: var(--rz-primary);
    display: grid; place-items: center;
}
.report-row .report-name { font-weight: 600; font-size: 14px; }
.report-row .report-desc { font-size: 12px; color: var(--rz-base-700); margin-top: 3px; }
.report-fmt-chip {
    display: inline-flex; align-items: center;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-300);
    font-size: 10.5px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

/* ---------- Validate domain rail (in-page version, kept as fallback) ---------- */
.review-shell {
    display: grid; grid-template-columns: 280px 1fr;
    gap: 16px; align-items: start;
}
.review-rail {
    background: var(--rz-base-lighter);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

/* (The old .sy-row school-year picker styles were removed: School Year Management was
   refitted onto EwSplitPane + EwSelectableList, so those rules were dead CSS -- and they
   carried hardcoded navy/blue hex that would not re-skin per client palette.) */