/* ── R.E.L.A.E. Design System — Dark Theme ────────────────────────────────── */

/* ── Sidebar: force all text white (global, beats Bootstrap specificity) ───── */
.sidebar,
.sidebar nav,
.sidebar .nav-link,
.sidebar a,
.sidebar a.nav-link,
.sidebar a.nav-link:hover,
.sidebar div,
.sidebar small,
.sidebar .text-muted,
.sidebar .nav-section-label,
.sidebar .org-badge-label,
.sidebar .org-badge-name,
.sidebar .nav-footer-user,
.sidebar .role-chip,
.sidebar .nav-footer-btn {
    color: #ffffff !important;
}

/* spans that are NOT inside .navbar-brand get white; brand-accent dots keep cyan */
.sidebar span:not(.navbar-brand span) {
    color: #ffffff !important;
}

/* Brand accent dots — always cyan */
.sidebar .navbar-brand span {
    color: #06b6d4 !important;
}

/* Active nav link stays cyan */
.sidebar a.active,
.sidebar a.nav-link.active {
    color: #38bdf8 !important;
    background-color: rgba(14,165,233,.15) !important;
}

/* Muted/label text — slightly dimmer but still readable */
.sidebar .nav-section-label,
.sidebar .org-badge-label,
.sidebar .nav-footer-user {
    color: #94a3b8 !important;
}

/* Switch link stays cyan */
.sidebar .org-badge-switch {
    color: #38bdf8 !important;
}

/* Footer buttons */
.sidebar .nav-footer-btn {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

:root {
    --relae-primary:      #0ea5e9;
    --relae-primary-dk:   #0284c7;
    --relae-primary-lt:   rgba(14,165,233,.15);
    --relae-secondary:    #8b5cf6;
    --relae-secondary-lt: rgba(139,92,246,.15);
    --relae-success:      #10b981;
    --relae-success-lt:   rgba(16,185,129,.15);
    --relae-warning:      #f59e0b;
    --relae-warning-lt:   rgba(245,158,11,.15);
    --relae-danger:       #ef4444;
    --relae-danger-lt:    rgba(239,68,68,.15);

    /* Dark surfaces */
    --relae-bg:           #0b0f1a;   /* page background */
    --relae-surface:      #111827;   /* card background */
    --relae-surface-2:    #1f2937;   /* elevated card / input */
    --relae-border:       #374151;   /* borders */
    --relae-border-lt:    #1f2937;

    /* Text */
    --relae-text:         #f9fafb;   /* primary white */
    --relae-text-2:       #e5e7eb;   /* slightly dimmer */
    --relae-muted:        #9ca3af;   /* muted / labels */
    --relae-muted-dk:     #6b7280;   /* very muted */

    --relae-card-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--relae-bg);
    color: var(--relae-text);
    font-size: 15px;
}

/* ── Links ────────────────────────────────────────────────────────────────── */

a { color: var(--relae-primary); }
a:hover { color: #38bdf8; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn-primary {
    background-color: var(--relae-primary);
    border-color: var(--relae-primary);
    color: #fff;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--relae-primary-dk);
    border-color: var(--relae-primary-dk);
    color: #fff;
}

.btn-outline-primary {
    color: var(--relae-primary);
    border-color: var(--relae-primary);
    font-weight: 500;
}
.btn-outline-primary:hover {
    background-color: var(--relae-primary);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--relae-secondary);
    border-color: var(--relae-secondary);
}
.btn-outline-secondary:hover {
    background-color: var(--relae-secondary);
    color: #fff;
}

.btn-outline-danger {
    color: var(--relae-danger);
    border-color: var(--relae-danger);
}
.btn-outline-danger:hover {
    background-color: var(--relae-danger);
    color: #fff;
}

.btn-outline-light, .btn-light {
    background: var(--relae-surface-2);
    border-color: var(--relae-border);
    color: var(--relae-text);
}
.btn-outline-light:hover, .btn-light:hover {
    background: var(--relae-border);
    color: var(--relae-text);
}

.btn-sm { font-size: .8rem; }

.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 3px rgba(14,165,233,.3);
    outline: none;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */

.form-control, .form-select {
    background-color: var(--relae-surface-2);
    border: 1px solid var(--relae-border);
    color: var(--relae-text);
    border-radius: 8px;
}
.form-control:focus, .form-select:focus {
    background-color: var(--relae-surface-2);
    border-color: var(--relae-primary);
    color: var(--relae-text);
    box-shadow: 0 0 0 3px rgba(14,165,233,.2);
}
.form-control::placeholder { color: var(--relae-muted-dk); }

.form-label {
    color: var(--relae-text-2);
    font-weight: 500;
    font-size: .875rem;
}

.input-group-text {
    background: var(--relae-surface-2);
    border-color: var(--relae-border);
    color: var(--relae-muted);
}

textarea.form-control { resize: vertical; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
    background: var(--relae-surface);
    border: 1px solid var(--relae-border);
    border-radius: 12px;
    box-shadow: var(--relae-card-shadow);
    color: var(--relae-text);
}

.card-header {
    background: var(--relae-surface-2);
    border-bottom: 1px solid var(--relae-border);
    color: var(--relae-text);
    font-weight: 600;
    border-radius: 12px 12px 0 0 !important;
}

.card-footer {
    background: var(--relae-surface-2);
    border-top: 1px solid var(--relae-border);
    border-radius: 0 0 12px 12px !important;
}

.card-body { color: var(--relae-text); }

