/* ====================================================================
   AIVory Light Mode Theme
   Design language matches aivory.net (Hugo website)

   Core idea: warm cream canvas, solid paper cards (one elevation level,
   no translucent stacking), hairline ink borders, soft layered shadows,
   Guard gradient accents, rainbow brand hairline at the very top.

   Tokens (from aivory-hugo design system):
     Page BG:        #FAF6EF (cream)
     Card BG:        #FFFDF7 (paper)
     Text Primary:   #1a1a2e   Ink: #0D0D0E
     Text Secondary: #4a5568
     Text Muted:     #718096
     Hairline:       rgba(13,13,14,0.08)
     Hairline hover: rgba(13,13,14,0.14)
     Shadow card:    0 1px 2px rgba(13,13,14,.04), 0 8px 24px rgba(13,13,14,.06)
     Shadow float:   0 2px 4px rgba(13,13,14,.06), 0 16px 40px rgba(13,13,14,.10)
     Guard accents:  #6B8AFF blue, #51B5BF teal, #7C3AED violet, #B57AFF purple
   ==================================================================== */

/* =========================
   1. CANVAS & BRAND ACCENTS
   ========================= */
body.body--light {
    color: #1a1a2e;
    background:
        radial-gradient(55% 42% at 88% -8%, rgba(107,138,255,0.10), transparent 62%),
        radial-gradient(45% 38% at 8% -6%, rgba(244,140,136,0.10), transparent 58%),
        #FAF6EF !important;
    background-attachment: fixed;
}
body.body--light .q-page-container,
body.body--light .q-page,
body.body--light .q-layout {
    background: transparent !important;
}

/* Rainbow brand hairline at the very top of the viewport (as on aivory.net) */
body.body--light::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #F59E0B 0%, #F97316 15%, #EF4444 30%, #7C3AED 50%,
        #6B8AFF 65%, #51B5BF 80%, #059669 100%);
    z-index: 4999;
    pointer-events: none;
}

/* Theme variable overrides */
body.body--light {
    --text-faint: rgba(13,13,14,0.38);
    --aiv-border-color: rgba(13,13,14,0.08);
    --color-contrast-4: #4a5568;
    --card-bg-glass: #FFFDF7;
    --card-border-glass: rgba(13,13,14,0.08);
    --card-border-glass-hover: rgba(13,13,14,0.14);
    --card-shadow-base: 0 1px 2px rgba(13,13,14,0.04), 0 8px 24px rgba(13,13,14,0.06);
    --card-shadow-hover: 0 2px 4px rgba(13,13,14,0.06), 0 16px 40px rgba(13,13,14,0.10);
    --bg-interactive: rgba(107,138,255,0.08);
    --bg-interactive-hover: rgba(107,138,255,0.12);
    --color-q-dark: #ffffff;
}

/* =========================
   2. GLOBAL TEXT OVERRIDES
   ========================= */
body.body--light .nicegui-content .text-white,
body.body--light .q-page-container .text-white {
    color: #1a1a2e !important;
}
body.body--light .nicegui-content .text-gray-300 {
    color: #718096 !important;
}
body.body--light .nicegui-content .text-gray-400,
body.body--light .q-page-container .text-gray-400 {
    color: #718096 !important;
}
body.body--light .nicegui-content .text-gray-500 {
    color: #4a5568 !important;
}

/* Theme-aware text utilities (dark defaults live in aivory.css) */
body.body--light .text-soft {
    color: #4a5568 !important;
}
body.body--light .text-faint {
    color: #718096 !important;
}

/* =========================
   3. HEADER
   ========================= */
body.body--light .q-header {
    background: rgba(255,253,247,0.88) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(13,13,14,0.08) !important;
}
body.body--light .q-header a,
body.body--light a.header-dropdown-link {
    color: #1a1a2e !important;
}
body.body--light .q-header .q-btn .q-icon {
    color: #4a5568 !important;
}
body.body--light .header-logo .q-img img {
    filter: brightness(0.15);
}

/* =========================
   4. SIDEBAR / DRAWER
   ========================= */
