/* ── Quest Remote Admin Design System ── */

:root {
    /* Sidebar palette -- light defaults. Overridden in [data-theme="dark"] below to
       keep the existing dark navy look. All sidebar markup should drive its colors
       through these vars so future theme tweaks live in one place. */
    --sidebar-bg: #ffffff;
    --sidebar-hover: #f1f5f9;
    --sidebar-active: #e2e8f0;
    --sidebar-text: #64748b;
    --sidebar-text-strong: #0f172a;
    --sidebar-text-muted: #94a3b8;
    --sidebar-hover-bg: rgba(15, 23, 42, 0.05);
    --sidebar-border: rgba(15, 23, 42, 0.08);
    --sidebar-topbar-bg: rgba(15, 23, 42, 0.04);
    --quest-green: #96C93E;
    --quest-green-dim: rgba(150, 201, 62, 0.15);
    --quest-purple: #5B4A9E;
    --quest-purple-dim: rgba(91, 74, 158, 0.12);
    --accent-primary: #96C93E;
    --topbar-bg: #ffffff;
    --topbar-border: #e5e7eb;
    --content-bg: #f4f6f9;
    --card-bg: #ffffff;
    --card-border: #e2e6ea;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --blue: #2563eb;
    --green: #16a34a;
    --amber: #f59e0b;
    --red: #dc2626;
    --gray: #6b7280;
    --cyan: #0891b2;
    --radius: 6px;
    --radius-sm: 4px;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--content-bg);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 641px) {
    html, body { overflow: hidden; }
}

/* ── Links & Buttons ── */

a { color: var(--blue); }
a:hover { color: #1d4ed8; }

.btn { font-size: 0.8125rem; font-weight: 500; border-radius: var(--radius-sm); }
.btn-primary { background-color: var(--blue); border-color: var(--blue); }
.btn-primary:hover { background-color: #1d4ed8; border-color: #1d4ed8; }
.btn-outline-secondary { color: var(--text-secondary); border-color: var(--card-border); }
.btn-outline-secondary:hover { background-color: #f8fafc; border-color: #cbd5e1; color: var(--text-primary); }
.btn-danger { background-color: var(--red); border-color: var(--red); }
.btn-outline-danger { color: var(--red); border-color: var(--red); }
.btn-outline-danger:hover { background-color: var(--red); color: #fff; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }

.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    border-color: var(--blue);
}

/* ── Form Controls ── */

.form-control, .form-select {
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    border-color: var(--card-border);
    padding: 0.4rem 0.65rem;
}

.form-control::placeholder { color: var(--text-muted); }

/* ── Cards ── */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    transition: border-color 0.15s ease;
}

.card-body { padding: 1rem; }
.card-title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 0.75rem; }

/* ── Stat Cards (Dashboard) ── */

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    border-top: 3px solid var(--card-border);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-card-blue { border-top-color: var(--blue); }
.stat-card-green { border-top-color: var(--green); }
.stat-card-gray { border-top-color: var(--gray); }
.stat-card-amber { border-top-color: var(--amber); }
.stat-card-cyan { border-top-color: var(--cyan); }

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.stat-card .stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* ── Tables ── */

.table { font-size: 0.8125rem; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 0.45rem 0.75rem; }

.table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--card-border);
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
}

