/* ============================================================
   Module shell — the house language every workspace module uses.

   pill subnav → gradient hero → stat row → section heading → cards

   Office Management wrote this pattern first (om-*); it is lifted here so
   Inventory Monitoring, Corporate Specifications, QC Laboratory Monitoring and
   Office Management all render the same chrome instead of four look-alikes that
   drift apart. A module supplies only its accent by adding one modifier class
   to .mod-page; everything else is shared.

   Built on the style.css semantic tokens, so both themes work.
   Module-specific content components stay in each module's own stylesheet.
   ============================================================ */

.mod-page {
    max-width: 1440px;
    margin: auto;
    padding: 28px 30px 48px;
    --mod-accent: var(--module-accent, #1f4fa8);
    --mod-accent-strong: var(--module-accent-strong, #1d4ed8);
    --mod-tint: color-mix(in srgb, var(--mod-accent) 6%, var(--surface));
    --mod-tint-strong: color-mix(in srgb, var(--mod-accent) 11%, var(--surface));
    --mod-hero-1: var(--mod-tint-strong);
    --mod-hero-2: var(--mod-tint);
    --mod-hero-3: color-mix(in srgb, var(--mod-accent) 4%, var(--surface));
    --mod-hero-shadow: color-mix(in srgb, var(--mod-accent) 12%, transparent);
    --mod-on-accent: var(--module-on-accent, #fff);
}

/* ── Module subnav ───────────────────────────────────────────── */

.mod-app-home-link {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--mod-accent);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .16em;
}

.mod-app-home-link:hover {
    color: var(--mod-accent-strong);
}

.mod-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.mod-nav a {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 9px 15px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s, color .16s, background .16s;
}

.mod-nav a:hover {
    border-color: var(--mod-accent);
    color: var(--mod-accent);
}

.mod-nav a.is-active {
    border-color: var(--mod-accent);
    background: var(--mod-accent);
    color: var(--mod-on-accent);
}

/* Count of items waiting on the reader in that section — currently the
   password reset queue, where an unseen request is a person locked out. */
.mod-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.mod-nav a.is-active .mod-nav-badge {
    background: var(--mod-on-accent);
    color: var(--mod-accent);
}

/* ── Hero ────────────────────────────────────────────────────── */

/* The module header follows the home page identity bar: no card, no
   display serif, a compact title over a muted meta line, and a thin
   accent rule underneath. Only the accent hue changes per module. */
.mod-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0 0 .95rem;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text);
}

.mod-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        var(--mod-accent) 45%,
        var(--mod-accent-strong) 100%
    );
}

.mod-hero > div:first-child { min-width: 0; }

.mod-hero h1 {
    margin: .3rem 0 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.2;
    color: var(--text);
}

/* Module headings are authored as `Word<br><em>Word</em>`. The bar wants
   one line, so the break is dropped and the emphasis reads as plain text. */
.mod-hero h1 br { display: none; }

.mod-hero h1 em {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
}

.mod-hero h1 em::before { content: " "; }

.mod-hero p {
    max-width: 720px;
    margin: .45rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--muted);
}

.mod-kicker,
.mod-hero aside span,
.mod-section-heading > div > span {
    display: block;
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .75;
    font-weight: 700;
}

.mod-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .68rem;
    letter-spacing: .18em;
    opacity: 1;
    color: var(--mod-accent-strong);
}

/* The stat aside becomes the bar's right-hand readout, like the home
   page's "last refreshed" block: micro label over value, right aligned. */
.mod-hero aside {
    display: grid;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    text-align: right;
}

.mod-hero aside span {
    font-size: .62rem;
    letter-spacing: .1em;
    opacity: 1;
    color: var(--muted);
}

.mod-hero aside strong {
    display: block;
    margin: .1rem 0 .6rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text);
}

.mod-hero aside hr { display: none; }

.mod-hero aside strong:last-of-type { margin-bottom: 0; }

.mod-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mod-hero-actions { margin-top: .7rem; }

.mod-hero-primary,
.mod-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .85rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: .16s;
}

.mod-hero-primary {
    background: var(--mod-accent);
    color: var(--mod-on-accent);
}

.mod-hero-primary:hover {
    background: var(--mod-accent-strong);
    color: var(--mod-on-accent);
}

.mod-hero-secondary {
    border: 1px solid color-mix(in srgb, var(--mod-accent) 32%, var(--border));
    background: color-mix(in srgb, var(--surface) 82%, var(--mod-accent));
    color: var(--mod-accent-strong);
}

.mod-hero-secondary:hover {
    background: var(--surface);
    color: var(--mod-accent-strong);
}

/* ── Breadcrumb ──────────────────────────────────────────────── */

.mod-breadcrumb {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 4px 0 24px;
    font-size: .9rem;
    color: var(--muted);
}

.mod-breadcrumb a {
    color: var(--mod-accent);
    text-decoration: none;
    font-weight: 700;
}

/* ── Stat row ────────────────────────────────────────────────── */

/* One bordered rail with hairline dividers and a top accent per cell,
   matching the home page's metric strip rather than floating cards. */
.mod-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 22px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.mod-stat {
    position: relative;
    padding: .9rem 1.1rem 1rem;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: none;
    color: inherit;
    text-decoration: none;
    transition: background .14s ease;
}