body.body--light .q-drawer,
body.body--light .sidebar-redesign,
body.body--light .sidebar-redesign .q-drawer__content {
    background: #FFFDF7 !important;
    border-right: 1px solid rgba(13,13,14,0.08) !important;
}
body.body--light .sidebar-redesign .q-img img {
    filter: brightness(0.15);
}
body.body--light .sb-brand-mark {
    color: #0D0D0E !important;
}
body.body--light .sb-brand-dot {
    box-shadow: 0 0 8px rgba(245,158,11,0.4);
}
body.body--light .product-head {
    color: #4a5568 !important;
}
body.body--light .product-head:hover {
    background: rgba(13,13,14,0.04) !important;
    color: #0D0D0E !important;
}
body.body--light .product-head .ico {
    opacity: 0.75;
}
body.body--light .product.active .product-head {
    color: #0D0D0E !important;
    background: linear-gradient(90deg, rgba(107,138,255,0.10), rgba(107,138,255,0) 80%) !important;
}
body.body--light .product.active .product-head .ico {
    opacity: 1;
}
body.body--light .sub {
    border-left-color: rgba(13,13,14,0.08);
}
body.body--light .product.active .sub {
    border-left-color: rgba(107,138,255,0.30);
}
body.body--light .sub-item {
    color: #718096 !important;
}
body.body--light .sub-item:hover {
    background: rgba(13,13,14,0.04) !important;
    color: #0D0D0E !important;
}
body.body--light .sub-item.active {
    background: rgba(107,138,255,0.10) !important;
    color: #0D0D0E !important;
}
body.body--light .sub-item .soon {
    color: rgba(13,13,14,0.35);
}
body.body--light .sb-foot,
body.body--light .sidebar-footer {
    border-top-color: rgba(13,13,14,0.08) !important;
}
body.body--light .foot-item {
    color: #718096 !important;
}
body.body--light .foot-item:hover {
    background: rgba(13,13,14,0.04) !important;
    color: #0D0D0E !important;
}
body.body--light .foot-item .ico {
    color: #718096 !important;
}
body.body--light .foot-item.active {
    background: rgba(107,138,255,0.08) !important;
    color: #0D0D0E !important;
}
body.body--light .foot-item.logout {
    color: #718096 !important;
}
body.body--light .foot-item.logout:hover {
    color: #dc2626 !important;
}
body.body--light .sidebar-logout {
    color: #718096 !important;
}
body.body--light .sidebar-logout:hover {
    color: #dc2626 !important;
}
body.body--light .sidebar-logout .q-icon {
    color: #718096 !important;
}

/* Menu toggle button */
body.body--light .menu-toggle .q-btn {
    background: #FFFDF7 !important;
    border-right: 1px solid rgba(13,13,14,0.08);
}
body.body--light .menu-toggle .q-btn:hover {
    background: rgba(13,13,14,0.04) !important;
}
body.body--light .menu-toggle .q-btn .q-icon {
    color: #4a5568 !important;
}

/* Sidebar menu item hover */
body.body--light .sidebar-menu-item:hover {
    background: rgba(13,13,14,0.04);
}

/* =========================
   5. CARDS - SOLID PAPER
   One elevation level: solid paper surface, hairline ink border,
   soft layered shadow, gentle lift on hover. No translucent stacking.
   ========================= */
body.body--light .q-card {
    background: #FFFDF7 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(13,13,14,0.08) !important;
    box-shadow: 0 1px 2px rgba(13,13,14,0.04), 0 8px 24px rgba(13,13,14,0.06) !important;
    color: #1a1a2e;
}
body.body--light .q-card:hover {
    border-color: rgba(13,13,14,0.14) !important;
    box-shadow: 0 2px 4px rgba(13,13,14,0.06), 0 16px 40px rgba(13,13,14,0.10) !important;
}

body.body--light .dashboard-card {
    background: #FFFDF7 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(13,13,14,0.08) !important;
    box-shadow: 0 1px 2px rgba(13,13,14,0.04), 0 8px 24px rgba(13,13,14,0.06) !important;
    color: #1a1a2e;
}
body.body--light .dashboard-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13,13,14,0.14) !important;
    box-shadow: 0 2px 4px rgba(13,13,14,0.06), 0 16px 40px rgba(13,13,14,0.10) !important;
}
body.body--light .dashboard-card--metric .metric-label {
    color: #718096;
    font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.body--light .dashboard-card--chart .chart-title {
    color: #0D0D0E;
}
body.body--light .dashboard-card--list .list-header {
    border-bottom-color: rgba(13,13,14,0.08);
    color: #0D0D0E;
}
body.body--light .dashboard-card--list .list-item {
    border-bottom-color: rgba(13,13,14,0.06);
    color: #1a1a2e;
}
body.body--light .dashboard-card--list .list-item:hover {
    background: rgba(107,138,255,0.05);
}
body.body--light .dashboard-card--clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(13,13,14,0.06), 0 18px 44px rgba(107,138,255,0.16) !important;
    border-color: rgba(107,138,255,0.40) !important;
}

