/* ════════════════════════════════════════════════════════════════════
   Global theme overrides — loaded on EVERY page after that page's own
   stylesheets and inline <style> blocks. Defines the same semantic
   tokens as style.css so cross-page consistency is automatic, then
   uses targeted overrides (with !important where needed) to flip
   any inline-styled chrome into Light mode.

   Supported pages: profile, admin, workspace, welcome, landing,
   login, portfolio, pricing — plus the main board (which already
   uses tokens directly).
   ════════════════════════════════════════════════════════════════════ */

:root {
    --bg-app:          #0e1320;
    --bg-chrome:       #0b1020;
    --bg-chrome-2:     rgba(11,16,32,0.72);
    --bg-elevated:     #1f2329;
    --bg-elevated-2:   #181c22;
    --bg-list:         #1d2125;
    --bg-card:         #22272b;
    --bg-card-hover:   #2a2f33;
    --bg-input:        rgba(255,255,255,0.04);
    --bg-input-focus:  rgba(255,255,255,0.07);
    --bg-hover:        rgba(255,255,255,0.06);
    --bg-active:       rgba(255,255,255,0.10);

    --text-strong:  #ffffff;
    --text-default: #c5cdd6;
    --text-muted:   #8b949e;
    --text-faint:   #6b7280;
    --text-on-accent: #ffffff;

    --border-subtle:  rgba(255,255,255,0.06);
    --border-default: rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.18);

    --accent:         #579dff;
    --accent-hover:   #85b8ff;
    --accent-soft-bg: rgba(87,157,255,0.10);
    --accent-border:  rgba(87,157,255,0.35);
    --accent-grad:    linear-gradient(180deg, #2c7be5 0%, #1e63c8 100%);
    --accent-grad-hover: linear-gradient(180deg, #3a87ec 0%, #2570d2 100%);

    --owner:          #f5b428;
    --owner-bg:       rgba(245,180,40,0.10);
    --owner-border:   rgba(245,180,40,0.35);

    --success:        #2bb673;
    --warning:        #f5b428;
    --danger:         #eb5a46;

    --shadow-1: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-2: 0 4px 14px rgba(0,0,0,0.4);
    --shadow-3: 0 16px 40px rgba(0,0,0,0.55);
}

html[data-theme="light"] {
    --bg-app:         #f4f5f7;
    --bg-chrome:      #ffffff;
    --bg-chrome-2:    rgba(255,255,255,0.85);
    --bg-elevated:    #ffffff;
    --bg-elevated-2:  #f4f5f7;
    --bg-list:        #ebecf0;
    --bg-card:        #ffffff;
    --bg-card-hover:  #fafbfc;
    --bg-input:       #ffffff;
    --bg-input-focus: #ffffff;
    --bg-hover:       rgba(9,30,66,0.06);
    --bg-active:      rgba(9,30,66,0.10);

    --text-strong:    #091e42;
    --text-default:   #172b4d;
    --text-muted:     #5e6c84;
    --text-faint:     #97a0af;
    --text-on-accent: #ffffff;

    --border-subtle:  rgba(9,30,66,0.06);
    --border-default: rgba(9,30,66,0.12);
    --border-strong:  rgba(9,30,66,0.20);

    --accent:         #0052cc;
    --accent-hover:   #0747a6;
    --accent-soft-bg: rgba(0,82,204,0.08);
    --accent-border:  rgba(0,82,204,0.25);
    --accent-grad:    linear-gradient(180deg, #0052cc 0%, #0747a6 100%);
    --accent-grad-hover: linear-gradient(180deg, #0747a6 0%, #094593 100%);

    --owner:          #b76e00;
    --owner-bg:       rgba(245,180,40,0.14);
    --owner-border:   rgba(245,180,40,0.55);

    --success:        #00875a;
    --warning:        #ff8b00;
    --danger:         #de350b;

    --shadow-1: 0 1px 2px rgba(9,30,66,0.06);
    --shadow-2: 0 4px 12px rgba(9,30,66,0.12);
    --shadow-3: 0 16px 40px rgba(9,30,66,0.18);
}

/* ── Light-mode overrides for shared chrome across pages ─────────── */
html[data-theme="light"] body {
    background: var(--bg-app) !important;
    color: var(--text-default) !important;
}

/* Board sub-header (`.header-board`) follows the app theme — light bg
   in light mode, dark in dark mode — so it picks up the body palette
   for hierarchy on each board view. */
html[data-theme="light"] .header.header-board {
    background-color: var(--bg-chrome) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    color: var(--text-default) !important;
}

/* Brand-bar overrides moved to the very end of this file so they
   sit AFTER the generic light-mode form-input rule (around line 220).
   See the block tagged "Brand top bar — ALWAYS dark" at the bottom. */

/* Sidebars */
html[data-theme="light"] .profile-sidebar,
html[data-theme="light"] .admin-sidebar,
html[data-theme="light"] [class*="sidebar"]:not([class*="board-"]):not(.cd-sidebar) {
    background: var(--bg-elevated) !important;
    border-right: 1px solid var(--border-subtle) !important;
    color: var(--text-default) !important;
}
html[data-theme="light"] .sidebar-item,
html[data-theme="light"] [class*="sidebar-item"] { color: var(--text-default) !important; }
html[data-theme="light"] .sidebar-item:hover,
html[data-theme="light"] [class*="sidebar-item"]:hover { background: var(--bg-hover) !important; color: var(--text-strong) !important; }
html[data-theme="light"] .sidebar-item.active,
html[data-theme="light"] [class*="sidebar-item"].active { background: var(--accent-soft-bg) !important; color: var(--accent) !important; }
html[data-theme="light"] .sidebar-section-label,
html[data-theme="light"] [class*="sidebar"] [class*="section"],
html[data-theme="light"] [class*="sidebar"] [class*="label"] { color: var(--text-muted) !important; }
html[data-theme="light"] .sidebar-divider { background: var(--border-subtle) !important; }

/* Form inputs everywhere */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-default) !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft-bg) !important;
    outline: none !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--text-muted) !important; }