.mod-stat:last-child { border-right: none; }

.mod-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mod-stat-accent, var(--mod-accent));
}

a.mod-stat:hover { background: var(--surface-hover); }

.mod-stat span {
    display: block;
    font-size: .67rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
}

.mod-stat strong {
    display: block;
    margin-top: .1rem;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.mod-stat small {
    display: block;
    font-size: .72rem;
    line-height: 1.35;
    color: var(--muted);
}

@media (max-width: 900px) {
    .mod-stats { grid-template-columns: repeat(2, 1fr); }
    .mod-stat { border-bottom: 1px solid var(--border); }
    .mod-stat:nth-child(2n) { border-right: none; }
    .mod-stat:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 460px) {
    .mod-stats { grid-template-columns: 1fr; }
    .mod-stat {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .mod-stat:last-child { border-bottom: none; }
}

/* ── Section heading ─────────────────────────────────────────── */

.mod-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin: 30px 0 16px;
}

.mod-section-heading > div > span { color: var(--muted); }

.mod-section-heading h2 {
    margin: 4px 0 0;
    font-size: 1.5rem;
    color: var(--text);
}

.mod-section-heading p {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--muted);
}

/* ── Workbench tiles ─────────────────────────────────────────── */

/* auto-fill, not auto-fit: the row keeps its full set of tracks even when a
   module offers fewer destinations, so a four-tile module and a five-tile one
   read at the same tile size instead of stretching to fill the row. */
.mod-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.mod-tile {
    display: block;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--mod-accent) 19%, var(--border));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mod-accent) 5%, var(--surface)), var(--surface));
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.mod-tile:hover {
    transform: translateY(-2px);
    border-color: var(--mod-accent);
    box-shadow: 0 10px 25px rgba(15, 33, 60, .12);
}

.mod-tile > i {
    display: block;
    margin-bottom: 14px;
    color: var(--mod-accent);
    font-size: 1.6rem;
}

.mod-tile strong {
    display: block;
    color: var(--text);
}

.mod-tile small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

/* ── Narrow screens ──────────────────────────────────────────── */

