/* ==========================================================================
   IceWorks — design system
   Emerald ramp per the eLivecode brand (section 13 of the shared standards).
   PharmaWorks diverges to teal for historical reasons; IceWorks is greenfield
   and uses the brand, so do not copy --pw-* values in here.
   ========================================================================== */

:root {
    /* Brand ramp — the shared eLivecode emerald. */
    --iw-brand-50:  #ecfdf5;
    --iw-brand-100: #d1fae5;
    --iw-brand-200: #a7f3d0;
    --iw-brand-300: #6ee7b7;
    --iw-brand-400: #34d399;
    --iw-brand-500: #10b981;
    --iw-brand-600: #059669;
    --iw-brand-700: #047857;
    --iw-brand-800: #065f46;
    --iw-brand-900: #064e3b;
    --iw-brand-950: #022c22;

    /* Roles */
    --iw-primary:        var(--iw-brand-600);
    --iw-primary-strong: var(--iw-brand-700);
    --iw-primary-soft:   var(--iw-brand-50);
    --iw-primary-light:  var(--iw-brand-400);

    /* Sidebar — deep brand, not black, so the shell reads as one product. */
    --iw-sidebar-bg:     var(--iw-brand-950);
    --iw-sidebar-hover:  #06392c;
    --iw-sidebar-active: var(--iw-brand-400);
    --iw-sidebar-ink:    #9fc7b6;

    --iw-content-bg: #f5f7f6;
    --iw-surface:    #ffffff;
    --iw-border:     #e3e8e6;
    --iw-ink:        #0f172a;
    --iw-ink-muted:  #64748b;

    /* Ice accents — reserved for stock-state meaning, never for chrome. */
    --iw-frozen:  #38bdf8;
    --iw-warning: #d97706;
    --iw-danger:  #dc2626;

    --iw-radius: 12px;
    --iw-shadow:    0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --iw-shadow-lg: 0 10px 30px rgba(16, 24, 40, .12);

    --iw-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-bs-theme="dark"] {
    --iw-primary-soft: #06392c;
    --iw-content-bg:   #0a0a0a;
    --iw-surface:      #141917;
    --iw-border:       #26302c;
    --iw-ink:          #ededed;
    --iw-ink-muted:    #94a3a0;
    --iw-shadow:    0 1px 2px rgba(0, 0, 0, .35);
    --iw-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
}

html { font-size: 15px; }

body {
    font-family: var(--iw-font);
    background: var(--iw-content-bg);
    color: var(--iw-ink);
    min-height: 100vh;
}

/* ------------------------------------------------------------ app shell

   Structure borrowed from PharmaWorks (grouped icon sidebar, collapsible
   sub-menus, a mini mode, an off-canvas drawer on small screens). The COLOURS
   are not: PharmaWorks is teal for historical reasons and IceWorks is the
   emerald brand, so only the layout patterns cross over.

   Every interaction here is wired by addEventListener in site.js, never by an
   inline onclick. script-src carries a nonce and no unsafe-inline, so an
   inline handler is silently dead — which looks exactly like a broken button.
   -------------------------------------------------------------------------- */

.iw-shell { display: flex; min-height: 100vh; }

.iw-sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: var(--iw-sidebar-bg);
    color: var(--iw-sidebar-ink);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    transition: width .16s ease;
}

/* ---- brand ---- */

.iw-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.15rem .85rem;
    color: #fff;
    text-decoration: none;
}
.iw-brand:hover { color: #fff; }

.iw-brand-badge {
    width: 38px; height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--iw-brand-400), var(--iw-brand-700));
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.05rem; color: #fff;
}

.iw-brand-name { font-weight: 700; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.01em; }
.iw-brand-sub  { font-size: .72rem; color: var(--iw-sidebar-ink); letter-spacing: .02em; }

/* ---- nav ---- */

.iw-nav { list-style: none; margin: 0; padding: 0 .6rem; }
.iw-nav li { list-style: none; }

.iw-nav-section {
    padding: .95rem .65rem .3rem;
    font-size: .67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: #5d8371;
}

