/* ===== CSS custom properties (theme) ===== */
:root {
    --bg: #0f172a;
    --bg-raised: #1e293b;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --border: #334155;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --good: #22c55e;
    --warn: #f59e0b;
    --bad: #ef4444;
    --radius: 12px;
    --radius-sm: 8px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}

/* ===== base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    /* Respect iOS safe areas. The sticky .app-header handles its own
       top inset, so we only pad horizontal + bottom on body — that
       keeps edge-to-edge content (like the grid) from sliding under
       the landscape notch zone or the home indicator. */
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ===== login screen ===== */
.screen { min-height: 100vh; }
.login-card {
    max-width: 360px;
    margin: 15vh auto;
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}
.login-card h1 { font-size: 22px; margin-bottom: var(--space-xs); }
.login-card p { margin: 0 0 var(--space-lg) 0; }
.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: white;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    justify-content: center;
}
.btn-google:hover { background: #f8f9fa; }
.btn-google:active { background: #f1f3f4; }
.legal-links { margin-top: var(--space-md); }
.legal-links a { color: var(--text-muted); text-decoration: none; }
.legal-links a:hover { color: var(--text); }

/* ===== app header ===== */
.app-header {
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md);
    /* On iOS PWAs we render under the translucent status bar (see meta tag in
       index.html). Bump top padding by the safe-area inset so the title clears
       the time/battery on notched iPhones, and the sticky header's background
       continues up behind them as a backdrop. */
    padding-top: max(var(--space-md), env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 10;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    /* Reserve space on the right for the body-level fixed-position
       hamburger menu (.menu-wrap-fixed at top:12px right:12px). Without
       this the Cases screen's "+ New case" button collides with the
       menu. ~52px = button width (~36) + right offset (12) + small gap. */
    padding-right: 52px;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

/* ===== hamburger menu ===== */
.menu-wrap { position: relative; }

/* Fixed-position variant — body-level menu visible on every screen
   (cases, locations, etc.) instead of just the main app header.
   The max() with env() keeps the button out of the iOS notch zone in
   portrait and out of the landscape side cutout when the notch is on
   the right side of the viewport. */
.menu-wrap.menu-wrap-fixed {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 30;
}
.menu-wrap-fixed .btn-menu {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.menu-wrap-fixed .btn-menu:hover { background: var(--bg-hover); }

.btn-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    color: var(--text);
}
.menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 4px;
    z-index: 20;
    display: flex;
    flex-direction: column;
}
.menu-dropdown.hidden { display: none; }
.menu-email {
    padding: 8px 12px;
    word-break: break-all;
}
.menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.menu-item {
    text-align: left;
    background: transparent;
    color: var(--text);
    border: none;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.menu-item:hover { background: var(--bg-hover); }
.summary-bar {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: var(--space-sm);
}
.search {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.kit-filters {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-sm);
    flex-wrap: wrap;
}
.filter-select {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.filter-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.filter-select.active {
    border-color: var(--accent);
    background: var(--bg-hover);
}
.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 6px;
    text-decoration: underline;
}
.btn-link:hover { opacity: 0.85; }

/* Container for the search-mode + view-mode toggles. They sit
   side-by-side on desktop and wrap to two lines on narrow screens.
   Right padding leaves room for the body-level fixed hamburger so
   the rightmost button (Hide/Show header) doesn't get covered. */
.kits-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    padding-right: 52px;
    margin-bottom: var(--space-sm);
}

/* ===== search mode toggle (Kits | Items) ===== */
.search-mode {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    margin-bottom: var(--space-sm);
}
.seg-btn {
    padding: 6px 14px;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.seg-btn.active {
    background: var(--accent);
    color: var(--bg);
    font-weight: 500;
}

/* ===== item search results ===== */
.item-results {
    padding: var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}
.item-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.item-result-card:hover { background: var(--bg-hover); }
.item-result-desc { font-weight: 500; }
.item-result-ref { font-size: 13px; color: var(--text-muted); }
.item-result-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: 13px;
    color: var(--text-muted);
    flex-wrap: wrap;
    margin-top: 4px;
}
.item-result-meta .qty-short { color: var(--danger, #d33); font-weight: 500; }
.item-result-empty {
    text-align: center;
    padding: var(--space-lg);
    color: var(--text-muted);
}

/* Briefly highlight an item row when scrolled to from item search */
.item-row-highlight { animation: itemPulse 1.6s ease-out; }
@keyframes itemPulse {
    0%   { background: rgba(99, 102, 241, 0.35); }
    100% { background: transparent; }
}

/* ===== kit list ===== */
.kits-container {
    padding: var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}
.kit-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
    overflow: hidden;
}
.kit-header {
    padding: var(--space-md);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    user-select: none;
}
.kit-header:hover { background: var(--bg-hover); }
.kit-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-sm);
}
.kit-title { font-weight: 600; font-size: 15px; }
.kit-serial { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--text-muted); }
.kit-subinfo { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.kit-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
}
.progress-fill { height: 100%; transition: width 0.3s; }
.progress-good { background: var(--good); }
.progress-warn { background: var(--warn); }
.progress-bad { background: var(--bad); }

