/* ==========================================================================
   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 */

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

.iw-sidebar {
    width: 248px;
    flex: 0 0 248px;
    background: var(--iw-sidebar-bg);
    color: var(--iw-sidebar-ink);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.iw-brand {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: 1.1rem 1.25rem;
    color: #fff;
    font-weight: 650;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    text-decoration: none;
}

.iw-brand small {
    color: var(--iw-sidebar-ink);
    font-weight: 400;
    font-size: .72rem;
}

.iw-nav { padding: .25rem .6rem 1rem; }

.iw-nav-section {
    padding: .9rem .65rem .35rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b8b7d;
}

.iw-nav a {
    display: block;
    padding: .5rem .65rem;
    border-radius: 8px;
    color: var(--iw-sidebar-ink);
    text-decoration: none;
    font-size: .9rem;
}

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

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

.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: .7rem 1.5rem;
    background: var(--iw-surface);
    border-bottom: 1px solid var(--iw-border);
}

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

.iw-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--iw-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
}

@media (max-width: 820px) {
    .iw-shell { flex-direction: column; }
    .iw-sidebar { width: 100%; flex: none; height: auto; position: static; }
    .iw-content { padding: 1rem; }
}

/* ------------------------------------------------------- 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);
}

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;
}

/* --------------------------------------------------------------------------
   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;
    }

    /* 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: "";
    }
}