.iw-nav a,
.iw-nav .iw-group-toggle {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .52rem .65rem;
    margin-bottom: 2px;
    border-radius: 9px;
    color: var(--iw-sidebar-ink);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.iw-nav a:hover,
.iw-nav .iw-group-toggle:hover { background: var(--iw-sidebar-hover); color: #fff; }

.iw-nav a.active,
.iw-nav .iw-group-toggle.active {
    background: var(--iw-sidebar-hover);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--iw-sidebar-active);
}

.iw-nav svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; }
.iw-nav a.active svg, .iw-nav .iw-group-toggle.active svg { opacity: 1; }

/* ---- collapsible groups ---- */

.iw-group-toggle { cursor: pointer; }
.iw-caret {
    margin-left: auto;
    width: 13px !important; height: 13px !important; flex: 0 0 13px !important;
    transition: transform .15s ease;
}
.iw-group-toggle[aria-expanded="true"] .iw-caret { transform: rotate(90deg); }

.iw-subnav { list-style: none; margin: 0 0 .25rem; padding-left: 2.05rem; }
.iw-subnav a {
    display: block;
    padding: .36rem .6rem;
    margin-bottom: 1px;
    border-radius: 8px;
    font-size: .855rem;
    font-weight: 450;
}
.iw-subnav a.active { box-shadow: inset 2px 0 0 var(--iw-sidebar-active); }

/* ---- collapse to icons (desktop only) ---- */