.kit-body {
    border-top: 1px solid var(--border);
    padding: var(--space-md);
    display: none;
}
.kit-card.open .kit-body { display: block; }
.kit-card.open .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.2s; }

/* ===== kit fields (location, status) ===== */
.kit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
/* 3-column variant — used when there are 3 fields side by side
   (parent / location / sterilization on the kit detail). Drops to
   1 column on mobile via the media query below. */
.kit-fields.kit-fields-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 500px) {
    .kit-fields,
    .kit-fields.kit-fields-3 { grid-template-columns: 1fr; }
}
.field label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.field input, .field select {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.field input:focus, .field select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

/* ===== child kits (shown in parent kit detail, before BOM items) ===== */
.kit-children-section {
    margin-bottom: var(--space-md);
}
.kit-children-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.kit-child-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 10px;
    margin-bottom: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    /* Deliberately distinct from BOM item rows: italic + accent serial */
    font-style: italic;
    transition: background 0.15s, border-color 0.15s;
}
.kit-child-row:hover { border-color: var(--accent); }
.kit-child-serial {
    font-weight: 600;
    color: var(--accent);
    font-style: normal;
}
.kit-child-sub {
    color: var(--text-muted);
    font-size: 13px;
    flex: 1;
}
.kit-child-chevron {
    margin-left: auto;
    color: var(--text-muted);
    font-style: normal;
    font-size: 18px;
}

/* ===== items table ===== */
.items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.items-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
}
.items-table td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.items-table tr:last-child td { border-bottom: none; }
.item-desc { font-weight: 500; }
.item-ref { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--text-muted); }
.qty-input {
    width: 52px;
    padding: 4px 6px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
    font-family: inherit;
    font-size: 13px;
}
.qty-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.qty-short { color: var(--bad); font-weight: 600; }
.qty-over { color: var(--warn); font-weight: 600; }

/* ===== empty state ===== */
.empty-state {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
    max-width: 420px;
    margin: 10vh auto;
}
.empty-state h2 { margin-bottom: var(--space-sm); color: var(--text); }