/* Flat severity stats (inside project health cards) */
body.body--light .severity-stat .sev-count {
    color: #1a1a2e;
}
body.body--light .severity-stat .sev-name {
    color: #718096;
}
body.body--light .card-divider {
    border-top-color: rgba(13,13,14,0.08);
}
body.body--light .card-meta {
    color: #718096;
}

/* =========================
   6. SECTION HEADERS
   Ink headings; gradient stays reserved for numbers and accents.
   ========================= */
body.body--light .dashboard-section-header .section-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #0D0D0E;
    color: #0D0D0E;
}
body.body--light .dashboard-section-header .section-subtitle {
    color: #4a5568;
}

/* =========================
   7. DASHBOARD BADGES
   ========================= */
body.body--light .dashboard-badge--critical {
    background: rgba(236,72,153,0.10);
    color: #be185d;
    border-color: rgba(236,72,153,0.22);
}
body.body--light .dashboard-badge--high {
    background: rgba(216,97,60,0.10);
    color: #c2410c;
    border-color: rgba(216,97,60,0.22);
}
body.body--light .dashboard-badge--medium {
    background: rgba(181,122,255,0.12);
    color: #7c3aed;
    border-color: rgba(181,122,255,0.25);
}
body.body--light .dashboard-badge--low {
    background: rgba(81,181,191,0.12);
    color: #0e7490;
    border-color: rgba(81,181,191,0.25);
}
body.body--light .dashboard-badge--info {
    background: rgba(107,138,255,0.10);
    color: #4338ca;
    border-color: rgba(107,138,255,0.22);
}
body.body--light .dashboard-badge--success {
    background: rgba(16,185,129,0.10);
    color: #059669;
    border-color: rgba(16,185,129,0.22);
}

/* =========================
   8. DASHBOARD TABS
   ========================= */
body.body--light .dashboard-tabs {
    background: #FFFDF7;
    border-color: rgba(13,13,14,0.08);
}
body.body--light .dashboard-tabs .q-tab {
    color: #4a5568;
}
body.body--light .dashboard-tabs .q-tab:hover {
    background: rgba(107,138,255,0.07);
    color: #4338ca;
}
body.body--light .dashboard-tabs .q-tab--active {
    color: #fff;
}

/* =========================
   9. DASHBOARD BUTTONS
   Ink pill CTA, like the primary buttons on aivory.net
   ========================= */
body.body--light .dashboard-btn {
    background: #0D0D0E !important;
    border-color: #0D0D0E !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(13,13,14,0.18);
}
body.body--light .dashboard-btn:hover {
    background: #26262b !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(13,13,14,0.22);
}
body.body--light .dashboard-btn--teal,
body.body--light .dashboard-btn--purple {
    background: #0D0D0E !important;
    border-color: #0D0D0E !important;
}
body.body--light .dashboard-btn .text-white,
body.body--light .dashboard-btn.text-white {
    color: #ffffff !important;
}

/* =========================
   10. STATS CARD
   ========================= */