/* Card color accents */
.card-accent-primary   { border-top: 3px solid var(--relae-primary); }
.card-accent-secondary { border-top: 3px solid var(--relae-secondary); }
.card-accent-success   { border-top: 3px solid var(--relae-success); }
.card-accent-warning   { border-top: 3px solid var(--relae-warning); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.alert {
    border-radius: 8px;
    border: 1px solid;
    color: var(--relae-text);
}
.alert-success  { background: var(--relae-success-lt);  border-color: var(--relae-success);  color: #6ee7b7; }
.alert-danger   { background: var(--relae-danger-lt);   border-color: var(--relae-danger);   color: #fca5a5; }
.alert-warning  { background: var(--relae-warning-lt);  border-color: var(--relae-warning);  color: #fcd34d; }
.alert-info     { background: var(--relae-primary-lt);  border-color: var(--relae-primary);  color: #7dd3fc; }
.alert-light    { background: var(--relae-surface-2);   border-color: var(--relae-border);   color: var(--relae-muted); }

/* ── Badges ───────────────────────────────────────────────────────────────── */

.badge.bg-primary   { background-color: var(--relae-primary) !important;   color:#fff !important; }
.badge.bg-secondary { background-color: var(--relae-secondary) !important; color:#fff !important; }
.badge.bg-success   { background-color: var(--relae-success) !important;   color:#fff !important; }
.badge.bg-warning   { background-color: var(--relae-warning) !important;   color:#fff !important; }
.badge.bg-danger    { background-color: var(--relae-danger) !important;    color:#fff !important; }
.badge.bg-info      { background-color: var(--relae-primary) !important;   color:#fff !important; }
.badge.bg-light     { background-color: var(--relae-surface-2) !important; color: var(--relae-text) !important; }

/* Colored pill badges */
.pill-primary   { background: var(--relae-primary-lt);   color: #7dd3fc;  }
.pill-secondary { background: var(--relae-secondary-lt); color: #c4b5fd;  }
.pill-success   { background: var(--relae-success-lt);   color: #6ee7b7;  }
.pill-warning   { background: var(--relae-warning-lt);   color: #fcd34d;  }
.pill-danger    { background: var(--relae-danger-lt);    color: #fca5a5;  }

.pill-primary, .pill-secondary, .pill-success, .pill-warning, .pill-danger {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table {
    color: var(--relae-text);
    border-color: var(--relae-border);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--relae-text);
    border-bottom-color: var(--relae-border);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--relae-surface-2);
}
/* Override Bootstrap's .table-light thead */
.table-light,
.table > thead.table-light > tr > th,
.table > thead.table-light > tr > td,
thead.table-light {
    background-color: var(--relae-surface-2) !important;
    color: var(--relae-muted) !important;
    border-color: var(--relae-border) !important;
}
/* Striped rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.03);
    color: var(--relae-text);
}
/* Active / selected row */
.table-active > td, .table-active > th {
    background-color: var(--relae-surface-2) !important;
}

/* ── List groups ──────────────────────────────────────────────────────────── */

.list-group-item {
    background-color: var(--relae-surface);
    border-color: var(--relae-border);
    color: var(--relae-text);
}
.list-group-item-action:hover {
    background-color: var(--relae-surface-2);
    color: var(--relae-text);
}

/* ── Modals ───────────────────────────────────────────────────────────────── */

.modal-content {
    background: var(--relae-surface);
    border-color: var(--relae-border);
    color: var(--relae-text);
}
.modal-header, .modal-footer {
    border-color: var(--relae-border);
}

/* ── Dropdowns ────────────────────────────────────────────────────────────── */

.dropdown-menu {
    background: var(--relae-surface);
    border-color: var(--relae-border);
}
.dropdown-item {
    color: var(--relae-text);
}
.dropdown-item:hover {
    background: var(--relae-surface-2);
    color: var(--relae-text);
}

/* ── Progress ─────────────────────────────────────────────────────────────── */

.progress {
    background-color: var(--relae-border);
    border-radius: 99px;
    height: 6px;
}
.progress-bar {
    background: linear-gradient(90deg, var(--relae-primary), var(--relae-secondary));
    border-radius: 99px;
}

/* ── Text utilities ───────────────────────────────────────────────────────── */

.text-muted  { color: var(--relae-muted) !important; }
.text-white  { color: #fff !important; }
.text-dark   { color: var(--relae-text) !important; }
.text-primary { color: var(--relae-primary) !important; }

/* ── HR ───────────────────────────────────────────────────────────────────── */

hr { border-color: var(--relae-border); opacity: 1; }

/* ── Page structure ───────────────────────────────────────────────────────── */

.page-accent {
    height: 3px;
    background: linear-gradient(90deg, var(--relae-primary) 0%, var(--relae-secondary) 100%);
    margin-bottom: 1.5rem;
}

.page-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--relae-border);
}
.page-header h2 {
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    color: var(--relae-text);
}
.page-header p {
    color: var(--relae-muted);
    margin: .3rem 0 0 0;
    font-size: .875rem;
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */

.stat-card {
    background: var(--relae-surface);
    border: 1px solid var(--relae-border);
    border-left: 4px solid var(--relae-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--relae-card-shadow);
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--relae-text);
}
.stat-card .stat-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: .35rem;
    color: var(--relae-muted);
}

.stat-card.primary   { border-left-color: var(--relae-primary);   }
.stat-card.primary   .stat-value { color: var(--relae-primary); }
.stat-card.secondary { border-left-color: var(--relae-secondary); }
.stat-card.secondary .stat-value { color: var(--relae-secondary); }
.stat-card.success   { border-left-color: var(--relae-success);   }
.stat-card.success   .stat-value { color: var(--relae-success); }
.stat-card.warning   { border-left-color: var(--relae-warning);   }
.stat-card.warning   .stat-value { color: var(--relae-warning); }

/* ── Section headers ──────────────────────────────────────────────────────── */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.section-header h5 {
    font-weight: 700;
    margin: 0;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--relae-muted);
}

/* ── Quick actions ────────────────────────────────────────────────────────── */

.quick-action {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--relae-surface);
    border: 1px solid var(--relae-border);
    border-radius: 10px;
    padding: .65rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--relae-text-2);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: var(--relae-card-shadow);
}
.quick-action:hover {
    border-color: var(--relae-primary);
    box-shadow: 0 0 0 3px rgba(14,165,233,.2);
    color: var(--relae-primary);
    background: var(--relae-surface-2);
    text-decoration: none;
}
.quick-action .qa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Validation ───────────────────────────────────────────────────────────── */

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

/* ── Blazor internals ─────────────────────────────────────────────────────── */

.blazor-error-boundary {
    background: #7f1d1d;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fca5a5;
}
.blazor-error-boundary::after { content: "An error has occurred." }

#blazor-error-ui {
    background: #1f2937;
    color: #9ca3af;
    border-top: 1px solid var(--relae-border);
    bottom: 0;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }
code { color: #67e8f9; background: var(--relae-surface-2); padding: .1rem .35rem; border-radius: 4px; }

/* Spinner */
.spinner-border { color: var(--relae-primary) !important; }

/* Close button */
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }


/* ── Light Mode ───────────────────────────────────────────────────────────── */

html[data-theme="light"] {
    --relae-bg:        #f1f5f9;
    --relae-surface:   #ffffff;
    --relae-surface-2: #f8fafc;
    --relae-border:    #e2e8f0;
    --relae-border-lt: #f1f5f9;
    --relae-text:      #0f172a;
    --relae-text-2:    #1e293b;
    --relae-muted:     #64748b;

    color-scheme: light;
}

/* Page shell */
html[data-theme="light"] body,
html[data-theme="light"] .page,
html[data-theme="light"] main,
html[data-theme="light"] .content {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Top bar */
html[data-theme="light"] .top-row {
    background-color: #e2e8f0 !important;
    border-bottom: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] .top-row a {
    color: #334155 !important;
}

/* Cards / surfaces built with CSS variables — pick up automatically */
html[data-theme="light"] .card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .card-header {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Modals */
html[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Inputs */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 .2rem rgba(14,165,233,.2) !important;
}
html[data-theme="light"] .form-control::placeholder {
    color: #94a3b8 !important;
}

/* Tables */
html[data-theme="light"] .table {
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .table th,
html[data-theme="light"] .table td {
    border-color: #e2e8f0 !important;
}

/* Common inline-bg overrides for page content */
html[data-theme="light"] [style*="background:#0a0f1e"],
html[data-theme="light"] [style*="background: #0a0f1e"] {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
html[data-theme="light"] [style*="background:#0b0f1a"],
html[data-theme="light"] [style*="background: #0b0f1a"],
html[data-theme="light"] [style*="background-color:#0b0f1a"] {
    background-color: #f1f5f9 !important;
}
html[data-theme="light"] [style*="background:#111827"],
html[data-theme="light"] [style*="background: #111827"],
html[data-theme="light"] [style*="background-color:#111827"] {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
html[data-theme="light"] [style*="background:#1f2937"],
html[data-theme="light"] [style*="background: #1f2937"],
html[data-theme="light"] [style*="background-color:#1f2937"] {
    background-color: #f8fafc !important;
}
html[data-theme="light"] [style*="background:#161e2e"] {
    background-color: #f1f5f9 !important;
}
html[data-theme="light"] [style*="background:#0f1e30"] {
    background-color: #eff6ff !important;
}
html[data-theme="light"] [style*="background:#0f2030"] {
    background-color: #eff6ff !important;
}
html[data-theme="light"] [style*="background:#1a0f2e"] {
    background-color: #f5f3ff !important;
}

/* Common dark text overrides */
html[data-theme="light"] [style*="color:#f9fafb"],
html[data-theme="light"] [style*="color: #f9fafb"] { color: #0f172a !important; }
html[data-theme="light"] [style*="color:#e5e7eb"],
html[data-theme="light"] [style*="color: #e5e7eb"] { color: #1e293b !important; }
html[data-theme="light"] [style*="color:#d1d5db"],
html[data-theme="light"] [style*="color: #d1d5db"] { color: #334155 !important; }
html[data-theme="light"] [style*="color:#9ca3af"],
html[data-theme="light"] [style*="color: #9ca3af"] { color: #64748b !important; }
html[data-theme="light"] [style*="color:#6b7280"],
html[data-theme="light"] [style*="color: #6b7280"] { color: #64748b !important; }
html[data-theme="light"] [style*="color:#4b5563"],
html[data-theme="light"] [style*="color: #4b5563"] { color: #475569 !important; }

/* Borders */
html[data-theme="light"] [style*="border:1px solid #1f2937"],
html[data-theme="light"] [style*="border: 1px solid #1f2937"] { border-color: #e2e8f0 !important; }
html[data-theme="light"] [style*="border:1px solid #374151"],
html[data-theme="light"] [style*="border: 1px solid #374151"] { border-color: #cbd5e1 !important; }
html[data-theme="light"] [style*="border:1px solid #1e2d45"],
html[data-theme="light"] [style*="border: 1px solid #1e2d45"] { border-color: #e2e8f0 !important; }
html[data-theme="light"] [style*="border-top:1px solid #1e2d45"],
html[data-theme="light"] [style*="border-top: 1px solid #1e2d45"] { border-top-color: #e2e8f0 !important; }
html[data-theme="light"] [style*="border-bottom:1px solid #1f2937"] { border-bottom-color: #e2e8f0 !important; }
html[data-theme="light"] [style*="border-bottom:1px solid #374151"] { border-bottom-color: #cbd5e1 !important; }

/* Homepage feature cards */
html[data-theme="light"] [style*="background:rgba(255,255,255,.03)"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Homepage text overrides */
html[data-theme="light"] [style*="color:#94a3b8"],
html[data-theme="light"] [style*="color: #94a3b8"] { color: #475569 !important; }
html[data-theme="light"] [style*="color:#f8fafc"],
html[data-theme="light"] [style*="color: #f8fafc"] { color: #0f172a !important; }
html[data-theme="light"] [style*="color:#e2e8f0"],
html[data-theme="light"] [style*="color: #e2e8f0"] { color: #334155 !important; }

/* Homepage Sign In button */
html[data-theme="light"] [style*="background:rgba(255,255,255,.06)"] {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Dropdown-style containers */
html[data-theme="light"] .dropdown-menu {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .dropdown-item {
    color: #0f172a !important;
}
html[data-theme="light"] .dropdown-item:hover {
    background-color: #f1f5f9 !important;
}

/* Close button fix for light */
html[data-theme="light"] .btn-close {
    filter: none;
}

/* Theme toggle button */
.theme-toggle-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .25rem .4rem;
    transition: border-color .15s, background .15s;
    color: #ffffff;
    opacity: .8;
}
.theme-toggle-btn:hover {
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
    opacity: 1;
}
html[data-theme="light"] .theme-toggle-btn {
    color: #334155;
}

/* ── Chat page — light mode overrides ────────────────────────────────────────
   Chat.razor uses hardcoded hex colours in a scoped <style> block (not inline
   styles and not CSS variables), so they are not picked up by the attribute
   selectors above. These class-level overrides handle the chat UI explicitly. */

html[data-theme="light"] .chat-sidebar {
    background: #f8fafc !important;
    border-right-color: #e2e8f0 !important;
}
html[data-theme="light"] .chat-sidebar-header {
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
    background: #f8fafc !important;
}
html[data-theme="light"] .chat-section-label {
    color: #94a3b8 !important;
}
html[data-theme="light"] .chat-channel-btn {
    color: #475569 !important;
}
html[data-theme="light"] .chat-channel-btn:hover {
    background: rgba(0,0,0,.04) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .chat-channel-btn.active {
    background: rgba(14,165,233,.12) !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .chat-avatar-sm {
    background: #e2e8f0 !important;
    color: #475569 !important;
}
html[data-theme="light"] .chat-main {
    background: #ffffff !important;
}
html[data-theme="light"] .chat-main-header {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .chat-messages {
    background: #ffffff !important;
}
html[data-theme="light"] .chat-msg-avatar {
    background: #dbeafe !important;
    color: #1e40af !important;
}
html[data-theme="light"] .chat-msg-me .chat-msg-avatar {
    background: #dcfce7 !important;
    color: #166534 !important;
}
html[data-theme="light"] .chat-msg-name {
    color: #475569 !important;
}
html[data-theme="light"] .chat-msg-time {
    color: #94a3b8 !important;
}
html[data-theme="light"] .chat-msg-text {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .chat-msg-me .chat-msg-text {
    background: #dbeafe !important;
    color: #1e3a5f !important;
}
html[data-theme="light"] .chat-msg-text.deleted {
    color: #94a3b8 !important;
}
html[data-theme="light"] .chat-input-area {
    background: #f8fafc !important;
    border-top-color: #e2e8f0 !important;
}
html[data-theme="light"] .chat-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .chat-input:focus {
    background: #ffffff !important;
    border-color: #0ea5e9 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .chat-attach-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
html[data-theme="light"] .chat-attach-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .chat-pending-attach {
    background: #f1f5f9 !important;
}
html[data-theme="light"] .chat-pending-name {
    color: #475569 !important;
}
html[data-theme="light"] .chat-attach-file {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .chat-attach-file:hover {
    background: #e2e8f0 !important;
    color: #0369a1 !important;
}

/* ── Sidebar — light mode override ──────────────────────────────────────────
   NavMenu sidebar has many !important white overrides that fight light mode.
   These rules specifically override for light theme.                         */

html[data-theme="light"] .sidebar,
html[data-theme="light"] .sidebar nav,
html[data-theme="light"] .sidebar .nav-link,
html[data-theme="light"] .sidebar a,
html[data-theme="light"] .sidebar div,
html[data-theme="light"] .sidebar small,
html[data-theme="light"] .sidebar span:not(.navbar-brand span) {
    color: #1e293b !important;
}
html[data-theme="light"] .sidebar {
    background: #f8fafc !important;
    border-right-color: #e2e8f0 !important;
}
html[data-theme="light"] .sidebar .nav-section-label,
html[data-theme="light"] .sidebar .org-badge-label,
html[data-theme="light"] .sidebar .nav-footer-user {
    color: #64748b !important;
}
html[data-theme="light"] .sidebar .nav-footer-btn {
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
}
html[data-theme="light"] .sidebar a.active,
html[data-theme="light"] .sidebar a.nav-link.active {
    color: #0284c7 !important;
    background-color: rgba(14,165,233,.12) !important;
}
html[data-theme="light"] .sidebar .text-muted {
    color: #64748b !important;
}

/* Top nav bar (MainLayout) light mode */
html[data-theme="light"] .relae-topnav {
    background: #f8fafc !important;
    border-bottom-color: #e2e8f0 !important;
}
html[data-theme="light"] .relae-tnl {
    color: #475569 !important;
}
html[data-theme="light"] .relae-tnl:hover {
    color: #0f172a !important;
    background: rgba(0,0,0,.04) !important;
}
html[data-theme="light"] .relae-topnav-toggle {
    color: #475569 !important;
}
html[data-theme="light"] .relae-topnav-toggle:hover {
    background: rgba(0,0,0,.05) !important;
}

/* Bottom bar light mode */
html[data-theme="light"] .bottom-bar {
    background: #f8fafc !important;
    border-top-color: #e2e8f0 !important;
}
html[data-theme="light"] .bb-btn {
    color: #475569 !important;
}
html[data-theme="light"] .bb-btn:hover,
html[data-theme="light"] .bb-btn.active {
    background: rgba(14,165,233,.1) !important;
    color: #0284c7 !important;
}
html[data-theme="light"] .bb-panel {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.1) !important;
}
html[data-theme="light"] .bb-panel-header {
    background: #f1f5f9 !important;
    border-bottom-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html[data-theme="light"] .bb-backdrop {
    background: rgba(0,0,0,.15) !important;
}
html[data-theme="light"] .bb-panel-body {
    color: #0f172a !important;
}
/* Bottom bar chat content */
html[data-theme="light"] .bb-chat-sender  { color: #0f172a !important; }
html[data-theme="light"] .bb-chat-time    { color: #64748b !important; }
html[data-theme="light"] .bb-chat-content { color: #1e293b !important; }
html[data-theme="light"] .bb-chat-avatar  { background: #e2e8f0 !important; color: #475569 !important; }
html[data-theme="light"] .bb-chat-input   { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
html[data-theme="light"] .bb-chat-send-row { border-top-color: #e2e8f0 !important; }
/* Bottom bar notifications */
html[data-theme="light"] .bb-notif-item   { color: #0f172a !important; }
html[data-theme="light"] .bb-notif-unread { background: rgba(14,165,233,.07) !important; border-left-color: #0ea5e9 !important; }
/* Bottom bar task tree */
html[data-theme="light"] .bb-tree-title   { color: #0f172a !important; }
html[data-theme="light"] .bb-tree-item:hover { background: rgba(0,0,0,.04) !important; }

/* ── Theme-aware logo switching ── */
.relae-logo-dark  { display: block !important; }
.relae-logo-light { display: none  !important; }
html[data-theme="light"] .relae-logo-dark  { display: none  !important; }
html[data-theme="light"] .relae-logo-light { display: block !important; }

/* ── Utility animations ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}