/* Generic cards / panels / sections */
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] [class*="-card"]:not(.device-card):not(.theme-card):not(.share-pending-pill),
html[data-theme="light"] [class*="-panel"],
html[data-theme="light"] [class*="-section"] {
    color: var(--text-default);
}
html[data-theme="light"] .ab-section,
html[data-theme="light"] .ab-ws-block,
html[data-theme="light"] .ab-board-tile {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-default) !important;
}
html[data-theme="light"] .ab-board-tile-name,
html[data-theme="light"] .ab-section-title-xl,
html[data-theme="light"] .ab-ws-name { color: var(--text-strong) !important; }
html[data-theme="light"] .ab-board-sub,
html[data-theme="light"] .ab-empty { color: var(--text-muted) !important; }

/* Buttons */
html[data-theme="light"] .btn-back,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] [class*="btn-secondary"] {
    background: var(--bg-hover) !important;
    color: var(--text-default) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .btn-back:hover,
html[data-theme="light"] .btn-secondary:hover { background: var(--bg-active) !important; color: var(--text-strong) !important; }
html[data-theme="light"] .btn-save,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] [class*="btn-primary"] {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border: none !important;
}
html[data-theme="light"] .btn-save:hover,
html[data-theme="light"] .btn-primary:hover { background: var(--accent-hover) !important; }
html[data-theme="light"] .btn-danger,
html[data-theme="light"] [class*="btn-danger"] {
    background: var(--danger) !important;
    color: #fff !important;
    border: none !important;
}

/* Tables */
html[data-theme="light"] table,
html[data-theme="light"] th,
html[data-theme="light"] td { color: var(--text-default) !important; }
html[data-theme="light"] th { background: var(--bg-elevated-2) !important; border-bottom: 1px solid var(--border-default) !important; }
html[data-theme="light"] tr { border-bottom: 1px solid var(--border-subtle) !important; }
html[data-theme="light"] tr:hover { background: var(--bg-hover) !important; }

/* Modals */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-content,
html[data-theme="light"] [class*="-modal"]:not(.admin-modal-overlay):not(.cd-modal) {
    background: var(--bg-elevated) !important;
    color: var(--text-default) !important;
    border: 1px solid var(--border-default) !important;
}

/* Headings inside light-themed pages */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 { color: var(--text-strong); }

/* Activity/timeline feeds */
html[data-theme="light"] .activity-item,
html[data-theme="light"] .activity-text { color: var(--text-default) !important; }
html[data-theme="light"] .activity-time { color: var(--text-muted) !important; }
html[data-theme="light"] .activity-dot { background: var(--accent) !important; }