/* ===== loading & toast ===== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
    position: fixed;
    bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-raised);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    box-shadow: var(--shadow);
    z-index: 90;
    max-width: 90vw;
}
.toast.error { border-color: var(--bad); }
.toast.success { border-color: var(--good); }

/* ===== locations screen ===== */
.header-back {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.header-back h1 { font-size: 18px; }
.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { background: var(--border); cursor: not-allowed; }

.location-add-form {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.location-add-form input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.location-add-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Surgeon-add form is the same flex layout but with a hospital
   select prefixed to the input. */
.surgeon-add-form {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}
.surgeon-add-form select,
.surgeon-add-form input {
    padding: 10px 12px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.surgeon-add-form select { min-width: 160px; }
.surgeon-add-form input { flex: 1; min-width: 140px; }
.surgeon-add-form select:focus,
.surgeon-add-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Edit + Delete buttons grouped on the right of each list row. */
.list-row-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}
.list-row-actions .btn-link {
    background: transparent;
    color: var(--accent);
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 13px;
}
.list-row-actions .btn-link:hover { text-decoration: underline; }

/* Hospital name as a header above its surgeons in the surgeons list. */
.surgeon-group-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    padding-top: var(--space-sm) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.locations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.locations-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px var(--space-md);
    border-bottom: 1px solid var(--border);
}
.locations-list li:last-child { border-bottom: none; }
.locations-list .location-name { flex: 1; }
.btn-delete {
    background: transparent;
    color: var(--bad);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.btn-delete:hover { background: var(--bad); color: white; border-color: var(--bad); }

/* ===== add kit screen ===== */
.addkit-form { display: flex; flex-direction: column; gap: var(--space-md); }
.addkit-form .field input,
.addkit-form .field select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.addkit-form .field input:focus,
.addkit-form .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.serial-input {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    overflow: hidden;
}
.serial-input:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
.serial-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    color: var(--text-muted);
    background: var(--bg);
    border-right: 1px solid var(--border);
    user-select: none;
    white-space: nowrap;
}
.addkit-form .serial-input input {
    flex: 1;
    border: none;
    border-radius: 0;
    background: transparent;
}
.addkit-form .serial-input input:focus { outline: none; }
.addkit-preview {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
}
.addkit-preview h3 { font-size: 13px; margin-bottom: var(--space-sm); }
.addkit-preview-item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.addkit-preview-item:last-child { border-bottom: none; }
.addkit-preview-item .preview-ref { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--text-muted); }
.addkit-preview-item .preview-qty { color: var(--text-muted); white-space: nowrap; }
.addkit-preview-item .preview-qty-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.addkit-qty-input {
    width: 56px;
    padding: 4px 6px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    text-align: right;
}
.addkit-qty-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.addkit-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }
.addkit-actions .btn-primary { width: 100%; padding: 12px; font-size: 15px; }

/* ===== team screen ===== */
.team-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}
.team-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.team-section h2 { font-size: 14px; }
.team-section-header .btn-primary { padding: 6px 12px; font-size: 12px; }
.team-hint { margin-bottom: var(--space-sm); }

.members-list, .invites-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.members-list li, .invites-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.members-list li:last-child, .invites-list li:last-child { border-bottom: none; }
.member-email, .invite-link {
    flex: 1;
    min-width: 0;
    word-break: break-all;
}
.member-email { font-size: 14px; }
.member-sub, .invite-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.invite-link {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg);
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-owner { background: var(--accent); color: white; }
.role-member { background: var(--bg-hover); color: var(--text-muted); }
.member-actions, .invite-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

/* ===== reorder list screen ===== */
.reorder-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}
.reorder-actions .btn-primary {
    padding: 8px 14px;
    font-size: 13px;
}
.reorder-table th.num,
.reorder-table td.num {
    text-align: right;
    white-space: nowrap;
}
.reorder-table .reorder-kits {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--text-muted);
    word-break: break-word;
}
.reorder-table .reorder-qty {
    font-weight: 600;
    color: var(--bad);
}

/* ===== delete kit row ===== */
.kit-delete-row {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}
.btn-danger {
    background: transparent;
    color: var(--bad);
    border: 1px solid var(--bad);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

/* ===== subscription status banner (past_due / canceled) ===== */
.subscription-banner {
    background: var(--bad);
    color: white;
    padding: 10px var(--space-md);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}
.subscription-banner.trial {
    background: var(--accent);
}

/* ===== onboarding / request-access / application status ===== */
.onboarding-card {
    max-width: 480px;
    margin: 8vh auto;
    padding: var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.onboarding-card h1 {
    font-size: 22px;
    margin-bottom: var(--space-xs);
}
.onboarding-card > .muted {
    margin: 0 0 var(--space-lg) 0;
    font-size: 14px;
    line-height: 1.5;
}
.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.onboarding-form .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.onboarding-form label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.onboarding-form input,
.onboarding-form textarea {
    padding: 10px 12px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.onboarding-form textarea {
    resize: vertical;
    min-height: 80px;
}
.onboarding-form .btn-primary {
    padding: 12px;
    font-size: 15px;
    margin-top: var(--space-xs);
}
.onboarding-form .btn-ghost {
    align-self: center;
    font-size: 12px;
}

.appstatus-reason {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    margin-bottom: var(--space-md);
}

/* ===== admin applications screen ===== */
.applications-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.application-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
}
.application-card h3 {
    font-size: 15px;
    margin: 0 0 4px 0;
}
.application-card .app-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
}
.application-card .app-meta strong { color: var(--text); font-weight: 500; }
.application-card .app-notes {
    padding: 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    margin-bottom: var(--space-sm);
}
.application-card .app-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}
.application-card .app-actions .btn-primary {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-danger:hover { background: var(--bad); color: white; }

/* ===== receive shipment screen ===== */
.receive-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    text-align: center;
}
.receive-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 14px var(--space-md);
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    word-break: break-all;
    text-align: left;
}
.receive-file-label:hover { background: var(--bg-hover); }
.receive-file-icon {
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.receive-upload .btn-primary { padding: 12px; font-size: 15px; }
.receive-upload p { margin: 0; }

.receive-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.receive-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 13px;
}
.receive-summary-row .muted { text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }

.receive-warnings {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warn);
    color: var(--text);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: var(--space-md);
}
.receive-warnings ul { margin: 4px 0 0 0; padding-left: 20px; }

/* Status badges on Import preview cards.
   matched = bumping qty on existing kit  → neutral/info
   new     = will create from template     → primary
   warn    = blocked / no template         → warning */
.import-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
}
.import-badge.badge-matched {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.4);
}
.import-badge.badge-new {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.import-badge.badge-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.receive-kits {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.receive-kit-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: opacity 0.2s;
}
.receive-kit-card.dropped { opacity: 0.45; }
.receive-kit-card.dropped .receive-kit-edit,
.receive-kit-card.dropped .receive-kit-body { pointer-events: none; }

.receive-kit-header {
    padding: var(--space-md);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    user-select: none;
}
.receive-kit-header:hover { background: var(--bg-hover); }
.receive-kit-header-main { flex: 1; min-width: 0; }
.receive-kit-title { font-weight: 600; font-size: 14px; }
.receive-kit-batch { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--text-muted); }
.receive-kit-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.receive-kit-card.open .chevron { transform: rotate(180deg); }

.receive-drop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--border);
}
.receive-drop-toggle:hover { background: var(--bg-hover); color: var(--text); }
.receive-drop-toggle input { margin: 0; cursor: pointer; }

.receive-kit-body {
    border-top: 1px solid var(--border);
    padding: var(--space-md);
    display: none;
}
.receive-kit-card.open .receive-kit-body { display: block; }
.receive-kit-edit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
@media (max-width: 500px) {
    .receive-kit-edit { grid-template-columns: 1fr; }
}

.receive-items-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.receive-items-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
}
.receive-items-table td {
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.receive-items-table tr:last-child td { border-bottom: none; }
.receive-items-table .ref { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: var(--text-muted); }
.receive-items-table .num { text-align: right; }
.receive-items-table input.qty {
    width: 56px;
    padding: 4px 6px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    text-align: right;
    font-family: inherit;
}
.receive-items-table .row-short td { color: var(--warn); }
.receive-items-table .row-short .num { font-weight: 600; }

.receive-actions {
    display: flex;
    gap: var(--space-sm);
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: var(--space-md);
    /* Same safe-area trick as .app-header but for the bottom — keeps the
       commit button above the iOS home indicator. */
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    margin: 0 calc(-1 * var(--space-md));
    border-top: 1px solid var(--border);
}
.receive-actions .btn-primary { flex: 1; padding: 12px; font-size: 15px; }
.receive-actions .btn-ghost { padding: 12px var(--space-md); }

/* ===== expiry alerts screen ===== */
.expiry-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.expiry-controls .filter-select { max-width: 180px; }
.expiry-prefs-wrap { margin-left: auto; }
.expiry-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.expiry-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
}
.expiry-row-main { flex: 1; min-width: 0; }
.expiry-row-title { margin-bottom: 4px; }
.expiry-row-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    white-space: nowrap;
    font-size: 13px;
}
.expiry-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.expiry-badge-expired { background: var(--bad); color: white; }
.expiry-badge-soon    { background: var(--warn); color: #1f2937; }
.expiry-badge-warn    { background: var(--bg-hover); color: var(--text-muted); }

.checkbox-label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; }