.table tbody tr { border-bottom: 1px solid #f1f5f9; }
.table tbody tr:hover { background-color: #f8fafc; }
.table tbody td { vertical-align: middle; color: var(--text-primary); }

.table-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.table-card .table { margin: 0; }
.table-card .table thead th:first-child { padding-left: 1rem; }
.table-card .table tbody td:first-child { padding-left: 1rem; }

/* ── Status Badges ── */

.badge-status {
    display: inline-block;
    align-items: center;
    font-size: 0.75rem;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: capitalize;
}

.badge-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-online { background: #dcfce7; color: #166534; }
.badge-online::before { background: #16a34a; }
.badge-offline { background: #f3f4f6; color: #4b5563; }
.badge-offline::before { background: #9ca3af; }
.badge-provisioning { background: #dbeafe; color: #1e40af; }
.badge-provisioning::before { background: #3b82f6; }
.badge-disabled { background: #fef2f2; color: #991b1b; }
.badge-disabled::before { background: #dc2626; }
.badge-unprovisioned { background: #fef3c7; color: #92400e; }
.badge-unprovisioned::before { background: #f59e0b; }

/* ── Device Mode Badges ── */
.badge-mode { display: inline-flex; align-items: center; padding: 0.15rem 0.45rem; border-radius: 9999px; font-weight: 600; font-size: 0.6rem; letter-spacing: 0.03em; }
.badge-prod { background: #dcfce7; color: #166534; }
.badge-qc { background: #dbeafe; color: #1e40af; }
.badge-dev { background: #fae8ff; color: #86198f; }
.badge-library { background: #ede9fe; color: #5b21b6; }
.badge-academy { background: #d1fae5; color: #065f46; }

/* ── Launcher Channel Badges ── */
.badge-channel { display: inline-flex; align-items: center; padding: 0.15rem 0.45rem; border-radius: 9999px; font-weight: 600; font-size: 0.65rem; letter-spacing: 0.03em; }
.badge-channel-production { background: #dcfce7; color: #166534; }
.badge-channel-beta { background: #fef3c7; color: #92400e; }
.badge-channel-dev { background: #fae8ff; color: #86198f; }

/* ── Sales Order Status Badges ── */
.badge-complete { background: #dcfce7; color: #166534; }
.badge-complete::before { background: #16a34a; }
.badge-in-progress { background: #fef3c7; color: #92400e; }
.badge-in-progress::before { background: #f59e0b; }
.badge-not-started { background: #f3f4f6; color: #4b5563; }
.badge-not-started::before { background: #9ca3af; }

/* ── Mini Progress Bar (inline in tables) ── */
.progress-mini { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.progress-mini-track { width: 60px; height: 6px; background: var(--card-border); border-radius: 3px; overflow: hidden; }
.progress-mini-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent-primary, #3b82f6); transition: width 0.3s; }
.progress-mini-fill.progress-complete { background: #16a34a; }

/* ── Expandable Detail Row ── */
.expandable-row { cursor: pointer; }
.expandable-row:hover { background: rgba(255,255,255,0.03); }
.detail-panel { background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.06); padding: 1rem 1.25rem; }
.detail-panel .sub-table { width: 100%; font-size: 0.8rem; }
.detail-panel .sub-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #94a3b8); padding: 0.35rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.detail-panel .sub-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.detail-panel .device-links { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.detail-panel .device-link { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: rgba(59,130,246,0.15); color: #60a5fa; text-decoration: none; font-family: var(--font-mono, monospace); }
.detail-panel .device-link:hover { background: rgba(59,130,246,0.3); }

.badge-qc-draft { background: #f3f4f6; color: #4b5563; }
.badge-qc-draft::before { background: #9ca3af; }
.badge-qc-pending { background: #fef3c7; color: #92400e; }
.badge-qc-pending::before { background: #f59e0b; }
.badge-qc-inqc { background: #dbeafe; color: #1e40af; }
.badge-qc-inqc::before { background: #3b82f6; }
.badge-qc-approved { background: #dcfce7; color: #166534; }
.badge-qc-approved::before { background: #16a34a; }
.badge-qc-rejected { background: #fef2f2; color: #991b1b; }
.badge-qc-rejected::before { background: #dc2626; }

.badge-pending { background: #fef3c7; color: #92400e; }
.badge-pending::before { background: #f59e0b; }
.badge-delivered { background: #dbeafe; color: #1e40af; }
.badge-delivered::before { background: #3b82f6; }
.badge-acknowledged { background: #e0e7ff; color: #3730a3; }
.badge-acknowledged::before { background: #6366f1; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-completed::before { background: #16a34a; }
.badge-failed { background: #fef2f2; color: #991b1b; }
.badge-failed::before { background: #dc2626; }
.badge-cancelled { background: #f3f4f6; color: #4b5563; }
.badge-cancelled::before { background: #9ca3af; }

/* ── Command Type Badges ── */

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0.1rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 9999px;
    background: var(--card-bg, #1e293b);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--text-secondary, #94a3b8);
}
.tag-remove {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 1px;
}
.tag-remove:hover { color: #ef4444; }

/* ── Side-quest dots (Organizations → Devices tab) ── */

.quest-dot-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    cursor: help;
}

.quest-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    cursor: help;
    transition: transform 0.12s ease;
}

.quest-dot:hover {
    transform: scale(1.45);
}

[data-theme="dark"] .quest-dot {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.badge-cmd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 500;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    border-radius: var(--radius-sm);
    background: #f1f5f9;
    color: var(--text-secondary);
    border: 1px solid #e2e8f0;
}

/* ── Page Header ── */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

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

.page-header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.page-header .page-subtitle {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ── Section Headers ── */

.section-header {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

/* ── Page Tabs ── */

.page-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--card-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.page-tabs::-webkit-scrollbar { display: none; }

.page-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.page-tab:hover { color: var(--text-primary); }

.page-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Device Header ── */

.device-header {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.device-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.device-header-identity { flex: 1; min-width: 0; }

.device-header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.device-header h1 { font-size: 1.375rem; font-weight: 700; margin: 0; line-height: 1.3; }

.device-header-badges {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

/* ── Info Card (lightweight panel within tabs) ── */

.info-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.info-card-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

/* ── Two-Column Info Layout ── */

.info-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ── Config Form Layout ── */

.config-section {
    margin-bottom: 1.5rem;
}

.config-section:last-child { margin-bottom: 0; }

.config-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.config-field { display: flex; flex-direction: column; gap: 0.35rem; }

.config-field label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.config-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
    margin-top: 1rem;
}

/* ── Dashboard Grid Layout ── */

.dashboard-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-grid .section-header { margin-bottom: 0.5rem; }

.alerts-activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.alerts-activity-grid .section-header { margin-bottom: 0.5rem; }

@media (max-width: 768px) {
    .alerts-activity-grid { grid-template-columns: 1fr; }
}

/* ── Device Info Grid ── */

.info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
    font-size: 0.8125rem;
}

.info-grid dt {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
}

.info-grid dd {
    color: var(--text-primary);
    margin: 0;
    font-weight: 400;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--card-border);
}

.info-grid dt:last-of-type,
.info-grid dd:last-of-type { border-bottom: none; }

/* ── Storage Bar ── */

.storage-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.storage-track {
    width: 48px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.storage-used {
    display: block;
    height: 100%;
    background: var(--blue);
    border-radius: 3px;
    transition: width 0.3s;
}

.storage-used.high { background: var(--red); }

/* ── Action Button Groups ── */

.action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.action-divider {
    width: 100%;
    height: 1px;
    background: var(--card-border);
    margin: 0.35rem 0;
}

/* ── Back Link ── */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.back-link:hover { color: var(--blue); }

/* ── Dashboard Attention Rows ── */

.attention-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
}

.attention-row-warn {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.attention-row-ok {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.row-failed { background: #fef2f2; }

/* ── Pagination ── */

.pagination-tab-host {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}

.pagination-tab-host--footer {
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: none;
}

.pagination-tab-host-inner {
    width: 100%;
}

.pagination-summary {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    cursor: default;
}

.pagination-page-size-select {
    min-width: 4.25rem;
    max-width: 5rem;
    font-size: 0.8rem;
}

.pagination-btn {
    padding: 0.28rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.pagination-btn:hover:not(:disabled) {
    color: var(--quest-green);
    background: var(--quest-green-dim);
    border-color: var(--quest-green);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.pagination-page-btn {
    min-width: 1.9rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.pagination-page-btn:hover:not(.active) {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
}

.pagination-page-btn.active {
    color: var(--quest-green);
    background: var(--quest-green-dim);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--quest-green);
    border-radius: var(--radius-sm);
}

.pagination-ellipsis {
    padding: 0.28rem 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    user-select: none;
}

/* ── Loading State ── */

.loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* ── Misc ── */

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green); }
.invalid { outline: 1px solid var(--red); }
.validation-message { color: var(--red); font-size: 0.75rem; }

.text-mono {
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
}

.show-mobile { display: none; }

.blazor-error-boundary {
    background: var(--red);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--radius);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Toast / Alert ── */

.alert-toast {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* ── Page Layout ── */

/* Outer shell wraps the impersonation banner + .page so banner height
   is subtracted from the available viewport instead of being stacked on
   top of a 100vh block. Mobile keeps natural document scrolling; desktop
   locks the shell to the viewport and lets <main> scroll internally. */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    background: var(--content-bg);
    height: 100vh;
    overflow-y: auto;
}

.sidebar {
    background: var(--sidebar-bg);
}

.top-row {
    background-color: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    justify-content: flex-start;
    height: 3.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topbar-logo {
    height: 26px;
    width: auto;
    object-fit: contain;
    margin-right: 0.5rem;
}

.topbar-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.top-row a, .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row a:hover, .top-row .btn-link:hover {
    text-decoration: underline;
}

.top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }

    main {
        height: auto;
        min-height: 0;
        overflow-y: visible;
    }
}

@media (min-width: 641px) {
    /* Desktop: lock the shell to one viewport so banner height shrinks the
       page area (instead of being stacked on top of a 100vh page). The
       .page below becomes flex: 1 with min-height: 0 so its sidebar + main
       fill the remainder. Sidebar drops sticky positioning -- the shell no
       longer scrolls, only <main> does, so stickiness is unnecessary. */
    .app-shell {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }
    .app-shell > .page {
        flex: 1 1 auto;
        min-height: 0;
    }
    .app-shell main {
        /* Override the default 100vh so flex: 1 governs the height inside the shell. */
        height: auto;
    }

    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 230px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        transition: width 0.15s ease;
        overflow: hidden;
        /* Flex column so .nav-scrollable can `flex: 1` to fill the remaining vertical
           space below the top row -- which in turn lets the .sidebar-footer inside it
           anchor to the very bottom of the sidebar via `margin-top: auto`. */
        display: flex;
        flex-direction: column;
    }

    /* Inside the shell, the sidebar fills the page's full height (100% of the
       remaining shell space, after banner) rather than 100vh. Sticky is removed
       since the shell itself is the bounded viewport. */
    .app-shell .sidebar {
        height: 100%;
        position: relative;
        top: auto;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row, article {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* ── Collapsed Sidebar ── */

    .page.sidebar-collapsed .sidebar { width: 56px; }

    .page.sidebar-collapsed .nav-label { display: none; }
    .page.sidebar-collapsed .nav-user-name,
    .page.sidebar-collapsed .nav-logout { display: none; }

    .page.sidebar-collapsed .nav-item .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        border-left-color: transparent;
    }

    .page.sidebar-collapsed .nav-icon,
    .page.sidebar-collapsed .nav-icon-img { margin-right: 0; }

    /* Collapsed brand area: the only visible element is the Quest mark, centered
       in the 56px-wide column. Remove the flex `gap` (only relevant when the text
       lockup is visible) and pad zero so the mark sits flush-center. */
    .page.sidebar-collapsed .navbar-brand {
        justify-content: center;
        gap: 0;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .page.sidebar-collapsed .brand-mark {
        /* Explicitly size the mark in collapsed mode. Earlier version had
           `max-width: calc(100% - 8px)` which collapsed to 0 once the parent
           was squeezed to 8px by the global .top-row 1.5rem padding override
           (see the rule below that resets that padding in collapsed mode).
           Plain width/height is sufficient now. */
        display: block;
        margin: 0 auto;
        width: 36px;
        height: 36px;
        object-fit: contain;
        flex-shrink: 0;
    }

    /* The expanded-state .top-row gets `padding-left: 1.5rem !important`
       from the global rule above this block. In collapsed mode that 48px of
       horizontal padding eats the whole 56px column and leaves no room for
       the brand mark. Override to zero so the mark fills the column. */
    .page.sidebar-collapsed .top-row,
    .page.sidebar-collapsed .top-row.ps-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Collapsed user card: hide the entire name + role-pill meta block; only the
       circular avatar remains, centered in the column. Previously the role pill
       still rendered next to the avatar and got crushed by the 56px width. */
    .page.sidebar-collapsed .customer-nav-user-meta { display: none; }
    .page.sidebar-collapsed .customer-nav-user { justify-content: center; gap: 0; }

    .page.sidebar-collapsed .nav-user-section { padding: 0.5rem 0.25rem; text-align: center; }
    .page.sidebar-collapsed .nav-bottom-actions { padding: 0.5rem 0.25rem; align-items: center; }
    .page.sidebar-collapsed .theme-toggle { justify-content: center; }

    .page.sidebar-collapsed .sidebar-collapse-btn { justify-content: center; }
    .page.sidebar-collapsed .top-row .container-fluid { justify-content: center; padding: 0; }
}

/* ── Nav Menu ── */

.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--sidebar-text-strong);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--sidebar-border);
    /* Default (light): dark slate strokes on a faint slate fill. The dark-mode override
       below swaps to white strokes for visibility on the dark navy top row. */
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 23, 42, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--sidebar-hover-bg);
}

.navbar-toggler:checked {
    background-color: var(--sidebar-active);
}

[data-theme="dark"] .navbar-toggler {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.sidebar .top-row {
    height: 3.5rem;
    background-color: var(--sidebar-topbar-bg);
    border-bottom: 2px solid var(--quest-green);
}

/* Right edge divider so the white-on-white sidebar in light mode reads as its
   own surface, separate from white cards in the content area. Dark mode hides
   this since the dark navy is already plenty distinct from the dark content. */
.sidebar {
    border-right: 1px solid var(--sidebar-border);
}
[data-theme="dark"] .sidebar { border-right: none; }

.sidebar-collapse-btn {
    appearance: none;
    background: none;
    border: none;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    padding: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    width: 100%;
}

.sidebar-collapse-btn:hover { color: var(--sidebar-text-strong); }

.navbar-brand {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Org logo (and any other "expanded only" brand bits) collapses with the
   sidebar so only the Quest mark + text are reserved for the wide state. */
.brand-expanded-only { display: inline-block; }
.page.sidebar-collapsed .brand-expanded-only { display: none; }

.brand-text {
    font-weight: 600;
    color: var(--sidebar-text-strong);
    font-size: 0.9375rem;
}

.brand-accent {
    color: var(--quest-green);
}

.nav-icon {
    width: 18px;
    height: 18px;
    margin-right: 0.6rem;
    flex-shrink: 0;
    opacity: 0.6;
}

.nav-icon-img {
    width: 22px;
    height: 22px;
    margin-right: 0.5rem;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.nav-item a.active .nav-icon-img {
    opacity: 1;
}

.nav-item .nav-link:hover .nav-icon-img {
    opacity: 0.85;
}

.nav-item {
    font-size: 0.8125rem;
    padding-bottom: 0.15rem;
}

.nav-item:first-of-type {
    padding-top: 0.75rem;
}

.nav-item:last-of-type {
    padding-bottom: 1rem;
}

.nav-item .nav-link {
    color: var(--sidebar-text);
    background: none;
    border: none;
    border-radius: 6px;
    height: 2.5rem;
    display: flex;
    align-items: center;
    line-height: 2.5rem;
    width: 100%;
    border-left: 3px solid transparent;
    padding-left: 0.5rem;
    transition: all 0.15s ease;
    font-weight: 500;
}

.nav-item a.active {
    background-color: rgba(150, 201, 62, 0.12);
    color: var(--sidebar-text-strong);
    border-left-color: var(--quest-green);
}

.nav-item a.active .nav-icon {
    opacity: 1;
    color: var(--quest-green);
}

.nav-item .nav-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-strong);
}

.nav-item .nav-link:hover .nav-icon {
    opacity: 0.85;
}

.nav-scrollable {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    /* Flex column that fills the remaining sidebar space below the top row.
       The internal flex layout lets `.sidebar-footer` anchor itself to the very
       bottom via `margin-top: auto`, even when the nav list above is much shorter
       than the viewport.

       NOTE: we match BOTH `.nav-scrollable` AND `.navbar-toggler:checked ~ .nav-scrollable`
       here. The unchecked rule alone has specificity (1,0), losing to the
       `:checked ~ .nav-scrollable { display: block }` rule (2,0) used by the mobile
       menu toggle. Clicking the sidebar fires an inline onclick that flips that
       checkbox -- on desktop we want the flex layout to win regardless. */
    .nav-scrollable,
    .navbar-toggler:checked ~ .nav-scrollable {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* The <nav> element should size to its content, leaving the remaining vertical
       space available for `.sidebar-footer`'s `margin-top: auto` to consume. */
    .nav-scrollable > nav {
        flex: 0 0 auto;
    }
}

/* ── Modal Overlay ── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    width: 90%;
    max-width: 680px;
    max-height: 80vh;
    overflow-y: auto;
}

/* -- Sortable Table Headers -- */

th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover {
    color: var(--accent-primary);
}

th.sortable::after {
    content: "\21C5";
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.3;
}

th.sortable.sort-asc::after {
    content: "\25B2";
    opacity: 0.8;
}

th.sortable.sort-desc::after {
    content: "\25BC";
    opacity: 0.8;
}

/* -- Filter Panel (collapsible) -- */

.filter-panel {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--card-bg);
    margin-bottom: 1rem;
    /* No overflow:hidden here -- it would clip the absolutely-positioned multi-select
       dropdown menus that overflow the panel's bottom edge. */
}

.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--card-border);
    /* Match the parent's rounded corners since the parent no longer clips. */
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.filter-panel-collapsed .filter-panel-header {
    /* When collapsed the header is the only visible element: round all four corners
       and drop the divider line. */
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border-bottom: none;
}

.filter-panel-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    cursor: pointer;
}

.filter-panel-chevron {
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    color: var(--text-muted);
}

.filter-panel-collapsed .filter-panel-chevron {
    transform: rotate(-90deg);
}

.filter-panel-title {
    color: var(--text-secondary);
}

.filter-panel-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.4rem;
    border-radius: 9px;
    background: var(--accent-primary, #3b82f6);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.filter-panel-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-panel-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-panel-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.filter-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.25rem;
    border-top: 1px dashed var(--card-border);
    margin-top: 0.25rem;
}

/* Stale / toggle-style pill for boolean filters in the filter panel */
.filter-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}

.filter-toggle-pill:hover {
    border-color: var(--text-secondary);
}

.filter-toggle-pill.filter-toggle-on {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.6);
    color: var(--text-primary);
}

.filter-toggle-pill input[type="checkbox"] {
    margin: 0;
}

/* -- Bulk Actions Bar (sticky bottom bar) -- */

.bulk-actions-bar {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1400;
    background: var(--card-bg);
    border: 1px solid var(--accent-primary, #3b82f6);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    max-width: calc(100vw - 2rem);
}

.bulk-actions-summary {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 0.5rem;
    white-space: nowrap;
}

.bulk-actions-count {
    color: var(--accent-primary, #3b82f6);
    font-weight: 700;
}

.bulk-actions-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* -- Copyable ID pill -- */

.copyable-id {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    cursor: pointer;
    user-select: all;
    line-height: 1.4;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.copyable-id:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.copyable-id.copyable-id-copied {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    color: var(--green, #10b981);
}

.copyable-id-icon {
    opacity: 0.5;
    flex-shrink: 0;
}

.copyable-id:hover .copyable-id-icon {
    opacity: 1;
}

/* -- Bulk Tags Modal (custom mode-card picker) -- */

.bulk-tags-modal {
    max-width: 580px;
    width: 92%;
}

.bulk-tags-field-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.bulk-tags-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

@media (max-width: 520px) {
    .bulk-tags-mode-grid {
        grid-template-columns: 1fr;
    }
}

.bulk-tags-mode-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    font: inherit;
}

.bulk-tags-mode-card:hover {
    border-color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.bulk-tags-mode-card.selected {
    border-color: rgba(59, 130, 246, 0.7);
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4) inset;
}

.bulk-tags-mode-card.destructive.selected {
    border-color: rgba(239, 68, 68, 0.7);
    background: rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4) inset;
}

/* Custom radio (driven by the card's selected state, not a real input). */
.bulk-tags-mode-radio {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s ease;
}

.bulk-tags-mode-card.selected .bulk-tags-mode-radio {
    border-color: #3b82f6;
}

.bulk-tags-mode-card.destructive.selected .bulk-tags-mode-radio {
    border-color: #ef4444;
}

.bulk-tags-mode-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.12s ease;
}

.bulk-tags-mode-card.selected .bulk-tags-mode-radio-dot {
    background: #3b82f6;
}

.bulk-tags-mode-card.destructive.selected .bulk-tags-mode-radio-dot {
    background: #ef4444;
}

.bulk-tags-mode-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
    min-width: 0;
}

.bulk-tags-mode-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bulk-tags-mode-card.destructive .bulk-tags-mode-title {
    color: #ef4444;
}

.bulk-tags-mode-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.bulk-tags-chip-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--card-border);
}

.bulk-tags-chip-preview-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.25rem;
}

.tag-pill.tag-pill-remove {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.7);
}

.bulk-tags-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-size: 0.8rem;
    line-height: 1.4;
}

.bulk-tags-warning svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #ef4444;
}

/* App category badges -- color-coded pill that replaces plain text category labels
   anywhere apps are listed (/home brochure, /my-licenses, /apps admin). Each
   .cat-badge-{slug} maps to the slug produced by AppCategoryStyles.BadgeClass.
   Translucent backgrounds work on both light and dark surfaces so the same
   class is safe to drop into customer, brochure, or admin contexts. */
.cat-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

.cat-badge-default { background: rgba(148, 163, 184, 0.18); color: #64748b; }
.cat-badge-arcade { background: rgba(244, 114, 22, 0.18); color: #c2410c; }
.cat-badge-art { background: rgba(236, 72, 153, 0.18); color: #be185d; }
.cat-badge-lifeskills { background: rgba(16, 185, 129, 0.18); color: #047857; }
.cat-badge-logic { background: rgba(59, 130, 246, 0.18); color: #1d4ed8; }
.cat-badge-math { background: rgba(99, 102, 241, 0.18); color: #4338ca; }
.cat-badge-reading { background: rgba(234, 179, 8, 0.25); color: #a16207; }
.cat-badge-science { background: rgba(20, 184, 166, 0.18); color: #0f766e; }
.cat-badge-languages { background: rgba(168, 85, 247, 0.18); color: #7e22ce; }

/* Dark theme: use lighter foreground tints so the text still pops on dark surfaces. */
[data-theme="dark"] .cat-badge-default { color: #cbd5e1; }
[data-theme="dark"] .cat-badge-arcade { color: #fb923c; }
[data-theme="dark"] .cat-badge-art { color: #f472b6; }
[data-theme="dark"] .cat-badge-lifeskills { color: #34d399; }
[data-theme="dark"] .cat-badge-logic { color: #60a5fa; }
[data-theme="dark"] .cat-badge-math { color: #818cf8; }
[data-theme="dark"] .cat-badge-reading { color: #facc15; }
[data-theme="dark"] .cat-badge-science { color: #2dd4bf; }
[data-theme="dark"] .cat-badge-languages { color: #c084fc; }

/* Brochure surface uses the dark variant unconditionally since the brochure is
   always dark, regardless of the user's theme preference for the admin app. */
.brochure-shell .cat-badge-default { color: #cbd5e1; }
.brochure-shell .cat-badge-arcade { color: #fb923c; }
.brochure-shell .cat-badge-art { color: #f472b6; }
.brochure-shell .cat-badge-lifeskills { color: #34d399; }
.brochure-shell .cat-badge-logic { color: #60a5fa; }
.brochure-shell .cat-badge-math { color: #818cf8; }
.brochure-shell .cat-badge-reading { color: #facc15; }
.brochure-shell .cat-badge-science { color: #2dd4bf; }
.brochure-shell .cat-badge-languages { color: #c084fc; }

/* Pack icon picker -- grid of clickable thumbnails on the Packs admin modal so
   admins can choose which icon represents an expansion pack on the /home brochure. */
.pack-icon-option {
    appearance: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 88px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    font: inherit;
    color: var(--text-secondary);
}

.pack-icon-option:hover {
    border-color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.pack-icon-option.selected {
    border-color: rgba(59, 130, 246, 0.7);
    background: rgba(59, 130, 246, 0.12);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35) inset;
}

.pack-icon-option img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.pack-icon-option span {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* ── Row-selection circular checkbox ─────────────────────────────────────
   Replaces the harsh always-white native checkbox on multi-select tables
   (Devices first, but the class is generic for any future table that gains
   row-selection). The native input is fully restyled rather than visually
   hidden: that means it still receives focus, keyboard events, and
   `:checked` state natively without any extra Blazor plumbing.

   Design:
     - 18px circle with subtle theme-aware border in the unchecked state
     - Quest green fill + dark navy checkmark when checked
     - Hover brightens the border to Quest green so the affordance reads
     - Focus-visible adds a soft green halo for keyboard accessibility
     - Light + dark theme borders adapt via the existing --text-muted token

   The checkmark is rendered with a CSS pseudo-element (rotated borders) so
   it stays crisp at any pixel density without shipping an SVG asset.
   ─────────────────────────────────────────────────────────────────────── */
/* ── Site-wide checkbox style ──────────────────────────────────────────
   Default look for every <input type="checkbox"> across the app: a round
   18px chip that fills with Quest green and shows a checkmark when checked.
   The `.row-select-checkbox` class is the legacy name from the Devices page's
   multi-select; it's kept on the same selector so existing markup that
   references it still works, but new code does not need to add a class.

   Opt-out: if a specific surface needs a different look (e.g. a hidden
   checkbox driving a custom toggle UI), give it its own class and override
   appearance / size / border-radius locally. */
input[type="checkbox"],
.row-select-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

input[type="checkbox"]:hover,
.row-select-checkbox:hover {
    border-color: var(--quest-green);
}

input[type="checkbox"]:focus-visible,
.row-select-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(150, 201, 62, 0.3);
}

input[type="checkbox"]:checked,
.row-select-checkbox:checked {
    background: var(--quest-green);
    border-color: var(--quest-green);
}

input[type="checkbox"]:disabled,
.row-select-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inner checkmark -- two rotated borders form a tick. Centered visually inside
   the 18px circle. Color is the dark navy that matches our sidebar so we get
   strong contrast against the Quest green fill. */
input[type="checkbox"]:checked::after,
.row-select-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #1a1f2e;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Selected table row (driven by .row-selected on <tr>) */

.table tr.row-selected {
    background: rgba(59, 130, 246, 0.08);
}

.table tr.row-selected:hover {
    background: rgba(59, 130, 246, 0.12);
}

/* NetSuite Status badges (semantic colors for sales orders / provisioning) */

.badge-ns-pending-fulfillment {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.badge-ns-pending-approval {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.badge-ns-partially-fulfilled {
    background: rgba(14, 165, 233, 0.18);
    color: #38bdf8;
}

.badge-ns-billed,
.badge-ns-closed {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.badge-ns-cancelled {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.badge-ns-fulfilled {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

.badge-ns-unknown {
    background: rgba(100, 116, 139, 0.15);
    color: var(--text-muted);
}

/* -- Nav User Section -- */

.nav-user-section {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.nav-user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    /* Long org names ("Indianapolis Public Library (IN)") need to wrap onto
       a second line in the narrow sidebar instead of being clipped with an
       ellipsis. Tightened line-height so the wrapped lines feel like one
       label, not two separate items. */
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.nav-user-role {
    margin-top: 0.2rem;
}

.badge-role {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-admin {
    background: rgba(150, 201, 62, 0.2);
    color: #96C93E;
}

.badge-operator {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.badge-viewer {
    background: rgba(100, 116, 139, 0.18);
    color: #475569;
}
[data-theme="dark"] .badge-viewer {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.nav-logout {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

.nav-logout:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Dark Theme ── */

[data-theme="dark"] {
    --content-bg: #0f1219;
    --card-bg: #1a1f2e;
    --card-border: #2a3042;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
    --topbar-bg: #1a1f2e;
    --topbar-border: #2a3042;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --bs-body-color: #e2e8f0;
    --bs-body-bg: #0f1219;
    --bs-border-color: #2a3042;
    color: #e2e8f0;

    /* Dark mode sidebar -- preserves the prior look exactly. */
    --sidebar-bg: #1a1f2e;
    --sidebar-hover: #252b3d;
    --sidebar-active: #2a3148;
    --sidebar-text: #94a3b8;
    --sidebar-text-strong: #e2e8f0;
    --sidebar-text-muted: rgba(255, 255, 255, 0.5);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-topbar-bg: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-check-label { color: var(--text-secondary); }

[data-theme="dark"] .card-title { color: var(--text-secondary); }

[data-theme="dark"] .table thead th {
    background: #151b28;
    border-bottom-color: #2a3042;
}

[data-theme="dark"] .table tbody tr { border-bottom-color: #1e2536; }
[data-theme="dark"] .table tbody tr:hover { background-color: #1e2536; }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #151b28;
    color: #e2e8f0;
    border-color: #2a3042;
}

[data-theme="dark"] .form-control::placeholder { color: #4b5563; }

[data-theme="dark"] .btn-outline-secondary {
    color: #94a3b8;
    border-color: #2a3042;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #252b3d;
    border-color: #3b4459;
    color: #e2e8f0;
}

[data-theme="dark"] .badge-cmd {
    background: #1e2536;
    color: #94a3b8;
    border-color: #2a3042;
}

[data-theme="dark"] .badge-online { background: rgba(22, 163, 106, 0.15); color: #4ade80; }
[data-theme="dark"] .badge-offline { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
[data-theme="dark"] .badge-provisioning { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
[data-theme="dark"] .badge-unprovisioned { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .badge-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .badge-delivered { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
[data-theme="dark"] .badge-acknowledged { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
[data-theme="dark"] .badge-completed { background: rgba(22, 163, 106, 0.15); color: #4ade80; }
[data-theme="dark"] .badge-failed { background: rgba(220, 38, 38, 0.15); color: #f87171; }
[data-theme="dark"] .badge-cancelled { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
[data-theme="dark"] .badge-prod { background: rgba(22, 163, 106, 0.15); color: #4ade80; }
[data-theme="dark"] .badge-qc { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
[data-theme="dark"] .badge-dev { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
[data-theme="dark"] .badge-library { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
[data-theme="dark"] .badge-academy { background: rgba(16, 185, 129, 0.15); color: #34d399; }
[data-theme="dark"] .badge-channel-production { background: rgba(22, 163, 106, 0.15); color: #4ade80; }
[data-theme="dark"] .badge-channel-beta { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .badge-channel-dev { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
[data-theme="dark"] .badge-complete { background: rgba(22, 163, 106, 0.15); color: #4ade80; }
[data-theme="dark"] .badge-in-progress { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .badge-not-started { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }

[data-theme="dark"] .badge-qc-draft { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
[data-theme="dark"] .badge-qc-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .badge-qc-inqc { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
[data-theme="dark"] .badge-qc-approved { background: rgba(22, 163, 106, 0.15); color: #4ade80; }
[data-theme="dark"] .badge-qc-rejected { background: rgba(220, 38, 38, 0.15); color: #f87171; }

[data-theme="dark"] .alert-toast {
    background: rgba(22, 163, 106, 0.15);
    color: #4ade80;
    border-color: rgba(22, 163, 106, 0.25);
}

[data-theme="dark"] .storage-track { background: #2a3042; }

[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.65); }
[data-theme="dark"] .modal-panel { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); }

[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.6); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.8); }
[data-theme="dark"] * { scrollbar-color: rgba(71, 85, 105, 0.6) rgba(15, 23, 42, 0.5); scrollbar-width: thin; }



[data-theme="dark"] .tag-pill {
    background: #1e2536;
    border-color: #2a3042;
    color: #94a3b8;
}

[data-theme="dark"] #blazor-error-ui { background: #1e293b; color: #e2e8f0; }

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: #1e2536;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-hover-bg: #1e2536;
    --bs-table-active-bg: #1e2536;
    color: var(--text-primary);
}

[data-theme="dark"] a { color: #60a5fa; }
[data-theme="dark"] a:hover { color: #93bbfd; }

[data-theme="dark"] .btn-primary { background-color: #2563eb; border-color: #2563eb; }
[data-theme="dark"] .btn-primary:hover { background-color: #3b82f6; border-color: #3b82f6; }
[data-theme="dark"] .btn-danger { background-color: #dc2626; border-color: #dc2626; }

[data-theme="dark"] .btn-outline-primary { color: #60a5fa; border-color: #3b82f6; }
[data-theme="dark"] .btn-outline-primary:hover { background-color: rgba(59, 130, 246, 0.15); color: #93bbfd; border-color: #60a5fa; }
[data-theme="dark"] .btn-outline-danger { color: #f87171; border-color: #ef4444; }
[data-theme="dark"] .btn-outline-danger:hover { background-color: rgba(220, 38, 38, 0.2); color: #fca5a5; border-color: #f87171; }
[data-theme="dark"] .btn-outline-success { color: #4ade80; border-color: #22c55e; }
[data-theme="dark"] .btn-outline-success:hover { background-color: rgba(34, 197, 94, 0.15); color: #86efac; border-color: #4ade80; }
[data-theme="dark"] .btn-outline-warning { color: #fbbf24; border-color: #f59e0b; }
[data-theme="dark"] .btn-outline-warning:hover { background-color: rgba(245, 158, 11, 0.15); color: #fde68a; border-color: #fbbf24; }

[data-theme="dark"] .stat-card { border-top-color: var(--card-border); }
[data-theme="dark"] .stat-card-blue { border-top-color: #3b82f6; }
[data-theme="dark"] .stat-card-green { border-top-color: #22c55e; }
[data-theme="dark"] .stat-card-gray { border-top-color: #6b7280; }
[data-theme="dark"] .stat-card-amber { border-top-color: #f59e0b; }
[data-theme="dark"] .stat-card-cyan { border-top-color: #06b6d4; }

[data-theme="dark"] .back-link { color: #94a3b8; }
[data-theme="dark"] .back-link:hover { color: #60a5fa; }

[data-theme="dark"] .badge { --bs-badge-color: inherit; }

[data-theme="dark"] .form-check-input {
    background-color: #151b28;
    border-color: #3b4459;
}
[data-theme="dark"] .form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

[data-theme="dark"] .expandable-row:hover { background: rgba(255, 255, 255, 0.03); }

[data-theme="dark"] .section-header { border-bottom-color: var(--card-border); }

[data-theme="dark"] .page-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }

[data-theme="dark"] .device-header { background: var(--card-bg); border-color: var(--card-border); }

[data-theme="dark"] .info-card { background: var(--card-bg); border-color: var(--card-border); }
[data-theme="dark"] .info-card-title { color: var(--text-muted); border-bottom-color: var(--card-border); }

[data-theme="dark"] .info-grid dd { border-bottom-color: rgba(42, 48, 66, 0.6); }

[data-theme="dark"] .config-section-title { border-bottom-color: var(--card-border); color: var(--text-muted); }
[data-theme="dark"] .config-actions { border-top-color: var(--card-border); }

[data-theme="dark"] .activity-item:nth-child(even) { background: rgba(255, 255, 255, 0.02); }

[data-theme="dark"] .fleet-panel:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }

[data-theme="dark"] .attention-row-warn {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.25);
}

[data-theme="dark"] .attention-row-ok {
    background: rgba(22, 163, 106, 0.1);
    border-color: rgba(22, 163, 106, 0.25);
    color: #4ade80;
}

[data-theme="dark"] .row-failed { background: rgba(220, 38, 38, 0.06); }

.nav-bottom-actions {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.3rem 0;
}

.theme-toggle:hover { color: rgba(255, 255, 255, 0.8); }

/* ── Pinned Devices (Dashboard) ── */

.pinned-devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.pinned-device-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
    text-decoration: none;
    color: var(--text-primary);
}

.pinned-device-card:hover {
    border-color: var(--blue);
    text-decoration: none;
    color: var(--text-primary);
}

.pin-btn {
    appearance: none;
    background: none;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pin-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.pin-btn.pinned { color: var(--amber); border-color: var(--amber); }
.pin-btn.pinned:hover { color: var(--text-secondary); border-color: var(--card-border); }

/* ── Device Cards (mobile) ── */

.device-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.device-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
    text-decoration: none;
    color: var(--text-primary);
}

.device-card:hover {
    border-color: var(--blue);
    text-decoration: none;
    color: var(--text-primary);
}

.device-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.device-card-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.device-card-body {
    font-size: 0.8125rem;
    margin-bottom: 0.3rem;
}

.device-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

/* ── Dashboard Fleet Panels ── */

.fleet-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.fleet-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--card-border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fleet-panel:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.fleet-panel-prod { border-left-color: var(--green); }
.fleet-panel-qc { border-left-color: var(--blue); }
.fleet-panel-dev { border-left-color: #a855f7; }

.fleet-panel-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.fleet-panel-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.fleet-panel-count span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
}

.fleet-panel-bar {
    width: 100%;
    height: 4px;
    background: var(--card-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.fleet-panel-bar-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.fleet-panel-prod .fleet-panel-bar-fill { background: var(--green); }
.fleet-panel-qc .fleet-panel-bar-fill { background: var(--blue); }
.fleet-panel-dev .fleet-panel-bar-fill { background: #a855f7; }

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}

.quick-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.quick-stats-row {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 960px) {
    .quick-stats-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .quick-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.quick-stat {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
}

.quick-stat-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.quick-stat-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--blue);
    text-decoration: none;
}

.quick-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.quick-stat-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease;
}

.breakdown-row:hover:not(.breakdown-row-static) {
    background: rgba(59, 130, 246, 0.08);
    text-decoration: none;
}

.breakdown-row-static { cursor: default; }
.breakdown-row:last-child { border-bottom: none; }

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 420px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}

.activity-item:nth-child(even) { background: rgba(0, 0, 0, 0.015); }
.activity-item:last-child { border-bottom: none; }

.activity-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
    margin-left: auto;
}

@media (max-width: 768px) {
    .fleet-panels {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .fleet-panels::-webkit-scrollbar { display: none; }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .info-columns {
        grid-template-columns: 1fr;
    }

    .config-grid {
        grid-template-columns: 1fr;
    }

    .config-grid [style*="grid-column"] {
        grid-column: auto !important;
    }

    .device-header h1 { font-size: 1.1rem; }
}

/* ── Help Page Layout ── */

.help-layout {
    display: flex;
    gap: 1.5rem;
    min-height: calc(100vh - 120px);
}

.help-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border) transparent;
}

.help-sidebar::-webkit-scrollbar { width: 3px; }
.help-sidebar::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }

.help-search {
    width: 100%;
    padding: 0.45rem 0.7rem;
    font-size: 0.8125rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.help-search::placeholder { color: var(--text-muted); }
.help-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }

.help-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #80469d;
    padding: 0.6rem 0.5rem 0.25rem;
    margin-top: 0.25rem;
}

.help-category:first-of-type { padding-top: 0; margin-top: 0; }

.help-topic-link {
    display: block;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    line-height: 1.4;
    transition: background 0.1s, color 0.1s;
}

.help-topic-link:hover { background: rgba(37, 99, 235, 0.06); color: var(--text-primary); }
.help-topic-link.active { background: rgba(37, 99, 235, 0.1); color: var(--blue); font-weight: 500; }

.help-content {
    flex: 1;
    min-width: 0;
}

/* ── Help Topic Cards ── */

.help-topic {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
    scroll-margin-top: 0.5rem;
}

.help-topic-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--quest-green);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #80469d;
    text-shadow: 1px 1px 1px rgba(66, 66, 66, 0.5);
}

.help-section {
    margin-bottom: 1.25rem;
}

.help-section:last-child { margin-bottom: 0; }

.help-section h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.help-section h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.75rem 0 0.25rem;
}

.help-section p, .help-section li {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.help-section p { margin: 0 0 0.5rem; }
.help-section p:last-child { margin-bottom: 0; }

.help-section ol, .help-section ul { padding-left: 1.25rem; margin: 0.25rem 0 0.75rem; }

.help-section code {
    font-size: 0.8em;
    background: rgba(0,0,0,0.06);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    word-break: break-all;
}

/* ── Help Callout Boxes ── */

.help-tip, .help-warning, .help-note {
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.6;
    margin: 0.5rem 0 0.75rem;
}

.help-tip {
    background: rgba(37, 99, 235, 0.06);
    border-left: 3px solid var(--blue);
    color: var(--text-secondary);
}

.help-warning {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid var(--amber);
    color: var(--text-secondary);
}

.help-note {
    background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid var(--gray);
    color: var(--text-secondary);
}

.help-tip strong, .help-warning strong, .help-note strong { color: var(--text-primary); }

/* ── Help Comparison Table ── */

.help-comparison { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin: 0.5rem 0 0.75rem; }
.help-comparison th { text-align: left; padding: 0.45rem 0.75rem; font-weight: 600; color: var(--text-primary); border-bottom: 2px solid var(--card-border); white-space: nowrap; }
.help-comparison td { padding: 0.45rem 0.75rem; color: var(--text-secondary); border-bottom: 1px solid var(--card-border); vertical-align: top; }
.help-comparison tr td:first-child { font-weight: 500; color: var(--text-primary); min-width: 90px; }

/* ── Help Keyboard Shortcut ── */

.help-kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--card-border);
    white-space: nowrap;
}

/* ── Help Details/Summary ── */

.help-section details {
    margin: 0.5rem 0;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0;
}

.help-section details summary {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    list-style: none;
}

.help-section details summary::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid var(--text-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-right: 0.5rem;
    transition: transform 0.15s;
    vertical-align: 1px;
}

.help-section details[open] summary::before { transform: rotate(90deg); }

.help-section details summary::-webkit-details-marker { display: none; }
.help-section details summary:hover { color: var(--blue); }

.help-section details > :not(summary) {
    padding: 0 0.75rem 0.5rem;
}

/* ── Help Responsive ── */

@media (max-width: 900px) {
    .help-layout { flex-direction: column; gap: 1rem; }
    .help-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: var(--radius);
        padding: 0.75rem;
    }
    .help-topic { padding: 1rem; }
    .help-comparison { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
    .help-topic { padding: 0.75rem; }
    .help-topic-title { font-size: 0.95rem; }
    .help-section h3 { font-size: 0.875rem; }
    .help-section p, .help-section li { font-size: 0.8rem; }
    .help-tip, .help-warning, .help-note { padding: 0.5rem 0.65rem; font-size: 0.775rem; }
}

/* ── Mobile / Responsive ── */

@media (max-width: 768px) {
    /* horizontal scroll for data tables */
    .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }

    /* reduce content area padding */
    article.content { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* touch-friendly buttons and form controls */
    .btn { min-height: 40px; padding: 0.5rem 0.85rem; font-size: 0.875rem; }
    .btn-sm { min-height: 34px; padding: 0.35rem 0.65rem; }
    .form-control, .form-select { min-height: 40px; font-size: 0.875rem; max-width: 100% !important; }

    /* filter bars stack cleanly */
    .filter-bar .form-control,
    .filter-bar .form-select { flex: 1 1 100%; }
    .filter-bar .ms-auto { margin-left: 0 !important; }

    /* smaller page titles */
    .page-header h1 { font-size: 1.1rem; }

    /* modals nearly full-width */
    .modal-panel { width: 95%; max-height: 90vh; padding: 1rem; }

    /* tabs on mobile */
    .page-tab { padding: 0.5rem 1rem; font-size: 0.8125rem; }

    /* device header stacks on mobile */
    .device-header-top { flex-direction: column; gap: 0.5rem; }
    .device-header-controls { width: 100%; justify-content: flex-start; }

    /* mobile card views */
    .mobile-card-list { display: flex; flex-direction: column; gap: 0.5rem; }
    .mobile-card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: var(--radius);
        padding: 0.75rem;
    }
    .mobile-card-header { font-weight: 600; color: var(--text-primary); font-size: 0.875rem; margin-bottom: 0.25rem; }
    .mobile-card-meta { font-size: 0.75rem; color: var(--text-muted); font-family: 'SF Mono', 'Cascadia Code', monospace; }
    .mobile-card-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; padding: 0.15rem 0; }
    .mobile-card-label { color: var(--text-muted); font-size: 0.75rem; }
    .mobile-card-value { color: var(--text-primary); font-size: 0.8125rem; text-align: right; }
    .mobile-card-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
    .mobile-card-actions .btn { min-height: 32px; font-size: 0.75rem; padding: 0.25rem 0.5rem; flex: 1 1 auto; }
}

@media (max-width: 480px) {
    /* compact stat cards on phones */
    .stat-card .stat-value { font-size: 1.25rem; }
    .stat-card { padding: 0.6rem 0.75rem; }
}

/* ── Login Page ── */

.login-layout {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #0f0a1a;
}

#login-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

/* Brochure landing uses the same particle field as the login screen, fixed
   behind every section so it parallaxes with scroll for free. The shell sits
   at z-index 1 with a transparent background; semi-transparent section panels
   show the particles through under them. */
#brochure-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background: #0a0d14;   /* fallback for the brief moment before WebGL paints */
    pointer-events: none;
}

.login-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 1rem;
}

.login-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2.5rem 3rem;
    max-width: 420px;
    width: 100%;
    background: rgba(15, 10, 26, 0.65);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(150, 201, 62, 0.12);
    border-radius: 16px;
    box-shadow:
        0 0 80px rgba(91, 74, 158, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.login-logo {
    width: 280px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 12px rgba(150, 201, 62, 0.2));
}

.login-subtitle {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.8);
}

.login-welcome {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #e2e8f0;
}

.login-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.login-btn-primary {
    background: linear-gradient(135deg, #5B4A9E 0%, #7c6bbf 100%);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(91, 74, 158, 0.35);
}

.login-btn-primary:hover {
    background: linear-gradient(135deg, #6b5aae 0%, #8c7bcf 100%);
    box-shadow: 0 4px 20px rgba(91, 74, 158, 0.5);
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

.login-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 8px rgba(91, 74, 158, 0.3);
}

.login-footer {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: rgba(148, 163, 184, 0.4);
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .login-card {
        padding: 2rem 1.5rem;
    }

    .login-logo {
        width: 220px;
    }
}

/* ── Issues Page ── */

.issues-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--card-border);
}

.issues-tab {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.issues-tab:hover { color: var(--text-primary); }
.issues-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

.tab-count {
    background: var(--blue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    min-width: 18px;
    text-align: center;
}

.issues-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Multi-select dropdown (used by Issues filters) ── */
.multi-select {
    position: relative;
    display: inline-block;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    background: var(--card-bg);
    text-align: left;
    cursor: pointer;
    /* Override the native select chevron — we draw our own caret. */
    background-image: none;
    padding-right: 0.65rem;
}

.multi-select-trigger:hover { border-color: var(--text-secondary); }

.multi-select-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.multi-select-caret {
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.multi-select-open .multi-select-caret { transform: rotate(180deg); }

/* Backdrop sits below the menu but above the page so a click anywhere else
   closes the dropdown. Transparent -- only there to capture the click. */
.multi-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: transparent;
}

.multi-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-width: 320px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1501;
    padding: 0.35rem 0;
}

.multi-select-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.65rem 0.4rem;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 0.25rem;
}

.multi-select-mini-btn {
    background: transparent;
    border: none;
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.multi-select-mini-btn:hover { text-decoration: underline; }

.multi-select-options {
    display: flex;
    flex-direction: column;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    cursor: pointer;
    user-select: none;
}

.multi-select-option:hover { background: rgba(0,0,0,0.04); }
[data-theme="dark"] .multi-select-option:hover { background: rgba(255,255,255,0.06); }

/* Multi-select dropdown rows inherit the global checkbox look; this rule
   stays only to keep cursor:pointer on the input itself (the row already
   handles the click target). */
.multi-select-option input[type="checkbox"] {
    cursor: pointer;
}

.issues-date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.issues-date-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.issues-date-input {
    max-width: 155px;
}

.empty-state {
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

/* ── Priority Badges ── */

.badge-priority {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
}

.badge-priority-p0 { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-priority-p1 { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.badge-priority-p2 { background: #fefce8; color: #854d0e; border: 1px solid #fde047; }
.badge-priority-p3 { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.badge-priority-p4 { background: #f0f9ff; color: #075985; border: 1px solid #7dd3fc; }
.badge-priority-p5 { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }
.badge-priority-none { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }

/* ── Issue Status Badges ── */

.badge-issue-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
}

.badge-issue-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-issue-triage { background: #fef3c7; color: #92400e; }
.badge-issue-triage::before { background: #f59e0b; }
.badge-issue-todo { background: #fff7ed; color: #9a3412; }
.badge-issue-todo::before { background: #f97316; }
.badge-issue-in-progress { background: #dcfce7; color: #166534; }
.badge-issue-in-progress::before { background: #16a34a; }
.badge-issue-done { background: #ede9fe; color: #5b21b6; }
.badge-issue-done::before { background: #7c3aed; }
.badge-issue-none { background: #f3f4f6; color: #6b7280; }
.badge-issue-none::before { background: #d1d5db; }

/* ── Repo Badges (per-repo colors) ── */

.badge-repo {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.badge-repo-platform { background: rgba(91, 74, 158, 0.12); color: #7c3aed; border: 1px solid rgba(91, 74, 158, 0.25); }
.badge-repo-loader { background: rgba(14, 165, 233, 0.1); color: #0284c7; border: 1px solid rgba(14, 165, 233, 0.25); }
.badge-repo-launcher { background: rgba(150, 201, 62, 0.12); color: #4d7c0f; border: 1px solid rgba(150, 201, 62, 0.25); }
.badge-repo-default { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }

/* ── Sortable Table Headers ── */

.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: color 0.1s;
}

.sortable-th:hover {
    color: var(--blue) !important;
}

/* ── Issue Labels ── */

.issue-label {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 500;
    border-radius: 9999px;
    margin-right: 0.2rem;
    white-space: nowrap;
}

/* ── Issue Detail Page ── */

.issue-detail-header {
    margin-bottom: 1.25rem;
}

.issue-detail-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.35;
    color: var(--text-primary);
}

.issue-header-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.issue-header-number { color: var(--text-muted); font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; }
.issue-header-info { color: var(--text-secondary); }

.issue-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
}

.issue-state-badge-sm {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
}

.issue-state-open { background: #dcfce7; color: #166534; }
.issue-state-closed { background: #ede9fe; color: #5b21b6; }

/* ── Issue Detail Layout (2-column) ── */

.issue-detail-layout {
    display: flex;
    gap: 1.25rem;
}

.issue-detail-main {
    flex: 1;
    min-width: 0;
}

.issue-detail-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.issue-detail-sidebar .sidebar-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-bottom: none;
    padding: 0.65rem 0.85rem;
}

.issue-detail-sidebar .sidebar-section:first-child {
    border-radius: var(--radius) var(--radius) 0 0;
}

.issue-detail-sidebar .sidebar-section:last-child {
    border-bottom: 1px solid var(--card-border);
    border-radius: 0 0 var(--radius) var(--radius);
}

.sidebar-section-title {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.sidebar-value { font-size: 0.8125rem; color: var(--text-primary); line-height: 1.4; }
.sidebar-empty { font-size: 0.8rem; color: var(--text-muted); font-style: italic; }

/* ── Issue Body Card ── */

.issue-body-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 1.25rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.issue-body-card img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 0.5rem 0;
}

.issue-body-card h1 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 1rem 0 0.5rem; border-bottom: 1px solid var(--card-border); padding-bottom: 0.5rem; }
.issue-body-card h2 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 1rem 0 0.5rem; }
.issue-body-card h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin: 0.75rem 0 0.4rem; }
.issue-body-card p { margin: 0 0 0.65rem; }
.issue-body-card p:last-child { margin-bottom: 0; }
.issue-body-card pre { background: #1e293b; color: #e2e8f0; padding: 0.75rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.8rem; margin: 0.5rem 0; }
.issue-body-card code { font-size: 0.85em; background: rgba(0,0,0,0.06); padding: 0.1rem 0.3rem; border-radius: 3px; word-break: break-all; }
.issue-body-card pre code { background: none; padding: 0; word-break: normal; }
.issue-body-card ul, .issue-body-card ol { padding-left: 1.5rem; margin: 0 0 0.65rem; }
.issue-body-card li { margin-bottom: 0.2rem; }
.issue-body-card blockquote { border-left: 3px solid var(--card-border); padding-left: 0.75rem; color: var(--text-muted); margin: 0.5rem 0 0.65rem; }
.issue-body-card a { color: var(--blue); text-decoration: none; }
.issue-body-card a:hover { text-decoration: underline; }
.issue-body-card strong { color: var(--text-primary); }

/* ── Issue References (#123 links) ── */

a.issue-ref {
    color: var(--blue);
    font-weight: 500;
    text-decoration: none;
    font-family: 'SF Mono', SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
}

a.issue-ref:hover { text-decoration: underline; }

/* ── Comments Section ── */

.issue-comments-header {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 1.25rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comment-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--card-border);
    font-size: 0.8rem;
}

.comment-author { font-weight: 600; color: var(--text-primary); font-size: 0.8rem; }
.comment-date { color: var(--text-muted); font-size: 0.75rem; }

.comment-body.issue-body-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.85rem;
    margin: 0;
}

/* ── Timeline Section ── */

.timeline-list {
    padding-left: 0.5rem;
    border-left: 2px solid var(--card-border);
    margin-left: 0.25rem;
}

.timeline-event {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0 0.3rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    position: relative;
}

.timeline-dot {
    position: absolute;
    left: -6px;
    top: 0.55rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--card-border);
    border: 2px solid var(--card-bg, #fff);
}

.timeline-event-content { flex: 1; line-height: 1.5; }
.timeline-actor { font-weight: 600; color: var(--text-primary); }
.timeline-date { color: var(--text-muted); font-size: 0.75rem; }

/* ── Issue Detail Responsive ── */

@media (max-width: 900px) {
    .issue-detail-layout { flex-direction: column; }
    .issue-detail-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 0; }
    .issue-detail-sidebar .sidebar-section { flex: 1 1 calc(50% - 0px); min-width: 140px; }
    .issue-detail-sidebar .sidebar-section:first-child { border-radius: var(--radius) 0 0 0; }
    .issue-detail-sidebar .sidebar-section:last-child { border-radius: 0 0 var(--radius) 0; border-bottom: 1px solid var(--card-border); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Customer Portal Visual Identity (Phase 3a)

   Distinct, retail-friendlier palette for the customer-facing portal. Variables
   live alongside the admin tokens so existing components keep working; classes
   prefixed `customer-` / `brochure-` are owned by the customer experience.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    --customer-bg: #f6f7fb;
    --customer-card-bg: #ffffff;
    --customer-card-border: #e4e7ee;
    --customer-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    --customer-accent: #96C93E;
    --customer-accent-dim: rgba(150, 201, 62, 0.12);
    --customer-purple: #5B4A9E;
    --customer-purple-dim: rgba(91, 74, 158, 0.1);
    --customer-text: #1e293b;
    --customer-text-muted: #64748b;
    --customer-warn: #f59e0b;
    --customer-radius: 10px;
}

[data-theme="dark"] {
    --customer-bg: #0f1219;
    --customer-card-bg: #1a1f2e;
    --customer-card-border: #2a3042;
    --customer-card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.25);
    --customer-text: #e2e8f0;
    --customer-text-muted: #94a3b8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Brochure landing (launchpad-quest.com)

   Marketing-grade layout: anchored hero with concrete product visual, trust bar,
   feature grid, three-step "how it works", closing CTA band, multi-column footer.
   Color story leans on Quest green + Quest purple (duotone brand identity).
   ───────────────────────────────────────────────────────────────────────────── */

/* Body lockdown: BrochureLayout calls window.brochureMode.activate() on mount,
   which adds .brochure-active to <html> and <body>. These rules can't live in
   brochure.css because they target the html/body elements directly, which are
   outside the brochure-shell tree. Everything else brochure-related is now in
   wwwroot/css/brochure.css, scoped under `.brochure-shell`. */
html.brochure-active,
body.brochure-active {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    background: #0a0d14 !important;
    color: #f1f5f9 !important;
}
html.brochure-active {
    color-scheme: dark;
    scroll-behavior: smooth;
    /* Sticky nav is ~76px tall; pad the scroll target so anchored sections
       land below the nav instead of being hidden behind it. */
    scroll-padding-top: 96px;
}

/* Belt-and-suspenders: if a brochure-shell ever ends up nested inside MainLayout
   (e.g. <Landing /> rendered as a child component on a page that doesn't declare
   @layout BrochureLayout), neutralize the wrapper chrome so the dark canvas can
   still paint edge-to-edge. Targets ancestors of the shell, so it can't live in
   brochure.css either. */
body:has(.brochure-shell) main {
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
    flex: initial !important;
}
body:has(.brochure-shell) .content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* The brochure styles previously lived here. They have been moved to
   wwwroot/css/brochure.css (scoped under `.brochure-shell`) so the brochure
   can't be tripped up by global rules on `main`, `body`, etc., and so it
   carries its own explicit `box-sizing: border-box` reset. Customer-portal
   styles (.customer-*) follow below, unchanged. */

.customer-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--customer-card-bg);
    border: 1px solid var(--customer-card-border);
    border-radius: var(--customer-radius);
    box-shadow: var(--customer-card-shadow);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.customer-hero-logo-wrap {
    position: relative;
    flex-shrink: 0;
}
.customer-hero-logo {
    width: 64px; height: 64px; border-radius: 12px;
    object-fit: cover;
    background: var(--customer-accent-dim);
    display: block;
}
.customer-hero-logo-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.4rem;
    color: var(--customer-text);
    letter-spacing: 0.02em;
}
.customer-hero-logo-edit {
    position: absolute;
    bottom: -4px; right: -4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--customer-accent);
    color: #1a1f2e;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--customer-card-bg);
    transition: transform 0.15s, background 0.15s;
}
.customer-hero-logo-edit:hover,
.customer-hero-logo-edit:focus-visible {
    transform: scale(1.08);
    background: var(--customer-accent-hover, var(--customer-accent));
    outline: none;
}
.customer-hero-body { flex: 1 1 220px; min-width: 0; }
.customer-hero-eyebrow { color: var(--customer-text-muted); font-size: 0.8rem; }
.customer-hero-title { margin: 0.1rem 0 0; font-size: 1.5rem; font-weight: 700; }

/* Click-to-filter chip strip. Sits on the right side of the hero on wide
   viewports; wraps below the title on narrow viewports. Each chip is a
   compact button (NOT a card) so the hero stays a single visual band -- 
   no more redundant tile grid. */
.customer-hero-chips {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    margin-left: auto;
}
.customer-hero-chip {
    appearance: none;
    display: inline-flex; flex-direction: column; align-items: center;
    gap: 0.1rem;
    min-width: 72px;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--customer-card-border);
    border-radius: 10px;
    color: var(--customer-text);
    font: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.customer-hero-chip:hover,
.customer-hero-chip:focus-visible {
    transform: translateY(-1px);
    border-color: var(--customer-accent);
    outline: none;
}
.customer-hero-chip.is-active {
    border-color: var(--customer-accent);
    background: var(--customer-accent-dim);
}
.customer-hero-chip-value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.customer-hero-chip-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--customer-text-muted);
    font-weight: 600;
}
.customer-hero-chip-good .customer-hero-chip-value { color: var(--customer-accent); }
.customer-hero-chip-warn .customer-hero-chip-value { color: var(--customer-warn); }

@media (max-width: 640px) {
    .customer-hero { padding: 1rem; gap: 0.85rem; }
    .customer-hero-chips { width: 100%; margin-left: 0; }
    .customer-hero-chip { flex: 1 1 0; min-width: 0; }
}

/* Section heading row between the tiles strip and the device table.
   Gives the table a labeled context ("Devices N") that mirrors the old page-header
   on the standalone /my-devices view. */
.customer-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0.5rem 0 1rem;
}
.customer-section-head h2 {
    font-size: 1.15rem; font-weight: 700; margin: 0;
    color: var(--customer-text);
}

/* Group cell on /my-devices becomes a clickable button when the user has the
   ManageGroups capability. Reset native button chrome, expose a faint hover
   border so the cell reads as "click to edit", show the same pill bag inside. */
.customer-group-edit-trigger {
    appearance: none;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
    margin: -0.2rem -0.4rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.customer-group-edit-trigger:hover,
.customer-group-edit-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--customer-accent, #96C93E);
    outline: none;
}
.customer-group-edit-empty {
    font-size: 0.78rem;
    color: var(--customer-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Group picker modal -- vertical list of org groups with checkboxes, a small
   color swatch matching the group's color hint, and an optional description. */
.customer-group-picker-list {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-height: 320px; overflow-y: auto;
    padding: 0.25rem 0;
    margin: 0 0 0.75rem 0;
}
.customer-group-picker-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--customer-card-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.customer-group-picker-row:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--customer-accent, #96C93E);
}
.customer-group-picker-row input[type="checkbox"] { margin: 0; cursor: pointer; }
.customer-group-picker-swatch {
    width: 12px; height: 12px; border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
.customer-group-picker-name { font-weight: 600; font-size: 0.875rem; }
.customer-group-picker-desc {
    font-size: 0.78rem; color: var(--customer-text-muted);
    grid-column: 3 / 4;
    justify-self: end;
    max-width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Member-row variant for the "Manage members" modal on MyGroups -- shows a
   device's name + ID + other group memberships on a single row. Wider than
   the group-picker layout because it carries the secondary metadata. */
.customer-member-row {
    grid-template-columns: auto 1fr;
    align-items: flex-start;
}
.customer-member-row-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.customer-member-row-name {
    font-weight: 600; font-size: 0.875rem;
    color: var(--customer-text, #f1f5f9);
}
.customer-member-row-meta {
    font-size: 0.75rem; color: var(--customer-text-muted);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
.customer-member-row-other {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.customer-members-search { margin: 0 0 0.6rem; }
.customer-members-summary {
    font-size: 0.78rem;
    color: var(--customer-text-muted);
    margin-top: 0.25rem;
}
.customer-members-dirty { color: var(--customer-accent, #96C93E); font-weight: 600; }

/* "Low storage only" checkbox in the filter bar. Renders as a pill-shaped chip
   so it sits naturally next to the dropdowns. */
.customer-filter-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--customer-card-border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--customer-text);
    cursor: pointer;
    user-select: none;
}
.customer-filter-toggle input { margin: 0; }
.customer-filter-toggle:hover { border-color: var(--customer-accent); }

.customer-card {
    background: var(--customer-card-bg);
    border: 1px solid var(--customer-card-border);
    border-radius: var(--customer-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--customer-card-shadow);
    margin-bottom: 1.25rem;
}
.customer-card-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--customer-text-muted); margin: 0 0 1rem 0; font-weight: 700; }
.customer-card-head { margin: 0 -1.5rem 0.25rem; padding: 0 1.5rem 1rem; border-bottom: 1px solid var(--customer-card-border); }
.customer-card-head .customer-card-title { margin-bottom: 0.35rem; }
.customer-card-sub { margin: 0; color: var(--customer-text-muted); font-size: 0.85rem; line-height: 1.45; }

/* Toggle row -- title + description on the left, switch on the right.
   Used in Email Reports, Fleet-wide Defaults; reusable on any settings surface. */
.customer-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--customer-card-border);
    cursor: pointer;
}
.customer-toggle-row:last-child { border-bottom: none; padding-bottom: 0.25rem; }
.customer-toggle-row.is-disabled { cursor: not-allowed; }
.customer-toggle-row.is-disabled .customer-toggle-title,
.customer-toggle-row.is-disabled .customer-toggle-sub { opacity: 0.55; }

.customer-toggle-info { flex: 1; min-width: 0; }
.customer-toggle-title { font-weight: 600; font-size: 0.9rem; color: var(--customer-text); }
.customer-toggle-sub { font-size: 0.8rem; color: var(--customer-text-muted); margin-top: 0.15rem; line-height: 1.45; }
.customer-toggle-note { display: inline-block; margin-left: 0.4rem; font-style: italic; color: var(--customer-warn); }

/* iOS-style switch. Visually consistent with the customer accent green when checked. */
.customer-toggle {
    position: relative; display: inline-block; width: 40px; height: 22px;
    flex-shrink: 0;
}
.customer-toggle input { opacity: 0; width: 0; height: 0; }
.customer-toggle-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--customer-card-border);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.customer-toggle-slider::before {
    content: "";
    position: absolute; left: 3px; top: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}
.customer-toggle input:checked + .customer-toggle-slider { background: var(--customer-accent); }
.customer-toggle input:checked + .customer-toggle-slider::before { transform: translateX(18px); }
.customer-toggle input:focus-visible + .customer-toggle-slider { box-shadow: 0 0 0 3px rgba(150, 201, 62, 0.35); }
.customer-toggle input:disabled + .customer-toggle-slider { opacity: 0.5; cursor: not-allowed; }
[data-theme="dark"] .customer-toggle-slider { background: #475569; }
[data-theme="dark"] .customer-toggle input:checked + .customer-toggle-slider { background: var(--customer-accent); }
.customer-section-title { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.customer-page-lede { color: var(--customer-text-muted); font-size: 0.95rem; margin: 0 0 1.25rem 0; }

.customer-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.customer-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
@media (max-width: 900px) {
    .customer-grid-2 { grid-template-columns: 1fr; }
}

.customer-empty { text-align: center; padding: 2.5rem 1.5rem; }
.customer-empty h2 { font-size: 1.15rem; margin: 0 0 0.5rem 0; }
.customer-empty p { color: var(--customer-text-muted); max-width: 540px; margin: 0 auto 1rem; }
.customer-empty-line { color: var(--customer-text-muted); font-size: 0.85rem; margin: 0; }

.customer-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.75rem; }

.customer-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid transparent;
    font-weight: 600; font-size: 0.85rem; cursor: pointer; text-decoration: none;
    background: transparent; color: var(--customer-text);
}
.customer-btn-primary { background: var(--customer-accent); color: #1a1f2e !important; }
.customer-btn-primary:hover { filter: brightness(0.97); }
.customer-btn-secondary { background: var(--customer-card-bg); border-color: var(--customer-card-border); }
.customer-btn-secondary:hover { border-color: var(--customer-accent); }
.customer-btn-danger { background: transparent; color: var(--red); border-color: rgba(220, 38, 38, 0.25); }
.customer-btn-danger:hover { background: rgba(220, 38, 38, 0.06); }

/* Sign-out CTA in MySettings -- this replaces the old sidebar Sign-out link.
   Sized + spaced like a regular row action; separator above it makes it
   visually distinct from the identity fields. */
.customer-field-divider {
    border-top: 1px solid var(--customer-border, rgba(255, 255, 255, 0.08));
    padding-top: 1rem;
    margin-top: 1rem;
}
.customer-signout {
    display: inline-flex; align-items: center; gap: 0.5rem;
    text-decoration: none;
    width: max-content;
}
.customer-signout svg { flex-shrink: 0; }
.customer-btn-link { background: transparent; color: var(--customer-accent) !important; padding: 0.2rem 0.4rem; border: none; }
.customer-btn-link:hover { text-decoration: underline; }

.customer-list { list-style: none; padding: 0; margin: 0; }
.customer-list-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0; border-bottom: 1px solid var(--customer-card-border);
    font-size: 0.9rem;
}
.customer-list-row:last-child { border-bottom: none; }
.customer-list-name { font-weight: 500; }
.customer-list-meta { font-size: 0.8rem; color: var(--customer-text-muted); }

.customer-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.customer-table thead th {
    padding: 0.7rem 1rem; text-align: left; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem;
    color: var(--customer-text-muted); border-bottom: 1px solid var(--customer-card-border);
}
.customer-table tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--customer-card-border); vertical-align: middle; }
.customer-table tbody tr:hover { background: var(--customer-accent-dim); }

/* Side-quest summary pill row inside the My Orders detail modal. Aggregates
   side quests from both their standalone line items and their embedded CSVs
   on base pack lines so the user sees a single, deduplicated total per SKU
   above the (base-pack-only) line item table. */
.customer-side-quest-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    margin: 0 0 1rem;
    background: var(--customer-accent-dim);
    border: 1px solid var(--customer-card-border);
    border-left: 3px solid var(--customer-accent);
    border-radius: var(--customer-radius);
}
.customer-side-quest-summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--customer-text-muted);
}
.customer-side-quest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.customer-side-quest-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: var(--customer-card-bg);
    border: 1px solid var(--customer-card-border);
    font-size: 0.78rem;
    color: var(--customer-text);
}
.customer-side-quest-pill-sku { font-weight: 600; }
.customer-side-quest-pill-count { color: var(--customer-text-muted); font-weight: 600; }

/* Active URL-filter chip shown above the device table when a deep link
   from /my-licenses applied a pack/app filter. Reads like a single sentence
   with an inline Clear button so the user can always bail out. */
.customer-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem;
    margin: 0 0 0.75rem;
    background: var(--customer-accent-dim);
    border: 1px solid var(--customer-accent);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--customer-text);
}
.customer-active-filter-label {
    color: var(--customer-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.customer-active-filter-value { font-weight: 600; }
.customer-active-filter-clear {
    appearance: none;
    background: none;
    border: none;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--customer-text);
    font: inherit;
    font-size: 0.72rem;
    transition: background 0.12s ease;
}
.customer-active-filter-clear:hover,
.customer-active-filter-clear:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

/* Scrollable wrapper for the customer device table -- caps height to the
   viewport so long device lists scroll INSIDE the card instead of pushing
   the rest of the page off-screen. Pairs with .customer-table-sticky to
   keep column headers visible during scroll. */
.customer-table-scroll {
    padding: 0;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--customer-card-border) transparent;
}
.customer-table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.customer-table-scroll::-webkit-scrollbar-thumb {
    background: var(--customer-card-border);
    border-radius: 999px;
}
.customer-table-sticky thead th {
    position: sticky;
    top: 0;
    background: var(--customer-card-bg);
    z-index: 1;
}
@media (max-height: 720px) {
    /* On short viewports (laptops in split-screen, embedded views) reclaim
       a bit more height so the table still shows a meaningful number of rows. */
    .customer-table-scroll { max-height: calc(100vh - 240px); }
}

.customer-status-pill {
    display: inline-block; padding: 0.18rem 0.55rem;
    border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.customer-status-online { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.customer-status-offline { background: rgba(100, 116, 139, 0.12); color: #64748b; }
.customer-status-active { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.customer-status-invited { background: rgba(245, 158, 11, 0.15); color: #b45309; }

/* Subtle role pill -- used in dense surfaces (team table rows, sidebar user card). */
.customer-role-pill {
    display: inline-block; padding: 0.18rem 0.55rem;
    border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.customer-role-pill.customer-role-owner { background: rgba(91, 74, 158, 0.15); color: var(--customer-purple); }
.customer-role-pill.customer-role-admin { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.customer-role-pill.customer-role-manager { background: rgba(150, 201, 62, 0.18); color: #4d6b1d; }
.customer-role-pill.customer-role-viewer { background: rgba(100, 116, 139, 0.12); color: #475569; }
[data-theme="dark"] .customer-role-pill.customer-role-manager { color: #c2e08a; }
[data-theme="dark"] .customer-role-pill.customer-role-viewer { color: #cbd5e1; }

/* Prominent role badge -- visually paired with .badge-mode on the Organization card so the
   Settings page's Role chip has the same weight as the Org Type chip. */
.customer-role-badge {
    display: inline-block; padding: 0.22rem 0.65rem;
    border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.customer-role-badge.customer-role-owner   { background: var(--customer-purple); }
.customer-role-badge.customer-role-admin   { background: #2563eb; }
.customer-role-badge.customer-role-manager { background: var(--customer-accent); color: #1a1f2e; }
.customer-role-badge.customer-role-viewer  { background: #64748b; }

.customer-tag-pill {
    display: inline-block;
    padding: 0.12rem 0.45rem; margin-right: 0.3rem;
    border-radius: 999px; font-size: 0.7rem; font-weight: 500;
    background: var(--customer-accent-dim); color: var(--customer-text);
}
.customer-tag-overflow { background: var(--customer-card-border); color: var(--customer-text-muted); }

/* Compact avatar used in dense surfaces (team table rows, sidebar user card).
   Always circular, 32px square, with centered initials when no image is set. */
.customer-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: var(--customer-text);
    background: var(--customer-accent-dim);
}
.customer-avatar-placeholder { background: var(--customer-accent-dim); color: var(--customer-text); }

/* Hero-sized avatar used in MySettings. Matches the org logo placeholder so the
   Your Account card visually pairs with the Organization card. */
.customer-avatar-large {
    width: 96px; height: 96px;
    border-radius: 16px;
    object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700;
    background: var(--customer-accent-dim);
    color: var(--customer-text);
}

.customer-branding-row { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; }
.customer-logo-wrap { flex: 0 0 96px; }
.customer-logo-preview { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; background: var(--customer-accent-dim); }
.customer-logo-placeholder {
    width: 96px; height: 96px; border-radius: 16px;
    background: var(--customer-accent-dim);
    color: var(--customer-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700;
}
.customer-branding-actions { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.customer-help-text { font-size: 0.78rem; color: var(--customer-text-muted); margin: 0.2rem 0 0 0; }
.customer-field { padding: 0.5rem 0; border-top: 1px solid var(--customer-card-border); }
.customer-field:first-of-type { border-top: none; }
.customer-field label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--customer-text-muted); margin-bottom: 0.25rem; font-weight: 600; }
.customer-field-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.customer-checkbox-list { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem; border: 1px solid var(--customer-card-border); border-radius: var(--radius); }
.customer-checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; padding: 0.2rem 0; }

.customer-filter-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.customer-filter-search { max-width: 320px; }
.customer-filter-select { max-width: 200px; }

.customer-group-card { padding: 1.25rem; }
.customer-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.customer-group-head h3 { margin: 0; font-size: 1rem; }
.customer-group-count { font-size: 0.75rem; color: var(--customer-text-muted); }
.customer-group-desc { color: var(--customer-text-muted); font-size: 0.85rem; margin: 0 0 0.75rem 0; }
.customer-group-actions { display: flex; gap: 0.5rem; }

.customer-license-card {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

/* Horizontal layout variant -- used for Base Packs so the 50/100/Quest-mark
   icon sits compactly to the left of the copy (mirroring /home). Side quests
   keep the default vertical layout where the themed icon reads larger. */
.customer-license-card-horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}
.customer-license-card-horizontal .customer-license-thumb {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    margin-bottom: 0;
}
.customer-license-card-horizontal .customer-license-card-body {
    flex: 1;
    min-width: 0;
}

.customer-license-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Phones: horizontal cards stack back to vertical so the 96px icon column
   doesn't squeeze the copy. Matches the brochure phone behavior. */
@media (max-width: 480px) {
    .customer-license-card-horizontal {
        flex-direction: column;
    }
    .customer-license-card-horizontal .customer-license-thumb {
        width: 100%;
        height: 110px;
    }
}

/* ── License-card thumbnail variants ────────────────────────────────────
   Two distinct treatments share a single wrapper:
   - .customer-license-thumb-mark for the 50/100 apps brand PNGs and themed
     side-quest icons. Neutral inset background (no longer the loud green tint)
     so the icon carries the color and the card stays calm.
   - .customer-license-thumb-cover for traditional cover art. Renders edge
     to edge with cover sizing so the artwork bleeds to the card width. */
.customer-license-thumb {
    width: 100%;
    height: 110px;
    border-radius: var(--customer-radius);
    margin-bottom: 0.6rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.04);
}
[data-theme="dark"] .customer-license-thumb { background: rgba(255, 255, 255, 0.04); }
.customer-license-thumb-mark { padding: 0.5rem; }
.customer-license-mark-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
}
.customer-license-thumb-cover { padding: 0; }
.customer-license-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Actions row -- holds the "See the X apps" pill + "View on shop" link
   anchored to the bottom of the card body so cards with varying descriptions
   line up their CTAs at a common baseline. */
.customer-license-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding-top: 0.5rem;
}

.customer-license-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--customer-accent-dim);
    border: 1px solid var(--customer-accent);
    color: var(--customer-accent);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.customer-license-pill:hover,
.customer-license-pill:focus-visible {
    background: var(--customer-accent);
    color: #1a1f2e;
    transform: translateY(-1px);
    outline: none;
}

/* Clickable "N assigned" pill on the license card. Reuses the meta-row
   typography so the visual rhythm stays consistent with the other meta
   stats, but adds the accent color + arrow affordance to communicate
   "this is a click-through". */
.customer-license-assigned-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--customer-accent);
    text-decoration: none;
    font: inherit;
    border-radius: 4px;
    transition: color 0.15s ease;
}
.customer-license-assigned-link:hover,
.customer-license-assigned-link:focus-visible {
    color: var(--customer-text);
    outline: none;
    text-decoration: underline;
}
.customer-license-assigned-link strong { color: inherit; }

/* ── App tiles inside the "View apps" modal ─────────────────────────── */
.customer-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
    margin: 0;
}
.customer-app-tile {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 0.5rem 0.75rem;
    align-items: start;
    padding: 0.75rem 0.9rem;
    background: var(--customer-card-bg);
    border: 1px solid var(--customer-card-border);
    border-radius: var(--customer-radius);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    text-align: left;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}
button.customer-app-tile {
    appearance: none;
    width: 100%;
}
.customer-app-tile:hover {
    border-color: var(--customer-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}
.customer-app-tile:focus-visible {
    outline: 2px solid var(--customer-accent);
    outline-offset: 2px;
}
.customer-app-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--customer-accent-dim);
    grid-row: span 2;
}
.customer-app-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--customer-text-muted);
}
.customer-app-body {
    min-width: 0;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.customer-app-label {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.customer-app-meta {
    font-size: 0.75rem;
    color: var(--customer-text-muted);
    line-height: 1.35;
}
.customer-app-meta-soft { opacity: 0.85; }
.customer-app-assigned {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--customer-accent);
    text-align: left;
    cursor: pointer;
}
.customer-app-assigned:hover,
.customer-app-assigned:focus-visible {
    text-decoration: underline;
    outline: none;
}
.customer-app-assigned-none {
    color: var(--customer-text-muted);
    cursor: default;
}

/* App detail modal -- triggered by clicking an app tile. Mirrors the brochure
   /home modal so customers see the same polished detail view as the public site. */
.customer-app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: customer-app-modal-in 0.18s ease-out;
}

@keyframes customer-app-modal-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.customer-app-modal {
    background: var(--customer-card-bg);
    border: 1px solid var(--customer-card-border);
    border-radius: var(--customer-radius);
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    position: relative;
}

.customer-app-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    appearance: none;
    background: var(--customer-accent-dim);
    border: 1px solid var(--customer-card-border);
    color: var(--customer-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.customer-app-modal-close:hover {
    color: var(--customer-text);
    background: var(--customer-accent);
}

.customer-app-modal-head {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.customer-app-modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
    background: var(--customer-accent-dim);
}

.customer-app-modal-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--customer-text-muted);
}

.customer-app-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--customer-text);
}

.customer-app-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--customer-text-muted);
}

.customer-app-modal-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--customer-text);
    margin: 0;
    white-space: pre-line;
}

.customer-app-modal-desc-empty {
    color: var(--customer-text-muted);
    font-style: italic;
}

.customer-app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--customer-card-border);
}
.customer-license-sku { font-size: 0.7rem; color: var(--customer-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.customer-license-name { margin: 0.25rem 0 0.25rem 0; font-size: 1rem; }
.customer-license-type { color: var(--customer-text-muted); font-size: 0.78rem; margin-bottom: 0.5rem; }
.customer-license-meta { display: flex; gap: 1.5rem; padding-top: 0.5rem; border-top: 1px solid var(--customer-card-border); margin-top: 0.5rem; font-size: 0.85rem; }
.customer-license-side { max-width:320px; }

.customer-help-shell { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; }
.customer-help-sidebar { background: var(--customer-card-bg); border: 1px solid var(--customer-card-border); border-radius: var(--customer-radius); padding: 1rem; height: fit-content; position: sticky; top: 1rem; }
.customer-help-list { list-style: none; padding: 0; margin: 0.5rem 0 0 0; }
.customer-help-list li { padding: 0.4rem 0.65rem; cursor: pointer; border-radius: var(--radius); font-size: 0.875rem; }
.customer-help-list li:hover { background: var(--customer-accent-dim); }
.customer-help-list li.active { background: var(--customer-accent); color: #1a1f2e; font-weight: 600; }
.customer-help-content { background: var(--customer-card-bg); border: 1px solid var(--customer-card-border); border-radius: var(--customer-radius); padding: 1.5rem; }
.customer-help-content h2 { margin-top: 0; }
.customer-help-content p, .customer-help-content li { line-height: 1.6; }

@media (max-width: 900px) {
    .customer-help-shell { grid-template-columns: 1fr; }
    .customer-help-sidebar { position: relative; top: 0; }
}

.customer-h1-count { font-size: 0.875rem; font-weight: 400; color: var(--customer-text-muted); margin-left: 0.5rem; }

.customer-nav-logo {
    background: rgba(255, 255, 255, 0.08);
    padding: 4px;
    border-radius: 6px;
}
.customer-nav-user { display: flex; align-items: center; gap: 0.6rem; }

/* The whole nav-user card is now a clickable link to /my-settings. Reset the
   <a> defaults so it doesn't look like an underlined hyperlink, then add a
   subtle hover/focus affordance so it reads as an actionable target. */
.customer-nav-user-link {
    color: inherit;
    text-decoration: none;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease;
    width: 100%;
}
.customer-nav-user-link:hover,
.customer-nav-user-link:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: inherit; text-decoration: none;
}

/* Avatar must never shrink under the meta block's text width pressure;
   .customer-nav-user is a flex container that would otherwise squeeze the
   image into an oval when the org name + role pill takes more room than expected. */
.customer-nav-avatar {
    width: 32px; height: 32px;
    border-radius: 50%; object-fit: cover;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}
.customer-nav-avatar-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(150, 201, 62, 0.25); color: #fff;
    font-weight: 700; font-size: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Unified sidebar footer (customer + admin)

   Shared structure between NavMenu.razor and CustomerNavMenu.razor:
     .sidebar-footer       -> wrapper pinned to the bottom of the nav column
                              (toolbar on top, user card directly below)
     .sidebar-toolbar      -> horizontal icon row (theme, collapse, +bug for admin)
     .sidebar-tool-btn     -> a single 32px icon button inside the toolbar
     .sidebar-user-block   -> the user card region (signs the user into /settings)
     .sidebar-user-card    -> avatar + 3-line stack (primary / secondary / role)

   Sign-out has been removed from this region entirely; the user card links to the
   settings page where Sign out lives as a dedicated button.

   When the sidebar is collapsed the user-info text hides, the avatar centers,
   and the toolbar reflows to a vertical icon stack so the same controls remain
   reachable in the 56px-wide column.
   ───────────────────────────────────────────────────────────────────── */
.sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-user-block {
    padding: 0.25rem 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
}

.sidebar-user-card {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-user-card-link {
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-user-card-link:hover,
.sidebar-user-card-link:focus-visible {
    background: var(--sidebar-hover-bg);
    color: inherit;
    text-decoration: none;
    outline: none;
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}

.sidebar-user-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--quest-green), var(--quest-purple));
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.sidebar-user-info {
    flex: 1 1 auto;
    min-width: 0; /* allow flex children to shrink below their intrinsic width so ellipsis kicks in */
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* nudge the text so its baseline aligns with the center of the avatar
       (avatar is 34px, text block starts a hair higher to feel optically centered) */
    margin-top: -0.1rem;
}

.sidebar-user-primary {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--sidebar-text-strong);
    line-height: 1.25;
    /* Wrap long org names ("Indianapolis Public Library (IN)") onto a second line
       rather than truncating with ellipsis. Hard cap at 2 lines so the card height
       stays predictable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.sidebar-user-secondary {
    font-size: 0.7rem;
    color: var(--sidebar-text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role-row {
    margin-top: 0.3rem;
    line-height: 1;
}

/* .sidebar-signout has been removed from the markup -- sign-out now lives on
   the dedicated /settings (staff) and /my-settings (customer) pages. The
   legacy rule is intentionally absent so any stragglers will be hard to miss
   in code review. */

.sidebar-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: var(--sidebar-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
}

.sidebar-tool-btn:hover,
.sidebar-tool-btn:focus-visible {
    color: var(--sidebar-text-strong);
    background: var(--sidebar-hover-bg);
    outline: none;
}

/* Collapsed sidebar -- only avatar shows in the user card, toolbar reflows to a
   vertical icon stack so the controls keep working inside the 56px column. */
.page.sidebar-collapsed .sidebar-footer {
    align-items: center;
}

.page.sidebar-collapsed .sidebar-user-block {
    padding: 0.25rem 0.25rem 0.5rem;
    align-items: center;
}

.page.sidebar-collapsed .sidebar-user-card {
    justify-content: center;
    padding: 0.4rem 0;
    gap: 0;
}

.page.sidebar-collapsed .sidebar-user-info {
    display: none;
}

.page.sidebar-collapsed .sidebar-toolbar {
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Admin impersonation banner

   Renders at the top of every page while an admin is impersonating a
   customer. Read-only mode is purple (matches the impersonation /
   "elevated state" theme); Write Mode flips to amber to keep the admin
   aware that any click will mutate the customer's data.
   ───────────────────────────────────────────────────────────────────── */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1500;
    width: 100%;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border-bottom: 2px solid rgba(0, 0, 0, 0.18);
}

.impersonation-banner-readonly {
    background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 50%, #4c1d95 100%);
}

.impersonation-banner-write {
    background: linear-gradient(90deg, #92400e 0%, #d97706 50%, #92400e 100%);
}

.impersonation-banner-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    max-width: 100%;
    flex-wrap: wrap;
}

.impersonation-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.impersonation-banner-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 200px;
}
.impersonation-banner-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}
.impersonation-banner-text strong {
    font-size: 0.95rem;
    font-weight: 700;
}
.impersonation-banner-meta {
    font-size: 0.75rem;
    opacity: 0.85;
}

.impersonation-banner-mode {
    flex-shrink: 0;
}
.impersonation-mode-pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.impersonation-mode-read {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.impersonation-mode-write {
    background: #fde68a;
    color: #78350f;
    border: 1px solid #fbbf24;
}

.impersonation-banner-timer {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
    flex-shrink: 0;
}

.impersonation-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.impersonation-banner-actions .btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
}

/* ── Analytics dashboard (/analytics) ──────────────────────────────────── */

.range-pill {
    display: inline-flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 9999px;
    padding: 0.15rem;
    gap: 0.1rem;
}
.range-pill-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.range-pill-btn:hover { color: var(--text-primary); background: rgba(0,0,0,0.04); }
.range-pill-btn.active {
    background: var(--accent-primary, #3b82f6);
    color: #fff;
}

.analytics-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    padding: 0.6rem 0;
    margin: 0.25rem 0 1.25rem;
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    background: var(--content-bg, #f8fafc);
    z-index: 5;
}
.analytics-subnav a {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.2rem 0;
}
.analytics-subnav a:hover { color: var(--accent-primary, #3b82f6); }

.analytics-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.analytics-kpi-row .stat-card { gap: 0.15rem; }
.analytics-kpi-row .stat-foot {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    letter-spacing: 0.02em;
}

.analytics-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.analytics-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analytics-grid-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-card { display: flex; flex-direction: column; padding: 1rem 1.1rem; }
.analytics-card-wide { grid-column: span 2; }

@media (max-width: 1100px) {
    .analytics-grid-3col,
    .analytics-grid-2col { grid-template-columns: 1fr; }
    .analytics-card-wide { grid-column: span 1; }
}

.analytics-empty {
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
    padding: 2.5rem 1rem;
}

.analytics-skeleton-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-top: 1rem;
}
.analytics-skeleton {
    height: 220px;
    background: linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08), rgba(0,0,0,0.04));
    background-size: 400% 100%;
    border-radius: var(--radius);
    animation: analytics-shimmer 1.4s ease-in-out infinite;
}
@keyframes analytics-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.analytics-footer {
    margin: 1rem 0 2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cmd-success-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0.25rem;
}
.cmd-success-big {
    text-align: center;
    min-width: 110px;
}
.cmd-success-pct {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}
.cmd-success-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}
.cmd-success-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.cmd-success-list strong {
    color: var(--text-primary);
    margin-left: 0.35rem;
}
.cmd-success-list .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Quick Actions tiles inside the Operations Health card.
   Grid lays them out 2x2 (or 1x4 if there's room), avoiding the
   horizontal-overflow look the default .quick-stats-row has when its
   parent column is narrower than the full-page row it was designed for. */
.analytics-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}
.analytics-quick-actions .quick-stat {
    margin: 0;
    text-align: center;
}
.dot-green { background: var(--green); }
.dot-red   { background: var(--red); }
.dot-amber { background: var(--amber); }
.dot-blue  { background: var(--blue); }

/* ── Shipping badges + carrier links (sales-orders list + modal) ──────── */
.sales-orders-table {
    table-layout: fixed;
    width: 100%;
}
thead th {
    text-align: center;
    vertical-align: middle;
}
.sales-orders-table tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 0;
  }

.ship-pill {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    line-height: 1.4;
    vertical-align: middle;
}
.ship-pill-complete { background: #dcfce7; color: #166534; }
.ship-pill-partial  { background: #fef3c7; color: #92400e; }
.ship-pill-pending  { background: #f3f4f6; color: #4b5563; }
.ship-pill-backorder { background: #fee2e2; color: #991b1b; }

[data-theme="dark"] .ship-pill-complete { background: rgba(34,197,94,0.18); color: #4ade80; }
[data-theme="dark"] .ship-pill-partial  { background: rgba(245,158,11,0.18); color: #fbbf24; }
[data-theme="dark"] .ship-pill-pending  { background: rgba(148,163,184,0.18); color: #cbd5e1; }
[data-theme="dark"] .ship-pill-backorder { background: rgba(220,38,38,0.22); color: #fca5a5; }

.tracking-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    margin: 0.15rem 0.25rem 0.15rem 0;
    border: 1px solid var(--card-border);
    border-radius: 9999px;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-primary);
    background: var(--card-bg);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tracking-chip:hover {
    border-color: var(--blue);
    background: rgba(37, 99, 235, 0.06);
    color: var(--text-primary);
    text-decoration: none;
}
.tracking-chip-carrier {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
[data-theme="dark"] .tracking-chip:hover { background: rgba(96, 165, 250, 0.12); }

.shipping-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.shipping-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.65rem 1.25rem;
    margin-bottom: 0.5rem;
}
.shipping-panel-grid dt {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.15rem;
    font-weight: 600;
}
.shipping-panel-grid dd { margin: 0; font-size: 0.875rem; color: var(--text-primary); }

.backorder-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.825rem;
    color: #991b1b;
}
[data-theme="dark"] .backorder-banner {
    background: rgba(220,38,38,0.12);
    border-color: rgba(220,38,38,0.35);
    color: #fca5a5;
}

/* Subtle row tint for line items with a backorder flag. Pairs with the
   inline `B/O N` pill rendered next to the pack name. */
.table tbody tr.table-row-warning { background-color: rgba(254, 226, 226, 0.45); }
.table tbody tr.table-row-warning:hover { background-color: rgba(254, 226, 226, 0.7); }
[data-theme="dark"] .table tbody tr.table-row-warning { background-color: rgba(220,38,38,0.10); }
[data-theme="dark"] .table tbody tr.table-row-warning:hover { background-color: rgba(220,38,38,0.16); }

/* Dark-mode tweaks for analytics surfaces that use rgba black fallbacks */
[data-theme="dark"] .range-pill-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .analytics-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    background-size: 400% 100%;
}