/* =============================================================
   OpsResults brand tokens (platform-level identity).
   These are SEPARATE from --accent-purple / NW Cellular legacy
   variables so existing NW UI stays visually unchanged. Used by
   new platform surfaces: login screen, HQ portal, signup wizard.
   ============================================================= */
:root {
    --opsresults-indigo: #4f46e5;
    --opsresults-indigo-hover: #4338ca;
    --opsresults-indigo-light: #6366f1;
    --opsresults-emerald: #10b981;
    --opsresults-emerald-hover: #059669;
    --opsresults-slate-dark: #0f172a;
    --opsresults-slate-light: #f8fafc;

    /* v2 redesign tokens (additive) — used by the new component system
       in the V2 REDESIGN section at end of file. KEEP IN SYNC with the
       [data-theme="dark"] block below.
       - --indigo-bg: subtle background for active nav, hover, selection
       - --indigo-text: text-on-light-indigo color (slightly deeper)
       - --border-soft: hairline dividers inside cards and forms
       - --text-faint: caps section labels, captions, table headers
       - --surface-2: very subtle card alternates (table headers, etc.) */
    --indigo-bg: #eef2ff;
    --indigo-text: #4338ca;
    --border-soft: #f1f3f5;
    --text-faint: #9ca3af;
    --surface-2: #fcfcfd;

    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-input: #ffffff;
    --border-color: #e2e8f0;
    --border-dark: #cbd5e1;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --accent-critical: #dc2626;
    --accent-warning: #f59e0b;
    --accent-info: #3b82f6;
    --accent-success: #10b981;
    --accent-purple: #8b5cf6;
    --accent-teal: #14b8a6;
    --accent-purple-hover: #7c3aed;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --modal-backdrop: rgba(0, 0, 0, 0.5);
}

/* Org name shown next to the header logo for non-NW tenants. */
.header-org-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 0.65rem;
    letter-spacing: -0.01em;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --bg-input: #1e293b;
    --border-color: #334155;
    --border-dark: #475569;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent-critical: #ef4444;
    --accent-warning: #f59e0b;
    --accent-info: #60a5fa;
    --accent-success: #34d399;
    --accent-purple: #a78bfa;
    --accent-teal: #2dd4bf;
    --accent-purple-hover: #8b5cf6;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ============================================
   UTILITY CLASSES (inline style migration)
   ============================================ */

/* Layout */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-2col-mt { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.grid-4col { display: grid; grid-template-columns: 1fr 0.6fr 1fr 0.6fr; gap: 1rem; margin-top: 1rem; }
.flex-col { display: flex; flex-direction: column; gap: 0.5rem; }
.flex-row { display: flex; gap: 0.75rem; }
.flex-row-wrap { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; gap: 0.5rem; }
.flex-1 { flex: 1; }
.inline-flex-pill { display: inline-flex; background: var(--bg-secondary); border-radius: 8px; padding: 0.25rem; border: 1px solid var(--border-color); }

/* Spacing */
.mt-1 { margin-top: 1rem; }
.mt-1h { margin-top: 1.5rem; }
.mt-half { margin-top: 0.5rem; }
.mt-0 { margin-top: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-1h { margin-bottom: 1.5rem; }
.mb-half { margin-bottom: 0.5rem; }
.p-1 { padding: 1rem; }
.gap-1 { gap: 1rem; }
.gap-half { gap: 0.5rem; }
.full-width { width: 100%; }

/* Typography */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-sm { font-size: 0.875rem; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-primary-color { color: var(--text-primary); }
.text-critical { color: var(--accent-critical); }
.text-warning { color: var(--accent-warning); }
.text-success { color: var(--accent-success); }
.text-purple { color: var(--accent-purple); }
.font-semibold { font-weight: 600; }
.leading-relaxed { line-height: 1.6; }

/* Admin panel — override modal-content padding so we control spacing */
#adminModal .modal-content.modal-xl-flex {
    padding: 0;
}
#adminModal .modal-body.modal-body-scroll-flex {
    padding: 1.5rem;
    margin-bottom: 0;
}

/* Admin panel header + tabs */
.admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.admin-panel-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.admin-panel-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.15s;
}
.admin-panel-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.admin-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    padding: 0 1.5rem;
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.admin-tab {
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.admin-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.admin-tab.active {
    color: var(--accent-purple);
    border-bottom-color: var(--accent-purple);
}
.admin-tab-icon { font-size: 1rem; }

.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

/* Admin panel sections */
.admin-section {
    background: var(--bg-hover);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--border-color);
}
.admin-section.border-purple { border-color: var(--accent-purple); }
.admin-section.border-success { border-color: rgba(16, 185, 129, 0.5); }
.admin-section.border-blue { border-color: rgba(59, 130, 246, 0.5); }
.admin-section.border-info { border-color: var(--accent-info); }
.admin-section.border-critical { border-color: var(--accent-critical); }
.admin-section.bg-critical { background: rgba(220, 38, 38, 0.05); }

.admin-section-title {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
}

