/* =========================================================================
   Shared document-validation grid styling.

   Scope: every grid rule is namespaced under `.validate-grid`, a wrapper now
   applied to ALL three validation page types — the enum-driven scorecard pages
   (ValidateGenericScorecard / ValidateGenericScorecardQSE), the certificate page
   (ValidateCertificate) and the affidavit page (ValidateAffidavit). Those pages
   already render the same shared child components (ScorecardSectionPanel /
   IndicatorRow / IndicatorTableHeader / the per-doc info panels) and emit the same
   class names (tr-th-headers, td-label, td-field, scorecard-subtotal-row,
   scorecard-group-header) — the wrapper is what makes these rules match.

   This sheet is non-isolated (linked in App.razor), so plain descendant selectors
   reach the markup rendered by the shared child components. No ::deep is needed.

   Per-sector theming is driven by the `validate-grid-<theme>` modifier class; the
   colours mirror the --<sector>-* variables in app.css.

   The docked bottom control bar (.<theme>-controlpanel + .<theme>-controlpanel-btn)
   and the top-bar "Document Details" toggle (.<theme>-controlpanel-btn) are
   SCORECARD-ONLY chrome — the razor selects the per-theme variant via
   @Theme.ToString().ToLower(); certificate/affidavit pages do not render them.
   ========================================================================= */

.validate-grid {
    /* Theme hooks — overridden per sector below; default to the national blue. */
    --sc-accent: #2B4C81;
    --sc-accent-soft: hsl(216, 40%, 90%);
    --sc-border: #d8dee8;
    --sc-header-bg: #eef2f7;
    --sc-subtotal-bg: #dde6f2;
    --sc-row-height: 40px;
    /* Control-bar button fill — a darker member of the sector family so the buttons
       read clearly on the accent-coloured bar. Overridden per theme below. */
    --sc-button: #043B57;

    font-size: 13px;
}

.validate-grid-forestry {
    --sc-accent: #7A9E3E;
    --sc-accent-soft: hsl(87, 40%, 90%);
    --sc-subtotal-bg: hsl(87, 35%, 86%);
    --sc-button: #4F6B27;
}

.validate-grid-financial {
    --sc-accent: #3F2076;
    --sc-accent-soft: hsl(255, 40%, 90%);
    --sc-subtotal-bg: hsl(255, 35%, 88%);
    --sc-button: #2A1452;
}

/* property / nbd / default keep the blue defaults declared above. */

/* ---- Section header bar (Syncfusion accordion header) ------------------- */
.validate-grid .e-acrdn-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    background-image: none !important;
    background-color: var(--sc-accent) !important;
    color: #fff !important;
    border: none !important;
    letter-spacing: 0.4px;
}

.validate-grid .e-acrdn-header .e-acrdn-header-content,
.validate-grid .e-acrdn-header b {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px;
    text-transform: uppercase;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

.validate-grid .e-acrdn-header .e-toggle-icon,
.validate-grid .e-acrdn-header .e-tgl-collapse-icon {
    color: #fff !important;
}

/* Keep the expand/collapse chevron visible against the coloured bar. */
.validate-grid .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header {
    background-color: var(--sc-accent) !important;
}

.validate-grid .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    padding: 0 !important;
}

/* ---- Table shell -------------------------------------------------------- */
.validate-grid .table {
    width: 100% !important;
    margin: 0 0 14px 0;
    border-collapse: collapse;
    background-color: #fff;
}

.validate-grid .table th,
.validate-grid .table td {
    border: 1px solid var(--sc-border) !important;
    vertical-align: middle !important;
}

/* ---- Column header row -------------------------------------------------- */
.validate-grid .tr-th-headers th {
    background-color: var(--sc-accent-soft);
    color: #1f2937;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    height: 34px;
    padding: 6px 8px;
    border-bottom: 2px solid var(--sc-accent) !important;
}

/* SCORECARD TOTALS row mirrors the legacy markup (tr-th-headers with <td> cells, not <th>):
   give the label cell the same header-band treatment so it reads as a summary line. */
.validate-grid .tr-th-headers > td {
    background-color: var(--sc-subtotal-bg);
    color: #15233b;
    font-weight: 700;
    padding: 8px 12px;
    border-top: 2px solid var(--sc-accent) !important;
}

/* A bare label cell whose only content is a <b> (<td><b>…</b></td>, no class) carries
   no cell padding — the <b> child holds the visual weight. Overrides the .tr-th-headers
   > td padding above for these class-less totals cells. */
.validate-grid td:not([class]):has(> b) {
    padding: 0 !important;
}

/* ---- Indicator rows ----------------------------------------------------- */
.validate-grid .td-label {
    padding: 8px 12px;
    line-height: 1.3;
    white-space: normal;       /* let long indicator names wrap instead of overlapping */
    word-break: break-word;
    color: #1f2937;
}

.validate-grid .td-field {
    margin: 0 !important;       /* legacy used margin:10px which broke cell alignment */
    padding: 4px 8px;
}