/* ===== cases screen ===== */
.cases-controls {
    display: flex;
    gap: var(--space-sm);
}
.cases-controls .filter-select { max-width: 180px; }
.cases-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.case-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    cursor: pointer;
}
.case-row:hover { background: var(--bg-hover); }
.case-row-main { flex: 1; min-width: 0; }
.case-row-title { margin-bottom: 4px; }
.case-kits-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.case-kit-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text);
    font-size: 11px;
}
.case-warn {
    margin-top: 6px;
    color: var(--warn);
    font-size: 12px;
}
.role-badge.case-status-scheduled { background: var(--accent); color: white; }
.role-badge.case-status-completed { background: var(--bg-hover); color: var(--text-muted); }
.role-badge.case-status-canceled  { background: var(--bad); color: white; }

.case-kit-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-sm);
    background: var(--bg);
}
/* The kit picker rows are inside .field, which means .field label
   matches them with higher specificity (display:block, uppercase text).
   Using `label.case-kit-pick` ties that specificity and wins by source
   order; the explicit overrides below keep the inherited form-label
   styling out of the picker. */
label.case-kit-pick {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm);
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 0;
}
label.case-kit-pick:hover { background: var(--bg-hover); }
label.case-kit-pick.case-kit-warn { border: 1px solid var(--warn); }
label.case-kit-pick input[type="checkbox"] { width: 18px; height: 18px; }
.case-kit-pick-text { min-width: 0; word-break: break-word; }
.case-kit-pick-text strong { display: block; }
.case-kit-expires { white-space: nowrap; font-size: 12px; }