@media (max-width: 900px) {
    .mod-page { padding: 18px 16px 40px; }
    .mod-hero {
        flex-direction: column;
        padding: 30px 26px;
    }
    .mod-hero aside { min-width: 0; }
    .mod-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .mod-tiles { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .mod-tiles { grid-template-columns: 1fr; }
}

/* ── Secondary context nav ───────────────────────────────────
   A second row under the module nav, for context inside one module — a chosen
   laboratory, for example. Quieter than the module nav so the hierarchy reads. */

.mod-subnav {
    /* Lab context navigation follows a hero or page header, not the primary
       module nav, so it must never be pulled back over the preceding panel. */
    margin-top: 18px;
    margin-bottom: 22px;
}

.mod-subnav a {
    padding: 7px 13px;
    background: var(--surface-alt);
    border-color: transparent;
    font-size: .82rem;
}

.mod-subnav a:hover {
    background: var(--surface);
    border-color: var(--mod-accent);
}

/* Stat accents, for the few tiles that carry a status rather than the module hue. */
.mod-stat-success { --mod-stat-accent: var(--success); }
.mod-stat-danger { --mod-stat-accent: var(--danger); }
.mod-stat-info { --mod-stat-accent: var(--accent); }
.mod-stat-danger strong { color: var(--danger); }

a.mod-stat {
    display: block;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

a.mod-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: inherit;
}

/* ── Status tones ────────────────────────────────────────────
   Badge and pill pairs (a tinted ground and legible text on it), shared by every
   module so a "healthy" chip reads the same everywhere and survives dark mode.
   Defined on :root rather than .mod-page so pages off the shell can use them. */

:root {
    --tone-ok-bg: #dcfce7;
    --tone-ok-fg: #166534;
    --tone-info-bg: #e0f2fe;
    --tone-info-fg: #075985;
    --tone-warn-bg: #fef3c7;
    --tone-warn-fg: #92400e;
    --tone-hot-bg: #ffedd5;
    --tone-hot-fg: #9a3412;
    --tone-bad-bg: #fee2e2;
    --tone-bad-fg: #9f1239;
    --tone-alt-bg: #f3e8ff;
    --tone-alt-fg: #6b21a8;
    --tone-neutral-bg: #edf1f2;
    --tone-neutral-fg: #5f6775;
    --tone-warn-border: #f0d9b5;
    --tone-bad-border: #eccdd2;
    --tone-ok-border: #cbe5d7;
    /* Dark ink reads better than white on the orange accent in either theme. */
    --on-accent: #1a1d23;
}

[data-theme="dark"] {
    --tone-ok-bg: rgba(52, 195, 124, .16);
    --tone-ok-fg: #6fdca4;
    --tone-info-bg: rgba(105, 181, 255, .16);
    --tone-info-fg: #8ec9ff;
    --tone-warn-bg: rgba(243, 188, 80, .16);
    --tone-warn-fg: #f2ce7d;
    --tone-hot-bg: rgba(242, 165, 65, .18);
    --tone-hot-fg: #f7b877;
    --tone-bad-bg: rgba(242, 109, 109, .18);
    --tone-bad-fg: #ff9d9d;
    --tone-alt-bg: rgba(176, 132, 226, .18);
    --tone-alt-fg: #d0aef0;
    --tone-neutral-bg: rgba(255, 255, 255, .06);
    --tone-neutral-fg: #9aa8b9;
    --tone-warn-border: rgba(243, 188, 80, .38);
    --tone-bad-border: rgba(242, 109, 109, .38);
    --tone-ok-border: rgba(52, 195, 124, .38);
}

/* ── Module colour system ───────────────────────────────────────
   The Home tile palette is inherited on the workspace main element.  The
   accent stays precise for controls and emphasis, while the working surface is
   deliberately a 3–12% tint so dense operational screens remain calm. */

.module-theme {
    --module-accent: var(--module-default);
    --module-accent-strong: color-mix(in srgb, var(--module-accent) 76%, var(--text));
    --module-on-accent: #fff;
    --module-tint: color-mix(in srgb, var(--module-accent) 5%, var(--surface));
    --module-tint-strong: color-mix(in srgb, var(--module-accent) 11%, var(--surface));
    --module-border: color-mix(in srgb, var(--module-accent) 23%, var(--border));
    --primary: var(--module-accent);
    --primary-strong: var(--module-accent-strong);
    --primary-soft: color-mix(in srgb, var(--module-accent) 10%, var(--surface));
    --primary-bg: color-mix(in srgb, var(--module-accent) 7%, var(--surface));
    --focus-ring: color-mix(in srgb, var(--module-accent) 22%, transparent);
    --selection-bg: color-mix(in srgb, var(--module-accent) 18%, transparent);
    --panel-border-strong: var(--module-border);
    --table-row-hover: color-mix(in srgb, var(--module-accent) 6%, var(--surface));
    --table-row-alt: color-mix(in srgb, var(--module-accent) 2.5%, var(--surface));
    --calendar-today-bg: color-mix(in srgb, var(--module-accent) 12%, var(--surface));
}

.module-theme:not(.module-theme-neutral) {
    background:
        radial-gradient(circle at 88% 0, color-mix(in srgb, var(--module-accent) 7%, transparent), transparent 25%),
        linear-gradient(180deg, color-mix(in srgb, var(--module-accent) 3%, var(--bg)), var(--bg) 340px);
}

/* Accent and contrast values come exclusively from the canonical palette in
   style.css, so a module recolour automatically reaches every shared surface. */
.module-theme-neutral { --module-accent: var(--module-default); --module-on-accent: var(--module-default-on-accent); }
.module-theme-office { --module-accent: var(--module-office); --module-on-accent: var(--module-office-on-accent); }
.module-theme-csc { --module-accent: var(--module-csc); --module-on-accent: var(--module-csc-on-accent); }
.module-theme-inventory { --module-accent: var(--module-inventory); --module-on-accent: var(--module-inventory-on-accent); }
.module-theme-qc { --module-accent: var(--module-qc); --module-on-accent: var(--module-qc-on-accent); }
.module-theme-admin { --module-accent: var(--module-admin); --module-on-accent: var(--module-admin-on-accent); }
.module-theme-forecasting { --module-accent: var(--module-forecasting); --module-on-accent: var(--module-forecasting-on-accent); }

/* Existing module-local variables now resolve to the Home tile hue as well. */
.module-theme-office .om-page { --om-accent: var(--module-accent); }
.module-theme-office .om-page,
.module-theme-csc .cs-page,
.module-theme-inventory .im-page,
.module-theme-qc .inv-page {
    --mod-accent: var(--module-accent);
    --mod-accent-strong: var(--module-accent-strong);
    --mod-hero-1: var(--module-tint-strong);
    --mod-hero-2: var(--module-tint);
    --mod-hero-3: color-mix(in srgb, var(--module-accent) 4%, var(--surface));
    --mod-on-accent: var(--module-on-accent);
}

/* Shared operational surfaces.  These selectors intentionally cover the
   older module components without changing their content or page structure. */
.module-theme:not(.module-theme-neutral) :is(
    .card, .table-wrapper, .om-card, .cs-card, .cs-panel, .cs-doc, .cs-block,
    .cs-value, .cs-param-row, .cs-reason, .cs-msds-file, .im-card,
    .im-pf-kpi, .im-pf-groups article, .im-material-tile, .im-import-kpis article,
    .im-import-source-grid article, .im-import-flow, .im-pf-scope > div,
    .im-mover-list li, .im-settings-aside, .qc-portfolio-nav-card,
    .qc-metric-card, .qc-lab-tile, .qc-month-panel, .qc-review-kpi,
    .qc-review-signal, .mp-kpi-card, .mp-band-card, .mp-section-card,
    .mp-empty-state, .mp-accordion
) {
    border-color: var(--module-border);
    background: linear-gradient(135deg, var(--module-tint), var(--surface) 68%);
}

.module-theme:not(.module-theme-neutral) :is(
    .card, .om-card, .cs-card, .cs-panel, .cs-doc, .cs-block, .im-card,
    .qc-portfolio-nav-card, .qc-metric-card, .qc-lab-tile, .qc-review-kpi,
    .mp-kpi-card, .mp-band-card, .mp-section-card, .mp-empty-state, .mp-accordion
) {
    box-shadow: var(--shadow-sm);
}

.module-theme .btn-primary {
    background: var(--module-accent);
    color: var(--module-on-accent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--module-accent) 22%, transparent);
}