/* Card-list rows (used on profile "Cards" page) */
html[data-theme="light"] .card-list-item {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-default) !important;
}
html[data-theme="light"] .card-list-item:hover { background: var(--bg-card-hover) !important; }
html[data-theme="light"] .card-list-item-name { color: var(--text-strong) !important; }
html[data-theme="light"] .card-list-item-board { color: var(--text-muted) !important; }

/* Workspace dropdown / pickers in sidebars */
html[data-theme="light"] .ws-picker,
html[data-theme="light"] [class*="ws-picker"],
html[data-theme="light"] [class*="ws-dropdown"] {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-default) !important;
}

/* Workspace orchestrator (.conn-*, .ws-field-*, etc.) */
html[data-theme="light"] [class*="conn-"],
html[data-theme="light"] [class*="ws-field-"],
html[data-theme="light"] [class*="bap-"] {
    color: var(--text-default);
}
html[data-theme="light"] .conn-row,
html[data-theme="light"] .ws-field-row {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Notifications dropdown / bell */
html[data-theme="light"] .notif-dropdown,
html[data-theme="light"] [class*="notif-"]:not([class*="badge"]) { color: var(--text-default); }
html[data-theme="light"] .notif-dropdown {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-3) !important;
}

/* Auth pages (login, otp) */
html[data-theme="light"] .auth-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] [class*="auth-"]:not([class*="auth-link"]) {
    background: var(--bg-elevated) !important;
    color: var(--text-default) !important;
}

/* Welcome / onboarding */
html[data-theme="light"] .welcome-card,
html[data-theme="light"] .onboard-card,
html[data-theme="light"] [class*="welcome-"]:not([class*="-icon"]) {
    color: var(--text-default);
}

/* Pricing / landing — keep their hero gradients but flip cards/panels */
html[data-theme="light"] .pricing-card {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-default) !important;
}
html[data-theme="light"] .pricing-card h3 { color: var(--text-strong) !important; }
html[data-theme="light"] .pricing-feature { color: var(--text-default) !important; }

/* Section titles ("About", "Your Activity", "Settings", etc.) */
html[data-theme="light"] .section-title { color: var(--text-strong) !important; }

/* Orchestrator / Card Config rows (cc-* classes) */
html[data-theme="light"] .cc-row-title,
html[data-theme="light"] .cc-switch-title,
html[data-theme="light"] .cc-type-name,
html[data-theme="light"] [class^="cc-"]:not([class*="-bg"]):not([class*="btn"]) { color: var(--text-strong) !important; }
html[data-theme="light"] .cc-row-sub,
html[data-theme="light"] .cc-switch-sub { color: var(--text-muted) !important; }

/* Logo wordmark — "Xuto" span loses its dark color on white bg */
html[data-theme="light"] .top-header-left a span span:first-child,
html[data-theme="light"] .header-logo span:first-child { color: var(--text-strong) !important; }

/* Generic light-mode catch-all for inline color: rgba(255,255,255,*)
   text used as a body-paragraph color. We can't override inline element
   styles without a specific rule per element, so we add common classes. */
html[data-theme="light"] .form-label,
html[data-theme="light"] label,
html[data-theme="light"] .field-label { color: var(--text-default) !important; }

/* Workspace picker chip */
html[data-theme="light"] .workspace-pill,
html[data-theme="light"] .ws-pill,
html[data-theme="light"] [class*="ws-pill"] { color: var(--text-strong) !important; }
html[data-theme="light"] .workspace-pill *,
html[data-theme="light"] .ws-pill *,
html[data-theme="light"] [class*="ws-pill"] * { color: inherit !important; }

