/* ═══════════════════════════════════════════════════════════════════ Agricomax ERP — THEME ENGINE ------------------------------------------------------------------- One file that owns every colour decision in the app. • Light / Dark / Auto → html[data-bs-theme="light|dark"] • 10 user-selectable accents → html[data-accent="green|ocean|…"] Everything else in the app paints with the tokens declared here (--agx-surface, --agx-text, --agx-accent, …), so flipping one attribute on re-skins the whole ERP — sidebar, navbar, cards, tables, forms, modals, charts — with no per-page work. Load order matters: this file must come AFTER bootstrap.min.css, style.css and pwa.css so it can win without !important. ═══════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────── 1. NEUTRAL SURFACE TOKENS — light (default) ─────────────────────────────────────────────────────────────────── */ :root, html[data-bs-theme="light"] { --agx-bg: #eef2f7; --agx-bg-2: #f6f8fb; --agx-surface: #ffffff; --agx-surface-2: #f8fafc; --agx-surface-3: #f1f5f9; --agx-surface-sunk: #eef2f7; --agx-surface-alt: #ffffff; --agx-border: #e2e8f0; --agx-border-2: #eef2f7; --agx-border-strong: #cbd5e1; --agx-text: #0f172a; --agx-text-soft: #475569; --agx-muted: #64748b; --agx-muted-2: #94a3b8; --agx-on-accent: #ffffff; --agx-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05); --agx-shadow-2: 0 2px 6px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .07); --agx-shadow-3: 0 18px 44px rgba(15, 23, 42, .14); --agx-ring: 0 0 0 3px rgba(var(--agx-accent-rgb), .18); /* Semantic (status) colours — the meaning-carrying ones never follow the accent, otherwise a "success" badge would stop meaning success. */ --agx-ok: #16a34a; --agx-ok-bg: #dcfce7; --agx-ok-fg: #14532d; --agx-warn: #d97706; --agx-warn-bg: #fef3c7; --agx-warn-fg: #78350f; --agx-danger: #dc2626; --agx-danger-bg: #fee2e2; --agx-danger-fg: #7f1d1d; --agx-info: #2563eb; --agx-info-bg: #dbeafe; --agx-info-fg: #1e3a8a; --agx-scrim: rgba(15, 23, 42, .45); --agx-glass: rgba(255, 255, 255, .78); /* Semantic TINTS — the pastel fills, hairlines and ink the pages use for "this is good / needs attention / went wrong" panels. Five families, two fill weights each: -1 is the 50-level wash, -2 the 100-level chip. */ --agx-tint-ok-1: #f0fdf4; --agx-tint-ok-2: #dcfce7; --agx-line-ok: #bbf7d0; --agx-fg-ok: #166534; --agx-tint-warn-1: #fffbeb; --agx-tint-warn-2: #fef3c7; --agx-line-warn: #fde68a; --agx-fg-warn: #92400e; --agx-tint-danger-1: #fef2f2; --agx-tint-danger-2: #fee2e2; --agx-line-danger: #fecaca; --agx-fg-danger: #991b1b; --agx-tint-info-1: #f0f9ff; --agx-tint-info-2: #dbeafe; --agx-line-info: #bfdbfe; --agx-fg-info: #1e40af; --agx-tint-violet-1: #f5f3ff; --agx-tint-violet-2: #ede9fe; --agx-line-violet: #ddd6fe; --agx-fg-violet: #5b21b6; /* MID tones — for the values the pages hand to a custom property and then use both ways (icon-chip fill with white glyph *and* accent ink). They stay mid-luminance in both themes so neither usage breaks. */ --agx-mid-ok: #16a34a; --agx-mid-warn: #d97706; --agx-mid-danger: #dc2626; --agx-mid-info: #2563eb; --agx-mid-violet: #7c3aed; color-scheme: light; } /* ─────────────────────────────────────────────────────────────────── 2. NEUTRAL SURFACE TOKENS — dark ─────────────────────────────────────────────────────────────────── */ html[data-bs-theme="dark"] { --agx-bg: #0a1017; --agx-bg-2: #0e1520; --agx-surface: #141d2b; --agx-surface-2: #1a2536; --agx-surface-3: #212e42; --agx-surface-sunk: #0e1622; --agx-surface-alt: #18222f; --agx-border: #2b3a52; --agx-border-2: #223046; --agx-border-strong: #3b4c68; --agx-text: #e8eef8; --agx-text-soft: #c2cddf; --agx-muted: #94a3b8; --agx-muted-2: #7e8da4; --agx-on-accent: #ffffff; --agx-shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 10px rgba(0, 0, 0, .32); --agx-shadow-2: 0 2px 8px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .40); --agx-shadow-3: 0 20px 50px rgba(0, 0, 0, .55); --agx-ok: #34d399; --agx-ok-bg: #063e2c; --agx-ok-fg: #a7f3d0; --agx-warn: #fbbf24; --agx-warn-bg: #48320a; --agx-warn-fg: #fde68a; --agx-danger: #f87171; --agx-danger-bg: #4a1616; --agx-danger-fg: #fecaca; --agx-info: #60a5fa; --agx-info-bg: #12315e; --agx-info-fg: #bfdbfe; --agx-scrim: rgba(0, 0, 0, .62); --agx-glass: rgba(20, 29, 43, .82); /* Dark counterparts: the wash becomes a deep, low-chroma bed and the ink flips to the light end of the same hue, so every status panel keeps its meaning and its contrast. */ --agx-tint-ok-1: #0d251d; --agx-tint-ok-2: #123a2c; --agx-line-ok: #1d6349; --agx-fg-ok: #6ee7b7; --agx-tint-warn-1: #291f0a; --agx-tint-warn-2: #3b2d0c; --agx-line-warn: #77570f; --agx-fg-warn: #fcd34d; --agx-tint-danger-1: #2a1416; --agx-tint-danger-2: #3f1a1d; --agx-line-danger: #7a2a2f; --agx-fg-danger: #fca5a5; --agx-tint-info-1: #101f36; --agx-tint-info-2: #172a49; --agx-line-info: #2c497c; --agx-fg-info: #93c5fd; --agx-tint-violet-1: #1d1638; --agx-tint-violet-2: #291f4f; --agx-line-violet: #493785; --agx-fg-violet: #c4b5fd; --agx-mid-ok: #22c55e; --agx-mid-warn: #f59e0b; --agx-mid-danger: #ef4444; --agx-mid-info: #3b82f6; --agx-mid-violet: #a78bfa; color-scheme: dark; } /* ─────────────────────────────────────────────────────────────────── 3. ACCENT PALETTES Every accent supplies the same six tokens, so any of them drops straight into the chrome without extra rules. ─────────────────────────────────────────────────────────────────── */ :root, html[data-accent="green"] { --agx-accent: #1f7a35; --agx-accent-rgb: 31, 122, 53; --agx-accent-strong: #14532d; --agx-accent-light: #34a853; --agx-accent-soft: #e7f6ec; --agx-side-1: #0f3a1a; --agx-side-2: #17512a; } html[data-accent="emerald"] { --agx-accent: #059669; --agx-accent-rgb: 5, 150, 105; --agx-accent-strong: #065f46; --agx-accent-light: #34d399; --agx-accent-soft: #e2f7f0; --agx-side-1: #052e26; --agx-side-2: #0a4c3c; } html[data-accent="teal"] { --agx-accent: #0d9488; --agx-accent-rgb: 13, 148, 136; --agx-accent-strong: #115e59; --agx-accent-light: #2dd4bf; --agx-accent-soft: #e0f6f4; --agx-side-1: #042f2e; --agx-side-2: #0b4f4a; } html[data-accent="ocean"] { --agx-accent: #2563eb; --agx-accent-rgb: 37, 99, 235; --agx-accent-strong: #1d4ed8; --agx-accent-light: #60a5fa; --agx-accent-soft: #e4edfd; --agx-side-1: #0b1e3f; --agx-side-2: #14346c; } html[data-accent="indigo"] { --agx-accent: #4f46e5; --agx-accent-rgb: 79, 70, 229; --agx-accent-strong: #3730a3; --agx-accent-light: #818cf8; --agx-accent-soft: #e8e7fd; --agx-side-1: #14133a; --agx-side-2: #2b2a72; } html[data-accent="violet"] { --agx-accent: #7c3aed; --agx-accent-rgb: 124, 58, 237; --agx-accent-strong: #5b21b6; --agx-accent-light: #a78bfa; --agx-accent-soft: #f0e9fe; --agx-side-1: #24103f; --agx-side-2: #45207c; } html[data-accent="rose"] { --agx-accent: #e11d48; --agx-accent-rgb: 225, 29, 72; --agx-accent-strong: #9f1239; --agx-accent-light: #fb7185; --agx-accent-soft: #fde7ec; --agx-side-1: #3d0716; --agx-side-2: #7a1330; } html[data-accent="sunset"] { --agx-accent: #ea580c; --agx-accent-rgb: 234, 88, 12; --agx-accent-strong: #9a3412; --agx-accent-light: #fb923c; --agx-accent-soft: #fdece1; --agx-side-1: #3a1206; --agx-side-2: #7c2d12; } html[data-accent="graphite"] { --agx-accent: #475569; --agx-accent-rgb: 71, 85, 105; --agx-accent-strong: #334155; --agx-accent-light: #94a3b8; --agx-accent-soft: #eceff4; --agx-side-1: #0f172a; --agx-side-2: #24324a; } /* "Aurora" — the multicolour option: one accent, a three-stop sidebar. */ html[data-accent="aurora"] { --agx-accent: #8b5cf6; --agx-accent-rgb: 139, 92, 246; --agx-accent-strong: #6d28d9; --agx-accent-light: #c4b5fd; --agx-accent-soft: #f1ebfe; --agx-side-1: #0d3b4f; --agx-side-2: #6b1b56; --agx-sidebar-bg: linear-gradient(165deg, #0b3d4d 0%, #2b1b6b 46%, #7a1352 100%); --agx-brand-bg: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 55%, #f472b6 100%); } /* ── Dark-mode accent adjustment ────────────────────────────────── On a dark surface "stronger" has to mean *brighter*, not darker: the deep accent (#14532d for green) is unreadable as ink and invisible as a hover state once the page background is near-black. Declared after the accent blocks so it wins on source order, and the legacy --agri-green-* aliases inherit the correction for free. */ html[data-bs-theme="dark"] { --agx-accent-strong: var(--agx-accent-light); --agx-accent-soft: rgba(var(--agx-accent-rgb), .20); } /* Composed chrome gradients — accents may override either of these. */ :root { --agx-sidebar-bg: linear-gradient(180deg, var(--agx-side-1) 0%, var(--agx-side-2) 100%); --agx-brand-bg: linear-gradient(135deg, var(--agx-accent-light) 0%, var(--agx-accent) 100%); --agx-accent-grad: linear-gradient(135deg, var(--agx-accent-light) 0%, var(--agx-accent) 55%, var(--agx-accent-strong) 100%); /* Legacy aliases — the older stylesheet paints with these names, so re-pointing them here makes every existing rule accent-aware. */ --agri-green: var(--agx-accent); --agri-green-light: var(--agx-accent-light); --agri-green-dark: var(--agx-accent-strong); --agri-green-pale: var(--agx-accent-soft); /* Bootstrap hand-off */ --bs-primary: var(--agx-accent); --bs-primary-rgb: var(--agx-accent-rgb); --bs-link-color: var(--agx-accent); --bs-link-hover-color: var(--agx-accent-strong); --bs-link-color-rgb: var(--agx-accent-rgb); --bs-body-bg: var(--agx-bg); --bs-body-color: var(--agx-text); --bs-border-color: var(--agx-border); --bs-emphasis-color: var(--agx-text); --bs-secondary-color: var(--agx-muted); --bs-tertiary-bg: var(--agx-surface-2); } /* Dark mode deepens every sidebar so the accent reads as a tint, not a slab. */ html[data-bs-theme="dark"] #sidebar { background-image: linear-gradient(rgba(3, 7, 15, .55), rgba(3, 7, 15, .68)), var(--agx-sidebar-bg); } /* Smooth the switch, but never fight a user who asked for less motion. */ html.agx-theme-anim body, html.agx-theme-anim #sidebar, html.agx-theme-anim .top-navbar, html.agx-theme-anim .card, html.agx-theme-anim .modal-content { transition: background-color .28s ease, color .28s ease, border-color .28s ease; } @media (prefers-reduced-motion: reduce) { html.agx-theme-anim * { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════ 4. APP CHROME ═══════════════════════════════════════════════════════════════════ */ body { background: var(--agx-bg); color: var(--agx-text); } /* ── Sidebar ─────────────────────────────────────────────────────── */ #sidebar { background: var(--agx-sidebar-bg); box-shadow: 1px 0 0 rgba(255, 255, 255, .05), 4px 0 24px rgba(0, 0, 0, .18); } /* A hairline of pure accent down the inside edge ties the rail to the theme. */ #sidebar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(var(--agx-accent-rgb), 0) 0%, rgba(var(--agx-accent-rgb), .85) 22%, rgba(var(--agx-accent-rgb), .85) 78%, rgba(var(--agx-accent-rgb), 0) 100%); pointer-events: none; } .sidebar-brand-icon { background: var(--agx-brand-bg); box-shadow: 0 6px 16px rgba(var(--agx-accent-rgb), .38); } .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .10); } .sidebar-nav > .nav-item > .nav-link, .sidebar-subnav .nav-link { position: relative; transition: background .18s ease, color .18s ease, transform .18s ease; } .sidebar-nav > .nav-item > .nav-link:hover, .sidebar-subnav .nav-link:hover { background: rgba(255, 255, 255, .10); transform: translateX(2px); } .sidebar-nav > .nav-item > .nav-link.active, .sidebar-subnav .nav-link.active { background: linear-gradient(90deg, rgba(var(--agx-accent-rgb), .55) 0%, rgba(255, 255, 255, .10) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; } /* Glowing marker on the active item */ .sidebar-nav > .nav-item > .nav-link.active::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--agx-accent-light); box-shadow: 0 0 10px rgba(var(--agx-accent-rgb), .9); } .sidebar-subnav .nav-link.active::before { background: var(--agx-accent-light); } .sidebar-group.is-open > .sidebar-group-toggle { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); } .sidebar-section { color: rgba(255, 255, 255, .45); } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(var(--agx-accent-rgb), .55); } .sidebar-footer { background: rgba(0, 0, 0, .26); } .sidebar-profile-avatar { background: var(--agx-brand-bg); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 4px 12px rgba(var(--agx-accent-rgb), .35); } /* ── Top navbar ──────────────────────────────────────────────────── */ .top-navbar { background: var(--agx-glass); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--agx-border); box-shadow: 0 1px 0 rgba(var(--agx-accent-rgb), .10), 0 4px 18px rgba(15, 23, 42, .06); } html[data-bs-theme="dark"] .top-navbar { box-shadow: 0 1px 0 rgba(var(--agx-accent-rgb), .25), 0 6px 20px rgba(0, 0, 0, .45); } .page-title { color: var(--agx-text); } /* Light buttons in the navbar are the app's most-repeated control. */ .top-navbar .btn-light, .top-navbar .btn-light:focus { background: var(--agx-surface-2); border-color: var(--agx-border); color: var(--agx-text-soft); } .top-navbar .btn-light:hover { background: var(--agx-accent-soft); border-color: rgba(var(--agx-accent-rgb), .35); color: var(--agx-accent-strong); } html[data-bs-theme="dark"] .top-navbar .btn-light:hover { background: rgba(var(--agx-accent-rgb), .22); color: var(--agx-accent-light); } .agx-search-form .input-group-text { background: var(--agx-surface-2); border-color: var(--agx-border); color: var(--agx-muted); } /* ═══════════════════════════════════════════════════════════════════ 5. CORE COMPONENTS These are written explicitly (rather than leaning on Bootstrap's own dark mode) so the app still themes correctly when the CDN is unreachable and the offline vendor fallback is serving Bootstrap. ═══════════════════════════════════════════════════════════════════ */ .card, .modal-content, .offcanvas, .list-group-item, .accordion-item, .accordion-button { background-color: var(--agx-surface); color: var(--agx-text); border-color: var(--agx-border); } .card { box-shadow: var(--agx-shadow-1); } .card-header, .card-footer { background-color: var(--agx-surface); border-color: var(--agx-border); color: var(--agx-text); } .modal-header, .modal-footer, .offcanvas-header { border-color: var(--agx-border); } .dropdown-menu { background-color: var(--agx-surface); border-color: var(--agx-border); box-shadow: var(--agx-shadow-2); color: var(--agx-text); } .dropdown-item { color: var(--agx-text-soft); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--agx-accent-soft); color: var(--agx-accent-strong); } html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(var(--agx-accent-rgb), .22); color: var(--agx-accent-light); } .dropdown-divider { border-color: var(--agx-border); } .dropdown-item.text-danger:hover { background-color: var(--agx-danger-bg); color: var(--agx-danger) !important; } /* Tables */ .table { --bs-table-bg: transparent; --bs-table-color: var(--agx-text); --bs-table-border-color: var(--agx-border); --bs-table-striped-bg: var(--agx-surface-2); --bs-table-striped-color: var(--agx-text); --bs-table-hover-bg: var(--agx-accent-soft); --bs-table-hover-color: var(--agx-text); color: var(--agx-text); } html[data-bs-theme="dark"] .table { --bs-table-hover-bg: rgba(var(--agx-accent-rgb), .16); } .table thead th { background: var(--agx-surface-2); color: var(--agx-muted); border-bottom-color: var(--agx-border); } .table > :not(caption) > * > * { border-bottom-color: var(--agx-border); } /* Forms */ .form-control, .form-select, .input-group-text, .form-check-input { background-color: var(--agx-surface); border-color: var(--agx-border); color: var(--agx-text); } .form-control::placeholder { color: var(--agx-muted-2); } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--agx-surface-3); color: var(--agx-muted); } .form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible, a:focus-visible { border-color: var(--agx-accent); box-shadow: var(--agx-ring); outline: none; } .form-check-input:checked { background-color: var(--agx-accent); border-color: var(--agx-accent); } .form-label, legend { color: var(--agx-text-soft); } html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background-color: var(--agx-surface-2); } /* Native date/time/number widgets are invisible on dark without this. */ html[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, html[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); } /* Buttons — the accent drives the app's primary action colour. `.btn-success` is the ERP's de-facto primary button, so it follows the accent too; semantic *badges* and *alerts* below stay green on purpose. */ .btn-primary, .btn-success, .btn-agri { --bs-btn-bg: var(--agx-accent); --bs-btn-border-color: var(--agx-accent); --bs-btn-hover-bg: var(--agx-accent-strong); --bs-btn-hover-border-color: var(--agx-accent-strong); --bs-btn-active-bg: var(--agx-accent-strong); --bs-btn-active-border-color: var(--agx-accent-strong); --bs-btn-disabled-bg: var(--agx-accent); --bs-btn-disabled-border-color: var(--agx-accent); --bs-btn-color: var(--agx-on-accent); --bs-btn-hover-color: var(--agx-on-accent); --bs-btn-active-color: var(--agx-on-accent); background-color: var(--agx-accent); border-color: var(--agx-accent); color: var(--agx-on-accent); } .btn-primary:hover, .btn-success:hover, .btn-agri:hover, .btn-primary:active, .btn-success:active { background-color: var(--agx-accent-strong); border-color: var(--agx-accent-strong); color: var(--agx-on-accent); } .btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--agx-accent); --bs-btn-border-color: var(--agx-accent); --bs-btn-hover-bg: var(--agx-accent); --bs-btn-hover-border-color: var(--agx-accent); --bs-btn-hover-color: var(--agx-on-accent); color: var(--agx-accent); border-color: var(--agx-accent); } .btn-outline-primary:hover, .btn-outline-success:hover { background-color: var(--agx-accent); color: var(--agx-on-accent); } .btn-light, .btn-outline-secondary { --bs-btn-bg: var(--agx-surface-2); --bs-btn-border-color: var(--agx-border); --bs-btn-color: var(--agx-text-soft); --bs-btn-hover-bg: var(--agx-surface-3); --bs-btn-hover-border-color: var(--agx-border-strong); --bs-btn-hover-color: var(--agx-text); } .btn-close { filter: none; } html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Text helpers */ .text-muted, .text-secondary { color: var(--agx-muted) !important; } /* `.text-dark` usually means "readable ink", so it follows the theme — EXCEPT on an element that also carries a coloured/light `bg-*` utility (the classic `badge bg-warning text-dark`), where flipping it to light ink would put pale text on a pale chip. */ .text-dark:not([class*="bg-"]) { color: var(--agx-text) !important; } /* …and the status-chip idiom `bg-X bg-opacity-10 text-X` is the exception to that exception: a 10 % fill is invisible on a dark card, so `text-dark` there really does mean "readable ink" and must follow the theme. */ html[data-bs-theme="dark"] .bg-opacity-10.text-dark, html[data-bs-theme="dark"] .bg-opacity-25.text-dark, html[data-bs-theme="dark"] .bg-opacity-50.text-dark { color: var(--agx-text) !important; } .bg-white { background-color: var(--agx-surface) !important; } .bg-light { background-color: var(--agx-surface-2) !important; } .border { border-color: var(--agx-border) !important; } .border-top, .border-bottom, .border-start, .border-end { border-color: var(--agx-border) !important; } hr { border-color: var(--agx-border); opacity: 1; } a { color: var(--agx-accent); } a:hover { color: var(--agx-accent-strong); } .nav-tabs { border-bottom-color: var(--agx-border); } .nav-tabs .nav-link { color: var(--agx-muted); } .nav-tabs .nav-link.active { background: var(--agx-surface); border-color: var(--agx-border) var(--agx-border) var(--agx-surface); color: var(--agx-accent); } .progress { background-color: var(--agx-surface-3); } .progress-bar { background-color: var(--agx-accent); } .badge.bg-light { color: var(--agx-text) !important; } .pagination { --bs-pagination-bg: var(--agx-surface); --bs-pagination-color: var(--agx-text-soft); --bs-pagination-border-color: var(--agx-border); --bs-pagination-active-bg: var(--agx-accent); --bs-pagination-active-border-color: var(--agx-accent); --bs-pagination-hover-bg: var(--agx-surface-2); } .tooltip-inner { background: var(--agx-text); color: var(--agx-surface); } .popover { background: var(--agx-surface); border-color: var(--agx-border); } .popover-body { color: var(--agx-text); } .modal-backdrop.show { opacity: 1; background: var(--agx-scrim); } .spinner-border { color: var(--agx-accent); } ::selection { background: rgba(var(--agx-accent-rgb), .28); } /* Alerts keep their meaning; only the surface adapts to dark. */ html[data-bs-theme="dark"] .alert-success { background: var(--agx-ok-bg); color: var(--agx-ok-fg); } html[data-bs-theme="dark"] .alert-danger { background: var(--agx-danger-bg); color: var(--agx-danger-fg); } html[data-bs-theme="dark"] .alert-warning { background: var(--agx-warn-bg); color: var(--agx-warn-fg); } html[data-bs-theme="dark"] .alert-info { background: var(--agx-info-bg); color: var(--agx-info-fg); } html[data-bs-theme="dark"] .sync-status.success { background: var(--agx-ok-bg); color: var(--agx-ok-fg); } html[data-bs-theme="dark"] .sync-status.running { background: var(--agx-warn-bg); color: var(--agx-warn-fg); } html[data-bs-theme="dark"] .sync-status.failed { background: var(--agx-danger-bg); color: var(--agx-danger-fg); } /* Dark-mode readability for the light tint utilities the pages use a lot. */ html[data-bs-theme="dark"] .bg-success-subtle { background-color: var(--agx-ok-bg) !important; color: var(--agx-ok-fg) !important; } html[data-bs-theme="dark"] .bg-warning-subtle { background-color: var(--agx-warn-bg) !important; color: var(--agx-warn-fg) !important; } html[data-bs-theme="dark"] .bg-danger-subtle { background-color: var(--agx-danger-bg) !important; color: var(--agx-danger-fg) !important; } html[data-bs-theme="dark"] .bg-info-subtle, html[data-bs-theme="dark"] .bg-primary-subtle { background-color: var(--agx-info-bg) !important; color: var(--agx-info-fg) !important; } html[data-bs-theme="dark"] .bg-secondary-subtle, html[data-bs-theme="dark"] .bg-light-subtle { background-color: var(--agx-surface-3) !important; color: var(--agx-text) !important; } html[data-bs-theme="dark"] .text-success { color: var(--agx-ok) !important; } html[data-bs-theme="dark"] .text-danger { color: var(--agx-danger) !important; } html[data-bs-theme="dark"] .text-warning { color: var(--agx-warn) !important; } html[data-bs-theme="dark"] .text-primary, html[data-bs-theme="dark"] .text-info { color: var(--agx-info) !important; } html[data-bs-theme="dark"] .table-light > * { --bs-table-bg: var(--agx-surface-2); color: var(--agx-text); } /* Charts / canvases drawn with a light assumption get a gentle lift. */ html[data-bs-theme="dark"] .chart-grid line, html[data-bs-theme="dark"] svg .grid line { stroke: var(--agx-border); } /* ═══════════════════════════════════════════════════════════════════ 6. APPEARANCE PICKER (top-bar toggle + panel in the user menu) ═══════════════════════════════════════════════════════════════════ */ .agx-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--agx-border); border-radius: 10px; background: var(--agx-surface-2); color: var(--agx-text-soft); cursor: pointer; flex-shrink: 0; transition: background .18s, color .18s, border-color .18s, transform .18s; } .agx-theme-btn:hover { background: var(--agx-accent-soft); border-color: rgba(var(--agx-accent-rgb), .40); color: var(--agx-accent-strong); transform: translateY(-1px); } html[data-bs-theme="dark"] .agx-theme-btn:hover { background: rgba(var(--agx-accent-rgb), .22); color: var(--agx-accent-light); } .agx-theme-btn i { font-size: 1.02rem; line-height: 1; } /* Only one of the two glyphs shows, decided by the resolved theme. */ .agx-theme-btn .agx-ico-dark { display: none; } html[data-bs-theme="dark"] .agx-theme-btn .agx-ico-dark { display: inline-block; } html[data-bs-theme="dark"] .agx-theme-btn .agx-ico-light { display: none; } /* Sign-in screen: float the toggle clear of the split layout. */ .agx-login-theme { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); z-index: 20; width: 40px; height: 40px; background: var(--agx-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--agx-shadow-1); } .agx-appearance { padding: .35rem .85rem .7rem; } .agx-appearance-title { font-size: .64rem; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--agx-muted-2); margin-bottom: .4rem; } /* Mode segmented control */ .agx-mode-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--agx-surface-3); border: 1px solid var(--agx-border); border-radius: 10px; padding: 3px; margin-bottom: .65rem; } .agx-mode-opt { display: flex; align-items: center; justify-content: center; gap: .3rem; border: 0; background: transparent; border-radius: 7px; padding: .35rem .2rem; font-size: .72rem; font-weight: 600; color: var(--agx-muted); cursor: pointer; min-width: 0; transition: background .18s, color .18s; } .agx-mode-opt i { font-size: .85rem; } .agx-mode-opt:hover { color: var(--agx-text); } .agx-mode-opt.is-active { background: var(--agx-surface); color: var(--agx-accent); box-shadow: var(--agx-shadow-1); } /* Accent swatches */ .agx-accent-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; } .agx-swatch { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 28px; border-radius: 9px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10); cursor: pointer; padding: 0; transition: transform .16s ease, box-shadow .16s ease; } .agx-swatch:hover { transform: scale(1.12); } .agx-swatch.is-active { border-color: var(--agx-text); box-shadow: 0 0 0 2px var(--agx-surface) inset, 0 3px 10px rgba(0, 0, 0, .22); } .agx-swatch.is-active::after { content: '\F26E'; /* bootstrap-icons "check-lg" */ font-family: 'bootstrap-icons'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } .agx-sw-green { background: linear-gradient(135deg, #34a853, #14532d); } .agx-sw-emerald { background: linear-gradient(135deg, #34d399, #065f46); } .agx-sw-teal { background: linear-gradient(135deg, #2dd4bf, #115e59); } .agx-sw-ocean { background: linear-gradient(135deg, #60a5fa, #1d4ed8); } .agx-sw-indigo { background: linear-gradient(135deg, #818cf8, #3730a3); } .agx-sw-violet { background: linear-gradient(135deg, #a78bfa, #5b21b6); } .agx-sw-rose { background: linear-gradient(135deg, #fb7185, #9f1239); } .agx-sw-sunset { background: linear-gradient(135deg, #fb923c, #9a3412); } .agx-sw-graphite { background: linear-gradient(135deg, #94a3b8, #334155); } .agx-sw-aurora { background: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 50%, #f472b6 100%); } /* Phones: the user menu becomes a sheet, so give the picker room. */ @media (max-width: 575.98px) { .agx-appearance { padding: .35rem .7rem .8rem; } .agx-accent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; } .agx-swatch { min-height: 34px; } .agx-mode-opt { padding: .45rem .2rem; font-size: .74rem; } } /* ═══════════════════════════════════════════════════════════════════ 7. PRINT — always paper-white, whatever the screen theme is. ═══════════════════════════════════════════════════════════════════ */ @media print { :root, html[data-bs-theme="dark"], html[data-bs-theme="light"] { --agx-bg: #ffffff; --agx-bg-2: #ffffff; --agx-surface: #ffffff; --agx-surface-2: #ffffff; --agx-surface-3: #f5f5f5; --agx-surface-sunk: #ffffff; --agx-surface-alt: #ffffff; --agx-border: #d0d5dd; --agx-border-2: #e5e7eb; --agx-border-strong: #9aa4b2; --agx-text: #000000; --agx-text-soft: #1f2937; --agx-muted: #4b5563; --agx-muted-2: #6b7280; --agx-glass: #ffffff; --agx-tint-ok-1: #f4faf6; --agx-tint-ok-2: #e7f5ec; --agx-line-ok: #c9e3d2; --agx-fg-ok: #14532d; --agx-tint-warn-1: #fdfaf1; --agx-tint-warn-2: #f8f0d9; --agx-line-warn: #e6d5a3; --agx-fg-warn: #7c4a06; --agx-tint-danger-1: #fdf5f5; --agx-tint-danger-2: #f8e6e6; --agx-line-danger: #e5c2c2; --agx-fg-danger: #7f1d1d; --agx-tint-info-1: #f5f9fd; --agx-tint-info-2: #e7eefa; --agx-line-info: #c6d5ec; --agx-fg-info: #1e3a8a; --agx-tint-violet-1: #f8f6fd; --agx-tint-violet-2: #ece7f8; --agx-line-violet: #d3c9ee; --agx-fg-violet: #4c1d95; --agx-mid-ok: #15803d; --agx-mid-warn: #b45309; --agx-mid-danger: #b91c1c; --agx-mid-info: #1d4ed8; --agx-mid-violet: #6d28d9; color-scheme: light; } body { background: #fff !important; color: #000 !important; } .agx-theme-btn, .agx-appearance { display: none !important; } }