.module-theme .btn-primary:hover {
    background: var(--module-accent-strong);
    color: var(--module-on-accent);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--module-accent) 28%, transparent);
}

.module-theme :is(.btn-secondary, .btn-outline) {
    border-color: var(--module-border);
    background: var(--module-tint);
}

.module-theme :is(input, select, textarea).form-control,
.module-theme .form-select,
.module-theme .form-group :is(input, select, textarea) {
    border-color: color-mix(in srgb, var(--module-accent) 22%, var(--border));
}

.module-theme :is(input, select, textarea):focus {
    border-color: var(--module-accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.module-theme :is(.data-table thead th, .om-table thead th, .cs-table th,
    .im-pf-table thead th, .im-health-table thead th, .im-source-table thead th,
    .im-import-history-table thead th) {
    background: var(--module-tint-strong);
    color: var(--text);
    box-shadow: inset 0 -1px 0 var(--module-border);
}

/* Legacy bespoke heroes receive the same restrained, light treatment as the
   shared module hero.  Their information hierarchy remains intact. */
.module-theme :is(
    .im-pf-hero, .im-import-centre-hero, .im-health-hero, .im-settings-hero,
    .qc-lab-hero, .qc-review-hero, .mp-hero, .mp-hero-detail
) {
    border: 1px solid var(--module-border);
    background: linear-gradient(125deg, var(--module-tint-strong), var(--module-tint) 60%, color-mix(in srgb, var(--module-accent) 3%, var(--surface)));
    color: var(--text);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--module-accent) 12%, transparent);
}

.module-theme :is(
    .im-pf-hero, .im-import-centre-hero, .im-health-hero, .im-settings-hero,
    .qc-lab-hero, .qc-review-hero, .mp-hero, .mp-hero-detail
) :is(h1, h2, h3, strong) {
    color: var(--text);
}

.module-theme :is(
    .im-pf-hero, .im-import-centre-hero, .im-health-hero, .im-settings-hero,
    .qc-lab-hero, .qc-review-hero, .mp-hero, .mp-hero-detail
) :is(p, small, label) {
    color: var(--muted);
    opacity: 1;
}

.module-theme :is(.im-pf-hero, .im-import-centre-hero, .qc-lab-hero, .qc-review-hero)::before,
.module-theme :is(.im-pf-hero, .im-import-centre-hero, .qc-lab-hero, .qc-review-hero)::after {
    opacity: .16;
}

.module-theme :is(.im-pf-period, .qc-review-hero-panel, .qc-lab-hero-mark,
    .im-settings-hero-note, .mp-meta-chip) {
    border-color: var(--module-border);
    background: color-mix(in srgb, var(--surface) 82%, var(--module-accent));
    color: var(--text);
}

.module-theme :is(.cs-doc-head, .im-pf-table thead th, .im-import-history-table thead th) {
    background: var(--module-tint-strong);
    color: var(--text);
}

.module-theme :is(.cs-doc-head, .im-pf-table thead th, .im-import-history-table thead th) * {
    color: inherit;
}

/* Inventory Monitoring originally assumed its centre pages used a dark hero.
   Keep the orange tile hue, but give the hero, its controls and its tables the
   same light, high-contrast treatment used throughout the refreshed shell. */
.module-theme-inventory .im-centre-health-hero {
    border: 1px solid var(--module-border);
    background: linear-gradient(
        125deg,
        var(--module-tint-strong),
        var(--module-tint) 60%,
        color-mix(in srgb, var(--module-accent) 3%, var(--surface))
    );
    color: var(--text);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--module-accent) 12%, transparent);
}

.module-theme-inventory .im-centre-health-hero :is(h1, h2, h3, strong) {
    color: var(--text);
}

.module-theme-inventory .im-centre-health-hero :is(p, small, label) {
    color: var(--muted);
    opacity: 1;
}

.module-theme-inventory .im-centre-health-hero .im-kicker {
    color: var(--module-accent-strong);
    opacity: 1;
}

.module-theme-inventory .im-wc-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

.module-theme-inventory .im-wc-title-row h1 {
    margin: 6px 0;
}

.module-theme-inventory .im-wc-heading-unit {
    color: var(--text);
    font-size: .48em;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.module-theme-inventory .im-wc-heading-switcher {
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--module-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 84%, var(--module-accent));
}

.module-theme-inventory .im-wc-heading-switcher .im-view-label {
    display: none;
}

.module-theme-inventory .im-wc-heading-switcher a {
    padding: 5px 9px;
    font-size: .76rem;
}

.module-theme-inventory .im-unit-switcher a {
    border-color: var(--module-border);
    background: color-mix(in srgb, var(--surface) 86%, var(--module-accent));
    color: var(--module-accent-strong);
}

.module-theme-inventory .im-unit-switcher a:hover,
.module-theme-inventory .im-unit-switcher a.is-active {
    border-color: var(--module-accent);
    background: var(--module-accent);
    color: var(--module-on-accent);
}

