/* ── Kit management page styles ─────────────────────────────────────────────── */

/* ── Header page nav (Kit / Spares / Lists / Snowsports) ─────────────────────── */
.header-page-nav {
    display: flex;
    align-items: stretch;
    height: var(--header-h);
}
.header-page-nav a {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    color: rgba(255,255,255,.75);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.header-page-nav a:hover  { color: #fff; border-bottom-color: rgba(255,255,255,.4); text-decoration: none; }
.header-page-nav a.active { color: #fff; border-bottom-color: #fff; }

/* ── Page layout ─────────────────────────────────────────────────────────────── */
body.kit-page {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.kit-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.kit-sidebar {
    width: 240px;
    min-width: 140px;
    max-width: 520px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.sidebar-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}
.sidebar-resizer:hover,
.sidebar-resizer.is-dragging {
    background: var(--brand);
    opacity: 0.25;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 1rem;
}

.sidebar-toolbar {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-toolbar button {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}
.sidebar-toolbar button:hover { background: var(--bg); color: var(--text); }

/* ── Tag reader ──────────────────────────────────────────────────────────────── */
.tag-reader-bar {
    padding: 0.5rem 0.75rem;
    background: var(--brand-dark);
    flex-shrink: 0;
}

.tag-reader-bar input {
    width: 100%;
    background: rgba(255,255,255,0.12);
    border: 1.5px dashed rgba(255,255,255,0.35);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    color: #fff;
    outline: none;
}
.tag-reader-bar input::placeholder { color: rgba(255,255,255,0.55); }
.tag-reader-bar input:focus { border-color: rgba(255,255,255,0.7); }
.tag-reader-bar input.error { border-color: #fca5a5; background: rgba(220,38,38,0.2); }

/* ── Folder tree ─────────────────────────────────────────────────────────────── */
.folder-tree {
    padding: 0.25rem 0.5rem 0.5rem 0.75rem;
    font-size: 0.84rem;
}

.folder-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nested children — full width so it sits below the toggle+link row.
   margin-left positions the border-left under the toggle button centre;
   padding-left provides the visible indentation for child items.
   Use .folder-tree .folder-children (0,2,0) to beat the .folder-tree ul (0,1,1) reset. */
.folder-tree .folder-children {
    display: none;
    flex: 0 0 100%;
    margin-left: 8px;
    padding-left: 22px;
    border-left: 1px solid #ccc;
}
.folder-tree .folder-children.open { display: block; }

/* Each item is a flex row; children ul wraps onto its own line below */
.folder-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 24px;
    position: relative;
}

/* Horizontal connector line from vertical bar to the toggle/link.
   top: 12px aligns to the centre of a single row (min-height 24px) regardless
   of how tall the item becomes when expanded. */
.folder-tree .folder-children > .folder-item::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 12px;
    width: 18px;
    height: 1px;
    background: #ccc;
}
/* Leaf nodes have no toggle, so the link starts at left:0 — extend the
   connector to reach it. */
.folder-tree .folder-children > .folder-item:not(.has-children)::before {
    width: 22px;
}

/* Toggle button — blue square with + / − */
.folder-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    margin-right: 3px;
    flex-shrink: 0;
    transition: background 0.12s;
}
.folder-toggle:hover { background: var(--brand-dark); }


.folder-link {
    flex: 1;
    padding: 0.2rem 0.3rem;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.12s;
    min-width: 0;
}
.folder-link:hover { color: var(--brand-dark); text-decoration: underline; }
.folder-link.active { font-weight: 700; color: var(--brand-dark); }

/* "All Equipment" root row — separator below to distinguish from child folders */
.folder-root {
    padding-bottom: 0.35rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}
.folder-root > .folder-link {
    font-weight: 700;
}

.overdue-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 1;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* ── Main content ────────────────────────────────────────────────────────────── */
.kit-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
    min-width: 0;
}

/* ── Landing screen (pick an area before items load) ─────────────────────────── */
#kit-landing { display: none; }

/* While the landing is active, it is the only visible child of .kit-main */
.kit-main.landing-active > *:not(#kit-landing) { display: none !important; }
.kit-main.landing-active #kit-landing {
    display: flex;
    flex: 1;
    overflow-y: auto;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 6vh, 4rem) 1rem 2rem;
}

.kit-landing-inner {
    width: 100%;
    max-width: 920px;
    text-align: center;
}

.kit-landing-title {
    margin: 0 0 0.25rem;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    color: var(--text);
}

.kit-landing-sub {
    margin: 0 0 1.75rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.kit-landing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.kit-landing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.6rem 1rem 1.4rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.kit-landing-card:hover,
.kit-landing-card:focus-visible {
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    outline: none;
}

.kit-landing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--brand-light);
    color: var(--brand);
    flex-shrink: 0;
}

.kit-landing-card-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.kit-landing-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.kit-landing-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.kit-landing-overdue {
    background: var(--danger);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
}

.kit-landing-scan {
    max-width: 320px;
    margin: 0 auto 1.25rem;
}
.kit-landing-scan input {
    width: 100%;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    text-align: center;
    background: var(--card-bg);
    color: var(--text);
    outline: none;
}
.kit-landing-scan input:focus { border-color: var(--brand); }
.kit-landing-scan input.error { border-color: var(--danger); background: var(--danger-bg); }

.kit-landing-all {
    font-size: 0.85rem;
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}
.kit-landing-all:hover { text-decoration: underline; }

/* ── Landing: recent folder chips ────────────────────────────────────────────── */
.kit-landing-recent[hidden] { display: none; }
.kit-landing-recent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: -0.75rem 0 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.kit-landing-recent-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.kit-recent-chip {
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
}
.kit-recent-chip:hover { border-color: var(--brand); background: var(--brand-light); }

/* ── Search box (toolbar) ────────────────────────────────────────────────────── */
.kit-search { flex: 0 1 280px; min-width: 150px; }
.kit-search input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color 0.12s, background 0.12s;
}
.kit-search input:focus { border-color: var(--brand); background: var(--card-bg); }

/* ── Filter bar ──────────────────────────────────────────────────────────────── */
.kit-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    text-decoration: none;
}
.filter-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-light);
}
.filter-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.filter-btn.active .filter-count { color: rgba(255,255,255,0.8); }

.filter-btn--danger.active  { background: var(--danger); border-color: var(--danger); }
.filter-btn--warn.active    { background: var(--warn);   border-color: var(--warn); color: #fff; }

.filter-count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: .02rem .4rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
}
.filter-btn.active .filter-count { background: rgba(255,255,255,.2); color: #fff; }
.filter-btn .state-dot { width: 10px; height: 10px; margin: 0; cursor: inherit; }
.filter-btn.active .state-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }

