/* assets/css/theme-overrides.css * Light-theme global overrides + topbar theme-toggle button styles. * * The portal is built dark-first. This file is loaded LAST in the * cascade so light-mode rules win when [data-theme="light"] is on * . Dark stays the existing tokens.css default — no override * needed for it. */ /* ── Theme toggle button in the topbar ──────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-right: 4px; background: transparent; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: inherit; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 156, 0, .55); } .theme-toggle__icon { font-size: 14px; line-height: 1; } .theme-toggle__label { letter-spacing: .04em; } /* ── Light theme: "banishing blue" global rules ─────────────────── */ html[data-theme="light"] { color-scheme: light; } html[data-theme="light"] body { /* "banishing blue" — deep navy at top fading through sky into white */ background: linear-gradient(180deg, #0b1f3a 0%, #173468 8%, #2c5aaf 20%, #5d96e3 38%, #b3d3f6 58%, #e6f0fb 80%, #ffffff 100%) fixed; color: #0f172a; } /* Topbar + sidebar take on a frosted-white look in light mode */ html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .92); color: #0f172a; border-bottom: 1px solid rgba(15, 23, 42, .08); backdrop-filter: blur(14px); } html[data-theme="light"] .topbar__title, html[data-theme="light"] .topbar__user-name { color: #0f172a; } html[data-theme="light"] .topbar__crumbs, html[data-theme="light"] .topbar__user-role { color: #64748b; } html[data-theme="light"] .sidebar { background: rgba(255, 255, 255, .92); color: #0f172a; border-right: 1px solid rgba(15, 23, 42, .08); backdrop-filter: blur(14px); } html[data-theme="light"] .sidebar a, html[data-theme="light"] .sidebar__link, html[data-theme="light"] .sidebar__group { color: #334155; } html[data-theme="light"] .sidebar a:hover, html[data-theme="light"] .sidebar__link.is-active { color: #ea580c; background: rgba(234, 88, 12, .08); } /* Cards, surfaces, badges: invert dark→light */ html[data-theme="light"] .card, html[data-theme="light"] .my-tile, html[data-theme="light"] .bp-tile, html[data-theme="light"] .ret-card, html[data-theme="light"] .bs-summary__cell, html[data-theme="light"] .stat { background: rgba(255, 255, 255, .92); color: #0f172a; border-color: rgba(15, 23, 42, .08); box-shadow: 0 10px 30px rgba(15, 23, 42, .08); } html[data-theme="light"] .my-tile__label, html[data-theme="light"] .bp-tile__lbl, html[data-theme="light"] .stat__label, html[data-theme="light"] .muted { color: #64748b; } html[data-theme="light"] .my-tile__value, html[data-theme="light"] .bp-tile__val, html[data-theme="light"] .stat__value { color: #0f172a; } /* Buttons in light mode keep their orange identity but lose dark shadows */ html[data-theme="light"] .btn3d--primary, html[data-theme="light"] .btn--violet { background: linear-gradient(135deg, #ea580c, #f97316); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(234, 88, 12, .25); } html[data-theme="light"] .btn3d--ghost { background: rgba(15, 23, 42, .04); color: #0f172a; border-color: rgba(15, 23, 42, .12); } html[data-theme="light"] .btn3d--ghost:hover { background: rgba(15, 23, 42, .08); } /* Tables in light mode */ html[data-theme="light"] .data, html[data-theme="light"] table.data { background: rgba(255, 255, 255, .92); color: #0f172a; } html[data-theme="light"] .data th { background: rgba(15, 23, 42, .04); color: #475569; border-bottom: 1px solid rgba(15, 23, 42, .08); } html[data-theme="light"] .data td { border-bottom: 1px solid rgba(15, 23, 42, .04); color: #0f172a; } html[data-theme="light"] .data tr:hover { background: rgba(234, 88, 12, .03); } /* Inputs / selects / textareas */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff; color: #0f172a; border: 1px solid rgba(15, 23, 42, .14); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #94a3b8; } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { border-color: #ea580c; box-shadow: 0 0 0 3px rgba(234, 88, 12, .18); outline: 0; } /* The /my hero stays dark even in light theme — it IS the welcome. * The welcome-hub.css file already swaps the hero gradient via its * --wh-hero-bg token. */ /* Make the calendar grid readable in light mode */ html[data-theme="light"] .cal-cell { background: rgba(255, 255, 255, .92); color: #0f172a; border-color: rgba(15, 23, 42, .10); } html[data-theme="light"] .cal-cell__num { color: #0f172a; } html[data-theme="light"] .cal-grid__hdr { color: #64748b; } html[data-theme="light"] .cal-cell.is-today { background: linear-gradient(180deg, rgba(234, 88, 12, .10), #fff); } html[data-theme="light"] .cal-side { background: #fff; color: #0f172a; border-color: rgba(15, 23, 42, .12); }