@media (max-width: 700px) {
    .module-theme-inventory .im-wc-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

.module-theme-inventory .im-wc-link {
    border-color: var(--module-border);
    background: var(--module-tint);
    color: var(--module-accent-strong);
}

.module-theme-inventory .im-wc-link:hover {
    border-color: var(--module-accent);
    background: var(--surface);
    color: var(--module-accent-strong);
}

.module-theme-inventory .im-centre-health-hero .im-pf-period {
    border-color: var(--module-border);
    background: color-mix(in srgb, var(--surface) 82%, var(--module-accent));
    color: var(--text);
}

.module-theme-inventory .im-centre-health-hero .im-pf-period .btn {
    background: var(--module-accent);
    color: var(--module-on-accent);
}

.module-theme-inventory .im-centre-health-hero .im-pf-period .btn:hover {
    background: var(--module-accent-strong);
    color: var(--module-on-accent);
}

.module-theme-inventory :is(.im-health-table, .im-source-table) thead th {
    background: var(--module-tint-strong);
    color: var(--text);
    box-shadow: inset 0 -1px 0 var(--module-border);
}

.module-theme-inventory :is(.im-health-table, .im-source-table) thead th * {
    color: inherit;
}

/* The material register used the original cool Inventory palette; bring it into
   the same restrained orange system. The asset navigator's own labels are now
   themed by the shared mod-geo-* component. */
.module-theme-inventory :is(.im-register-hero, .im-material-hero) {
    border-color: var(--module-border);
    background: linear-gradient(
        125deg,
        var(--module-tint-strong),
        var(--module-tint) 62%,
        color-mix(in srgb, var(--module-accent) 3%, var(--surface))
    );
    box-shadow: 0 14px 32px color-mix(in srgb, var(--module-accent) 10%, transparent);
}

.module-theme-inventory :is(.im-register-hero, .im-material-hero) > :last-child {
    border: 1px solid var(--module-border);
    background: color-mix(in srgb, var(--surface) 88%, var(--module-accent));
}

.module-theme-inventory .im-import-centre-link {
    border-color: var(--module-border);
    background: var(--module-tint);
    color: var(--module-accent-strong);
}

.module-theme-inventory .im-import-centre-link:hover {
    border-color: var(--module-accent);
    background: var(--surface);
    color: var(--module-accent-strong);
}

/* QC retains a few custom controls inside its legacy heroes.  Use the shared
   light tint and the same palette-derived contrast rules for them as well. */
.module-theme-qc :is(.qc-lab-hero-period, .qc-presentation-download) {
    border-color: var(--module-border);
    background: var(--module-tint);
    color: var(--module-accent-strong);
}

.module-theme-qc .qc-command-kicker {
    color: var(--module-accent-strong);
}

.module-theme-qc .qc-presentation-download:hover {
    border-color: var(--module-accent);
    background: var(--surface);
    color: var(--module-accent-strong);
}

.module-theme-qc :is(.qc-review-kicker, .qc-review-breadcrumb,
    .qc-review-period, .qc-review-panel-heading, .qc-review-panel-note) {
    color: var(--muted);
}

.module-theme-qc .qc-review-hero h1 em,
.module-theme-qc :is(.qc-review-period > i, .qc-review-panel-heading i,
    .qc-review-panel-note i, .qc-review-select-wrap > i) {
    color: var(--module-accent-strong);
}

.module-theme-qc .qc-review-period strong {
    color: var(--text);
}

.module-theme-qc .qc-review-period-divider {
    background: var(--module-accent);
}

.module-theme-qc .qc-review-hero-panel {
    border-color: var(--module-border);
    background: color-mix(in srgb, var(--surface) 84%, var(--module-accent));
    box-shadow: none;
}

.module-theme-qc .qc-review-week-form label {
    color: var(--muted);
}

.module-theme-qc .qc-review-select-wrap select {
    border-color: var(--module-border);
    background: var(--surface);
    color: var(--text);
}

.module-theme-qc .qc-review-panel-rule {
    background: var(--module-border);
}

[data-theme="dark"] .module-theme {
    --module-on-accent: #0f1723;
    --module-tint: color-mix(in srgb, var(--module-accent) 9%, var(--surface));
    --module-tint-strong: color-mix(in srgb, var(--module-accent) 16%, var(--surface));
    --module-border: color-mix(in srgb, var(--module-accent) 30%, var(--border));
}

[data-theme="dark"] .module-theme-neutral { --module-accent: #5b8cff; }

/* ── Inked surfaces ──────────────────────────────────────────
   A few surfaces are deliberately dark and carry white text in either theme:
   sticky table heads, map pins, document heads. The hero tokens no longer suit
   them — the hero is a light tinted panel now — so they get their own ground,
   mixed from the module accent with near-black to stay dark in both themes. */

:root {
    --mod-ink: color-mix(in srgb, var(--module-accent, var(--primary)) 34%, #0d1420);
    --mod-ink-strong: color-mix(in srgb, var(--module-accent, var(--primary)) 52%, #0d1420);
    --mod-on-ink: #fff;
}


/* ============================================================
   Shared module components
   Promoted from inventory.css, where Quality Control and the
   MSDS register were borrowing Inventory's `inv-*` classes.
   Renamed into the neutral `mod-*` namespace so that no module
   styles itself from another module's stylesheet.
   See DESIGN_SYSTEM.md §2.1 (prefix rule) and §3 (canon).

   `mod-kpi*` is deliberately NOT merged into the existing
   `mod-stat*`: mod-stat is a joined bordered grid, mod-kpi is
   separate cards. Unifying them is a design decision, not a
   rename, so both are kept until that call is made.
   ============================================================ */

.mod-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.mod-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mod-page-title i { color: var(--primary); }
.mod-page-sub {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}
.mod-page-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  /* Wrap rather than push the page wider — a row of header buttons was
     forcing 199px of horizontal page scroll at 390px. */
  flex-wrap: wrap;
}
.mod-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mod-badge-info {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}
.mod-badge-muted {
  background: var(--surface-alt);
  color: var(--muted);
}
.mod-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem 0;
}
.mod-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.mod-card-sub {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}
/* The grid these cards sit in was never defined, so a KPI row rendered as a
   column of full-width blocks with its label, value and detail side by side. */
.mod-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.mod-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.mod-kpi > span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .mod-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .mod-kpi-grid { grid-template-columns: 1fr; }
}
.mod-kpi:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.mod-kpi-value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.mod-kpi-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; }
.mod-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* ── Seed upload ─────────────────────────────────────────────── */
.mod-upload-grid {
  display: grid;
  gap: 1.25rem;
}
.mod-upload-grid > .card,
.inv-audit-findings > .inv-audit-card {
  min-width: 0;
}
.mod-cell-meta {
  font-size: 0.8rem;
  color: var(--muted);
}
.mod-table-wrap {
  margin-top: 0.9rem;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 440px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  display: block;
}
/* Let the table be as wide as content needs — min fills container */
.mod-table-wrap .mod-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
/*
 * CRITICAL: position:sticky on <th> inside overflow-x:scroll breaks horizontal
 * scrolling in Chrome and Firefox — the table refuses to scroll left/right.
 * Override to static here; the wrapper already handles vertical scroll.
 */