/* Anchor inside primary action buttons */
html[data-theme="light"] a.btn-primary,
html[data-theme="light"] .btn-primary a,
html[data-theme="light"] a[class*="btn-primary"] { color: #fff !important; }

/* Danger buttons */
html[data-theme="light"] .btn-danger,
html[data-theme="light"] [class*="btn-danger"] { color: #fff !important; }

/* Settings rows: "Due-date reminders" and similar list rows */
html[data-theme="light"] .settings-row,
html[data-theme="light"] .settings-row-label,
html[data-theme="light"] .settings-row-title,
html[data-theme="light"] .form-row > label,
html[data-theme="light"] .form-row > div:first-child { color: var(--text-strong) !important; }

/* Generic catch: any DIV/SPAN/A element with COLOR coming from inline
   `color: rgba(255,255,255,X)` won't be caught by external CSS without
   a specific selector. The best we can do for those is shade-aware
   class hooks that templates use. We've covered the main offenders
   above (.section-title, .cc-*, etc.). For anything missed, page
   maintainers can add a class and route it here. */

/* Admin dashboard stats / user rows */
html[data-theme="light"] .stat-value { color: var(--text-strong) !important; }
html[data-theme="light"] .stat-label,
html[data-theme="light"] .stat-meta { color: var(--text-muted) !important; }
html[data-theme="light"] .user-name { color: var(--text-strong) !important; }
html[data-theme="light"] .user-email { color: var(--text-muted) !important; }
html[data-theme="light"] .user-row,
html[data-theme="light"] .activity-row {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .user-row:hover { background: var(--bg-card-hover) !important; }
html[data-theme="light"] .stat-card,
html[data-theme="light"] .admin-card {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .quick-link,
html[data-theme="light"] .admin-section-title { color: var(--text-strong) !important; }
html[data-theme="light"] .admin-section-label { color: var(--text-muted) !important; }

/* Welcome / onboarding screens */
html[data-theme="light"] .welcome-card,
html[data-theme="light"] .onboard-card,
html[data-theme="light"] .step-card,
html[data-theme="light"] .feature-card {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-default) !important;
}
html[data-theme="light"] .welcome-title,
html[data-theme="light"] .step-title,
html[data-theme="light"] .feature-title { color: var(--text-strong) !important; }

/* Login / OTP — auth pages */
html[data-theme="light"] .auth-page,
html[data-theme="light"] [class*="login-"]:not([class*="-button"]),
html[data-theme="light"] [class*="signup-"]:not([class*="-button"]) {
    color: var(--text-default);
}
html[data-theme="light"] .otp-input { background: var(--bg-input) !important; color: var(--text-strong) !important; border: 1px solid var(--border-default) !important; }

/* ── Orchestrator / Workspace settings pages ───────────────────────── */
/* mx-* = members orchestrator, cc-* = card config, tpl-* = templates,
   ws-* = workspace settings, bulk-* = bulk action bar */
html[data-theme="light"] .mx-help,
html[data-theme="light"] .mx-empty-sub,
html[data-theme="light"] .mx-meta,
html[data-theme="light"] .mx-sub { color: var(--text-muted) !important; }
html[data-theme="light"] .mx-name,
html[data-theme="light"] .mx-ident-name,
html[data-theme="light"] .mx-label,
html[data-theme="light"] .mx-section-title,
html[data-theme="light"] .mx-tab,
html[data-theme="light"] .mx-tab.active,
html[data-theme="light"] .mx-row-title,
html[data-theme="light"] .mx-empty-title,
html[data-theme="light"] .mx-ident,
html[data-theme="light"] [class^="mx-name"],
html[data-theme="light"] [class^="mx-title"],
html[data-theme="light"] [class^="mx-ident"]:not(.mx-ident-meta) { color: var(--text-strong) !important; }
html[data-theme="light"] .mx-ident-meta,
html[data-theme="light"] .mx-ident-email,
html[data-theme="light"] .mx-ident-sub,
html[data-theme="light"] .mx-when { color: var(--text-muted) !important; }
html[data-theme="light"] .mx-count,
html[data-theme="light"] .mx-tab-count {
    background: var(--accent-soft-bg) !important;
    color: var(--accent) !important;
}
html[data-theme="light"] .mx-row,
html[data-theme="light"] .mx-tile {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .mx-row:hover,
html[data-theme="light"] .mx-tile:hover { background: var(--bg-card-hover) !important; }
html[data-theme="light"] .mx-btn,
html[data-theme="light"] .mx-btn-ghost,
html[data-theme="light"] .mx-action {
    background: var(--bg-hover) !important;
    color: var(--text-default) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .mx-btn-primary {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border: none !important;
}
html[data-theme="light"] .mx-btn:hover,
html[data-theme="light"] .mx-btn-ghost:hover { background: var(--bg-active) !important; color: var(--text-strong) !important; }
html[data-theme="light"] .mx-role-static,
html[data-theme="light"] .mx-role-static.mx-role-owner {
    background: var(--owner-bg) !important;
    color: var(--owner) !important;
    border: 1px solid var(--owner-border) !important;
}

/* Card-config buttons */
html[data-theme="light"] .cc-btn,
html[data-theme="light"] .cc-btn-ghost,
html[data-theme="light"] .cc-btn-sm,
html[data-theme="light"] .cc-btn-secondary {
    background: var(--bg-hover) !important;
    color: var(--text-default) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .cc-btn-primary {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border: none !important;
}
html[data-theme="light"] .cc-btn:hover { background: var(--bg-active) !important; color: var(--text-strong) !important; }
html[data-theme="light"] .cc-btn-primary:hover { background: var(--accent-hover) !important; }
html[data-theme="light"] .cc-row-sub,
html[data-theme="light"] .cc-switch-sub,
html[data-theme="light"] .cc-help { color: var(--text-muted) !important; }

/* Templates toggle (Segments / Boards) */
html[data-theme="light"] .tpl-toggle {
    background: var(--bg-hover) !important;
    color: var(--text-default) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .tpl-toggle.active {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-color: var(--accent) !important;
}
html[data-theme="light"] .tpl-toggle:hover:not(.active) { background: var(--bg-active) !important; color: var(--text-strong) !important; }

/* Workspace settings rows */
html[data-theme="light"] .ws-settings-row,
html[data-theme="light"] .ws-row {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .ws-settings-btn,
html[data-theme="light"] [class*="ws-settings-btn"] {
    background: var(--bg-hover) !important;
    color: var(--text-default) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .ws-settings-btn:hover { background: var(--bg-active) !important; color: var(--text-strong) !important; }
html[data-theme="light"] .ws-settings-title,
html[data-theme="light"] .ws-row-title { color: var(--text-strong) !important; }
html[data-theme="light"] .ws-settings-desc,
html[data-theme="light"] .ws-row-sub { color: var(--text-muted) !important; }

/* Bulk action bar */
html[data-theme="light"] .bulk-btn,
html[data-theme="light"] .bulk-btn-role {
    background: var(--bg-hover) !important;
    color: var(--text-default) !important;
    border: 1px solid var(--border-subtle) !important;
}
html[data-theme="light"] .bulk-btn-danger { background: var(--danger) !important; color: #fff !important; }

/* Generic h4/p/strong inside workspace orchestrator content */
html[data-theme="light"] .ws-content h4,
html[data-theme="light"] .ws-content > div > h4,
html[data-theme="light"] .ws-section h4,
html[data-theme="light"] .conn-section h4 { color: var(--text-strong) !important; }
html[data-theme="light"] .ws-content p,
html[data-theme="light"] .ws-section p { color: var(--text-muted) !important; }
html[data-theme="light"] .ws-content strong { color: var(--text-strong) !important; }

/* Image-picker close button */
html[data-theme="light"] .img-picker-close { color: var(--text-muted) !important; }
html[data-theme="light"] .img-picker-close:hover { color: var(--text-strong) !important; }

/* Plan badge ("Free", "Standard", "Premium") next to user name */
html[data-theme="light"] .plan-badge,
html[data-theme="light"] [class*="plan-badge"] {
    background: var(--accent-soft-bg) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-border) !important;
}
html[data-theme="light"] .role-badge.role-admin {
    background: rgba(222,53,11,0.10) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(222,53,11,0.30) !important;
}
html[data-theme="light"] .role-badge.role-owner {
    background: var(--owner-bg) !important;
    color: var(--owner) !important;
    border: 1px solid var(--owner-border) !important;
}

/* Notification rows */
html[data-theme="light"] .notification-row,
html[data-theme="light"] .notification-item {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-default) !important;
}
html[data-theme="light"] .notification-title { color: var(--text-strong) !important; }
html[data-theme="light"] .notification-time { color: var(--text-muted) !important; }

/* Workspace pill in sidebar — make text always readable */
html[data-theme="light"] .ws-current-name,
html[data-theme="light"] .workspace-name { color: var(--text-strong) !important; }


/* ════════════════════════════════════════════════════════════════════
   Brand top bar — ALWAYS dark, regardless of app theme
   ────────────────────────────────────────────────────
   The global header reads as a fixed brand chrome that anchors the
   rest of the app: clipboard + XutoAi wordmark + search + Create.
   Keeping it dark in both themes preserves brand identity.

   IMPORTANT: this block lives at the END of theme.css on purpose. Some
   light-mode rules earlier in the file (around line 220) target every
   `input[type="text"]` with `!important` and `var(--text-default)`,
   which would otherwise render the in-bar search input as dark navy
   text on a dark navy bar (invisible). Putting these rules last means
   source-order tie-breaking guarantees they win even in cascade edge
   cases where specificity calculation diverges between browsers.
   ════════════════════════════════════════════════════════════════════ */

.header-global,
.header.header-global,
html[data-theme="light"] .header-global,
html[data-theme="light"] .header.header-global {
    background-color: #0b1020 !important;
    background-image: none !important;
    color: #c9d1d9 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Search bar shell — dark glassy fill, light text. */
.header-global .header-search,
html[data-theme="light"] .header-global .header-search {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}
.header-global .header-search:hover,
html[data-theme="light"] .header-global .header-search:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.16) !important;
}
.header-global .header-search:focus-within,
html[data-theme="light"] .header-global .header-search:focus-within {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(13,148,136,0.55) !important;
}

/* Search input itself — light text on dark, transparent bg. */
.header-global .header-search input,
html[data-theme="light"] .header-global .header-search input,
html[data-theme="light"] .header-global #globalSearch {
    background: transparent !important;
    color: #e6edf3 !important;
    border: none !important;
}
.header-global .header-search input::placeholder,
html[data-theme="light"] .header-global .header-search input::placeholder,
html[data-theme="light"] .header-global #globalSearch::placeholder {
    color: #8b949e !important;
    opacity: 1 !important;
}
.header-global .header-search .hs-icon,
html[data-theme="light"] .header-global .header-search .hs-icon {
    color: #8b949e !important;
}

/* ⌘K hint chip */
.header-global .hs-kbd,
html[data-theme="light"] .header-global .hs-kbd {
    background: rgba(255,255,255,0.06) !important;
    color: #8b949e !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Icon buttons + links INSIDE the bar (clipboard, logo, bell, profile).
   Scoped to direct row children — `.header-left` and `.header-actions` —
   so popout dropdowns rendered as descendants (`.user-dropdown`,
   `.create-dropdown`, `.search-dropdown`) keep their own theming. */
html[data-theme="light"] .header-global > .header-left a,
html[data-theme="light"] .header-global > .header-left .btn-header,
html[data-theme="light"] .header-global > .header-left .btn-icon,
html[data-theme="light"] .header-global > .header-actions > .btn-header,
html[data-theme="light"] .header-global > .header-actions > .btn-icon,
html[data-theme="light"] .header-global > .header-actions > a,
html[data-theme="light"] .header-global > .header-actions > .create-menu-wrap > .btn-header,
html[data-theme="light"] .header-global > .header-actions > .user-menu-wrap > .btn-header,
html[data-theme="light"] .header-global > .header-actions > .user-menu-wrap > .user-btn {
    color: #c9d1d9 !important;
}
html[data-theme="light"] .header-global > .header-left a:hover,
html[data-theme="light"] .header-global > .header-left .btn-header:hover,
html[data-theme="light"] .header-global > .header-actions > .btn-header:hover,
html[data-theme="light"] .header-global > .header-actions > .btn-icon:hover,
html[data-theme="light"] .header-global > .header-actions > a:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}

/* Logo wordmark — keep "Xuto" white on the dark chrome in both themes. */
html[data-theme="light"] .header-global .header-left a > span > span:first-child {
    color: rgba(255,255,255,0.92) !important;
}

/* Popout dropdowns rendered as DOM-children of the dark brand bar still
   need to follow the body's app theme. Reset any inherited color so
   `.user-dropdown`, `.create-dropdown`, `.search-dropdown` render
   normally in light mode. */
html[data-theme="light"] .header-global .user-dropdown,
html[data-theme="light"] .header-global .create-dropdown,
html[data-theme="light"] .header-global .search-dropdown {
    color: var(--text-default) !important;
}
html[data-theme="light"] .header-global .user-dropdown .ud-item,
html[data-theme="light"] .header-global .user-dropdown a,
html[data-theme="light"] .header-global .user-dropdown button {
    color: var(--text-default) !important;
}
html[data-theme="light"] .header-global .user-dropdown .ud-item:hover,
html[data-theme="light"] .header-global .user-dropdown a:hover,
html[data-theme="light"] .header-global .user-dropdown button:hover {
    background: var(--bg-hover) !important;
    color: var(--text-strong) !important;
}
html[data-theme="light"] .header-global .user-dropdown .ud-label {
    color: var(--text-faint) !important;
}
html[data-theme="light"] .header-global .user-dropdown .ud-account-name {
    color: var(--text-strong) !important;
}
html[data-theme="light"] .header-global .user-dropdown .ud-account-email {
    color: var(--text-muted) !important;
}