body.body--light .stats-card {
    background: #FFFDF7 !important;
    border: 1px solid rgba(13,13,14,0.08) !important;
    box-shadow: 0 1px 2px rgba(13,13,14,0.04), 0 8px 24px rgba(13,13,14,0.06);
}
body.body--light .stats-card:hover {
    border-color: rgba(13,13,14,0.14) !important;
    box-shadow: 0 2px 4px rgba(13,13,14,0.06), 0 16px 40px rgba(13,13,14,0.10);
}
body.body--light .stats-card .stats-card-label {
    color: #718096 !important;
    font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body.body--light .stats-card .stats-card-value {
    color: #0D0D0E;
}
body.body--light .stats-card .stats-card-sublabel {
    color: #718096 !important;
}

/* =========================
   11. ISSUE ROW
   ========================= */
body.body--light .issue-row {
    border-bottom-color: rgba(13,13,14,0.06);
}
body.body--light .issue-row:hover {
    background: rgba(107,138,255,0.05);
}
body.body--light .issue-title {
    color: #1a1a2e;
}
body.body--light .issue-id,
body.body--light .issue-location,
body.body--light .issue-time {
    color: #718096;
}
body.body--light .issue-type {
    color: #c2410c;
}
body.body--light .occurrence-badge {
    background: rgba(13,13,14,0.05);
    color: #4a5568;
}
body.body--light .assignee-avatar {
    background: rgba(81,181,191,0.12);
    color: #0e7490;
}
body.body--light .assignee-avatar.unassigned {
    background: rgba(13,13,14,0.05);
    color: #718096;
}

/* =========================
   12. STATUS / PRIORITY BADGES
   ========================= */
body.body--light .status-badge.open {
    background: rgba(59,130,246,0.08);
    color: #1d4ed8;
    border-color: rgba(59,130,246,0.18);
}
body.body--light .status-badge.in_progress {
    background: rgba(249,115,22,0.08);
    color: #c2410c;
    border-color: rgba(249,115,22,0.18);
}
body.body--light .status-badge.resolved {
    background: rgba(34,197,94,0.08);
    color: #059669;
    border-color: rgba(34,197,94,0.18);
}
body.body--light .status-badge.closed,
body.body--light .status-badge.wont_fix {
    background: rgba(13,13,14,0.05);
    color: #4b5563;
    border-color: rgba(13,13,14,0.12);
}
body.body--light .priority-badge.critical {
    background: rgba(239,68,68,0.08);
    color: #dc2626;
    border-color: rgba(239,68,68,0.18);
}
body.body--light .priority-badge.high {
    background: rgba(249,115,22,0.08);
    color: #c2410c;
    border-color: rgba(249,115,22,0.18);
}
body.body--light .priority-badge.medium {
    background: rgba(168,85,247,0.08);
    color: #7c3aed;
    border-color: rgba(168,85,247,0.18);
}
body.body--light .priority-badge.low {
    background: rgba(13,13,14,0.05);
    color: #4b5563;
    border-color: rgba(13,13,14,0.12);
}

/* =========================
   13. TABLES
   ========================= */
body.body--light .dashboard-table {
    background: transparent !important;
}
body.body--light .dashboard-table thead tr th {
    color: #4a5568;
    border-bottom: 1px solid rgba(13,13,14,0.10);
}
body.body--light .dashboard-table tbody tr:hover {
    background: rgba(107,138,255,0.05);
}
body.body--light .dashboard-table tbody tr td {
    color: #1a1a2e;
    border-bottom-color: rgba(13,13,14,0.05);
}

body.body--light .q-table {
    background: transparent !important;
    color: #1a1a2e;
}
body.body--light .q-table th {
    color: #4a5568 !important;
    border-bottom-color: rgba(13,13,14,0.10) !important;
}
body.body--light .q-table td {
    color: #1a1a2e;
    border-bottom-color: rgba(13,13,14,0.05) !important;
}
body.body--light .q-table tbody tr:hover td {
    background: rgba(107,138,255,0.04) !important;
}
body.body--light .q-table .q-table__top,
body.body--light .q-table .q-table__bottom {
    color: #4a5568;
    background: transparent;
}
body.body--light .q-table .q-table__bottom .q-table__control {
    color: #4a5568;
}
body.body--light .q-table .q-table__separator {
    background: rgba(13,13,14,0.08);
}

/* =========================
   14. DETAIL CARD
   ========================= */
body.body--light .detail-card {
    background: #FFFDF7 !important;
    border: 1px solid rgba(13,13,14,0.08) !important;
}
body.body--light .detail-card--accent {
    border-left: 3px solid rgba(107,138,255,0.45) !important;
}
body.body--light .detail-card .detail-card-header {
    border-bottom-color: rgba(13,13,14,0.08);
    color: #0D0D0E;
}
body.body--light .detail-card .detail-card-body {
    color: #4a5568;
}
body.body--light .detail-card .detail-card-body strong {
    color: #1a1a2e;
}
body.body--light .detail-card .detail-card-body code {
    background: rgba(107,138,255,0.08);
    color: #4338ca;
}

/* =========================
   15. SEVERITY INDICATORS
   ========================= */
body.body--light .severity-indicator-large.critical {
    background: rgba(239,68,68,0.08);
    color: #dc2626;
}
body.body--light .severity-indicator-large.high {
    background: rgba(249,115,22,0.08);
    color: #c2410c;
}
body.body--light .severity-indicator-large.medium {
    background: rgba(168,85,247,0.08);
    color: #7c3aed;
}
body.body--light .severity-indicator-large.low {
    background: rgba(13,13,14,0.05);
    color: #4b5563;
}

/* =========================
   16. EMPTY STATE
   ========================= */
body.body--light .dashboard-empty-state .empty-icon {
    color: #718096;
}
body.body--light .dashboard-empty-state .empty-title {
    color: #4a5568;
}
body.body--light .dashboard-empty-state .empty-subtitle {
    color: #718096;
}

/* =========================
   17. EXCEPTION DISPLAY
   ========================= */
body.body--light .exception-display {
    background: rgba(239,68,68,0.04);
    border-color: rgba(239,68,68,0.12);
}

/* =========================
   18. PAGE HEADER
   Gradient keyword treatment (Guard blue to violet)
   ========================= */
body.body--light .page-header-title {
    background: linear-gradient(135deg, #6B8AFF 0%, #7C3AED 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================
   19. FORM FIELDS
   ========================= */
body.body--light .q-field .q-field__control {
    background: #ffffff !important;
    border: 1px solid rgba(13,13,14,0.12) !important;
    border-radius: 0.5rem;
}
body.body--light .q-field .q-field__control::before {
    border-color: transparent !important;
}
body.body--light .q-field.q-field--focused .q-field__control {
    border-color: rgba(107,138,255,0.55) !important;
    box-shadow: 0 0 0 3px rgba(107,138,255,0.12);
}
body.body--light .q-field .q-field__label {
    color: #718096;
}
body.body--light .q-field .q-field__native,
body.body--light .q-field input,
body.body--light .q-field textarea {
    color: #1a1a2e !important;
}
body.body--light .q-select .q-field__native span {
    color: #1a1a2e !important;
}

/* Select dropdown menu */
body.body--light .q-menu {
    background: #FFFDF7 !important;
    border: 1px solid rgba(13,13,14,0.08);
    box-shadow: 0 2px 4px rgba(13,13,14,0.06), 0 16px 40px rgba(13,13,14,0.12);
}
body.body--light .q-menu .q-item {
    color: #1a1a2e;
}
body.body--light .q-menu .q-item:hover,
body.body--light .q-menu .q-item--active {
    background: rgba(107,138,255,0.07);
}

/* =========================
   20. AIV CARD / HOME CARD
   ========================= */
body.body--light .aiv-card {
    background: #FFFDF7 !important;
    border-color: rgba(13,13,14,0.08) !important;
}
body.body--light .home-card {
    --background-color: #FFFDF7;
}
body.body--light .home-card.q-card {
    background: #FFFDF7 !important;
}
body.body--light .home-card .q-icon {
    color: var(--homecard-icon-color);
}

/* =========================
   21. TABBAR
   ========================= */
body.body--light .tabbar-row {
    background-color: rgba(255,253,247,0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: rgba(13,13,14,0.08);
}
body.body--light .tabbar-row a {
    color: #718096;
}
body.body--light .tabbar-row a.tab-active,
body.body--light .tabbar-row a:hover {
    color: #0D0D0E;
}

/* =========================
   22. MUTED ICONS / SCROLLBAR
   ========================= */
body.body--light .muted-icon {
    color: #718096 !important;
}
body.body--light .aiv-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(13,13,14,0.18);
}
body.body--light .aiv-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(13,13,14,0.30);
}
body.body--light .aiv-scroll {
    scrollbar-color: rgba(13,13,14,0.18) transparent;
}

/* =========================
   23. Q-TABS (general)
   ========================= */
body.body--light .q-tabs {
    background: transparent;
}
body.body--light .q-tabs .q-tab {
    color: #4a5568;
}
body.body--light .q-tab-panels {
    background: transparent !important;
}

/* =========================
   24. QUASAR MISC
   ========================= */
body.body--light .q-item--active,
body.body--light .q-item.q-router-link--active {
    color: #1a1a2e;
}
body.body--light .q-dark:not([class*=bg-]) {
    background: #FFFDF7;
}
body.body--light .q-separator {
    background: rgba(13,13,14,0.08) !important;
}
body.body--light .q-badge {
    color: #fff;
}
body.body--light .q-btn--flat {
    color: #4a5568;
}
body.body--light .q-toggle .q-toggle__track {
    opacity: 0.7;
}

/* Dropdown button */
body.body--light .header-avatar-dropdown .q-btn-dropdown__arrow {
    color: #4a5568 !important;
}
body.body--light .q-btn-dropdown .q-btn-dropdown__arrow {
    color: #4a5568;
}

/* Dialog/Popup */
body.body--light .q-dialog__inner > .q-card {
    background: #FFFDF7 !important;
    color: #1a1a2e;
    box-shadow: 0 2px 4px rgba(13,13,14,0.08), 0 24px 64px rgba(13,13,14,0.18) !important;
}

/* Tooltip */
body.body--light .q-tooltip {
    background: #0D0D0E;
    color: #fff;
}

/* Notification */
body.body--light .q-notification {
    background: #FFFDF7;
    color: #1a1a2e;
    border: 1px solid rgba(13,13,14,0.08);
    box-shadow: 0 2px 4px rgba(13,13,14,0.06), 0 16px 40px rgba(13,13,14,0.14);
}

/* =========================
   25. PRICING / PURCHASE PAGE
   Paper tiers on cream; featured tier gets soft lavender wash.
   ========================= */
body.body--light .purchase-banner {
    background: #FFFDF7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(13,13,14,0.04), 0 8px 24px rgba(13,13,14,0.06);
}
body.body--light .purchase-banner .banner-title {
    color: #0D0D0E;
}
body.body--light .purchase-banner .banner-subtitle {
    color: #4a5568;
}
body.body--light .billing-toggle {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(13,13,14,0.05);
}
body.body--light .billing-toggle .q-btn {
    color: #4a5568;
}
body.body--light .billing-toggle .q-btn.text-white {
    color: #fff !important;
}
body.body--light .pricing-tier {
    background: #FFFDF7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(13,13,14,0.04), 0 8px 24px rgba(13,13,14,0.06);
}
body.body--light .pricing-tier:hover {
    box-shadow: 0 2px 4px rgba(13,13,14,0.06), 0 16px 40px rgba(13,13,14,0.10);
}
body.body--light .pricing-tier .tier-name,
body.body--light .pricing-tier .tier-price {
    color: #0D0D0E;
}
body.body--light .pricing-tier .tier-period,
body.body--light .pricing-tier .tier-tagline {
    color: #718096;
}
body.body--light .pricing-tier .tier-feature {
    color: #4a5568;
}
body.body--light .pricing-tier--featured {
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
    box-shadow: 0 8px 24px rgba(107,138,255,0.15);
}
body.body--light .pricing-tier--featured .tier-feature {
    color: #1a1a2e;
}
body.body--light .plan-card,
body.body--light .pricing-card {
    background: #FFFDF7 !important;
    border: 1px solid rgba(13,13,14,0.08) !important;
    color: #1a1a2e;
}

/* =========================
   26. INLINE STYLE OVERRIDES
   Catches common inline dark-mode patterns
   ========================= */

/* Subtle white-tint boxes become ink-tint (any 0.0x white background) */
body.body--light .q-card [style*="rgba(255, 255, 255, 0.05)"],
body.body--light .q-card [style*="rgba(255,255,255,0.05)"],
body.body--light [style*="background: rgba(255,255,255,0.0"],
body.body--light [style*="background: rgba(255, 255, 255, 0.0"],
body.body--light [style*="background:rgba(255,255,255,0.0"] {
    background: rgba(13,13,14,0.04) !important;
}

/* Dividers using white transparency */
body.body--light .q-card [style*="border-top: 1px solid rgba(255, 255, 255"] {
    border-top-color: rgba(13,13,14,0.08) !important;
}

/* Dark glass surfaces become paper */
body.body--light [style*="background: rgba(13, 22, 36"],
body.body--light [style*="background: rgba(13,22,36"],
body.body--light [style*="background:rgba(13,22,36"],
body.body--light [style*="background-color: rgba(13, 22, 36"],
body.body--light [style*="background-color: rgba(13,22,36"] {
    background: #FFFDF7 !important;
    border: 1px solid rgba(13,13,14,0.08);
}

/* Inline color: white for common containers */
body.body--light .nicegui-content [style*="color: white"],
body.body--light .nicegui-content [style*="color:#fff"],
body.body--light .nicegui-content [style*="color: #fff"],
body.body--light .nicegui-content [style*="color:white"] {
    color: #1a1a2e !important;
}

/* Inline rgba(255,255,255,X) text colors */
body.body--light .nicegui-content [style*="color: rgba(255, 255, 255"],
body.body--light .nicegui-content [style*="color: rgba(255,255,255"],
body.body--light .nicegui-content [style*="color:rgba(255,255,255"] {
    color: #4a5568 !important;
}

/* Inline rgba(0,0,0,0.X) dark boxes on light bg */
body.body--light [style*="background: rgba(0, 0, 0, 0.2"],
body.body--light [style*="background: rgba(0,0,0,0.2"],
body.body--light [style*="background: rgba(0, 0, 0, 0.25"],
body.body--light [style*="background: rgba(0,0,0,0.25"],
body.body--light [style*="background: rgba(0, 0, 0, 0.3"],
body.body--light [style*="background: rgba(0,0,0,0.3"],
body.body--light [style*="background: rgba(0, 0, 0, 0.4"],
body.body--light [style*="background: rgba(0,0,0,0.4"] {
    background: rgba(13,13,14,0.04) !important;
}

/* Inline borders using white transparency */
body.body--light .nicegui-content [style*="border"][style*="rgba(255,255,255"],
body.body--light .nicegui-content [style*="border"][style*="rgba(255, 255, 255"] {
    border-color: rgba(13,13,14,0.10) !important;
}

/* Inline backgrounds with #05010D (dark page color) */
body.body--light [style*="background-color: #05010D"],
body.body--light [style*="background: #05010D"],
body.body--light [style*="background-color:#05010D"],
body.body--light [style*="background:#05010D"] {
    background-color: #FAF6EF !important;
}

/* =========================
   27. ECHART / CODE
   ========================= */
body.body--light .nicegui-echart {
    color: #1a1a2e;
}

/* Code and terminal blocks stay dark in light mode (as on aivory.net) */
body.body--light .nicegui-code {
    background: #0c0c14;
    color: #d0d0d0;
    border: 1px solid rgba(13,13,14,0.25);
}

/* =========================
   28. DARK MODE TOGGLE
   ========================= */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
}
.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.theme-toggle-btn .ico {
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
    font-size: 1rem;
    width: 18px;
    text-align: center;
}
body.body--light .theme-toggle-btn {
    color: #718096;
}
body.body--light .theme-toggle-btn:hover {
    background: rgba(13,13,14,0.04);
    color: #0D0D0E;
}
body.body--light .theme-toggle-btn .ico {
    color: #718096;
}

/* =========================
   29. ACCOUNT PAGE / OPACITY UTILITIES
   ========================= */
body.body--light .q-card .q-card__section {
    color: #1a1a2e;
}

/* Override opacity classes that dim white text */
body.body--light .nicegui-content .opacity-60,
body.body--light .nicegui-content .opacity-70 {
    opacity: 1 !important;
    color: #718096 !important;
}

/* But keep the opacity on severity dots and decorative elements */
body.body--light .nicegui-content .q-icon.opacity-60,
body.body--light .nicegui-content .q-icon.opacity-70 {
    opacity: 0.7 !important;
    color: inherit !important;
}

/* =========================
   30. TEXT COLOR UTILITIES
   ========================= */
body.body--light .text-color-reset {
    color: #1a1a2e;
}
body.body--light .text-aiv-blue-contrast {
    color: #4a5568;
}

/* =========================
   31. CHIP / TAG / PROGRESS
   ========================= */
body.body--light .q-chip {
    background: rgba(13,13,14,0.05) !important;
    color: #4a5568;
    border: 1px solid rgba(13,13,14,0.10);
}
body.body--light .q-linear-progress {
    background: rgba(13,13,14,0.08) !important;
}

/* =========================
   32. EXPANSION / ACCORDION
   ========================= */
body.body--light .q-expansion-item {
    color: #1a1a2e;
}
body.body--light .q-expansion-item .q-item {
    color: #1a1a2e;
}
body.body--light .q-expansion-item__border {
    border-color: rgba(13,13,14,0.08);
}

/* =========================
   33. BUTTON OVERRIDES
   ========================= */
/* Keep text-white on gradient buttons (they have colored backgrounds) */
body.body--light .q-btn[style*="gradient"] .text-white,
body.body--light .q-btn[style*="background:"] .text-white,
body.body--light .q-btn[style*="background: "] .text-white {
    color: #fff !important;
}
/* Buttons that declare text-white keep white labels - their background is
   colored (Quasar bg-primary or a gradient). The element-level color can
   still be overridden by inline styles (e.g. theme-aware chart pills), so
   the content span must INHERIT, never force white. */
body.body--light .q-btn.text-white {
    color: #fff !important;
}
body.body--light .q-btn.text-white .q-btn__content,
body.body--light .q-btn .q-btn__content .text-white {
    color: inherit !important;
}
/* Default (bg-primary) buttons become ink CTA pills, like aivory.net */
body.body--light .q-btn.bg-primary:not(.si-step-btn) {
    background: #0D0D0E !important;
    color: #ffffff !important;
}
body.body--light .q-btn.bg-primary:not(.si-step-btn):hover {
    background: #26262b !important;
}
body.body--light .q-btn.si-step-btn,
body.body--light .q-btn.si-step-btn .q-btn__content {
    background: #ffffff !important;
    border: 1px solid rgba(180,83,9,0.4) !important;
    color: #B45309 !important;
}
body.body--light .q-btn.si-step-btn .q-btn__content {
    background: transparent !important;
    border: none !important;
}
body.body--light .q-btn.si-step-btn:hover {
    background: rgba(245,158,11,0.08) !important;
}
/* Gradient buttons themselves keep white label text */
body.body--light .nicegui-content .q-btn[style*="gradient"] {
    color: #fff !important;
}
body.body--light .nicegui-content .q-btn[style*="gradient"]:hover {
    transform: translateY(-1px);
}
/* Flat buttons in light mode */
body.body--light .q-btn.q-btn--flat:not([style*="background"]) {
    color: #4a5568;
}
body.body--light .q-btn.q-btn--flat:not([style*="background"]):hover {
    background: rgba(13,13,14,0.04);
}

/* =========================
   34. ICON COLORS
   ========================= */
body.body--light .nicegui-content .q-icon {
    color: inherit;
}
body.body--light .fa-solid.text-white,
body.body--light .nicegui-content .q-icon.text-white {
    color: #4a5568 !important;
}

/* =========================
   35. Q-STEPPER / SPINNER
   ========================= */
body.body--light .q-stepper {
    background: transparent;
    color: #1a1a2e;
}
body.body--light .q-stepper__step-inner {
    color: #1a1a2e;
}
body.body--light .orbit-spinner .orbit:nth-child(1) {
    border-bottom-color: #6B8AFF;
}
body.body--light .orbit-spinner .orbit:nth-child(2) {
    border-right-color: #51B5BF;
}
body.body--light .orbit-spinner .orbit:nth-child(3) {
    border-top-color: #7C3AED;
}

/* =========================
   36. NICEGUI MARKDOWN
   ========================= */
body.body--light .nicegui-markdown {
    color: #1a1a2e;
}
body.body--light .nicegui-markdown h1,
body.body--light .nicegui-markdown h2,
body.body--light .nicegui-markdown h3,
body.body--light .nicegui-markdown h4 {
    color: #0D0D0E;
}
body.body--light .nicegui-markdown a {
    color: #4338ca;
}
body.body--light .nicegui-markdown code {
    background: rgba(107,138,255,0.08);
    color: #4338ca;
}

/* =========================
   37. FOOTER INLINE STYLES
   ========================= */
body.body--light .sidebar-footer [style*="border-top"][style*="rgba(255,255,255"] {
    border-top-color: rgba(13,13,14,0.08) !important;
}