.mod-table-wrap .mod-table th {
  position: static !important;
  top: auto !important;
}
/* ── Data table ──────────────────────────────────────────────── */
.mod-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.mod-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.mod-table thead tr {
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border);
}
.mod-table th {
  padding: 0.7rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  text-align: left;
  user-select: none;
}
.mod-table th[data-sort] { cursor: pointer; }
.mod-table th[data-sort]:hover { color: var(--primary); }
.mod-table th[data-sort]:hover .inv-sort-icon { opacity: 1; }
.mod-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  color: var(--text);
  vertical-align: middle;
}
.mod-table tbody tr.mod-row-main:hover {
  background: var(--surface-hover);
}
.mod-table tbody tr.mod-row-main.is-expanded {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.mod-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.mod-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-alt);
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.mod-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  color: var(--text);
}
.mod-table tbody tr:hover { background: var(--surface-hover); }
/* ── Empty state ─────────────────────────────────────────────── */
.mod-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--muted);
}
.mod-empty-icon {
  font-size: 2.8rem;
  opacity: 0.3;
  display: block;
  margin-bottom: 1rem;
}
.mod-empty p {
  font-size: 0.9rem;
  margin: 0;
}
/* ── Inventory Sub-Navigation ──────────────────────────────────────────────── */
.mod-subnav-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid var(--border-color, rgba(15, 23, 42, 0.12));
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.mod-subnav-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, #475569);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.mod-subnav-bar-link:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-primary, #0f172a);
  text-decoration: none;
}
.mod-subnav-bar-link.active {
  background: rgba(15, 90, 166, 0.08);
  color: #0f5aa6;
  border-color: rgba(15, 90, 166, 0.25);
  font-weight: 600;
}
.mod-subnav-bar-link i {
  font-size: 0.875rem;
  opacity: 0.8;
}


/* ============================================================
   Geographic navigator (mod-geo-*)

   One India map, shared by every module that plots its own network on it:
   Inventory Monitoring puts assets on it, QC Laboratory Monitoring puts
   laboratories. Promoted out of inventory_monitoring.css when the second
   module needed it — see DESIGN_SYSTEM.md §2.1.

   Markup comes from components/_geo_map.html; the dots, label pills and
   leader lines are drawn by ModGeoMap.render() from lat/long pairs.
   ============================================================ */

.mod-geo-card {
    margin: 26px 0;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: linear-gradient(135deg, var(--surface), var(--surface-alt));
}

.mod-geo-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 18px;
}

/* Eyebrow over the heading, matching .mod-section-heading. */
.mod-geo-heading > div > span {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .75;
}

.mod-geo-heading h2 { margin: 4px 0; color: var(--text); }
.mod-geo-heading p { margin: 5px 0 0; color: var(--muted); }

.mod-geo-heading > span {
    padding: 7px 11px;
    border-radius: 99px;
    background: var(--surface-alt);
    color: var(--mod-accent);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.mod-geo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
    gap: 20px;
    align-items: stretch;
}

.mod-geo-map {
    position: relative;
    aspect-ratio: 650/700;
    align-self: start;
    overflow: hidden;
    border-radius: 18px;
    background: radial-gradient(circle at 65% 20%, var(--surface) 0, var(--surface-alt) 56%, var(--surface-alt) 100%);
}

.mod-geo-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.mod-geo-outline {
    fill: var(--surface-alt);
    stroke: var(--mod-accent);
    stroke-width: 1.5;
    stroke-linejoin: round;
    filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--mod-accent) 22%, transparent));
}

