@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =============================================
   CHOPLOCAL — DESIGN SYSTEM v3
   Clean • Notion-inspired • Minimal
   ============================================= */

:root {
    /* Brand */
    --accent: #B8462B;
    --accent-hover: #9A3A22;
    --accent-light: #E8674D;
    --accent-ghost: rgba(184,70,43,0.06);
    --accent-soft: rgba(184,70,43,0.12);
    --accent-gradient: linear-gradient(135deg, #96190f 0%, #B8462B 50%, #c42a1c 100%);

    /* Neutrals */
    --bg: #FAFAF9;
    --bg-card: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-header: #FFFFFF;
    --border: #E8E5E0;
    --border-hover: #D4D0C8;
    --border-light: #F0EEEB;

    /* Text */
    --text: #1A1A1A;
    --text-2: #6B6B6B;
    --text-3: #9CA3AF;

    /* Semantic */
    --green: #16A34A;
    --green-ghost: rgba(22,163,74,0.08);
    --blue: #2563EB;
    --blue-ghost: rgba(37,99,235,0.08);
    --amber: #D97706;
    --amber-ghost: rgba(217,119,6,0.08);
    --purple: #7C3AED;
    --purple-ghost: rgba(124,58,237,0.08);

    /* Layout */
    --header-h: 48px;
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 60px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --font: 'Inter', 'Outfit', -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
[data-theme="dark"] {
    --bg: #111111;
    --bg-card: #1A1A1A;
    --bg-sidebar: #161616;
    --bg-header: #161616;
    --border: #2A2A2A;
    --border-hover: #3A3A3A;
    --border-light: #222222;
    --text: #E5E5E5;
    --text-2: #9CA3AF;
    --text-3: #6B7280;
    --accent: #E5E5E5;
    --accent-hover: #FFFFFF;
    --accent-ghost: rgba(255,255,255,0.06);
    --accent-soft: rgba(255,255,255,0.1);
    --green: #4ADE80;
    --green-ghost: rgba(74,222,128,0.08);
    --blue: #60A5FA;
    --blue-ghost: rgba(96,165,250,0.08);
    --amber: #FBBF24;
    --amber-ghost: rgba(251,191,36,0.08);
    --purple: #A78BFA;
    --purple-ghost: rgba(167,139,250,0.08);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #111111;
        --bg-card: #1A1A1A;
        --bg-sidebar: #161616;
        --bg-header: #161616;
        --border: #2A2A2A;
        --border-hover: #3A3A3A;
        --border-light: #222222;
        --text: #E5E5E5;
        --text-2: #9CA3AF;
        --text-3: #6B7280;
        --accent: #E5E5E5;
        --accent-hover: #FFFFFF;
        --accent-ghost: rgba(255,255,255,0.06);
        --accent-soft: rgba(255,255,255,0.1);
        --green: #4ADE80;
        --green-ghost: rgba(74,222,128,0.08);
        --blue: #60A5FA;
        --blue-ghost: rgba(96,165,250,0.08);
        --amber: #FBBF24;
        --amber-ghost: rgba(251,191,36,0.08);
        --purple: #A78BFA;
        --purple-ghost: rgba(167,139,250,0.08);
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
        --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
        color-scheme: dark;
    }
}

/* ── Logo swap for dark mode ───────────────── */
.logo-dark { display: none; }
.logo-light { display: inline; }
[data-theme="dark"] .logo-dark { display: inline; }
[data-theme="dark"] .logo-light { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-dark { display: inline; }
    :root:not([data-theme="light"]) .logo-light { display: none; }
}

/* ── Reset ─────────────────────────────────── */
html, body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}
h1:focus { outline: none; }
* { box-sizing: border-box; }

/* =============================================
   HEADER — Seamless with content (no border)
   ============================================= */
.cl-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: var(--bg);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 1100;
}
.cl-header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.cl-header-logo img {
    height: 22px;
    width: auto;
}
.cl-header-icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    transition: all 0.15s;
    flex-shrink: 0;
}
.cl-header-icon-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
    background: var(--accent-ghost);
}
.cl-header-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.cl-header-tabs::-webkit-scrollbar { display: none; }
.cl-header-tab {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s;
    white-space: nowrap;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
}
.cl-header-tab:hover {
    background: var(--accent-ghost);
    color: var(--text);
}
.cl-header-tab.active {
    background: var(--accent-ghost);
    color: var(--accent);
    font-weight: 600;
}
.cl-mobile-menu-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    transition: all 0.15s;
    flex-shrink: 0;
}
.cl-mobile-menu-btn:hover {
    border-color: var(--border-hover);
    color: var(--text);
}
.cl-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.cl-header-lang {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.15s;
    position: relative;
}
.cl-header-lang:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