.admin-section-desc {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.admin-subsection {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.admin-subsection-title {
    font-weight: 600;
    color: var(--accent-purple);
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
}

.admin-subsection-title.mb-half { margin-bottom: 0.5rem; }

/* Admin form elements */
.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.admin-form-grid .admin-form-field:nth-child(3) {
    grid-column: 1 / -1;
}
.admin-form-field { display: flex; flex-direction: column; }

.admin-input {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.admin-input.full-width { width: 100%; }

.admin-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    display: block;
    margin-bottom: 0.25rem;
}

.admin-checkbox-label {
    color: var(--text-primary);
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-help-text {
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

/* Admin user list (scrollable) */
.admin-user-list {
    max-height: 450px;
    overflow-y: auto;
}

/* User search */
.admin-user-search-wrap {
    position: relative;
    margin-bottom: 0.75rem;
}
.admin-user-search-wrap .search-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    pointer-events: none;
}
.admin-user-search {
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
}
.admin-user-search:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.admin-user-search::placeholder { color: var(--text-secondary); opacity: 0.6; }

/* Edit mode banner */
.admin-edit-banner {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--accent-warning);
    font-size: 0.8125rem;
    font-weight: 600;
}
.admin-edit-banner.visible { display: flex; }
.admin-edit-banner .edit-banner-text { flex: 1; }
.admin-edit-banner .edit-banner-cancel {
    background: none;
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: var(--accent-warning);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.admin-edit-banner .edit-banner-cancel:hover {
    background: rgba(245, 158, 11, 0.15);
}

/* User row styles (replaces inline styles) */
.user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid transparent;
    gap: 0.5rem;
    transition: background 0.15s, border-color 0.15s;
}
.user-row:hover { background: var(--bg-hover); }
.user-row:last-child { border-bottom: none; }
.user-row.role-admin { border-left-color: var(--accent-critical); }
.user-row.role-dm { border-left-color: var(--accent-info); }
.user-row.role-director { border-left-color: #06b6d4; }
.user-row.role-owner { border-left-color: var(--accent-critical); }
.user-row.role-manager { border-left-color: var(--accent-warning); }
.user-row.role-viewer { border-left-color: var(--accent-success); }

.user-row-info { flex: 1; min-width: 0; }
.user-row-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.user-row-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.8125rem;
}
.user-role-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}
.user-role-badge.role-admin { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.user-role-badge.role-dm { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.user-role-badge.role-manager { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.user-role-badge.role-viewer { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.user-role-badge.role-rep { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.user-role-badge.role-director { background: rgba(6, 182, 212, 0.15); color: #0891b2; }
.user-role-badge.role-owner { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }

.user-login-status {
    font-size: 0.625rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.user-login-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.user-login-status.login-recent::before { background: var(--accent-success); }
.user-login-status.login-stale::before { background: var(--accent-warning); }
.user-login-status.login-never::before { background: #6b7280; }
.user-login-status.login-recent { color: var(--accent-success); }
.user-login-status.login-stale { color: var(--accent-warning); }
.user-login-status.login-never { color: #6b7280; }

.user-row-email {
    color: var(--text-secondary);
    font-size: 0.6875rem;
    margin-top: 0.125rem;
}
.user-row-access {
    color: #a78bfa;
    font-size: 0.6875rem;
    margin-top: 0.125rem;
}
.user-actions {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}
.user-action-btn {
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.user-action-btn:hover { opacity: 0.8; }
.user-action-btn.btn-edit { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.user-action-btn.btn-delete { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* User activity badge */
.user-activity-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.0625rem 0.375rem;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    min-width: 1.25rem;
    text-align: center;
}
.user-activity-badge.user-activity-zero {
    background: rgba(107, 114, 128, 0.1);
    color: #9ca3af;
}

/* User Engagement section */
.ue-title { color: var(--accent-info, #06b6d4); }
.ue-stats-grid .admin-stat-card {
    padding: 0.75rem 0.5rem;
}
.ue-stats-grid .admin-stat-value {
    font-size: 1.5rem;
}
.stat-accent-green { border-left: 3px solid var(--accent-success); }
.stat-accent-blue { border-left: 3px solid #3b82f6; }
.stat-accent-purple { border-left: 3px solid #a78bfa; }
.stat-accent-orange { border-left: 3px solid #ff8c00; }
.border-info { border-left: 3px solid var(--accent-info, #06b6d4); }

/* User Engagement clickable stat cards */
.ue-stat-card { position: relative; }
.ue-stat-card:hover { opacity: 0.85; }
.ue-user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 100;
    margin-top: 4px;
}
.ue-user-dropdown.open { display: block; }
.ue-dropdown-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.ue-dropdown-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}
.ue-dropdown-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
}
.ue-dropdown-row:last-child { border-bottom: none; }
.ue-dropdown-row:hover { background: var(--bg-hover, #f8fafc); }
.ue-dropdown-name {
    flex: 1;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ue-dropdown-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Users header with sort toggle */
.ue-users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.ue-users-header .admin-section-title {
    margin: 0;
}
.ue-sort-toggle {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.ue-sort-toggle:hover {
    border-color: #a78bfa;
    color: #a78bfa;
}

/* Inactive Manager/DM alert */
.inactive-alert-section {
    border-left: 3px solid var(--accent-critical);
    background: rgba(239, 68, 68, 0.04);
}
.inactive-alert-title { color: var(--accent-critical); }
.inactive-alert-desc {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin: 0 0 0.5rem 0;
}
.inactive-alert-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(220, 38, 38, 0.1);
    flex-wrap: wrap;
}
.inactive-alert-row:last-child { border-bottom: none; }
.inactive-alert-scope {
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex: 1;
    min-width: 0;
}

/* Admin stats grid */
.admin-stats-row-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}
.admin-stats-row-label:first-of-type { margin-top: 0; }
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.admin-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
.admin-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent-purple);
    line-height: 1.1;
}
.admin-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Stat card accent colors */
.stat-accent-green .admin-stat-value { color: var(--accent-success); }
.stat-accent-blue .admin-stat-value { color: var(--accent-info); }
.stat-accent-red .admin-stat-value { color: var(--accent-critical); }
.stat-accent-purple .admin-stat-value { color: var(--accent-purple); }
.stat-accent-amber .admin-stat-value { color: var(--accent-warning); }
.stat-accent-magenta .admin-stat-value { color: #e91e8c; }
.stat-accent-orange .admin-stat-value { color: #ff8c00; }

/* Clickable stat cards (Row 1) */
.admin-stat-clickable {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.admin-stat-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.admin-stat-clickable:active { transform: translateY(0); }

/* Stats refresh indicator */
.admin-stats-updated {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-align: right;
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* Store Directory */
.admin-store-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.admin-store-filter {
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.admin-store-filter:hover { border-color: var(--accent-purple); color: var(--text-primary); }
.admin-store-filter.active {
    background: var(--accent-purple);
    color: white;
    border-color: var(--accent-purple);
}
.admin-store-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.admin-store-card {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: start;
    transition: border-color 0.15s;
}
.admin-store-card:hover { border-color: var(--accent-purple); }
.admin-store-main { min-width: 0; }
.admin-store-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}
.admin-store-codes {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.admin-store-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.admin-store-details a {
    color: var(--text-secondary);
    text-decoration: none;
}
.admin-store-details a:hover { color: var(--accent-purple); }
.admin-store-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    min-width: 130px;
}
.admin-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem;
    border-radius: 12px;
    white-space: nowrap;
}
.admin-store-badge.badge-market {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-purple);
}
.admin-store-badge.badge-staffing {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
}
.admin-store-badge.badge-staffing.understaffed {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-critical);
}
.admin-store-badge.badge-dm {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}
.admin-store-badge.badge-mgr {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}
.admin-store-badge.badge-mgr.no-mgr {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-critical);
}
.admin-store-market-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    padding: 0.5rem 0 0.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-top: 0.5rem;
}
.admin-store-market-header:first-child { margin-top: 0; }

@media (max-width: 768px) {
    .admin-store-card {
        grid-template-columns: 1fr;
    }
    .admin-store-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        min-width: 0;
    }
}

/* Admin tools grid (2-col cards) */
.admin-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.admin-tool-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    transition: border-color 0.15s;
}
.admin-tool-card:hover { border-color: var(--accent-purple); }
.admin-tool-card.drag-over { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.25); background: rgba(34,197,94,0.05); }
.admin-tool-icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}
.admin-tool-icon.bg-success-subtle { background: rgba(16, 185, 129, 0.15); }
.admin-tool-icon.bg-blue-subtle { background: rgba(59, 130, 246, 0.15); }
.admin-tool-icon.bg-purple-subtle { background: rgba(139, 92, 246, 0.15); }
.admin-tool-icon.bg-teal-subtle { background: rgba(20, 184, 166, 0.15); }
.admin-tool-icon.bg-info-subtle { background: rgba(59, 130, 246, 0.15); }
.admin-tool-icon.bg-danger-subtle { background: rgba(239, 68, 68, 0.15); }
.admin-tool-info { flex: 1; min-width: 0; }
.admin-tool-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}
.admin-tool-desc {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.admin-tool-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }

/* Mobile responsive for admin panel */
@media (max-width: 768px) {
    #adminModal .modal-body.modal-body-scroll-flex { padding: 0.875rem; }
    .admin-panel-header { padding: 1rem; }
    .admin-panel-title { font-size: 1.1rem; }
    .admin-tabs { padding: 0 0.75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-tab { padding: 0.75rem 0.875rem; font-size: 0.8125rem; white-space: nowrap; }
    .admin-section { padding: 0.875rem; }
    .admin-subsection { padding: 0.875rem; }
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-form-grid .admin-form-field:nth-child(3) { grid-column: auto; }
    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .admin-stat-card { padding: 0.75rem 0.5rem; }
    .admin-stat-value { font-size: 1.375rem; }
    .admin-stats-row-label { font-size: 0.625rem; margin: 0.75rem 0 0.375rem; }
    .admin-tools-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .admin-tool-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 1rem;
        gap: 0.5rem;
    }
    .admin-tool-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        margin: 0 auto;
    }
    .admin-tool-info { text-align: center; }
    .admin-tool-card .modal-btn,
    .admin-tool-card .admin-tool-action-row { width: 100%; justify-content: center; }
    .admin-tool-action-row { flex-wrap: wrap; }
    .admin-store-card { padding: 0.875rem; }
    .admin-store-filters { gap: 0.375rem; }
    .admin-store-filter { padding: 0.3rem 0.625rem; font-size: 0.75rem; }
}

/* Button color variants */
.modal-btn.btn-purple, .btn-purple { background: var(--accent-purple); color: white; border-color: var(--accent-purple); }
.modal-btn.btn-success, .btn-success { background: var(--accent-success); color: white; border-color: var(--accent-success); }
.modal-btn.btn-info, .btn-info { background: var(--accent-info); color: white; border-color: var(--accent-info); }
.modal-btn.btn-blue, .btn-blue { background: var(--accent-info); color: white; border-color: var(--accent-info); }
.modal-btn.btn-teal, .btn-teal { background: #14b8a6; color: white; border-color: #14b8a6; }
.modal-btn.btn-teal:hover, .btn-teal:hover { background: #0d9488; border-color: #0d9488; }
.modal-btn.btn-danger, .btn-danger { background: #ef4444; color: white; border-color: #ef4444; }
.modal-btn.btn-danger:hover, .btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.admin-select-sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}
.btn-purple.mt-quarter { margin-top: 0.25rem; }

/* Modal variants */
.modal-content.modal-sm { max-width: 550px; }
.modal-content.modal-md { max-width: 600px; }
.modal-content.modal-lg { max-width: 700px; max-height: 80vh; }
.modal-content.modal-xl { max-width: 900px; }
.modal-content.modal-xl-flex { max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; }
.modal-body-scroll { overflow-y: auto; max-height: 65vh; }
.modal-body-scroll-lg { max-height: 500px; overflow-y: auto; }
.modal-body-scroll-flex { overflow-y: auto; flex: 1; }
.modal-header-flex { display: flex; justify-content: space-between; align-items: center; }

/* Close button */
.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
}

/* Misc component patterns */
.icon-3x { font-size: 3rem; margin-bottom: 1rem; }
.empty-state-box { padding: 3rem; text-align: center; color: var(--text-secondary); }
.tab-container {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

.tab-inner {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
}

/* Form helpers */
.input-full { width: 100%; margin-bottom: 1rem; }
.input-full-sm { width: 100%; margin-bottom: 0.5rem; }
.readonly-dim { opacity: 0.6; }
.hint-text { font-size: 0.75rem; color: var(--text-muted); margin: 0; }
.hint-text-mb { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 1rem 0; }
.hint-text-mt { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem; }
.separation-section {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.last-updated-text { margin-top: 1rem; color: var(--text-secondary); font-size: 0.8125rem; }
.btn-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.btn-actions-wrap { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.btn-min { min-width: 120px; }
.archive-select {
    padding: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
}
.status-text { margin-top: 0.75rem; color: var(--text-secondary); font-size: 0.875rem; }
.result-count { color: var(--text-secondary); font-size: 0.875rem; }

/* Scan status view */
.scan-view-header { margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center; }
.scan-view-title { color: #fed7aa; font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }

/* Control group sizing */
.control-search { flex: 2; min-width: 200px; }
.control-default { flex: 1; min-width: 150px; }

/* Login Screen */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card {
    background: var(--bg-card);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.login-logo {
    max-width: 280px;
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.clickable {
    cursor: pointer;
}

.login-card p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.google-btn {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    transition: all 0.2s ease;
    width: 100%;
}

.google-btn:hover {
    border-color: var(--accent-purple);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.google-icon {
    width: 24px;
    height: 24px;
}

/* ---- iOS Safari login nudge ---- */
.ios-login-nudge {
    display: none;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem 0.85rem;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 10px;
    text-align: left;
    font-size: 0.82rem;
    color: var(--text-primary);
    line-height: 1.45;
}
.ios-login-nudge-icon {
    font-size: 1.1rem;
    flex: 0 0 auto;
    line-height: 1.4;
}
.ios-login-nudge-body {
    flex: 1 1 auto;
    min-width: 0;
}
.ios-login-nudge-body strong {
    color: var(--accent-purple);
}
.ios-login-nudge-link {
    display: block;
    margin-top: 0.25rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-purple);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ios-login-nudge-link:hover { color: var(--accent-purple-dark, var(--accent-purple)); }

/* =============================================================
   Password sign-in (Batch e-prereq #2) — equal-billing with Google
   on the login screen. Visual weight matches Google button so
   neither option feels secondary.
   ============================================================= */
.pw-signin-section { margin-top: 1.1rem; }
.pw-signin-divider {
    position: relative;
    text-align: center;
    margin: 0.5rem 0 0.85rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pw-signin-divider::before,
.pw-signin-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 26%;
    height: 1px;
    background: var(--border-color);
}
.pw-signin-divider::before { left: 0; }
.pw-signin-divider::after { right: 0; }
.pw-signin-divider span {
    background: var(--bg-card);
    padding: 0 0.6rem;
    position: relative;
    z-index: 1;
}
.pw-signin-form { display: flex; flex-direction: column; gap: 0.55rem; text-align: left; }
.pw-signin-input {
    width: 100%;
    padding: 0.68rem 0.78rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.92rem;
    box-sizing: border-box;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.pw-signin-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.pw-signin-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.pw-signin-btn:hover:not(:disabled) { filter: brightness(1.08); }
.pw-signin-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pw-signin-status {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
}
.pw-signin-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.pw-signin-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.pw-signin-status.info {
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.pw-signin-forgot {
    align-self: center;
    margin-top: 0.15rem;
    padding: 0.35rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: not-allowed;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    opacity: 0.7;
}
.pw-signin-forgot:disabled { cursor: not-allowed; }
[data-theme="dark"] .pw-signin-divider span { background: var(--bg-card); }
[data-theme="dark"] .pw-signin-status.success { color: #4ade80; }
[data-theme="dark"] .pw-signin-status.error { color: #f87171; }

/* =============================================================
   Header "⚙️ Account" button (Batch e-prereq #2) — visible to
   all signed-in roles. Sits just before Sign Out.
   ============================================================= */
.account-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.account-btn:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    background: rgba(139, 92, 246, 0.06);
}
.account-btn-icon { font-size: 1rem; line-height: 1; }
.account-btn-text { font-weight: 500; }
@media (max-width: 768px) {
    .account-btn-text { display: none; }
    .account-btn { padding: 0.4rem 0.5rem; }
}

/* =============================================================
   Account Settings modal (Batch e-prereq #2) — sign-in methods
   + link-password flow. Phase 5/6 will expand this.
   ============================================================= */
.account-settings-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.account-settings-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--text-primary);
}
.account-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.account-settings-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}
.account-settings-close {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.account-settings-close:hover { background: var(--bg-primary); color: var(--text-primary); }
.account-settings-body { padding: 1.1rem 1.25rem; }
.account-settings-section { margin-bottom: 1.4rem; }
.account-settings-section:last-child { margin-bottom: 0; }
.account-settings-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0 0 0.6rem;
}
.account-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.7rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
}
.account-info-label {
    color: var(--text-secondary);
    font-weight: 500;
}
.account-info-value {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
    text-align: right;
}
.account-signin-methods { display: flex; flex-direction: column; gap: 0.45rem; }
.account-method-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.account-method-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-purple);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.account-method-text { flex: 1 1 auto; min-width: 0; }
.account-method-name { font-weight: 600; font-size: 0.9rem; }
.account-method-sub { font-size: 0.75rem; color: var(--text-secondary); }
.account-method-badge {
    flex: 0 0 auto;
    color: #16a34a;
    font-weight: 700;
    font-size: 1rem;
}
.account-method-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    background: var(--bg-primary);
    border-radius: 6px;
}
.account-method-hint {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 0.55rem 0.7rem;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 6px;
    line-height: 1.45;
}
.account-add-password-trigger {
    margin-top: 0.55rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.account-add-password-trigger:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    background: rgba(139, 92, 246, 0.05);
}
.account-add-password-panel {
    margin-top: 0.65rem;
    padding: 0.85rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.account-add-password-help {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.account-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.88rem;
    box-sizing: border-box;
    background: var(--bg-card);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.account-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.account-save-btn {
    padding: 0.6rem 1rem;
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0.45rem;
}
.account-save-btn:hover:not(:disabled) { filter: brightness(1.08); }
.account-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.account-cancel-btn {
    padding: 0.6rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    cursor: pointer;
}
.account-cancel-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.account-status {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
}
.account-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.account-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.account-status.info {
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(59, 130, 246, 0.2);
}
[data-theme="dark"] .account-status.success { color: #4ade80; }
[data-theme="dark"] .account-status.error { color: #f87171; }

/* =============================================================
   Admin Panel: Initial Password field (Batch e prereq #3) — sits
   between the role-specific fields and the Save button on the
   Add User form.
   ============================================================= */
.admin-password-field {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--border-color);
}
.admin-label-optional {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-left: 0.35rem;
}
.admin-password-help {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* =============================================================
   Show-password-once modal (Batch e prereq #3) — temporarily
   surfaces a brand-new user's password to the admin so they can
   copy and share it. Closes back to the Add User form.
   ============================================================= */
.new-member-pw-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.new-member-pw-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}
.new-member-pw-header {
    padding: 1rem 1.25rem 0.65rem;
    border-bottom: 1px solid var(--border-color);
}
.new-member-pw-title {
    margin: 0;
    color: #16a34a;
    font-size: 1.05rem;
    font-weight: 600;
}
.new-member-pw-body { padding: 1rem 1.25rem 1.1rem; }
.new-member-pw-intro {
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.5;
}
.new-member-pw-field { margin-bottom: 0.65rem; }
.new-member-pw-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.new-member-pw-value {
    padding: 0.55rem 0.7rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.88rem;
    word-break: break-all;
}
.new-member-pw-password-row {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
}
.new-member-pw-password {
    flex: 1 1 auto;
    padding: 0.55rem 0.7rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    user-select: all;
    word-break: break-all;
}
.new-member-pw-copy,
.new-member-pw-copy-all {
    padding: 0.55rem 0.85rem;
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.new-member-pw-copy:hover,
.new-member-pw-copy-all:hover { filter: brightness(1.08); }
.new-member-pw-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
}
.new-member-pw-close {
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}
.new-member-pw-close:hover { border-color: var(--text-primary); }
.new-member-pw-status {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
}
.new-member-pw-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.new-member-pw-status.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
[data-theme="dark"] .new-member-pw-status.success { color: #4ade80; }
[data-theme="dark"] .new-member-pw-status.error { color: #f87171; }
[data-theme="dark"] .new-member-pw-title { color: #4ade80; }

/* Hide dashboard until logged in */
.dashboard-container {
    display: none;
}

.dashboard-container.active {
    display: block;
}

.dashboard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 3rem 0.5rem;
    box-shadow: var(--shadow-lg);
}

.header-content {
    max-width: 1800px;
    margin: 0 auto;
}

.header-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-logo {
    height: 60px;
    width: auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.header-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.3);
}

.header-logo:active {
    transform: scale(0.97);
}

.header-user-area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-timestamp {
    font-size: 0.875rem;
    color: #ffffff;
    font-weight: 500;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1.2;
}

.btn-create-item {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
}

.btn-admin {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.5);
}

.notif-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background: var(--accent-critical);
    color: white;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Short labels hidden on desktop, shown on mobile */
.btn-label-short { display: none; }
.btn-label { display: inline; }

/* Hamburger hidden on desktop */
.mobile-menu-btn {
    display: none;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 1.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.mobile-menu-btn:hover {
    background: rgba(255,255,255,0.3);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
}

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

.logout-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Phase 4 — HQ entry badge (platform members only; injected into the tenant
   header by _ensureHqBadge, just before Sign Out). Pill on the colored header
   with a soft indigo accent border to distinguish it from Sign Out. */
.hq-entry-badge {
    background: rgba(255, 255, 255, 0.16);
    color: white;
    border: 1px solid rgba(199, 210, 254, 0.7);
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 0.5rem;
    white-space: nowrap;
}
.hq-entry-badge:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(224, 231, 255, 0.95);
}

/* h.1l — Platform impersonation banner. Shown above the dashboard header
   when a platform operator is viewing a tenant. Yellow/amber theme so it's
   visually distinct from any tenant chrome. */
.platform-view-banner {
    position: relative;
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-bottom: 2px solid #f59e0b;
    font-size: 0.85rem;
    line-height: 1.35;
}
.platform-view-banner .pvb-icon { font-size: 1.1rem; }
.platform-view-banner .pvb-text { flex: 1; }
.platform-view-banner .pvb-back {
    background: #78350f;
    color: white;
    border: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.platform-view-banner .pvb-back:hover { background: #92400e; }
[data-theme="dark"] .platform-view-banner {
    background: linear-gradient(90deg, #422006 0%, #78350f 100%);
    color: #fef3c7;
    border-bottom-color: #f59e0b;
}
[data-theme="dark"] .platform-view-banner .pvb-back {
    background: #f59e0b;
    color: #422006;
}
[data-theme="dark"] .platform-view-banner .pvb-back:hover { background: #fbbf24; }

/* Phase 4 — write-access chip in the impersonation banner.
   Red when write access is ON (deliberate warning — destructive power is enabled);
   gray when read-only (default, safe). */
.platform-view-banner .pvb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: default;
}
.platform-view-banner .pvb-chip--write {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.platform-view-banner .pvb-chip--read {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.platform-view-banner--write {
    background: linear-gradient(90deg, #fee2e2 0%, #fecaca 100%);
    border-bottom-color: #dc2626;
    color: #7f1d1d;
}
.platform-view-banner--write .pvb-back { background: #7f1d1d; }
.platform-view-banner--write .pvb-back:hover { background: #991b1b; }
[data-theme="dark"] .platform-view-banner .pvb-chip--write {
    background: #450a0a;
    color: #fecaca;
    border-color: #b91c1c;
}
[data-theme="dark"] .platform-view-banner .pvb-chip--read {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #475569;
}
[data-theme="dark"] .platform-view-banner--write {
    background: linear-gradient(90deg, #450a0a 0%, #7f1d1d 100%);
    color: #fee2e2;
    border-bottom-color: #ef4444;
}
[data-theme="dark"] .platform-view-banner--write .pvb-back {
    background: #ef4444;
    color: #450a0a;
}
[data-theme="dark"] .platform-view-banner--write .pvb-back:hover { background: #f87171; }

/* Sign Out and Theme toggle inside hamburger menu — hidden on desktop */
.header-actions .mobile-sign-out,
.header-actions .mobile-theme-toggle {
    display: none;
}

/* View As / Impersonation Mode (super admin only) */
.user-info.super-admin {
    cursor: pointer;
    position: relative;
}
.user-info.super-admin::after {
    content: '\25BC';
    font-size: 0.5rem;
    margin-left: -0.5rem;
    opacity: 0.7;
}

.view-as-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 280px;
    max-height: 360px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7);
    z-index: 9999;
    overflow: hidden;
}
.view-as-dropdown.open { display: block; }

.view-as-search {
    padding: 0.5rem;
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.view-as-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: white;
    font-size: 0.8125rem;
    outline: none;
    box-sizing: border-box;
}
.view-as-search input::placeholder { color: rgba(255, 255, 255, 0.5); }

.view-as-list {
    max-height: 300px;
    overflow-y: auto;
}
.view-as-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    background: #1e293b;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.view-as-item:hover { background: #2d3f55; }
.view-as-item-name {
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
}
.view-as-item-detail {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6875rem;
}
.view-as-item-role {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}
.view-as-item-role.admin { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.view-as-item-role.dm { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.view-as-item-role.manager { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.view-as-item-role.viewer { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }

.view-as-item.back-to-admin {
    background: rgba(139, 92, 246, 0.15);
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}
.view-as-item.back-to-admin:hover { background: rgba(139, 92, 246, 0.25); }

/* Impersonation Banner */
.impersonation-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    color: #fef3c7;
}
.impersonation-icon { font-size: 1rem; }
.impersonation-exit-btn {
    margin-left: auto;
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.5);
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.impersonation-exit-btn:hover { background: rgba(239, 68, 68, 0.5); }

.timestamp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    opacity: 0.9;
}

.export-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    padding: 0.625rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.export-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 3rem 2rem;
}

.controls-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.controls-row-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}

.controls-row-bottom {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sync-timestamp {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    background: var(--bg-hover);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.sync-icon {
    font-size: 0.75rem;
    display: inline-block;
}

.sync-timestamp.fresh {
    color: var(--accent-success);
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.05);
}

.sync-timestamp.stale {
    color: var(--accent-warning);
    border-color: rgba(245, 158, 11, 0.2);
    background: rgba(245, 158, 11, 0.05);
}

.search-box {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.125rem;
}

.market-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.market-chip {
    padding: 0.5rem 1rem;
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.market-chip:hover {
    border-color: var(--accent-purple);
    background: rgba(139, 92, 246, 0.1);
}

.market-chip.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: white;
}

.view-tab {
    padding: 0.75rem 0.875rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
    white-space: nowrap;
}

.view-tab:hover {
    background: rgba(139, 92, 246, 0.05);
    color: var(--text-primary);
}

.view-tab.active {
    border-bottom-color: var(--accent-info);
    color: var(--accent-info);
}

/* Items Sub-Tabs (Active / Resolved toggle inside Action Items) */
.items-sub-tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem 0;
    background: var(--bg-primary);
}

.items-sub-tab {
    padding: 0.4rem 1.25rem;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.items-sub-tab:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.items-sub-tab.active {
    background: var(--accent-info);
    color: #fff;
}

/* Real-Time View Sub-Tabs (centered above daily report header) */
.rt-sub-tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem 0.75rem;
    background: var(--bg-primary);
}

.rt-sub-tab {
    padding: 0.4rem 1.25rem;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.rt-sub-tab:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.rt-sub-tab.active {
    background: #7c3aed;
    color: #fff;
}

@media (max-width: 768px) {
    .rt-sub-tabs {
        padding: 0.2rem;
        gap: 0.15rem;
    }
    .rt-sub-tab {
        padding: 0.35rem 0.85rem;
        font-size: 0.78rem;
    }
}

.sort-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-color);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-card.critical { --accent-color: var(--accent-critical); }
.stat-card.warning { --accent-color: var(--accent-warning); }
.stat-card.info { --accent-color: var(--accent-info); }
.stat-card.success { --accent-color: var(--accent-success); }
.stat-card.resolved-week { --accent-color: var(--accent-success); }
.stat-card.category-breakdown { --accent-color: var(--accent-purple); }

.category-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1rem;
    margin-top: 0.5rem;
}

.cat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.cat-row:hover {
    background: var(--bg-hover);
}

.cat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cat-dot-bank { background: var(--accent-success); }
.cat-dot-xbm { background: var(--accent-purple); }
.cat-dot-rma { background: var(--accent-warning); }
.cat-dot-training { background: #7c3aed; }
.cat-dot-mim { background: #e91e8c; }
.cat-dot-hint { background: #ff8c00; }

.cat-name {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
    flex: 1;
}

.cat-count {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.stat-icon {
    font-size: 1.5rem;
    opacity: 0.8;
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
    font-family: 'JetBrains Mono', monospace;
    transition: transform 0.2s ease;
}

@keyframes statPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.stat-value.pulse {
    animation: statPulse 0.3s ease;
}

.stat-subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.aging-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.aging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.aging-card {
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.2s ease;
}

.aging-card:hover {
    border-color: var(--accent-color);
    transform: scale(1.02);
}

.aging-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.aging-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-color);
    font-family: 'JetBrains Mono', monospace;
}

.issues-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.severity-filters {
    display: flex;
    gap: 0.5rem;
}

.severity-tab {
    padding: 0.5rem 1rem;
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.severity-tab:hover {
    border-color: var(--accent-purple);
}

.severity-tab.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: white;
}

.category-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.category-chip {
    padding: 0.375rem 0.875rem;
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

.category-chip:hover {
    border-color: var(--text-muted);
}

.category-chip.active {
    color: white;
    background: var(--text-secondary);
    border-color: var(--text-secondary);
}

.category-chip.cat-bank.active {
    background: var(--accent-success);
    border-color: var(--accent-success);
}

.category-chip.cat-xbm.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
}

.category-chip.cat-rma.active {
    background: var(--accent-warning);
    border-color: var(--accent-warning);
}

.category-chip.cat-custom.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
}

.issue-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.issue-item {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-left: 5px solid var(--accent-color);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    animation: slideIn 0.35s ease both;
}

/* Staggered entrance for cards */
.issue-item:nth-child(1) { animation-delay: 0s; }
.issue-item:nth-child(2) { animation-delay: 0.03s; }
.issue-item:nth-child(3) { animation-delay: 0.06s; }
.issue-item:nth-child(4) { animation-delay: 0.09s; }
.issue-item:nth-child(5) { animation-delay: 0.12s; }
.issue-item:nth-child(6) { animation-delay: 0.15s; }
.issue-item:nth-child(7) { animation-delay: 0.18s; }
.issue-item:nth-child(8) { animation-delay: 0.21s; }
.issue-item:nth-child(9) { animation-delay: 0.24s; }
.issue-item:nth-child(10) { animation-delay: 0.27s; }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutSlide {
    from {
        opacity: 1;
        transform: translateX(0);
        max-height: 300px;
    }
    to {
        opacity: 0;
        transform: translateX(30px);
        max-height: 0;
        padding: 0;
        margin: 0;
        border-width: 0;
    }
}

.issue-item.resolving {
    animation: fadeOutSlide 0.4s ease forwards;
    pointer-events: none;
}

.issue-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(4px);
}

.issue-item.critical { --accent-color: var(--accent-critical); }
.issue-item.warning { --accent-color: var(--accent-warning); }
.issue-item.info { --accent-color: var(--accent-info); }
.issue-item.resolved {
    opacity: 0.6;
    background: var(--bg-hover);
}

.issue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    gap: 0.25rem;
}

.issue-title-section {
    flex: 1;
}

.issue-title {
    font-weight: 700;
    font-size: 1.0625rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.issue-store {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.issue-badges {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.issue-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Category-specific badge colors */
.badge-category-bank-deposits {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
    border: 1px solid #10b981;
}

.badge-category-xbm {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-purple);
    border: 1px solid #8b5cf6;
}

.badge-category-returns-rma {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
    border: 1px solid #f97316;
}

.badge-category-training {
    background: rgba(124, 58, 237, 0.12);
    color: #7c3aed;
    border: 1px solid #7c3aed;
}

.badge-category-mim {
    background: rgba(233, 30, 140, 0.1);
    color: #e91e8c;
    border: 1px solid #e91e8c;
}

.badge-age {
    background: rgba(100, 116, 139, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-dark);
}

.issue-details {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Compact card expand/collapse */
.issue-header-expandable {
    cursor: pointer;
    border-radius: 6px;
    padding: 0.35rem;
    margin: -0.35rem;
}
.issue-header-expandable:hover {
    background: rgba(139, 92, 246, 0.04);
}
.issue-expand-toggle {
    transition: transform 0.2s ease;
    font-size: 1.1rem;
    color: var(--accent-info, #06b6d4);
    flex-shrink: 0;
    padding: 0 0.35rem 0 0;
    user-select: none;
    line-height: 1;
    margin-top: 0.1rem;
}
.issue-item.expanded .issue-expand-toggle {
    transform: rotate(90deg);
}
.issue-compact-summary {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', monospace;
}
.issue-item.expanded .issue-compact-summary {
    display: none;
}
.issue-expandable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.issue-item.expanded .issue-expandable {
    max-height: 2000px;
}

/* Training checklist in issue card */
.training-list { margin: 0.25rem 0; max-height: 200px; overflow-y: auto; }
.training-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; font-size: 0.8rem; color: var(--text-primary); }
.training-item.completed { opacity: 0.5; text-decoration: line-through; }
.training-check { font-size: 0.9rem; flex-shrink: 0; }
.training-type { font-size: 0.65rem; color: var(--text-muted, #94a3b8); background: var(--bg-secondary, #f1f5f9); padding: 0.1rem 0.4rem; border-radius: 3px; margin-left: auto; flex-shrink: 0; }
.training-progress { font-size: 0.72rem; color: var(--text-secondary, #64748b); margin-top: 0.25rem; font-weight: 600; }

/* Training resolution modal */
.training-resolve-list { max-height: 300px; overflow-y: auto; margin: 0.5rem 0; }
.training-resolve-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.25rem; font-size: 0.85rem; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.training-resolve-item:last-child { border-bottom: none; }
.training-resolve-item input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; accent-color: #7c3aed; }
.training-resolve-item label { flex: 1; cursor: pointer; }
.training-resolve-type { font-size: 0.65rem; color: var(--text-muted, #94a3b8); background: var(--bg-secondary, #f1f5f9); padding: 0.1rem 0.4rem; border-radius: 3px; }
.training-resolve-progress { text-align: center; font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); margin: 0.5rem 0; }
.training-resolve-progress .prog-count { color: #7c3aed; }
.training-resolve-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
.btn-mark-all { background: var(--bg-secondary, #f1f5f9); border: 1px solid var(--border-color); padding: 0.4rem 0.75rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); }
.btn-mark-all:hover { background: var(--border-color); }
.btn-save-progress { background: #ede9fe; color: #7c3aed; border: 1px solid #7c3aed; padding: 0.4rem 0.75rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.btn-save-progress:hover { background: #ddd6fe; }

/* Category filter chip for Training */
.category-chip.cat-training.active {
    background: #7c3aed;
    color: white;
    border-color: #7c3aed;
}

/* Category filter chip for MIM */
.category-chip.cat-mim.active {
    background: #e91e8c;
    color: white;
    border-color: #e91e8c;
}

/* Category filter chip for HINT Focus */
.category-chip.cat-hint.active {
    background: #ff8c00;
    color: white;
    border-color: #ff8c00;
}

.issue-actions {
    display: flex;
    gap: 0.75rem;
}

.action-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
    font-family: 'Inter', sans-serif;
}

.action-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent-purple);
}

.action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.action-btn.success {
    background: var(--accent-success);
    color: white;
    border-color: var(--accent-success);
}

.action-btn.success:hover:not(:disabled) {
    background: #059669;
}

.action-btn.warning {
    background: var(--accent-warning);
    color: white;
    border-color: var(--accent-warning);
}

.action-btn.warning:hover:not(:disabled) {
    background: #d97706;
}

.issue-notes {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-hover);
    border-left: 3px solid var(--accent-info);
    border-radius: 6px;
}

.note-header {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.note-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Resolver bar on resolved cards */
.resolver-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    margin-top: 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    border-left: 3px solid rgba(22, 163, 74, 0.6);
    border-radius: 0 6px 6px 0;
    font-size: 0.8125rem;
}
.resolver-name {
    color: #15803d;
    font-weight: 600;
}
.resolver-date {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Resolved summary bar (top of resolved view) */
.resolved-summary-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    flex-wrap: wrap;
}
.resolved-summary-label {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.resolved-summary-chips {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    flex: 1;
}
.resolver-chip {
    background: rgba(22, 163, 74, 0.1);
    color: #166534;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1px solid rgba(22, 163, 74, 0.2);
}
.resolver-chip strong {
    color: #15803d;
    font-weight: 700;
}
.resolved-summary-total {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Clickable stat card hover */
.stat-card.resolved-week:hover {
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
    transition: all 0.2s;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-backdrop);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.modal-body {
    margin-bottom: 1.5rem;
}

.modal-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
}

.modal-textarea:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.modal-info {
    background: var(--bg-hover);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.modal-info-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.modal-info-item strong {
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
    font-family: 'Inter', sans-serif;
}

.modal-btn:hover {
    background: var(--bg-hover);
}
.modal-btn.btn-purple:hover { background: var(--accent-purple-hover); }
.modal-btn.btn-success:hover { background: #059669; }
.modal-btn.btn-info:hover { background: #2563eb; }
.modal-btn.btn-critical:hover { background: #b91c1c; }
.modal-btn.btn-blue:hover { background: #2563eb; }

.modal-btn.primary {
    background: var(--accent-success);
    color: white;
    border-color: var(--accent-success);
}

.modal-btn.primary:hover {
    background: #059669;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-state-text {
    font-size: 1.125rem;
    font-weight: 500;
}

.file-input {
    display: none;
}

@media print {
    .controls-bar,
    .issue-actions {
        display: none;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dashboard-header {
        padding: 0.75rem 1rem 0.25rem;
    }

    /* Header layout */
    .header-row-main {
        margin-bottom: 0;
        gap: 0.5rem;
    }

    .header-brand {
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .header-logo {
        height: 36px;
        padding: 3px 8px;
    }

    .header-user-area {
        gap: 0.5rem;
    }

    .header-timestamp {
        display: none !important;
    }

    .user-info {
        padding: 0.25rem 0.5rem;
    }

    .user-avatar {
        width: 26px;
        height: 26px;
    }

    .user-name {
        display: none;
    }

    .view-as-dropdown { width: 240px; right: -1rem; }
    .impersonation-banner { font-size: 0.75rem; padding: 0.25rem 0.5rem; flex-wrap: wrap; }

    /* Hide standalone logout on mobile — it's in the hamburger menu */
    .logout-btn {
        display: none !important;
    }

    /* Show the Sign Out button inside hamburger menu (theme toggle already in header) */
    .header-actions .mobile-sign-out {
        display: flex !important;
    }

    /* Hide PDF export and Create Item from mobile hamburger menu */
    .header-actions .desktop-only-btn {
        display: none !important;
    }

    /* Show hamburger */
    .mobile-menu-btn {
        display: block !important;
    }

    /* Hide actions by default, show as grid when toggled */
    .header-actions {
        display: none !important;
    }

    .header-actions.mobile-open {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding-top: 0.75rem;
        margin-top: 0.75rem;
        border-top: 1px solid rgba(255,255,255,0.15);
    }

    .header-actions .export-btn {
        justify-content: center;
        min-height: 44px;
        font-size: 0.8125rem;
        padding: 0.5rem;
    }

    /* Swap labels: hide long, show short */
    .btn-label { display: none !important; }
    .btn-label-short { display: inline !important; }

    /* Container */
    .container {
        padding: 0 0.75rem 0.75rem;
    }

    /* View tabs — stacked icon + label on mobile, scrollable for 7+ tabs */
    .tab-inner {
        gap: 0;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tab-inner::-webkit-scrollbar { display: none; }

    .view-tab {
        flex: 0 0 auto;
        min-width: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        padding: 0.5rem 0.4rem;
        font-size: 0.65rem;
        min-height: 44px;
    }

    .view-tab .tab-icon {
        font-size: 1.25rem;
        line-height: 1;
    }

    /* Controls */
    .controls-bar {
        padding: 0.75rem;
    }

    .controls-row-top {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .controls-row-bottom {
        flex-direction: column;
        gap: 0.5rem;
    }

    .controls-row-bottom .control-group {
        min-width: 100% !important;
        flex: unset !important;
    }

    .sync-timestamp {
        width: 100%;
        justify-content: center;
        order: -1;
    }

    .market-filters {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .market-chip {
        flex: 1 1 auto;
        min-width: calc(33% - 0.375rem);
        text-align: center;
        padding: 0.5rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8125rem;
    }

    .sort-select, .search-input {
        min-height: 44px;
        font-size: 0.9375rem;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    .stat-card {
        padding: 0.875rem;
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.6875rem;
    }

    .stat-subtext {
        font-size: 0.6875rem;
    }

    .category-bars {
        grid-template-columns: 1fr;
    }

    .cat-name {
        font-size: 0.75rem;
    }

    .cat-count {
        font-size: 1rem;
    }

    .category-filters {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.375rem;
        margin-bottom: 1rem;
    }

    .category-chip {
        padding: 0.3rem 0.625rem;
        font-size: 0.75rem;
    }

    /* Aging section */
    .aging-section {
        padding: 0.875rem;
    }

    .aging-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .aging-card {
        padding: 0.75rem 0.5rem;
    }

    .aging-label {
        font-size: 0.6875rem;
    }

    .aging-value {
        font-size: 1.25rem;
    }

    /* Scan widget */
    .scan-status-widget {
        max-width: 100% !important;
    }

    /* Issues section */
    .issues-section {
        padding: 0.75rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .severity-filters {
        width: 100%;
        justify-content: space-between;
    }

    .severity-tab {
        flex: 1;
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Issue cards - mobile optimized */
    .issue-item {
        padding: 0.875rem;
    }

    .issue-header {
        flex-direction: column;
        gap: 0.5rem;
    }

    .issue-title {
        font-size: 0.9375rem;
    }

    .issue-store {
        font-size: 0.8125rem;
    }

    .issue-badges {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .issue-badge {
        padding: 0.25rem 0.625rem;
        font-size: 0.6875rem;
    }

    .issue-details {
        font-size: 0.8125rem;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .issue-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .action-btn {
        width: 100%;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Modals */
    .modal-content {
        width: 95%;
        padding: 1.25rem;
        margin: 0.5rem;
        max-height: 90vh;
    }

    .modal-header {
        font-size: 1.125rem;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-btn {
        width: 100%;
        min-height: 44px;
    }

    /* Resolution notes */
    .issue-notes {
        font-size: 0.8125rem;
    }

    /* Toast on mobile - bottom center */
    .toast-notification {
        right: 1rem;
        left: 1rem;
        bottom: 1rem;
        text-align: center;
    }
}

/* Extra small phones */
@media (max-width: 400px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .aging-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .market-chip {
        min-width: calc(50% - 0.375rem);
    }

    .header-actions.mobile-open {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    color: white;
    z-index: 10000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    max-width: 90vw;
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-success {
    background: linear-gradient(135deg, #059669, #10b981);
}

.toast-error {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.toast-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

/* ============================================
   SCAN STATUS WIDGET STYLES
   ============================================ */
.scan-status-widget {
    max-width: 600px;
    background: rgba(30, 27, 75, 0.8) !important;
    backdrop-filter: blur(10px);
    border-radius: 12px !important;
    border: 2px solid rgba(249, 115, 22, 0.3) !important;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.scan-status-widget:hover {
    border-color: rgba(249, 115, 22, 0.5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.scan-widget-header {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(251, 146, 60, 0.1) 100%) !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.2) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.scan-widget-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: #fed7aa !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

.scan-widget-icon {
    font-size: 1.25rem;
}

.scan-widget-date {
    color: #fdba74;
    font-size: 0.75rem;
    opacity: 0.9;
}

.scan-widget-body {
    padding: 1.25rem;
}

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

.scan-section:last-of-type {
    margin-bottom: 0;
}

.scan-type-header {
    color: #e0e7ff;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scan-subtitle {
    color: #a5b4fc;
    font-size: 0.75rem;
    font-weight: normal;
}

.scan-progress-label {
    color: #e0e7ff;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}

.scan-progress-container {
    background: rgba(30, 27, 75, 0.6) !important;
    border-radius: 6px !important;
    height: 14px !important;
    overflow: hidden !important;
    margin-bottom: 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.scan-progress-bar {
    height: 100% !important;
    border-radius: 6px !important;
    transition: width 0.3s ease !important;
}

.scan-progress-bar.high {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%) !important;
}

.scan-progress-bar.medium {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%) !important;
}

.scan-progress-bar.low {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%) !important;
}

.scan-status-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.scan-status-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.scan-status-pill:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.scan-status-pill.active {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.scan-store-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    background: rgba(15, 12, 50, 0.6);
    border-radius: 8px;
    margin-top: 0;
    padding: 0 0.75rem;
}

.scan-store-list.open {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-store-list-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.375rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.scan-store-list-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.scan-store-list-item {
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #e0e7ff;
    white-space: nowrap;
}

.scan-status-pill.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.scan-status-pill.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.scan-status-pill.complete {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.scan-widget-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-widget-btn {
    flex: 1;
    padding: 0.625rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.scan-widget-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.scan-widget-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Scan Detail Cards */
.scan-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.scan-store-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 1rem;
    transition: border-color 0.2s;
}

.scan-store-card:hover {
    border-color: rgba(249, 115, 22, 0.3);
}

.scan-store-card.status-complete {
    border-left: 3px solid #10b981;
}

.scan-store-card.status-overdue {
    border-left: 3px solid #ef4444;
}

.scan-store-card.status-warning {
    border-left: 3px solid #f59e0b;
}

.scan-store-card.status-pending {
    border-left: 3px solid #6366f1;
}

.scan-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.scan-card-store {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.3;
}

.scan-card-market {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

.scan-card-status {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.scan-card-status.complete {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

.scan-card-status.overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.scan-card-status.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

.scan-card-status.pending {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}

.scan-card-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
}

.scan-card-step {
    text-align: center;
    padding: 0.375rem 0.25rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.scan-card-step-icon {
    font-size: 1.125rem;
    display: block;
    margin-bottom: 0.125rem;
}

.scan-card-step-label {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    display: block;
    line-height: 1.2;
}

.scan-card-step-date {
    font-size: 0.625rem;
    display: block;
    margin-top: 0.125rem;
}

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

/* ===== ROSTER MODULE ===== */
.roster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.roster-title {
    color: #93c5fd;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.roster-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.roster-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.roster-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
    font-weight: 500;
}
.roster-btn-download {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.roster-btn-download:hover {
    background: rgba(255,255,255,0.12);
}
.roster-btn-add {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-color: var(--accent-info);
}
.roster-btn-add:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

/* Market Sections */
.roster-market-section {
    margin-bottom: 2rem;
}
.roster-market-banner {
    padding: 0.875rem 1.25rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.roster-market-banner h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    margin: 0;
    letter-spacing: 0.5px;
}
.roster-market-banner .market-stats {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.85);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.roster-dm-bar {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Store Sections */
.roster-store-section {
    border: 1px solid var(--border-color);
    border-top: none;
    overflow: hidden;
}
.roster-store-section:last-child {
    border-radius: 0 0 12px 12px;
}
.roster-store-header {
    padding: 0.625rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.roster-store-header:hover {
    filter: brightness(1.1);
}
.roster-store-header .store-name {
    font-weight: 700;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.roster-store-header .store-name .door-code {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.85;
}
.roster-store-header .store-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}
.roster-staff-pill {
    padding: 0.15rem 0.6rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.store-address {
    font-size: 0.75rem;
    opacity: 0.8;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roster-staff-pill.ok {
    background: #4ade80;
    color: #1a1a2e;
}
.roster-staff-pill.warn {
    background: #fbbf24;
    color: #1a1a2e;
}
.roster-staff-pill.vacant {
    background: #f87171;
    color: #1a1a2e;
}

/* Employee Rows */
.roster-employees {
    border-top: 1px solid var(--border-color);
}
.roster-employee-row {
    display: grid;
    grid-template-columns: 1.8fr 0.8fr 0.7fr 0.9fr 1.3fr 1.2fr 0.5fr 1fr 0.7fr 0.3fr;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: center;
    font-size: 0.8125rem;
    transition: background 0.15s;
    gap: 0.5rem;
}
.roster-employee-row:hover {
    background: rgba(255,255,255,0.03);
}
.roster-employee-row:last-child {
    border-bottom: none;
}
.roster-col-header {
    display: grid;
    grid-template-columns: 1.8fr 0.8fr 0.7fr 0.9fr 1.3fr 1.2fr 0.5fr 1fr 0.7fr 0.3fr;
    padding: 0.4rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    gap: 0.5rem;
}
.roster-emp-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.roster-emp-name .position-badge {
    font-size: 0.625rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.position-badge.mgr {
    background: rgba(168,85,247,0.2);
    color: #c084fc;
}
.position-badge.assoc {
    background: rgba(59,130,246,0.15);
    color: #93c5fd;
}
.roster-emp-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.active { background: #22c55e; }
.status-dot.training { background: #3b82f6; }
.status-dot.onboarding, .status-dot.on-boarding { background: #a855f7; }
.status-dot.two-week-notice { background: #f97316; }
.status-dot.stepping-down { background: #f59e0b; }
.status-dot.resigned { background: #ef4444; }
.status-dot.terminated { background: #6b7280; }

.roster-emp-phone {
    color: var(--text-secondary);
}
.roster-emp-email {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roster-emp-detail {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.roster-replace-badge {
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.02em;
}
.roster-note-replace {
    color: #ef4444;
    font-weight: 600;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4;
    word-break: break-word;
}
.roster-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s, opacity 0.15s;
    cursor: pointer;
}
.roster-link:hover {
    color: #60a5fa;
    text-decoration: underline;
}
.store-ext {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-left: 0.25rem;
}
.roster-emp-actions {
    display: flex;
    justify-content: flex-end;
}
.roster-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.15s;
    opacity: 0.5;
}
.roster-edit-btn:hover {
    opacity: 1;
    background: rgba(255,255,255,0.08);
}

/* Vacant row */
.roster-employee-row.vacant {
    background: rgba(239,68,68,0.05);
    border-left: 3px solid #ef4444;
}
.roster-employee-row.vacant .roster-emp-name {
    color: #f87171;
    font-style: italic;
    font-weight: 400;
}
/* Open position */
.roster-employee-row.open-slot .roster-emp-name {
    color: var(--text-secondary);
    font-style: italic;
    font-weight: 400;
    opacity: 0.5;
}

/* Store add button */
.roster-store-add {
    padding: 0.4rem 1.25rem;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
.roster-store-add button {
    background: none;
    border: 1px dashed rgba(255,255,255,0.15);
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
    width: 100%;
}
.roster-store-add button:hover {
    border-color: var(--accent-info);
    color: #93c5fd;
    background: rgba(59,130,246,0.05);
}

/* Restricted view for managers — hide sensitive columns */
.roster-restricted .dm-only {
    display: none !important;
}
.roster-restricted .roster-employee-row {
    grid-template-columns: 2.2fr 1fr 1fr 1.8fr 1.2fr 1fr 0.4fr;
}
.roster-restricted .roster-col-header {
    grid-template-columns: 2.2fr 1fr 1fr 1.8fr 1.2fr 1fr 0.4fr;
}

/* Market color themes — 3-tier: banner (darkest) → DM (medium) → store (lightest) */
.market-boise { background: linear-gradient(135deg, #581c87, #4a1772); }
.market-eugene { background: linear-gradient(135deg, #15803d, #166534); }
.market-salem { background: linear-gradient(135deg, #991b1b, #7f1d1d); }
.market-pdx-south { background: linear-gradient(135deg, #1d4ed8, #1e40af); }
.market-pdx-north { background: linear-gradient(135deg, #0891b2, #0e7490); }
.dm-bar-boise { background: rgba(88,28,135,0.55); color: #ffffff; }
.dm-bar-eugene { background: rgba(21,128,61,0.45); color: #ffffff; }
.dm-bar-salem { background: rgba(153,27,27,0.5); color: #ffffff; }
.dm-bar-pdx-south { background: rgba(29,78,216,0.45); color: #ffffff; }
.dm-bar-pdx-north { background: rgba(8,145,178,0.45); color: #ffffff; }
.store-header-boise { background: rgba(88,28,135,0.35); color: #ffffff; }
.store-header-eugene { background: rgba(21,128,61,0.28); color: #ffffff; }
.store-header-salem { background: rgba(153,27,27,0.32); color: #ffffff; }
.store-header-pdx-south { background: rgba(29,78,216,0.28); color: #ffffff; }
.store-header-pdx-north { background: rgba(8,145,178,0.28); color: #ffffff; }

/* Separated employee row */
.roster-employee-row.separated {
    opacity: 0.7;
    background: rgba(107,114,128,0.05);
}
.roster-employee-row.separated .roster-emp-name {
    color: var(--text-secondary);
}

/* Roster collapsed stores */
.roster-employees.collapsed {
    display: none;
}
.roster-store-add.collapsed {
    display: none;
}
.roster-col-header.collapsed {
    display: none;
}
.roster-store-header .collapse-arrow {
    transition: transform 0.2s;
    display: inline-block;
}
.roster-store-header.collapsed .collapse-arrow {
    transform: rotate(-90deg);
}

/* Collapse/Expand toolbar */
/* Roster filter bar */
.roster-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.roster-filters-left {
    flex: 1;
    min-width: 0;
}
.roster-filters-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.roster-filters-right .sort-select {
    min-width: 160px;
}

.roster-collapse-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.roster-btn-sm {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
}
.roster-btn-sm:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

/* Target reps display */
.roster-target-reps {
    display: inline-block;
    background: rgba(99,102,241,0.12);
    color: #818cf8;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.roster-target-reps:hover:not(.readonly) {
    background: rgba(99,102,241,0.25);
    color: #a5b4fc;
}
.roster-target-reps.readonly {
    cursor: default;
}

/* Roster search */
.roster-search-input {
    flex: 1;
    min-width: 180px;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.roster-search-input:focus {
    border-color: var(--accent-info);
}
.roster-search-input::placeholder {
    color: var(--text-muted);
}

/* Roster loaded timestamp */
.roster-timestamp {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Recently separated filter badge (admin only) */
.roster-separated-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.roster-separated-btn:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.roster-separated-btn.active {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.4);
    color: #f87171;
}
.roster-separated-count {
    background: rgba(239,68,68,0.2);
    color: #f87171;
    padding: 0.05rem 0.4rem;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
}

/* Mobile: hide desktop-only actions, show mobile actions */
.roster-mobile-actions {
    display: none;
}

/* Separation modal */
.separation-modal-choices {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.separation-choice {
    flex: 1;
    padding: 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    background: var(--bg-card);
}
.separation-choice:hover {
    border-color: #94a3b8;
}
.separation-choice.selected {
    border-color: var(--accent-critical);
    background: rgba(239,68,68,0.06);
    color: #f87171;
}
.separation-choice .sep-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.25rem;
}

/* Mobile roster */
@media (max-width: 768px) {
    .roster-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .roster-col-header {
        display: none;
    }
    /* Card layout for employee rows on mobile */
    .roster-employee-row {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .roster-employee-row .roster-emp-name {
        font-size: 0.9375rem;
        margin-bottom: 0.125rem;
    }
    /* Hide dm-only fields on mobile too (already hidden for managers) */
    .roster-employee-row .dm-only {
        display: none;
    }
    /* Add labels before data fields on mobile */
    .roster-emp-status::before { content: 'Status: '; font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
    .roster-emp-phone::before { content: 'Phone: '; font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
    .roster-emp-phone:empty::before { content: none; }
    .roster-emp-email::before { content: 'Email: '; font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
    .roster-emp-email:empty::before { content: none; }
    .roster-emp-detail.roster-emp-ntid::before { content: 'NTID: '; font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
    .roster-emp-detail.roster-emp-ntid:empty::before { content: none; }
    .roster-emp-actions {
        justify-content: flex-start;
        padding-top: 0.25rem;
    }
    /* Mobile-only quick action row */
    .roster-mobile-actions {
        display: flex;
        gap: 0.5rem;
        padding-top: 0.25rem;
    }
    .roster-mobile-actions a {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
        min-height: 36px;
    }
    .roster-mobile-actions .mobile-call-btn {
        background: rgba(34,197,94,0.12);
        color: #4ade80;
        border: 1px solid rgba(34,197,94,0.25);
    }
    .roster-mobile-actions .mobile-email-btn {
        background: rgba(59,130,246,0.12);
        color: #93c5fd;
        border: 1px solid rgba(59,130,246,0.25);
    }
    .roster-market-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem 1rem;
    }
    .roster-market-banner h3 {
        font-size: 1rem;
    }
    .roster-store-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem 1rem;
        gap: 0.25rem;
    }
    .roster-store-header .store-meta {
        font-size: 0.75rem;
        gap: 0.5rem;
    }
    .store-address {
        display: none;
    }
    .roster-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.625rem 0.75rem;
        gap: 0.625rem;
    }
    .roster-filters-right {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .roster-filters-right .sort-select {
        flex: 1;
        min-width: 120px;
        min-height: 40px;
    }
    .roster-btn-sm {
        min-height: 40px;
        flex: 1;
        justify-content: center;
        display: inline-flex;
        align-items: center;
    }
    /* Roster search on mobile */
    .roster-search-input {
        min-height: 40px;
        font-size: 0.875rem;
    }
    /* Vacant / open slot rows */
    .roster-employee-row.vacant,
    .roster-employee-row.open-slot {
        padding: 0.5rem 1rem;
    }
    /* Employee modal responsive */
    .modal-content.modal-md .grid-2col,
    .modal-content.modal-md .grid-2col-mt {
        grid-template-columns: 1fr;
    }
    .modal-content.modal-sm .grid-2col {
        grid-template-columns: 1fr;
    }
    /* DM bar wrapping */
    .roster-dm-bar {
        gap: 0.5rem 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* DM position badge */
.position-badge.dm {
    background: rgba(245,158,11,0.2);
    color: #fbbf24;
}

/* ============================================================
   TRAINING LIBRARY
   ============================================================ */

/* Header button */
.export-btn.btn-training {
    background: linear-gradient(135deg, #667eea, #4f46e5);
    color: white;
    border-color: #667eea;
}
.export-btn.btn-training:hover {
    background: linear-gradient(135deg, #5a6fd6, #4338ca);
}

/* Library layout */
.training-library {
    padding: 8px 0;
}

.training-category {
    margin-bottom: 24px;
}

.training-category-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.training-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Card */
.training-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.training-card:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
}

.training-card-icon {
    font-size: 32px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border-radius: 10px;
}

.training-card-body {
    flex: 1;
    min-width: 0;
}

.training-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.training-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.training-card-action {
    flex-shrink: 0;
}

.training-open-btn {
    display: inline-block;
    padding: 6px 16px;
    background: #667eea;
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    transition: background 0.2s;
}
.training-card:hover .training-open-btn {
    background: #4f46e5;
}

/* Role restriction tags */
.training-role-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.training-role-tag.training-role-admin {
    background: #fef2f2;
    color: #dc2626;
}
.training-role-tag.training-role-dm {
    background: #eff6ff;
    color: #2563eb;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .training-card {
        padding: 12px 14px;
        gap: 12px;
    }
    .training-card-icon {
        font-size: 24px;
        width: 40px;
        height: 40px;
    }
    .training-card-desc {
        display: none;
    }
    .training-open-btn {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* Notification Center */
.btn-notification {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border: none;
    position: relative;
}
.btn-notification:hover { background: linear-gradient(135deg, #4f46e5, #4338ca); }

.notification-center {
    position: fixed;
    top: 70px;
    right: 1rem;
    width: 360px;
    max-height: 500px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.notification-center.active { display: flex; }
.notification-center-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.notification-clear-btn {
    background: none;
    border: none;
    color: var(--accent-info);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.notification-clear-btn:hover { text-decoration: underline; }
/* Notification center scrollable body */
.nc-body {
    overflow-y: auto;
    flex: 1;
}

/* Section headers */
.nc-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    position: sticky;
    top: 0;
}
.nc-section-header:first-child { border-top: none; }

/* Notification items */
.nc-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem 0.55rem 1rem;
    transition: background 0.12s;
}
.nc-item:hover { background: var(--bg-hover); }
.nc-item-icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 2px; }
.nc-item-body { flex: 1; min-width: 0; }
.nc-item-msg { font-size: 0.8rem; color: var(--text-primary); line-height: 1.4; }
.nc-item-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; }
.nc-ann-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nc-dismiss-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.nc-dismiss-btn:hover { opacity: 1; }

/* Alert severity accent */
.nc-item-alert.nc-alert-high  { border-left: 3px solid #ef4444; }
.nc-item-alert.nc-alert-med   { border-left: 3px solid #f59e0b; }
.nc-item-alert.nc-alert-low   { border-left: 3px solid #3b82f6; }
.nc-item-mention { border-left: 3px solid #8b5cf6; cursor: pointer; }
.nc-item-mention:hover { background: var(--bg-hover); }
.nc-item-mention:focus-visible { outline: 2px solid #8b5cf6; outline-offset: -2px; }

/* Flash highlight applied to the issue card after opening from a mention */
@keyframes mentionFlashPulse {
    0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); background-color: rgba(139, 92, 246, 0.12); }
    50%  { box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.15); background-color: rgba(139, 92, 246, 0.06); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); background-color: transparent; }
}
.issue-item.mention-flash {
    animation: mentionFlashPulse 2s ease-out;
    border-color: #8b5cf6 !important;
}
[data-theme="dark"] .issue-item.mention-flash {
    animation: mentionFlashPulseDark 2s ease-out;
}
@keyframes mentionFlashPulseDark {
    0%   { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.7);  background-color: rgba(167, 139, 250, 0.18); }
    50%  { box-shadow: 0 0 0 6px rgba(167, 139, 250, 0.2); background-color: rgba(167, 139, 250, 0.08); }
    100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);    background-color: transparent; }
}

/* Announcement type accents in NC */
.nc-item-ann.nc-ann-commission { border-left: 3px solid #f59e0b; }
.nc-item-ann.nc-ann-feature    { border-left: 3px solid #3b82f6; }
.nc-item-ann.nc-ann-urgent     { border-left: 3px solid #ef4444; }
.nc-item-ann.nc-ann-general    { border-left: 3px solid #9ca3af; }

.nc-empty-section {
    padding: 0.6rem 1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: italic;
}

/* Legacy notification item classes — kept so existing showNotification toasts still work */
.notification-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    transition: background 0.15s;
}
.notification-item:hover { background: var(--bg-hover); }
.notification-item-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.notification-item-content { flex: 1; min-width: 0; }
.notification-item-message { font-size: 0.8rem; color: var(--text-primary); line-height: 1.4; }
.notification-item-time { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
.notification-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .notification-center { width: calc(100vw - 2rem); right: 1rem; left: 1rem; }
}

/* Quick Notes on Issues */
.action-btn.info {
    background: var(--accent-info);
    color: white;
    border-color: var(--accent-info);
}
.action-btn.info:hover:not(:disabled) { background: #2563eb; }

.issue-comments-section {
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
}
.issue-comments-toggle {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-info);
    padding: 0.25rem 0;
    user-select: none;
}
.issue-comments-toggle:hover { text-decoration: underline; }
.issue-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.quick-note-item {
    padding: 0.5rem 0.75rem;
    background: var(--bg-hover);
    border-left: 3px solid var(--accent-info);
    border-radius: 6px;
}
.quick-note-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.quick-note-text {
    font-size: 0.8rem;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: pre-wrap;
}

/* Comment thread enhancements */
.comment-replies {
    margin-left: 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--accent-info);
}
.comment-reply {
    border-left-color: var(--accent-purple) !important;
}
.comment-edited-tag {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}
.comment-mention {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-info);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
}
.comment-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.375rem;
}
.comment-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    color: var(--text-muted);
    transition: all 0.15s;
}
.comment-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* @Mention autocomplete dropdown */
.mention-dropdown {
    position: fixed;
    z-index: 10001;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.8125rem;
}
.mention-item:hover, .mention-item.active {
    background: var(--bg-hover);
}
.mention-name {
    font-weight: 600;
    color: var(--text-primary);
}
.mention-email {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
}
.mention-detail {
    color: var(--text-muted);
    font-size: 0.7rem;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.mention-role {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Comment modal header */
.comment-modal-header {
    color: var(--accent-info);
}
.comment-mention-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 400;
}

.btn-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
}
.btn-blue:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }

/* Activity Log */
.activity-log-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.activity-log-list { display: flex; flex-direction: column; gap: 0.25rem; }
.activity-log-entry { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 8px; border-left: 3px solid var(--accent-purple); }
.activity-icon { font-size: 1.25rem; flex-shrink: 0; }
.activity-info { flex: 1; min-width: 0; }
.activity-detail { font-size: 0.875rem; color: var(--text-primary); font-weight: 500; }
.activity-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Duplicate Review Modal */
.dup-summary { font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.75rem; }
.dup-summary-note { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.dup-controls { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.dup-group { background: var(--bg-secondary); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; border: 1px solid var(--border-color, rgba(0,0,0,0.08)); }
.dup-group-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; font-size: 0.8rem; }
.dup-category-badge { background: var(--accent-info, #3b82f6); color: white; padding: 0.125rem 0.5rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
.dup-store-label { font-weight: 600; color: var(--text-primary); }
.dup-match-type { color: var(--text-muted); font-size: 0.7rem; margin-left: auto; }
.dup-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; border-radius: 6px; margin-top: 0.375rem; }
.dup-item.active { border-left: 3px solid var(--accent-info, #3b82f6); background: rgba(59,130,246,0.06); }
.dup-item.resolved { border-left: 3px solid var(--accent-warning, #f59e0b); background: rgba(245,158,11,0.06); }
.dup-item.archived { border-left: 3px solid var(--text-muted, #6b7280); background: rgba(107,114,128,0.06); opacity: 0.7; }
.dup-item-marker { font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.4rem; border-radius: 4px; white-space: nowrap; margin-top: 0.1rem; }
.dup-item-marker.archived { color: var(--text-muted, #6b7280); background: rgba(107,114,128,0.12); }
.dup-group-count { font-size: 0.7rem; color: var(--text-muted); }
.dup-item-check { flex-shrink: 0; display: flex; align-items: center; margin-top: 0.15rem; cursor: pointer; }
.dup-item-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-critical, #ef4444); }
.dup-item-info { flex: 1; min-width: 0; }
.dup-item-detail { font-size: 0.8rem; color: var(--text-primary); word-break: break-word; }
.dup-item-meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.25rem; font-size: 0.7rem; }
.dup-status-badge { padding: 0.1rem 0.375rem; border-radius: 8px; font-size: 0.65rem; font-weight: 600; text-transform: capitalize; }
.dup-status-badge.status-open, .dup-status-badge.status-in-progress { background: rgba(59,130,246,0.15); color: #3b82f6; }
.dup-status-badge.status-resolved { background: rgba(34,197,94,0.15); color: #16a34a; }
.dup-status-badge.status-archived { background: rgba(107,114,128,0.15); color: #6b7280; }
.dup-severity-badge { padding: 0.1rem 0.375rem; border-radius: 8px; font-size: 0.65rem; font-weight: 600; text-transform: capitalize; }
.dup-severity-badge.sev-critical { background: rgba(239,68,68,0.15); color: #ef4444; }
.dup-severity-badge.sev-warning { background: rgba(245,158,11,0.15); color: #d97706; }
.dup-age { color: var(--text-muted); }
.dup-doc-id { color: var(--text-muted); font-family: monospace; font-size: 0.65rem; }
.dup-expand { width: 100%; }
.dup-expand-summary { cursor: pointer; list-style: none; }
.dup-expand-summary::-webkit-details-marker { display: none; }
.dup-expand-summary::marker { display: none; content: ''; }
.dup-expand-hint { color: var(--accent-info, #3b82f6); font-size: 0.65rem; font-weight: 600; transition: transform 0.15s; }
details.dup-expand[open] .dup-expand-hint { display: none; }
.dup-full-detail { margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-primary, #fff); border-radius: 6px; border: 1px solid var(--border-color, rgba(0,0,0,0.08)); }
.dup-detail-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.dup-detail-table tr { border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06)); }
.dup-detail-table tr:last-child { border-bottom: none; }
.dup-detail-label { color: var(--text-muted, #6b7280); font-weight: 600; padding: 0.25rem 0.5rem 0.25rem 0; white-space: nowrap; vertical-align: top; width: 110px; }
.dup-detail-value { color: var(--text-primary); padding: 0.25rem 0; word-break: break-word; font-family: inherit; }

.btn-purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
}
.btn-purple:hover { background: linear-gradient(135deg, #7c3aed, #6d28d9); }

/* Roster Print PDF Button */
.roster-btn-print {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    border: none;
}
.roster-btn-print:hover { background: linear-gradient(135deg, #7c3aed, #6d28d9); }

/* Roster Email Leaders Button */
.roster-btn-email {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
}
.roster-btn-email:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }

/* ============================================
   REP PERFORMANCE TRACKER
   ============================================ */

/* Container */
#repPerfView {
    padding: 0 3rem 2rem;
    max-width: 1800px;
    margin: 0 auto;
}

/* Header */
.rp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.rp-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.rp-sync-info {
    text-align: right;
}
.rp-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
}
.rp-month-select {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 0.5rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    min-width: 140px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rp-month-select:hover {
    border-color: var(--accent-purple);
}
.rp-month-select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Sub-tabs */
.rp-subtabs {
    margin-bottom: 0.5rem;
}

/* Stats Row */
.rp-stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.rp-stat-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--border-color);
}
.rp-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}
.rp-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Stat card color accents */
.rp-stat-mim { border-top-color: #e91e8c; }
.rp-stat-hint { border-top-color: #ff8c00; }
.rp-stat-tablet { border-top-color: #00bcd4; }
.rp-stat-watch { border-top-color: var(--accent-warning); }
.rp-stat-acc { border-top-color: #ec4899; }
.rp-stat-profithr { border-top-color: #14b8a6; }
.rp-stat-reps { border-top-color: #6366f1; }

/* Top 5 Leaderboard Grid */
.rp-tops-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.rp-top-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.rp-top-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.rp-top-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 120px;
}
.rp-top-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--bg-hover);
}
.rp-top-rank {
    font-weight: 700;
    color: var(--text-muted);
    min-width: 20px;
}
.rp-top-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rp-top-value {
    font-weight: 700;
    color: var(--text-primary);
}
.rp-show-all-btn {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: var(--accent-purple);
    transition: background 0.15s;
}
.rp-show-all-btn:hover {
    background: var(--border-color);
}

/* Color classes for metric labels */
.rp-color-mim { color: #e91e8c; }
.rp-color-hint { color: #ff8c00; }
.rp-color-tablet { color: #00bcd4; }
.rp-color-acc { color: #ec4899; }

/* Table cell metric highlights */
.rp-color-mim-cell { font-weight: 600; }
.rp-color-hint-cell { font-weight: 600; }
.rp-color-tablet-cell { font-weight: 600; }
.rp-color-voice-cell { font-weight: 600; color: #8b5cf6; }
.rp-color-acc-cell { font-weight: 600; color: #ec4899; }

/* Charts Row */
.rp-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.rp-chart-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.rp-chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* Zero Sales Filter Bar */
.rp-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.rp-filter-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.rp-filter-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-secondary);
    transition: all 0.15s;
}
.rp-filter-btn:hover {
    background: var(--bg-hover);
}
.rp-filter-btn.active {
    background: var(--accent-critical);
    color: white;
    border-color: var(--accent-critical);
}

/* Table Card */
.rp-table-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
}
.rp-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.rp-table-title {
    font-size: 1rem;
    font-weight: 700;
}
.rp-download-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.rp-download-btn:hover {
    opacity: 0.9;
}

.rp-table-scroll {
    overflow-x: auto;
}

.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.rp-table th {
    background: var(--bg-hover);
    padding: 0.35rem 0.3rem;
    text-align: right;
    font-weight: 700;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.15px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-dark);
    user-select: none;
}
.rp-table th:first-child,
.rp-table td:first-child {
    text-align: center;
    width: 28px;
}
.rp-table th:nth-child(2),
.rp-table td:nth-child(2) {
    text-align: left;
}
.rp-table th:hover {
    background: var(--border-color);
}
.rp-table td {
    padding: 0.3rem 0.3rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.rp-table tr:hover {
    background: var(--bg-hover);
}
.rp-name-cell {
    text-align: left !important;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rp-store-cell {
    text-align: center !important;
    font-weight: 400;
    font-size: 0.7em;
    color: var(--text-secondary, #9ca3af);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* Daily Trend Controls */
.rp-daily-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.rp-daily-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.rp-daily-controls select {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-primary);
    cursor: pointer;
}

/* Store Drill-down */
.rp-store-row-clickable {
    cursor: pointer;
}
.rp-drilldown-row td {
    padding: 0 !important;
    border-bottom: 2px solid var(--accent-primary, #667eea);
    background: var(--bg-hover);
}
.rp-drilldown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    margin: 0;
}
.rp-drilldown-table th {
    background: rgba(102, 126, 234, 0.08);
    padding: 0.25rem 0.3rem;
    text-align: right;
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.rp-drilldown-table th:first-child,
.rp-drilldown-table td:first-child {
    text-align: left;
    padding-left: 1.5rem;
}
.rp-drilldown-table td {
    padding: 0.2rem 0.3rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.rp-drilldown-table tr:last-child td {
    border-bottom: none;
}

.rp-totals-row {
    background: var(--bg-secondary, #f1f5f9) !important;
    border-top: 2px solid var(--border-color, #cbd5e1);
    font-weight: 600;
    position: sticky;
    bottom: 0;
}
.rp-totals-row td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.8rem;
}
.rp-totals-row:hover {
    background: var(--bg-secondary, #f1f5f9) !important;
}

/* ===== CSAT SUB-TAB ===== */

.rp-csat-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.rp-csat-stat {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.rp-csat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.rp-csat-score {
    font-size: 1.75rem;
    font-weight: 700;
}
.rp-csat-score.good { color: #10b981; }
.rp-csat-score.ok { color: #f59e0b; }
.rp-csat-score.bad { color: #ef4444; }
.rp-csat-sub {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* CSAT table cells */
.csat-score-cell { font-weight: 700; text-align: center; }
.csat-score-cell.promoter { color: #10b981; }
.csat-score-cell.passive { color: #f59e0b; }
.csat-score-cell.detractor { color: #ef4444; }
.csat-feedback {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.csat-feedback.expanded {
    white-space: normal;
    max-width: none;
}
.csat-sentiment {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}
.csat-sentiment.very-positive { background: #d1fae5; color: #065f46; }
.csat-sentiment.positive { background: #ecfdf5; color: #047857; }
.csat-sentiment.neutral { background: #f3f4f6; color: #6b7280; }
.csat-sentiment.mixed { background: #fef3c7; color: #92400e; }
.csat-sentiment.negative { background: #fee2e2; color: #991b1b; }
.csat-sentiment.very-negative { background: #fecaca; color: #7f1d1d; }
.csat-detractor-row { border-left: 3px solid #ef4444; }

/* ===== MIM FOCUS TAB ===== */

/* Tab button — magenta active */
#rpMimTab.active {
    background: #e91e8c;
    color: #fff;
    border-color: #e91e8c;
}
#rpMimTab:not(.active):hover {
    border-color: #e91e8c;
    color: #e91e8c;
}

/* Upload nudge banner */
.rp-mim-nudge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: #fce7f3;
    border: 1px solid #f9a8d4;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #9d174d;
    text-align: center;
}
.rp-mim-nudge-sub {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* MIM stat cards */
.rp-mim-stat-stores { border-top: 3px solid #22c55e; }
.rp-mim-stat-conv   { border-top: 3px solid #14b8a6; }
.rp-mim-stat-reps   { border-top: 3px solid #8b5cf6; }

/* Sub-text on stat cards */
.rp-stat-sub {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-stat-denom {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Progress bar in MIM table cells */
.rp-mim-progress {
    height: 5px;
    background: var(--bg-secondary, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
    width: 80px;
}
.rp-mim-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Status badges */
.rp-mim-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.rp-mim-status-ok     { background: #dcfce7; color: #166534; }
.rp-mim-status-warn   { background: #fef9c3; color: #854d0e; }
.rp-mim-status-behind { background: #fee2e2; color: #991b1b; }

/* Admin button */
.btn-mim { background: #e91e8c; color: #fff; border-color: #e91e8c; }
.btn-mim:hover { background: #c2185b; border-color: #c2185b; }
.btn-mim-zero { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-mim-zero:hover { background: #dc2626; border-color: #dc2626; }

/* Dark mode overrides */
[data-theme="dark"] .rp-mim-nudge {
    background: #4a0728;
    border-color: #9d174d;
    color: #f9a8d4;
}
[data-theme="dark"] .rp-mim-status-ok     { background: #14532d; color: #86efac; }
[data-theme="dark"] .rp-mim-status-warn   { background: #422006; color: #fde68a; }
[data-theme="dark"] .rp-mim-status-behind { background: #450a0a; color: #fca5a5; }

/* ===== PRODUCT FOCUS TOGGLE ===== */
.rp-product-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.rp-product-toggle-btn {
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 2px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    color: var(--text-secondary, #64748b);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.rp-product-toggle-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
}
.rp-product-toggle-btn.active-mim {
    background: #e91e8c;
    border-color: #e91e8c;
    color: #fff;
}
.rp-product-toggle-btn.active-hint {
    background: #ff8c00;
    border-color: #ff8c00;
    color: #fff;
}
.rp-product-toggle-btn.active-tablet {
    background: #00bcd4;
    border-color: #00bcd4;
    color: #fff;
}
.rp-product-toggle-btn.active-voice {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #fff;
}
[data-theme="dark"] .rp-product-toggle-btn {
    background: var(--bg-card, #1e293b);
    border-color: #334155;
    color: #94a3b8;
}
[data-theme="dark"] .rp-product-toggle-btn:hover {
    border-color: #818cf8;
    color: #818cf8;
}

/* Tablet Focus stat cards */
.rp-tablet-stat-stores { border-top: 3px solid #22c55e; }
.rp-tablet-stat-reps   { border-top: 3px solid #8b5cf6; }
.rp-tablet-stat-avg    { border-top: 3px solid #00bcd4; }

/* Tablet highlight cells */
.rp-color-tablet-cell { color: #00bcd4; font-weight: 700; }

/* Tablet status badges */
.rp-tablet-status {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.rp-tablet-status-ok     { background: #dcfce7; color: #166534; }
.rp-tablet-status-warn   { background: #fef9c3; color: #854d0e; }
.rp-tablet-status-behind { background: #fee2e2; color: #991b1b; }
.rp-tablet-status-met    { background: #e0f2fe; color: #0369a1; }
[data-theme="dark"] .rp-tablet-status-ok     { background: #14532d; color: #86efac; }
[data-theme="dark"] .rp-tablet-status-warn   { background: #422006; color: #fde68a; }
[data-theme="dark"] .rp-tablet-status-behind { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .rp-tablet-status-met    { background: #0c4a6e; color: #7dd3fc; }

/* ===== HINT FOCUS TAB ===== */

/* Tab button — orange active */
#rpHintTab.active {
    background: #ff8c00;
    color: #fff;
    border-color: #ff8c00;
}
#rpHintTab:not(.active):hover {
    border-color: #ff8c00;
    color: #ff8c00;
}

/* Upload nudge banner */
.rp-hint-nudge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #9a3412;
    text-align: center;
}
.rp-hint-nudge-sub {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* HINT stat cards */
.rp-hint-stat-stores { border-top: 3px solid #22c55e; }
.rp-hint-stat-conv   { border-top: 3px solid #14b8a6; }
.rp-hint-stat-reps   { border-top: 3px solid #8b5cf6; }

/* HINT highlight cells */
.rp-color-hint-cell { color: #ff8c00; }

/* Admin buttons */
.btn-hint { background: #ff8c00; color: #fff; border-color: #ff8c00; }
.btn-hint:hover { background: #e67e00; border-color: #e67e00; }
.btn-hint-zero { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-hint-zero:hover { background: #dc2626; border-color: #dc2626; }

/* Dark mode overrides */
[data-theme="dark"] .rp-hint-nudge {
    background: #431407;
    border-color: #9a3412;
    color: #fdba74;
}

/* ===== COMMISSION TAB ===== */

/* Tab button — gold active */
#rpCommTab.active {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
}
#rpCommTab:not(.active):hover {
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Commission stat cards */
.rp-comm-stat-total    { border-top: 3px solid #22c55e; }
.rp-comm-stat-eligible { border-top: 3px solid #22c55e; }
.rp-comm-stat-avg      { border-top: 3px solid #14b8a6; }
.rp-comm-stat-payout   { border-top: 3px solid #f59e0b; }

/* $100 Threshold Progress Grid */
.rp-comm-threshold-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
}
@media (max-width: 1024px) {
    .rp-comm-threshold-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rp-comm-threshold-grid { grid-template-columns: 1fr; }
}

/* Individual threshold card */
.rp-comm-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.rp-comm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.rp-comm-card-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #1e293b);
}
.rp-comm-card-store {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
}
.rp-comm-card-amount {
    font-weight: 700;
    font-size: 1rem;
    text-align: right;
    white-space: nowrap;
}
.rp-comm-card-amount.eligible { color: #22c55e; }
.rp-comm-card-amount.close    { color: #f59e0b; }
.rp-comm-card-amount.below    { color: #ef4444; }

/* Progress bar */
.rp-comm-bar-track {
    height: 8px;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.rp-comm-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.rp-comm-bar-fill.eligible { background: #22c55e; }
.rp-comm-bar-fill.close    { background: #f59e0b; }
.rp-comm-bar-fill.below    { background: #ef4444; }

/* Progress label */
.rp-comm-card-status {
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rp-comm-card-status.eligible { color: #22c55e; }
.rp-comm-card-status.close    { color: #f59e0b; }
.rp-comm-card-status.below    { color: #ef4444; }

/* Commission table — status badge */
.rp-comm-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}
.rp-comm-badge.eligible { background: #dcfce7; color: #166534; }
.rp-comm-badge.close    { background: #fef3c7; color: #92400e; }
.rp-comm-badge.below    { background: #fee2e2; color: #991b1b; }

/* Mini progress bar in table */
.rp-comm-mini-bar {
    width: 60px;
    height: 6px;
    background: var(--bg-secondary, #e5e7eb);
    border-radius: 3px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.rp-comm-mini-fill {
    height: 100%;
    border-radius: 3px;
}
.rp-comm-mini-fill.eligible { background: #22c55e; }
.rp-comm-mini-fill.close    { background: #f59e0b; }
.rp-comm-mini-fill.below    { background: #ef4444; }

/* Dark mode overrides for commission */
[data-theme="dark"] .rp-comm-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .rp-comm-badge.eligible { background: #166534; color: #bbf7d0; }
[data-theme="dark"] .rp-comm-badge.close    { background: #78350f; color: #fde68a; }
[data-theme="dark"] .rp-comm-badge.below    { background: #7f1d1d; color: #fecaca; }

/* ===== GOAL TRACKER TAB ===== */

.rp-goal-tab.active { background: #6366f1 !important; color: #fff !important; border-color: #6366f1 !important; }

.rp-goal-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Progress bars in table cells */
.rp-goal-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}
.rp-goal-bar-track {
    height: 6px;
    background: var(--bg-secondary, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}
.rp-goal-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.rp-goal-bar-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.rp-goal-bar-lg {
    height: 10px;
    border-radius: 5px;
}

/* Table styling — matches .rp-table density */
.rp-goal-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.rp-goal-table td { padding: 0.3rem 0.3rem; text-align: right; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.rp-goal-table th { background: var(--bg-hover); padding: 0.35rem 0.3rem; text-align: right; font-weight: 700; font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.15px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; border-bottom: 2px solid var(--border-dark); user-select: none; }
.rp-goal-table th:hover { background: var(--border-color); }
.rp-goal-table th:first-child, .rp-goal-table td:first-child { text-align: left; }
.rp-goal-table th:nth-child(2), .rp-goal-table td:nth-child(2) { text-align: center; }
.rp-goal-table tr:hover { background: var(--bg-hover); }
.rp-goal-table .rp-name-cell { text-align: left !important; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-goal-table .rp-store-cell { text-align: center !important; font-weight: 400; font-size: 0.7em; color: var(--text-secondary, #9ca3af); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2px !important; padding-right: 2px !important; }
.rp-goal-projected { color: var(--text-secondary); font-size: 0.75rem; font-style: italic; }
.rp-goal-projected-col { min-width: 60px; }

/* Row tinting by goal status */
.rp-goal-row-on-track { background: rgba(34,197,94,0.06); }
.rp-goal-row-close { background: rgba(245,158,11,0.06); }
.rp-goal-row-behind { background: rgba(239,68,68,0.06); }
.rp-goal-row-on-track:hover { background: rgba(34,197,94,0.12) !important; }
.rp-goal-row-close:hover { background: rgba(245,158,11,0.12) !important; }
.rp-goal-row-behind:hover { background: rgba(239,68,68,0.12) !important; }

/* Stat card border colors */
.rp-goal-stat-green { border-top: 3px solid #22c55e !important; }
.rp-goal-stat-amber { border-top: 3px solid #f59e0b !important; }
.rp-goal-stat-red { border-top: 3px solid #ef4444 !important; }

/* Status badges */
.rp-goal-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.rp-goal-status-on-track  { background: #dcfce7; color: #166534; }
.rp-goal-status-close      { background: #fef9c3; color: #854d0e; }
.rp-goal-status-behind     { background: #fee2e2; color: #991b1b; }

/* Store drill-down */
.rp-goal-store-clickable { cursor: pointer; }
.rp-goal-store-clickable:hover { background: var(--bg-secondary, #f8fafc); }
.rp-goal-drill-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.7rem;
}
.rp-goal-expanded .rp-goal-drill-arrow { transform: rotate(90deg); }
.rp-goal-drilldown-row {
    background: var(--bg-secondary, #f8fafc);
    border-left: 3px solid #6366f1;
}
.rp-goal-drill-name {
    padding-left: 1.2rem !important;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Hero card (rep role) */
.rp-goal-hero-card {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #6366f1 100%);
    border-radius: 12px;
    padding: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
}
.rp-goal-hero-greeting {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.rp-goal-hero-status {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}
.rp-goal-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.rp-goal-hero-metric {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
}
.rp-goal-hero-metric-name {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}
.rp-goal-hero-metric-nums {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.rp-goal-hero-metric-pace {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 0.5rem;
}
.rp-goal-hero-footer {
    font-size: 0.72rem;
    opacity: 0.6;
    text-align: center;
}
.rp-goal-hero-card .rp-goal-bar-track {
    background: rgba(255, 255, 255, 0.2);
}
.rp-goal-hero-card .rp-stat-denom {
    color: rgba(255, 255, 255, 0.6);
}

/* Dark mode */
[data-theme="dark"] .rp-goal-table th { background: rgba(102, 126, 234, 0.12); }
[data-theme="dark"] .rp-goal-table tbody tr:hover { background: var(--bg-hover); }
[data-theme="dark"] .rp-goal-row-on-track { background: rgba(34,197,94,0.08); }
[data-theme="dark"] .rp-goal-row-close { background: rgba(245,158,11,0.08); }
[data-theme="dark"] .rp-goal-row-behind { background: rgba(239,68,68,0.08); }
[data-theme="dark"] .rp-goal-row-on-track:hover { background: rgba(34,197,94,0.15) !important; }
[data-theme="dark"] .rp-goal-row-close:hover { background: rgba(245,158,11,0.15) !important; }
[data-theme="dark"] .rp-goal-row-behind:hover { background: rgba(239,68,68,0.15) !important; }
[data-theme="dark"] .rp-goal-status-on-track  { background: #14532d; color: #86efac; }
[data-theme="dark"] .rp-goal-status-close      { background: #422006; color: #fde68a; }
[data-theme="dark"] .rp-goal-status-behind     { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .rp-goal-store-clickable:hover { background: var(--bg-card, #1e293b); }
[data-theme="dark"] .rp-goal-drilldown-row { background: var(--bg-card, #1e293b); }

/* ===== REP PERFORMANCE RESPONSIVE ===== */

@media (max-width: 1024px) {
    .rp-stats-row { grid-template-columns: repeat(3, 1fr); }
    .rp-tops-grid { grid-template-columns: repeat(2, 1fr); }
    .rp-charts-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #repPerfView { padding: 0 1rem 1.5rem; }
    .rp-stats-row { grid-template-columns: repeat(2, 1fr); }
    .rp-tops-grid { grid-template-columns: 1fr; }
    .rp-csat-stats { grid-template-columns: repeat(2, 1fr); }
    .rp-header { flex-direction: column; gap: 0.5rem; }
    .rp-header-right {
        flex-direction: row;
        align-items: center;
        align-self: stretch;
        justify-content: space-between;
    }
    .rp-month-select { min-width: 0; flex: 1; }
    .rp-stat-value { font-size: 1.25rem; }
    .csat-feedback { max-width: 150px; }
    .rp-goal-hero-grid { grid-template-columns: 1fr; }
    .rp-goal-hero-metric-nums { font-size: 1.1rem; }
    .rp-goal-cell { min-width: 70px; }

    /* Sub-tab bar: make scrollable horizontally on mobile (6 tabs overflow) */
    .rp-subtabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .rp-subtabs::-webkit-scrollbar { display: none; }
    .rp-subtabs .inline-flex-pill { display: flex; width: max-content; min-width: 100%; }

    /* Product Focus toggle: wrap to 2-per-row on mobile */
    .rp-product-toggle { gap: 0.4rem; }
    .rp-product-toggle-btn { flex: 1 1 calc(50% - 0.4rem); text-align: center; font-size: 0.82rem; padding: 0.4rem 0.6rem; }

    /* Product Focus tables: enforce min-width so columns stay readable */
    #rpMimContent .rp-table,
    #rpHintContent .rp-table,
    #rpTabletContent .rp-table,
    #rpVoiceContent .rp-table { min-width: 420px; }
}

/* ============================================
   LANDING PAGE
   ============================================ */
.landing-page {
    padding: 1.5rem 0;
}
.landing-greeting-text {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.landing-date {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
.landing-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.landing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.landing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.landing-card.critical::before { background: var(--accent-critical); }
.landing-card.warning::before { background: var(--accent-warning); }
.landing-card.success::before { background: var(--accent-success); }
.landing-card.info::before { background: var(--accent-info); }
.landing-card:hover {
    border-color: var(--accent-purple);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.landing-card-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}
.landing-card-value.critical { color: var(--accent-critical); }
.landing-card-value.warning { color: var(--accent-warning); }
.landing-card-value.success { color: var(--accent-success); }
.landing-card-value.info { color: var(--accent-info); }
.landing-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.landing-quick-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.landing-action-btn {
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.landing-action-btn:hover {
    border-color: var(--accent-purple);
    background: var(--bg-hover);
}
.landing-section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}
.landing-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.landing-activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.8125rem;
}
.landing-activity-icon { font-size: 1rem; flex-shrink: 0; }
.landing-activity-text { flex: 1; color: var(--text-primary); }
.landing-activity-time { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.landing-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .landing-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .landing-greeting-text { font-size: 1.375rem; }
}
@media (max-width: 480px) {
    .landing-summary-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .landing-card { padding: 1rem; }
    .landing-card-value { font-size: 1.5rem; }
}

/* ============================================
   REAL-TIME DAILY REPORT
   ============================================ */

/* Header */
.rt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
.rt-header-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rt-header-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rt-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0; }

/* Today / Yesterday day tabs */
.rt-day-tabs { display: flex; gap: 0.25rem; background: var(--bg-secondary); border-radius: 8px; padding: 3px; width: fit-content; }
.rt-day-tab { padding: 0.3rem 1rem; border: none; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 600; background: transparent; color: var(--text-secondary); transition: all 0.2s; }
.rt-day-tab:hover { color: var(--text-primary); }
.rt-day-tab.active { background: #7c3aed; color: white; box-shadow: 0 1px 3px rgba(124,58,237,0.3); }
.rt-yesterday-banner { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 0.5rem 1rem; margin-bottom: 1rem; color: #92400e; font-size: 0.85rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }

/* Button style */
.btn-realtime { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); color: white !important; border: none; }
.btn-realtime:hover { background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%); }
.btn-purple { background: #7c3aed; color: white; border: none; padding: 0.5rem 1.25rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.btn-purple:hover { background: #6d28d9; }
.btn-purple:disabled { opacity: 0.5; cursor: not-allowed; }

/* Loading / Error / Empty states */
.rt-loading { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.rt-loading .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: #7c3aed; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.rt-error { text-align: center; padding: 3rem 1rem; }
.rt-empty { text-align: center; padding: 2rem 1rem; }

/* Summary Cards */
.rt-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; }
.rt-summary-card { background: var(--bg-card); border-radius: 10px; padding: 0.75rem 0.5rem; text-align: center; border-left: 4px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.rt-card-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.rt-card-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem; }
.rt-card-traffic { border-color: #06b6d4; }
.rt-card-conv { border-color: #22c55e; }
.rt-card-acts { border-color: #7c3aed; }
.rt-card-mim { border-color: #e91e8c; }
.rt-card-hint { border-color: #ff8c00; }
.rt-card-bts { border-color: #3b82f6; }
.rt-card-acc { border-color: #14b8a6; }
.rt-card-qpay { border-color: #059669; }
.rt-card-qpay-conv { border-color: #10b981; }
.rt-card-target { border-color: #8b5cf6; }
.rt-card-voice { border-color: #3730a3; }

/* RT Legend */
.rt-legend { margin-bottom: 1rem; font-size: 0.82rem; }
.rt-legend-toggle { cursor: pointer; color: var(--text-secondary); font-weight: 600; padding: 0.4rem 0.6rem; border-radius: 6px; user-select: none; display: inline-block; }
.rt-legend-toggle:hover { color: var(--text-primary); background: var(--bg-secondary); }
.rt-legend-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.5rem; margin-top: 0.6rem; padding: 0.8rem 1rem; background: var(--bg-card); border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.rt-legend-section h4 { margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-primary); border-bottom: 2px solid var(--border-color); padding-bottom: 0.2rem; }
.rt-legend-section dl { margin: 0; }
.rt-legend-section dt { font-weight: 600; color: var(--text-primary); margin-top: 0.3rem; display: inline; }
.rt-legend-section dt::after { content: ' — '; font-weight: 400; color: var(--text-secondary); }
.rt-legend-section dd { display: inline; margin: 0; color: var(--text-secondary); }
.rt-legend-section dd::after { content: ''; display: block; }
.rt-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* C2 upload badge */
.rt-c2-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #d1fae5;
    color: #047857;
    white-space: nowrap;
}

/* Weather widget */
.rt-weather {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.rt-weather-pill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    background: rgba(0,0,0,0.05);
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
}
.rt-weather-pill .wx-temp {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary, #1e293b);
}
.rt-weather-pill .wx-icon {
    font-size: 1.2rem;
}

/* GroupMe toggle */
.rt-gm-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 8px;
    background: #f3f4f6;
    white-space: nowrap;
}
.rt-gm-label {
    font-size: 0.8rem;
    padding: 0 0.25rem;
}
.rt-gm-btn {
    padding: 0.25rem 0.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
    color: #6b7280;
}
.rt-gm-btn:hover { background: #e5e7eb; color: #374151; }
.rt-gm-btn:active { transform: scale(0.95); }
.rt-gm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rt-gm-btn.rt-gm-sent { background: #d1fae5; color: #047857; }
.rt-gm-all { color: #6366f1; font-weight: 700; }
.rt-gm-all:hover { background: #e0e7ff; color: #4338ca; }
.rt-gm-boise:hover { background: #ede9fe; color: #7c3aed; }
.rt-gm-pdxs:hover { background: #dbeafe; color: #2563eb; }
.rt-gm-pdxn:hover { background: #cffafe; color: #0891b2; }
.rt-gm-salem:hover { background: #ffedd5; color: #ea580c; }
.rt-gm-eugene:hover { background: #dcfce7; color: #16a34a; }

/* C2/DASH drop zone */
.rt-c2-dropzone {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.2rem;
    border: 2px dashed #14b8a6;
    border-radius: 10px;
    background: rgba(20, 184, 166, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    user-select: none;
}
.rt-c2-dropzone:hover {
    background: rgba(20, 184, 166, 0.14);
    border-color: #0d9488;
}
.rt-c2-dropzone.rt-c2-dragover {
    background: rgba(20, 184, 166, 0.22);
    border-color: #0d9488;
    border-style: solid;
    transform: scale(1.04);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.35);
}
.rt-c2-dropzone-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0d9488;
    white-space: nowrap;
}
.rt-c2-dropzone-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 1px;
}

/* % to Target coloring */
.rt-pct-great { color: #059669; font-weight: 700; }
.rt-pct-good { color: #2563eb; font-weight: 600; }
.rt-pct-ok { color: #d97706; font-weight: 500; }
.rt-pct-low { color: #dc2626; font-weight: 500; }

/* Target columns muted style */
.rt-target { color: var(--text-secondary); font-size: 0.72rem; }

/* Table wrapper */
.rt-table-wrapper { background: var(--bg-card); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Table */
.rt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.78rem; }
.rt-table thead th {
    padding: 0.4rem 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Group header colors */
.rt-header-group .rt-group-conversion { background: #ccfbf1; color: #0f766e; }
.rt-header-group .rt-group-activation { background: #ede9fe; color: #5b21b6; }
.rt-header-group .rt-group-voice { background: #e0e7ff; color: #3730a3; }
.rt-header-group .rt-group-hint { background: #fff7ed; color: #c2410c; }
.rt-header-group .rt-group-bts { background: #dbeafe; color: #1d4ed8; }
.rt-header-group .rt-group-acc { background: #d1fae5; color: #047857; }

/* Sub-header stays neutral */
.rt-header-sub th { background: var(--bg-secondary); font-size: 0.7rem; }

/* Body cells */
.rt-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-color); }
.rt-num { text-align: center; font-variant-numeric: tabular-nums; }

/* Store name column */
.rt-col-store { text-align: left; font-weight: 500; white-space: nowrap; min-width: 140px; }
.rt-door-code { display: block; font-size: 0.65rem; color: var(--text-muted); font-weight: 400; }

/* Phase 2 placeholder columns */
.rt-phase2 { color: var(--text-muted); opacity: 0.4; font-style: italic; }


/* Conversion coloring */
.rt-conv-good { color: #059669; font-weight: 600; }
.rt-conv-ok { color: #d97706; font-weight: 500; }
.rt-conv-low { color: #dc2626; font-weight: 500; }

/* Column group dividers */
.rt-div { border-left: 2px solid var(--border-color) !important; }
.rt-grand-total .rt-div { border-left-color: rgba(255,255,255,0.2) !important; }

/* Market header row (background on td for rounded corners) */
.rt-market-header-cell { padding: 0.5rem 0.75rem; font-size: 0.82rem; letter-spacing: 0.02em; border-radius: 8px 8px 0 0; }

/* Spacer between markets */
.rt-market-spacer td { height: 1.25rem; padding: 0; border: none; background: transparent; }

/* Repeated column headers in tbody — inherit same colors as thead */
#rtTableBody .rt-header-sub th {
    position: static;
    font-size: 0.7rem;
    padding: 0.3rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}
#rtTableBody .rt-header-group th {
    position: static;
    font-size: 0.7rem;
    padding: 0.3rem 0.4rem 0.1rem;
    text-align: center;
    border-bottom: none;
    font-weight: 600;
}

/* Market summary row — background via CSS custom properties for rounded corners */
.rt-market-summary td { padding: 0.4rem 0.5rem; font-size: 0.78rem; border-bottom: 2px solid var(--border-color); background: var(--ms-bg); color: var(--ms-text); }
.rt-market-summary td:first-child { border-bottom-left-radius: 8px; }
.rt-market-summary td:last-child { border-bottom-right-radius: 8px; }

/* Grand total row — background on td for rounded corners */
.rt-grand-total td { padding: 0.5rem 0.5rem; border-bottom: none; font-size: 0.82rem; background: #1e293b; color: #f1f5f9; }
.rt-grand-total td:first-child { border-radius: 8px 0 0 8px; }
.rt-grand-total td:last-child { border-radius: 0 8px 8px 0; }

/* Timestamp badge */
.rt-ts-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 500; }
.rt-ts-badge.fresh { background: #d1fae5; color: #047857; }

/* Store row hover + drill-down */
.rt-store-row:hover { background: var(--bg-hover); }
.rt-store-clickable { cursor: pointer; }
.rt-drill-arrow {
    display: inline-block;
    font-size: 0.6rem;
    margin-right: 0.3rem;
    transition: transform 0.2s ease;
    color: var(--text-secondary);
}
.rt-drilled .rt-drill-arrow { transform: rotate(90deg); }
.rt-drilldown-rep td {
    background: rgba(139, 92, 246, 0.04);
    color: var(--text-secondary);
    font-size: 0.72rem;
    border-top: none;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}
.rt-drilldown-rep:hover td { background: var(--bg-hover); }
.rt-drilldown-rep:last-of-type td { border-bottom: 2px solid var(--border-color); }

/* Mobile responsive */
@media (max-width: 1024px) {
    .rt-legend-body { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .rt-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .rt-header-left { flex-wrap: wrap; gap: 0.5rem; }
    .rt-header-right { flex-wrap: wrap; gap: 0.5rem; }
    .rt-summary-cards { grid-template-columns: repeat(3, 1fr); }
    .rt-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .rt-table { font-size: 0.62rem; }
    .rt-table thead th { padding: 0.2rem 0.25rem; font-size: 0.58rem; }
    .rt-table td { padding: 0.15rem 0.2rem; }
    .rt-col-store { min-width: 78px; max-width: 100px; white-space: normal; word-break: break-word; font-size: 0.6rem; }
    .rt-door-code { display: none; }
    .rt-phase2 { display: none; }
    .rt-weather { display: none; }
    .rt-legend-body { grid-template-columns: 1fr; }
    .rt-num { font-size: 0.6rem; }
    .rt-target { font-size: 0.56rem; }
    .rt-div { border-left-width: 1px !important; }
    .rt-market-header-cell { font-size: 0.72rem !important; padding: 0.35rem 0.5rem !important; }
    .rt-market-summary td { font-size: 0.6rem; padding: 0.2rem 0.2rem; }
    .rt-grand-total td { font-size: 0.62rem; padding: 0.25rem 0.2rem; }
}
@media (max-width: 480px) {
    .rt-summary-cards { grid-template-columns: repeat(2, 1fr); }
    .rt-summary-cards .rt-summary-card { padding: 0.5rem 0.3rem; }
    .rt-card-value { font-size: 1.1rem; }
}

/* ============================================
   MORNING OPS STYLES
   ============================================ */

/* Header button */
.btn-morning-ops {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: white !important;
    border: none !important;
}
.btn-morning-ops:hover {
    background: linear-gradient(135deg, #047857, #059669) !important;
}

/* Header */
.mo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.mo-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}
.mo-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Summary strip */
.mo-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.mo-summary-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 2px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mo-summary-card.mo-summary-green { border-color: #22c55e; }
.mo-summary-card.mo-summary-yellow { border-color: #f59e0b; }
.mo-summary-card.mo-summary-red { border-color: #ef4444; }
.mo-summary-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}
.mo-summary-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Market card grid */
.mo-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}
.mo-market-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid var(--border-color);
}
.mo-market-header {
    padding: 0.65rem 1rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.mo-market-name {
    font-weight: 700;
    font-size: 0.9rem;
}
.mo-market-stats {
    font-size: 0.78rem;
    opacity: 0.9;
}

/* Store rows */
.mo-store-list {
    padding: 0.25rem 0;
}
.mo-store-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 0.8fr;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.mo-store-row:last-child { border-bottom: none; }
.mo-store-row:hover { background: var(--bg-hover); }
.mo-store-header-row {
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-secondary);
}
.mo-store-header-row:hover { background: var(--bg-secondary); }
.mo-store-name { font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.mo-store-alarm { text-align: center; }
.mo-store-opened { font-weight: 500; }
.mo-store-staff { text-align: center; font-weight: 600; }

/* Status dots */
.mo-dot-green, .mo-dot-yellow, .mo-dot-red, .mo-dot-gray {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mo-dot-green { background: #22c55e; }
.mo-dot-yellow { background: #f59e0b; }
.mo-dot-red { background: #ef4444; animation: mo-pulse 1.5s ease-in-out infinite; }
.mo-dot-gray { background: #9ca3af; }

@keyframes mo-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Store row status variants */
.mo-store-row-red { background: rgba(239, 68, 68, 0.04); }
.mo-store-row-yellow { background: rgba(245, 158, 11, 0.04); }

/* Alarm icons */
.mo-alarm { font-size: 0.9rem; }
.mo-alarm-unknown { opacity: 0.4; }
.mo-alarm-disarmed { color: #22c55e; }
.mo-alarm-away { color: #ef4444; }
.mo-alarm-stay { color: #f59e0b; font-weight: bold; }
.mo-alarm-na { color: #94a3b8; font-size: 0.85rem; font-weight: bold; }

/* Staff detail (expandable) */
.mo-staff-detail {
    padding: 0.25rem 1rem 0.5rem 2.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.mo-staff-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.mo-staff-name { font-weight: 500; color: var(--text-primary); }
.mo-staff-time { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; }

/* History table wrapper */
.mo-history-table-wrapper {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mo-summary-strip { grid-template-columns: repeat(2, 1fr); }
    .mo-market-grid { grid-template-columns: 1fr; }
    .mo-header { flex-direction: column; }
    .mo-store-row { grid-template-columns: 1.5fr 0.8fr 1fr 0.6fr; font-size: 0.75rem; padding: 0.4rem 0.6rem; }
    .mo-store-header-row { font-size: 0.65rem; }
    .mo-market-header { font-size: 0.78rem; }
}

/* ============================================
   GOALS MANAGER
   ============================================ */
.gm-stat { background: var(--bg-card, #fff); border-radius: 0.5rem; padding: 1rem; text-align: center; }
.gm-stat-val { font-size: 1.5rem; font-weight: 700; }
.gm-stat-lbl { font-size: 0.7rem; color: var(--text-secondary, #64748b); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }
.gm-tab { padding: 0.5rem 1rem; border: none; background: none; color: var(--text-secondary, #64748b); cursor: pointer; font-size: 0.85rem; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.gm-tab.active { color: var(--text-primary, #1e293b); border-bottom-color: #3b82f6; }
.gm-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.gm-table th { text-align: left; padding: 0.5rem 0.75rem; color: var(--text-secondary, #64748b); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border-color, #e2e8f0); }
.gm-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color, #e2e8f0); white-space: nowrap; }
.gm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.gm-table tr:hover td { background: var(--bg-hover, #f8fafc); }
.gm-input { width: 52px; padding: 0.25rem 0.3rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; font-size: 0.8rem; text-align: center; font-family: inherit; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); }
.gm-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.gm-input.gm-override { border-color: #f59e0b; background: #fffbeb; }
.gm-save-btn { background: #3b82f6; color: white; border: none; padding: 0.5rem 1.25rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; font-size: 0.85rem; }
.gm-save-btn:hover { background: #2563eb; }

/* MLB (Metro Leader Board) — reuses gm-stat/gm-table; rank percentile colors */
.mlb-good { color: #16a34a; }
.mlb-ok { color: #d97706; }
.mlb-low { color: #dc2626; }
.mlb-subrank { font-size: 0.65rem; color: var(--text-secondary, #94a3b8); }
/* Snug Store + Market to their content — auto table layout was dumping the
   table's slack width between them; numeric columns share it instead. */
.mlb-table th:nth-child(2), .mlb-table td:nth-child(2),
.mlb-table th:nth-child(3), .mlb-table td:nth-child(3) { width: 1%; }
.mlb-sortable { cursor: pointer; user-select: none; }
.mlb-sortable:hover { color: var(--text-primary, #1e293b); }
.mlb-sorted { color: var(--text-primary, #1e293b); }
[data-theme="dark"] .mlb-good { color: #4ade80; }
[data-theme="dark"] .mlb-ok { color: #fbbf24; }
[data-theme="dark"] .mlb-low { color: #f87171; }

[data-theme="dark"] .gm-stat { background: var(--bg-card, #1e293b); }
[data-theme="dark"] .gm-input { background: var(--bg-secondary, #1e293b); color: var(--text-primary, #f1f5f9); border-color: var(--border-color, #334155); }
[data-theme="dark"] .gm-input.gm-override { background: #422006; border-color: #f59e0b; }
[data-theme="dark"] .gm-table tr:hover td { background: var(--bg-hover, #334155); }

@media (max-width: 768px) {
    .gm-alloc-table { min-width: 700px; }
    .gm-input { width: 42px; font-size: 0.7rem; }
    .gm-table { font-size: 0.7rem; }
    .gm-table th, .gm-table td { padding: 0.3rem 0.4rem; }
}

/* ============================================
   SCHEDULE (Goals sub-tab)
   ============================================ */

.sch-loading, .sch-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary, #94a3b8); font-size: 0.9rem; }

.sch-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.sch-header-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sch-header-right { display: flex; align-items: center; gap: 0.75rem; }

.sch-store-select { padding: 0.4rem 0.6rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); font-size: 0.85rem; font-family: inherit; }

.sch-week-nav { display: flex; align-items: center; gap: 0.25rem; }
.sch-nav-btn { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 1rem; color: var(--text-primary, #1e293b); }
.sch-nav-btn:hover { background: var(--bg-hover, #f1f5f9); }
.sch-week-label { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

.sch-budget { padding: 0.35rem 0.75rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 700; }
.sch-budget-ok { background: #dcfce7; color: #166534; }
.sch-budget-warn { background: #fef3c7; color: #92400e; }
.sch-budget-over { background: #fecaca; color: #991b1b; }

.sch-badge { padding: 0.25rem 0.6rem; border-radius: 2rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sch-badge-published { background: #dcfce7; color: #166534; }
.sch-badge-draft { background: #fef3c7; color: #92400e; }
.sch-badge-none { background: var(--bg-hover, #f1f5f9); color: var(--text-secondary, #94a3b8); }

.sch-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sch-btn { padding: 0.4rem 0.8rem; border: none; border-radius: 0.375rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.sch-btn-secondary { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); color: var(--text-primary, #1e293b); }
.sch-btn-secondary:hover { background: var(--bg-hover, #f1f5f9); }
.sch-btn-draft { background: #f59e0b; color: white; }
.sch-btn-draft:hover { background: #d97706; }
.sch-btn-publish { background: #22c55e; color: white; }
.sch-btn-publish:hover { background: #16a34a; }
.sch-btn-danger { background: #ef4444; color: white; }
.sch-btn-danger:hover { background: #dc2626; }

/* Schedule grid */
.sch-grid-wrap { overflow-x: auto; margin-bottom: 1rem; }
.sch-grid { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.sch-grid thead th { padding: 0.5rem 0.4rem; text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #64748b); border-bottom: 2px solid var(--border-color, #e2e8f0); font-weight: 700; }
.sch-grid .sch-emp-col { text-align: left; min-width: 120px; }
.sch-grid .sch-day-col { min-width: 90px; }
.sch-grid .sch-total-col { min-width: 70px; }
.sch-day-date { font-weight: 400; font-size: 0.65rem; color: var(--text-secondary, #94a3b8); }

.sch-grid tbody td { border-bottom: 1px solid var(--border-color, #e2e8f0); vertical-align: middle; }
.sch-emp-cell { padding: 0.5rem 0.5rem; white-space: nowrap; }
.sch-emp-name { font-weight: 600; font-size: 0.8rem; }
.sch-emp-alloc { font-size: 0.65rem; color: var(--text-secondary, #94a3b8); margin-left: 0.3rem; }

.sch-shift-cell { padding: 0.35rem 0.25rem; text-align: center; cursor: pointer; transition: background 0.15s; }
.sch-shift-cell:hover { background: var(--bg-hover, #f1f5f9); }
.sch-shift-empty { }
.sch-shift-empty .sch-add-icon { font-size: 1.1rem; color: var(--text-secondary, #cbd5e1); font-weight: 300; }
.sch-shift-empty:hover .sch-add-icon { color: #3b82f6; }

.sch-shift-pill { background: #eff6ff; color: #1e40af; padding: 0.15rem 0.35rem; border-radius: 0.25rem; font-size: 0.72rem; font-weight: 600; display: inline-block; }
.sch-shift-hrs { font-size: 0.65rem; color: var(--text-secondary, #64748b); margin-top: 0.1rem; }
.sch-shift-note { font-size: 0.6rem; color: #f59e0b; font-style: italic; margin-top: 0.1rem; }

.sch-total-cell { padding: 0.5rem 0.4rem; text-align: center; font-weight: 600; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sch-hrs-over { color: #ef4444; }

.sch-today { background: rgba(59, 130, 246, 0.06); }
.sch-totals-row td { border-top: 2px solid var(--border-color, #e2e8f0); background: var(--bg-hover, #f8fafc); font-size: 0.72rem; text-align: center; padding: 0.4rem; }
.sch-day-total { font-variant-numeric: tabular-nums; }

.sch-add-emp { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1.5rem; }

/* Shift editor overlay */
.sch-editor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.sch-editor { background: var(--bg-card, #fff); border-radius: 0.75rem; width: 90%; max-width: 400px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); overflow: hidden; }
.sch-editor-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--bg-secondary, #f1f5f9); font-weight: 700; font-size: 0.9rem; }
.sch-editor-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-secondary, #64748b); padding: 0 0.25rem; }
.sch-editor-body { padding: 1rem; }

.sch-templates { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.sch-tpl-btn { padding: 0.3rem 0.6rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 2rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); font-size: 0.72rem; cursor: pointer; font-family: inherit; font-weight: 600; }
.sch-tpl-btn:hover { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }

.sch-editor-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.sch-editor-row label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary, #64748b); min-width: 40px; }
.sch-editor-row input[type="time"], .sch-editor-row select, .sch-editor-row input[type="text"] {
    padding: 0.35rem 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem;
    font-size: 0.8rem; font-family: inherit; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b);
}
.sch-editor-row input[type="time"]:focus, .sch-editor-row select:focus, .sch-editor-row input[type="text"]:focus {
    outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}
.sch-editor-row input[type="text"] { flex: 1; }
.sch-calc-hours { font-weight: 700; font-size: 0.9rem; color: #3b82f6; min-width: 40px; }

.sch-editor-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color, #e2e8f0); }

/* Dark mode */
[data-theme="dark"] .sch-store-select, [data-theme="dark"] .sch-nav-btn { background: var(--bg-secondary, #1e293b); color: var(--text-primary, #f1f5f9); border-color: var(--border-color, #334155); }
[data-theme="dark"] .sch-nav-btn:hover { background: var(--bg-hover, #334155); }
[data-theme="dark"] .sch-budget-ok { background: #14532d; color: #86efac; }
[data-theme="dark"] .sch-budget-warn { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .sch-budget-over { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .sch-badge-published { background: #14532d; color: #86efac; }
[data-theme="dark"] .sch-badge-draft { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .sch-badge-none { background: var(--bg-hover, #334155); }
[data-theme="dark"] .sch-btn-secondary { background: var(--bg-secondary, #1e293b); border-color: var(--border-color, #334155); color: var(--text-primary, #f1f5f9); }
[data-theme="dark"] .sch-btn-secondary:hover { background: var(--bg-hover, #334155); }
[data-theme="dark"] .sch-shift-pill { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .sch-shift-cell:hover { background: var(--bg-hover, #334155); }
[data-theme="dark"] .sch-today { background: rgba(59, 130, 246, 0.1); }
[data-theme="dark"] .sch-totals-row td { background: var(--bg-hover, #334155); }
[data-theme="dark"] .sch-editor { background: var(--bg-card, #1e293b); }
[data-theme="dark"] .sch-editor-header { background: var(--bg-secondary, #0f172a); color: var(--text-primary, #f1f5f9); }
[data-theme="dark"] .sch-tpl-btn { background: var(--bg-secondary, #1e293b); border-color: var(--border-color, #334155); color: var(--text-primary, #f1f5f9); }
[data-theme="dark"] .sch-tpl-btn:hover { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
[data-theme="dark"] .sch-editor-row input[type="time"], [data-theme="dark"] .sch-editor-row select, [data-theme="dark"] .sch-editor-row input[type="text"] {
    background: var(--bg-secondary, #0f172a); color: var(--text-primary, #f1f5f9); border-color: var(--border-color, #334155);
}

/* Mobile */
@media (max-width: 768px) {
    .sch-header { flex-direction: column; align-items: flex-start; }
    .sch-header-left, .sch-header-right { width: 100%; }
    .sch-header-right { justify-content: flex-start; }
    .sch-actions { flex-wrap: wrap; }
    .sch-grid { font-size: 0.7rem; min-width: 700px; }
    .sch-grid .sch-day-col { min-width: 75px; }
    .sch-shift-pill { font-size: 0.65rem; }
    .sch-editor { width: 95%; max-width: none; }
}

/* ============================================
   GAME CONSOLE
   ============================================ */

.gc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.gc-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Setup row — rep, store, sale type */
.gc-setup {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
}
.gc-setup-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.gc-field { flex: 1; min-width: 140px; }
.gc-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    letter-spacing: 0.04em;
}
.gc-select {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.gc-store-display {
    padding: 0.5rem 0.6rem;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 2.1rem;
    display: flex;
    align-items: center;
}
.gc-sale-btns { display: flex; gap: 0.4rem; }
.gc-sale-btn {
    padding: 0.45rem 0.8rem;
    border: 2px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.gc-sale-btn:hover { border-color: #8b5cf6; }
.gc-sale-btn.active {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
}

/* GroupMe Mute Toggle */
.gc-mute-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.6rem;
}
.gc-mute-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.gc-mute-label.muted { color: #d97706; }
.gc-mute-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #22c55e;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s;
    border: none;
    padding: 0;
}
.gc-mute-switch.muted { background: #d97706; }
.gc-mute-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}
.gc-mute-switch.muted::after { transform: translateX(20px); }

/* Game cards grid */
.gc-games-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.gc-game-card {
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0.7rem 0.3rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.gc-game-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}
.gc-game-card.active {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
}
.gc-game-icon { font-size: 1.6rem; margin-bottom: 0.2rem; }
.gc-game-name { font-weight: 600; font-size: 0.75rem; color: var(--text-primary); }
.gc-game-desc { font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.1rem; }

/* RPS buttons */
.gc-rps-btn {
    font-size: 2.5rem;
    padding: 0.8rem 1.2rem;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: all 0.15s;
}
.gc-rps-btn:hover { border-color: #8b5cf6; transform: scale(1.1); }

/* High Card display */
.gc-highcard-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    font-size: 3rem;
    padding: 1.5rem;
}
.gc-card-slot {
    width: 80px;
    height: 110px;
    background: var(--bg-secondary, #f1f5f9);
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
}
.gc-card-slot.win { border-color: #22c55e; background: rgba(34,197,94,0.1); }
.gc-card-slot.lose { border-color: #ef4444; background: rgba(239,68,68,0.1); }

/* Treasure Chest buttons */
.gc-treasure-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    max-width: 400px;
    margin: 0 auto;
}
.gc-treasure-btn {
    font-size: 2.5rem;
    padding: 1rem;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: all 0.2s;
}
.gc-treasure-btn:hover { border-color: #8b5cf6; transform: scale(1.05); }
.gc-treasure-btn.gold { border-color: #eab308; background: rgba(234,179,8,0.15); animation: gc-pulse 0.5s ease; }
.gc-treasure-btn.empty { border-color: #ef4444; background: rgba(239,68,68,0.1); opacity: 0.7; }
.gc-treasure-btn.hidden-gold { border-color: #22c55e; background: rgba(34,197,94,0.1); }

/* Scratch Card grid */
.gc-scratch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 280px;
    margin: 0 auto;
}
.gc-scratch-cell {
    width: 80px;
    height: 80px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    cursor: pointer;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    user-select: none;
}
.gc-scratch-cell:hover:not(.revealed) { transform: scale(1.05); }
.gc-scratch-cell.revealed {
    background: var(--bg-secondary, #f8fafc);
    cursor: default;
}
.gc-scratch-cell.match { border-color: #22c55e; background: rgba(34,197,94,0.15); }

/* Blackjack table */
.gc-bj-table {
    background: #0d5e2d;
    border-radius: 16px;
    padding: 1.5rem;
    color: #fff;
    max-width: 500px;
    margin: 0 auto;
}
.gc-bj-hand {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}
.gc-bj-card {
    background: #fff;
    color: #1e293b;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.gc-bj-card.red { color: #dc2626; }
.gc-bj-card.facedown { background: #1e40af; color: #fff; }
.gc-bj-label { font-size: 0.85rem; opacity: 0.8; margin-bottom: 0.2rem; }
.gc-bj-total { font-weight: 700; font-size: 1.1rem; margin-top: 0.3rem; }
.gc-bj-actions { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1rem; }
.gc-bj-btn {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
    transition: transform 0.1s;
}
.gc-bj-btn:hover { transform: scale(1.05); }
.gc-bj-btn.hit { background: #22c55e; color: #fff; }
.gc-bj-btn.stand { background: #ef4444; color: #fff; }

/* Monty Hall doors */
.gc-door-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 360px;
    margin: 0 auto;
}
.gc-door-btn {
    font-size: 3rem;
    padding: 1rem;
    border: 3px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.gc-door-btn:hover:not(.opened) { border-color: #8b5cf6; transform: scale(1.05); }
.gc-door-btn.selected { border-color: #8b5cf6; background: rgba(139,92,246,0.1); }
.gc-door-btn.opened { cursor: default; opacity: 0.9; }
.gc-door-btn.prize { border-color: #22c55e; background: rgba(34,197,94,0.15); }
.gc-door-btn.goat { border-color: #ef4444; background: rgba(239,68,68,0.1); }
.gc-mh-actions { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1rem; }
.gc-mh-btn {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
}
.gc-mh-btn.switch { background: #8b5cf6; color: #fff; }
.gc-mh-btn.stay { background: #6b7280; color: #fff; }

/* Spin to 100 */
.gc-spin100-display {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0.5rem 0;
}
.gc-spin100-bar {
    width: 100%;
    max-width: 300px;
    height: 14px;
    background: var(--bg-secondary, #e5e7eb);
    border-radius: 7px;
    margin: 0.5rem auto;
    overflow: hidden;
}
.gc-spin100-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
    border-radius: 7px;
    transition: width 0.5s ease;
}
.gc-spin100-actions { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1rem; }
.gc-spin100-btn {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
}
.gc-spin100-btn.spin { background: #22c55e; color: #fff; }
.gc-spin100-btn.stay { background: #ef4444; color: #fff; }

/* Plinko canvas */
.gc-plinko-canvas {
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    background: #1e293b;
}

/* Shared game pulse animation */
@keyframes gc-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Play area */
.gc-play-area {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
    text-align: center;
}
.gc-play-rep {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.gc-guess-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    font-weight: 500;
}

/* Number grid (dice/pick) */
.gc-number-grid { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.gc-num-btn {
    width: 48px;
    height: 48px;
    border: 2px solid var(--border-color, #d1d5db);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.gc-num-btn:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.05); }
.gc-num-btn.active {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
    transform: scale(1.1);
}

/* Coin/HL buttons */
.gc-coin-btns { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 1rem; }
.gc-coin-btn {
    padding: 0.6rem 1.5rem;
    border: 2px solid var(--border-color, #d1d5db);
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.gc-coin-btn:hover { border-color: #8b5cf6; }
.gc-coin-btn.active {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
}

/* Higher/Lower number display */
.gc-hl-number {
    font-size: 3rem;
    font-weight: 800;
    color: #8b5cf6;
    margin: 0.5rem 0;
}

/* Slot machine display */
.gc-slots-display {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.gc-slot-reel {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    border: 3px solid var(--border-color, #d1d5db);
    border-radius: 10px;
    background: var(--bg-primary);
    transition: border-color 0.3s;
}
.gc-slot-stopped { border-color: #8b5cf6; }

/* Wheel */
.gc-wheel-wrapper {
    position: relative;
    display: inline-block;
    margin: 0.5rem 0 1rem;
}
.gc-wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: #ef4444;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#gcWheelCanvas { display: block; margin: 0 auto; }

/* Play button */
.gc-play-btn {
    padding: 0.7rem 2rem;
    background: #8b5cf6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}
.gc-play-btn:hover:not(:disabled) { background: #7c3aed; transform: translateY(-1px); }
.gc-play-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gc-play-actions { margin-top: 0.8rem; }

/* Animation displays */
.gc-dice-anim, .gc-coin-anim, .gc-pick-anim, .gc-hl-anim {
    font-size: 3rem;
    font-weight: 800;
    padding: 1rem;
    animation: gc-pulse 0.1s ease-in-out;
}
@keyframes gc-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Result display */
.gc-result {
    padding: 1.2rem;
    border-radius: 12px;
    margin-top: 1rem;
}
.gc-result-win {
    background: rgba(34, 197, 94, 0.1);
    border: 2px solid #22c55e;
}
.gc-result-loss {
    background: rgba(239, 68, 68, 0.06);
    border: 2px solid #ef4444;
}
.gc-result-display {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
    white-space: pre-line;
}
.gc-result-text {
    font-size: 1.1rem;
    font-weight: 700;
}
.gc-result-win .gc-result-text { color: #22c55e; }
.gc-result-loss .gc-result-text { color: #ef4444; }
.gc-result-prize {
    font-size: 0.9rem;
    color: #f59e0b;
    font-weight: 600;
    margin-top: 0.3rem;
}

/* Section header + config */
.gc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.gc-config-btn {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}
.gc-config-btn:hover { border-color: #8b5cf6; }

/* History */
.gc-history {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
}
.gc-history-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    font-size: 0.78rem;
}
.gc-history-row:last-child { border-bottom: none; }
.gc-win-badge {
    background: #22c55e;
    color: #fff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
}
.gc-loss-badge {
    background: #ef4444;
    color: #fff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 32px;
    text-align: center;
}
.gc-hist-game { font-weight: 600; min-width: 60px; color: var(--text-primary); }
.gc-hist-rep { font-weight: 500; color: var(--text-primary); flex: 1; }
.gc-hist-store { color: var(--text-secondary); font-size: 0.72rem; }
.gc-hist-sale { color: #8b5cf6; font-weight: 600; font-size: 0.72rem; }
.gc-hist-result { color: var(--text-secondary); font-size: 0.72rem; }
.gc-hist-time { color: var(--text-secondary); font-size: 0.68rem; margin-left: auto; }

/* Wheel config */
.gc-wheel-config {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
}
.gc-wc-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}
.gc-wc-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
}
.gc-wc-color { width: 36px; height: 32px; border: none; border-radius: 6px; cursor: pointer; padding: 0; }
.gc-wc-label {
    flex: 1;
    padding: 0.4rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.gc-wc-weight {
    width: 50px;
    padding: 0.4rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.gc-wc-del {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gc-wc-del:hover { background: rgba(239, 68, 68, 0.2); }
.gc-wc-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.gc-wc-add, .gc-wc-reset {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}
.gc-wc-add:hover { border-color: #22c55e; color: #22c55e; }
.gc-wc-reset:hover { border-color: #ef4444; color: #ef4444; }

/* Broadcast message section */
.gc-broadcast-section {
    background: var(--bg-card, #fff);
    border: 2px dashed #8b5cf6;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.gc-broadcast-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem 1rem; cursor: pointer; user-select: none;
}
.gc-broadcast-header:hover { background: rgba(139, 92, 246, 0.05); }
.gc-broadcast-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.gc-broadcast-arrow { font-size: 0.7rem; color: var(--text-secondary); transition: transform 0.2s; }
.gc-broadcast-body { padding: 0 1rem 1rem; }
.gc-broadcast-sender { margin-bottom: 0.6rem; }
.gc-sender-btns { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.gc-sender-btn {
    padding: 0.35rem 1rem; border: 2px solid #d1d5db; border-radius: 20px;
    background: transparent; color: var(--text-primary); font-size: 0.8rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.gc-sender-btn.active {
    background: #8b5cf6; border-color: #8b5cf6; color: #fff;
}
.gc-sender-btn:hover:not(.active) { border-color: #8b5cf6; color: #8b5cf6; }
.gc-broadcast-textarea {
    width: 100%; min-height: 80px; padding: 0.6rem; box-sizing: border-box;
    border: 1px solid var(--border-color, #d1d5db); border-radius: 8px;
    font-size: 0.85rem; font-family: inherit; resize: vertical;
    background: var(--bg-primary, #fff); color: var(--text-primary);
}
.gc-broadcast-textarea:focus {
    outline: none; border-color: #8b5cf6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.gc-broadcast-footer {
    display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem;
}
.gc-char-count { font-size: 0.7rem; color: var(--text-secondary); }
.gc-broadcast-btn {
    padding: 0.5rem 1.2rem; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7); color: #fff;
    font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.gc-broadcast-btn:hover { background: linear-gradient(135deg, #7c3aed, #9333ea); transform: translateY(-1px); }
.gc-broadcast-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Searchable rep dropdown */
.gc-rep-search-wrap { position: relative; width: 100%; }
.gc-rep-search {
    width: 100%; padding: 0.5rem 0.7rem; box-sizing: border-box;
    border: 1px solid var(--border-color, #d1d5db); border-radius: 8px;
    font-size: 0.85rem; background: var(--bg-primary, #fff); color: var(--text-primary);
}
.gc-rep-search:focus {
    outline: none; border-color: #8b5cf6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.gc-rep-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    max-height: 220px; overflow-y: auto;
    background: var(--bg-card, #fff); border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px; margin-top: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.gc-rep-dd-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.45rem 0.7rem; cursor: pointer; transition: background 0.1s;
}
.gc-rep-dd-item:hover { background: rgba(139, 92, 246, 0.08); }
.gc-rep-dd-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.gc-rep-dd-store { font-size: 0.7rem; color: var(--text-secondary); }
.gc-rep-dd-empty { padding: 0.6rem; text-align: center; font-size: 0.8rem; color: var(--text-secondary); }

/* Broadcast media buttons */
.gc-broadcast-media-btns {
    display: flex; gap: 0.4rem; margin-top: 0.5rem;
}
.gc-media-btn {
    padding: 0.3rem 0.8rem; border: 2px solid #d1d5db; border-radius: 8px;
    background: transparent; color: var(--text-primary); font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.gc-gif-btn { letter-spacing: 0.5px; }
.gc-media-btn:hover { border-color: #8b5cf6; color: #8b5cf6; }

/* Broadcast media preview */
.gc-broadcast-preview {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.5rem; padding: 0.5rem;
    background: var(--bg-secondary, #f8fafc); border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
}
.gc-broadcast-preview img {
    max-height: 120px; max-width: 200px; border-radius: 6px; object-fit: contain;
}
.gc-preview-remove {
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: #ef4444; color: #fff; font-size: 0.8rem;
    cursor: pointer; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center; transition: background 0.2s;
}
.gc-preview-remove:hover { background: #dc2626; }

/* GIF search panel */
.gc-gif-panel {
    margin-top: 0.5rem; padding: 0.6rem;
    background: var(--bg-secondary, #f8fafc); border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
}
.gc-gif-search-row {
    display: flex; gap: 0.4rem; margin-bottom: 0.5rem;
}
.gc-gif-search-input {
    flex: 1; padding: 0.4rem 0.6rem; border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px; font-size: 0.8rem; background: var(--bg-primary, #fff);
    color: var(--text-primary);
}
.gc-gif-search-input:focus {
    outline: none; border-color: #8b5cf6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.gc-gif-search-btn {
    padding: 0.4rem 0.8rem; border: none; border-radius: 6px;
    background: #8b5cf6; color: #fff; font-size: 0.8rem;
    font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.gc-gif-search-btn:hover { background: #7c3aed; }
.gc-gif-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem;
    max-height: 300px; overflow-y: auto;
}
.gc-gif-item {
    width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px;
    cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s;
    display: block;
}
.gc-gif-item:hover { border-color: #8b5cf6; }
.gc-gif-empty, .gc-gif-loading {
    grid-column: 1 / -1; text-align: center; padding: 1rem;
    color: var(--text-secondary); font-size: 0.8rem;
}
.gc-gif-attribution {
    text-align: right; font-size: 0.6rem; color: var(--text-secondary);
    margin-top: 0.3rem; opacity: 0.7;
}

/* Drag-and-drop state */
.gc-broadcast-body.gc-drag-over {
    outline: 2px dashed #7c3aed;
    outline-offset: -4px;
    background: rgba(124, 58, 237, 0.06);
    border-radius: 8px;
}

/* Contest Tracker Section */
.gc-contest-section {
    background: var(--bg-card, #fff);
    border: 2px dashed #f59e0b;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.gc-contest-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem 1rem; cursor: pointer; user-select: none;
}
.gc-contest-header:hover { background: rgba(245, 158, 11, 0.05); }
.gc-contest-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.gc-contest-arrow { font-size: 0.7rem; color: var(--text-secondary); transition: transform 0.2s; }
.gc-contest-body { padding: 0 1rem 1rem; }
.gc-contest-controls {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.8rem; gap: 0.5rem; flex-wrap: wrap;
}
.gc-contest-day-tabs { display: flex; gap: 0.3rem; }
.gc-contest-day-tab {
    padding: 0.35rem 0.8rem; border: 2px solid #d1d5db; border-radius: 20px;
    background: transparent; color: var(--text-primary); font-size: 0.75rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.gc-contest-day-tab.active {
    background: #f59e0b; border-color: #f59e0b; color: #fff;
}
.gc-contest-day-tab:hover:not(.active):not(:disabled) { border-color: #f59e0b; color: #f59e0b; }
.gc-contest-day-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.gc-contest-refresh-btn {
    padding: 0.35rem 0.8rem; border: 2px solid #f59e0b; border-radius: 20px;
    background: transparent; color: #f59e0b; font-size: 0.75rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.gc-contest-refresh-btn:hover { background: #f59e0b; color: #fff; }
.gc-contest-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gc-contest-empty {
    text-align: center; padding: 1.5rem; color: var(--text-secondary);
    font-size: 0.85rem; font-style: italic;
}
.gc-contest-summary {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.gc-contest-card {
    text-align: center; padding: 0.6rem 0.4rem; border-radius: 10px;
    background: var(--bg-primary, #f8fafc);
    border: 2px solid #e5e7eb;
}
.gc-contest-card-val { font-size: 1.5rem; font-weight: 700; }
.gc-contest-card-label { font-size: 0.65rem; color: var(--text-secondary); font-weight: 600; }
.gc-contest-card-jacket { border-color: #8b5cf6; }
.gc-contest-card-jacket .gc-contest-card-val { color: #8b5cf6; }
.gc-contest-card-ls { border-color: #3b82f6; }
.gc-contest-card-ls .gc-contest-card-val { color: #3b82f6; }
.gc-contest-card-total { border-color: #6b7280; }
.gc-contest-card-close { border-color: #f59e0b; }
.gc-contest-card-close .gc-contest-card-val { color: #f59e0b; }
.gc-contest-dm-board {
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    border: 2px solid #f59e0b; border-radius: 10px;
    padding: 0.7rem; margin-bottom: 0.8rem;
}
.gc-contest-dm-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.4rem; }
.gc-contest-dm-rows { display: flex; flex-direction: column; gap: 0.2rem; }
.gc-contest-dm-row {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.4rem; border-radius: 6px; font-size: 0.8rem;
}
.gc-contest-dm-leader { background: rgba(245, 158, 11, 0.2); font-weight: 700; }
.gc-contest-dm-rank { width: 1.2rem; text-align: right; color: var(--text-secondary); }
.gc-contest-dm-market { flex: 1; }
.gc-contest-dm-pts { font-weight: 700; color: #f59e0b; }
.gc-contest-markets { display: flex; flex-direction: column; gap: 0.6rem; }
.gc-contest-market-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px; overflow: hidden;
}
.gc-contest-market-hdr {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.7rem; background: var(--bg-primary, #f8fafc);
    font-weight: 600; font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.gc-contest-market-stat { font-weight: 400; font-size: 0.7rem; color: var(--text-secondary); }
.gc-contest-market-btn {
    padding: 0.3rem 0.6rem; border: 1px solid #22c55e; border-radius: 6px;
    background: transparent; color: #22c55e; font-size: 0.7rem;
    font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.gc-contest-market-btn:hover { background: #22c55e; color: #fff; }
.gc-contest-market-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gc-contest-winner-list, .gc-contest-close-list, .gc-contest-progress-list { padding: 0.3rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.gc-contest-winner-row, .gc-contest-close-row, .gc-contest-progress-row {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.5rem 0.7rem; font-size: 0.8rem; border-radius: 6px; margin: 0 0.4rem;
}
.gc-contest-winner-row { background: rgba(34, 197, 94, 0.08); border-left: 3px solid #22c55e; }
.gc-contest-close-row { background: rgba(245, 158, 11, 0.08); border-left: 3px solid #f59e0b; }
.gc-contest-progress-row { background: rgba(148, 163, 184, 0.06); border-left: 3px solid var(--text-secondary, #94a3b8); }
.gc-contest-row-top { display: flex; align-items: center; gap: 0.4rem; }
.gc-contest-row-metrics { display: flex; gap: 0.35rem; flex-wrap: wrap; padding-left: 0.1rem; }
.gc-contest-progress-hdr { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); padding: 0.3rem 0.7rem 0.1rem; }
.gc-contest-rep-needs { font-size: 0.65rem; color: #ef4444; font-weight: 600; white-space: nowrap; }
.gc-contest-tier-badge {
    padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.65rem;
    font-weight: 700; white-space: nowrap;
}
.gc-contest-tier-jacket { background: #8b5cf6; color: #fff; }
.gc-contest-tier-ls { background: #3b82f6; color: #fff; }
.gc-contest-close-badge { font-size: 0.75rem; }
.gc-contest-rep-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-contest-rep-store { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
.gc-contest-rep-stats { font-size: 0.7rem; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.gc-contest-no-winners { padding: 0.5rem 0.7rem; font-size: 0.75rem; color: var(--text-secondary); font-style: italic; }

/* Metric pills */
.gc-metric-pill {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.45rem; border-radius: 10px; font-size: 0.7rem; font-weight: 600;
    border: 1.5px solid; line-height: 1.2;
}
.gc-metric-label { opacity: 0.7; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.02em; }
.gc-metric-val { font-weight: 700; }
.gc-metric-met { background: rgba(34, 197, 94, 0.12); border-color: #22c55e; color: #16a34a; }
.gc-metric-partial { background: rgba(245, 158, 11, 0.12); border-color: #f59e0b; color: #d97706; }
.gc-metric-zero { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.3); color: var(--text-secondary, #64748b); }
.gc-contest-send-all { text-align: center; margin-top: 0.6rem; }
.gc-contest-send-all-btn {
    padding: 0.5rem 1.5rem; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
    font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.gc-contest-send-all-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(245,158,11,0.3); }

/* Contest Admin Bar */
.gc-contest-admin-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.7rem; margin-bottom: 0.5rem;
    background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2); border-radius: 8px;
}
.gc-contest-admin-bar-left { display: flex; align-items: center; gap: 0.5rem; }
.gc-contest-admin-bar-right { display: flex; gap: 0.4rem; }
.gc-contest-active-name { font-weight: 700; font-size: 0.9rem; }
.gc-contest-status-badge {
    font-size: 0.6rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.05em;
}
.gc-contest-status-active { background: #22c55e; color: #fff; }
.gc-contest-status-ended { background: #6b7280; color: #fff; }
.gc-contest-status-draft { background: #f59e0b; color: #fff; }
.gc-contest-edit-btn, .gc-contest-end-btn, .gc-contest-back-btn {
    padding: 0.3rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; font-size: 0.75rem; cursor: pointer; font-weight: 500;
}
.gc-contest-edit-btn:hover { border-color: #f59e0b; color: #f59e0b; }
.gc-contest-end-btn:hover { border-color: #ef4444; color: #ef4444; }
.gc-contest-back-btn:hover { border-color: #3b82f6; color: #3b82f6; }

/* Tier Legend */
.gc-contest-tier-legend {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem;
}
.gc-contest-tier-legend-item {
    font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 6px;
    border-left: 3px solid; background: rgba(0,0,0,0.02);
}

/* Past Contests Inline */
.gc-contest-past-inline { margin-bottom: 0.5rem; }
.gc-contest-past-select {
    padding: 0.3rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 0.75rem; background: #fff; cursor: pointer;
}

/* Empty State */
.gc-contest-empty-state { text-align: center; padding: 1.5rem 1rem; }
.gc-contest-empty-msg { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.8rem; }
.gc-contest-create-btn {
    padding: 0.5rem 1.5rem; border: 2px dashed #f59e0b; border-radius: 8px;
    background: rgba(245,158,11,0.05); color: #f59e0b; font-weight: 600; font-size: 0.85rem;
    cursor: pointer; transition: all 0.2s;
}
.gc-contest-create-btn:hover { background: #f59e0b; color: #fff; border-style: solid; }
.gc-contest-past-section { margin-top: 1rem; }
.gc-contest-past-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; margin-right: 0.4rem; }
.gc-contest-drafts-section { margin-top: 0.8rem; }
.gc-contest-drafts-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; margin-bottom: 0.3rem; }
.gc-contest-draft-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; padding: 0.2rem 0; }
.gc-contest-draft-edit, .gc-contest-draft-launch {
    padding: 0.15rem 0.5rem; border: 1px solid #d1d5db; border-radius: 4px;
    background: #fff; font-size: 0.7rem; cursor: pointer;
}
.gc-contest-draft-launch { border-color: #22c55e; color: #22c55e; }
.gc-contest-draft-launch:hover { background: #22c55e; color: #fff; }

/* Contest Builder */
.gc-contest-builder { padding: 0.5rem 0; }
.gc-builder-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.7rem; }
.gc-builder-form-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.gc-builder-field { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 120px; }
.gc-builder-field label { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); }
.gc-builder-field input[type="text"],
.gc-builder-field input[type="number"],
.gc-builder-field input[type="date"] {
    padding: 0.35rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 0.8rem; background: #fff; color: var(--text-primary, #1e293b);
}
.gc-builder-field-sm { flex: 0 0 80px; min-width: 70px; }
.gc-builder-field-wide { flex: 2; }
.gc-builder-field-toggle { display: flex; flex-direction: column; gap: 0.15rem; flex: 0 0 auto; align-items: center; }
.gc-builder-toggle { position: relative; width: 36px; height: 20px; }
.gc-builder-toggle input { display: none; }
.gc-builder-toggle-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: #d1d5db; border-radius: 20px; cursor: pointer; transition: 0.2s;
}
.gc-builder-toggle-slider::before {
    content: ''; position: absolute; left: 2px; bottom: 2px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; transition: 0.2s;
}
.gc-builder-toggle input:checked + .gc-builder-toggle-slider { background: #f59e0b; }
.gc-builder-toggle input:checked + .gc-builder-toggle-slider::before { transform: translateX(16px); }
.gc-builder-toggle-hint { font-size: 0.6rem; color: var(--text-secondary); }

/* Tier Cards in Builder */
.gc-builder-tiers-label { font-size: 0.8rem; font-weight: 700; margin: 0.5rem 0 0.3rem; }
.gc-builder-tiers-hint { font-weight: 400; color: var(--text-secondary); font-size: 0.7rem; }
.gc-builder-tier {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.6rem; margin-bottom: 0.4rem;
    background: rgba(0,0,0,0.01);
}
.gc-builder-tier-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.gc-builder-tier-num { font-weight: 700; font-size: 0.8rem; color: #f59e0b; }
.gc-builder-tier-remove { border: none; background: none; color: #ef4444; cursor: pointer; font-size: 0.9rem; padding: 0.2rem; }
.gc-builder-goals-row { background: rgba(245,158,11,0.04); border-radius: 6px; padding: 0.4rem; }
.gc-builder-emoji-wrap { position: relative; }
.gc-builder-emoji-input { width: 40px; text-align: center; cursor: pointer; font-size: 1.1rem; }
.gc-builder-emoji-picker {
    position: absolute; top: 100%; left: 0; z-index: 10;
    display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.4rem;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); width: 200px;
}
.gc-builder-emoji-opt { font-size: 1.2rem; cursor: pointer; padding: 0.2rem; border-radius: 4px; }
.gc-builder-emoji-opt:hover { background: rgba(245,158,11,0.15); }
.gc-builder-add-tier {
    display: block; width: 100%; padding: 0.4rem; margin: 0.3rem 0;
    border: 2px dashed #d1d5db; border-radius: 8px; background: none;
    color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; text-align: center;
}
.gc-builder-add-tier:hover { border-color: #f59e0b; color: #f59e0b; }
.gc-builder-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; justify-content: flex-end; }
.gc-builder-btn {
    padding: 0.4rem 1rem; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.gc-builder-btn-cancel { background: #fff; color: var(--text-secondary); }
.gc-builder-btn-cancel:hover { border-color: #6b7280; }
.gc-builder-btn-draft { background: #fff; color: #f59e0b; border-color: #f59e0b; }
.gc-builder-btn-draft:hover { background: rgba(245,158,11,0.08); }
.gc-builder-btn-launch { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border: none; }
.gc-builder-btn-launch:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(34,197,94,0.3); }

@media (max-width: 768px) {
    .gc-contest-summary { grid-template-columns: repeat(2, 1fr); }
    .gc-contest-controls { flex-direction: column; align-items: stretch; }
    .gc-contest-day-tabs { justify-content: center; }
    .gc-contest-admin-bar { flex-direction: column; gap: 0.4rem; text-align: center; }
    .gc-builder-form-row { flex-direction: column; }
    .gc-builder-field-sm { flex: 1; min-width: 100%; }
    .gc-builder-actions { flex-direction: column; }
    .gc-builder-actions .gc-builder-btn { width: 100%; text-align: center; }
}

/* Games header button */
.btn-games {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
    color: #fff !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .gc-games-grid { grid-template-columns: repeat(4, 1fr); }
    .gc-setup-row { flex-direction: column; }
    .gc-slot-reel { width: 56px; height: 56px; font-size: 1.8rem; }
    .gc-history-row { flex-wrap: wrap; }
    .gc-hist-store, .gc-hist-time { display: none; }
    .gc-treasure-grid { grid-template-columns: repeat(2, 1fr); }
    .gc-door-grid { max-width: 280px; }
    .gc-scratch-cell { width: 70px; height: 70px; font-size: 1.6rem; }
}
@media (max-width: 480px) {
    .gc-games-grid { grid-template-columns: repeat(3, 1fr); }
    .gc-game-icon { font-size: 1.3rem; }
    .gc-game-name { font-size: 0.65rem; }
    .gc-bj-table { padding: 1rem; }
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

/* Login/Access Denied — white card on gradient */
[data-theme="dark"] .login-card {
    background: var(--bg-card);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .google-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
[data-theme="dark"] .google-btn:hover {
    background: var(--bg-hover);
}

/* Resolved view green tones */
[data-theme="dark"] .resolver-name { color: #4ade80; }
[data-theme="dark"] .resolver-chip { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
[data-theme="dark"] .resolver-chip strong { color: #4ade80; }
[data-theme="dark"] .resolve-details { background: rgba(34, 197, 94, 0.08); }

/* Training role tags */
[data-theme="dark"] .training-role-tag.training-role-admin { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .training-role-tag.training-role-dm { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }

/* Training open button */
[data-theme="dark"] .training-open-btn { background: var(--accent-info); }
[data-theme="dark"] .training-card:hover .training-open-btn { background: #2563eb; }
[data-theme="dark"] .training-type,
[data-theme="dark"] .training-resolve-type { background: var(--bg-card); color: var(--text-muted); }
[data-theme="dark"] .btn-mark-all { background: var(--bg-card); color: var(--text-secondary); border-color: var(--border-color); }
[data-theme="dark"] .btn-save-progress { background: rgba(124, 58, 237, 0.15); color: #a78bfa; border-color: #7c3aed; }
[data-theme="dark"] .training-resolve-item { border-bottom-color: var(--border-color); }

/* Tables (rep perf, activity log) */
[data-theme="dark"] .rp-table th { background: rgba(102, 126, 234, 0.12); }
[data-theme="dark"] .rp-drilldown-table th { background: rgba(102, 126, 234, 0.12); }
[data-theme="dark"] .rp-totals-row { background: #1a2332 !important; border-top-color: #334155; }
[data-theme="dark"] .rp-totals-row:hover { background: #1a2332 !important; }
[data-theme="dark"] .rp-table tbody tr:hover { background: var(--bg-hover); }

/* Roster — market DM bar and store headers already use rgba-on-dark, no change needed */
/* Roster status dots use vivid colors, work fine on dark */
[data-theme="dark"] .roster-note-replace { color: #f87171; }
[data-theme="dark"] .roster-replace-badge { background: #b91c1c; }

/* Scan status widget — already dark-themed (#1e1b4b background), no changes needed */

/* Category dots in stats */
[data-theme="dark"] .cat-dot-xbm { background: var(--accent-purple); }

/* Separation dialog */
[data-theme="dark"] .separation-choice { border-color: var(--border-color); }
[data-theme="dark"] .separation-choice:hover { border-color: var(--text-muted); }

/* Admin panel — stat cards + user rows */
[data-theme="dark"] .admin-stat-card { background: var(--bg-card); }
[data-theme="dark"] .user-role-badge.role-admin { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .user-role-badge.role-dm { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
[data-theme="dark"] .user-role-badge.role-manager { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
[data-theme="dark"] .user-role-badge.role-viewer { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .user-role-badge.role-rep { background: rgba(168, 85, 247, 0.2); color: #c4b5fd; }
[data-theme="dark"] .user-role-badge.role-director { background: rgba(6, 182, 212, 0.2); color: #67e8f9; }
[data-theme="dark"] .user-role-badge.role-owner { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .user-action-btn.btn-edit { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
[data-theme="dark"] .user-action-btn.btn-delete { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .user-activity-badge { background: rgba(59, 130, 246, 0.25); }
[data-theme="dark"] .user-activity-badge.user-activity-zero { background: rgba(107, 114, 128, 0.2); color: #6b7280; }
[data-theme="dark"] .inactive-alert-section { background: rgba(239, 68, 68, 0.08); }
[data-theme="dark"] .inactive-alert-row { border-bottom-color: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .ue-sort-toggle { background: var(--bg-card); border-color: var(--border-color); }

/* Issues — action buttons */
[data-theme="dark"] .action-btn.info:hover:not(:disabled) { background: #2563eb; }

/* Quick note / comment thread — dark mode */
[data-theme="dark"] .quick-note-item { background: var(--bg-hover); border-color: var(--border-color); }
[data-theme="dark"] .comment-mention { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
[data-theme="dark"] .mention-dropdown { background: var(--bg-secondary); border-color: var(--border-dark); }
[data-theme="dark"] .mention-item:hover, [data-theme="dark"] .mention-item.active { background: var(--bg-hover); }

/* Scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-primary); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Rep perf filter bar and zero-sales buttons */
[data-theme="dark"] .rp-zero-btn { border-color: var(--border-dark); color: var(--text-secondary); }
[data-theme="dark"] .rp-zero-btn:hover { border-color: var(--accent-purple); }
[data-theme="dark"] .rp-zero-btn.active { background: var(--accent-purple); color: white; }
[data-theme="dark"] .rp-month-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* CSAT sentiment badges — dark mode */
[data-theme="dark"] .csat-sentiment.very-positive { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .csat-sentiment.positive { background: rgba(16, 185, 129, 0.15); color: #a7f3d0; }
[data-theme="dark"] .csat-sentiment.neutral { background: rgba(107, 114, 128, 0.2); color: #d1d5db; }
[data-theme="dark"] .csat-sentiment.mixed { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
[data-theme="dark"] .csat-sentiment.negative { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .csat-sentiment.very-negative { background: rgba(239, 68, 68, 0.25); color: #fecaca; }

/* Focus rings — lighten in dark mode */
[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .sort-select:focus,
[data-theme="dark"] .modal-textarea:focus {
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

/* Theme toggle - sliding pill */
.theme-toggle {
    position: relative;
    width: 3.5rem;
    height: 1.75rem;
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: background 0.3s, border-color 0.3s;
    overflow: hidden;
}
.theme-toggle:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}
.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.35rem;
    height: 1.35rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.theme-toggle-icon {
    width: 0.85rem;
    height: 0.85rem;
}
.theme-toggle-thumb .theme-icon-moon { display: none; }
.theme-toggle-thumb .theme-icon-sun { display: block; color: #f59e0b; }
.theme-toggle-bg-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.85rem;
    height: 0.85rem;
    z-index: 1;
    opacity: 0.5;
}
.theme-toggle-bg-icon.theme-icon-sun {
    right: 0.35rem;
    color: #f59e0b;
    display: none;
}
.theme-toggle-bg-icon.theme-icon-moon {
    right: 0.35rem;
    color: #94a3b8;
    display: block;
}

/* Dark mode toggle state */
[data-theme="dark"] .theme-toggle {
    background: #1e293b;
    border-color: #475569;
}
[data-theme="dark"] .theme-toggle-thumb {
    transform: translateX(1.7rem);
    background: #334155;
}
[data-theme="dark"] .theme-toggle-thumb .theme-icon-moon { display: block; color: #c4b5fd; }
[data-theme="dark"] .theme-toggle-thumb .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle-bg-icon.theme-icon-sun {
    display: block;
    left: 0.35rem;
    right: auto;
}
[data-theme="dark"] .theme-toggle-bg-icon.theme-icon-moon {
    display: none;
}

/* Mobile: hide toggle from header row, show in mobile menu */
@media (max-width: 768px) {
    .header-controls .theme-toggle { display: none; }
}

/* ============================================
   ANNOUNCEMENT BANNER
   ============================================ */
.announcement-banner {
    border-bottom: 1px solid var(--border-color);
}
.ann-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 500;
    border-left: 4px solid currentColor;
    line-height: 1.4;
}
.ann-item + .ann-item { border-top: 1px solid var(--border-color); }

/* Type color themes */
.ann-type-commission { background: #fef3c7; color: #92400e; border-left-color: #f59e0b; }
.ann-type-feature    { background: #dbeafe; color: #1e40af; border-left-color: #3b82f6; }
.ann-type-urgent     { background: #fee2e2; color: #991b1b; border-left-color: #ef4444; }
.ann-type-general    { background: #f3f4f6; color: #374151; border-left-color: #9ca3af; }

.ann-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.ann-message { flex: 1; }
.ann-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.5;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0.15rem;
    flex-shrink: 0;
    border-radius: 3px;
    transition: opacity 0.15s;
}
.ann-dismiss:hover { opacity: 1; }

/* Dark mode banner */
[data-theme="dark"] .ann-type-commission { background: rgba(245, 158, 11, 0.12); color: #fcd34d; }
[data-theme="dark"] .ann-type-feature    { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
[data-theme="dark"] .ann-type-urgent     { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
[data-theme="dark"] .ann-type-general    { background: rgba(107, 114, 128, 0.12); color: #d1d5db; }

/* ============ Admin Announcement Manager ============ */
.ann-admin-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.ann-admin-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
}
.ann-admin-card.ann-admin-inactive { opacity: 0.6; }
.ann-admin-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.ann-admin-actions { margin-left: auto; display: flex; gap: 0.35rem; }
.ann-type-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    border: 1px solid;
}
.ann-status-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ann-status-badge.ann-active  { background: #dcfce7; color: #166534; }
.ann-status-badge.ann-disabled{ background: #f3f4f6; color: #6b7280; }
.ann-status-badge.ann-expired { background: #fee2e2; color: #991b1b; }
.ann-pin-badge { font-size: 0.72rem; color: var(--text-muted); }
.ann-admin-msg  { font-size: 0.83rem; color: var(--text-primary); margin-bottom: 0.25rem; }
.ann-admin-meta { font-size: 0.72rem; color: var(--text-muted); }
.ann-admin-empty { text-align: center; padding: 1.5rem; color: var(--text-muted); font-size: 0.85rem; }

/* Announcement form panel */
.ann-form-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.ann-form-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.ann-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.ann-form-row label { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; }

[data-theme="dark"] .ann-status-badge.ann-active  { background: rgba(34,197,94,0.15); color: #86efac; }
[data-theme="dark"] .ann-status-badge.ann-disabled { background: rgba(107,114,128,0.15); color: #9ca3af; }
[data-theme="dark"] .ann-status-badge.ann-expired  { background: rgba(239,68,68,0.15); color: #fca5a5; }

/* ============================================
   ANNOUNCEMENT TICKER (legacy — hidden)
   ============================================ */
.announcement-ticker { display: none !important; }

/* Admin panel magenta theme for announcement section */
.admin-section.border-magenta { border-color: #e91e8c; }
.text-magenta { color: #e91e8c; }
.modal-btn.btn-magenta { background: #e91e8c; color: white; border-color: #e91e8c; }
.modal-btn.btn-magenta:hover { background: #d4167f; border-color: #d4167f; }
.gap-half { gap: 0.5rem; }
.gap-quarter { gap: 0.25rem; }

/* Dark mode notification center */
[data-theme="dark"] .notification-center {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
[data-theme="dark"] .notification-pinned {
    background: rgba(233, 30, 140, 0.08);
}

/* Real-Time Report dark mode */
[data-theme="dark"] .rt-day-tabs { background: var(--bg-card); }
[data-theme="dark"] .rt-day-tab { color: var(--text-secondary); }
[data-theme="dark"] .rt-day-tab.active { background: #7c3aed; color: white; }
[data-theme="dark"] .rt-yesterday-banner { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; }
[data-theme="dark"] .rt-summary-card { background: var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .rt-table-wrapper { background: var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .rt-table thead th { background: rgba(102, 126, 234, 0.12); }
[data-theme="dark"] .rt-header-group .rt-group-conversion { background: rgba(13, 148, 136, 0.2); color: #5eead4; }
[data-theme="dark"] .rt-header-group .rt-group-activation { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; }
[data-theme="dark"] .rt-header-group .rt-group-voice { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
[data-theme="dark"] .rt-header-group .rt-group-hint { background: rgba(255, 140, 0, 0.15); color: #fcd34d; }
[data-theme="dark"] .rt-header-group .rt-group-bts { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
[data-theme="dark"] .rt-header-group .rt-group-acc { background: rgba(5, 150, 105, 0.2); color: #6ee7b7; }
[data-theme="dark"] .rt-header-sub th { background: rgba(102, 126, 234, 0.08); }
[data-theme="dark"] .rt-div { border-left-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .rt-grand-total td { background: #0f172a; color: #f1f5f9; }
[data-theme="dark"] .rt-conv-good { color: #4ade80; }
[data-theme="dark"] .rt-conv-ok { color: #fbbf24; }
[data-theme="dark"] .rt-conv-low { color: #f87171; }
[data-theme="dark"] .rt-pct-great { color: #4ade80; }
[data-theme="dark"] .rt-pct-good { color: #60a5fa; }
[data-theme="dark"] .rt-pct-ok { color: #fbbf24; }
[data-theme="dark"] .rt-pct-low { color: #f87171; }
[data-theme="dark"] .rt-weather-pill { background: rgba(255,255,255,0.08); color: #94a3b8; }
[data-theme="dark"] .rt-weather-pill .wx-temp { color: #f1f5f9; }
[data-theme="dark"] .rt-gm-buttons { background: #1e293b; }
[data-theme="dark"] .rt-gm-btn { color: #94a3b8; }
[data-theme="dark"] .rt-gm-btn:hover { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .rt-gm-btn.rt-gm-sent { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .rt-gm-all { color: #a5b4fc; }
[data-theme="dark"] .rt-c2-badge { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .rt-c2-dropzone { border-color: #0d9488; background: rgba(20, 184, 166, 0.08); }
[data-theme="dark"] .rt-c2-dropzone:hover { background: rgba(20, 184, 166, 0.16); }
[data-theme="dark"] .rt-c2-dropzone.rt-c2-dragover { background: rgba(20, 184, 166, 0.25); box-shadow: 0 0 12px rgba(20, 184, 166, 0.25); }
[data-theme="dark"] .rt-c2-dropzone-text { color: #5eead4; }
[data-theme="dark"] .rt-target { color: var(--text-muted); }
[data-theme="dark"] .rt-ts-badge.fresh { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .rt-store-row:hover { background: var(--bg-hover); }
[data-theme="dark"] .rt-legend-body { background: var(--bg-card); border-color: rgba(255,255,255,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .rt-legend-toggle:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .rt-legend-section h4 { border-bottom-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .btn-realtime { background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%); }
[data-theme="dark"] .btn-purple { background: #6d28d9; }
[data-theme="dark"] .btn-purple:hover { background: #5b21b6; }

/* Morning Ops dark mode */
[data-theme="dark"] .mo-market-card { background: var(--bg-card); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .mo-summary-card { background: var(--bg-card); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .mo-summary-card.mo-summary-green { border-color: rgba(34, 197, 94, 0.5); }
[data-theme="dark"] .mo-summary-card.mo-summary-yellow { border-color: rgba(245, 158, 11, 0.5); }
[data-theme="dark"] .mo-summary-card.mo-summary-red { border-color: rgba(239, 68, 68, 0.5); }
[data-theme="dark"] .mo-store-header-row { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .mo-store-row-red { background: rgba(239, 68, 68, 0.08); }
[data-theme="dark"] .mo-store-row-yellow { background: rgba(245, 158, 11, 0.08); }
[data-theme="dark"] .mo-staff-detail { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .mo-history-table-wrapper { background: var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
[data-theme="dark"] .btn-morning-ops { background: linear-gradient(135deg, #047857 0%, #059669 100%) !important; }

/* Game Console dark mode */
[data-theme="dark"] .gc-setup { background: var(--bg-card); }
[data-theme="dark"] .gc-game-card { background: var(--bg-card); }
[data-theme="dark"] .gc-game-card.active { background: rgba(139, 92, 246, 0.15); }
[data-theme="dark"] .gc-play-area { background: var(--bg-card); }
[data-theme="dark"] .gc-history { background: var(--bg-card); }
[data-theme="dark"] .gc-history-row { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .gc-wheel-config { background: var(--bg-card); }
[data-theme="dark"] .gc-result-win { background: rgba(34, 197, 94, 0.15); }
[data-theme="dark"] .gc-result-loss { background: rgba(239, 68, 68, 0.12); }
[data-theme="dark"] .gc-slot-reel { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-num-btn { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-coin-btn { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-store-display { background: var(--bg-secondary); }
[data-theme="dark"] .gc-rep-search { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-rep-dropdown { background: var(--bg-card); border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
[data-theme="dark"] .gc-rep-dd-item:hover { background: rgba(139, 92, 246, 0.15); }
[data-theme="dark"] .gc-media-btn { border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-broadcast-preview { background: var(--bg-card); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .gc-gif-panel { background: var(--bg-card); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .gc-gif-search-input { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-mute-bar { border-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .gc-rps-btn { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-card-slot { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-treasure-btn { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-scratch-cell { background: linear-gradient(135deg, #4a5568, #374151); }
[data-theme="dark"] .gc-scratch-cell.revealed { background: var(--bg-secondary); }
[data-theme="dark"] .gc-door-btn { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-spin100-bar { background: var(--bg-secondary); }
[data-theme="dark"] .gc-plinko-canvas { background: #0f172a; }
[data-theme="dark"] .gc-contest-section { border-color: rgba(245,158,11,0.4); }
[data-theme="dark"] .gc-contest-header:hover { background: rgba(245,158,11,0.08); }
[data-theme="dark"] .gc-contest-card { background: var(--bg-secondary); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .gc-contest-card-jacket { border-color: rgba(139,92,246,0.5); }
[data-theme="dark"] .gc-contest-card-ls { border-color: rgba(59,130,246,0.5); }
[data-theme="dark"] .gc-contest-card-close { border-color: rgba(245,158,11,0.5); }
[data-theme="dark"] .gc-contest-dm-board { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.05)); border-color: rgba(245,158,11,0.4); }
[data-theme="dark"] .gc-contest-market-card { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .gc-contest-market-hdr { background: var(--bg-secondary); border-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .gc-contest-winner-row { background: rgba(34,197,94,0.1); }
[data-theme="dark"] .gc-contest-close-row { background: rgba(245,158,11,0.1); }
[data-theme="dark"] .gc-contest-progress-row { background: rgba(148,163,184,0.1); }
[data-theme="dark"] .gc-contest-rep-needs { color: #f87171; }
[data-theme="dark"] .gc-contest-admin-bar { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
[data-theme="dark"] .gc-contest-edit-btn, [data-theme="dark"] .gc-contest-end-btn, [data-theme="dark"] .gc-contest-back-btn { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); color: var(--text-secondary); }
[data-theme="dark"] .gc-contest-tier-legend-item { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .gc-contest-past-select { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); color: var(--text-primary); }
[data-theme="dark"] .gc-contest-create-btn { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.08); }
[data-theme="dark"] .gc-builder-tier { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); }
[data-theme="dark"] .gc-builder-field input { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); color: var(--text-primary); }
[data-theme="dark"] .gc-builder-emoji-picker { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .gc-builder-add-tier { border-color: rgba(255,255,255,0.15); color: var(--text-secondary); }
[data-theme="dark"] .gc-builder-btn-cancel { background: var(--bg-secondary); }
[data-theme="dark"] .gc-builder-btn-draft { background: var(--bg-secondary); }
[data-theme="dark"] .gc-builder-goals-row { background: rgba(245,158,11,0.06); }
[data-theme="dark"] .gc-contest-draft-edit, [data-theme="dark"] .gc-contest-draft-launch { background: var(--bg-secondary); border-color: rgba(255,255,255,0.15); color: var(--text-secondary); }
[data-theme="dark"] .gc-metric-met { background: rgba(34,197,94,0.18); color: #4ade80; border-color: #22c55e; }
[data-theme="dark"] .gc-metric-partial { background: rgba(245,158,11,0.18); color: #fbbf24; border-color: #f59e0b; }
[data-theme="dark"] .gc-metric-zero { background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.25); color: #94a3b8; }
[data-theme="dark"] .gc-contest-day-tab { border-color: rgba(255,255,255,0.15); }

@media (max-width: 768px) {
    .announcement-ticker {
        font-size: 0.75rem;
        height: 30px;
        line-height: 30px;
    }
}

/* ============================================
   HOLIDAY THEMES
   Auto-activated by holiday-theme.js based on calendar date.
   Each holiday scoped under .holiday-{key} on <html>.
   ============================================ */

/* Holiday greeting gradient text */
.landing-holiday-sub { color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.15rem; font-style: italic; }

/* --- St. Patrick's Day (green/gold) --- */
.holiday-stpatricks .dashboard-header { background: linear-gradient(135deg, #15803d 0%, #4f46e5 50%, #15803d 100%); }
.holiday-stpatricks .announcement-ticker { background: linear-gradient(90deg, #16a34a, #15803d, #16a34a); box-shadow: 0 2px 8px rgba(22,163,74,0.3); }
.holiday-stpatricks .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-stpatricks .landing-greeting-text { background: linear-gradient(135deg, #16a34a, #facc15); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.holiday-stpatricks .login-card { border: 2px solid rgba(22,163,74,0.25); box-shadow: 0 0 20px rgba(22,163,74,0.08); }

[data-theme="dark"].holiday-stpatricks .dashboard-header { background: linear-gradient(135deg, #14532d 0%, #312e81 50%, #14532d 100%); }
[data-theme="dark"].holiday-stpatricks .announcement-ticker { background: linear-gradient(90deg, #166534, #14532d, #166534); }
[data-theme="dark"].holiday-stpatricks .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 12px rgba(22,163,74,0.2); }

/* --- Valentine's Day (red/pink) --- */
.holiday-valentines .dashboard-header { background: linear-gradient(135deg, #9f1239 0%, #764ba2 100%); }
.holiday-valentines .announcement-ticker { background: linear-gradient(90deg, #e11d48, #be123c, #e11d48); }
.holiday-valentines .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-valentines .landing-greeting-text { background: linear-gradient(135deg, #e11d48, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.holiday-valentines .login-card { border: 2px solid rgba(225,29,72,0.2); }

[data-theme="dark"].holiday-valentines .dashboard-header { background: linear-gradient(135deg, #881337 0%, #581c87 100%); }
[data-theme="dark"].holiday-valentines .announcement-ticker { background: linear-gradient(90deg, #9f1239, #881337, #9f1239); }

/* --- Easter (pastel purple/yellow) --- */
.holiday-easter .dashboard-header { background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #fbbf24 100%); }
.holiday-easter .announcement-ticker { background: linear-gradient(90deg, #a855f7, #ec4899, #a855f7); }
.holiday-easter .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-easter .landing-greeting-text { background: linear-gradient(135deg, #a855f7, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

[data-theme="dark"].holiday-easter .dashboard-header { background: linear-gradient(135deg, #5b21b6 0%, #be185d 50%, #b45309 100%); }
[data-theme="dark"].holiday-easter .announcement-ticker { background: linear-gradient(90deg, #7c3aed, #be185d, #7c3aed); }

/* --- Independence Day (red/white/blue) --- */
.holiday-july4th .dashboard-header { background: linear-gradient(135deg, #dc2626 0%, #f8fafc 30%, #2563eb 60%, #dc2626 100%); }
.holiday-july4th .dashboard-header .user-info, .holiday-july4th .dashboard-header .header-controls button { text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.holiday-july4th .announcement-ticker { background: linear-gradient(90deg, #dc2626, #2563eb, #dc2626); }
.holiday-july4th .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-july4th .landing-greeting-text { background: linear-gradient(135deg, #dc2626, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

[data-theme="dark"].holiday-july4th .dashboard-header { background: linear-gradient(135deg, #991b1b 0%, #1e3a8a 50%, #991b1b 100%); }
[data-theme="dark"].holiday-july4th .dashboard-header .user-info, [data-theme="dark"].holiday-july4th .dashboard-header .header-controls button { text-shadow: none; }
[data-theme="dark"].holiday-july4th .announcement-ticker { background: linear-gradient(90deg, #991b1b, #1e3a8a, #991b1b); }

/* --- Halloween (orange/purple) --- */
.holiday-halloween .dashboard-header { background: linear-gradient(135deg, #ea580c 0%, #581c87 100%); }
.holiday-halloween .announcement-ticker { background: linear-gradient(90deg, #ea580c, #9333ea, #ea580c); }
.holiday-halloween .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-halloween .landing-greeting-text { background: linear-gradient(135deg, #ea580c, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

[data-theme="dark"].holiday-halloween .dashboard-header { background: linear-gradient(135deg, #9a3412 0%, #3b0764 100%); }
[data-theme="dark"].holiday-halloween .announcement-ticker { background: linear-gradient(90deg, #9a3412, #6b21a8, #9a3412); }

/* --- Thanksgiving (amber/brown) --- */
.holiday-thanksgiving .dashboard-header { background: linear-gradient(135deg, #b45309 0%, #92400e 50%, #78350f 100%); }
.holiday-thanksgiving .announcement-ticker { background: linear-gradient(90deg, #d97706, #b45309, #d97706); }
.holiday-thanksgiving .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-thanksgiving .landing-greeting-text { background: linear-gradient(135deg, #d97706, #dc2626); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

[data-theme="dark"].holiday-thanksgiving .dashboard-header { background: linear-gradient(135deg, #78350f 0%, #451a03 50%, #422006 100%); }
[data-theme="dark"].holiday-thanksgiving .announcement-ticker { background: linear-gradient(90deg, #92400e, #78350f, #92400e); }

/* --- Holiday Season / Christmas (red/green/gold) --- */
.holiday-christmas .dashboard-header { background: linear-gradient(135deg, #15803d 0%, #dc2626 50%, #15803d 100%); }
.holiday-christmas .announcement-ticker { background: linear-gradient(90deg, #dc2626, #16a34a, #dc2626); }
.holiday-christmas .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-christmas .landing-greeting-text { background: linear-gradient(135deg, #dc2626, #16a34a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

[data-theme="dark"].holiday-christmas .dashboard-header { background: linear-gradient(135deg, #14532d 0%, #991b1b 50%, #14532d 100%); }
[data-theme="dark"].holiday-christmas .announcement-ticker { background: linear-gradient(90deg, #991b1b, #166534, #991b1b); }

/* --- New Year's Day (gold/silver) --- */
.holiday-newyear .dashboard-header { background: linear-gradient(135deg, #f59e0b 0%, #6366f1 50%, #f59e0b 100%); }
.holiday-newyear .announcement-ticker { background: linear-gradient(90deg, #f59e0b, #d97706, #f59e0b); }
.holiday-newyear .landing-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 10px var(--holiday-glow); }
.holiday-newyear .landing-greeting-text { background: linear-gradient(135deg, #f59e0b, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

[data-theme="dark"].holiday-newyear .dashboard-header { background: linear-gradient(135deg, #b45309 0%, #4338ca 50%, #b45309 100%); }
[data-theme="dark"].holiday-newyear .announcement-ticker { background: linear-gradient(90deg, #b45309, #92400e, #b45309); }

/* ─── P&L Tracker ─── */
.pnl-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem 0; }
.pnl-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.pnl-export-btn { padding: 0.4rem 1rem; border: 1.5px solid #f59e0b; border-radius: 8px; background: transparent; color: #f59e0b; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.15s; }
.pnl-export-btn:hover { background: #f59e0b; color: #fff; }

.pnl-loading, .pnl-error { text-align: center; padding: 3rem; color: var(--text-secondary); font-size: 1.1rem; }

.pnl-mode-bar { display: flex; gap: 0.5rem; padding: 0.75rem 1.5rem 0; }
.pnl-mode-btn { padding: 0.4rem 1rem; border: 2px solid var(--border-color, #e2e8f0); border-radius: 8px; background: var(--bg-card, #fff); color: var(--text-primary); cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.15s; }
.pnl-mode-btn:hover { border-color: #f59e0b; }
.pnl-mode-btn.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }

.pnl-filter-bar { display: flex; gap: 1rem; padding: 0.5rem 1.5rem; flex-wrap: wrap; align-items: center; }
.pnl-presets { display: flex; gap: 0.4rem; }
.pnl-range-btn { padding: 0.3rem 0.65rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-primary); cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
.pnl-range-btn:hover { border-color: #f59e0b; color: #f59e0b; }
.pnl-date-pickers { display: flex; gap: 0.75rem; align-items: center; }
.pnl-date-pickers label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.pnl-date-pickers select { padding: 0.3rem 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-primary); font-size: 0.8rem; cursor: pointer; }
.pnl-vs { font-size: 1.1rem; font-weight: 700; color: var(--text-secondary); }

.pnl-compare-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; padding: 0 1.5rem 1.25rem; }
.pnl-compare-card-a { border-left-color: #3b82f6; }
.pnl-compare-card-b { border-left-color: #f59e0b; }
/* Section containers */
.pnl-section { margin: 0 1.5rem 1.25rem; padding: 1.25rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; }
.pnl-section-title { padding: 0 0 0.5rem; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; border-bottom: 2px solid var(--border-color, #e2e8f0); padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
.pnl-section-title .pnl-section-icon { margin-right: 0.5rem; }
[data-theme="dark"] .pnl-section { background: var(--bg-card); border-color: var(--border-color); }

/* Upside Opportunity */
.pnl-upside { padding: 0; }
.pnl-upside-subtitle { font-size: 0.85rem; color: var(--text-secondary); padding: 0 0 0.75rem; margin-top: -0.25rem; }
.pnl-upside-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.pnl-upside-current, .pnl-upside-projected { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 1rem; }
.pnl-upside-current { border-left: 4px solid #64748b; }
.pnl-upside-projected { border-left: 4px solid #22c55e; }
.pnl-upside-metrics { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
.pnl-upside-metric-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; }
.pnl-upside-metric-value { font-size: 1.2rem; font-weight: 700; }
.pnl-upside-arrow { text-align: center; }
.pnl-upside-arrow-icon { font-size: 2rem; color: #22c55e; font-weight: 800; }
.pnl-upside-arrow-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }

.pnl-upside-impact { background: var(--bg-card, #fff); border: 2px solid #22c55e; border-radius: 10px; padding: 1rem 1.5rem; }
.pnl-upside-impact-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pnl-upside-impact-item { text-align: center; }
.pnl-upside-impact-val { display: block; font-size: 1.3rem; font-weight: 800; }
.pnl-upside-impact-plus { font-size: 1.5rem; font-weight: 700; color: var(--text-secondary); }
.pnl-upside-impact-total { background: rgba(34,197,94,0.1); border-radius: 8px; padding: 0.5rem 1rem; }
.pnl-upside-valuations { margin-top: 0.5rem; }
.pnl-valuation-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pnl-valuation-adjusted { border-top-color: #22c55e; }

@media (max-width: 768px) {
    .pnl-upside-grid { grid-template-columns: 1fr; }
    .pnl-upside-arrow-icon { transform: rotate(90deg); }
    .pnl-upside-metrics { flex-direction: column; gap: 0.5rem; }
    .pnl-upside-impact-row { flex-direction: column; gap: 0.75rem; }
    .pnl-valuation-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Territory Value */
.pnl-territory { padding: 0; }
.pnl-territory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pnl-territory-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.pnl-territory-stat { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 0.75rem; text-align: center; }
.pnl-territory-big { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.pnl-territory-sub { font-size: 0.7rem; color: var(--text-secondary); margin-top: 0.15rem; }
.pnl-territory-table { font-size: 0.85rem; }
.pnl-ownership-bar { position: relative; background: var(--bg-secondary, #f1f5f9); border-radius: 4px; height: 22px; overflow: hidden; }
.pnl-ownership-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.pnl-ownership-label { position: absolute; right: 6px; top: 2px; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); }
.pnl-valuation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.pnl-valuation-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 1rem; text-align: center; border-top: 3px solid #f59e0b; }
.pnl-valuation-multiple { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }
.pnl-valuation-amount { font-size: 1.4rem; font-weight: 800; margin: 0.25rem 0; }
.pnl-valuation-per-door { font-size: 0.75rem; color: var(--text-secondary); }
.pnl-territory-note { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.75rem; font-style: italic; }

/* Rolling 12-Month */
.pnl-rolling { padding: 0; }
.pnl-rolling-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0.5rem 0 0.75rem; }

@media (max-width: 768px) {
    .pnl-territory-grid { grid-template-columns: 1fr; }
    .pnl-territory-stat-row { grid-template-columns: repeat(2, 1fr); }
    .pnl-rolling-cards { grid-template-columns: 1fr; }
}

.pnl-view-tabs { display: flex; gap: 0.5rem; padding: 0 1.5rem 0.75rem; }
.pnl-view-tab { padding: 0.4rem 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-primary); cursor: pointer; font-size: 0.85rem; transition: all 0.15s; }
.pnl-view-tab:hover { border-color: #f59e0b; }
.pnl-view-tab.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }

.pnl-summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 0 1.5rem 1.25rem; }
.pnl-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; padding: 1rem; border-left: 4px solid #f59e0b; }
.pnl-card-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; }
.pnl-card-value { font-size: 1.3rem; font-weight: 700; }

.pnl-positive { color: #22c55e; }
.pnl-negative { color: #ef4444; }
.pnl-trend-up { font-size: 0.75rem; color: #22c55e; margin-left: 0.5rem; }
.pnl-trend-down { font-size: 0.75rem; color: #ef4444; margin-left: 0.5rem; }

.pnl-chart-wrap { padding: 0; height: 300px; }
.pnl-table-wrap { padding: 0; overflow-x: auto; }
.pnl-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pnl-table th { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 2px solid var(--border-color, #e2e8f0); font-weight: 600; color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; }
.pnl-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border-color, #f1f5f9); }
.pnl-table tbody tr:hover { background: var(--bg-hover, #f8fafc); }
.pnl-num { text-align: right; font-variant-numeric: tabular-nums; }
.pnl-table th:not(:first-child) { text-align: right; }
.pnl-market-label { font-size: 0.75rem; color: var(--text-secondary); }
.pnl-totals-row { background: var(--bg-secondary, #f8fafc); border-top: 2px solid var(--border-color, #e2e8f0); }

.pnl-payroll-note { margin: 0 0 0.75rem; padding: 0.6rem 1rem; background: #eff6ff; border-left: 3px solid #3b82f6; border-radius: 6px; font-size: 0.8rem; color: #475569; line-height: 1.4; }
[data-theme="dark"] .pnl-payroll-note { background: #1e3a5f; color: #94a3b8; border-left-color: #3b82f6; }

.pnl-store-filter { display: flex; gap: 0.5rem; padding: 0 1.5rem 0.5rem; flex-wrap: wrap; }
.pnl-market-chip { padding: 0.3rem 0.7rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 20px; background: var(--bg-card, #fff); color: var(--text-primary); cursor: pointer; font-size: 0.8rem; transition: all 0.15s; }
.pnl-market-chip:hover { border-color: #f59e0b; }
.pnl-market-chip.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }

.btn-pnl { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.btn-pnl:hover { background: linear-gradient(135deg, #d97706, #b45309); }

@media (max-width: 768px) {
    .pnl-summary-cards { grid-template-columns: repeat(2, 1fr); }
    .pnl-card-value { font-size: 1.1rem; }
    .pnl-chart-wrap { height: 250px; }
}

/* P&L Dark Mode */
[data-theme="dark"] .pnl-card { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .pnl-table tbody tr:hover { background: #334155; }
[data-theme="dark"] .pnl-totals-row { background: #334155; }
[data-theme="dark"] .pnl-mode-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .pnl-range-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .pnl-view-tab { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .pnl-market-chip { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .pnl-date-pickers select { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }

/* P&L — sortable store table */
.pnl-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.pnl-th-sort:hover { color: #f59e0b; }
.pnl-th-right { text-align: right; }
.pnl-sort-arrow { font-size: 0.7rem; opacity: 0.4; margin-left: 0.2rem; }
.pnl-sort-active { opacity: 1; color: #f59e0b; }
.pnl-rank { text-align: center; color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; width: 2rem; }

/* P&L — row profit/loss indicators */
.pnl-row-profit { border-left: 3px solid #22c55e; }
.pnl-row-loss { border-left: 3px solid #ef4444; }
[data-theme="dark"] .pnl-row-profit { border-left-color: #16a34a; }
[data-theme="dark"] .pnl-row-loss { border-left-color: #dc2626; }

/* ===================================================================
   MY SALES VIEW (Rep Homepage)
   =================================================================== */
.ms-container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.ms-loading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 4rem; color: var(--text-secondary); font-size: 0.95rem; }
.ms-spinner { width: 20px; height: 20px; border: 2px solid rgba(6,182,212,0.2); border-top-color: #06b6d4; border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; }

/* Greeting */
.ms-greeting { margin-bottom: 1.5rem; }
.ms-greeting h1 { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.2rem; }
.ms-greeting > p { color: var(--text-secondary); font-size: 0.875rem; }
.ms-store-tag { display: inline-block; background: rgba(6,182,212,0.12); color: #06b6d4; border: 1px solid rgba(6,182,212,0.2); padding: 3px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; margin-top: 0.4rem; }

/* Commission Hero */
.ms-commission-hero { background: linear-gradient(135deg, #0d1b2a 0%, #162136 50%, #1a2a40 100%); border: 1px solid rgba(6,182,212,0.2); border-radius: 14px; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; position: relative; overflow: hidden; }
.ms-commission-hero::before { content: ''; position: absolute; top: -60%; right: -10%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(6,182,212,0.07) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.ms-comm-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; position: relative; z-index: 1; }
.ms-comm-amount { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #06b6d4, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.ms-comm-label { color: var(--text-secondary); font-size: 0.8rem; margin-top: 0.25rem; }
.ms-comm-breakdown { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ms-comm-breakdown span { font-size: 0.72rem; color: #64748b; background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 8px; }
.ms-comm-nudge { background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.2); border-radius: 10px; padding: 0.9rem 1.1rem; min-width: 190px; }
.ms-nudge-main { color: #22d3ee; font-size: 0.875rem; font-weight: 600; }
.ms-nudge-detail { color: var(--text-secondary); font-size: 0.75rem; margin-top: 0.25rem; }

/* Scoreboard */
.ms-scoreboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.ms-score-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; position: relative; }
.ms-metric-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 0.5rem; }
.ms-metric-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.ms-metric-goal { font-size: 0.73rem; color: var(--text-secondary); margin-top: 0.4rem; }
.ms-metric-goal span { color: var(--accent-success); font-weight: 600; }
.ms-val-magenta { color: #e91e8c; }
.ms-val-orange  { color: #f97316; }
.ms-val-cyan    { color: #06b6d4; }
.ms-val-purple  { color: #8b5cf6; }
.ms-val-green   { color: #22c55e; }
.ms-val-teal    { color: #14b8a6; }
.ms-progress-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 4px; margin-top: 0.6rem; overflow: hidden; }
.ms-bar-fill { height: 100%; border-radius: 4px; transition: width 0.85s cubic-bezier(0.4,0,0.2,1); width: 0%; }
.ms-fill-magenta { background: linear-gradient(90deg, #e91e8c, #f472b6); }
.ms-fill-orange  { background: linear-gradient(90deg, #f97316, #fb923c); }
.ms-fill-cyan    { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.ms-fill-purple  { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.ms-fill-green   { background: linear-gradient(90deg, #22c55e, #4ade80); }
.ms-fill-teal    { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.ms-rank-badge { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(251,191,36,0.15); color: #fbbf24; font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
.ms-rank-badge-other { background: rgba(100,116,139,0.12); color: #94a3b8; }

/* Quick Actions */
.ms-quick-actions { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ms-qa-btn { padding: 0.55rem 0.95rem; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--text-secondary); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; display: flex; align-items: center; gap: 0.3rem; }
.ms-qa-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

/* Two-col layout */
.ms-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }

/* Card */
.ms-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.1rem 1.25rem; }
.ms-card-title { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.3rem; }

/* Leaderboard rows */
.ms-lb-row { display: flex; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.ms-lb-row:last-child { border-bottom: none; }
.ms-rank { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; margin-right: 0.55rem; flex-shrink: 0; }
.ms-rank-1 { background: #fbbf24; color: #1a1a1a; }
.ms-rank-2 { background: #94a3b8; color: #1a1a1a; }
.ms-rank-3 { background: #cd7f32; color: white; }
.ms-rank-other { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.ms-lb-name { flex: 1; font-size: 0.78rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-lb-name-you { color: #22d3ee; font-weight: 600; }
.ms-lb-value { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.ms-you-tag { font-size: 0.58rem; background: rgba(6,182,212,0.2); color: #22d3ee; padding: 1px 5px; border-radius: 6px; margin-left: 0.3rem; font-weight: 600; }
.ms-lb-divider { color: var(--text-secondary); font-size: 0.72rem; padding: 0.2rem 0 0; text-align: center; }

/* Today at Your Store */
.ms-pulse-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.ms-pulse-row:last-child { border-bottom: none; }
.ms-pulse-label { font-size: 0.78rem; color: var(--text-secondary); }
.ms-pulse-val { font-size: 0.82rem; font-weight: 600; }
.ms-cyan   { color: #22d3ee; }
.ms-green  { color: #22c55e; }
.ms-orange { color: #f97316; }
.ms-scan-badge { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 8px; }
.ms-scan-badge.complete { background: rgba(34,197,94,0.12);  color: #22c55e; }
.ms-scan-badge.overdue  { background: rgba(239,68,68,0.12);  color: #ef4444; }
.ms-scan-badge.pending  { background: rgba(245,158,11,0.12); color: #f59e0b; }
.ms-scan-badge.unknown  { background: rgba(100,116,139,0.1); color: #94a3b8; }
.ms-link-btn { background: none; border: none; color: #06b6d4; font-size: 0.78rem; font-weight: 500; cursor: pointer; padding: 0; }
.ms-link-btn:hover { color: #22d3ee; text-decoration: underline; }

/* Action Items section */
.ms-tasks-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.ms-tasks-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.ms-tasks-header h3 { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.ms-tasks-toggle { color: var(--text-secondary); font-size: 0.73rem; }
.ms-badge-count { background: #ef4444; color: white; font-size: 0.62rem; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ms-tasks-body { margin-top: 0.75rem; }
.ms-task-item { display: flex; align-items: center; padding: 0.55rem 0.7rem; background: rgba(255,255,255,0.02); border-radius: 8px; margin-bottom: 0.35rem; border-left: 3px solid #3b82f6; gap: 0.45rem; }
.ms-task-item.critical { border-left-color: #ef4444; }
.ms-task-item.warning  { border-left-color: #f59e0b; }
.ms-task-item.info     { border-left-color: #3b82f6; }
.ms-task-cat { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.ms-cat-training { background: rgba(168,85,247,0.15); color: #c084fc; }
.ms-cat-hint     { background: rgba(249,115,22,0.15); color: #fb923c; }
.ms-cat-mim      { background: rgba(233,30,140,0.15); color: #f472b6; }
.ms-cat-other    { background: rgba(100,116,139,0.12); color: #94a3b8; }
.ms-task-text { font-size: 0.78rem; color: var(--text-primary); flex: 1; }
.ms-task-age  { font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; }
.ms-empty { color: var(--text-secondary); font-size: 0.83rem; text-align: center; padding: 0.75rem 0; }
.ms-empty-good { color: #22c55e; }

/* Commission calculator modal */
.ms-calc-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ms-calc-inner { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; max-width: 400px; width: 100%; }
.ms-calc-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.ms-calc-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; }
.ms-calc-row:last-of-type { border-bottom: none; }
.ms-calc-label { color: var(--text-secondary); }
.ms-calc-val   { color: var(--text-primary); font-weight: 600; }
.ms-calc-total { display: flex; justify-content: space-between; padding: 0.75rem 0 0; font-size: 1rem; font-weight: 700; color: #22d3ee; border-top: 2px solid rgba(6,182,212,0.3); margin-top: 0.25rem; }
.ms-calc-close { width: 100%; margin-top: 1rem; padding: 0.65rem; border: none; border-radius: 10px; background: rgba(6,182,212,0.15); color: #22d3ee; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.ms-calc-close:hover { background: rgba(6,182,212,0.25); }

/* Responsive */
@media (max-width: 768px) {
    .ms-two-col { grid-template-columns: 1fr; }
    .ms-scoreboard { grid-template-columns: repeat(3, 1fr); }
    .ms-comm-amount { font-size: 2.2rem; }
    .ms-comm-row { flex-direction: column; align-items: flex-start; }
    .ms-comm-nudge { min-width: 100%; width: 100%; }
}

/* Dark mode refinements */
[data-theme="dark"] .ms-commission-hero { background: linear-gradient(135deg, #080f1c 0%, #0d1b2e 50%, #0f1e33 100%); }
[data-theme="dark"] .ms-score-card   { background: var(--bg-card); }
[data-theme="dark"] .ms-card         { background: var(--bg-card); }
[data-theme="dark"] .ms-tasks-section { background: var(--bg-card); }

/* ================================================================
   DM MARKET VIEW — Phase 3 (.ms-dm-* + .ms-store-* + .ms-flag-* + .ms-coaching-*)
   ================================================================ */
.ms-dm-market-block { margin-bottom: 2.5rem; }
.ms-dm-section-title { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 0.75rem; padding-top: 0.25rem; }

/* Market totals row */
.ms-dm-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.ms-dm-total-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; }

/* Store leaderboard */
.ms-dm-lb-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ms-dm-lb-row:last-child { border-bottom: none; }
.ms-dm-lb-rank  { font-size: 1rem; width: 28px; text-align: center; flex-shrink: 0; }
.ms-dm-lb-store { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-dm-lb-stats { font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap; }

/* Store cards grid */
.ms-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.85rem; margin-bottom: 1.25rem; }
.ms-store-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.95rem 1rem; border-top: 3px solid var(--border-color); }
.ms-store-card.ms-perf-green  { border-top-color: #22c55e; }
.ms-store-card.ms-perf-yellow { border-top-color: #f59e0b; }
.ms-store-card.ms-perf-red    { border-top-color: #ef4444; }
.ms-store-card-name { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.3rem; }
.ms-store-card-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.65rem; }
.ms-store-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; min-height: 1.2rem; }
.ms-store-mgr  { font-size: 0.72rem; color: var(--text-secondary); }
.ms-no-mgr     { color: #ef4444 !important; font-weight: 600; }
.ms-store-today { font-size: 0.72rem; color: var(--text-secondary); }
.ms-staff-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
.ms-staff-badge.ok   { background: rgba(34,197,94,0.12);  color: #22c55e; }
.ms-staff-badge.warn { background: rgba(239,68,68,0.12);  color: #ef4444; }
.ms-store-issues { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 8px; }
.ms-store-issues.critical { background: rgba(239,68,68,0.12);  color: #ef4444; }
.ms-store-issues.warn     { background: rgba(245,158,11,0.12); color: #f59e0b; }

/* Per-store metric grid inside each card */
.ms-store-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.ms-store-metric { display: flex; flex-direction: column; align-items: center; padding: 0.35rem 0.2rem; background: rgba(255,255,255,0.025); border-radius: 6px; }
.ms-store-metric-val { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }

/* Staffing flags */
.ms-flag-item { padding: 0.55rem 0.75rem; background: rgba(255,255,255,0.02); border-radius: 8px; margin-bottom: 0.35rem; font-size: 0.8rem; color: var(--text-primary); }
.ms-flag-critical { border-left: 3px solid #ef4444; }
.ms-flag-warn     { border-left: 3px solid #f59e0b; }
.ms-flag-info     { border-left: 3px solid #3b82f6; }

/* Coaching rows */
.ms-coaching-row { padding: 0.5rem 0.75rem; margin-bottom: 0.35rem; border-radius: 8px; font-size: 0.8rem; color: var(--text-primary); }
.ms-coaching-star { background: rgba(251,191,36,0.07);  border-left: 3px solid #fbbf24; }
.ms-coaching-attn { background: rgba(239,68,68,0.05);   border-left: 3px solid #ef4444; }

/* Task store label (DM view shows store name alongside each item) */
.ms-task-store { font-size: 0.66rem; color: var(--text-secondary); background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }

/* Responsive */
@media (max-width: 900px) {
    .ms-store-grid   { grid-template-columns: repeat(2, 1fr); }
    .ms-dm-totals    { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .ms-store-grid    { grid-template-columns: 1fr 1fr; }
    .ms-dm-totals     { grid-template-columns: repeat(2, 1fr); }
    .ms-store-metrics { grid-template-columns: repeat(2, 1fr); }
    .ms-dm-lb-stats   { font-size: 0.68rem; }
    .ms-dm-lb-row     { flex-wrap: wrap; gap: 0.25rem; }
}
@media (max-width: 400px) {
    .ms-store-grid   { grid-template-columns: 1fr; }
}




/* ============================================
   Admin My Sales (.admin-ms-*)
   ============================================ */
.ms-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
.admin-ms-wrap { max-width: 1100px; }
.admin-ms-header { margin-bottom: 1.25rem; }
.admin-ms-header-title { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); }
.admin-ms-header-meta { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.2rem; }
.admin-ms-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.admin-ms-section-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.9rem; display: block; }
.admin-ms-totals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.admin-ms-total-card { background: var(--bg-secondary); border-radius: 10px; padding: 0.85rem 1rem; border-top: 3px solid transparent; }
.admin-ms-total-value { font-size: 1.65rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.admin-ms-total-label { font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin: 0.2rem 0 0.5rem; }
.admin-ms-card-mim { border-top-color: #e91e8c; }
.admin-ms-card-hint { border-top-color: #ff8c00; }
.admin-ms-card-tablet { border-top-color: #00bcd4; }
.admin-ms-card-watch { border-top-color: #8b5cf6; }
.admin-ms-card-boxes { border-top-color: #64748b; }
.admin-ms-card-acc { border-top-color: #22c55e; }
.admin-ms-card-reps { border-top-color: #3b82f6; }
.admin-ms-card-profit { border-top-color: #f59e0b; }
.admin-ms-markets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.admin-ms-market-card { background: var(--bg-secondary); border-radius: 10px; padding: 0.85rem 1rem; border-left: 4px solid; }
.admin-ms-mkt-purple { border-left-color: #7c3aed; }
.admin-ms-mkt-blue { border-left-color: #1d4ed8; }
.admin-ms-mkt-cyan { border-left-color: #0891b2; }
.admin-ms-mkt-orange { border-left-color: #c2410c; }
.admin-ms-mkt-green { border-left-color: #16a34a; }
.admin-ms-mkt-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.admin-ms-mkt-rank { font-size: 1rem; }
.admin-ms-mkt-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); flex: 1; }
.admin-ms-perf-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.admin-ms-perf-green { background: #22c55e; }
.admin-ms-perf-amber { background: #f59e0b; }
.admin-ms-perf-red { background: #ef4444; }
.admin-ms-mkt-meta { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.65rem; }
.admin-ms-mkt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; margin-bottom: 0.5rem; }
.admin-ms-mkt-stat { text-align: center; }
.admin-ms-mkt-stat-value { display: block; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.admin-ms-mkt-stat-label { font-size: 0.62rem; color: var(--text-secondary); text-transform: uppercase; }
.admin-ms-mkt-flag { font-size: 0.72rem; margin-top: 0.45rem; padding: 0.25rem 0.4rem; border-radius: 4px; background: rgba(245,158,11,0.12); color: #92400e; }
.admin-ms-mkt-flag-ok { background: rgba(34,197,94,0.1); color: #166534; }
.admin-ms-lb-list { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-ms-lb-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 8px; border-left: 3px solid; }
.admin-ms-lb-purple { background: rgba(124,58,237,0.08); border-left-color: #7c3aed; }
.admin-ms-lb-blue { background: rgba(29,78,216,0.08); border-left-color: #1d4ed8; }
.admin-ms-lb-cyan { background: rgba(8,145,178,0.08); border-left-color: #0891b2; }
.admin-ms-lb-orange { background: rgba(194,65,12,0.08); border-left-color: #c2410c; }
.admin-ms-lb-green { background: rgba(22,163,74,0.08); border-left-color: #16a34a; }
.admin-ms-lb-rank { font-size: 1.1rem; min-width: 2rem; }
.admin-ms-lb-name { font-weight: 600; font-size: 0.88rem; flex: 1; color: var(--text-primary); }
.admin-ms-lb-stats { font-size: 0.78rem; color: var(--text-secondary); }
.admin-ms-lb-score { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.admin-ms-tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.admin-ms-tp-card { background: var(--bg-secondary); border-radius: 10px; padding: 0.85rem; }
.admin-ms-tp-card-title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.6rem; display: block; }
.admin-ms-tp-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border-color); }
.admin-ms-tp-row:last-child { border-bottom: none; }
.admin-ms-tp-rank { font-size: 1rem; min-width: 1.8rem; }
.admin-ms-tp-info { flex: 1; min-width: 0; }
.admin-ms-tp-name { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ms-tp-store { font-size: 0.7rem; color: var(--text-secondary); }
.admin-ms-tp-value { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.admin-ms-staffing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.admin-ms-staff-card { background: var(--bg-secondary); border-radius: 10px; padding: 0.85rem; text-align: center; border: 1px solid transparent; }
.admin-ms-staff-warn { border-color: #fbbf24; }
.admin-ms-staff-ok { border-color: #4ade80; }
.admin-ms-store-flag { display: inline-block; font-size: 0.73rem; background: #fef9c3; color: #854d0e; padding: 0.18rem 0.5rem; border-radius: 20px; margin: 0.2rem 0.2rem 0 0; }
.admin-ms-coach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.admin-ms-coach-card { border-radius: 10px; padding: 0.85rem; text-align: center; }
.admin-ms-coach-red { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); }
.admin-ms-coach-amber { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.3); }
.admin-ms-coach-green { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); }
.admin-ms-coach-value { font-size: 1.65rem; font-weight: 800; color: var(--text-primary); }
.admin-ms-coach-label { font-size: 0.68rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin: 0.2rem 0 0.2rem; }
.admin-ms-coach-sub { font-size: 0.68rem; color: var(--text-secondary); }

@media (max-width: 768px) {
    .admin-ms-totals-grid, .admin-ms-staffing-grid, .admin-ms-coach-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-ms-markets-grid, .admin-ms-tp-grid { grid-template-columns: 1fr; }
    .admin-ms-lb-stats { display: none; }
}

[data-theme="dark"] .admin-ms-section { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .admin-ms-total-card, [data-theme="dark"] .admin-ms-market-card, [data-theme="dark"] .admin-ms-tp-card, [data-theme="dark"] .admin-ms-staff-card { background: #334155; }
[data-theme="dark"] .admin-ms-mkt-flag { color: #fbbf24; }
[data-theme="dark"] .admin-ms-mkt-flag-ok { color: #4ade80; }
[data-theme="dark"] .admin-ms-store-flag { background: rgba(245,158,11,0.2); color: #fbbf24; }
[data-theme="dark"] .admin-ms-coach-red { background: rgba(239,68,68,0.12); }
[data-theme="dark"] .admin-ms-coach-amber { background: rgba(245,158,11,0.12); }
[data-theme="dark"] .admin-ms-coach-green { background: rgba(34,197,94,0.1); }
[data-theme="dark"] .admin-ms-lb-purple { background: rgba(124,58,237,0.12); }
[data-theme="dark"] .admin-ms-lb-blue { background: rgba(29,78,216,0.12); }
[data-theme="dark"] .admin-ms-lb-cyan { background: rgba(8,145,178,0.12); }
[data-theme="dark"] .admin-ms-lb-orange { background: rgba(194,65,12,0.12); }
[data-theme="dark"] .admin-ms-lb-green { background: rgba(22,163,74,0.12); }

/* ===========================
   Extracted Inline Style Classes
   (audit cleanup — replaces style= attributes in JS template literals)
   =========================== */

/* Utility classes */
.empty-state { padding: 3rem; text-align: center; color: var(--text-secondary); }
.empty-state-sm { padding: 1rem; text-align: center; color: var(--text-secondary); }
.error-state { padding: 2rem; text-align: center; color: #f87171; }
.hidden { display: none; }

/* Resolved Week modal */
.rw-summary { margin-bottom: 1rem; color: var(--text-secondary); font-size: 0.8125rem; }
.rw-resolver { margin-bottom: 1rem; }
.rw-resolver-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: rgba(34,197,94,0.08); border-radius: 8px 8px 0 0; border-bottom: 2px solid rgba(34,197,94,0.3); }
.rw-resolver-name { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--text-primary); }
.rw-resolver-count { background: rgba(22,163,74,0.15); color: #15803d; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
.rw-resolver-cats { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.rw-cat-chip { padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; }
.rw-item-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); font-size: 0.8125rem; }
.rw-item-cat { padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.rw-item-title { color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-item-date { color: var(--text-secondary); font-size: 0.75rem; white-space: nowrap; }

/* Archive modal cards */
.archive-card { background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
.archive-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.archive-title { color: var(--text-primary); font-weight: bold; }
.archive-date { font-size: 0.75rem; color: var(--text-muted, var(--text-secondary)); }
.archive-meta { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.archive-resolve { font-size: 0.875rem; color: var(--text-muted, var(--text-secondary)); }
.archive-notes { font-size: 0.875rem; color: var(--text-primary); margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-hover, var(--bg-secondary)); border-radius: 4px; }

/* Rep-tracker progress bar colors (width stays inline — only background extracted) */
.rp-bar-green { background: #22c55e; }
.rp-bar-amber { background: #f59e0b; }
.rp-bar-red { background: #ef4444; }

/* One-off extracted styles */
.roster-edit-btn-sm { opacity: 0.7; font-size: 0.75rem; }
.roster-sep-info { opacity: 0.6; font-size: 0.75rem; }
.badge-readonly { cursor: default; opacity: 0.7; }
.note-text-mt { margin-top: 0.5rem; }
.rt-drilldown-name { padding-left: 1.8rem; font-size: 0.75rem; }

/* Dark mode overrides for extracted classes */
[data-theme="dark"] .error-state { color: #fca5a5; }
[data-theme="dark"] .rw-resolver-header { background: rgba(34,197,94,0.12); }
[data-theme="dark"] .rw-resolver-count { background: rgba(22,163,74,0.25); color: #86efac; }
[data-theme="dark"] .rp-bar-green { background: #16a34a; }
[data-theme="dark"] .rp-bar-amber { background: #d97706; }
[data-theme="dark"] .rp-bar-red { background: #dc2626; }

/* ====== Profit Formula Admin Tab ====== */
.pf-section-active { border-color: rgba(16, 185, 129, 0.5) !important; }
.pf-title-active { color: #10b981; }
.pf-active-badge {
    display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
    background: #10b981; color: #fff; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.05em; margin-bottom: 0.75rem;
}
.pf-rate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.pf-rate-card {
    text-align: center; padding: 1rem; border-radius: 0.5rem;
    background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2);
}
.pf-rate-value { font-size: 1.5rem; font-weight: 700; color: #10b981; }
.pf-rate-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
.pf-effective-text { font-size: 0.8rem; color: var(--text-secondary); }
.pf-notes { font-size: 0.8rem; color: var(--text-secondary); font-style: italic; margin-top: 0.35rem; }
.pf-empty-state { font-size: 0.85rem; color: var(--text-secondary); padding: 1rem 0; }

/* Upcoming */
.pf-section-upcoming { border-color: rgba(59, 130, 246, 0.5) !important; }
.pf-title-upcoming { color: #3b82f6; }
.pf-upcoming-card {
    padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 0.5rem;
    background: rgba(59, 130, 246, 0.06); border: 1px solid rgba(59, 130, 246, 0.15);
}
.pf-upcoming-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pf-badge-future {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: #3b82f6; color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
}
.pf-upcoming-date { font-weight: 600; font-size: 0.9rem; }
.pf-upcoming-actions { margin-left: auto; display: flex; gap: 0.35rem; }
.pf-rate-grid-sm { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0; }
.pf-rate-card-sm { font-size: 0.8rem; padding: 0.35rem 0.5rem; border-radius: 0.35rem; background: rgba(59, 130, 246, 0.06); }

/* Form */
.pf-section-form { border-color: rgba(139, 92, 246, 0.5) !important; }
.pf-title-form { color: #8b5cf6; }
.pf-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; }
.pf-form-field-wide { grid-column: 1 / -1; }
.pf-form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem; }
.pf-form-actions { display: flex; gap: 0.5rem; }
.btn-danger-outline {
    background: transparent; color: #ef4444; border: 1px solid #ef4444;
}
.btn-danger-outline:hover { background: rgba(239, 68, 68, 0.1); }

/* History */
.pf-history-section { margin-top: 0.5rem; }
.pf-history-toggle {
    cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
    padding: 0.5rem 0; user-select: none;
}
.pf-timeline { padding-left: 1rem; border-left: 2px solid var(--border-color, #e2e8f0); margin-top: 0.5rem; }
.pf-timeline-item { position: relative; padding: 0.5rem 0 0.75rem 1rem; }
.pf-timeline-dot {
    position: absolute; left: -1.35rem; top: 0.7rem; width: 10px; height: 10px;
    border-radius: 50%; background: var(--text-secondary); border: 2px solid var(--bg-card, #fff);
}
.pf-timeline-date { font-weight: 600; font-size: 0.85rem; }
.pf-timeline-rates { font-size: 0.8rem; color: var(--text-secondary); }
.pf-timeline-notes { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; }
.pf-timeline-meta { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.7; }

@media (max-width: 768px) {
    .pf-rate-grid { grid-template-columns: 1fr; }
    .pf-form-grid { grid-template-columns: 1fr; }
    .pf-rate-grid-sm { grid-template-columns: 1fr; }
    .pf-upcoming-header { flex-direction: column; align-items: flex-start; }
    .pf-upcoming-actions { margin-left: 0; }
}

/* Dark mode overrides for Profit Formula */
[data-theme="dark"] .pf-rate-card { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.25); }
[data-theme="dark"] .pf-upcoming-card { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.2); }
[data-theme="dark"] .pf-rate-card-sm { background: rgba(59, 130, 246, 0.1); }
[data-theme="dark"] .pf-timeline { border-left-color: #334155; }
[data-theme="dark"] .pf-timeline-dot { background: #64748b; border-color: var(--bg-card); }

/* ============================================================
   CHAT MODULE (chat.js) — Phase 1 MVP
   Two-pane desktop, single-pane mobile slide nav
   ============================================================ */

#chatView {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0.25rem 0.5rem 0.5rem;
}

.chat-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    height: calc(100vh - 140px);
    min-height: 500px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}

.chat-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    overflow: hidden;
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
}

.chat-sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}

.chat-new-btn {
    background: #7c3aed;
    color: #fff;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-new-btn:hover { background: #6d28d9; }

/* Sidebar action buttons container (📢 Broadcast + + New) */
.chat-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Broadcast button — Jim + Tyler only, gradient pill */
.chat-broadcast-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    padding: 0;
}
.chat-broadcast-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.45);
}
.chat-broadcast-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Game Console collapsible bar (Game Room pane only) */
.chat-gc-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    position: relative;
}
.chat-gc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: filter 0.15s;
}
.chat-gc-toggle:hover { filter: brightness(1.05); }
.chat-gc-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.chat-gc-arrow {
    font-size: 1rem;
    transition: transform 0.2s;
}
.chat-gc-bar.open .chat-gc-arrow { transform: rotate(180deg); }

.chat-gc-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-card, #fff);
    border-top: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* Dark mode overrides */
[data-theme="dark"] .chat-gc-bar {
    border-top-color: #334155;
    background: #1e293b;
}
[data-theme="dark"] .chat-gc-panel {
    background: #1e293b;
    border-top-color: #334155;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.chat-sidebar-search {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.chat-sidebar-search input {
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #0f172a);
    box-sizing: border-box;
}
.chat-sidebar-search input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.chat-conv-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.chat-conv-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    border-left: 3px solid transparent;
    transition: background 0.1s;
}
.chat-conv-row:hover { background: rgba(124, 58, 237, 0.05); }
.chat-conv-row.active {
    background: rgba(124, 58, 237, 0.1);
    border-left-color: #7c3aed;
}
.chat-conv-row.unread .chat-conv-name { font-weight: 700; color: var(--text-primary, #0f172a); }

.chat-conv-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Presence dots (Phase 4a) */
.chat-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.chat-presence-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card, #fff);
    transition: background 0.2s;
}
.chat-presence-dot.presence-online { background: #22c55e; }
.chat-presence-dot.presence-away { background: #f59e0b; }
.chat-presence-dot.presence-offline { background: #94a3b8; }
.chat-presence-dot-inline {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}
.chat-presence-dot-inline.presence-online { background: #22c55e; }
.chat-presence-dot-inline.presence-away { background: #f59e0b; }
.chat-presence-dot-inline.presence-offline { background: #94a3b8; }

.chat-conv-body {
    flex: 1;
    min-width: 0;
}

.chat-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.chat-conv-name {
    font-size: 0.88rem;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conv-time {
    font-size: 0.68rem;
    color: var(--text-secondary, #64748b);
    flex-shrink: 0;
}

.chat-conv-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.15rem;
}
.chat-conv-preview-text {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conv-row.unread .chat-conv-preview-text {
    color: var(--text-primary, #1e293b);
    font-weight: 500;
}
.chat-unread-dot {
    width: 8px;
    height: 8px;
    background: #7c3aed;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Pin/favorite conversations */
.chat-pin-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    align-self: center;
    filter: grayscale(1);
}
.chat-pin-btn.pinned { opacity: 0.7; filter: none; }
.chat-conv-row:hover .chat-pin-btn { opacity: 0.5; }
.chat-conv-row:hover .chat-pin-btn:hover { opacity: 1; filter: none; background: rgba(124, 58, 237, 0.1); }
.chat-pin-btn.pinned:hover { opacity: 1; }
.chat-pin-indicator { font-size: 0.65rem; vertical-align: middle; }
.chat-pin-divider {
    padding: 0.3rem 0.9rem 0.15rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
}
@media (max-width: 768px) {
    .chat-pin-btn { opacity: 0.5; }
    .chat-pin-btn.pinned { opacity: 0.7; }
}

/* Mute toggle button */
.chat-mute-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    opacity: 0;
    padding: 0.35rem;
    border-radius: 0.3rem;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    align-self: center;
    filter: grayscale(1);
}
.chat-mute-btn.muted { opacity: 0.7; filter: none; }
.chat-conv-row:hover .chat-mute-btn { opacity: 0.5; }
.chat-conv-row:hover .chat-mute-btn:hover { opacity: 1; filter: none; background: rgba(239, 68, 68, 0.1); }
.chat-mute-btn.muted:hover { opacity: 1; }
.chat-mute-indicator { font-size: 0.55rem; vertical-align: middle; opacity: 0.6; }
@media (max-width: 768px) {
    .chat-mute-btn { opacity: 0.5; }
    .chat-mute-btn.muted { opacity: 0.7; }
}

.chat-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-size: 0.85rem;
}

.chat-dim { color: var(--text-secondary, #64748b); font-style: italic; }

/* Right pane */
.chat-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-pane-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #64748b);
    padding: 2rem;
    text-align: center;
}
.chat-pane-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.6; }
.chat-pane-empty-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #1e293b); margin-bottom: 0.25rem; }
.chat-pane-empty-sub { font-size: 0.85rem; }

.chat-pane-active {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.chat-pane-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    flex-shrink: 0;
}

.chat-back-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.3rem;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.chat-back-btn:hover { background: var(--bg-secondary, #f1f5f9); }

.chat-pane-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}
.chat-pane-sub {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 2;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-secondary, #f8fafc);
}

.chat-date-divider {
    text-align: center;
    margin: 0.75rem 0;
    position: relative;
}
.chat-date-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
    z-index: 0;
}
.chat-date-divider span {
    background: var(--bg-secondary, #f8fafc);
    padding: 0 0.75rem;
    color: var(--text-secondary, #64748b);
    font-size: 0.72rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    word-break: break-word;
}
.chat-msg-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-other { align-self: flex-start; align-items: flex-start; }
.chat-msg-grouped { margin-top: -0.35rem; }
.chat-msg-author {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.2rem;
    padding: 0 0.25rem;
    font-weight: 600;
}
.chat-msg-bubble {
    padding: 0.5rem 0.8rem;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.4;
    max-width: 100%;
}
.chat-msg-mine .chat-msg-bubble {
    background: #7c3aed;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-msg-other .chat-msg-bubble {
    background: #fff;
    color: var(--text-primary, #1e293b);
    border: 1px solid var(--border-color, #e2e8f0);
    border-bottom-left-radius: 4px;
}
.chat-msg-time {
    font-size: 0.66rem;
    color: var(--text-secondary, #94a3b8);
    margin-top: 0.15rem;
    padding: 0 0.25rem;
}

.chat-mention {
    display: inline-block;
    padding: 0 0.3rem;
    background: rgba(251, 191, 36, 0.25);
    color: #92400e;
    border-radius: 4px;
    font-weight: 600;
}
.chat-mention-me {
    background: #fbbf24;
    color: #78350f;
}
.chat-msg-mine .chat-mention {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.chat-composer {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    flex-shrink: 0;
}
.chat-composer textarea {
    flex: 1;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 20px;
    padding: 0.55rem 0.95rem;
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #0f172a);
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
    box-sizing: border-box;
}
.chat-composer textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.chat-composer textarea:disabled { opacity: 0.6; cursor: wait; }
.chat-send-btn {
    background: #7c3aed;
    color: #fff;
    border: none;
    padding: 0 1.1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.chat-send-btn:hover { background: #6d28d9; }
.chat-send-btn:disabled { opacity: 0.5; cursor: wait; background: #9ca3af; }

.chat-new-results {
    max-height: 360px;
    overflow-y: auto;
    margin-top: 0.5rem;
}
.chat-new-result {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.chat-new-result:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.2);
}
.chat-new-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.chat-new-avatar-wrap .chat-presence-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--bg-card, #fff);
}
.chat-new-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-grp-presence-label {
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 4px;
}
.presence-text-online { color: #22c55e; }
.presence-text-away { color: #f59e0b; }
.chat-new-body { flex: 1; min-width: 0; }
.chat-new-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-new-email {
    font-size: 0.73rem;
    color: var(--text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-new-title {
    font-size: 0.73rem;
    color: var(--text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.chat-new-role {
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.chat-mention-dropdown {
    position: fixed;
    z-index: 10000;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.chat-tab-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    margin-left: 0.3rem;
    line-height: 1.4;
}

.nc-item-chat { cursor: pointer; }
.nc-item-chat:hover { background: rgba(124, 58, 237, 0.08); }

/* Mobile (≤900px): single-pane slide navigation */
@media (max-width: 900px) {
    .chat-layout {
        grid-template-columns: 1fr;
        height: calc(100vh - 140px);
        position: relative;
    }
    .chat-sidebar { border-right: none; }
    .chat-pane {
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        background: var(--bg-card, #fff);
        z-index: 2;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .chat-layout.chat-show-pane .chat-pane { transform: translateX(0); }
    .chat-back-btn { display: inline-flex; }
    .chat-pane-sub { display: none; }
    .chat-msg { max-width: 85%; }
    /* Multi-pane: mobile stays single-pane */
    .chat-pane-close-btn { display: none; }
    .chat-pane-empty { display: none; }
    .chat-panes-container {
        position: absolute;
        inset: 0;
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
    }
    .chat-layout.chat-show-pane .chat-panes-container {
        pointer-events: auto;
    }
    .chat-pane-window {
        position: absolute;
        inset: 0;
        border-left: none;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 2;
        background: var(--bg-card, #fff);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .chat-pane-window .chat-pane-header {
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 3;
    }
    .chat-pane-window .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    .chat-pane-window .chat-composer-wrap {
        flex-shrink: 0;
    }
    .chat-layout.chat-show-pane .chat-pane-window {
        transform: translateX(0);
    }
    .chat-layout.chat-show-pane .chat-sidebar { visibility: hidden; }
}

/* Dark mode */
[data-theme="dark"] .chat-layout {
    background: var(--bg-card, #1e293b);
    border-color: #334155;
}
[data-theme="dark"] .chat-sidebar,
[data-theme="dark"] .chat-messages {
    background: #0f172a;
}
[data-theme="dark"] .chat-sidebar-header,
[data-theme="dark"] .chat-pane-header,
[data-theme="dark"] .chat-composer {
    background: var(--bg-card, #1e293b);
    border-color: #334155;
}
[data-theme="dark"] .chat-sidebar-search,
[data-theme="dark"] .chat-conv-list { border-color: #334155; }
[data-theme="dark"] .chat-msg-other .chat-msg-bubble {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
[data-theme="dark"] .chat-conv-row:hover { background: rgba(167, 139, 250, 0.08); }
[data-theme="dark"] .chat-conv-row.active { background: rgba(167, 139, 250, 0.15); }
[data-theme="dark"] .chat-conv-row:hover .chat-pin-btn:hover { background: rgba(167, 139, 250, 0.15); }
[data-theme="dark"] .chat-conv-row:hover .chat-mute-btn:hover { background: rgba(239, 68, 68, 0.2); }
[data-theme="dark"] .chat-presence-dot { border-color: var(--bg-card, #1e293b); }
[data-theme="dark"] .chat-mention {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}
[data-theme="dark"] .chat-mention-me {
    background: #92400e;
    color: #fef3c7;
}
[data-theme="dark"] .chat-new-result:hover {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.25);
}
[data-theme="dark"] .chat-date-divider span { background: #0f172a; }

/* ============================================================
   CHAT — Phase 2: groups, reactions, edit, delete
   ============================================================ */

/* New conversation modal — DM/Group tab toggle */
.chat-new-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
}
.chat-new-tab {
    flex: 1;
    padding: 0.65rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.chat-new-tab.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}
.chat-new-tab:hover:not(.active) {
    color: var(--text-primary, #1e293b);
}

/* Group panel chips (selected members during creation) */
.chat-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0.5rem;
    margin-top: 0.4rem;
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-secondary, #f8fafc);
}
.chat-grp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.chat-grp-chip-x {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.7;
}
.chat-grp-chip-x:hover { opacity: 1; }
.chat-grp-empty { font-size: 0.78rem; padding: 0.2rem; }

.chat-grp-add-icon {
    margin-left: auto;
    color: #7c3aed;
    font-weight: 700;
    font-size: 1.05rem;
    padding-right: 0.25rem;
}

.chat-new-group-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.chat-new-group-hint {
    font-size: 0.72rem;
}

/* Pane title — clickable for group details */
.chat-pane-title-clickable {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}
.chat-pane-title-clickable:hover { color: #7c3aed; }

/* Group details modal sections */
.chat-grp-section {
    margin-bottom: 1rem;
}
.chat-grp-section:last-child { margin-bottom: 0; }
.chat-grp-rename-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.chat-grp-rename-row input { flex: 1; }
.chat-grp-name-static {
    padding: 0.45rem 0.7rem;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 6px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.chat-grp-members {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--bg-card, #fff);
}
.chat-grp-member {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.chat-grp-member:last-child { border-bottom: none; }
.chat-grp-you {
    color: #7c3aed;
    font-size: 0.7rem;
    font-weight: 600;
}
.chat-grp-admin-badge {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    border-radius: 4px;
    font-size: 0.62rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.chat-grp-remove {
    margin-left: auto;
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-grp-remove:hover {
    background: rgba(239, 68, 68, 0.08);
}

.chat-grp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding-top: 0.75rem;
}
.chat-grp-leave-btn {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}
.chat-grp-leave-btn:hover {
    background: rgba(239, 68, 68, 0.08);
}
.chat-grp-delete-btn {
    background: #ef4444;
    color: #fff;
    border: 1px solid #ef4444;
    margin-left: 0.5rem;
}
.chat-grp-delete-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* Message bubble actions (hover toolbar) */
.chat-msg-bubble-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    max-width: 100%;
}
.chat-msg-mine .chat-msg-bubble-wrap {
    flex-direction: row-reverse;
}
.chat-msg-actions {
    display: none;
    align-items: center;
    gap: 2px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    align-self: center;
    flex-shrink: 0;
}
.chat-msg:hover .chat-msg-actions { display: inline-flex; }
.chat-msg-action {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
    border-radius: 50%;
    line-height: 1;
    transition: background 0.1s;
}
.chat-msg-action:hover { background: var(--bg-secondary, #f1f5f9); }

/* Edited tag */
.chat-msg-edited {
    margin-left: 0.4rem;
    font-size: 0.65rem;
    color: var(--text-secondary, #94a3b8);
    font-style: italic;
}
.chat-msg-mine .chat-msg-edited { color: rgba(255, 255, 255, 0.75); }

/* Deleted message */
.chat-msg-deleted .chat-msg-bubble {
    background: var(--bg-secondary, #f1f5f9) !important;
    color: var(--text-secondary, #94a3b8) !important;
    border-style: dashed !important;
    border-color: var(--border-color, #e2e8f0) !important;
}
.chat-msg-deleted.chat-msg-mine .chat-msg-bubble {
    background: rgba(124, 58, 237, 0.18) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
}

/* Inline edit box */
.chat-edit-box {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg-card, #fff);
    border: 1px solid #7c3aed;
    border-radius: 10px;
    padding: 0.5rem;
    max-width: 360px;
    width: 100%;
}
.chat-edit-text {
    width: 100%;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #0f172a);
    min-height: 60px;
}
.chat-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}
.chat-edit-cancel,
.chat-edit-save {
    border: none;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}
.chat-edit-cancel {
    background: transparent;
    color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, #e2e8f0);
}
.chat-edit-save {
    background: #7c3aed;
    color: #fff;
}
.chat-edit-save:hover { background: #6d28d9; }

/* Reaction chips below messages */
.chat-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 0 0.25rem;
}
.chat-msg-mine .chat-reactions { justify-content: flex-end; }
.chat-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.chat-reaction-chip:hover {
    background: var(--bg-secondary, #f1f5f9);
}
.chat-reaction-chip.mine {
    background: rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.35);
    color: #6d28d9;
    font-weight: 600;
}
.chat-reaction-emoji { font-size: 0.85rem; }
.chat-reaction-count { font-size: 0.7rem; }

/* Reaction picker (floating) */
.chat-reaction-picker {
    position: fixed;
    z-index: 10001;
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.chat-reaction-pick {
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.1s, transform 0.1s;
    line-height: 1;
}
.chat-reaction-pick:hover {
    background: var(--bg-secondary, #f1f5f9);
    transform: scale(1.2);
}

/* ==========================================================================
   Chat — message action menu, reply chip, quote bar, scroll-to flash
   ========================================================================== */
.chat-msg-menu-backdrop {
  position: fixed; inset: 0; z-index: 10003; background: rgba(15, 23, 42, 0.45);
}
.chat-msg-menu {
  position: fixed; z-index: 10004;
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  padding: 0.35rem; min-width: 240px; max-width: 320px;
  animation: chatMenuPop 0.14s ease-out;
}
@keyframes chatMenuPop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.chat-msg-menu-quick {
  display: flex; gap: 0.3rem; padding: 0.3rem 0.35rem 0.4rem;
  border-bottom: 1px solid #f1f5f9;
}
.chat-msg-menu-quick-btn {
  background: #f8fafc; border: none; width: 36px; height: 36px;
  border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  transition: transform 0.08s, background 0.1s;
}
.chat-msg-menu-quick-btn:hover { background: #eef2ff; transform: scale(1.1); }
.chat-msg-menu-quick-btn.mine { background: #ede9fe; box-shadow: 0 0 0 2px #8b5cf6 inset; }
.chat-msg-menu-quick-add { background: #ede9fe; color: #7c3aed; font-weight: 700; }
.chat-msg-menu-actions { display: flex; flex-direction: column; padding: 0.3rem 0; }
.chat-msg-menu-action {
  display: flex; align-items: center; gap: 0.6rem;
  background: none; border: none; width: 100%;
  padding: 0.55rem 0.7rem; font-size: 0.9rem; color: #0f172a; text-align: left;
  cursor: pointer; border-radius: 8px;
}
.chat-msg-menu-action:hover { background: #f1f5f9; }
.chat-msg-menu-action.danger { color: #dc2626; }
.chat-msg-menu-separator { height: 1px; background: #f1f5f9; margin: 0.2rem 0.4rem; }

/* Inline full-emoji picker opened via ➕ / "React…" */
.chat-msg-emoji-picker-inline {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem;
  padding: 0.4rem; max-height: 220px; overflow-y: auto;
  border-top: 1px solid #f1f5f9;
}
.chat-msg-emoji-picker-inline button {
  background: #f8fafc; border: none; width: 36px; height: 36px;
  border-radius: 8px; font-size: 1.05rem; cursor: pointer;
}
.chat-msg-emoji-picker-inline button:hover { background: #eef2ff; }

/* New ⋯ button in the hover toolbar */
.chat-msg-more {
  /* inherits .chat-msg-action sizing/shape; keep it minimal */
}

/* Reply chip — composer */
.chat-reply-chip {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: #f1f5f9; border-left: 3px solid #8b5cf6;
  border-radius: 0 8px 8px 0; padding: 0.45rem 0.6rem;
  margin-bottom: 0.4rem; font-size: 0.85rem;
}
.chat-reply-chip-icon { color: #8b5cf6; flex-shrink: 0; margin-top: 0.1rem; }
.chat-reply-chip-body { flex: 1; min-width: 0; }
.chat-reply-chip-sender { font-weight: 600; color: #0f172a; }
.chat-reply-chip-text {
  color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-reply-chip-close {
  background: none; border: none; color: #94a3b8; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0.1rem 0.3rem;
}
.chat-reply-chip-close:hover { color: #dc2626; }

/* Quote bar — rendered inside a reply bubble above the reply text */
.chat-msg-quote {
  display: flex; flex-direction: column; gap: 0.1rem;
  background: rgba(15, 23, 42, 0.06); border-left: 3px solid rgba(139, 92, 246, 0.7);
  border-radius: 0 6px 6px 0; padding: 0.3rem 0.5rem;
  margin-bottom: 0.35rem; cursor: pointer; font-size: 0.8rem;
}
.chat-msg-quote:hover { background: rgba(15, 23, 42, 0.1); }
.chat-msg-quote-sender { font-weight: 600; color: #0f172a; }
.chat-msg-quote-text {
  color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-msg-quote.is-deleted .chat-msg-quote-text { font-style: italic; color: #94a3b8; }
.chat-msg-mine .chat-msg-quote { background: rgba(255, 255, 255, 0.18); border-left-color: rgba(255, 255, 255, 0.6); }
.chat-msg-mine .chat-msg-quote-sender,
.chat-msg-mine .chat-msg-quote-text { color: #ffffff; }

/* Scroll-to-original flash — reuse existing mentionFlashPulse keyframes */
.chat-msg.chat-msg-flash > .chat-msg-bubble-wrap > .chat-msg-bubble {
  animation: mentionFlashPulse 2s ease-out;
}

/* Dark mode adjustments for Phase 2 */
[data-theme="dark"] .chat-new-tabs { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .chat-new-tab.active { color: #a78bfa; border-bottom-color: #a78bfa; }
[data-theme="dark"] .chat-grp-chip {
    background: rgba(167, 139, 250, 0.18);
    color: #c4b5fd;
}
[data-theme="dark"] .chat-grp-name-static { background: #0f172a; }
[data-theme="dark"] .chat-grp-members { background: var(--bg-card, #1e293b); border-color: #334155; }
[data-theme="dark"] .chat-grp-member { border-color: #334155; }
[data-theme="dark"] .chat-grp-admin-badge {
    background: rgba(167, 139, 250, 0.18);
    color: #c4b5fd;
}
[data-theme="dark"] .chat-msg-actions {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .chat-msg-action:hover { background: #334155; }
[data-theme="dark"] .chat-reaction-chip {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
[data-theme="dark"] .chat-reaction-chip.mine {
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.4);
    color: #c4b5fd;
}
[data-theme="dark"] .chat-reaction-picker {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .chat-edit-box { background: #1e293b; border-color: #a78bfa; }
[data-theme="dark"] .chat-msg-deleted .chat-msg-bubble {
    background: #1e293b !important;
    color: #64748b !important;
}

/* Mobile: action toolbar visible on tap (no hover) */
@media (max-width: 900px) {
    .chat-msg-actions {
        display: inline-flex;
        opacity: 0.5;
        scale: 0.85;
    }
    .chat-msg:active .chat-msg-actions { opacity: 1; }
}

/* ============================================================
   CHAT — Phase 3: file attachments + lightbox
   ============================================================ */

/* Composer wrap (replaces direct .chat-composer parent) */
.chat-composer-wrap {
    position: relative;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    flex-shrink: 0;
}
.chat-composer-wrap .chat-composer {
    border-top: none;
}

/* Attach button (left of textarea) */
.chat-attach-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 0.4rem;
    color: var(--text-secondary, #64748b);
    align-self: flex-end;
    height: 36px;
    border-radius: 50%;
    transition: background 0.1s;
}
.chat-attach-btn:hover {
    background: var(--bg-secondary, #f1f5f9);
    color: #7c3aed;
}
.chat-attach-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pending attachment preview chip (above composer) */
.chat-attach-preview {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
}
.chat-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    max-width: 100%;
}
.chat-attach-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.chat-attach-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 4px;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.chat-attach-meta { min-width: 0; flex: 1; }
.chat-attach-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.chat-attach-size {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
}
.chat-attach-x {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0 0.3rem;
    border-radius: 4px;
}
.chat-attach-x:hover { background: var(--bg-secondary, #f1f5f9); color: #ef4444; }

/* Upload progress bar */
.chat-upload-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}
.chat-upload-bar {
    flex: 1;
    height: 6px;
    background: var(--border-color, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}
.chat-upload-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    width: 0%;
    transition: width 0.15s ease;
}

/* Drag-drop overlay */
.chat-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(124, 58, 237, 0.15);
    border: 3px dashed #7c3aed;
    border-radius: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #6d28d9;
    font-size: 1.1rem;
    font-weight: 700;
    pointer-events: none;
    z-index: 5;
}

/* Inline message attachments */
.chat-msg-image {
    display: block;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    max-width: 320px;
    cursor: pointer;
    line-height: 0;
}
.chat-msg-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}
.chat-msg-video {
    width: 100%;
    max-width: 360px;
    border-radius: 10px;
    display: block;
}
/* Media-only bubble: no chrome, just the image/video. Class added by JS
   when the message has only an image/video attachment and no text caption. */
.chat-msg-bubble-media-only {
    padding: 4px !important;
    background: transparent !important;
    border: none !important;
}

.chat-msg-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    max-width: 280px;
    margin-bottom: 4px;
    transition: background 0.1s, border-color 0.1s;
}
.chat-msg-mine .chat-msg-file {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.chat-msg-file:hover {
    background: var(--bg-secondary, #f1f5f9);
    border-color: #7c3aed;
}
.chat-msg-mine .chat-msg-file:hover {
    background: rgba(255, 255, 255, 0.25);
}
.chat-msg-file-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.chat-msg-file-meta { flex: 1; min-width: 0; }
.chat-msg-file-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-msg-file-size {
    display: block;
    font-size: 0.68rem;
    opacity: 0.75;
}
.chat-msg-file-dl {
    font-size: 1rem;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Lightbox */
.chat-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
    animation: chatLightboxFade 0.15s ease;
}
@keyframes chatLightboxFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.chat-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.chat-lightbox-close,
.chat-lightbox-download {
    position: absolute;
    top: 1rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.1s;
}
.chat-lightbox-close { right: 1rem; }
.chat-lightbox-download { right: 3.5rem; }
.chat-lightbox-close:hover,
.chat-lightbox-download:hover { background: rgba(255, 255, 255, 0.3); }

/* System messages (join/leave notifications) */
.chat-msg-system {
  text-align: center;
  padding: 4px 16px;
  margin: 2px 0;
}
.chat-msg-system-text {
  color: var(--text-secondary, #64748b);
  font-style: italic;
  font-size: 0.78rem;
}

/* Bot message bubble (automated messages — RT reports, game results, weather alerts) */
.chat-msg-bot {
  align-self: flex-start;
  flex-direction: row;
}
.chat-bot-avatar {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.85rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-bot-bubble {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
  border: 1px solid #c7d2fe;
  color: var(--text-primary, #1e293b) !important;
  border-radius: 12px 12px 12px 2px !important;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 600px;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg-bot .chat-msg-sender {
  font-weight: 600;
  font-size: 0.75rem;
  color: #6366f1;
  margin-bottom: 2px;
}
[data-theme="dark"] .chat-bot-bubble {
  background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
  border-color: #4338ca;
  color: #e2e8f0 !important;
}
/* Bot bubbles carrying only media (no text caption) — strip the indigo
   gradient so the image floats. Single-class selectors above have equal
   specificity; this two-class combo wins regardless of source order. */
.chat-bot-bubble.chat-msg-bubble-media-only,
[data-theme="dark"] .chat-bot-bubble.chat-msg-bubble-media-only {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .chat-msg-bot .chat-msg-sender { color: #a5b4fc; }

/* Alert bot messages (🚨 System Alert) — amber/orange theme */
.chat-bot-avatar-alert {
  background: linear-gradient(135deg, #d97706, #f59e0b);
}
.chat-bot-bubble-alert {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: #fcd34d;
}
.chat-bot-sender-alert {
  color: #b45309;
}
[data-theme="dark"] .chat-bot-bubble-alert {
  background: linear-gradient(135deg, #1c1a09, #2d2510) !important;
  border-color: #92400e;
  color: #fde68a !important;
}
[data-theme="dark"] .chat-bot-sender-alert { color: #fbbf24; }

/* System-managed group sidebar styling */
.chat-conv-system {
  border-left: 2px solid #6366f1;
}

/* System-managed info banner in group details modal */
.chat-system-info {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366f1;
  padding: 8px 12px;
  margin: 0 0 12px 0;
  font-size: 0.8rem;
  border-radius: 4px;
  color: var(--text-secondary, #64748b);
  line-height: 1.4;
}

/* Dark mode: system messages + managed groups */
[data-theme="dark"] .chat-msg-system-text { color: var(--text-secondary, #94a3b8); }
[data-theme="dark"] .chat-conv-system { border-left-color: #818cf8; }
[data-theme="dark"] .chat-system-info { background: rgba(99, 102, 241, 0.15); color: var(--text-secondary, #94a3b8); }

/* Dark mode adjustments */
[data-theme="dark"] .chat-composer-wrap { background: var(--bg-card, #1e293b); }
[data-theme="dark"] .chat-attach-preview,
[data-theme="dark"] .chat-upload-progress { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .chat-attach-chip { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .chat-attach-icon { background: #334155; }
[data-theme="dark"] .chat-attach-x:hover { background: #334155; }
[data-theme="dark"] .chat-msg-file { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .chat-msg-file:hover { background: #334155; border-color: #a78bfa; }
[data-theme="dark"] .chat-upload-bar { background: #334155; }
[data-theme="dark"] .chat-msg-menu {
  background: #1e293b; border-color: #334155;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .chat-msg-menu-quick { border-bottom-color: #334155; }
[data-theme="dark"] .chat-msg-menu-quick-btn { background: #0f172a; color: #f1f5f9; }
[data-theme="dark"] .chat-msg-menu-quick-btn:hover { background: #334155; }
[data-theme="dark"] .chat-msg-menu-quick-btn.mine { background: #3b0764; box-shadow: 0 0 0 2px #a78bfa inset; }
[data-theme="dark"] .chat-msg-menu-quick-add { background: #3b0764; color: #ddd6fe; }
[data-theme="dark"] .chat-msg-menu-action { color: #f1f5f9; }
[data-theme="dark"] .chat-msg-menu-action:hover { background: #334155; }
[data-theme="dark"] .chat-msg-menu-action.danger { color: #f87171; }
[data-theme="dark"] .chat-msg-menu-separator { background: #334155; }
[data-theme="dark"] .chat-msg-emoji-picker-inline { border-top-color: #334155; }
[data-theme="dark"] .chat-msg-emoji-picker-inline button { background: #0f172a; color: #f1f5f9; }
[data-theme="dark"] .chat-msg-emoji-picker-inline button:hover { background: #334155; }
[data-theme="dark"] .chat-reply-chip { background: #1e293b; }
[data-theme="dark"] .chat-reply-chip-sender { color: #f1f5f9; }
[data-theme="dark"] .chat-reply-chip-text { color: #94a3b8; }
[data-theme="dark"] .chat-msg-quote { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .chat-msg-quote-sender { color: #f1f5f9; }
[data-theme="dark"] .chat-msg-quote-text { color: #cbd5e1; }
[data-theme="dark"] .chat-msg-quote.is-deleted .chat-msg-quote-text { color: #64748b; }
[data-theme="dark"] .chat-reply-chip-icon { color: #a78bfa; }
[data-theme="dark"] .chat-reply-chip-close { color: #64748b; }
[data-theme="dark"] .chat-reply-chip-close:hover { color: #f87171; }
[data-theme="dark"] .chat-msg-mine .chat-msg-quote {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .chat-msg-mine .chat-msg-quote-sender,
[data-theme="dark"] .chat-msg-mine .chat-msg-quote-text {
  color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .chat-msg.chat-msg-flash > .chat-msg-bubble-wrap > .chat-msg-bubble {
  animation: mentionFlashPulseDark 2s ease-out;
}

/* ============================================================
   CHAT — GIF search panel (Giphy)
   ============================================================ */
.chat-gif-btn {
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    color: #7c3aed;
    align-self: flex-end;
    height: 30px;
    border-radius: 6px;
    transition: background 0.1s, border-color 0.1s;
    letter-spacing: 0.5px;
}
.chat-gif-btn:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: #7c3aed;
}

.chat-gif-panel {
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    max-height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.chat-gif-header {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    align-items: center;
}
.chat-gif-search {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #0f172a);
    box-sizing: border-box;
}
.chat-gif-search:focus {
    outline: none;
    border-color: #7c3aed;
}
.chat-gif-search-btn {
    background: #7c3aed;
    color: #fff;
    border: none;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.chat-gif-search-btn:hover { background: #6d28d9; }
.chat-gif-close {
    background: transparent;
    border: none;
    color: var(--text-secondary, #64748b);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
}
.chat-gif-close:hover { background: var(--bg-secondary, #f1f5f9); }

.chat-gif-grid {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    min-height: 80px;
    max-height: 220px;
}
.chat-gif-item {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.chat-gif-item:hover {
    transform: scale(1.04);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.chat-gif-empty,
.chat-gif-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-size: 0.82rem;
    padding: 1.5rem 0;
}
.chat-gif-attribution {
    text-align: center;
    font-size: 0.62rem;
    color: var(--text-secondary, #94a3b8);
    padding: 0.25rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* Dark mode */
[data-theme="dark"] .chat-gif-panel { background: #1e293b; }
[data-theme="dark"] .chat-gif-header { border-color: #334155; }
[data-theme="dark"] .chat-gif-attribution { border-color: #334155; }
[data-theme="dark"] .chat-gif-btn { border-color: #475569; color: #a78bfa; }
[data-theme="dark"] .chat-gif-btn:hover { background: rgba(167, 139, 250, 0.12); border-color: #a78bfa; }

/* Mobile tweaks */
@media (max-width: 900px) {
    .chat-msg-image { max-width: 240px; }
    .chat-msg-image img { max-height: 280px; }
    .chat-msg-file { max-width: 220px; }
    .chat-attach-name { max-width: 160px; }
    .chat-gif-grid { grid-template-columns: repeat(2, 1fr); }
    .chat-gif-item { height: 80px; }
    /* Pill composer mobile overrides */
    .chat-cmp-camera { display: flex; }
    .chat-egp-emoji-grid { grid-template-columns: repeat(6, 1fr); }
    .chat-cmp-icon { padding: 0.3rem 0.45rem; font-size: 1.2rem; }
    .chat-cmp-plus, .chat-cmp-camera, .chat-cmp-send { width: 40px; height: 40px; }
}

/* ============================================================
   CHAT — Multi-Pane Layout (Phase: pane system)
   ============================================================ */

/* === Multi-Pane Chat (Desktop) === */
.chat-panes-container {
    display: flex;
    flex: 1;
    gap: 2px;
    overflow: hidden;
}

.chat-pane-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-left: 3px solid #8b5cf6;
    background: var(--bg-primary, #fff);
}

.chat-pane-window .chat-pane-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    flex-shrink: 0;
}

.chat-pane-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.chat-pane-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.chat-pane-window.chat-pane-focused {
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.25);
}

/* Pane-window reuses existing .chat-messages, .chat-composer-wrap styles */
.chat-pane-window .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.chat-pane-window .chat-composer-wrap {
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    flex-shrink: 0;
}

/* Dark mode overrides for multi-pane */
[data-theme="dark"] .chat-pane-window {
    background: var(--bg-primary, #0f172a);
}
[data-theme="dark"] .chat-pane-window .chat-pane-header {
    background: var(--bg-secondary, #1e293b);
}
[data-theme="dark"] .chat-pane-window .chat-composer-wrap {
    background: var(--bg-secondary, #1e293b);
}
[data-theme="dark"] .chat-pane-close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}
[data-theme="dark"] .chat-pane-window.chat-pane-focused {
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.4);
}

/* ============================================================
   CHAT — Pill Composer Layout (Phase 7)
   ============================================================ */

/* === Composer Pill Layout (Phase 7) === */
.chat-composer-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.chat-cmp-plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary, #f1f5f9);
    border: none;
    color: var(--text-secondary, #64748b);
    font-size: 1.3rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.chat-cmp-plus:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.chat-cmp-pill {
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 22px;
    padding: 0.3rem 0.5rem;
    gap: 0.15rem;
    min-height: 38px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-cmp-pill:focus-within {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.chat-cmp-pill .chat-composer-text {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.25rem 0.4rem;
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    color: var(--text-primary, #0f172a);
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
    outline: none;
    border-radius: 0;
    box-shadow: none;
}

.chat-cmp-icon {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    font-size: 1.1rem;
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
    align-self: flex-end;
    margin-bottom: 0.1rem;
}
.chat-cmp-icon:hover {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}

/* Hide @ and 😊 when typing */
.chat-composer-bar.has-content .chat-cmp-mention,
.chat-composer-bar.has-content .chat-cmp-emoji {
    display: none;
}

.chat-cmp-camera {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary, #f1f5f9);
    border: none;
    color: var(--text-secondary, #64748b);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    display: none; /* hidden on desktop */
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.chat-cmp-camera:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}
.chat-composer-bar.has-content .chat-cmp-camera {
    display: none !important;
}

.chat-cmp-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #7c3aed;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: none; /* shown via JS when has-content */
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.chat-cmp-send:hover { background: #6d28d9; }
.chat-cmp-send:disabled { opacity: 0.5; cursor: wait; background: #9ca3af; }

/* === Emoji/GIF Panel === */
.chat-egp {
    display: none;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #fff);
    max-height: 280px;
    overflow: hidden;
}
.chat-egp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0;
}
.chat-egp-tab {
    flex: 1;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.chat-egp-tab:hover { color: var(--text-primary, #0f172a); }
.chat-egp-tab-active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}
.chat-egp-pane {
    flex: 1;
    overflow-y: auto;
}
.chat-egp-emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0.5rem;
}
.chat-egp-emoji {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    padding: 0.3rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s;
    text-align: center;
    line-height: 1;
}
.chat-egp-emoji:hover {
    background: rgba(124, 58, 237, 0.1);
}

/* === Dark Mode: Pill Composer + Emoji/GIF Panel === */
[data-theme="dark"] .chat-cmp-plus { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .chat-cmp-plus:hover { background: rgba(124, 58, 237, 0.2); color: #a78bfa; }
[data-theme="dark"] .chat-cmp-pill { background: var(--bg-primary, #0f172a); border-color: #475569; }
[data-theme="dark"] .chat-cmp-pill:focus-within { border-color: #7c3aed; }
[data-theme="dark"] .chat-cmp-camera { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .chat-egp { background: var(--bg-secondary, #1e293b); }
[data-theme="dark"] .chat-egp-tabs { border-bottom-color: #475569; }
[data-theme="dark"] .chat-egp-tab:hover { color: #f1f5f9; }
[data-theme="dark"] .chat-egp-emoji:hover { background: rgba(124, 58, 237, 0.2); }
.install-banner {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
    position: relative;
    z-index: 100;
    animation: installBannerSlideDown 0.4s ease-out;
}

@keyframes installBannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.install-banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.install-banner-icon { font-size: 1.2rem; flex-shrink: 0; }
.install-banner-text { font-weight: 500; }

.install-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.install-btn-primary {
    background: white;
    color: #6366f1;
    border: none;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.install-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.25);
}

.install-btn-ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.install-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Header button (variant C) */
.install-header-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border: none;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.install-header-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

.install-header-btn-icon { font-size: 1rem; }

/* iOS Install Instructions Modal */
.ios-install-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: iosModalFade 0.2s ease-out;
}

.ios-install-modal[style*="flex"] { display: flex !important; }

@keyframes iosModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ios-install-card {
    background: white;
    border-radius: 16px;
    padding: 2rem 1.75rem 1.5rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: iosCardPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iosCardPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.ios-install-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    line-height: 1;
}

.ios-install-close:hover { background: #f1f5f9; color: #475569; }

.ios-install-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.ios-install-card h3 {
    color: #0f172a;
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.ios-install-card p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.ios-install-steps {
    text-align: left;
    padding-left: 1.5rem;
    margin: 0 0 1.5rem;
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.8;
}

.ios-install-steps li { margin-bottom: 0.25rem; }
.ios-install-steps strong { color: #0f172a; }

.ios-icon-share {
    display: inline-block;
    background: #6366f1;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    text-align: center;
    line-height: 22px;
    font-size: 0.85rem;
    vertical-align: middle;
    margin: 0 2px;
}

.ios-install-ok {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border: none;
    padding: 0.7rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    width: 100%;
    transition: transform 0.15s, box-shadow 0.15s;
}

.ios-install-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

/* Dark mode overrides */
[data-theme="dark"] .ios-install-card { background: #1e293b; }
[data-theme="dark"] .ios-install-card h3 { color: #f1f5f9; }
[data-theme="dark"] .ios-install-card p { color: #cbd5e1; }
[data-theme="dark"] .ios-install-steps { color: #cbd5e1; }
[data-theme="dark"] .ios-install-steps strong { color: #f1f5f9; }
[data-theme="dark"] .ios-install-close { color: #64748b; }
[data-theme="dark"] .ios-install-close:hover { background: #334155; color: #cbd5e1; }

/* Mobile tweaks */
@media (max-width: 640px) {
    .install-banner {
        padding: 0.65rem 0.9rem;
        font-size: 0.82rem;
        flex-wrap: wrap;
    }
    .install-banner-text { font-size: 0.78rem; }
    .install-btn-primary, .install-btn-ghost {
        padding: 0.38rem 0.75rem;
        font-size: 0.78rem;
    }
    .install-header-btn-text { display: none; }
    .install-header-btn { padding: 0.45rem; }
}

/* =========================================================
   Entity switcher (Phase 3A)
   Compact pill in the header. Appears only when the signed-in
   user has access to more than one entity in the current org.
   ========================================================= */
.entity-switcher {
    position: relative;
    display: inline-block;
    /* Bottom margin so the sidebar nav (My Sales, Action Items, ...) doesn't
       sit flush against the entity switcher pill. */
    margin-bottom: 0.75rem;
}
.entity-switcher-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.88rem;
    line-height: 1.2;
    transition: background 120ms ease, border-color 120ms ease;
}
.entity-switcher-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.entity-switcher-btn[aria-expanded="true"] {
    background: #f1f5f9;
    border-color: #8b5cf6;
}
.entity-switcher-icon {
    font-size: 1rem;
    line-height: 1;
}
.entity-switcher-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entity-switcher-caret {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: 0.15rem;
}
.entity-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    /* Anchor left-edge to the pill's left-edge — the entity switcher lives at
       the top-left of the sidebar, so right-aligning would push the dropdown
       off-screen to the left. */
    left: 0;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    padding: 0.35rem;
    z-index: 1200;
    display: none;
    max-height: 360px;
    overflow-y: auto;
}
.entity-switcher-menu.open {
    display: block;
}
/* Channel views pinned above the scrolling dealer list (2026-07-24) */
.entity-switcher-pinned {
    position: sticky;
    top: -0.35rem;              /* cancel the menu's padding so it hugs the top */
    margin: -0.35rem -0.35rem 0.25rem;
    padding: 0.35rem 0.35rem 0.25rem;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    z-index: 2;
}
.entity-switcher-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.88rem;
    text-align: left;
    color: #1f2937;
}
.entity-switcher-option:hover {
    background: #f1f5f9;
}
.entity-switcher-option.active {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    font-weight: 600;
}
.entity-switcher-option .entity-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entity-type {
    flex: 0 0 auto;
    font-size: 0.66rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}
.entity-type-direct {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}
.entity-type-subdealer {
    background: rgba(245, 158, 11, 0.18);
    color: #c2410c;
}
.entity-type-op {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}
/* Store Directory channel chip (2026-07-24) */
.os-channel-chip {
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.os-channel-direct { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.os-channel-op { background: rgba(16, 185, 129, 0.15); color: #047857; }
.os-channel-sub { background: rgba(245, 158, 11, 0.18); color: #c2410c; }

/* Dark mode */
[data-theme="dark"] .entity-switcher-btn {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
[data-theme="dark"] .entity-switcher-btn:hover {
    background: #0f172a;
    border-color: #475569;
}
[data-theme="dark"] .entity-switcher-btn[aria-expanded="true"] {
    background: #0f172a;
    border-color: #a78bfa;
}
[data-theme="dark"] .entity-switcher-caret {
    color: #64748b;
}
[data-theme="dark"] .entity-switcher-menu {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .entity-switcher-pinned {
    background: #1e293b;
    border-bottom-color: #334155;
}
[data-theme="dark"] .entity-switcher-option {
    color: #e2e8f0;
}
[data-theme="dark"] .entity-switcher-option:hover {
    background: #0f172a;
}
[data-theme="dark"] .entity-switcher-option.active {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
}
[data-theme="dark"] .entity-type-direct {
    background: rgba(96, 165, 250, 0.2);
    color: #93c5fd;
}
[data-theme="dark"] .entity-type-subdealer {
    background: rgba(251, 191, 36, 0.2);
    color: #fcd34d;
}
[data-theme="dark"] .entity-type-op {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
[data-theme="dark"] .os-channel-direct { background: rgba(96, 165, 250, 0.2); color: #93c5fd; }
[data-theme="dark"] .os-channel-op { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .os-channel-sub { background: rgba(251, 191, 36, 0.2); color: #fcd34d; }

/* Mobile: tighten the pill so it fits next to the timestamp */
@media (max-width: 768px) {
    .entity-switcher-label {
        max-width: 100px;
    }
    .entity-switcher-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
    .entity-switcher-menu {
        min-width: 220px;
        right: auto;
        left: 0;
    }
}

/* ===== Phase 3D — Org Picker Modal (multi-org users only) ===== */
.org-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    padding: 1.5rem;
}
.org-picker-card {
    background: var(--bg-card, #fff);
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.org-picker-title {
    margin: 0.5rem 0 0.25rem;
    color: var(--text-primary, #0f172a);
    font-size: 1.4rem;
}
.org-picker-subtitle {
    margin: 0 0 1.25rem;
    color: var(--text-secondary, #64748b);
    font-size: 0.92rem;
    line-height: 1.5;
}
.org-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.org-picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.05s, box-shadow 0.15s;
    text-align: left;
}
.org-picker-option:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.18);
}
.org-picker-option:active { transform: scale(0.99); }
.org-picker-name {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.org-picker-role {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* ============================================================
   MEMBER PERMISSIONS MODAL (Phase 3 cleanup batch 2A —
   read-only per-member permission viewer; write controls in 2B)
   ============================================================ */

.mp-title-detail {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    margin-left: 0.5rem;
}

.mp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.mp-table th {
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #64748b);
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    position: sticky;
    top: 0;
    background: var(--bg-card, #fff);
    z-index: 1;
}

.mp-row td {
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    vertical-align: middle;
}

.mp-row td:first-child {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.74rem;
    color: var(--text-primary, #0f172a);
}

.mp-category-header td {
    padding: 0.55rem 0.6rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.mp-badge-override {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.35rem;
}

.mp-badge-denied {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.mp-effective-true {
    color: #16a34a;
    font-weight: 600;
}

.mp-effective-false {
    color: #dc2626;
    font-weight: 600;
}

.mp-empty-state {
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-size: 0.85rem;
    padding: 2rem 1rem;
}

/* Write controls (sub-batch B) */
.mp-toggle-btn {
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-card, #fff);
    border-radius: 6px;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    min-width: 64px;
    transition: background 0.1s, border-color 0.1s;
}
.mp-toggle-btn:hover:not(:disabled) { border-color: #7c3aed; }
.mp-toggle-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mp-toggle-unset { color: var(--text-secondary, #94a3b8); }
.mp-toggle-true {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.5);
    background: rgba(34, 197, 94, 0.08);
}
.mp-toggle-false {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(239, 68, 68, 0.08);
}
.mp-toggle-denied {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.12);
}
.mp-reset-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
}
.mp-reset-btn:hover:not(:disabled) { background: var(--bg-secondary, #f1f5f9); color: #7c3aed; }
.mp-reset-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.mp-row-dirty td {
    background: rgba(245, 158, 11, 0.06);
}
.mp-row-dirty td:first-child {
    border-left: 3px solid #f59e0b;
}
.mp-row-locked td { opacity: 0.65; }

.mp-title-dirty-indicator {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f59e0b;
    margin-left: 0.6rem;
    white-space: nowrap;
}

.mp-save-error {
    flex: 1;
    align-self: center;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
}

/* Dark mode */
[data-theme="dark"] .mp-table th { background: var(--bg-card, #1e293b); border-color: #334155; }
[data-theme="dark"] .mp-row td { border-color: #334155; }
[data-theme="dark"] .mp-category-header td {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.08);
    border-color: #334155;
}
[data-theme="dark"] .mp-badge-override { color: #fbbf24; }
[data-theme="dark"] .mp-badge-denied { color: #f87171; }
[data-theme="dark"] .mp-effective-true { color: #4ade80; }
[data-theme="dark"] .mp-effective-false { color: #f87171; }
[data-theme="dark"] .mp-toggle-btn { background: var(--bg-secondary, #1e293b); border-color: #475569; }
[data-theme="dark"] .mp-toggle-unset { color: #64748b; }
[data-theme="dark"] .mp-toggle-true { color: #4ade80; background: rgba(34, 197, 94, 0.12); }
[data-theme="dark"] .mp-toggle-false { color: #f87171; background: rgba(239, 68, 68, 0.12); }
[data-theme="dark"] .mp-toggle-denied { color: #f87171; background: rgba(239, 68, 68, 0.16); }
[data-theme="dark"] .mp-reset-btn:hover:not(:disabled) { background: #334155; color: #a78bfa; }
[data-theme="dark"] .mp-row-dirty td { background: rgba(245, 158, 11, 0.08); }
[data-theme="dark"] .mp-title-dirty-indicator { color: #fbbf24; }
[data-theme="dark"] .mp-save-error { color: #f87171; }

/* =====================================================================
   NEW LAYOUT — redesign shell (Step 1): flat header + left sidebar nav.
   Gated by .new-layout on <html> (set from the ?newlayout flag in the
   index.html head). Flag off ⇒ legacy top-tab layout, untouched.
   The sidebar + content shift apply only at ≥769px; mobile keeps the
   legacy tab bar + hamburger until the bottom-bar batch (Step 9).
   All sidebar visibility/active state is driven from app.js, mirroring
   the legacy tab bar so every hasPermission() gate stays authoritative.
   ===================================================================== */

/* Sidebar lives in the DOM always; hidden unless the flag + desktop width. */
.tenant-sidebar { display: none; }

/* ---- Header: flat surface (replaces the purple gradient) ---- */
.new-layout .dashboard-header {
    background: var(--bg-card);
    color: var(--text-primary);
    /* Border removed — the shadow provides enough separation, and the border
       became visible through "My Sales" once the entity switcher pill added
       margin-bottom (which grew the header height). */
    box-shadow: var(--shadow-sm);
    padding: 0.55rem 1.5rem;
}
.new-layout .header-content { max-width: none; }
.new-layout .header-row-main { margin-bottom: 0.4rem; }
.new-layout .header-logo {
    height: 38px;
    background: transparent;
    padding: 0;
    border-radius: 8px;
}
.new-layout .header-logo:hover { box-shadow: none; }
.new-layout .header-org-name { color: var(--text-primary); }
.new-layout .header-timestamp { color: var(--text-secondary); }
.new-layout .user-name { color: var(--text-primary); }
/* Header controls were styled white-on-purple — re-tone for the flat surface. */
.new-layout .user-info { background: var(--bg-secondary); }
.new-layout .user-avatar { border-color: var(--border-color); }
.new-layout .logout-btn,
.new-layout .export-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    backdrop-filter: none;
}
.new-layout .logout-btn:hover,
.new-layout .export-btn:hover {
    background: var(--bg-secondary);
    transform: none;
}
.new-layout .hq-entry-badge {
    background: rgba(79, 70, 229, 0.08);
    color: var(--opsresults-indigo);
    border: 1px solid rgba(79, 70, 229, 0.4);
}
.new-layout .hq-entry-badge:hover { background: rgba(79, 70, 229, 0.16); }
[data-theme="dark"] .new-layout .hq-entry-badge {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.6);
}
/* Admin Panel + P&L move into the sidebar — hide their header buttons. */
.new-layout #adminPanelBtn,
.new-layout #pnlBtn { display: none !important; }

/* ---- Sidebar nav items ---- */
.tnav { display: flex; flex-direction: column; gap: 1px; }
.tnav-section {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0.85rem 0.75rem 0.3rem;
}
.tnav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.tnav-item:hover { background: var(--bg-secondary); }
.tnav-item.active {
    background: rgba(79, 70, 229, 0.10);
    color: var(--opsresults-indigo);
    border-left-color: var(--opsresults-indigo);
    font-weight: 600;
}
[data-theme="dark"] .new-layout .tnav-item.active {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
    border-left-color: #6366f1;
}
.tnav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.tnav-count {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-critical);
    color: #fff;
    border-radius: 9px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}
#navChatCount { background: var(--opsresults-indigo); }

/* ---- Desktop (≥769px): sidebar fixed, content shifted, legacy tabs hidden ---- */
@media (min-width: 769px) {
    .new-layout .dashboard-header {
        position: sticky;
        top: 0;
        z-index: 60;
    }
    .new-layout .tenant-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        bottom: 0;
        /* --tenant-header-h is measured + kept in sync by app.js so the rail
           always tucks under the (variable-height, two-row) header. */
        top: var(--tenant-header-h, 88px);
        width: 208px;
        padding: 0.5rem 0.5rem 1rem;
        background: var(--bg-card);
        border-right: 1px solid var(--border-color);
        overflow-y: auto;
        z-index: 40;
    }
    .new-layout .tab-container { display: none !important; }
    .new-layout .container {
        margin-left: 208px;
        max-width: none;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .new-layout #announcementBanner { margin-left: 208px; padding-left: 1.5rem; padding-right: 1.5rem; }
    /* The special views render as SIBLINGS of .container (children of
       #dashboardContainer / body), not inside it — so .container's margin-left
       doesn't shift them and they'd sit under the fixed sidebar. Shift each,
       and give them breathing room from the sidebar's right edge. */
    .new-layout #landingView,
    .new-layout #mySalesView,
    .new-layout #rosterView,
    .new-layout #repPerfView,
    .new-layout #realtimeReportView,
    .new-layout #morningOpsView,
    .new-layout #goalsView,
    .new-layout #mlbView,
    .new-layout #pbView,
    .new-layout #pnlView,
    .new-layout #chatView {
        margin-left: 208px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* =====================================================================
   NEW LAYOUT — Batch 2: My Sales restyle. CSS-only re-skin of the shared
   .ms-* vocabulary under .new-layout, so all four role paths (rep, manager,
   DM, admin) become cohesive with the design system. The rep view also gets
   a "My Sales" title + subtitle via a flag-gated markup branch in app.js.
   Flag off ⇒ the original My Sales, untouched.
   ===================================================================== */
.new-layout .ms-greeting { margin-bottom: 1.1rem; }
.new-layout .ms-greeting h1 { font-size: 1.2rem; font-weight: 700; }
.new-layout .ms-store-tag {
    background: rgba(79, 70, 229, 0.08);
    color: var(--opsresults-indigo);
    border-color: rgba(79, 70, 229, 0.25);
}

/* Commission hero → flat featured card with an indigo accent + emerald amount. */
.new-layout .ms-commission-hero {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--opsresults-indigo);
}
.new-layout .ms-commission-hero::before { display: none; }
.new-layout .ms-comm-amount {
    background: none;
    -webkit-text-fill-color: var(--opsresults-emerald);
    color: var(--opsresults-emerald);
}
.new-layout .ms-comm-breakdown span { background: var(--bg-secondary); color: var(--text-secondary); }
.new-layout .ms-comm-nudge { background: rgba(79, 70, 229, 0.08); border-color: rgba(79, 70, 229, 0.25); }
.new-layout .ms-nudge-main { color: var(--opsresults-indigo); }

/* Stat cards → neutral numbers + the goal line as the trend (no progress bar,
   matching the mockup's clean stat-strip cards). */
.new-layout .ms-metric-value { color: var(--text-primary); }
.new-layout .ms-progress-bar { display: none; }

/* Quick actions → bordered surface buttons. */
.new-layout .ms-qa-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); }
.new-layout .ms-qa-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* Leaderboard + pulse rows → token borders, indigo "you" highlight (the dark-bg
   rgba(255,255,255,…) borders/surfaces don't read in light mode). */
.new-layout .ms-lb-row,
.new-layout .ms-pulse-row { border-bottom-color: var(--border-color); }
.new-layout .ms-lb-name-you { color: var(--opsresults-indigo); }
.new-layout .ms-you-tag { background: rgba(79, 70, 229, 0.15); color: var(--opsresults-indigo); }
.new-layout .ms-rank-other { background: var(--bg-secondary); }
.new-layout .ms-link-btn { color: var(--opsresults-indigo); }
.new-layout .ms-link-btn:hover { color: var(--opsresults-indigo-hover); }

/* Action items → token surface; the colored left border is already the
   design-system action-item pattern, so it stays. */
.new-layout .ms-task-item { background: var(--bg-secondary); }

/* =====================================================================
   NEW LAYOUT — Batch 3: Action Items restyle. The view is already card- and
   token-based (stat cards have accent left bars, issue cards have colored
   --accent-color left borders — both already the design-system patterns), so
   this only re-tones the off-palette bits: purple market chips → indigo,
   Active/Resolved pills → text+underline sub-tabs, the dark-indigo scan
   widget → a flat card. All .new-layout-scoped ⇒ flag off unchanged.
   ===================================================================== */

/* Market filter pills → indigo active/hover (was purple). */
.new-layout .market-chip:hover { border-color: var(--opsresults-indigo); background: rgba(79, 70, 229, 0.08); }
.new-layout .market-chip.active { background: var(--opsresults-indigo); border-color: var(--opsresults-indigo); color: #fff; }

/* Active / Resolved → quiet text + 2px underline (was filled pills). */
.new-layout .items-sub-tabs {
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    gap: 0.75rem;
    padding: 0 1rem;
    justify-content: flex-start;
}
.new-layout .items-sub-tab {
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.5rem 0.35rem;
    color: var(--text-secondary);
}
.new-layout .items-sub-tab:hover { background: transparent; color: var(--text-primary); }
.new-layout .items-sub-tab.active {
    background: transparent;
    color: var(--opsresults-indigo);
    border-bottom-color: var(--opsresults-indigo);
}

/* Scan widget → flat card (was a dark-indigo glass box w/ orange header). */
.new-layout .scan-status-widget {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none;
}
.new-layout .scan-widget-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
/* The widget's inner text + track were hardcoded light (built for the old dark
   box); re-tone to tokens so they read on the flat card (and still adapt in dark). */
.new-layout .scan-widget-title { color: var(--text-primary) !important; }
.new-layout .scan-widget-date { color: var(--text-secondary); }
.new-layout .scan-type-header { color: var(--text-primary); }
.new-layout .scan-subtitle { color: var(--text-secondary); }
.new-layout .scan-progress-label { color: var(--text-secondary); }
.new-layout .scan-progress-container {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
.new-layout .scan-store-list { background: var(--bg-secondary); }
.new-layout .scan-store-list.open { border-color: var(--border-color); }
.new-layout .scan-store-list-title { border-bottom-color: var(--border-color); }

/* =====================================================================
   NEW LAYOUT — Batch 4: Rep Performance. The view is already token-based
   (flat stat cards w/ accent top borders, data tables with muted uppercase
   headers + sticky totals already matching the data-table pattern), so this
   re-tones the off-palette pieces: the 6 sub-tabs from a purple segmented
   pill → text+underline, the filter buttons + download buttons → indigo,
   and adds tabular numerals to the tables. CSS-only; flag off unchanged.
   Scoped to .rp-subtabs so other .severity-tab / .inline-flex-pill uses
   elsewhere are untouched.
   ===================================================================== */

/* Sub-tabs: purple segmented pill → quiet text + 2px indigo underline. */
.new-layout .rp-subtabs .inline-flex-pill {
    display: flex;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0;
    gap: 0.75rem;
}
.new-layout .rp-subtabs .severity-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 0.5rem 0.35rem;
    color: var(--text-secondary);
}
.new-layout .rp-subtabs .severity-tab:hover { color: var(--text-primary); border-bottom-color: transparent; }
.new-layout .rp-subtabs .severity-tab.active {
    background: transparent;
    color: var(--opsresults-indigo);
    border-bottom-color: var(--opsresults-indigo);
}

/* Filter buttons (zero-sales filters, etc.) active → indigo (was red). */
.new-layout .rp-filter-btn.active {
    background: var(--opsresults-indigo);
    border-color: var(--opsresults-indigo);
    color: #fff;
}

/* Download buttons → solid indigo (was a purple gradient). */
.new-layout .rp-download-btn {
    background: var(--opsresults-indigo);
}
.new-layout .rp-download-btn:hover { background: var(--opsresults-indigo-hover); opacity: 1; }

/* Data tables → tabular numerals so columns align cleanly (design-system table). */
.new-layout .rp-table td { font-variant-numeric: tabular-nums; }

/* =====================================================================
   NEW LAYOUT — Batch 5: Real-Time. The Daily Report table + the Store
   Status (.mo-*) panel are already token-based (tabular-nums cells, token
   borders, status-colored + market-colored accents that are intentional
   color-coding). This re-tones the off-palette chrome: the Daily Report /
   Store Status sub-tabs → underline, the Today/Yesterday toggle + refresh
   button purple → indigo, the grand-total row → indigo (also fixes its
   dark-mode blend), and the faint-purple drill-down → faint indigo.
   CSS-only; flag off unchanged.
   ===================================================================== */

/* Sub-tabs (Daily Report / Store Status) → text + 2px indigo underline. */
.new-layout .rt-sub-tabs {
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0 1rem;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}
.new-layout .rt-sub-tab {
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.5rem 0.35rem;
    color: var(--text-secondary);
}
.new-layout .rt-sub-tab:hover { background: transparent; color: var(--text-primary); }
.new-layout .rt-sub-tab.active {
    background: transparent;
    color: var(--opsresults-indigo);
    border-bottom-color: var(--opsresults-indigo);
}

/* Today/Yesterday segmented toggle active → indigo (was purple). */
.new-layout .rt-day-tab.active {
    background: var(--opsresults-indigo);
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.3);
}

/* Refresh button + loading spinner → indigo. */
.new-layout .btn-realtime { background: var(--opsresults-indigo); }
.new-layout .rt-loading .loading-spinner { border-top-color: var(--opsresults-indigo); }

/* Grand-total row → indigo emphasis (the hardcoded #1e293b blended into the
   card in dark mode; indigo stands out in both + is on-brand for the total). */
.new-layout .rt-grand-total td { background: var(--opsresults-indigo); color: #fff; }

/* Drill-down rep rows → faint indigo tint (was faint purple). */
.new-layout .rt-drilldown-rep td { background: rgba(79, 70, 229, 0.05); }

/* Store Status panel title → match the design's title scale. */
.new-layout .mo-title { font-size: 1.2rem; font-weight: 700; }

/* =====================================================================
   NEW LAYOUT — Batch 6: Roster. Per-store accordion under market banners.
   The market banners / store headers / DM bar are JS-driven market colors
   (intentional, same as RT + Store Status), and the red "Separated" filter
   + staffing pills are semantic — all left alone. This re-tones the off-
   palette chrome: the light-blue title, the blue/purple action buttons,
   and the dark-bg-assuming add-row borders/focus. CSS-only; flag off
   unchanged.
   ===================================================================== */
.new-layout .roster-title { color: var(--text-primary); font-size: 1.2rem; font-weight: 700; }

/* Action buttons → indigo (Add was a blue gradient, Print a purple gradient). */
.new-layout .roster-btn-add { background: var(--opsresults-indigo); border-color: var(--opsresults-indigo); }
.new-layout .roster-btn-add:hover { background: var(--opsresults-indigo-hover); }
.new-layout .roster-btn-print { background: var(--opsresults-indigo); }
.new-layout .roster-btn-print:hover { background: var(--opsresults-indigo-hover); }
.new-layout .roster-btn-download:hover { background: var(--bg-secondary); }

/* In-accordion "add employee" row + search focus: dark-bg rgba(255,255,255,…)
   borders / blue accents → tokens + indigo. */
.new-layout .roster-store-add { border-top-color: var(--border-color); }
.new-layout .roster-store-add button { border-color: var(--border-color); }
.new-layout .roster-store-add button:hover {
    border-color: var(--opsresults-indigo);
    color: var(--opsresults-indigo);
    background: rgba(79, 70, 229, 0.05);
}
.new-layout .roster-search-input:focus { border-color: var(--opsresults-indigo); }
.new-layout .roster-btn-email { background: var(--opsresults-indigo); }
.new-layout .roster-btn-email:hover { background: var(--opsresults-indigo-hover); }

/* =====================================================================
   NEW LAYOUT — Batch 7: Goals (Store Targets / Rep Allocations / Schedule).
   The .gm-* tables are already token-based (tabular-nums, token borders),
   the gm-override amber marker + schedule draft/publish/danger buttons +
   budget pills are semantic, and blue shift pills are data identity — all
   left alone. This re-tones the blue accents (sub-tab underline, input
   focus, save button, add-shift hover) to indigo. CSS-only; flag off
   unchanged.
   ===================================================================== */
.new-layout .gm-tab.active { border-bottom-color: var(--opsresults-indigo); }
.new-layout .gm-input:focus {
    border-color: var(--opsresults-indigo);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
.new-layout .gm-save-btn { background: var(--opsresults-indigo); }
.new-layout .gm-save-btn:hover { background: var(--opsresults-indigo-hover); }
.new-layout .sch-shift-empty:hover .sch-add-icon { color: var(--opsresults-indigo); }

/* =====================================================================
   NEW LAYOUT — Batch 8: Chat. Chrome refresh only (message-pane logic
   unchanged). Re-tones the #7c3aed signature purple → indigo: the "mine"
   message bubble, New/Send buttons, conversation hover/active highlight,
   and focus rings. The amber→red Broadcast button + the amber @mention
   highlight are deliberate/semantic — left alone. Send buttons use
   :not(:disabled) so their disabled-gray state survives. CSS-only; flag
   off unchanged.
   ===================================================================== */
.new-layout .chat-msg-mine .chat-msg-bubble { background: var(--opsresults-indigo); }
.new-layout .chat-new-btn { background: var(--opsresults-indigo); }
.new-layout .chat-new-btn:hover { background: var(--opsresults-indigo-hover); }
.new-layout .chat-send-btn:not(:disabled) { background: var(--opsresults-indigo); }
.new-layout .chat-send-btn:not(:disabled):hover { background: var(--opsresults-indigo-hover); }
.new-layout .chat-cmp-send:not(:disabled) { background: var(--opsresults-indigo); }
.new-layout .chat-cmp-send:not(:disabled):hover { background: var(--opsresults-indigo-hover); }
.new-layout .chat-conv-row:hover { background: rgba(79, 70, 229, 0.05); }
.new-layout .chat-conv-row.active {
    background: rgba(79, 70, 229, 0.1);
    border-left-color: var(--opsresults-indigo);
}
.new-layout .chat-conv-row:hover .chat-pin-btn:hover { background: rgba(79, 70, 229, 0.1); }
.new-layout .chat-composer textarea:focus {
    border-color: var(--opsresults-indigo);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.new-layout .chat-sidebar-search input:focus {
    border-color: var(--opsresults-indigo);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

/* =====================================================================
   NEW LAYOUT — Batch 9: mobile bottom bar + drawer (≤768px). On desktop the
   sidebar is the rail; on mobile it becomes a slide-in drawer (opened by the
   bottom bar's "More"), and a fixed 5-item bottom bar (Sales/Items/Live/Chat/
   More) replaces the legacy tab bar. The header hamburger keeps its existing
   actions/utilities menu (Export/Create/Training/theme/sign-out) so those stay
   reachable. Bottom-bar items call the EXISTING switchView(); visibility +
   active state are driven from app.js (mirroring the sidebar/tabs).
   ===================================================================== */
.mobile-bottom-bar { display: none; }
.mobile-drawer-backdrop { display: none; }
/* Legacy tab bar is fully replaced (sidebar on desktop, bottom bar on mobile). */
.new-layout .tab-container { display: none !important; }

@media (max-width: 768px) {
    .new-layout .mobile-bottom-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06);
    }
    .new-layout .mbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 7px 2px;
        color: var(--text-secondary);
        font-size: 0.6rem;
        font-weight: 600;
    }
    .new-layout .mbar-item .mbar-icon { width: 22px; height: 22px; }
    .new-layout .mbar-item.active { color: var(--opsresults-indigo); }
    /* Chat unread bubble on the mobile bar (2026-07-31) */
    .new-layout .mbar-item { position: relative; }
    .new-layout .mbar-item .chat-tab-badge { position: absolute; top: 1px; right: calc(50% - 24px); margin-left: 0; }

    /* Sidebar → slide-in drawer (opened by the bottom bar's "More"). */
    .new-layout .tenant-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 264px;
        padding: 1rem 0.5rem;
        background: var(--bg-card);
        border-right: 1px solid var(--border-color);
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.25);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 220;
    }
    .new-layout .tenant-sidebar.drawer-open { transform: translateX(0); }
    .new-layout .mobile-drawer-backdrop.show {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 210;
    }

    /* Clear the fixed bottom bar so the last content isn't hidden under it. */
    .new-layout .container,
    .new-layout #landingView,
    .new-layout #mySalesView,
    .new-layout #rosterView,
    .new-layout #repPerfView,
    .new-layout #realtimeReportView,
    .new-layout #morningOpsView,
    .new-layout #goalsView,
    .new-layout #mlbView,
    .new-layout #pbView,
    .new-layout #pnlView,
    .new-layout #chatView { padding-bottom: 76px; }
}

/* ===================================================================
   Org Setup Tab — Markets CRUD (h.1e)
   =================================================================== */
.os-actions {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem 0;
}
.os-markets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.os-market-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}
.os-market-row:hover {
    border-color: var(--opsresults-indigo);
}
.os-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 0.4rem;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.os-market-info {
    flex: 1;
    min-width: 0;
}
.os-market-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}
.os-market-meta {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}
.os-market-meta code {
    background: var(--bg-secondary);
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.75rem;
    color: var(--text-primary);
}
.os-market-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
}
.btn-danger-ghost {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
    padding: 0.5rem 0.9rem;
    border-radius: 0.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-danger-ghost:hover {
    background: #ef4444;
    color: white;
}

/* Empty state */
.os-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}
.os-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.os-empty-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.os-empty-body {
    font-size: 0.9rem;
    max-width: 40ch;
    margin: 0 auto;
}

/* Add/Edit form */
.os-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
}
@media (max-width: 768px) {
    .os-form-grid { grid-template-columns: 1fr; }
}
.os-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.os-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.os-input {
    width: 100%;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}
.os-input:focus {
    outline: none;
    border-color: var(--opsresults-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.os-input-readonly {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}
.os-color-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.os-color {
    width: 48px;
    height: 38px;
    padding: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    cursor: pointer;
}
.os-input-hex {
    flex: 1;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.9rem;
}
.os-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.os-form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
}
.os-form-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.os-form-status-error   { color: #dc2626; }
.os-form-status-success { color: #16a34a; }
.os-form-status-info    { color: var(--opsresults-indigo); }

[data-theme="dark"] .os-form-status-error   { color: #f87171; }
[data-theme="dark"] .os-form-status-success { color: #4ade80; }

/* h.1e v2 — slug + sort dropped from the Add/Edit Market form; timezone
   spans the full width since it's the only field on its row now. */
.os-field-wide { grid-column: 1 / -1; }

/* h.1f — Stores CRUD + CSV import */
.os-spacer { flex: 1; }
.os-textarea {
    width: 100%;
    min-height: 180px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.45;
    margin-top: 0.5rem;
}

/* h.1f hotfix — .btn-primary/.btn-ghost were never defined as standalone
   button classes (only existed as .modal-btn.* combos). Adding standalone
   styles so the Org Setup form buttons look like clickable buttons. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--opsresults-indigo, #4f46e5);
    color: white;
    border: 1px solid var(--opsresults-indigo, #4f46e5);
    border-radius: 0.45rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-primary:hover { background: #4338ca; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.45rem;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-ghost:hover { background: var(--bg-secondary); border-color: var(--opsresults-indigo, #4f46e5); }

/* =========
/* ===================================================================
   Phase 4a: Real-Time page slim-down
   (1) Hide chat-broadcast button row
   (2) Slim weather pills
   (3) Slim Today/Yesterday tabs
   (4) Refresh button flat indigo
   (5) Market/Stores filter dropdowns text-style
   (6) Weather row max-width + overflow
   =================================================================== */

.rt-gm-buttons,
.rt-gm-label {
    display: none !important;
}

.rt-weather {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 420px;
}
.rt-weather::-webkit-scrollbar { display: none; }
.rt-weather-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.rt-weather-pill .wx-temp {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary, #1e293b);
}
.rt-weather-pill .wx-icon {
    font-size: 0.95rem;
    opacity: 0.85;
}
.rt-weather-pill .wx-more {
    color: var(--text-faint, #9ca3af);
    font-size: 0.75rem;
    padding-left: 0.25rem;
    border-left: 1px solid var(--border-color);
    margin-left: 0.25rem;
}

.rt-day-tabs {
    background: var(--bg-secondary);
    padding: 2px;
    border-radius: 7px;
    gap: 0;
}
.rt-day-tab {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}
.rt-day-tab.active {
    background: var(--opsresults-indigo, #4f46e5) !important;
    box-shadow: 0 1px 2px rgba(79,70,229,0.25) !important;
}

#rtRefreshBtn {
    background: var(--opsresults-indigo, #4f46e5) !important;
    border: 0 !important;
    color: white !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    box-shadow: none !important;
}
#rtRefreshBtn:hover {
    background: var(--opsresults-indigo-hover, #4338ca) !important;
}

#rtFilterBar #rtMarketChips,
#rtFilterBar #rtStoreSelect,
#rpFilterBar #rpMarketChips,
#rpFilterBar #rpStoreSelect {
    background: transparent;
    border: 0;
    padding: 0.375rem 1.5rem 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    min-height: 32px;
    font-family: inherit;
    line-height: 1;
    font-weight: 500;
    outline: none;
}
#rtFilterBar #rtMarketChips:hover,
#rtFilterBar #rtStoreSelect:hover,
#rpFilterBar #rpMarketChips:hover,
#rpFilterBar #rpStoreSelect:hover {
    background-color: var(--bg-hover);
}
#rtFilterBar, #rpFilterBar {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.625rem 0 1.125rem !important;
    border-radius: 0 !important;
    margin-bottom: 1.5rem !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .rt-weather { max-width: 100%; }
    #rtRefreshBtn { padding: 0.625rem 1rem !important; min-height: 40px !important; }
}

/* ===================================================================
   Phase 4b: Store Status (Morning Ops) page slim-down
   - Refresh + Last 7 Days buttons: flat indigo, no chunky borders
   - Market filter dropdown: text-style (matches RT pattern)
   - Summary card row: slim, no outline rectangles
   - Header: v2 title + subtitle spacing
   =================================================================== */

/* Header: v2 page-head spacing without changing markup */
.mo-header {
    margin-bottom: 1.5rem !important;
}
.mo-title {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    margin-bottom: 0.375rem !important;
}
.mo-header-actions {
    gap: 0.5rem !important;
    align-items: center;
}

/* Refresh button — flat indigo */
#moRefreshBtn {
    background: var(--opsresults-indigo, #4f46e5) !important;
    border: 0 !important;
    color: white !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
}
#moRefreshBtn:hover {
    background: var(--opsresults-indigo-hover, #4338ca) !important;
}

/* Last 7 Days button — ghost */
#moHistoryBtn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    box-shadow: none !important;
}
#moHistoryBtn:hover {
    background: var(--bg-hover) !important;
}

/* Market filter dropdown — text-style */
#moFilterBar #moMarketChips {
    background: transparent;
    border: 0;
    padding: 0.375rem 1.5rem 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    min-height: 32px;
    font-family: inherit;
    line-height: 1;
    font-weight: 500;
    outline: none;
}
#moFilterBar #moMarketChips:hover {
    background-color: var(--bg-hover);
}
#moFilterBar {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.625rem 0 1.125rem !important;
    border-radius: 0 !important;
    margin-bottom: 1.5rem !important;
    box-shadow: none !important;
}

/* Summary card row — slim, no chunky outlines */
.mo-summary-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}
.mo-summary-strip > * {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 0.875rem 1rem !important;
    box-shadow: none !important;
    text-align: center;
}
/* Strip any 2px outline rings that were on the legacy cards */
.mo-summary-strip > *[class*="outline"],
.mo-summary-strip > *[class*="ring"] {
    border-width: 1px !important;
}

/* ===================================================================
   RECOVERY: Phase 2 + Phase 3 v2 chrome CSS — restored after OneDrive
   truncation. This is the complete .opsr-* namespace used by index.html
   (topbar, avatar menu, page-head, filter row, overflow popover, etc.)
   =================================================================== */

/* Design tokens used by the chrome */
:root {
    --indigo-bg: #eef2ff;
    --indigo-text: #4338ca;
    --border-soft: #f1f3f5;
    --text-faint: #9ca3af;
    --surface-2: #fcfcfd;
}
[data-theme="dark"] {
    --indigo-bg: rgba(99, 102, 241, 0.15);
    --indigo-text: #a5b4fc;
    --border-soft: #1e293b;
    --text-faint: #64748b;
    --surface-2: #0f172a;
}

/* ---------- 44px slim top bar ---------- */
.opsr-topbar {
    height: 44px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 0.75rem;
    position: relative;
    z-index: 50;
}
.opsr-topbar-spacer { flex: 1; }
.opsr-topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
    flex-shrink: 0;
}
.opsr-topbar-avatar:hover { border-color: var(--indigo-bg, #eef2ff); }
.opsr-topbar-avatar:focus { outline: 2px solid var(--opsresults-indigo); outline-offset: 2px; }

/* ---------- Avatar dropdown menu ---------- */
.opsr-avatar-menu {
    position: absolute;
    top: 44px;
    right: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.375rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    width: 260px;
    z-index: 100;
    display: none;
}
.opsr-avatar-menu.open { display: block; }
.opsr-avatar-menu-header {
    padding: 0.625rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-soft, #f1f3f5);
    margin-bottom: 0.25rem;
}
.opsr-avatar-menu-header .name { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.opsr-avatar-menu-header .email { font-size: 0.75rem; color: var(--text-faint, #9ca3af); margin-top: 1px; }
.opsr-avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    border-radius: 5px;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
}
.opsr-avatar-menu-item:hover { background: var(--bg-hover); }
.opsr-avatar-menu-item svg { width: 14px; height: 14px; color: var(--text-faint, #9ca3af); flex-shrink: 0; }
.opsr-avatar-menu-divider { height: 1px; background: var(--border-soft, #f1f3f5); margin: 0.25rem 0; }
.opsr-avatar-menu-meta {
    font-size: 0.6875rem;
    color: var(--text-faint, #9ca3af);
    padding: 0.375rem 0.625rem 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.opsr-theme-toggle-mini {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-hover);
    border-radius: 999px;
    padding: 2px;
    margin: 0 0.625rem 0.375rem;
}
.opsr-theme-toggle-mini button {
    border: 0;
    background: transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 999px;
    flex: 1;
}
.opsr-theme-toggle-mini button.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ---------- Page header pattern ---------- */
.opsr-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.opsr-page-head .opsr-page-title-block {
    flex: 1;
    min-width: 0;
}
.opsr-page-head h1.opsr-page-title,
.opsr-page-head .opsr-page-title {
    font-size: 1.625rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    letter-spacing: -0.018em;
    color: var(--text-primary);
    line-height: 1.2;
}
.opsr-page-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.875rem;
    align-items: center;
    flex-wrap: wrap;
}
.opsr-page-subtitle .meta-dot { color: var(--text-faint, #9ca3af); }
.opsr-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---------- v2 buttons ---------- */
.opsr-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--opsresults-indigo, #4f46e5);
    color: white;
    border: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1;
    font-family: inherit;
    min-height: 36px;
    transition: background 0.15s;
}
.opsr-btn-primary:hover { background: var(--opsresults-indigo-hover, #4338ca); }
.opsr-btn-primary svg { width: 14px; height: 14px; stroke-width: 2; }
.opsr-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.opsr-btn-ghost {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: inherit;
    min-height: 36px;
}
.opsr-btn-ghost:hover { background: var(--bg-hover); }
.opsr-btn-icon {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.opsr-btn-icon:hover { background: var(--bg-hover); }
.opsr-btn-icon svg { width: 16px; height: 16px; stroke-width: 1.75; }

/* ---------- Overflow popover ---------- */
.opsr-overflow-wrapper { position: relative; display: inline-block; }
.opsr-overflow-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 220px;
    z-index: 60;
    display: none;
}
.opsr-overflow-popover.open { display: block; }
.opsr-overflow-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    border-radius: 5px;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.opsr-overflow-item:hover { background: var(--bg-hover); }
.opsr-overflow-item svg { width: 14px; height: 14px; color: var(--text-faint, #9ca3af); flex-shrink: 0; }
.opsr-overflow-divider { height: 1px; background: var(--border-soft, #f1f3f5); margin: 0.25rem 0; }

/* ---------- Filter row ---------- */
.opsr-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0 1.125rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.opsr-search {
    flex: 1;
    max-width: 320px;
    position: relative;
    min-width: 200px;
}
.opsr-search input {
    width: 100%;
    padding: 0.5rem 0.625rem 0.5rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    min-height: 36px;
    line-height: 1;
}
.opsr-search input:focus {
    border-color: var(--opsresults-indigo, #4f46e5);
    box-shadow: 0 0 0 3px var(--indigo-bg, #eef2ff);
}
.opsr-search input::placeholder { color: var(--text-faint, #9ca3af); }
.opsr-search svg {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-faint, #9ca3af);
    pointer-events: none;
}
.opsr-filter-spacer { flex: 1; }
.opsr-filter-divider { height: 16px; width: 1px; background: var(--border-color); margin: 0 0.25rem; }

/* ---------- Phase 3: <select> as text-style dropdown ---------- */
.opsr-filter-select {
    background: transparent;
    border: 0;
    padding: 0.375rem 1.5rem 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    min-height: 32px;
    font-family: inherit;
    line-height: 1;
    font-weight: 500;
    outline: none;
}
.opsr-filter-select:hover { background-color: var(--bg-hover); }

/* ---------- Phase 2: hide legacy chrome that v2 supersedes ---------- */
.header-actions { display: none !important; }
.dashboard-header { padding: 0 !important; background: transparent !important; border: 0 !important; }
.dashboard-header .header-content { padding: 0 !important; }
.opsr-topbar .btn-notification { position: relative; }
.opsr-topbar .notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent-critical);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    line-height: 1;
}
.opsr-topbar .btn-notification:hover { background: var(--bg-hover) !important; }

/* View As dropdown inside the avatar menu */
.opsr-avatar-menu .view-as-dropdown {
    position: static;
    display: none;
    width: 100%;
    margin-bottom: 0.375rem;
    box-shadow: none;
    border: 1px solid var(--border-soft, #f1f3f5);
    background: var(--bg-secondary);
}
.opsr-avatar-menu .view-as-dropdown.open { display: block; }

/* Org list items inside avatar menu */
#avatarOrgList .opsr-org-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-primary);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
#avatarOrgList .opsr-org-row:hover { background: var(--bg-hover); }
#avatarOrgList .opsr-org-row.active {
    background: var(--indigo-bg, #eef2ff);
    color: var(--indigo-text, #4338ca);
    font-weight: 500;
}
#avatarOrgList .opsr-org-row .opsr-org-mark {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
#avatarOrgList .opsr-org-row.active .opsr-org-mark { background: var(--indigo-text, #4338ca); }
#avatarOrgList .opsr-org-row .opsr-org-name { flex: 1; }
#avatarOrgList .opsr-org-row .opsr-org-check { color: var(--indigo-text, #4338ca); font-size: 0.75rem; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .opsr-topbar { padding: 0 0.75rem; gap: 0.5rem; }
    .opsr-topbar .header-org-name { font-size: 0.875rem; }
    .opsr-avatar-menu { right: 0.5rem; left: 0.5rem; width: auto; max-width: none; }
    .opsr-page-head { flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
    .opsr-page-head h1.opsr-page-title { font-size: 1.375rem; }
    .opsr-page-actions { align-self: flex-start; }
    .opsr-filter-row { padding: 0.5rem 0 1rem; gap: 0.375rem; }
    .opsr-search { max-width: 100%; flex: 1 1 100%; order: -1; }
    .opsr-filter-spacer { display: none; }
    .opsr-filter-divider { display: none; }
}
op: 4px;
    right: 4px;
    background: var(--accent-critical);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    line-height: 1;
}
.opsr-topbar .btn-notification:hover { background: var(--bg-hover) !important; }
/* View As dropdown inside the avatar menu — natural flow, not absolute */
.opsr-avatar-menu .view-as-dropdown {
    position: static;
    display: none;
    width: 100%;
    margin-bottom: 0.375rem;
    box-shadow: none;
    border: 1px solid var(--border-soft, #f1f3f5);
    background: var(--bg-secondary);
}
.opsr-avatar-menu .view-as-dropdown.open { display: block; }
/* Org list items inside avatar menu */
#avatarOrgList .opsr-org-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-primary);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
#avatarOrgList .opsr-org-row:hover { background: var(--bg-hover); }
#avatarOrgList .opsr-org-row.active {
    background: var(--indigo-bg, #eef2ff);
    color: var(--indigo-text, #4338ca);
    font-weight: 500;
}
#avatarOrgList .opsr-org-row .opsr-org-mark {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    color: white;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
#avatarOrgList .opsr-org-row.active .opsr-org-mark { background: var(--indigo-text, #4338ca); }
#avatarOrgList .opsr-org-row .opsr-org-name { flex: 1; }
#avatarOrgList .opsr-org-row .opsr-org-check {
    color: var(--indigo-text, #4338ca);
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .opsr-topbar { padding: 0 0.75rem; gap: 0.5rem; }
    .opsr-topbar .header-org-name { font-size: 0.875rem; }
    .opsr-avatar-menu { right: 0.5rem; left: 0.5rem; width: auto; max-width: none; }
    #mobileMenuBtn { display: none !important; }
}

/* ---------- Phase 3: <select> as text-style dropdown ----------
   Strips the native boxed look from <select class="opsr-filter-select">
   so existing dropdowns (with their value-binding, keyboard nav, and
   mobile native picker) keep working but read as quiet text triggers
   matching the v2 chrome. */
.opsr-filter-select {
    background: transparent;
    border: 0;
    padding: 0.375rem 1.5rem 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    min-height: 32px;
    font-family: inherit;
    line-height: 1;
    font-weight: 500;
    outline: none;
}
.opsr-filter-select:hover { background-color: var(--bg-hover); }
.opsr-filter-select:focus {
    background-color: var(--bg-hover);
    box-shadow: 0 0 0 2px var(--indigo-bg, #eef2ff);
}
/* Mobile: filter select gets a subtle background so it's clearly tappable */
@media (max-width: 768px) {
    .opsr-filter-select {
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        padding: 0.375rem 1.5rem 0.375rem 0.625rem;
        flex-shrink: 0;
    }
}

/* ===================================================================
   h.1g — Welcome wizard card
   =================================================================== */
.welcome-wizard {
    margin: 1.25rem 0;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--opsresults-indigo, #4f46e5);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.wiz-stepper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.wiz-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.wiz-dot-current {
    background: var(--opsresults-indigo, #4f46e5);
    color: white;
    border-color: var(--opsresults-indigo, #4f46e5);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}
.wiz-dot-done {
    background: var(--opsresults-emerald, #10b981);
    color: white;
    border-color: var(--opsresults-emerald, #10b981);
}
.wiz-dot-sep {
    flex: 0 0 28px;
    height: 2px;
    background: var(--border-color);
}
.wiz-step-label {
    margin-left: 0.75rem;
    font-weight: 500;
}
.wiz-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}
.wiz-icon {
    font-size: 2.5rem;
    line-height: 1;
}
.wiz-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}
.wiz-desc {
    margin: 0;
    max-width: 60ch;
    line-height: 1.55;
    color: var(--text-secondary);
}
.wiz-desc strong {
    color: var(--text-primary);
}
.wiz-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
@media (max-width: 600px) {
    .welcome-wizard { padding: 1.25rem 1rem; }
    .wiz-title { font-size: 1.2rem; }
    .wiz-actions { flex-direction: column; align-items: stretch; }
}

/* ===================================================================
   Phase 4c: Landing page slim-down
   - "Good morning, Tyler" hero shrunk from 1.75rem/800 to 1.375rem/700
   - Date line tighter spacing
   - Welcome wizard padding reduced (still prominent but less dominant)
   =================================================================== */
.landing-greeting-text {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    margin-bottom: 0.25rem !important;
}
.landing-date {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
    margin-bottom: 1rem !important;
}
.landing-page {
    padding: 0.5rem 0 !important;
}
.welcome-wizard {
    padding: 1.25rem 1.5rem !important;
    margin: 0.75rem 0 !important;
}
.welcome-wizard h2 {
    font-size: 1.125rem !important;
    margin-bottom: 0.5rem !important;
}
.welcome-wizard p {
    font-size: 0.875rem !important;
    margin-bottom: 0.75rem !important;
}
.wiz-icon {
    font-size: 1.75rem !important;
}

/* ===================================================================
   Phase 4d: Action Items page slim-down
   - .section-title "Action Items" → v2 typography
   - .items-sub-tab (Active/Resolved) → text+underline (matches RT sub-tabs)
   - .severity-tab (All/Critical/Warning/Info) → flatter, indigo active
   - .category-chip (Bank Deposits, XBM, etc.) → slim, less chunky padding
   - .search-input + .sort-select → v2 filter-row aesthetic
   - .controls-bar → tighter padding
   =================================================================== */

#issuesView .section-title,
.issues-section .section-title {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
    margin: 0 0 0.75rem !important;
}

/* Active/Resolved sub-tabs: text-style with indigo underline */
.items-sub-tabs {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 0.25rem !important;
    margin-bottom: 1rem !important;
}
.items-sub-tab {
    background: transparent !important;
    border: 0 !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.15s, border-color 0.15s !important;
}
.items-sub-tab:hover { color: var(--text-primary) !important; }
.items-sub-tab.active {
    color: var(--opsresults-indigo, #4f46e5) !important;
    border-bottom-color: var(--opsresults-indigo, #4f46e5) !important;
    background: transparent !important;
}

/* Severity filter tabs (All / Critical / Warning / Info) — slimmer */
.severity-filters {
    gap: 0.375rem !important;
}
.severity-tab {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
}
.severity-tab.active {
    background: var(--opsresults-indigo, #4f46e5) !important;
    color: white !important;
    border-color: var(--opsresults-indigo, #4f46e5) !important;
}

/* Category chips — slim padding, indigo when active */
.category-filters {
    gap: 0.375rem !important;
    margin-bottom: 1rem !important;
}
.category-chip {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    min-height: 32px !important;
}
.category-chip.active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

/* Search input — v2 styling */
#issuesView .search-input,
.controls-bar .search-input {
    padding: 0.5rem 0.625rem 0.5rem 2rem !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    min-height: 36px !important;
}
#issuesView .search-input:focus,
.controls-bar .search-input:focus {
    border-color: var(--opsresults-indigo, #4f46e5) !important;
    box-shadow: 0 0 0 3px var(--indigo-bg, #eef2ff) !important;
}

/* Sort selects in Action Items filter row → text-style */
.controls-bar .sort-select {
    background: transparent !important;
    border: 0 !important;
    padding: 0.375rem 1.5rem 0.375rem 0.5rem !important;
    font-size: 0.8125rem !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.375rem center !important;
    min-height: 32px !important;
    font-weight: 500 !important;
    outline: none !important;
}
.controls-bar .sort-select:hover { background-color: var(--bg-hover) !important; }

/* Controls bar — tighter */
.controls-bar {
    padding: 0.75rem 0 !important;
    margin-bottom: 1rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* ===================================================================
   Phase 4e: Goals + Admin Panel + P&L slim-down
   - Goals: .gm-tab indigo accent (was blue), title sizing
   - Admin Panel: tabs indigo when active, slimmer padding
   - P&L: title v2 sizing
   =================================================================== */

/* Goals tabs — indigo accent */
.gm-tab.active {
    color: var(--opsresults-indigo, #4f46e5) !important;
    border-bottom-color: var(--opsresults-indigo, #4f46e5) !important;
}
.gm-tab {
    font-size: 0.8125rem !important;
    padding: 0.5rem 0.875rem !important;
}

/* Admin Panel tabs — slim, indigo active */
.admin-tab {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}
.admin-tab.active {
    color: var(--opsresults-indigo, #4f46e5) !important;
    border-color: var(--opsresults-indigo, #4f46e5) !important;
}

/* P&L title — v2 sizing */
.pnl-title {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
}
.pnl-header {
    padding: 0 0 1rem !important;
}
.pnl-export-btn {
    background: var(--opsresults-indigo, #4f46e5) !important;
    color: white !important;
    border: 0 !important;
    padding: 0.5rem 0.875rem !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    min-height: 36px !important;
}
.pnl-export-btn:hover { background: var(--opsresults-indigo-hover, #4338ca) !important; }

/* ===================================================================
   Phase 4f: Mobile tightening for Phase 4c/4d/4e additions
   The !important rules from 4c-e leak into mobile (correctly, by design)
   but a few elements need extra trim at small viewport widths.
   =================================================================== */
@media (max-width: 768px) {
    /* Landing — tighter spacing on mobile, smaller wizard */
    .landing-greeting-text {
        font-size: 1.25rem !important;
    }
    .landing-date {
        font-size: 0.8125rem !important;
        margin-bottom: 0.75rem !important;
    }
    .landing-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }
    .welcome-wizard {
        padding: 1rem !important;
    }
    .welcome-wizard h2 {
        font-size: 1rem !important;
    }
    .wiz-icon {
        font-size: 1.5rem !important;
    }

    /* Action Items — column-stack filters, slimmer chrome */
    #issuesView .section-title,
    .issues-section .section-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    .items-sub-tab {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.8125rem !important;
    }
    .severity-tab,
    .category-chip {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
    .controls-bar {
        padding: 0.5rem 0 !important;
    }
    .controls-row-top,
    .controls-row-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    .controls-bar .sort-select {
        background-color: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* Goals / Admin Panel / P&L titles smaller on mobile */
    .pnl-title {
        font-size: 1.25rem !important;
    }
    .gm-tab,
    .admin-tab {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.75rem !important;
    }

    /* Mobile-only sidebar drawer width (sidebar shrunk to 208px; keep drawer
       roomy on small screens to make tap targets comfortable). */
    .new-layout .tenant-sidebar {
        width: min(280px, 80vw) !important;
    }
}

/* Very narrow phones — extra tight */
@media (max-width: 380px) {
    .landing-greeting-text {
        font-size: 1.125rem !important;
    }
    #issuesView .section-title,
    .issues-section .section-title,
    .pnl-title {
        font-size: 1.125rem !important;
    }
    .severity-tab,
    .category-chip {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.4375rem !important;
    }
}

/* =============================================================
   Landing page — MLB sales scoreboard (2026-07-19)
   ============================================================= */
.landing-sales { margin-bottom: 1.25rem; }
.ls-card {
    background: var(--bg-card, #1e293b); border: 1px solid var(--border-color, #334155);
    border-radius: 12px; padding: 1.1rem 1.25rem; cursor: pointer;
    transition: border-color 0.15s;
}
.ls-card:hover { border-color: #6366f1; }
.ls-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.ls-hero-rank { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; }
.ls-hero-store { font-weight: 700; font-size: 1.05rem; }
.ls-hero-sub { font-size: 0.78rem; color: var(--text-secondary, #94a3b8); margin-top: 2px; }
.ls-move { font-size: 0.75rem; font-weight: 700; }
.ls-move.up { color: #22c55e; }
.ls-move.down { color: #ef4444; }
.ls-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ls-chip {
    border: 1px solid var(--border-color, #334155); border-radius: 10px;
    padding: 8px 6px; text-align: center; border-left-width: 3px;
}
.ls-chip.ls-good { border-left-color: #22c55e; }
.ls-chip.ls-ok   { border-left-color: #f59e0b; }
.ls-chip.ls-low  { border-left-color: #ef4444; }
.ls-chip-pct { font-size: 1.05rem; font-weight: 800; }
.ls-chip.ls-good .ls-chip-pct { color: #22c55e; }
.ls-chip.ls-ok   .ls-chip-pct { color: #f59e0b; }
.ls-chip.ls-low  .ls-chip-pct { color: #ef4444; }
.ls-chip-dir { font-size: 0.65rem; margin-left: 3px; }
.ls-chip-dir.up { color: #22c55e; }
.ls-chip-dir.down { color: #ef4444; }
.ls-chip-label { font-size: 0.68rem; color: var(--text-secondary, #94a3b8); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.03em; }
.ls-chip-rank { font-size: 0.62rem; color: var(--text-secondary, #94a3b8); opacity: 0.8; min-height: 0.8em; }
.ls-good.ls-hero-rank, .ls-hero-rank.ls-good { color: #22c55e; }
.ls-hero-rank.ls-ok  { color: #f59e0b; }
.ls-hero-rank.ls-low { color: #ef4444; }
.ls-mkts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.ls-mkt { border: 1px solid var(--border-color, #334155); border-radius: 8px; padding: 7px 9px; }
.ls-mkt-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #94a3b8); }
.ls-mkt-rank { font-weight: 800; font-size: 0.95rem; margin-top: 1px; }
.ls-mkt-weak { font-size: 0.68rem; font-weight: 600; margin-top: 1px; }
.ls-mkt-weak.ls-good { color: #22c55e; } .ls-mkt-weak.ls-ok { color: #f59e0b; } .ls-mkt-weak.ls-low { color: #ef4444; }
.ls-strip { margin-top: 12px; border-top: 1px solid var(--border-color, #334155); padding-top: 8px; }
.ls-strip-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #94a3b8); margin-bottom: 4px; }
.ls-strip-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 0.8rem; }
.ls-strip-rank { font-weight: 800; min-width: 58px; }
.ls-strip-rank.ls-good { color: #22c55e; } .ls-strip-rank.ls-ok { color: #f59e0b; } .ls-strip-rank.ls-low { color: #ef4444; }
.ls-strip-store { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-strip-market { font-size: 0.7rem; color: var(--text-secondary, #94a3b8); }
.ls-strip-weak { font-size: 0.7rem; font-weight: 700; }
.ls-strip-weak.ls-good { color: #22c55e; } .ls-strip-weak.ls-ok { color: #f59e0b; } .ls-strip-weak.ls-low { color: #ef4444; }
.ls-asof { font-size: 0.66rem; color: var(--text-secondary, #94a3b8); margin-top: 10px; opacity: 0.8; }
.ls-empty { background: var(--bg-card, #1e293b); border: 1px dashed var(--border-color, #334155); border-radius: 12px; padding: 1rem 1.25rem; font-size: 0.85rem; color: var(--text-secondary, #94a3b8); }
@media (max-width: 640px) {
    .ls-chips { grid-template-columns: repeat(3, 1fr); }
    .ls-hero-rank { font-size: 1.7rem; }
    .ls-strip-market { display: none; }
}

/* Company Totals trend/pace lines (2026-07-21) */
.ms-trend { font-size: 0.68rem; margin-top: 4px; color: var(--text-secondary); font-weight: 600; }
.ms-trend-good { color: #22c55e; }
.ms-trend-ok { color: #f59e0b; }
.ms-trend-low { color: #ef4444; }

/* Goal bars on Company Totals + market cards (2026-07-21). These classes
   were referenced by the markup but never defined — the "bars" rendered as
   invisible divs and the labels as full-size body text, making the pills
   look ragged/uneven, worst on mobile. */
.admin-ms-total-card { min-width: 0; }
.ms-progress-wrap { margin-top: 0.45rem; min-width: 0; }
.ms-progress-track { height: 6px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
.ms-progress-fill { height: 100%; border-radius: 4px; background: #6366f1; transition: width 0.3s; }
.ms-prog-mim { background: #e91e8c; }
.ms-prog-hint { background: #ff8c00; }
.ms-progress-label { display: block; font-size: 0.66rem; color: var(--text-secondary); margin-top: 3px; }
@media (max-width: 768px) {
    .admin-ms-total-value { font-size: 1.35rem; }
    .ms-trend { font-size: 0.64rem; }
}

/* ===================================================================
   PB Report (Performance Bonus) - owner/admin/director only (2026-07-24)
   =================================================================== */
.pb-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.5rem 0 0.75rem; flex-wrap: wrap; }
.pb-title { margin: 0; font-size: 1.25rem; color: var(--text-primary); }
.pb-controls select { max-width: 160px; }
.pb-meta { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.pb-table-wrap { overflow-x: auto; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; background: var(--bg-card, #fff); }
.pb-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.pb-table th { text-align: left; padding: 0.6rem 0.75rem; background: var(--bg-secondary, #f8fafc); color: var(--text-secondary); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.pb-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-color, #eef2f7); color: var(--text-primary); }
.pb-table tbody tr:hover { background: var(--bg-hover, #f8fafc); }
.pb-table th.pb-num, .pb-table td.pb-num { text-align: right; font-variant-numeric: tabular-nums; }
.pb-store .pb-door { font-size: 0.6875rem; color: var(--text-secondary); }
.pb-payout { font-weight: 600; }
.pb-att-good { color: #059669; font-weight: 600; }
.pb-att-ok { color: #d97706; font-weight: 600; }
.pb-att-low { color: #dc2626; font-weight: 600; }
.pb-table tfoot td { font-weight: 700; background: var(--bg-secondary, #f8fafc); border-top: 2px solid var(--border-color, #e2e8f0); }
[data-theme="dark"] .pb-table-wrap { background: var(--bg-card); border-color: #334155; }
[data-theme="dark"] .pb-att-good { color: #6ee7b7; }
[data-theme="dark"] .pb-att-ok { color: #fcd34d; }
[data-theme="dark"] .pb-att-low { color: #fca5a5; }
@media (max-width: 768px) {
    .pb-table th, .pb-table td { padding: 0.45rem 0.5rem; font-size: 0.75rem; }
}