.iw-collapse-btn {
    margin-top: auto;
    display: flex; align-items: center; gap: .7rem;
    width: 100%;
    padding: .6rem 1.25rem;
    border: none; border-top: 1px solid #0d3a2b;
    background: none;
    color: var(--iw-sidebar-ink);
    font-size: .82rem;
    text-align: left;
}
.iw-collapse-btn:hover { background: var(--iw-sidebar-hover); color: #fff; }
.iw-collapse-btn svg { width: 17px; height: 17px; transition: transform .15s ease; }

.iw-nav-section-rule { display: none; height: 1px; margin: .5rem .65rem; background: #0d3a2b; }

@media (min-width: 992px) {
    .iw-shell.mini .iw-sidebar { width: 74px; flex: 0 0 74px; }
    .iw-shell.mini .iw-brand-text,
    .iw-shell.mini .iw-nav-section,
    .iw-shell.mini .iw-nav .lbl,
    .iw-shell.mini .iw-caret,
    .iw-shell.mini .iw-subnav,
    .iw-shell.mini .iw-collapse-btn span { display: none; }
    .iw-shell.mini .iw-nav { padding: .3rem .75rem; }
    .iw-shell.mini .iw-nav a,
    .iw-shell.mini .iw-nav .iw-group-toggle { justify-content: center; padding: .6rem .5rem; }
    .iw-shell.mini .iw-brand,
    .iw-shell.mini .iw-collapse-btn { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
    .iw-shell.mini .iw-collapse-btn svg { transform: rotate(180deg); }
    /* A divider still separates the groups once the section labels are gone. */
    .iw-shell.mini .iw-nav-section-rule { display: block; }
}

/* ---- main column ---- */

.iw-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.iw-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1.35rem;
    background: var(--iw-surface);
    border-bottom: 1px solid var(--iw-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.iw-topbar-title { min-width: 0; }
.iw-topbar-company {
    font-weight: 680; font-size: .96rem; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iw-topbar-page { font-size: .78rem; color: var(--iw-ink-muted); line-height: 1.2; }

.iw-hamburger {
    display: none;
    border: none; background: none;
    padding: .2rem .35rem;
    color: var(--iw-ink);
}

.iw-content { padding: 1.4rem; flex: 1 1 auto; }

.iw-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--iw-primary-soft);
    color: var(--iw-primary-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
}
html[data-bs-theme="dark"] .iw-avatar { background: #06392c; color: var(--iw-brand-300); }

/* ---- off-canvas drawer on small screens ----

   The old rule stacked the sidebar above the content as a full-width block, so
   a phone user scrolled past every nav link to reach the page. A driver opening
   the delivery screen at a customer's gate is the person this matters to most.
   -------------------------------------------------------------------------- */

.iw-backdrop {
    position: fixed; inset: 0;
    background: rgba(2, 20, 14, .55);
    z-index: 1030;
    opacity: 0; pointer-events: none;
    transition: opacity .16s ease;
}
.iw-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 991.98px) {
    .iw-sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 1040;
        width: 268px; flex-basis: 268px;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--iw-shadow-lg);
    }
    .iw-sidebar.open { transform: translateX(0); }
    .iw-hamburger { display: inline-flex; }
    .iw-collapse-btn { display: none; }
    .iw-content { padding: 1rem; }
    .iw-topbar { padding: .55rem .85rem; }
}

@media (max-width: 575.98px) {
    .iw-content { padding: .85rem; }
    html { font-size: 14.5px; }
}

/* --------------------------------------------------------- stat tiles

   For the compact "label, figure, note" tiles the screens share. A tile never
   invents a colour meaning: emerald is ordinary, ice blue is stock, amber is
   waiting on somebody, red is a loss.
   -------------------------------------------------------------------------- */

.iw-stat {
    display: flex; align-items: center; gap: .85rem;
    height: 100%;
    padding: .95rem 1.05rem;
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: var(--iw-radius);
    box-shadow: var(--iw-shadow);
}

.iw-stat-icon {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--iw-primary-soft);
    color: var(--iw-primary-strong);
}
.iw-stat-icon svg { width: 21px; height: 21px; }
.iw-stat-icon.tint-ice    { background: #e0f2fe; color: #0369a1; }
.iw-stat-icon.tint-amber  { background: #fdf1dc; color: #b45309; }
.iw-stat-icon.tint-danger { background: #fde8e8; color: #b91c1c; }

html[data-bs-theme="dark"] .iw-stat-icon             { background: #06392c; color: var(--iw-brand-300); }
html[data-bs-theme="dark"] .iw-stat-icon.tint-ice    { background: #0c2c3f; color: #7dd3fc; }
html[data-bs-theme="dark"] .iw-stat-icon.tint-amber  { background: #3a2a10; color: #e5a94e; }
html[data-bs-theme="dark"] .iw-stat-icon.tint-danger { background: #3a1518; color: #f1aeb5; }

.iw-stat-label { font-size: .77rem; color: var(--iw-ink-muted); margin-bottom: .05rem; }
.iw-stat-value {
    font-size: 1.4rem; font-weight: 720; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.iw-stat-note { font-size: .74rem; color: var(--iw-ink-muted); }

/* The label reads as a column heading rather than a sentence, which is what lets the figure
   below it be the thing the eye lands on. */
.iw-stat-label {
    text-transform: uppercase;
    letter-spacing: .045em;
    font-weight: 600;
}

.iw-stat-value { font-size: 1.55rem; }

/* The comparison against the period before. Deliberately not green-good/red-bad: less melt is
   good and less production is not, so the arrow states direction and the card's own wording
   carries the judgement. */
.iw-stat-delta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.iw-stat-delta.up   { color: #047857; }
.iw-stat-delta.down { color: #b91c1c; }
.iw-stat-delta.flat { color: var(--iw-ink-muted); }

html[data-bs-theme="dark"] .iw-stat-delta.up   { color: var(--iw-brand-300); }
html[data-bs-theme="dark"] .iw-stat-delta.down { color: #f1aeb5; }

/* ------------------------------------------------------- cards & tables */

.card {
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: var(--iw-radius);
    box-shadow: var(--iw-shadow);
}
.card-header {
    background: var(--iw-surface);
    border-bottom: 1px solid var(--iw-border);
    font-weight: 620; font-size: .92rem;
    padding: .75rem 1.05rem;
    border-top-left-radius: var(--iw-radius) !important;
    border-top-right-radius: var(--iw-radius) !important;
}
.card > .table { margin-bottom: 0; }
.card > .table-responsive {
    border-bottom-left-radius: var(--iw-radius);
    border-bottom-right-radius: var(--iw-radius);
}

.table { font-size: .91rem; --bs-table-hover-bg: var(--iw-primary-soft); }
.table thead th {
    font-size: .71rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--iw-ink-muted);
    background: var(--iw-content-bg);
    border-bottom: 1px solid var(--iw-border);
    white-space: nowrap;
}
.table td { vertical-align: middle; }

html[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--iw-ink);
    --bs-table-hover-bg: #1b2c26;
    --bs-table-hover-color: var(--iw-ink);
}
html[data-bs-theme="dark"] .table thead th { background: #101614; color: var(--iw-ink-muted); }
html[data-bs-theme="dark"] .table td, html[data-bs-theme="dark"] .table th { border-color: var(--iw-border); }

/* ----------------------------------------------------- buttons & forms */

.btn { border-radius: 9px; }
.btn-primary {
    --bs-btn-bg: var(--iw-primary); --bs-btn-border-color: var(--iw-primary);
    --bs-btn-hover-bg: var(--iw-primary-strong); --bs-btn-hover-border-color: var(--iw-primary-strong);
    --bs-btn-active-bg: var(--iw-primary-strong); --bs-btn-active-border-color: var(--iw-primary-strong);
}
.btn-outline-primary {
    --bs-btn-color: var(--iw-primary); --bs-btn-border-color: var(--iw-primary);
    --bs-btn-hover-bg: var(--iw-primary); --bs-btn-hover-border-color: var(--iw-primary);
    --bs-btn-active-bg: var(--iw-primary-strong); --bs-btn-active-border-color: var(--iw-primary-strong);
}
.text-primary { color: var(--iw-primary) !important; }

.form-control, .form-select { border-radius: 9px; }
.form-control:focus, .form-select:focus {
    border-color: var(--iw-primary);
    box-shadow: 0 0 0 .2rem rgba(5, 150, 105, .15);
}
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background: #101614; border-color: #2a3f38; color: var(--iw-ink);
}
html[data-bs-theme="dark"] .form-control::placeholder { color: #5d726c; }

.badge { font-weight: 600; border-radius: 6px; padding: .38em .6em; }

/* ------------------------------------------------------- auth screens */

.iw-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(1000px 500px at 50% -8%, var(--iw-brand-100), transparent 62%),
        var(--iw-content-bg);
}

/* ---------------------------------------------------- the split sign-in

   Two panels: what this is on the left, the form on the right. The panel is
   decoration for anybody who already knows what they are signing into, so it
   goes first in source order but is hidden below 992px rather than stacked
   above the form - on a phone at the plant gate the fields should be the first
   thing on screen, not three paragraphs of product copy.
   -------------------------------------------------------------------------- */

.iw-auth-split {
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: calc(var(--iw-radius) * 1.4);
    box-shadow: var(--iw-shadow-lg);
    overflow: hidden;
}

@media (min-width: 992px) {
    .iw-auth-split { grid-template-columns: 1.05fr .95fr; }
}

.iw-auth-panel {
    display: none;
    padding: 2.75rem 2.5rem;
    color: #fff;
    background:
        radial-gradient(700px 320px at 15% 0%, var(--iw-brand-500), transparent 70%),
        linear-gradient(155deg, var(--iw-brand-700), var(--iw-brand-900));
}

@media (min-width: 992px) {
    .iw-auth-panel { display: flex; flex-direction: column; justify-content: space-between; }
}

.iw-auth-panel h2 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.18;
    margin: 0 0 .75rem;
}

.iw-auth-panel p { color: rgba(255, 255, 255, .82); margin: 0; }

.iw-auth-mark {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 680;
    letter-spacing: -.01em;
    font-size: 1.05rem;
}

.iw-auth-mark img { width: 30px; height: 30px; }

.iw-auth-points {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: .85rem;
}

.iw-auth-points li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .9rem;
    color: rgba(255, 255, 255, .9);
}

.iw-auth-points svg { flex: 0 0 auto; margin-top: .12rem; opacity: .9; }

.iw-auth-form { padding: 2.5rem 2.25rem; }

@media (max-width: 575.98px) {
    .iw-auth-form { padding: 1.75rem 1.25rem; }
}

html[data-bs-theme="dark"] .iw-auth {
    background:
        radial-gradient(1000px 500px at 50% -8%, #073a2c, transparent 62%),
        var(--iw-content-bg);
}

.iw-auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: var(--iw-radius);
    box-shadow: var(--iw-shadow-lg);
    padding: 2rem;
}

.iw-auth-brand {
    font-size: 1.35rem;
    font-weight: 680;
    letter-spacing: -.02em;
    color: var(--iw-ink);
}

.iw-auth-sub { color: var(--iw-ink-muted); font-size: .88rem; }

/* ------------------------------------------------ bootstrap overrides */

.card {
    background: var(--iw-surface);
    border: 1px solid var(--iw-border);
    border-radius: var(--iw-radius);
    box-shadow: var(--iw-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--iw-border);
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--iw-primary);
    --bs-btn-border-color: var(--iw-primary);
    --bs-btn-hover-bg: var(--iw-primary-strong);
    --bs-btn-hover-border-color: var(--iw-primary-strong);
    --bs-btn-active-bg: var(--iw-primary-strong);
    --bs-btn-active-border-color: var(--iw-primary-strong);
    --bs-btn-disabled-bg: var(--iw-primary);
    --bs-btn-disabled-border-color: var(--iw-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--iw-primary);
    --bs-btn-border-color: var(--iw-primary);
    --bs-btn-hover-bg: var(--iw-primary);
    --bs-btn-hover-border-color: var(--iw-primary);
}

a { color: var(--iw-primary-strong); }
a:hover { color: var(--iw-primary); }

.form-control:focus, .form-select:focus {
    border-color: var(--iw-primary-light);
    box-shadow: 0 0 0 .2rem rgba(5, 150, 105, .18);
}

.table { --bs-table-color: var(--iw-ink); }

.table thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--iw-ink-muted);
    border-bottom-color: var(--iw-border);
    font-weight: 600;
}

/* Quantities and money line up only in a tabular figure face. */
.iw-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* An estimated figure must never be mistaken for a counted one (requirement 17). */
.iw-estimated {
    color: var(--iw-ink-muted);
    font-style: italic;
}

.iw-estimated::after {
    content: " (est.)";
    font-size: .78em;
    font-style: normal;
}

/* The validation summary tag helper always emits its wrapper, adding this class when there is
   nothing to report. Without the rule the wrapper renders as an empty red box on a clean form —
   which reads as "something is wrong" before the user has typed anything. */
.validation-summary-valid { display: none; }

/* A signature has to look like somewhere to sign: a bordered box, full width, and tall enough
   for a thumb on a phone. touch-action keeps a finger stroke from scrolling the page instead. */
.iw-signature {
    width: 100%;
    height: 200px;
    border: 1px dashed var(--bs-border-color, #999);
    border-radius: .375rem;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

/* --------------------------------------------------------------------------
   Reports.

   A report is a table somebody reads down a column of, compares two rows in, and then hands to a
   director. Plain rows made that harder than it needed to be: zebra striping gives the eye a line
   to follow, and the two total bands say which figures are answers rather than data.

   Colour is structural here, never decorative. The severity classes the report builder already
   sets (text-danger / text-warning / text-success) keep their meaning, so nothing added below is
   allowed to compete with them for attention.
   -------------------------------------------------------------------------- */

/* :nth-child, not :nth-of-type — the "of S" argument exists only on :nth-child, and the wrong one
   parses as nothing at all, so the stripes silently never appear. Selecting on the data rows alone
   keeps the group header and the subtotal out of the count, which is what makes the striping stay
   in step across a grouped report. */
.iw-report tbody tr:nth-child(odd of :not(.iw-report-group):not(.iw-report-subtotal)) > td {
    background: color-mix(in srgb, var(--iw-content-bg) 55%, transparent);
}

/* The group name is a heading, so it reads as one rather than as a slightly grey row. */
.iw-report .iw-report-group > th {
    background: var(--iw-primary-soft);
    color: var(--iw-primary-strong);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--iw-border);
}

.iw-report .iw-report-subtotal > td {
    background: color-mix(in srgb, var(--iw-content-bg) 80%, transparent);
    border-top: 1px solid var(--iw-border);
}

/* The grand total is the figure people quote, so it is the one band that is allowed to be loud. */
.iw-report .iw-report-total > td {
    background: var(--iw-primary-soft);
    color: var(--iw-primary-strong);
    border-top: 2px solid var(--iw-primary);
    font-size: .95rem;
}

html[data-bs-theme="dark"] .iw-report tbody tr:nth-child(odd of :not(.iw-report-group):not(.iw-report-subtotal)) > td {
    background: rgba(255, 255, 255, .025);
}

html[data-bs-theme="dark"] .iw-report .iw-report-subtotal > td {
    background: rgba(255, 255, 255, .04);
}

/* Ink on paper, not emerald on white: a total band printed as a colour wash costs toner and
   reproduces as grey mush on an office laser. The rule stays; the fill goes. */
@media print {
    .iw-report .iw-report-group > th,
    .iw-report .iw-report-total > td,
    .iw-report .iw-report-subtotal > td {
        background: transparent !important;
        color: #000 !important;
    }
    .iw-report .iw-report-total > td { border-top: 2px solid #000 !important; }
    .iw-report tbody tr > td { background: transparent !important; }
}

/* --------------------------------------------------------------------------
   Print. A report that cannot be handed to somebody on paper is half a report
   in a plant where the director reads figures at a desk and the storekeeper
   reads them on a wall. The sidebar, the top bar and the filter form are
   navigation, not content, so none of them belongs on the page.
   -------------------------------------------------------------------------- */
@media print {
    .iw-sidebar,
    .iw-topbar,
    .iw-no-print,
    .alert-success {
        display: none !important;
    }

    .iw-shell,
    .iw-main {
        display: block;
        margin: 0;
        padding: 0;
    }

    .iw-content {
        padding: 0;
    }

    /* The report's identity block. On screen it is quiet, because the topbar above already says
       the company and the page; on paper it is the only thing that does, so it earns a rule under
       it and repeats on every sheet of a long report. */
    .iw-report-head {
        border-bottom: 1px solid #000;
        padding-bottom: .4rem;
        margin-bottom: .8rem;
    }

    /* Ink is expensive and a printer's colour management is nobody's friend. */
    body {
        background: #fff;
        color: #000;
    }

    .card {
        border: 1px solid #999;
        box-shadow: none;
        break-inside: avoid;
    }

    /* A table that splits across pages must repeat its headings, or the second
       page is a grid of unlabelled numbers. */
    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    tr {
        break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }
}

/* ------------------------------------------------- host-admin bridge banner

   Deliberately loud and deliberately not brand-coloured: it means "an eLivecode
   operator is inside a client tenant", which should never blend into chrome.
   -------------------------------------------------------------------------- */

.iw-host-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem 1rem;
    background: #7c2d12; color: #fff7ed;
    font-weight: 600; font-size: .88rem;
}

/* Pre-paint width for a restored mini sidebar. The marker class goes on <html> by the nonced
   inline script; site.js moves it onto the shell once that element exists. Without this rule the
   sidebar paints at full width and then visibly snaps narrow. */
@media (min-width: 992px) {
    html.iw-boot-mini .iw-sidebar { width: 74px; flex-basis: 74px; }
    html.iw-boot-mini .iw-brand-text,
    html.iw-boot-mini .iw-nav-section,
    html.iw-boot-mini .iw-nav .lbl,
    html.iw-boot-mini .iw-caret,
    html.iw-boot-mini .iw-subnav,
    html.iw-boot-mini .iw-collapse-btn span { display: none; }
}

/* ---- phone-first pages ---------------------------------------------------
   The plant records water and production on phones. These pages are one narrow column at any
   width, so the controls a thumb needs are full width and nothing scrolls sideways. */
.iw-phone { max-width: 34rem; }
.iw-phone .list-group-item { overflow-wrap: anywhere; }
.iw-phone details > summary { cursor: pointer; padding: .25rem 0; }
.iw-quick .btn { min-height: 3.25rem; display: flex; align-items: center; justify-content: center; text-align: center; }