/* Lang dropdown */
.cl-lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 120px;
    overflow: hidden;
    z-index: 1300;
    animation: cl-fadeDown 0.12s ease-out;
}
@keyframes cl-fadeDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.cl-lang-option {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-2);
    text-align: left;
    transition: background 0.1s;
}
.cl-lang-option:hover { background: var(--accent-ghost); }
.cl-lang-option.active { color: var(--accent); font-weight: 600; }
.cl-lang-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1250;
}

/* Profile dropdown in header */
.cl-header-profile-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}
.cl-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #b42406;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.15s;
}
.cl-header-profile-btn:hover .cl-header-avatar { opacity: 0.85; }
.cl-profile-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    overflow: hidden;
    z-index: 1300;
    animation: cl-fadeDown 0.12s ease-out;
}
.cl-profile-dropdown-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font);
    font-size: 13px;
}
.cl-profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-2);
    text-align: left;
    text-decoration: none;
    transition: background 0.1s;
}
.cl-profile-dropdown-item:hover { background: var(--accent-ghost); }

/* =============================================
   SIDEBAR — Collapsible (240px / 60px)
   ============================================= */
.cl-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 1200;
    transition: width 0.25s var(--ease);
    overflow: hidden;
}
.cl-sidebar.collapsed {
    width: var(--sidebar-w-collapsed);
}
/* Sidebar top: toggle button */
.cl-sidebar-top {
    padding: 10px 8px 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}
.collapsed .cl-sidebar-top {
    justify-content: center;
}
.cl-sidebar-toggle {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    transition: all 0.15s;
}
.cl-sidebar-toggle:hover {
    background: var(--accent-ghost);
    color: var(--text);
}
.cl-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-sidebar-nav::-webkit-scrollbar { width: 0; }
.cl-sidebar-section {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-3);
    padding: 16px 12px 6px;
    white-space: nowrap;
    overflow: hidden;
}
.collapsed .cl-sidebar-section { opacity: 0; height: 0; padding: 0; margin: 0; }

.cl-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.12s;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font);
}
.cl-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}
.cl-nav-item:hover {
    background: var(--accent-ghost);
    color: var(--text);
}
.cl-nav-item:hover svg { opacity: 1; }
.cl-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}
.cl-nav-item.active svg { opacity: 1; color: var(--accent); }
.collapsed .cl-nav-item.active {
    background: var(--accent-soft);
}
.cl-nav-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.collapsed .cl-nav-item {
    justify-content: center;
    padding: 10px 0;
}
.collapsed .cl-nav-item > span { display: none; }

/* Sidebar bottom — same padding as nav */
.cl-sidebar-bottom {
    border-top: 1px solid var(--border);
    padding: 4px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cl-theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--text-3);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.12s;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.cl-theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.cl-theme-toggle:hover { background: var(--accent-ghost); color: var(--text); }
.collapsed .cl-theme-toggle { justify-content: center; padding: 10px 0; }
.collapsed .cl-theme-toggle span { display: none; }