.mod-geo-island { stroke-width: 1; }

/* A dot sits at the true coordinate; its label pill sits wherever it fits. */
.mod-geo-dot {
    fill: var(--mod-accent);
    stroke: var(--surface);
    stroke-width: 1.5;
    pointer-events: none;
}

.mod-geo-dot.is-offshore { fill: #f79c43; }

.mod-geo-dot.is-region {
    fill: color-mix(in srgb, var(--tone-warn-fg) 16%, transparent);
    stroke: var(--tone-warn-fg);
    stroke-dasharray: 3 2;
}

.mod-geo-dot.is-ready { fill: var(--tone-ok-fg); }
.mod-geo-dot.is-pending { fill: var(--tone-warn-fg); }

/* The hero marker: the one place the rest of the network reports to. It is drawn
   dark and larger than every other dot so the hierarchy reads at a glance, with
   dotted ties running out to the places it is seated in. */
.mod-geo-dot.is-hero {
    fill: var(--mod-ink-strong);
    stroke: var(--surface);
    stroke-width: 2.5;
}

.mod-geo-link {
    stroke: color-mix(in srgb, var(--mod-ink-strong) 78%, transparent);
    stroke-width: 1.8;
    stroke-dasharray: 3 4;
    stroke-linecap: round;
    pointer-events: none;
}

.mod-geo-leader {
    stroke: color-mix(in srgb, var(--mod-accent) 55%, transparent);
    stroke-width: 1.1;
    stroke-dasharray: 4 3;
    pointer-events: none;
}

.mod-geo-pins { position: absolute; inset: 0; }

/* Labels sit on the map's own light surface, so the pill is a tint of the
   module accent rather than an inked panel — legible in either theme. */
.mod-geo-pin {
    position: absolute;
    z-index: 2;
    max-width: 110px;
    padding: 4px 7px;
    border: 1px solid var(--module-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, var(--module-accent));
    color: var(--module-accent-strong);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--module-accent) 18%, transparent);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.12;
    transform: translate(-50%, -50%);
    transition: .18s transform, .18s background;
}

.mod-geo-pin:hover,
.mod-geo-pin:focus {
    z-index: 3;
    border-color: var(--module-accent);
    background: var(--module-accent);
    color: var(--module-on-accent);
    transform: translate(-50%, -50%) scale(1.08);
}

/* A location the reader may not open. It stays on the map so the portfolio
   reads whole, but it is dimmed and inert rather than looking available and
   failing on click. Shared by the QC lab map and the Task Management office
   map; the module sheets add their own lock affordance in the list. */
.mod-geo-pin.is-locked {
    border-style: dashed;
    background: var(--surface);
    color: var(--muted);
    box-shadow: none;
    cursor: default;
    opacity: .58;
}

.mod-geo-pin.is-locked:hover,
.mod-geo-pin.is-locked:focus {
    z-index: 2;
    border-color: var(--module-border);
    background: var(--surface);
    color: var(--muted);
    transform: translate(-50%, -50%);
}

.mod-geo-dot.is-locked { opacity: .42; }

.mod-geo-list-button.is-locked {
    cursor: default;
    opacity: .68;
}

.mod-geo-list-button.is-locked:hover { transform: none; }

.mod-geo-pin.is-offshore { background: color-mix(in srgb, var(--surface) 78%, var(--module-accent)); }
.mod-geo-pin.is-offshore:hover,
.mod-geo-pin.is-offshore:focus { background: var(--module-accent); }

.mod-geo-pin.is-hero {
    z-index: 4;
    max-width: 132px;
    padding: 6px 10px;
    border-color: var(--mod-ink-strong);
    border-radius: 10px;
    background: var(--mod-ink-strong);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--mod-ink-strong) 38%, transparent);
    font-size: .72rem;
    letter-spacing: .01em;
}

.mod-geo-pin.is-hero:hover,
.mod-geo-pin.is-hero:focus {
    background: var(--mod-ink);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

/* The hero's own status dot sits on a dark pill, so it keeps its tone colour but
   is given a light ring to stay visible. */
.mod-geo-pin.is-hero.is-ready::before,
.mod-geo-pin.is-hero.is-pending::before,
.mod-geo-pin.is-hero.is-overdue::before { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }

.mod-geo-pin.is-region {
    border: 1px dashed var(--tone-warn-fg);
    background: var(--tone-warn-bg);
    color: var(--tone-warn-fg);
}

.mod-geo-pin.is-region:hover,
.mod-geo-pin.is-region:focus { background: var(--tone-warn-bg); }

/* Reporting state, for maps whose markers carry one — a dot of tone colour
   pinned to the label, so the pill itself stays legible. */
.mod-geo-pin.is-ready::before,
.mod-geo-pin.is-pending::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: middle;
}

.mod-geo-pin.is-ready::before { background: var(--tone-ok-fg); }
.mod-geo-pin.is-pending::before { background: var(--tone-warn-fg); }

/* The list beside the map: the accessible route to every marker, and the only
   route to one that has no coordinates yet. */
.mod-geo-list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}

.mod-geo-list-button {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: .76rem;
    font-weight: 700;
    text-align: left;
}

.mod-geo-list-button:hover {
    border-color: var(--mod-accent);
    background: var(--surface-alt);
    color: var(--mod-accent);
}