.validate-grid .td-field .e-numerictextbox,
.validate-grid .td-field .e-input-group,
.validate-grid .td-field .e-control-wrapper {
    width: 100% !important;
}

.validate-grid tbody tr:hover td {
    background-color: #f6f9fd;
}

/* ---- Group header band (e.g. Bonus group) ------------------------------ */
.validate-grid .scorecard-group-header td {
    background-color: var(--sc-header-bg) !important;
    padding: 7px 12px !important;
    font-size: 12px;
    border-top: 1px solid var(--sc-border) !important;
}

/* ---- Category sub-total row -------------------------------------------- */
.validate-grid .scorecard-subtotal-row td {
    background-color: var(--sc-subtotal-bg);
    border-top: 2px solid var(--sc-accent) !important;
    height: 36px;
    font-weight: 700;
}

.validate-grid .scorecard-subtotal-row .td-label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #15233b;
    padding: 4px 12px !important; /* even padding on the whole cell (!important beats the inherited bootstrap td rule) */
    word-break: normal;          /* don't slice words mid-character ("ENTERPRIS|E") */
    overflow-wrap: break-word;   /* wrap between words; break a word only as a last resort */
    hyphens: none;
}

.validate-grid .td-subtotal-value {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: #15233b;
}

/* ---- Page title in the coloured header bar ------------------------------ */
.page-content-title {
    font-weight: 800;
    color: #fff;
}

/* ---- Docked bottom control bar (scorecard pages only) ------------------- */
/* Save Data (left) / Extract Data (right). In-flow as the last child of the page
   so the middle splitter scales above it (the page sets the body height to
   calc(100% - 116px) = 60px header + 56px bar). The bar follows the active sector:
   the razor picks the matching prefixed class (e.g. .forestry-controlpanel) via
   @Theme.ToString().ToLower(), and each block reads that sector's app.css :root
   variables directly (--<theme>-primary for the bar, --<theme>-landing-button for
   the buttons) — no --sc-accent indirection. */
.nbd-controlpanel,
.forestry-controlpanel,
.financial-controlpanel,
.property-controlpanel {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.14);
}

.nbd-controlpanel {
    background: var(--nbd-primary);
}

.forestry-controlpanel {
    background: var(--forestry-primary);
}

.financial-controlpanel {
    background: var(--financial-primary);
}

.property-controlpanel {
    background: var(--property-primary);
}

/* Button geometry is shared across themes; only the fill differs per sector below. */
.nbd-controlpanel-btn.e-btn,
.forestry-controlpanel-btn.e-btn,
.financial-controlpanel-btn.e-btn,
.property-controlpanel-btn.e-btn {
    height: 40px;
    min-width: 150px;
    padding: 0 22px !important;
    border: none !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.nbd-controlpanel-btn.e-btn {
    background-color: var(--nbd-landing-button) !important;
}

.forestry-controlpanel-btn.e-btn {
    background-color: var(--forestry-landing-button) !important;
}

.financial-controlpanel-btn.e-btn {
    background-color: var(--financial-landing-button) !important;
}

.property-controlpanel-btn.e-btn {
    background-color: var(--property-landing-button) !important;
}

/* Colour-agnostic button states — apply regardless of theme. */
.nbd-controlpanel-btn.e-btn .e-btn-icon,
.forestry-controlpanel-btn.e-btn .e-btn-icon,
.financial-controlpanel-btn.e-btn .e-btn-icon,
.property-controlpanel-btn.e-btn .e-btn-icon {
    color: #fff !important;
}

.nbd-controlpanel-btn.e-btn:hover:not([disabled]),
.forestry-controlpanel-btn.e-btn:hover:not([disabled]),
.financial-controlpanel-btn.e-btn:hover:not([disabled]),
.property-controlpanel-btn.e-btn:hover:not([disabled]) {
    filter: brightness(1.12);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.nbd-controlpanel-btn.e-btn[disabled],
.forestry-controlpanel-btn.e-btn[disabled],
.financial-controlpanel-btn.e-btn[disabled],
.property-controlpanel-btn.e-btn[disabled] {
    opacity: 0.5;
    box-shadow: none;
}

/* BEE-064: stage chip — soft-tinted pill driven by the stage colour passed in via the inline
   --stage-colour custom property (DocumentStage.BadgeColour). The fill is an OPAQUE light tint
   (mixed with white, not transparent) so the pill keeps high contrast on BOTH the dark theme header
   and the white panel card — a transparent tint let the dark header bleed through and washed the
   text out. The border and text are stronger mixes of the same hue. Used by the header chip (with
   .stage-chip-lg) and the Document Details panel chip (base size). */
.stage-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 3px 12px;
    background: color-mix(in srgb, var(--stage-colour) 16%, white);
    color: color-mix(in srgb, var(--stage-colour) 72%, black);
    border: 1px solid color-mix(in srgb, var(--stage-colour) 50%, white);
}

.stage-chip > i {
    font-size: 0.95em;
    line-height: 1;
}

.stage-chip-lg {
    font-size: 0.9rem;
    padding: 7px 18px;
    gap: 8px;
    letter-spacing: 0.04em;
}