/* Two groups (2026-11-05): the states, then the flags that sit on top of them */
.filter-main { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-group--flags { padding-left: 1rem; border-left: 1px solid var(--border); }
.filter-btn--good.active { background: var(--success); border-color: var(--success); }

/* "More" dropdown holding the rarer filters */
.filter-more { position: relative; }
.filter-more > summary { list-style: none; cursor: pointer; }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.filter-more-menu .filter-btn { border-radius: var(--radius-sm); justify-content: flex-start; }
.filter-more-menu .filter-count { margin-left: auto; padding-left: 0.75rem; }

/* Row actions: one-tap quick check + "…" for the full dialog.
   The actions cell sticks to the right edge so it stays reachable when the
   configured column widths make the table wider than the viewport. */
.kit-table td.cell-actions,
.kit-table th.col-actions {
    position: sticky;
    right: 0;
    background: var(--card-bg);
    box-shadow: -6px 0 6px -6px rgba(0,0,0,0.15);
}
.kit-table th.col-actions { background: var(--bg); z-index: 3; }
.kit-table tbody tr:hover td.cell-actions { background: var(--bg); }
.kit-table tr.row-overdue td.cell-actions { background: #fffbf0; }
.kit-table tr.row-retire-soon td.cell-actions { background: #fff0f8; }
.row-actions { display: flex; gap: 0.25rem; align-items: center; justify-content: flex-end; }
.btn-quick-check { white-space: nowrap; }
.btn-quick-check.done { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.kit-table tr.row-just-checked td { background: var(--success-bg) !important; }

/* ── Content toolbar (breadcrumbs + action buttons) ─────────────────────────── */
.kit-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.breadcrumbs-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    min-width: 0;
}

.breadcrumbs-nav li { display: flex; align-items: center; }
.breadcrumbs-nav li + li::before {
    content: '\203A';
    margin-right: 0.25rem;
    color: var(--text-muted);
}
.breadcrumbs-nav a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumbs-nav a:hover { text-decoration: underline; }

.kit-action-btns {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

#kit-indicator {
    display: none;
    width: 16px;
    height: 16px;
    border: 2.5px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Bulk action bar ─────────────────────────────────────────────────────────── */
.bulk-bar {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: var(--brand-light);
    border-bottom: 1px solid #c5d9e8;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--brand);
    flex-shrink: 0;
}
.bulk-bar.visible { display: flex; }
#num-items {
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 30px;
}

/* ── Items table ─────────────────────────────────────────────────────────────── */
.kit-table-wrap {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.kit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    min-width: 600px;
}

.kit-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.kit-table th {
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    padding: 0.5rem 0.6rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.kit-table td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.kit-table tbody tr:hover td { background: var(--bg); }

.kit-table tr.row-overdue td { background: #fffbf0; }
.kit-table tr.row-overdue:hover td { background: #fff8e6; }
.kit-table tr.row-retire-soon td { background: #fff0f8; }
.kit-table tr.row-retire-soon:hover td { background: #ffe6f3; }

.col-check   { width: 32px; }
.col-state   { width: 28px; }
.col-actions { width: 150px; }

/* Cap text-heavy columns so they don't blow out the table width */
.kit-table td[data-col="notes"],
.kit-table td[data-col="item_name"] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-sortable {
    cursor: pointer;
    user-select: none;
}
.th-sortable:hover { color: var(--brand); }
.sort-icon { font-size: 0.65rem; color: var(--brand); }

.item-name-link {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}
.item-name-link:hover { color: var(--brand); text-decoration: underline; }

/* ── State dot ───────────────────────────────────────────────────────────────── */
.state-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: .35rem;
    flex-shrink: 0;
    transition: transform 0.1s;
}
.state-dot:hover { transform: scale(1.3); }

.state-1 { background: var(--success); }
.state-2 { background: #f59e0b; }
.state-3 { background: var(--text-muted); }
.state-4 { background: var(--danger); }
.state-5 { background: #1f2937; }
.state-7 { background: var(--brand); }
.state-9 { background: var(--accent); }
.state-6 { background: #a78bfa; }   /* Note — had no colour, so its dot was invisible (2026-09-19) */
.state-8 { background: #6b7280; }   /* Sold */
.state-0 { background: #e5e7eb; }

/* ── State dropdown ──────────────────────────────────────────────────────────── */
.state-dropdown {
    position: absolute;
    z-index: 100;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0.3rem;
    min-width: 140px;
}

.state-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    font-size: 0.83rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.state-dropdown button:hover { background: var(--bg); color: var(--brand); }

/* ── Dialog styles ───────────────────────────────────────────────────────────── */
.app-dialog {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0;
    max-width: 520px;
    width: calc(100% - 2rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.app-dialog::backdrop {
    background: rgba(0,0,0,0.4);
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.dialog-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }

.dialog-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.dialog-close:hover { background: var(--bg); color: var(--text); }

.dialog-body {
    padding: 1rem 1.25rem;
    max-height: 60vh;
    overflow-y: auto;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Hamburger toggle (hidden on desktop) ────────────────────────────────────── */
.btn-sidebar-toggle {
    display: none;
}

/* ── Filter toggle button (hidden on desktop) ────────────────────────────────── */
#btn-filter-toggle {
    display: none;
}

/* ── Filter nav header (hidden on desktop) ───────────────────────────────────── */
.filter-nav-header {
    display: none;
}

/* ── Overlay backdrops (mobile) ──────────────────────────────────────────────── */
.sidebar-overlay,
.filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-h, 60px);
    z-index: 149;
    background: rgba(0, 0, 0, 0.45);
}
.sidebar-overlay.visible,
.filter-overlay.visible { display: block; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Show hamburger */
    .btn-sidebar-toggle {
        display: flex;
    }

    /* Sidebar becomes an off-canvas drawer */
    .kit-sidebar {
        position: fixed;
        left: 0;
        top: var(--header-h, 60px);
        bottom: 0;
        z-index: 150;
        width: min(280px, 85vw) !important; /* override any JS inline width */
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: var(--shadow-md);
    }
    .kit-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Hide drag handle on mobile */
    .sidebar-resizer { display: none; }

    /* Larger folder tree text and touch targets */
    .folder-tree {
        font-size: 1rem;
    }

    .folder-toggle {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 16px;
    }

    .folder-link {
        padding: 0.45rem 0.3rem;
    }

    /* Hide admin link — admins use the desktop version */
    .admin-link {
        display: none !important;
    }

    /* Show filter toggle button (now positioned next to hamburger in HTML) */
    #btn-filter-toggle {
        display: flex;
    }

    /* Hide logo — free up header space on mobile */
    .header-logo {
        display: none;
    }

    /* Page nav must fit four labels beside the hamburger + filter buttons */
    .header-page-nav { flex: 1; min-width: 0; overflow-x: auto; }
    .header-page-nav a { padding: 0 0.65rem; font-size: 0.85rem; }

    /* Reflow header: flush-left with gap; push actions to the right */
    .header-inner {
        justify-content: flex-start;
        gap: .5rem;
    }
    .header-actions {
        margin-left: auto;
    }

    /* Hide toolbar buttons not useful on mobile — breadcrumbs get full width */
    #btn_check_all_visible,
    #btn_print,
    #btn_refresh {
        display: none !important;
    }

    /* Filter bar becomes an off-canvas panel sliding in from the right */
    .kit-filter-bar {
        position: fixed;
        right: 0;
        top: var(--header-h, 60px);
        bottom: 0;
        width: min(260px, 80vw);
        z-index: 150;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-y: auto;
        padding: 0;
        gap: 0;
        border-bottom: none;
        border-left: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    .kit-filter-bar.filter-open {
        transform: translateX(0);
    }

    /* Panel header strip */
    .filter-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.9rem;
        font-weight: 700;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: var(--card-bg);
        z-index: 1;
    }

    /* Filter pill buttons — full-width rows inside the panel */
    .kit-filter-bar .filter-btn {
        border-radius: var(--radius-sm);
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid var(--border);
        justify-content: space-between;
        padding: 0.75rem 1rem;
        font-size: 0.88rem;
        white-space: normal;
    }

    .kit-filter-bar .filter-btn:last-child {
        border-bottom: none;
    }

    /* Filter panel: primary pills stack, "More" list shown inline (opened by JS) */
    .filter-main { flex-direction: column; gap: 0; }
    .filter-group { flex-direction: column; gap: 0; }
    .filter-group--flags { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .35rem; }
    .filter-more > summary { display: none; }
    .filter-more-menu {
        position: static;
        min-width: 0;
        gap: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .filter-more-menu .filter-btn { border-radius: 0; }

    /* Search takes the full first row of the toolbar */
    .kit-search { flex: 1 1 100%; order: -1; }

    /* Items table becomes a list of cards — no horizontal scrolling */
    .kit-table { min-width: 0; }
    .kit-table thead { display: none; }
    .kit-table, .kit-table tbody, .kit-table tr, .kit-table td { display: block; }
    .kit-table tr {
        position: relative;
        padding: 0.65rem 0.75rem 0.65rem 3.6rem;
        border-bottom: 1px solid var(--border);
        background: var(--card-bg);
    }
    .kit-table td { border: none; padding: 0; white-space: normal; }
    .kit-table td.cell-check { position: absolute; left: 0.75rem; top: 0.75rem; }
    .kit-table td.cell-state { position: absolute; left: 2.35rem; top: 0.9rem; }
    .kit-table td.cell-name  { font-size: 0.95rem; margin-bottom: 0.15rem; }
    .kit-table td[data-col] {
        display: inline-block;
        max-width: none;
        margin-right: 0.75rem;
        font-size: 0.78rem;
        color: var(--text-muted);
    }
    .kit-table td[data-col]::before { content: attr(data-label) ': '; }
    .kit-table td[data-col]:empty { display: none; }
    .kit-table td.cell-actions { margin-top: 0.45rem; position: static; box-shadow: none; background: transparent; }
    .row-actions { justify-content: flex-start; }
    .kit-table td.cell-actions .btn { padding: 0.45rem 0.8rem; font-size: 0.82rem; }
    .kit-table tbody tr:hover td { background: transparent; }
    .kit-table tr.row-overdue td, .kit-table tr.row-retire-soon td { background: transparent; }
    .kit-table tr.row-overdue     { background: #fffbf0; }
    .kit-table tr.row-retire-soon { background: #fff0f8; }
    .kit-table tr.row-just-checked { background: var(--success-bg); }
    .kit-table tr.row-just-checked td { background: transparent !important; }

    /* Landing cards become full-width rows — easier tap targets on phones */
    .kit-landing-cards {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .kit-landing-card {
        flex-direction: row;
        padding: 1.1rem 1.25rem;
        text-align: left;
    }
    .kit-landing-card .kit-landing-icon {
        width: 44px;
        height: 44px;
    }
    .kit-landing-card-text {
        align-items: flex-start;
        flex: 1;
    }
    .kit-landing-meta { justify-content: flex-start; }
}

/* ── Bulk check dialog (per-item cards) ────────────────────────────────────── */
.chk-items-wrap { display: flex; flex-direction: column; gap: 0.75rem; }

.chk-item-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    background: var(--card-bg);
}
.chk-item-card legend {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 0.4rem;
}

.chk-state-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.25rem;
}
.chk-state-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}
.chk-state-opt input[type="radio"] { display: none; }
.chk-state-opt.selected {
    border-color: var(--brand);
    background: var(--brand-light);
    font-weight: 600;
}

.chk-last-comment {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.chk-last-comment em {
    font-style: normal;
    color: var(--text);
}

.chk-bottom-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
}
.chk-freq {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-09-19 — header menu, icons, embedded mode, feedback pill, item panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icons (includes/icons.php — estate outline style) ──────────────────────
   Inherit the text colour; sit on the text baseline beside their label. */
.ic { display: inline-block; vertical-align: -.18em; flex-shrink: 0; }
.btn .ic, .kit-menu__link .ic, .sidebar-nav li a .ic { vertical-align: -.2em; }
.input-toggle-pw .ic { display: block; }

/* ── ≡ menu (replaces the bare ⚙ and × glyphs) ───────────────────────────── */
.app-header { position: relative; }
.kit-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: none; border: none; color: #fff; cursor: pointer;
    transition: background .15s; flex-shrink: 0;
}
.kit-menu-btn:hover, .kit-menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.15); }
.kit-menu {
    position: absolute; top: 100%; right: max(.75rem, calc((100% - 1400px) / 2 + .75rem));
    z-index: 300; width: 240px; padding: .4rem 0;
    background: var(--brand-dark);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.kit-menu[hidden] { display: none; }
.kit-menu__user {
    padding: .5rem 1.1rem .35rem; font-size: .72rem; letter-spacing: .05em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
}
@media (min-width: 480px) { .kit-menu__user { display: none; } }   /* the name is in the bar from here up */
.kit-menu__link {
    display: flex; align-items: center; gap: .65rem;
    padding: .75rem 1.1rem; color: rgba(255,255,255,.88);
    font-weight: 600; font-size: .95rem; text-decoration: none;
}
.kit-menu__link:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }

/* ── Admin sidebar: icon + label rows ────────────────────────────────────── */
.sidebar-nav li a { display: flex; align-items: center; gap: .6rem; }

/* ── Embedded in the Mendip App (desktop shell tab / phone frame) ──────────
   Slim the header, don't hide it: the Mendip App strip is the shell's chrome,
   not our navigation, so Kit / Spares / Lists / Snowsports stay. Hide only what
   the shell already shows (logo, name) and Sign out, which would drop the
   shared SSO for the Mendip App too. Staff without Admin have nothing left in
   the menu, so the button goes. */
body.embedded { --header-h: 44px; }
body.embedded .header-logo,
body.embedded .header-user,
body.embedded .kit-menu__user,
body.embedded .kit-menu__link--logout { display: none !important; }
body.embedded .kit-menu-btn:not(.has-admin) { display: none; }
body.embedded .header-inner { padding: 0 .5rem; gap: .25rem; }
body.embedded .header-page-nav a { font-size: .88rem; padding: 0 .9rem; }
/* Admin inside the shell: the bar stays (slim) because the logo — the normal
   way home — is hidden, and "Back to Kit" replaces it. Hiding the whole bar
   left the only route home at the bottom of the sidebar, below the fold. */
.admin-home-link, .admin-home-title { display: none; }
body.embedded .admin-home-link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .75rem; border-radius: var(--radius-sm);
    color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none;
    background: rgba(255,255,255,.12);
}
body.embedded .admin-home-link:hover { background: rgba(255,255,255,.22); text-decoration: none; }
body.embedded .admin-home-title {
    display: inline; margin-left: .75rem; margin-right: auto; font-size: .85rem; font-weight: 600;
    color: rgba(255,255,255,.7); white-space: nowrap;
}
/* The menu would only repeat Back to Kit here (Sign out is hidden when framed) */
body.embedded .app-header--admin .kit-menu-btn { display: none; }

/* ── "beta · Leave feedback" pill (estate pattern, David 2026-09-17) ─────── */
.beta-badge {
    position: fixed; right: .6rem; bottom: .6rem; z-index: 400;
    display: flex; align-items: center; gap: .4rem;
    padding: .18rem .6rem; border-radius: 999px;
    background: #fff3cd; color: #856404; border: 1px solid #f0d58a;
    font-size: 11px; font-weight: 650; letter-spacing: .05em;
    box-shadow: 0 1px 3px rgba(0,0,0,.12); pointer-events: none; opacity: .92;
}
.beta-badge .bb-beta { text-transform: uppercase; }
.beta-badge .bb-sep  { opacity: .5; }
.beta-badge a.feedback-link {
    pointer-events: auto; color: inherit; font-weight: 500; letter-spacing: 0; text-decoration: none;
}
.beta-badge a.feedback-link:hover { text-decoration: underline; }
body.embedded .beta-badge .bb-beta,
body.embedded .beta-badge .bb-sep { display: none; }
body.item-panel-open .beta-badge { display: none; }
@media (max-width: 640px) {
    .beta-badge { right: .35rem; bottom: .35rem; padding: .1rem .45rem; font-size: 9.5px; opacity: .85; box-shadow: none; }
    .beta-badge a.feedback-link { padding: .25rem 0; }
}
/* room under the last row so the pill never sits on its buttons */
.kit-table-wrap { padding-bottom: 2.25rem; }

/* ── Toolbar: phone-only Folders / Filter buttons, search icon ─────────── */
/* The breadcrumb used to shrink to nothing ("Equipme…") when the search box
   and buttons crowded it; with a real basis it wraps onto its own row instead. */
.kit-toolbar .breadcrumbs-nav { flex: 1 1 14rem; flex-wrap: wrap; row-gap: .15rem; }
.kit-mobile-tools { display: none; gap: .4rem; }
.kit-search { position: relative; }
.kit-search .kit-search__ic {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.kit-search input { padding-left: 2rem; }
.kit-landing-scan { position: relative; }
.kit-landing-scan > .ic {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.kit-landing-scan input { padding-left: 2.3rem; }

/* ── Loading / error rows in the items table ────────────────────────────── */
.kit-table tr.kit-loading-row td,
.kit-table td.kit-load-error {
    text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); white-space: normal;
}
.kit-table td.kit-load-error .btn { margin-left: .5rem; }
.kit-spinner {
    display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: .4rem;
    border: 2.5px solid var(--border); border-top-color: var(--brand); border-radius: 50%;
    animation: spin .6s linear infinite;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.kit-toast {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
    z-index: 600; max-width: calc(100vw - 2rem);
    background: var(--text); color: #fff;
    padding: .65rem 1.1rem; border-radius: 999px;
    font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-md);
    animation: kit-toast-in .18s ease;
    transition: opacity .35s, transform .35s;
}
.kit-toast--error { background: var(--danger); }
.kit-toast.is-leaving { opacity: 0; transform: translate(-50%, 8px); }
@keyframes kit-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ── Item panel (assets/js/item_panel.js) — replaces the popup window ──── */
.item-panel { position: fixed; inset: 0; z-index: 500; }
.item-panel[hidden] { display: none; }
.item-panel__backdrop {
    position: absolute; inset: 0; background: rgba(15, 23, 42, .4);
    opacity: 0; transition: opacity .2s;
}
.item-panel__sheet {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(860px, 94vw);
    display: flex; flex-direction: column;
    background: var(--bg); box-shadow: -12px 0 32px rgba(0,0,0,.2);
    transform: translateX(100%); transition: transform .22s ease;
}
.item-panel.is-open .item-panel__backdrop { opacity: 1; }
.item-panel.is-open .item-panel__sheet    { transform: none; }
.item-panel__bar {
    display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
    height: 48px; padding: 0 .5rem 0 .35rem;
    background: var(--brand-dark); color: #fff;
}
.item-panel__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: none; border: none; color: #fff; cursor: pointer;
}
.item-panel__close:hover, .item-panel__close:focus-visible { background: rgba(255,255,255,.15); outline: none; }
.item-panel__title {
    flex: 1; min-width: 0; font-weight: 700; font-size: .95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-panel__ext {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .6rem; border-radius: var(--radius-sm);
    color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 600; text-decoration: none;
}
.item-panel__ext:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.item-panel__frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
body.item-panel-open { overflow: hidden; }
/* Inside the Mendip App the frame IS the window — a new tab there bounces to Safari */
body.embedded .item-panel__ext { display: none; }

@media (max-width: 768px) {
    /* Phone: the panel is the whole screen, sliding in from the right */
    .item-panel__sheet { width: 100%; }
    /* Folders / Filter as labelled buttons on the first toolbar row */
    .kit-mobile-tools { display: flex; order: -2; }
    .kit-mobile-tools .btn { padding: .45rem .75rem; font-size: .85rem; }
    /* The header now holds only nav + the menu button: let the nav take the room */
    .header-page-nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    /* Admin is desktop-only (David: "admins will use the desktop version") */
    .kit-menu__link--admin { display: none; }
    /* Framed on a phone the menu would be empty (no Admin, no Sign out) — drop the button */
    body.embedded .kit-menu-btn { display: none; }
}

/* ── Folder browser (phones, 2026-09-19) — kit.js showBrowser() ──────────────
   One level of the tree: Back up, where you are, "Show all N items", then a
   big button per sub-folder. Built for thumbs: 56px+ rows, whole row taps. */
.kit-browse { text-align: left; max-width: 640px; }
.kit-browse[hidden] { display: none; }
.kb-up {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: .4rem .9rem .4rem .6rem; margin-bottom: .9rem;
    background: var(--card-bg); border: 1.5px solid var(--border); border-radius: 999px;
    font: inherit; font-size: .95rem; font-weight: 600; color: var(--brand); cursor: pointer;
    max-width: 100%;
}
.kb-up span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-up:hover, .kb-up:focus-visible { border-color: var(--brand); background: var(--brand-light); outline: none; }
.kb-path { font-size: .8rem; color: var(--text-muted); margin-bottom: .15rem; }
.kb-title { margin: 0 0 .9rem; font-size: 1.5rem; line-height: 1.2; color: var(--text); }
.kb-all { width: 100%; justify-content: center; min-height: 48px; }
.kb-note { margin: .5rem 0 0; font-size: .82rem; color: var(--danger); text-align: center; }
.kb-list { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; }
.kb-folder {
    display: flex; align-items: center; gap: .8rem; width: 100%;
    min-height: 60px; padding: .7rem .9rem;
    background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius);
    font: inherit; text-align: left; cursor: pointer; color: var(--text);
    transition: border-color .12s, background .12s;
}
.kb-folder:hover, .kb-folder:focus-visible { border-color: var(--brand); outline: none; }
.kb-folder:active { background: var(--brand-light); }
.kb-folder.is-empty { opacity: .6; }
.kb-folder__ic {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%; background: var(--brand-light); color: var(--brand);
}
.kb-folder__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.kb-folder__name { font-weight: 700; font-size: 1rem; }
.kb-folder__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; color: var(--text-muted); }
.kb-overdue {
    background: var(--danger); color: #fff; border-radius: 999px;
    padding: .05rem .45rem; font-size: .7rem; font-weight: 700;
}
.kb-folder__go { color: var(--text-muted); flex-shrink: 0; }
#btn-folder-up[hidden] { display: none; }

/* Desktop uses the browser too (2026-09-19): the toolbar's Up button shows here
   as well (Folders/Filter stay phone-only), and the folder buttons sit two
   across so a wide screen isn't one long narrow column. */
@media (min-width: 769px) {
    .kit-mobile-tools { display: flex; order: -2; }
    .kit-mobile-tools:not(:has(#btn-folder-up:not([hidden]))) { display: none; }
    #btn-sidebar-toggle, #btn-filter-toggle { display: none; }
    .kit-browse { max-width: 920px; }
    .kb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
    .kb-all { width: auto; min-width: 16rem; }
    .kb-note { text-align: left; }
}
#landing-root[hidden] { display: none; }

/* ── Brand logos admin page (admin/brand_logos.php, 2026-09-19) ─────────────── */
.bl-intro { max-width: 760px; color: var(--text-muted); margin: .25rem 0 1.25rem; }
.bl-stats { margin-bottom: 1rem; }
.bl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.bl-bar[hidden], #bl-stop[hidden] { display: none; }
.bl-progress { font-size: .88rem; color: var(--text-muted); }
.bl-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.bl-tab {
    border: 1.5px solid var(--border); background: var(--card-bg); border-radius: 999px;
    padding: .35rem .85rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.bl-tab span { opacity: .7; margin-left: .2rem; }
.bl-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.bl-empty { color: var(--text-muted); }
.bl-card {
    background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.bl-card.is-approved { border-color: var(--success); }
.bl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.bl-card__name { margin: 0; font-size: 1.05rem; }
.bl-card__items { font-size: .8rem; color: var(--text-muted); }
.bl-badge { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.bl-badge--none   { background: #eef0f3; color: var(--text-muted); }
.bl-badge--review { background: #fff3cd; color: #856404; }
.bl-badge--ok     { background: var(--success-bg); color: var(--success); }
.bl-badge--nf     { background: #f1f1f1; color: #555; }
/* checkerboard behind logos, so white-on-transparent logos are still visible */
.bl-logo, .bl-cand__img {
    background-color: #dfe3e8;
    background-image: linear-gradient(45deg, #c3c9d2 25%, transparent 25%), linear-gradient(-45deg, #c3c9d2 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #c3c9d2 75%), linear-gradient(-45deg, transparent 75%, #c3c9d2 75%);
    background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
    display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.bl-logo { height: 90px; padding: .6rem; }
.bl-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.bl-hint { margin: 0; font-size: .8rem; color: var(--text-muted); }
.bl-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .45rem; }
.bl-cand {
    display: flex; flex-direction: column; gap: .25rem; padding: .35rem; cursor: pointer;
    background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font: inherit; text-align: left;
}
.bl-cand:hover, .bl-cand:focus-visible { border-color: var(--brand); outline: none; }
.bl-cand__img { height: 58px; padding: .3rem; }
.bl-cand__img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.bl-cand__why { font-size: .7rem; color: var(--text-muted); line-height: 1.25; }
.bl-site { margin: 0; font-size: .85rem; word-break: break-all; }
.bl-conf { font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; background: #eef0f3; color: var(--text-muted); white-space: nowrap; }
.bl-conf--high   { background: var(--success-bg); color: var(--success); }
.bl-conf--low    { background: #fde8e8; color: var(--danger); }
.bl-note { margin: 0; font-size: .8rem; color: var(--text-muted); }
.bl-error { margin: 0; font-size: .82rem; color: var(--danger); }
.bl-busy { margin: 0; font-size: .85rem; color: var(--brand); }
.bl-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.bl-manual summary { cursor: pointer; font-size: .8rem; color: var(--brand); font-weight: 600; }
.bl-form { display: flex; align-items: flex-end; gap: .4rem; margin-top: .45rem; }
.bl-form label { flex: 1; display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; color: var(--text-muted); }
.bl-form input { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .35rem .5rem; font: inherit; font-size: .82rem; }

/* A brand's approved logo shown beside its name elsewhere in kit */
.brand-logo { display: inline-block; vertical-align: middle; max-width: 110px; object-fit: contain; }
.mf-name .brand-logo { margin-right: .5rem; background: #e7ebf0; border-radius: 4px; padding: 2px 5px; box-sizing: content-box; }   /* a backing on every logo (2026-11-05): a white one is never invisible, even before its tone is known */
.mf-name .brand-logo--light { background: #1f2a37; }
.cover-fact--brand .cover-fact-value { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

/* ── File storage admin page (admin/storage.php, 2026-09-19) ── */
.st-checks { margin-bottom: 1rem; }
.st-list { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.st-list li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; }
.st-list li.ok { color: var(--success); } .st-list li.no { color: #856404; }
.st-list li span { color: var(--text); }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
#st-stop[hidden] { display: none; }
.st-kinds { margin-top: .75rem; max-width: 520px; }
.st-result { margin-top: .5rem; font-size: .88rem; }

/* ── Tidy Brands (admin/brand_tidy.php, 2026-09-19) ── */
.bt-intro { max-width: 760px; color: var(--text-muted); margin: .25rem 0 1.25rem; }
.bt-page .widget { margin-bottom: 1.25rem; }
.bt-page .widget-title { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; }
.bt-model[hidden] { display: none; }
.bt-group, .bt-page .widget { overflow-x: auto; }
.bt-count { background: var(--brand-light); color: var(--brand-dark); border-radius: 999px; padding: 0 .55rem; font-size: .8rem; }
.bt-muted { color: var(--text-muted); font-size: .88rem; }
.bt-group { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem .75rem; margin-top: .75rem; }
.bt-table { width: 100%; }
.bt-table td, .bt-table th { vertical-align: middle; }
.bt-table tr.bt-keep td { background: #eef7f1; }
.bt-table tr.bt-keep .bt-name { font-weight: 600; }
.bt-name { white-space: pre; }
.bt-model { max-width: 12rem; }
.bt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }
.bt-actions .btn { display: inline-flex; align-items: center; gap: .35rem; }
.bt-keepname { display: flex; align-items: center; gap: .4rem; margin-right: auto; font-size: .88rem; }
.bt-keepname input { width: 14rem; }
.bt-manual { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.bt-manual label { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }

/* ── Kit list facelift (kit.js rowHtml, 2026-09-19) ─────────────────────────
   Picture + name + subtitle + note in one cell, a state pill, one due chip,
   one quick-check button and a ⋯ menu. Overdue rows get a red edge rather
   than a yellow wash over everything. */
.kit-table td { padding: .55rem .6rem; }
.kit-table tbody tr { transition: background .12s; }
.kit-table tr.row-overdue td, .kit-table tr.row-overdue:hover td { background: #fff8f7; }
.kit-table tr.row-overdue td.cell-check { box-shadow: inset 3px 0 0 var(--danger); }
.kit-table tr.row-retire-soon td, .kit-table tr.row-retire-soon:hover td { background: transparent; }
.kit-table tr.row-overdue td.cell-actions { background: #fff8f7; }
.kit-table tr.row-retire-soon td.cell-actions { background: var(--card-bg); }
.kit-table th.col-item { min-width: 18rem; }
.kr-item { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.kr-pic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
          display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #fff; }
.kr-pic img { width: 100%; height: 100%; object-fit: cover; }
.kr-pic--logo img { object-fit: contain; padding: 4px; }
.kr-pic--logo { background: #eef1f4; }   /* white logos (Petzl) would vanish on white */
.kr-pic--logo.kr-pic--dark { background: #1f2a37; }   /* a logo Kit knows is light (2026-11-05) */
/* A light (white-on-transparent) logo anywhere it is drawn: dark backing so it can be seen */
.brand-logo--light { background: #1f2a37; border-radius: 4px; padding: 2px 5px; box-sizing: content-box; }
.bl-logo--dark { background: #1f2a37; }
.bl-tone { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--text-muted); margin: .25rem 0 0; }
.bl-tone button { font: inherit; background: none; border: 0; color: var(--brand); cursor: pointer; text-decoration: underline; padding: 0; }
.kr-pic--none { background: var(--bg); color: #aab4c0; border-color: transparent; }
.kr-text { min-width: 0; white-space: normal; }
.kr-text .item-name-link { font-weight: 600; font-size: .9rem; }
.kr-sub { font-size: .76rem; color: var(--text-muted); margin-top: .05rem; }
.kr-note { font-size: .76rem; color: #6b7280; font-style: italic; margin-top: .1rem; max-width: 34rem;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-note::before { content: '“'; } .kr-note::after { content: '”'; }
.kr-flag { font-size: .68rem; font-weight: 700; color: #9d174d; background: #fce7f3; border-radius: 999px; padding: .05rem .45rem; vertical-align: 1px; }
/* Admin overview: the Retirement card's two views (feedback 953, 2026-10-19) */
.ov-ret-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ov-ret-tabs { display: inline-flex; gap: .3rem; }
.ov-ret-tab { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--border); font-size: .82rem; font-weight: 600;
              color: var(--text); text-decoration: none; background: var(--card-bg); }
.ov-ret-tab:hover { border-color: var(--brand); text-decoration: none; }
.ov-ret-tab.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ov-ret-tab b { background: var(--danger); color: #fff; border-radius: 999px; padding: 0 .4rem; margin-left: .2rem; font-size: .75rem; }
.ov-ret-note { margin: .25rem 0 .6rem; font-size: .85rem; color: var(--text-muted); }
/* Quick repair (home screen, 2026-10-16): a pastel-red button under the area cards, and its dialog */
.kit-repair-btn {
    display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; max-width: 520px; margin: 1rem auto 0;
    min-height: 54px; padding: .6rem 1rem; border-radius: var(--radius); border: 2px solid #f1c4c4;
    background: #fbe9e9; color: #a32d2d; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.kit-repair-btn:hover { background: #f7dcdc; }
.kit-repair-btn__n { background: #c62828; color: #fff; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; }
.kit-qr { border: none; border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; width: min(94vw, 620px); max-height: 90vh; margin: auto; box-shadow: var(--shadow-md); }
.kit-qr[open] { display: flex; flex-direction: column; }
.kit-qr::backdrop { background: rgba(0,0,0,.4); }
.kit-qr__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.kit-qr__title { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1.2rem; color: #a32d2d; }
.kit-qr__x { color: var(--text-muted); }
.kit-qr__step[hidden] { display: none; }
.kit-qr__step { display: flex; flex-direction: column; min-height: 0; }
.kit-qr__hint, .kit-qr__sub { color: var(--text-muted); font-size: .9rem; margin: 0 0 .6rem; }
.kit-qr__search { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; padding: 0 .8rem;
    border: 2px solid var(--border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); }
.kit-qr__search:focus-within { border-color: var(--brand); }
.kit-qr__search input { flex: 1; min-width: 0; height: 48px; font: inherit; font-size: 1.05rem; border: none; outline: none; background: none; color: var(--text); }
.kit-qr__list { overflow: auto; display: flex; flex-direction: column; gap: .4rem; max-height: 55vh; }
.kit-qr__list > * { flex-shrink: 0; }
.kit-qr__row, .kit-qr__item { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .5rem .7rem;
    background: var(--card-bg); border: 2px solid var(--border); border-radius: var(--radius-sm); font: inherit; color: var(--text); }
.kit-qr__row { cursor: pointer; } .kit-qr__row:hover { border-color: #e7a3a3; background: #fff7f7; }
.kit-qr__item { background: var(--bg); margin-bottom: .7rem; }
/* helmets etc. carry long refs ("001-HS345 2017 E1316749") — cap the block and trim, the title-less row still reads */
.kit-qr__ref { flex-shrink: 0; min-width: 48px; max-width: 38%; height: 40px; line-height: 40px; padding: 0 .4rem; border-radius: var(--radius-sm);
    display: inline-block; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: var(--text); color: #fff; font-weight: 800; font-size: 1.05rem; }
.kit-qr__ref.is-none { background: var(--bg); color: var(--text-muted); border: 2px dashed var(--border); }
.kit-qr__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kit-qr__name { font-weight: 700; } .kit-qr__name b { color: var(--brand); }
.kit-qr__folder { font-size: .8rem; color: var(--text-muted); }
.kit-qr__flag { flex-shrink: 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: #fff; background: #c62828; border-radius: 999px; padding: .1rem .5rem; }
.kit-qr__none { color: var(--text-muted); text-align: center; padding: 1rem; }
.kit-qr__existing { background: #fdecec; color: #7f1d1d; border-radius: var(--radius-sm); padding: .5rem .7rem; font-size: .88rem; margin-bottom: .7rem; }
.kit-qr__foot { display: flex; justify-content: space-between; gap: .6rem; margin-top: .4rem; }
.kit-qr__go { background: #c62828; color: #fff; border: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.kit-qr__go:hover { background: #a32020; color: #fff; }
/* "Needs repair" flag (2026-10-16): separate from the state — list rows and the item header */
.kr-flag--repair { color: #fff; background: #c62828; display: inline-flex; align-items: center; gap: .2rem; }
/* RFID-tagged item (Luke, 2026-10-16): a small brand-blue contactless mark beside the name */
.kr-tag { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
          background: var(--brand-light); color: var(--brand); vertical-align: -5px; cursor: help; }
.kr-tag svg { stroke-width: 2.2; }
.state-pill { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); background: var(--card-bg);
              border-radius: 999px; padding: .2rem .55rem .2rem .45rem; font: inherit; font-size: .78rem; font-weight: 600;
              color: var(--text); cursor: pointer; white-space: nowrap; }
.state-pill .state-dot { width: 9px; height: 9px; margin: 0; cursor: inherit; }
.state-pill .state-dot:hover { transform: none; }
.state-pill .ic { color: var(--text-muted); }
.state-pill:hover { border-color: var(--brand); }
.state-pill--1 { background: #effaf3; border-color: #cdeedb; }
.state-pill--4 { background: #fdf0f0; border-color: #f5cccc; }
.state-pill--5 { background: #f1f2f4; }
.state-pill--2 { background: #fff8eb; border-color: #fbe3b5; }
.due-chip { display: inline-block; font-size: .76rem; font-weight: 600; border-radius: 999px; padding: .2rem .6rem; white-space: nowrap; }
.due-chip--over { background: var(--danger); color: #fff; }
.due-chip--soon { background: #fef3c7; color: #92400e; }
.due-chip--ok   { background: var(--bg); color: var(--text-muted); font-weight: 500; }
.due-chip--none { background: transparent; color: var(--text-muted); font-weight: 500; font-style: italic; }
.btn-quick-check { background: var(--brand); color: #fff; border: 1px solid var(--brand); display: inline-flex; align-items: center; gap: .3rem; }
.btn-quick-check:hover { background: var(--brand-dark); color: #fff; }
.btn-quick-check.done { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.kr-more { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
           border: 1px solid transparent; background: none; color: var(--text-muted); cursor: pointer; }
.kr-more:hover, .kr-more:focus-visible { background: var(--bg); border-color: var(--border); color: var(--text); outline: none; }
.kr-menu button { display: flex; align-items: center; gap: .45rem; }
/* The item cell opens the panel — make it feel like one big button */
.kit-table td.kr-open { cursor: pointer; }
.kit-table tbody tr:hover td.kr-open .item-name-link { color: var(--brand); text-decoration: underline; }
.kit-table tbody tr td.kr-open:hover { background: #eef5fa; }
/* Row actions: wide screens show them as icon buttons (with tooltips), narrow ones use ⋯ */
.kr-inline { display: none; align-items: center; gap: .1rem; margin-left: .2rem; }
.kr-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
           border: 1px solid transparent; background: none; color: var(--text-muted); cursor: pointer; }
.kr-icon:hover, .kr-icon:focus-visible { background: var(--bg); border-color: var(--border); color: var(--brand); outline: none; }
@media (min-width: 1100px) {
    .kr-inline { display: inline-flex; }
    .kr-more { display: none; }
}
.col-actions { width: 1%; }
@media (max-width: 768px) {
    .kit-table tr { padding: .7rem .75rem .7rem 2.4rem; }
    .kit-table tr.row-overdue { background: #fff8f7; box-shadow: inset 3px 0 0 var(--danger); }
    .kit-table tr.row-overdue td.cell-check { box-shadow: none; }
    .kit-table td.cell-name { margin-bottom: .35rem; }
    .kit-table td.cell-pill, .kit-table td.cell-due { display: inline-block; margin: 0 .35rem .35rem 0; vertical-align: middle; }
    .kit-table td.cell-due:empty { display: none; }
    .kr-note { white-space: normal; }
    .kit-table td[data-col] { margin-bottom: .35rem; }
    .kit-table td.cell-actions { margin-top: .15rem; }
}

/* ── Admin home + grouped sidebar (admin/index.php, partials/sidebar.php, 2026-09-19) ── */
.ah-stats { margin-bottom: 1rem; }
.ah-stats a.stat-card { text-decoration: none; color: inherit; }
.ah-stats a.stat-card:hover { box-shadow: var(--shadow-md); }
.ah-note { display: flex; align-items: center; gap: .35rem; font-size: .88rem; color: #854d0e; margin: 0 0 1rem; }
.ah-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: .5rem; }
.ah-group { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1rem .6rem; }
.ah-group__title { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; margin: 0 0 .2rem; }
.ah-group__ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
                border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); }
.ah-group__blurb { font-size: .82rem; color: var(--text-muted); margin: 0 0 .5rem; }
.ah-links { list-style: none; margin: 0; padding: 0; }
.ah-links li + li { border-top: 1px solid var(--border); }
.ah-links a { display: flex; flex-direction: column; padding: .5rem .4rem; border-radius: 6px; text-decoration: none; color: var(--text); }
.ah-links a:hover { background: var(--bg); }
.ah-links__label { font-weight: 600; font-size: .92rem; color: var(--brand-dark); }
.ah-links__blurb { font-size: .78rem; color: var(--text-muted); }
/* the sidebar: sections, with the open one's pages indented beneath */
.sidebar-section.is-open > .sidebar-section__link { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-sub { list-style: none; margin: 0 0 .35rem; padding: 0; background: rgba(0,0,0,.12); }
.sidebar-nav .sidebar-sub li a { padding: .45rem 1rem .45rem 2.1rem; font-size: .84rem; }
.sidebar-nav .sidebar-sub li a .ic { width: 14px; height: 14px; }

/* ── Prices (admin/prices.php, price_import.php, 2026-09-19) ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pr-page [hidden] { display: none !important; }
.pr-pieces { display: block; font-size: .72rem; color: var(--text-muted); }
.pr-intro { max-width: 800px; color: var(--text-muted); margin: .25rem 0 1.25rem; }
.pr-muted { color: var(--text-muted); font-size: .85rem; }
.pr-page .widget { margin-bottom: 1.25rem; }
.pr-page .widget-title { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; }
.pr-value .stat-cards { margin: .75rem 0; }
.pr-branches { max-width: 640px; }
.pr-r { text-align: right; }
.pr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.pr-bar .btn { display: inline-flex; align-items: center; gap: .35rem; }
.pr-progress { font-size: .88rem; color: var(--brand-dark); }
.pr-spent { margin-left: auto; font-size: .8rem; color: var(--text-muted); }
.pr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.pr-filters .btn { display: inline-flex; align-items: center; gap: .35rem; }
.pr-filters input[type=search] { max-width: 16rem; }
.pr-tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-right: auto; }
.pr-tab { border: 1px solid var(--border); background: var(--card-bg); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; cursor: pointer; }
.pr-tab span { color: var(--text-muted); margin-left: .2rem; }
.pr-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pr-tab.active span { color: #d6ebf5; }
.pr-list { overflow-x: auto; }
.pr-table td { vertical-align: top; }
.pr-prod { min-width: 14rem; }
.pr-kind { font-size: .72rem; color: var(--text-muted); background: var(--bg); border-radius: 4px; padding: 0 .35rem; margin-left: .2rem; white-space: nowrap; }
.pr-eg { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.pr-num { text-align: right; white-space: nowrap; }
.pr-web { min-width: 15rem; }
.pr-webline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pr-typ { font-size: 1rem; }
.pr-struck { text-decoration: line-through; color: var(--text-muted); }
.pr-range { font-size: .8rem; color: var(--text-muted); }
.pr-conf { font-size: .7rem; border-radius: 999px; padding: 0 .45rem; text-transform: uppercase; letter-spacing: .03em; }
.pr-conf--high { background: #dcfce7; color: #166534; }
.pr-conf--medium { background: #fef9c3; color: #854d0e; }
.pr-conf--low { background: #fee2e2; color: #991b1b; }
.pr-ok { color: var(--success); font-size: .82rem; display: inline-flex; align-items: center; gap: .2rem; }
.pr-note { font-size: .78rem; color: var(--text-muted); margin-top: .2rem; max-width: 26rem; }
.pr-src summary { font-size: .8rem; color: var(--brand); cursor: pointer; margin-top: .2rem; }
.pr-src ul { margin: .25rem 0 0 1rem; padding: 0; font-size: .82rem; }
.pr-src a { word-break: break-word; }
.pr-same { font-size: .88rem; }
.pr-same-pick { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pr-same-pick input { min-width: 14rem; }
.pr-ours { min-width: 9rem; }
.pr-ours-in { display: flex; align-items: center; gap: .3rem; }
.pr-ours-in input { width: 5.5rem; }
.pr-pound { color: var(--text-muted); }
.pr-more-cell { width: 2.5rem; }
.pr-more { position: relative; }
.pr-more summary { list-style: none; cursor: pointer; border-radius: 6px; padding: .2rem .35rem; color: var(--text-muted); display: inline-flex; }
.pr-more summary::-webkit-details-marker { display: none; }
.pr-more summary:hover, .pr-more[open] summary { background: var(--bg); color: var(--text); }
.pr-menu { position: absolute; right: 0; top: 100%; z-index: 20; background: var(--card-bg); border: 1px solid var(--border);
           border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width: 16rem; padding: .25rem 0; }
.pr-menu button { display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left; background: none; border: 0;
                  padding: .45rem .8rem; font: inherit; font-size: .86rem; cursor: pointer; color: var(--text); }
.pr-menu button:hover { background: var(--bg); }
tr.pr-busy { opacity: .55; }
tr.pr-just td { background: #f0f7fb; }
/* Searching looks in every tab (2026-11-03): each row says where it sits, the tabs show match counts */
.pr-tabs--searching .pr-tab.active { background: var(--card-bg); border-color: var(--border); color: inherit; }
.pr-tabs--searching .pr-tab.active span { color: var(--text-muted); }
#pr-rows.pr-searching tr > td:first-child::after { display: inline-block; margin-left: .45rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; vertical-align: middle; }
#pr-rows.pr-searching tr[data-state="needs"] > td:first-child::after  { content: 'Needs a price'; background: #fdecec; color: #9b1c1c; }
#pr-rows.pr-searching tr[data-state="review"] > td:first-child::after { content: 'To check'; background: #fff4d6; color: #8a5a00; }
#pr-rows.pr-searching tr[data-state="priced"] > td:first-child::after { content: 'Priced'; background: #e6f5ea; color: #1d6b34; }
.pr-empty { padding: 1rem; }
.pr-item-price { font-size: .88rem; }
.pr-item-price a { word-break: break-word; }
.kit-landing-value { color: var(--text-muted); }
/* Missing details (admin/details.php, 2026-09-19) */
.dt-stats { margin-bottom: 1rem; }
.dt-gaps { min-width: 17rem; }
.dt-gap { display: inline-block; font-size: .72rem; border-radius: 999px; padding: .1rem .5rem; margin: 0 .2rem .2rem 0; white-space: nowrap; }
.dt-gap--ok { background: #effaf3; color: #166534; }
.dt-gap--some { background: #fef3c7; color: #92400e; }
.dt-gap--none { background: #fde8e8; color: #991b1b; }
.dt-life { min-width: 9rem; font-size: .84rem; }
.dt-claude { min-width: 16rem; }
.dt-sugs { display: flex; flex-direction: column; gap: .2rem; }
.dt-ident { font-weight: 600; font-size: .85rem; display: flex; align-items: center; gap: .35rem; }
.dt-sug { display: flex; align-items: baseline; gap: .3rem; font-size: .82rem; cursor: pointer; }
.dt-sug span { color: var(--text-muted); }
.dt-sug-btns, .dt-form-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .3rem; }
.dt-form-row td { background: var(--bg); }
.dt-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; padding: .4rem 0; }
.dt-form label { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; color: var(--text-muted); }
.dt-form input[type=text] { min-width: 12rem; }
.dt-form .dt-narrow { min-width: 0; width: 5rem; }
.dt-form .dt-over { flex-direction: row; align-items: center; gap: .3rem; }
.dt-form-btns { flex-basis: 100%; }
.dt-serials { flex-basis: 100%; }
/* price list import */
.pi-form textarea { width: 100%; min-height: 12rem; font-family: ui-monospace, monospace; font-size: .82rem; }
.pi-opts { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: .75rem 0; }
.pi-opts label { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }
.pi-opts label.pi-check { flex-direction: row; align-items: center; gap: .4rem; }
.pi-table td { vertical-align: top; }
.pi-table select { max-width: 22rem; }
.pi-score { font-size: .72rem; color: var(--text-muted); }

/* DIN Settings (admin/din.php, task 1348, 2026-11-03) */
.din-try { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.din-try label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.din-try label span { display: flex; align-items: center; gap: .3rem; font-weight: 400; color: var(--text-muted); }
.din-try input, .din-try select { width: 6.5rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.din-try select { width: auto; }
.din-result { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-sm); background: var(--success-bg); }
.din-result--no { background: var(--warn-bg); color: var(--warn); }
.din-result__big { display: block; font-size: 1.8rem; font-weight: 800; }
.din-steps { margin: .4rem 0 .4rem 1.2rem; padding: 0; }
.din-flag { font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: var(--warn-bg); color: var(--warn); }
.din-rules fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.din-rules legend { font-weight: 700; margin-bottom: .3rem; }
.din-rule { display: flex; align-items: center; gap: .6rem; margin: .3rem 0; }
.din-rule span { min-width: 9.5rem; }
.din-rule input { width: 5rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.din-rule select { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.din-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.din-chart-wrap { overflow-x: auto; max-width: 100%; }
.din-chart { border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.din-chart th, .din-chart td { border: 1px solid var(--border); padding: .2rem .3rem; text-align: center; white-space: nowrap; }
.din-chart thead th { background: var(--brand-light); }
.din-chart tbody th { background: var(--brand-light); width: 2.2rem; }
.din-chart small { color: var(--text-muted); margin-right: .15rem; }
.din-in { width: 3.4rem; padding: .2rem .25rem; border: 1px solid transparent; border-radius: 4px; text-align: center; font: inherit; background: transparent; }
.din-in:hover, .din-in:focus { border-color: var(--border); background: var(--card-bg); }
.din-in--h { width: 3.6rem; border-color: var(--border); background: var(--card-bg); }
.din-chart tr.is-row td, .din-chart tr.is-row th { background: var(--brand-light); }
.din-chart td.is-changed { box-shadow: inset 0 -3px 0 var(--accent); }
.din-chart td.is-hit, .din-key--hl { background: var(--warn-bg) !important; font-weight: 800; outline: 2px solid var(--warn); }
.din-key { padding: 0 .3rem; border-radius: 3px; }
.din-recent tr.is-diff td { background: var(--warn-bg); }
.din-log { list-style: none; margin: 0; padding: 0; }
.din-log li { padding: .4rem 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .1rem; }

/* Usage (admin/usage.php, tasks 1255 / 1270, 2026-11-03) */
.us-filter { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
.us-filter label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.us-filter select, .us-filter input { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-weight: 400; max-width: 100%; }
.us-quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.us-quick a { font-size: .8rem; padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 99px; color: var(--text); text-decoration: none; background: var(--card-bg); }
.us-quick a.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.us-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: .5rem; }
.us-tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; display: flex; flex-direction: column; font-size: .82rem; color: var(--text-muted); }
.us-tile__n { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.us-tile--warn { background: var(--warn-bg); border-color: var(--warn); }
.us-where { margin: 0 0 1rem; }
.us-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.us-h { font-size: .9rem; margin: 0 0 .4rem; }
.us-top { margin: 0; padding-left: 1.3rem; }
.us-top li { padding: .2rem 0; }
.us-top li span { display: inline-block; min-width: 9.5rem; }
.us-days { margin-top: 1rem; }
.us-days summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.data-table td.num, .data-table th.num { text-align: right; }
.us-items th a { color: inherit; text-decoration: none; }
.us-items th a.is-sorted { color: var(--brand); }
.us-page tr.is-over td { background: var(--warn-bg); }
.us-page tr.is-idle td { color: var(--text-muted); }
.us-limits { list-style: none; margin: 0 0 1rem; padding: 0; }
.us-limits li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.us-page .widget-title .btn { margin-left: auto; }
.us-link { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.us-link__warn { display: inline-flex; align-items: center; gap: .3rem; color: var(--warn); font-weight: 600; font-size: .85rem; }

/* Composite items and buckets (2026-11-04) */
.kr-flag--comp { color: #1e4d7b; background: #dbeafe; display: inline-flex; align-items: center; gap: .2rem; border: 0; cursor: default; font: inherit; font-size: .68rem; font-weight: 700; }
.kr-flag--bucket { color: #5b4a12; background: #fef3c7; display: inline-flex; align-items: center; gap: .2rem; border: 0; cursor: default; font: inherit; font-size: .68rem; font-weight: 700; }
button.iw-kindchip { cursor: pointer; padding: .15rem .55rem; }
/* Build page */
.admin-content.bd-page { max-width: 960px; }   /* Admin → Kit → Build a Composite (moved into admin 2026-11-04) */
.bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.bd-grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.bd-grid label.bd-wide { grid-column: 1 / -1; }
.bd-parts { list-style: none; margin: 0 0 1rem; padding: 0; }
.bd-parts li { display: flex; align-items: center; gap: .6rem; padding: .45rem .2rem; border-bottom: 1px solid var(--border); }
.bd-parts li .bd-n { font-weight: 700; color: var(--brand); min-width: 1.5rem; }
.bd-parts li .bd-meta { color: var(--text-muted); font-size: .8rem; margin-left: auto; }
.bd-empty { color: var(--text-muted); padding: .75rem 0; }
.cp-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.cp-add input { flex: 1 1 14rem; }
.cp-results { display: flex; flex-direction: column; gap: .25rem; margin-top: .4rem; }
.cp-cand { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; width: 100%; text-align: left; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); font: inherit; cursor: pointer; }
.cp-cand:hover { border-color: var(--brand); }
.cp-cand--no { cursor: default; opacity: .6; }
.cp-cand--stock { cursor: default; }
.cp-cand__name { font-weight: 600; }
.cp-cand__meta { font-size: .78rem; color: var(--text-muted); }
@media (max-width: 600px) { .bd-grid { grid-template-columns: 1fr; } }


/* ── Add items (Admin → Items, 2026-11-05) ─────────────────────────────────── */
.ad { margin-bottom: 1.25rem; }   /* space before the find & filter bar (David, 2026-11-05) */
.ad .widget-title { margin-bottom: .75rem; }
.ad [hidden] { display: none !important; }   /* .btn's display would otherwise beat the hidden attribute */
.ad-status { font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.ad-status.is-bad, .ad-msg.is-bad { color: var(--danger); }
.ad-top { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: flex-end; }
.ad-f { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--text); min-width: 0; }
.ad-f--name { flex: 2 1 16rem; } .ad-f--make { flex: 1 1 9rem; } .ad-f--folder { flex: 1.5 1 12rem; } .ad-f--n { flex: 0 0 5.5rem; }
.ad-f--wide { grid-column: 1 / -1; }
.ad-req { color: var(--danger); }
.ad-lookup { align-self: flex-end; white-space: nowrap; }
.ad-hint { margin: .6rem 0 0; font-size: .8rem; color: var(--text-muted); }
.ad-more { margin-top: 1rem; animation: ad-in .25s ease-out; }
@keyframes ad-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ad-cols { display: grid; grid-template-columns: 1fr 1fr 260px; gap: 1rem; }
.ad-sec { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem .9rem; margin-top: .9rem; background: var(--card-bg); }
.ad-cols .ad-sec { margin-top: 0; }
.ad-sec h4 { margin: 0 0 .6rem; font-size: .85rem; display: flex; align-items: center; gap: .35rem; color: var(--brand); }
.ad-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; }
.ad-varies { display: flex; align-items: center; gap: .3rem; font-weight: 400; font-size: .75rem; color: var(--text-muted); }
.ad-money { display: flex; align-items: center; gap: .3rem; } .ad-money > span { color: var(--text-muted); }
.ad-life { font-weight: 400; font-size: .72rem; min-height: 1em; }
/* photo */
.ad-drop { position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; border: 2px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; text-align: center; color: var(--text-muted); font-size: .8rem; overflow: hidden; outline: none; }
.ad-drop:focus, .ad-drop--over { border-color: var(--brand); background: var(--brand-light); }
.ad-drop--has { border-style: solid; }
.ad-drop img { max-width: 100%; max-height: 220px; object-fit: contain; display: block; }
.ad-drop__text .ic { display: block; margin: 0 auto .25rem; }
.ad-photo-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .78rem; }
.ad-google { color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.ad-cands { margin-top: .6rem; }
.ad-cands__t { font-size: .75rem; color: var(--text-muted); margin-bottom: .3rem; }
.ad-cands__strip { display: flex; flex-wrap: wrap; gap: .35rem; }
.ad-cand { width: 56px; height: 56px; padding: 2px; border: 2px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; }
.ad-cand img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-cand:hover { border-color: var(--brand); } .ad-cand.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
/* suggestion card */
.ad-sug { border: 1px solid var(--brand); border-left-width: 4px; border-radius: var(--radius-sm); padding: .75rem .9rem; background: var(--brand-light); font-size: .85rem; margin-bottom: .9rem; }
.ad-sug__head { margin-bottom: .5rem; }
.ad-conf { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; padding: .05rem .4rem; border-radius: 999px; background: #fff; border: 1px solid var(--border); margin-left: .3rem; }
.ad-conf--high { color: var(--success); } .ad-conf--low { color: var(--danger); }
.ad-sug__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .3rem .9rem; margin-bottom: .6rem; }
.ad-sug__row { display: grid; grid-template-columns: auto 6rem 1fr; align-items: center; gap: .4rem; cursor: pointer; }
.ad-sug__l { color: var(--text-muted); } .ad-sug__v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-sug__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ad-sug__close { margin-left: auto; }
/* each item */
.ad-tools { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: flex-end; margin-bottom: .6rem; }
.ad-number { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.ad-number label { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; font-weight: 600; }
.ad-number input { width: 5.5rem; }
.ad-scan { display: flex; align-items: center; gap: .4rem; flex: 1 1 18rem; color: var(--brand); }
.ad-scan input { flex: 1; }
.ad-grid-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ad-grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ad-grid th { position: sticky; top: 0; background: var(--bg); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: .4rem .5rem; border-bottom: 1px solid var(--border); }
.ad-grid td { padding: .2rem .35rem; border-bottom: 1px solid var(--border); }
.ad-grid td.ad-i { color: var(--text-muted); font-size: .75rem; width: 2.2rem; text-align: right; }
.ad-grid input { min-width: 7rem; }
.ad-grid tr.ad-row--hit td { background: var(--success-bg); transition: background .9s; }
.ad-grid tr.ad-row--dup td { background: var(--danger-bg); transition: background .9s; }
.ad-col-size, .ad-col-colour { display: none; }
.ad--size .ad-col-size, .ad--colour .ad-col-colour { display: table-cell; }
.ad--one .ad-number, .ad--one .ad-i { display: none; }   /* th and td both carry .ad-i, so the headings stay over their boxes */
.ad--one .ad-grid-wrap { border: 0; } .ad--one .ad-grid th { position: static; }
.ad-actions { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.ad-msg { font-size: .85rem; color: var(--text-muted); }
@media (max-width: 1100px) { .ad-cols { grid-template-columns: 1fr 1fr; } .ad-sec--photo { grid-column: 1 / -1; } }
@media (max-width: 720px)  { .ad-cols, .ad-grid2 { grid-template-columns: 1fr; } }

/* ── Staff Kit People (Admin → Settings, 2026-11-05) ───────────────────────── */
.skp-find { display: flex; align-items: center; gap: .6rem; font-weight: 400; }
.skp-find input[type=search] { width: 15rem; }
.skp-all { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.skp-table td { vertical-align: middle; }
.skp-table tr.is-on td:first-child { border-left: 3px solid var(--success); }
.skp-yes { color: var(--success); font-weight: 600; }
.skp-switch { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .85rem; }
.skp-switch input { width: 1.1rem; height: 1.1rem; }

/* ── Repairs report (Admin → Reports, 2026-11-05) ──────────────────────────── */
.rp-table td { vertical-align: top; font-size: .85rem; }
.rp-note { font-size: .78rem; font-weight: 400; text-decoration: none; }
.rp-warn { display: inline-block; margin-left: .3rem; padding: .05rem .4rem; border-radius: 999px; background: var(--danger-bg); color: var(--danger); font-size: .72rem; font-weight: 600; }
.stat-card--warning { border-color: #c47d0e; } .stat-card--warning .stat-card__value { color: #c47d0e; }

/* ── Items admin: find & filter bar (2026-11-05) ───────────────────────────── */
.it-bar { margin: 0 0 1.25rem; padding: .85rem 1rem; }
.it-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.it-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem .3rem .55rem; border: 1px solid var(--border); border-radius: 999px;
           background: var(--card-bg); font-size: .82rem; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; user-select: none;
           transition: background .12s, border-color .12s, box-shadow .12s; }
.it-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.it-chip .state-dot { margin: 0; width: 10px; height: 10px; cursor: inherit; }
.it-chip:hover { border-color: var(--brand); }
.it-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(0,94,133,.25); }
.it-chip.is-on .state-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.it-chip.is-empty { opacity: .55; }
.it-chip__n { font-weight: 500; font-size: .72rem; padding: .05rem .4rem; border-radius: 999px; background: var(--bg); color: var(--text-muted); }
.it-chip.is-on .it-chip__n { background: rgba(255,255,255,.2); color: #fff; }
.it-chip--all { padding-left: .7rem; }
.it-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.it-field--folder { flex: 1 1 16rem; min-width: 14rem; }
.it-field--search { flex: 1.4 1 18rem; min-width: 14rem; position: relative; display: flex; align-items: center; }
.it-field--search .ic { position: absolute; left: .6rem; color: var(--text-muted); pointer-events: none; }
.it-field--search input { width: 100%; padding-left: 2rem; padding-right: 1.8rem; }
.it-field--search input::-webkit-search-cancel-button { display: none; }
.it-x { position: absolute; right: .5rem; color: var(--text-muted); text-decoration: none; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; }
.it-x:hover { color: var(--danger); }
.it-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--brand-light); color: var(--brand); font-size: .78rem; font-weight: 600; }
.it-pill a { color: inherit; text-decoration: none; font-size: 1rem; line-height: 1; margin-left: .1rem; }
.it-count { margin-left: auto; font-size: .85rem; color: var(--text-muted); white-space: nowrap; }
.it-reset { font-size: .8rem; color: var(--brand); }
.it-hint { margin: .6rem 0 0; font-size: .82rem; color: var(--text-muted); }
.it-go { display: none; }                      /* chips and the folder submit themselves; Enter submits the search */
.no-js .it-go { display: inline-flex; }
@media (max-width: 720px) { .it-count { margin-left: 0; width: 100%; } }

/* ── Checkout (2026-11-06): the chip on an item that is out; the settings page's folder list ── */
.kr-flag--out { background: #e6f0fa; color: #0b4f8a; text-decoration: none; }
.co-blocked { list-style: none; margin: 0; padding: 0; }
.co-blocked li { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.co-bags { max-height: 280px; overflow: auto; }

/* ── Build a Bag (Admin → Kit, 2026-11-06) and the "in the bag" chip on an item ─────────────── */
.kr-flag--bag { background: #111; color: #fff; }
.bg-cols { display: grid; grid-template-columns: 300px 1fr; gap: 1.25rem; align-items: start; }
.bg-bags { list-style: none; margin: 0; padding: 0; }
.bg-bags a { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .5rem .6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); border: 1px solid transparent; }
.bg-bags a:hover { background: var(--brand-light); }
.bg-bags a.is-on { border-color: var(--brand); background: var(--brand-light); }
.bg-print { margin: .75rem 0 0; font-size: .82rem; }
.bg-print a { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand); text-decoration: none; font-weight: 600; }
.bg-form { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: .6rem .8rem; }
.bg-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; font-weight: 600; }
.bg-form .bg-wide { grid-column: 1 / -1; }
.bg-items { list-style: none; margin: 0 0 .75rem; padding: 0; }
.bg-items li { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px solid var(--border); }
.bg-items__main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.bg-items__main a { color: var(--text); text-decoration: none; }
.bg-items__main a:hover { color: var(--brand); text-decoration: underline; }
.bg-qty input { width: 5rem; display: inline-block; }
.bg-msg { min-height: 1.1em; margin: .3rem 0 0; } .bg-msg.is-bad { color: var(--danger); font-weight: 600; }
.bg-why { flex-basis: 100%; color: var(--danger); font-size: .78rem; }
.cp-cand.is-off { opacity: .6; cursor: not-allowed; }
.bg-delete { margin-top: .5rem; }
.bg-page .co-chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.bg-page .co-chip--soon { background: #fdf0d5; color: #8a5a00; } .bg-page .co-chip--over { background: var(--danger-bg); color: var(--danger); }
.bg-page .co-kind { display: inline-block; padding: .02rem .45rem; border-radius: 999px; background: var(--brand-light); color: var(--brand); font-size: .72rem; font-weight: 600; }
@media (max-width: 1000px) { .bg-cols { grid-template-columns: 1fr; } .bg-form { grid-template-columns: 1fr; } }

/* ── Faces (2026-11-06): kit_avatar() / kit_person() — a photo, or initials on a disc ───────── */
.kav { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--kav, 26px); height: var(--kav, 26px);
       border-radius: 50%; overflow: hidden; background: #dbe6ee; color: #23475c; font-size: calc(var(--kav, 26px) * .36); font-weight: 700; letter-spacing: -.02em; vertical-align: middle; line-height: 1; }
.kav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kp { display: inline-flex; align-items: center; gap: .4rem; vertical-align: middle; max-width: 100%; }
.kp > span:last-child { min-width: 0; }
/* A people picker: type a name, pick from faces (Admin → Settings → Checkout) */
.pp { position: relative; max-width: 30rem; }
.pp input { width: 100%; }
.pp-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--card-bg); border: 2px solid var(--brand); border-radius: var(--radius-sm);
              box-shadow: var(--shadow-md); max-height: 340px; overflow: auto; padding: .25rem; }
.pp-row { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .4rem .5rem; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; cursor: pointer; }
.pp-row:hover:not(:disabled), .pp-row.is-first:not(:disabled) { background: var(--brand-light); }
.pp-row:disabled { opacity: .55; cursor: default; }
.pp-row small { color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.pp-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .5rem; }
.pp-list li { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pp-list li > div { flex: 1; min-width: 0; }
.pp-list li small { display: block; color: var(--text-muted); font-size: .75rem; }
.pp-empty { color: var(--text-muted); margin: .9rem 0 0; }
.pp-one { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; }