/* A list whose entries carry a second line stacks instead of wrapping. */
.mod-geo-list.is-detailed { display: grid; grid-template-columns: 1fr; gap: 8px; }

.mod-geo-list-button.has-meta { display: grid; gap: 2px; }

.mod-geo-list-button small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
}

.mod-geo-list-button.is-ready { box-shadow: inset 3px 0 var(--tone-ok-fg); }
.mod-geo-list-button.is-pending { box-shadow: inset 3px 0 var(--tone-warn-fg); }

.mod-geo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.mod-geo-legend span { display: inline-flex; align-items: center; gap: 6px; }

.mod-geo-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mod-accent);
}

.mod-geo-legend .is-ready { color: var(--tone-ok-fg); }
.mod-geo-legend .is-ready i { background: var(--tone-ok-fg); }
.mod-geo-legend .is-pending { color: var(--tone-warn-fg); }
.mod-geo-legend .is-pending i { background: var(--tone-warn-fg); }

/* Destination chooser opened by a marker. */
.mod-geo-modal[hidden] { display: none; }

.mod-geo-modal {
    position: fixed;
    z-index: var(--z-modal, 500);
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.mod-geo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 31, 38, .58);
    backdrop-filter: blur(3px);
}

.mod-geo-modal-dialog {
    position: relative;
    width: min(540px, 100%);
    padding: 30px;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(4, 25, 31, .35);
}

.mod-geo-modal-dialog h2 { margin: 5px 0; color: var(--text); }
.mod-geo-modal-dialog p { margin: 5px 0 20px; color: var(--muted); }

.mod-geo-modal-kicker {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

.mod-geo-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 99px;
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 1.4rem;
    line-height: 1;
}

.mod-geo-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.mod-geo-choice {
    display: grid;
    gap: 4px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--text);
    text-decoration: none;
}

.mod-geo-choice:hover { border-color: var(--mod-accent); background: var(--surface-alt); }
.mod-geo-choice strong { font-size: .94rem; }
.mod-geo-choice small { color: var(--muted); font-size: .76rem; }

.mod-geo-choice.is-combined {
    grid-column: 1/-1;
    border-color: var(--module-border);
    background: var(--module-tint-strong);
    color: var(--text);
}

.mod-geo-choice.is-combined small { color: var(--muted); }

.mod-geo-choice.is-combined:hover {
    border-color: var(--module-accent);
    background: var(--module-tint);
}

@media (max-width: 1250px) {
    .mod-geo-pin { max-width: 92px; padding: 3px 5px; font-size: .6rem; }
}

@media (max-width: 850px) {
    .mod-geo-layout { grid-template-columns: 1fr; }
    .mod-geo-map { width: 100%; max-width: 620px; margin: 0 auto; }
    .mod-geo-list { max-height: 180px; overflow: auto; }
}

@media (max-width: 600px) {
    .mod-geo-card { padding: 18px; }
    .mod-geo-heading { flex-direction: column; }
    .mod-geo-pin { max-width: 80px; padding: 3px 4px; font-size: .56rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   Presentation scope chooser (mod-modal-*, mod-scope-*)

   Shared by every module whose review exports a deck: the scope is asked for
   in a dialog — the whole of ONGC, or the assets or laboratories ticked — so
   choosing it never becomes another panel to scroll past on the page.
   ═══════════════════════════════════════════════════════════════════════ */

/* A review page puts its actions on their own row, left-aligned under the
   heading, so two modules' reviews read the same however long their subtitles
   run. Without this the row's position depends on how wide the heading text
   happens to be. */
.mod-page-head.is-stacked-actions .mod-page-actions { flex-basis: 100%; }

.mod-modal[hidden] { display: none; }

.mod-modal {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}

.mod-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 32, .55);
    backdrop-filter: blur(2px);
}

.mod-modal-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: min(84vh, 800px);
    overflow: auto;
    padding: 26px 28px 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(10, 20, 32, .35);
}

.mod-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.mod-modal-close:hover { color: var(--text); }

body.mod-modal-open { overflow: hidden; }

.mod-scope-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.mod-scope-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
}

.mod-scope-choice:has(input:checked) {
    border-color: var(--mod-accent);
    background: color-mix(in srgb, var(--mod-accent) 8%, var(--surface));
}

.mod-scope-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }

.mod-scope-list { display: grid; gap: 8px; }

/* A group is a zone of assets, or any other heading a module drills down by. */
.mod-scope-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.mod-scope-group > summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    cursor: pointer;
    font-size: .88rem;
}

.mod-scope-group > summary > span { color: var(--muted); font-size: .78rem; }
.mod-scope-group-tick { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }

.mod-scope-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 8px;
}

.mod-scope-group .mod-scope-items { padding: 4px 14px 14px; }

.mod-scope-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: .84rem;
}

.mod-scope-item:has(input:checked) {
    border-color: var(--mod-accent);
    background: color-mix(in srgb, var(--mod-accent) 8%, var(--surface));
}

.mod-scope-item small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; }

/* The download stays reachable however far the list is scrolled. */
.mod-scope-actions {
    position: sticky;
    bottom: -22px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 0 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.mod-scope-summary { color: var(--muted); font-size: .82rem; }
.mod-scope-buttons { display: flex; gap: 10px; }