/* ===== kits grid (spreadsheet) view ===== */
.kits-grid-wrap {
    /* Edge-to-edge on mobile so the safe area isn't eaten by margins;
       horizontal scroll for the columns that don't fit. Use horizontal
       margins only on wider screens where the page layout looks empty
       without them. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    margin-bottom: var(--space-md);
}
@media (min-width: 700px) {
    .kits-grid-wrap {
        margin: 0 var(--space-md) var(--space-md);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
}
.kits-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 880px; /* forces horizontal scroll instead of cramming */
}
.kits-grid thead {
    background: var(--bg-raised);
    position: sticky;
    top: 0;
    z-index: 1;
}
.kits-grid-th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.kits-grid-th:hover { color: var(--text); }
.kits-grid-th.sorted { color: var(--accent); }
.kits-grid-row {
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.kits-grid-row:last-child { border-bottom: none; }
.kits-grid-row:hover { background: var(--bg-hover); }
.kits-grid-cell {
    padding: 10px 12px;
    vertical-align: top;
    color: var(--text);
}
.kits-grid-cell.muted { color: var(--text-muted); }
.kits-grid-cell.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Case cell behaves like a link inside the row — tapping it opens
   the case editor instead of the kit detail. */
.kits-grid-case-link { color: var(--accent); }
.kits-grid-case-link:hover { text-decoration: underline; }
.kits-grid-case-link .muted { color: var(--text-muted); }

/* ===== history (audit log) screen ===== */
.history-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}
.history-controls .filter-select { max-width: 180px; }
.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.history-day-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: var(--space-md) 0 var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-xs);
}
.history-entry {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-xs);
}
.history-entry-line { font-size: 13px; }
.history-entry-meta { margin-top: 4px; }
.history-action {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.history-action-insert { background: var(--good); color: #052e16; }
.history-action-update { background: var(--accent); color: white; }
.history-action-delete { background: var(--bad); color: white; }
.history-text { color: var(--text); }

.history-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: var(--space-md) 0;
}

/* ===== parent/child kit indicators ===== */
.kit-parent-badge,
.kit-children-badge {
    display: inline-block;
    margin-left: var(--space-sm);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
}
.kit-parent-badge   { background: var(--bg-hover); color: var(--text-muted); }
.kit-children-badge { background: var(--accent); color: white; }

.inherited-note {
    margin: 4px 0 0 0;
    font-style: italic;
}
/* Greyed look on disabled selects so it's obvious they're locked. */
.field select[disabled],
.kits-grid-select[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== close-case workflow ===== */
.case-closeout-warn {
    background: #422006;
    border: 1px solid var(--warn);
    color: #fcd34d;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-top: var(--space-sm);
}
.closeout-kit {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}
.closeout-kit-header {
    margin-bottom: var(--space-sm);
}
.closeout-table { width: 100%; }
.closeout-qty-input {
    width: 70px;
    padding: 4px 6px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: right;
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.closeout-used { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.closeout-used.closeout-used-positive { color: var(--warn); font-weight: 600; }
/* Item cell on the close-out table — show ref|description on one line. */
.closeout-item-ref  { font-weight: 600; color: var(--text); }
.closeout-item-desc { color: var(--text-muted); }

/* Completed-case mode: hide the editable form and show the summary
   panel only. .case-edit-completed is toggled on #case-edit-screen
   in JS when status === 'completed'. */
#case-edit-screen.case-edit-completed .kit-fields,
#case-edit-screen.case-edit-completed #case-edit-form > .field,
#case-edit-screen.case-edit-completed #case-kit-warning {
    display: none;
}
/* Show all fields except those in the summary panel — keep the
   summary panel itself visible. */
#case-edit-screen.case-edit-completed #case-summary-panel {
    display: block;
}
.case-summary-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}
.case-summary-panel h3 { margin-top: 0; font-size: 16px; }
.case-summary-actions {
    margin-top: var(--space-md);
    display: flex;
    justify-content: flex-end;
}
.summary-kit-list {
    padding-left: 24px;
    margin: 0;
}
.summary-kit-list > li { margin-bottom: var(--space-md); }
.summary-kit-title { margin-bottom: var(--space-xs); }
.summary-item-list {
    padding-left: 24px;
    margin: 0;
}
.summary-item-list li { padding: 2px 0; }
.summary-qty {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: 600;
}

/* Per-column sizing — keeps the grid from squeezing the case/expiry
   columns. Description is the only column allowed to wrap. */
.kits-grid .col-serial        { white-space: nowrap; }
.kits-grid .col-kit-id        { white-space: nowrap; }
.kits-grid .col-description   { min-width: 220px; max-width: 320px; }
.kits-grid .col-location      { min-width: 140px; }
.kits-grid .col-sterilization { min-width: 130px; }
.kits-grid .col-items         { white-space: nowrap; }
.kits-grid .col-case          { min-width: 180px; white-space: nowrap; }
.kits-grid .col-expiry        { min-width: 140px; white-space: nowrap; }

/* Inline selects in editable cells. Smaller padding so the table rows
   don't get a lot taller, and full-width within the cell. */
.kits-grid-select {
    width: 100%;
    padding: 4px 6px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.kits-grid-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* "Compact header" mode: collapses everything in .app-header except
   the toolbar (search-mode + view-mode toggles), giving back vertical
   space on landscape mobile. Toggled by the #compact-header-btn. */
#app-screen.app-header-compact .app-header > .header-inner,
#app-screen.app-header-compact .app-header > .summary-bar,
#app-screen.app-header-compact .app-header > .search,
#app-screen.app-header-compact .app-header > .kit-filters,
#app-screen.app-header-compact .app-header > #subscription-banner {
    display: none !important;
}
/* Header collapse toggle — body-level fixed button that sits to the
   LEFT of the hamburger and matches its size/style. Stays in place
   when the header below collapses, instead of riding up with the
   shrinking content. */
.compact-header-btn {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    /* Hamburger is at right: max(12px, env(safe-area-inset-right))
       and is ~36px wide. Reserve room for it plus a small gap. */
    right: calc(max(12px, env(safe-area-inset-right)) + 44px);
    z-index: 30;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    color: var(--text);
    padding: 6px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.compact-header-btn:hover { background: var(--bg-hover); }
.compact-header-btn svg { transition: transform 120ms ease; display: block; }
.compact-header-btn.flipped svg { transform: rotate(180deg); }