/* Profile info in sidebar */
.cl-profile-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}
.cl-profile-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-profile-role {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.collapsed .cl-profile-info { display: none; }

.cl-logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--text-3);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.12s;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.cl-logout-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.cl-logout-btn:hover { background: rgba(220,38,38,0.06); color: #DC2626; }
.collapsed .cl-logout-btn { justify-content: center; padding: 10px 0; }
.collapsed .cl-logout-btn span { display: none; }

/* =============================================
   MAIN CONTENT AREA
   ============================================= */
.cl-main {
    margin-top: var(--header-h);
    margin-left: var(--sidebar-w);
    min-height: calc(100vh - var(--header-h));
    background: var(--bg);
    transition: margin-left 0.25s var(--ease);
    padding: 24px 32px 80px;
    position: relative;
    z-index: 1;
}
.sidebar-collapsed .cl-main {
    margin-left: var(--sidebar-w-collapsed);
}
/* Header shifts right to avoid sidebar overlap */
.cl-header {
    margin-left: var(--sidebar-w);
    transition: margin-left 0.25s var(--ease);
}
.sidebar-collapsed .cl-header {
    margin-left: var(--sidebar-w-collapsed);
}

/* =============================================
   OVERRIDE MUDBLAZOR
   ============================================= */
.mud-layout { display: contents !important; }
.mud-appbar { display: none !important; }
.mud-drawer { display: none !important; }
.mud-main-content {
    padding: 0 !important;
    background: transparent !important;
    min-height: 0 !important;
}
.mud-paper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.mud-table { background: transparent !important; box-shadow: none !important; }
.mud-table .mud-table-container { background: transparent !important; }
.mud-table .mud-table-head th {
    font-family: var(--font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-3) !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    padding: 10px 16px !important;
}
.mud-table .mud-table-head .mud-table-row { background: transparent !important; }
.mud-table .mud-table-body .mud-table-row { background: transparent !important; transition: background 0.1s !important; }
.mud-table .mud-table-body .mud-table-row:hover { background: var(--accent-ghost) !important; }
.mud-table .mud-table-body td {
    font-family: var(--font) !important;
    font-size: 13px !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 12px 16px !important;
}
.mud-table .mud-table-footer { background: transparent !important; }
.mud-button-root.mud-button-filled {
    border-radius: var(--radius) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-family: var(--font) !important;
    box-shadow: none !important;
    transition: all 0.15s !important;
}
.mud-button-root.mud-button-filled:hover { box-shadow: var(--shadow-sm) !important; }
.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--text) !important;
}
.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--text) !important;
    color: var(--bg) !important;
}
.mud-button-root.mud-button-outlined {
    border-radius: var(--radius) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    font-family: var(--font) !important;
    border-color: var(--border) !important;
    transition: all 0.15s !important;
}
.mud-button-root.mud-button-outlined:hover {
    border-color: var(--border-hover) !important;
    background: var(--accent-ghost) !important;
}
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius) !important;
    border-color: var(--border) !important;
    transition: border-color 0.15s !important;
}
.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--border-hover) !important; }
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-ghost) !important;
}
.mud-input.mud-input-outlined { font-family: var(--font) !important; }
.mud-input-label-inputcontrol { font-family: var(--font) !important; font-size: 13px !important; }
.mud-chip { font-family: var(--font) !important; font-size: 11px !important; font-weight: 500 !important; border-radius: 4px !important; }
.mud-dialog {
    border-radius: var(--radius-lg) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border) !important;
}
.mud-dialog .mud-dialog-title { font-family: var(--font) !important; font-weight: 600 !important; }
.mud-pagination .mud-pagination-item button { border-radius: 6px !important; font-family: var(--font) !important; }
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--font) !important; color: var(--text) !important; }
.mud-icon-button { border-radius: 6px !important; }
/* Snackbar — force bottom-right and clean style */
.mud-snackbar-location-bottom-right,
.mud-snackbar-location-top-right {
    top: auto !important;
    bottom: 24px !important;
    right: 24px !important;
}
.mud-snackbar {
    border-radius: var(--radius) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    color: var(--text) !important;
}
.mud-snackbar .mud-snackbar-content-message { font-family: var(--font) !important; }
.mud-snackbar.mud-alert-outlined-success { border-color: var(--green) !important; }
.mud-snackbar.mud-alert-outlined-error { border-color: #DC2626 !important; }
.mud-snackbar.mud-alert-outlined-warning { border-color: var(--amber) !important; }
.mud-snackbar.mud-alert-outlined-info { border-color: var(--blue) !important; }
.mud-select .mud-input-outlined .mud-input-outlined-border { border-radius: var(--radius) !important; }

/* =============================================
   ACTION DROPDOWN MENU (3-dot)
   ============================================= */
.cl-action-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 200;
    overflow: hidden;
    animation: cl-fadeDown 0.1s ease-out;
}
.cl-action-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-2);
    text-decoration: none;
    text-align: left;
    transition: background 0.1s;
    white-space: nowrap;
}
.cl-action-menu-item:hover {
    background: var(--accent-ghost);
    color: var(--text);
}
.cl-action-menu-item svg { flex-shrink: 0; opacity: 0.6; }
.cl-action-menu-item:hover svg { opacity: 1; }
.cl-action-danger { color: #DC2626; }
.cl-action-danger:hover { background: rgba(220,38,38,0.06); color: #DC2626; }
.cl-action-danger svg { color: #DC2626; }

/* =============================================
   AUTH LAYOUT
   ============================================= */
.auth-layout-wrapper { display: flex; min-height: 100vh; background: var(--bg); }
.auth-brand-panel {
    display: none; flex: 1;
    background: var(--accent-gradient);
    position: relative; overflow: hidden;
    align-items: center; justify-content: center; flex-direction: column;
    padding: 3rem;
}
@media (min-width: 768px) { .auth-brand-panel { display: flex; } }
.auth-brand-panel::before { content:''; position:absolute; top:-30%; right:-20%; width:600px; height:600px; background:rgba(255,255,255,0.05); border-radius:50%; }
.auth-brand-panel::after { content:''; position:absolute; bottom:-20%; left:-15%; width:400px; height:400px; background:rgba(255,255,255,0.05); border-radius:50%; }
.auth-brand-logo { font-size:2.5rem; font-weight:800; color:white; letter-spacing:-0.5px; margin-bottom:1rem; position:relative; z-index:1; }
.auth-brand-logo span { color: #FFB74D; }
.auth-brand-tagline { font-size:1.1rem; color:rgba(255,255,255,0.85); text-align:center; max-width:320px; line-height:1.6; position:relative; z-index:1; }
.auth-form-panel { display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem; background:var(--bg-card); min-height:100vh; width:100%; }
@media (min-width: 768px) { .auth-form-panel { width:480px; flex-shrink:0; min-height:unset; } }
.auth-form-container { width:100%; max-width:400px; }
.auth-form-logo { font-size:1.75rem; font-weight:800; color:var(--accent); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; }
.auth-form-subtitle { color:var(--text-2); margin-bottom:2.5rem; font-size:0.95rem; }
.auth-form-title { font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:0.5rem; }

/* =============================================
   VALIDATION
   ============================================= */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green); }
.invalid { outline: 1px solid #DC2626; }
.validation-message { color: #DC2626; font-size: 0.8rem; }

/* =============================================
   BLAZOR ERROR
   ============================================= */
#blazor-error-ui { background:lightyellow; bottom:0; box-shadow:0 -1px 2px rgba(0,0,0,0.2); display:none; left:0; padding:0.6rem 1.25rem 0.7rem; position:fixed; width:100%; z-index:1000; visibility:hidden; opacity:0; pointer-events:none; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:0.75rem; top:0.5rem; }
.blazor-error-boundary { background:#b32121; padding:1rem; color:white; border-radius:var(--radius); }
.blazor-error-boundary::after { content:"An error has occurred." }

/* =============================================
   LOADING SCREEN
   ============================================= */
.chop-loader { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:9999; }
.chop-loader-blob { position:absolute; border-radius:50%; pointer-events:none; }
.chop-loader-blob--1 { top:-18%; right:-12%; width:500px; height:500px; background:radial-gradient(circle,rgba(184,70,43,0.03)0%,transparent 70%); }
.chop-loader-blob--2 { bottom:-14%; left:-8%; width:400px; height:400px; background:radial-gradient(circle,rgba(22,163,74,0.02)0%,transparent 70%); }
.chop-loader-content { display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; animation:cl-fadeIn 0.6s ease both; }
.chop-loader-logo { position:relative; width:80px; height:80px; margin-bottom:32px; }
.chop-loader-logo img { width:80px; height:80px; border-radius:50%; position:relative; z-index:1; animation:cl-breathe 2.4s ease-in-out infinite; }
.chop-loader-ring { position:absolute; inset:-6px; border-radius:50%; border:2px solid transparent; border-top-color:rgba(184,70,43,0.3); border-right-color:rgba(184,70,43,0.1); animation:cl-spin 1.8s linear infinite; }
.chop-loader-bar { width:120px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:28px; }
.chop-loader-bar-fill { height:100%; width:30%; background:var(--accent); border-radius:2px; animation:cl-slide 1.4s ease-in-out infinite; }
.chop-loader-powered { font-family:var(--font); font-size:11px; font-weight:300; color:var(--text-3); letter-spacing:0.5px; }
.chop-loader-powered span { font-weight:500; color:var(--text-2); }

@keyframes cl-fadeIn { from{opacity:0;transform:scale(0.96)} to{opacity:1;transform:scale(1)} }
@keyframes cl-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes cl-spin { to{transform:rotate(360deg)} }
@keyframes cl-slide { 0%{transform:translateX(-100%)} 50%{transform:translateX(300%)} 100%{transform:translateX(-100%)} }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    .cl-sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-w) !important;
        box-shadow: var(--shadow-lg);
    }
    .cl-sidebar.mobile-open {
        transform: translateX(0);
    }
    .cl-main { margin-left: 0 !important; padding: 16px 16px 60px; }
    .cl-header { margin-left: 0 !important; padding: 0 16px; }
    .cl-header-logo img { height: 18px; }
    .cl-mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1150;
    }
}
@media (min-width: 769px) {
    .cl-mobile-menu-btn { display: none; }
    .cl-mobile-overlay { display: none; }
}

/* =============================================
   DARK MODE — Auth & Form text fixes
   ============================================= */
[data-theme="dark"] .chop-auth-header h1,
[data-theme="dark"] .chop-home-welcome h1,
[data-theme="dark"] .chop-dialog-title { color: #F5F5F5; }

[data-theme="dark"] .chop-auth-header p,
[data-theme="dark"] .chop-home-welcome p,
[data-theme="dark"] .chop-auth-footer { color: #9CA3AF; }

[data-theme="dark"] .chop-rw-field label,
[data-theme="dark"] .chop-ci-field label,
[data-theme="dark"] .chop-ci-sale-card-title,
[data-theme="dark"] .chop-stat-label,
[data-theme="dark"] label { color: #9CA3AF; }

/* Global dark input override — catches ALL inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg-card) !important;
    color: #F5F5F5 !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6B7280 !important; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--border-hover) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05) !important;
}

[data-theme="dark"] .chop-auth-btn {
    color: #F5F5F5;
    border-color: #F5F5F5;
}
[data-theme="dark"] .chop-auth-btn:hover {
    background: #F5F5F5;
    color: #111111;
}

[data-theme="dark"] .chop-page-btn {
    color: #F5F5F5;
    border-color: #F5F5F5;
}
[data-theme="dark"] .chop-page-btn:hover {
    background: #F5F5F5;
    color: #111111;
}

[data-theme="dark"] .chop-rw-submit {
    color: #F5F5F5;
    border-color: #F5F5F5;
}
[data-theme="dark"] .chop-rw-submit:hover {
    background: #F5F5F5;
    color: #111111;
}

[data-theme="dark"] .chop-ci-cta {
    color: #F5F5F5;
    border-color: #F5F5F5;
}
[data-theme="dark"] .chop-ci-cta:hover {
    background: #F5F5F5;
    color: #111111;
}

[data-theme="dark"] .chop-auth-link { color: #9CA3AF; }
[data-theme="dark"] .chop-auth-footer a { color: #F5F5F5; }
[data-theme="dark"] .chop-info-banner { color: #9CA3AF; }
[data-theme="dark"] .chop-dialog-text { color: #9CA3AF; }
[data-theme="dark"] .chop-rw-field-hint { color: #6B7280; }

/* Auth card — better contrast in dark mode */
[data-theme="dark"] .chop-auth-card {
    background: #1E1E1E;
    border-color: #333333;
}
[data-theme="dark"] .chop-auth-card .mud-input-outlined .mud-input-outlined-border {
    border-color: #3A3A3A !important;
}
[data-theme="dark"] .chop-auth-card .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #555555 !important;
}
[data-theme="dark"] .chop-auth-card .mud-input-label {
    color: #9CA3AF !important;
    background: transparent !important;
}
[data-theme="dark"] .chop-auth-card .mud-input-label-outlined {
    background: transparent !important;
}
[data-theme="dark"] .chop-auth-card .mud-input-label-inputcontrol {
    background: transparent !important;
}
[data-theme="dark"] .chop-auth-card .mud-input.mud-input-outlined {
    color: #F5F5F5 !important;
}
[data-theme="dark"] .chop-auth-card .mud-input-adornment .mud-icon-root {
    color: #6B7280 !important;
}
[data-theme="dark"] .chop-auth-forgot .chop-auth-link {
    color: #9CA3AF;
}

/* MudBlazor floating label — fix background in dark mode */
[data-theme="dark"] .mud-input-label {
    background: transparent !important;
    color: #9CA3AF !important;
}
[data-theme="dark"] .mud-input-outlined .mud-input-slot {
    color: #F5F5F5 !important;
}
[data-theme="dark"] .mud-input-outlined .mud-input-outlined-border {
    background: transparent !important;
}
[data-theme="dark"] .mud-input-control > .mud-input-label-outlined {
    background: transparent !important;
}
[data-theme="dark"] .chop-auth-card legend,
[data-theme="dark"] .chop-auth-card .mud-input-label-outlined {
    background: #1E1E1E !important;
    color: #9CA3AF !important;
}
[data-theme="dark"] .mud-input-label-filled,
[data-theme="dark"] .mud-input-label-outlined {
    background: var(--bg-card) !important;
}

/* ── Field validation errors (global) ──────────────────── */
.chop-rw-field.field-error input,
.chop-rw-field.field-error select,
.chop-rw-field.field-error textarea {
    border-color: #E53935 !important;
}
.chop-rw-field.field-error label {
    color: #E53935 !important;
}
.chop-field-error-msg {
    font-family: var(--chop-font, var(--font, inherit));
    font-size: 11px;
    color: #E53935;
    font-weight: 400;
    margin-top: 4px;
}

/* Auto dark via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .chop-auth-header h1,
    :root:not([data-theme="light"]) .chop-home-welcome h1 { color: #F5F5F5; }
    :root:not([data-theme="light"]) label { color: #9CA3AF; }
    :root:not([data-theme="light"]) input,
    :root:not([data-theme="light"]) select,
    :root:not([data-theme="light"]) textarea {
        background: var(--bg-card) !important; color: #F5F5F5 !important; border-color: var(--border) !important;
    }
    :root:not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder { color: #6B7280 !important; }
    :root:not([data-theme="light"]) .chop-auth-btn { color: #F5F5F5; border-color: #F5F5F5; }
    :root:not([data-theme="light"]) .chop-page-btn { color: #F5F5F5; border-color: #F5F5F5; }
}

/* MudMenu popover dark mode */
[data-theme="dark"] .mud-popover .mud-list {
    background: #1A1A1A !important;
    color: #E5E5E5 !important;
}
[data-theme="dark"] .mud-popover .mud-list-item {
    color: #E5E5E5 !important;
}
[data-theme="dark"] .mud-popover .mud-list-item:hover {
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .mud-popover {
    background: #1A1A1A !important;
    border-color: #2A2A2A !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mud-popover .mud-list {
        background: #1A1A1A !important;
        color: #E5E5E5 !important;
    }
    :root:not([data-theme="light"]) .mud-popover .mud-list-item {
        color: #E5E5E5 !important;
    }
    :root:not([data-theme="light"]) .mud-popover .mud-list-item:hover {
        background: rgba(255,255,255,0.06) !important;
    }
    :root:not([data-theme="light"]) .mud-popover {
        background: #1A1A1A !important;
        border-color: #2A2A2A !important;
    }
}

/* MudBlazor icon buttons — dark mode: force white SVG fills */
[data-theme="dark"] .mud-icon-button .mud-icon-root,
[data-theme="dark"] .mud-icon-button .mud-icon-root svg,
[data-theme="dark"] .mud-icon-button svg {
    color: #D1D5DB !important;
    fill: #D1D5DB !important;
}
[data-theme="dark"] .mud-icon-button:hover .mud-icon-root,
[data-theme="dark"] .mud-icon-button:hover .mud-icon-root svg,
[data-theme="dark"] .mud-icon-button:hover svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mud-icon-button .mud-icon-root,
    :root:not([data-theme="light"]) .mud-icon-button .mud-icon-root svg,
    :root:not([data-theme="light"]) .mud-icon-button svg {
        color: #D1D5DB !important;
        fill: #D1D5DB !important;
    }
    :root:not([data-theme="light"]) .mud-icon-button:hover .mud-icon-root,
    :root:not([data-theme="light"]) .mud-icon-button:hover svg {
        color: #FFFFFF !important;
        fill: #FFFFFF !important;
    }
}

code { color: var(--accent); }