/* ========================================================================== zeroLIC — Catalyst Design System Tokens from DESIGN.md: Inter, zinc palette, soft radii, sentence case, flat + hairlines, tabular numerals, semantic color only for deltas. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* -------------------------------------------------------------------------- 1. Catalyst Design Tokens -------------------------------------------------------------------------- */ :root { /* Zinc scale */ --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-800: #27272a; --zinc-900: #18181b; /* Semantic (for pills and alert tints only) */ --green-50: #f0fdf4; --green-100: #dcfce7; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; --rose-50: #fff1f2; --rose-100: #ffe4e6; --pink-100: #fce7f3; --rose-600: #e11d48; --rose-700: #be123c; --rose-800: #9f1239; --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e; --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-600: #2563eb; --blue-700: #1d4ed8; /* Surfaces */ --canvas: #ffffff; --sidebar: var(--zinc-50); --hover: var(--zinc-100); --border: var(--zinc-200); --border-soft: var(--zinc-100); /* Text */ --text-primary: var(--zinc-900); --text-secondary: var(--zinc-600); --text-muted: var(--zinc-500); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; /* Radii — radii have meaning (see DESIGN.md §5) */ --r-control: 6px; /* buttons, dropdowns, inputs */ --r-surface: 8px; /* cards, modal panels */ --r-full: 9999px; /* pills, avatars, badges */ /* Shadow — only real float */ --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.08); --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.06); /* Layout */ --sidebar-w: 260px; --content-max: 1280px; } /* -------------------------------------------------------------------------- 1b. Dark theme (Catalyst-compatible) Activated via html.theme-dark — applied before first paint by an inline script in base.html . Native controls follow via color-scheme. -------------------------------------------------------------------------- */ html.theme-dark { color-scheme: dark; /* Surfaces */ --canvas: #09090b; /* zinc-950 */ --sidebar: #000000; /* true black rail */ --hover: #27272a; /* zinc-800 */ --border: #27272a; /* zinc-800 */ --border-soft: #18181b; /* zinc-900 */ /* Text */ --text-primary: #fafafa; --text-secondary: #d4d4d8; /* zinc-300 */ --text-muted: #a1a1aa; /* zinc-400 */ --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.65); } /* Scrollbar — subtle zinc on dark */ html.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.theme-dark ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 8px; } html.theme-dark ::-webkit-scrollbar-track { background: #09090b; } /* -------------------------------------------------------------------------- 2. Bootstrap CSS Variable Overrides — before any component rule -------------------------------------------------------------------------- */ :root { --bs-body-font-family: var(--font-sans); --bs-body-color: var(--text-primary); --bs-body-bg: var(--canvas); --bs-body-line-height: 1.45; --bs-body-font-size: 14px; --bs-primary: var(--zinc-900); --bs-primary-rgb: 24, 24, 27; --bs-link-color: var(--zinc-900); --bs-link-hover-color: var(--zinc-600); --bs-border-color: var(--border); --bs-border-radius: var(--r-surface); --bs-border-radius-sm: var(--r-control); --bs-border-radius-lg: var(--r-surface); --bs-border-radius-pill: var(--r-full); /* Bootstrap tables: use our own text/border tokens so dark mode flows through */ --bs-emphasis-color: var(--text-primary); --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-border-color: var(--border-soft); --bs-table-striped-color: var(--text-primary); --bs-table-striped-bg: transparent; --bs-table-hover-color: var(--text-primary); --bs-table-hover-bg: var(--hover); --bs-table-active-color: var(--text-primary); --bs-table-active-bg: var(--hover); } /* -------------------------------------------------------------------------- 3. Base reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--text-primary); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11'; } /* Tabular numerals for data-carrying surfaces */ .tabular-nums, .badge, .table td, .table th, .stat-number, .font-monospace, input[type="number"], input[type="date"] { font-variant-numeric: tabular-nums; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--text-primary); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px; } h1, .h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; } h2, .h2 { font-size: 20px; font-weight: 600; } h3, .h3 { font-size: 16px; font-weight: 600; } h4, .h4 { font-size: 15px; font-weight: 600; } h5, .h5 { font-size: 14px; font-weight: 600; } h6, .h6 { font-size: 13px; font-weight: 600; } /* ---------- Catalyst Text system (https://catalyst.tailwindui.com/docs/text) ---------- */ /* Default

— body text is muted zinc-500 / 14px / line-height 24px. Headings and cell-level content stay primary via their own rules. */ p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; /* Catalyst text-sm/6 */ color: var(--text-muted); } /* Strong — weight 500, primary color (Catalyst: font-medium + zinc-950) */ strong, b { font-weight: 500; color: var(--text-primary); } /* Inline — bordered pill with subtle bg (Catalyst) */ code, .inline-code { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text-primary); background: rgba(24, 24, 27, 0.04); border: 1px solid rgba(24, 24, 27, 0.10); border-radius: 4px; padding: 1px 4px; font-variant-numeric: tabular-nums; } pre code { border: 0; background: transparent; padding: 0; } /* Default — UI chrome (nav, rows, breadcrumbs), no underline */ a { color: var(--text-primary); text-decoration: none; transition: color 0.12s; } a:hover { color: var(--text-secondary); text-decoration: none; } /* TextLink — semantic link inside body text / paragraphs / descriptive context. Catalyst: zinc-950 text + underline with 50% opacity decoration. */ p a:not(.btn):not(.nav-link):not(.row-link), .text-link, .auth-card__footer a { color: var(--text-primary); text-decoration: underline; text-decoration-color: rgba(24, 24, 27, 0.5); text-underline-offset: 2px; } p a:not(.btn):not(.nav-link):not(.row-link):hover, .text-link:hover, .auth-card__footer a:hover { color: var(--text-primary); text-decoration-color: var(--text-primary); } hr { border: 0; border-top: 1px solid var(--border); opacity: 1; margin: 16px 0; } /* -------------------------------------------------------------------------- 4. App shell (sidebar layout) -------------------------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; background: var(--canvas); } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; padding: 16px 12px; transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1); } /* Desktop collapse button — sits on the sidebar edge */ .sidebar__collapse { position: absolute; top: 18px; right: 10px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--r-control); color: var(--text-muted); cursor: pointer; font-size: 16px; transition: background 0.12s, color 0.12s, transform 0.2s; z-index: 2; } .sidebar__collapse:hover { background: var(--hover); color: var(--text-primary); } @media (max-width: 1023.98px) { .sidebar__collapse { display: none; } } .sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; font-size: 15px; font-weight: 600; color: var(--text-primary); text-decoration: none; } .sidebar__brand:hover { color: var(--text-primary); } .sidebar__brand-mark { width: 28px; height: 28px; border-radius: var(--r-control); background: var(--zinc-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; list-style: none; margin: 0; } .sidebar__section-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; padding: 18px 10px 6px; margin: 0; } .sidebar__link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-control); color: var(--text-secondary); font-size: 14px; font-weight: 500; line-height: 1.3; transition: background 0.12s, color 0.12s; text-decoration: none; } button.sidebar__link { background: transparent; border: 0; font-family: inherit; width: 100%; text-align: left; cursor: pointer; } .sidebar__link:hover { background: var(--hover); color: var(--text-primary); } .sidebar__link.is-active { background: var(--hover); color: var(--text-primary); } .sidebar__link i, .sidebar__link .bi { font-size: 16px; color: var(--text-muted); flex-shrink: 0; width: 16px; text-align: center; } .sidebar__link.is-active i, .sidebar__link.is-active .bi, .sidebar__link:hover i, .sidebar__link:hover .bi { color: var(--text-primary); } .sidebar__spacer { flex: 1; } .sidebar__footer { border-top: 1px solid var(--border); padding: 12px 8px 0; margin-top: 8px; display: flex; align-items: center; gap: 10px; } .sidebar__avatar { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--zinc-200); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .sidebar__user { flex: 1; min-width: 0; } .sidebar__user-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__user-email { font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__tenant-switch { font-size: 11px; color: var(--text-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 2px; } .sidebar__tenant-switch:hover { color: var(--text-primary); } .sidebar__superadmin { color: #b45309; } .sidebar__superadmin:hover { color: #92400e; } .sidebar__logout { background: transparent; border: 0; color: var(--text-muted); padding: 4px 6px; border-radius: var(--r-control); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background 0.12s, color 0.12s; } .sidebar__logout:hover { background: var(--hover); color: var(--text-primary); } .main { flex: 1; min-width: 0; padding: 28px 40px 64px; max-width: calc(var(--content-max) + var(--sidebar-w)); } /* Mobile drawer toggle */ .sidebar__toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 60; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-control); padding: 8px 10px; font-size: 18px; color: var(--text-primary); cursor: pointer; box-shadow: var(--shadow-pop); } .sidebar__backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 40; } @media (max-width: 1023.98px) { .sidebar { position: fixed; top: 0; left: 0; z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease-out; box-shadow: var(--shadow-float); } .app-shell.is-open .sidebar { transform: translateX(0); } .app-shell.is-open .sidebar__backdrop { display: block; } .sidebar__toggle { display: inline-flex; align-items: center; gap: 8px; } .main { padding: 56px 20px 48px; max-width: 100%; } } /* -------------------------------------------------------------------------- 4b. Collapsed sidebar state (desktop only, opt-in) Triggered by html.sidebar-collapsed or .app-shell.is-collapsed -------------------------------------------------------------------------- */ @media (min-width: 1024px) { html.sidebar-collapsed .sidebar, .app-shell.is-collapsed .sidebar { width: 64px; padding: 16px 8px; } html.sidebar-collapsed .sidebar__brand, .app-shell.is-collapsed .sidebar__brand { justify-content: center; padding: 8px 0 16px; gap: 0; font-size: 0; } html.sidebar-collapsed .sidebar__brand > span:not(.sidebar__brand-mark), .app-shell.is-collapsed .sidebar__brand > span:not(.sidebar__brand-mark) { display: none; } html.sidebar-collapsed .sidebar__link, .app-shell.is-collapsed .sidebar__link { justify-content: center; padding: 8px 0; gap: 0; } html.sidebar-collapsed .sidebar__link > span, .app-shell.is-collapsed .sidebar__link > span { display: none; } html.sidebar-collapsed .sidebar__section-label, .app-shell.is-collapsed .sidebar__section-label { display: none; } html.sidebar-collapsed .sidebar__footer, .app-shell.is-collapsed .sidebar__footer { padding: 12px 0 0; justify-content: center; flex-direction: column; gap: 8px; } html.sidebar-collapsed .sidebar__user, .app-shell.is-collapsed .sidebar__user { display: none; } html.sidebar-collapsed .sidebar__footer form, .app-shell.is-collapsed .sidebar__footer form { margin: 0; } html.sidebar-collapsed .sidebar__collapse, .app-shell.is-collapsed .sidebar__collapse { right: 50%; top: 16px; transform: translateX(50%) rotate(180deg); } /* When collapsed, the brand mark needs full width-worth of breathing room */ html.sidebar-collapsed .sidebar__brand-mark, .app-shell.is-collapsed .sidebar__brand-mark { margin-top: 28px; } } @media (max-width: 575.98px) { .main { padding: 56px 16px 32px; } } /* -------------------------------------------------------------------------- 5. Page headers -------------------------------------------------------------------------- */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .page-header h1, .page-header .h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0; display: inline-flex; align-items: center; gap: 10px; } .page-header h1 .bi, .page-header .h3 .bi { color: var(--text-muted); font-size: 20px; } /* Override Bootstrap's d-flex page header rows */ .d-flex.justify-content-between.align-items-center.mb-4, .d-flex.justify-content-between.align-items-center.mb-3 { margin-bottom: 24px !important; gap: 16px; flex-wrap: wrap; } .d-flex.justify-content-between.align-items-center h1.h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; display: inline-flex; align-items: center; gap: 10px; margin: 0; } .d-flex.justify-content-between.align-items-center h1.h3 .bi { color: var(--text-muted); } /* Kill the accent tint on h1 icons — they're UI chrome, not data */ .d-flex.justify-content-between.align-items-center h1.h3 .bi.text-primary { color: var(--text-muted) !important; } /* Count badge next to page title — Catalyst rounded-md */ .page-header .badge, .d-flex.justify-content-between.align-items-center h1.h3 .badge.bg-secondary { background: var(--zinc-100) !important; color: var(--text-secondary) !important; font-size: 12px !important; font-weight: 500; padding: 2px 8px; border-radius: 6px; letter-spacing: 0; text-transform: none; } .d-flex.justify-content-between.align-items-center h1.h3 .badge.bg-secondary.fs-6 { font-size: 12px !important; } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ /* ========================================================================= Buttons — Catalyst spec (https://catalyst.tailwindui.com/docs/button) Three variants: 1. Solid — filled bg, subtle shadow + inset ring (btn-primary, btn-success, btn-danger) 2. Outline — bg + 1px border, no shadow (btn-outline-*) 3. Plain — transparent, hover bg only (btn-plain, btn-link) ========================================================================= */ .btn { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.25; letter-spacing: 0; text-transform: none; padding: 7px 14px; border-radius: var(--r-control); border: 1px solid transparent; transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; } .btn:focus-visible { outline: 2px solid var(--zinc-400); outline-offset: 2px; } .btn:disabled, .btn.disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-sm { font-size: 13px; padding: 5px 10px; gap: 5px; } .btn-lg { font-size: 14px; padding: 9px 16px; } .btn i, .btn .bi { font-size: 14px; margin: 0; line-height: 1; } .btn-sm i, .btn-sm .bi { font-size: 13px; } /* Icon-only button — square */ .btn-icon { padding: 6px; width: 32px; height: 32px; min-width: 32px; } .btn-sm.btn-icon { width: 28px; height: 28px; min-width: 28px; padding: 4px; } /* ---------- SOLID variants — bg + subtle shadow + inset highlight ---------- */ /* Primary (default) — zinc-900 */ .btn-primary { background: var(--zinc-900); border-color: var(--zinc-900); color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.08); } .btn-primary:hover { background: var(--zinc-700) !important; border-color: var(--zinc-700) !important; color: #fff !important; } .btn-primary:active { background: var(--zinc-800) !important; } /* Success — green-600 */ .btn-success { background: var(--green-600); border-color: var(--green-600); color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.12); } .btn-success:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; } /* Danger — rose-600 */ .btn-danger { background: var(--rose-600); border-color: var(--rose-600); color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.12); } .btn-danger:hover { background: var(--rose-700); border-color: var(--rose-700); color: #fff; } /* ---------- OUTLINE variants — 1px border, no shadow ---------- */ .btn-outline-secondary, .btn-outline-primary { background: var(--canvas); border-color: var(--border); color: var(--text-primary); } .btn-outline-secondary:hover, .btn-outline-primary:hover { background: var(--hover); border-color: var(--border); color: var(--text-primary); } .btn-outline-light { background: transparent; border-color: var(--border); color: var(--text-primary); } .btn-outline-light:hover { background: var(--hover); border-color: var(--border); color: var(--text-primary); } .btn-outline-danger { background: var(--canvas); border-color: var(--border); color: var(--rose-700); } .btn-outline-danger:hover { background: var(--rose-50); border-color: #fecdd3; color: var(--rose-700); } .btn-outline-success { background: var(--canvas); border-color: var(--border); color: var(--green-700); } .btn-outline-success:hover { background: var(--green-50); border-color: #bbf7d0; color: var(--green-700); } /* ---------- PLAIN / GHOST variants — no border, no shadow, hover bg ---------- */ .btn-plain, .btn-ghost { background: transparent; border-color: transparent; color: var(--text-primary); } .btn-plain:hover, .btn-ghost:hover { background: var(--hover); border-color: transparent; color: var(--text-primary); } .btn-plain-danger { background: transparent; border-color: transparent; color: var(--rose-700); } .btn-plain-danger:hover { background: var(--rose-50); border-color: transparent; color: var(--rose-700); } /* Link-style — underline only */ .btn-link { color: var(--text-secondary); padding: 4px 6px; background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 2px; box-shadow: none; } .btn-link:hover { color: var(--text-primary); background: transparent; text-decoration: underline; } /* -------------------------------------------------------------------------- 7. Forms -------------------------------------------------------------------------- */ .form-control, .form-select { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--text-primary); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-control); padding: 8px 12px; transition: border-color 0.12s, box-shadow 0.12s; box-shadow: none !important; } .form-control:focus, .form-select:focus { border-color: var(--zinc-400); outline: 2px solid rgba(161, 161, 170, 0.35); outline-offset: 0; box-shadow: none !important; } .form-control::placeholder { color: var(--text-muted); } .form-control-sm, .form-select-sm { font-size: 13px; padding: 6px 10px; } .form-label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-primary); margin-bottom: 6px; } .form-label.small { font-size: 12px; } /* fw-medium is used widely — in Catalyst 500 is valid */ .fw-medium { font-weight: 500 !important; } .form-label.fw-medium { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; } .input-group-text { background: var(--zinc-50); border: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; } .form-check-input, .form-check-input[type="checkbox"], .form-check-input[type="radio"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 1px solid var(--zinc-300); background-color: var(--canvas); background-repeat: no-repeat; background-position: center; background-size: contain; transition: background-color 0.12s, border-color 0.12s; margin-top: 0.15em; print-color-adjust: exact; } .form-check-input[type="checkbox"] { border-radius: 4px; } .form-check-input[type="radio"] { border-radius: var(--r-full); } .form-check-input:hover:not(:checked):not(:disabled) { border-color: var(--zinc-400); } .form-check-input:checked { background-color: var(--zinc-900) !important; border-color: var(--zinc-900) !important; } .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e"); } .form-check-input:focus, .form-check-input:focus-visible { box-shadow: none !important; border-color: var(--zinc-400); outline: 2px solid rgba(161, 161, 170, 0.35); outline-offset: 1px; } .form-check-label { font-size: 13px; color: var(--text-primary); cursor: pointer; user-select: none; } .form-check-label.small { font-size: 13px; } /* -------------------------------------------------------------------------- 8. Cards & Containers -------------------------------------------------------------------------- */ .card { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-surface); box-shadow: none !important; } .card.border-0 { border: 1px solid var(--border) !important; } /* When a card is used only as a table container (no header, no footer, body with p-0 wrapping a table) — make the card visually absent. Catalyst demo pattern: tables live on the canvas, only hairlines separate rows. */ .card:has(> .card-body.p-0 > .table-responsive), .card:has(> .card-body.p-0 > .table) { background: transparent; border: 0 !important; border-radius: 0; } .card:has(> .card-body.p-0 > .table-responsive) > .card-footer, .card:has(> .card-body.p-0 > .table) > .card-footer { background: transparent; border-top: 1px solid var(--border); padding-left: 0; padding-right: 0; } .card-header { background: var(--canvas); border-bottom: 1px solid var(--border); padding: 14px 20px; border-radius: var(--r-surface) var(--r-surface) 0 0; } .card-header.bg-transparent { background: var(--canvas) !important; } .card-footer { background: var(--canvas); border-top: 1px solid var(--border); padding: 12px 20px; color: var(--text-muted); font-size: 13px; } .card-body { padding: 20px; } .card-title { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text-primary); margin-bottom: 0; display: inline-flex; align-items: center; gap: 8px; } .card-title .bi { color: var(--text-muted); font-size: 14px; } .card-title .bi.text-primary, .card-title .bi.text-success { color: var(--text-muted) !important; } /* Shadow utilities — neutralize inherited shadow-sm, keep only true floats */ .shadow-sm { box-shadow: none !important; } .shadow { box-shadow: var(--shadow-pop) !important; } .shadow-lg { box-shadow: var(--shadow-float) !important; } /* -------------------------------------------------------------------------- 8b. Combobox (Catalyst-style — search + dropdown panel) -------------------------------------------------------------------------- */ .combobox { position: relative; min-width: 0; } .combobox__control { position: relative; display: flex; align-items: center; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-control); transition: border-color 0.12s, box-shadow 0.12s; min-width: 0; } .combobox.is-open .combobox__control, .combobox__control:focus-within { border-color: var(--zinc-400); outline: 2px solid rgba(161, 161, 170, 0.35); outline-offset: 0; } .combobox__input { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-primary); background: transparent; border: 0; outline: none; padding: 7px 28px 7px 10px; width: 100%; min-width: 0; text-overflow: ellipsis; cursor: pointer; } .combobox__input::placeholder { color: var(--text-muted); } .combobox.is-open .combobox__input { cursor: text; } .combobox__chevron { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 12px; line-height: 1; display: inline-flex; } .combobox__clear { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 2px 4px; color: var(--text-muted); cursor: pointer; font-size: 11px; line-height: 1; border-radius: var(--r-control); opacity: 0; pointer-events: none; transition: opacity 0.12s, color 0.12s; } .combobox.has-value .combobox__clear { opacity: 1; pointer-events: auto; } .combobox__clear:hover { color: var(--text-primary); background: var(--hover); } .combobox__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-surface); box-shadow: var(--shadow-float); z-index: 30; padding: 4px; margin: 0; list-style: none; display: none; } .combobox.is-open .combobox__panel { display: block; } .combobox__option { padding: 8px 10px 8px 10px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-primary); border-radius: var(--r-control); cursor: pointer; position: relative; display: flex; align-items: center; gap: 8px; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .combobox__option[hidden] { display: none; } .combobox__option:hover, .combobox__option.is-active { background: var(--zinc-900); color: #fff; } .combobox__option.is-selected::after { content: '✓'; position: absolute; right: 10px; color: var(--text-muted); font-size: 12px; font-weight: 700; } .combobox__option.is-selected:hover::after, .combobox__option.is-selected.is-active::after { color: #fff; } .combobox__empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted); text-align: center; } /* Filter card (list pages) — tint */ .card.mb-4 > .card-body { background: var(--zinc-50); border-radius: var(--r-surface); padding: 16px 20px; } /* Filter form — fields grid + actions row */ .filter-form { display: flex; flex-direction: column; gap: 14px; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .filter-field { min-width: 0; } .filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; } .filter-actions__buttons { display: flex; gap: 8px; flex-shrink: 0; } @media (max-width: 575.98px) { .filter-actions { flex-direction: column; align-items: stretch; } .filter-actions__buttons { justify-content: stretch; } .filter-actions__buttons .btn { flex: 1; } } /* -------------------------------------------------------------------------- 9. Tables -------------------------------------------------------------------------- */ .table { font-size: 14px; line-height: 1.4; color: var(--text-primary); margin: 0; } .table th, .table td { vertical-align: middle; padding: 16px 16px; border-bottom: 1px solid var(--border-soft); background: transparent; } /* Right-align numeric-only columns (centered becomes right for tabular data) */ .table th.text-center, .table td.text-center { font-variant-numeric: tabular-nums; } .table thead th, .table thead.table-light th { background: var(--canvas) !important; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); border-bottom: 1px solid var(--border) !important; padding: 10px 16px; } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background: var(--zinc-50); } .table tbody tr:last-child td { border-bottom: 0; } /* Clickable row — whole navigates via JS or opens a modal */ .table tbody tr[data-row-href], .table tbody tr[data-row-modal] { cursor: pointer; } .table tbody tr[data-row-href] a.row-link { color: inherit; text-decoration: none; } .table tbody tr[data-row-href]:hover a.row-link { color: var(--text-primary); } .table tbody tr[data-row-href]:focus-within, .table tbody tr[data-row-modal]:focus-within { outline: 2px solid rgba(161, 161, 170, 0.35); outline-offset: -2px; } /* Legacy .table-warning — no longer used, kept as no-op to avoid accidental tint if applied elsewhere. PIN-needed highlight now lives inside the first cell as a pulsing .badge-pulse badge. */ .table-warning > td, tr.table-warning { background: transparent !important; box-shadow: none; } .table-sm th, .table-sm td { padding: 10px 14px; } /* -------------------------------------------------------------------------- 9a. Switch (Catalyst spec) https://catalyst.tailwindui.com/docs/switch -------------------------------------------------------------------------- */ .switch-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text-secondary); } .switch { position: relative; display: inline-flex; align-items: center; width: 32px; height: 18px; flex-shrink: 0; } .switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; } .switch__track { display: block; width: 100%; height: 100%; background: var(--zinc-200); border-radius: 9999px; transition: background 0.18s ease; } .switch__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 9999px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: transform 0.18s ease; pointer-events: none; } .switch__input:checked ~ .switch__track { background: var(--zinc-900); } .switch__input:checked ~ .switch__thumb { transform: translateX(14px); } .switch__input:focus-visible ~ .switch__track { outline: 2px solid rgba(161, 161, 170, 0.35); outline-offset: 2px; } .switch__input:disabled ~ .switch__track { opacity: 0.5; cursor: not-allowed; } .switch-label:hover .switch__track { background: var(--zinc-300); } .switch-label:hover .switch__input:checked ~ .switch__track { background: var(--zinc-700); } /* -------------------------------------------------------------------------- 9b. Pin-codes table — compact variant -------------------------------------------------------------------------- */ .pin-table thead th { background: transparent; font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; text-transform: none; padding: 6px 8px; border-bottom: 1px solid var(--border); } .pin-table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--border-soft); font-size: 13px; vertical-align: middle; } .pin-table tbody tr:last-child td { border-bottom: 0; } .pin-table .pin-table__pin { min-width: 0; } .pin-table .pin-table__pin .font-monospace { font-size: 13px; font-weight: 500; color: var(--text-primary); background: transparent; padding: 0; font-variant-numeric: tabular-nums; } .pin-table .pin-table__date { width: 180px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .pin-table__date-value { color: var(--text-secondary); } .pin-table .pin-table__actions { width: 1%; white-space: nowrap; text-align: right; padding-right: 4px; } .pin-table__activate { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; } .pin-table__activate .form-control-sm { width: 130px; font-size: 12px; padding: 4px 8px; height: 28px; font-variant-numeric: tabular-nums; } .pin-table__activate .btn-sm { padding: 0; width: 28px; height: 28px; min-width: 28px; } .pin-table__delete { width: 28px; height: 28px; min-width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .pin-table__delete .bi, .pin-table__activate .bi { font-size: 14px; margin: 0; } /* Row hover on pin-table */ .pin-table tbody tr:hover td { background: var(--zinc-50); } /* Hide activated rows by default (switch controls this class) */ .pin-table-wrap--hide-activated .pin-table tr[data-activated="1"] { display: none; } .table-responsive { border: 0; } /* Monospace — outside tables: subtle pill */ .font-monospace, span.font-monospace, input.font-monospace { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* Inputs with monospace class — keep normal field styling */ input.font-monospace { font-size: 14px; } /* Breadcrumb monospace — quiet */ .breadcrumb-item.font-monospace, .breadcrumb-item .font-monospace, .breadcrumb-item.active.font-monospace { font-size: 13px; color: var(--text-primary); } /* Inside tables — Catalyst-style quiet identifier: no pill, muted color */ .table .font-monospace, .table td .font-monospace, .table td span.font-monospace { background: transparent; padding: 0; border-radius: 0; font-weight: 500; color: var(--text-secondary); } /* -------------------------------------------------------------------------- 10. Badges — Catalyst spec (https://catalyst.tailwindui.com/docs/badge) - rounded-md (6px), NOT pill - text-sm/font-medium (12-13px, weight 500) - Light-tint bg + saturated text in the same hue - inline-flex with gap for icon support -------------------------------------------------------------------------- */ .badge { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: 0; text-transform: none; padding: 2px 8px; border-radius: 6px; /* rounded-md, Catalyst standard */ border: 0; display: inline-flex; align-items: center; gap: 5px; /* Catalyst gap-x-1.5 ≈ 6px */ white-space: nowrap; vertical-align: middle; } .badge .bi { font-size: 11px; line-height: 1; font-weight: 400; } /* Color variants — light bg + 700/800 text in same hue */ .badge.bg-primary { background: var(--blue-100) !important; color: var(--blue-700) !important; } .badge.bg-secondary { background: var(--zinc-100) !important; color: var(--text-secondary) !important; } .badge.bg-success { background: var(--green-100) !important; color: var(--green-800) !important; } .badge.bg-warning, .badge.bg-warning.text-dark { background: var(--amber-100) !important; color: var(--amber-800) !important; } .badge.bg-danger { background: var(--pink-100) !important; color: var(--rose-800) !important; } .badge.bg-zinc { background: var(--zinc-100) !important; color: var(--text-secondary) !important; } /* Neutralize Bootstrap size utility — badges are always 12px */ .badge.fs-6, .badge.fs-5, .badge.fs-4 { font-size: 12px !important; } /* -------------------------------------------------------------------------- 11. Alerts -------------------------------------------------------------------------- */ .alert { border: 1px solid var(--border); border-left: 3px solid var(--border); background: var(--zinc-50); border-radius: var(--r-surface); font-size: 14px; color: var(--text-primary); padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; } .alert .bi { color: var(--text-muted); font-size: 16px; flex-shrink: 0; margin-top: 1px; } .alert-danger { background: var(--rose-50); border-color: var(--pink-100); border-left-color: var(--rose-600); color: var(--rose-800); } .alert-danger .bi { color: var(--rose-600); } .alert-success { background: var(--green-50); border-color: #bbf7d0; border-left-color: var(--green-600); color: var(--green-800); } .alert-success .bi { color: var(--green-600); } .alert-warning { background: var(--amber-50); border-color: var(--amber-100); border-left-color: var(--amber-600); color: var(--amber-800); } .alert-warning .bi { color: var(--amber-600); } .alert-info { background: var(--blue-50); border-color: var(--blue-100); border-left-color: var(--blue-600); color: var(--blue-700); } .alert-info .bi { color: var(--blue-600); } .alert-dismissible .btn-close { padding: 14px 16px; opacity: 0.5; } .alert-dismissible .btn-close:hover { opacity: 1; } /* -------------------------------------------------------------------------- 12. Modals -------------------------------------------------------------------------- */ .modal-content { border: 1px solid var(--border); border-radius: var(--r-surface); box-shadow: var(--shadow-float); overflow: hidden; } .modal-header { background: var(--canvas); color: var(--text-primary); border-bottom: 1px solid var(--border); padding: 16px 20px; } .modal-title { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; } .modal-title .bi { color: var(--text-muted); font-size: 14px; } .modal-header .btn-close { filter: none; opacity: 0.5; } .modal-header .btn-close:hover { opacity: 1; } .modal-body { padding: 20px; background: var(--canvas); } .modal-footer { background: var(--zinc-50); border-top: 1px solid var(--border); padding: 12px 20px; gap: 8px; } /* -------------------------------------------------------------------------- 12b. Pagination (Catalyst spec) https://catalyst.tailwindui.com/docs/pagination -------------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 0 4px; margin: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 500; flex-wrap: wrap; } .pagination__list { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0; margin: 0; } .pagination__page, .pagination__prev, .pagination__next { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 10px; border-radius: var(--r-control); color: var(--text-primary); background: transparent; border: 1px solid transparent; text-decoration: none; transition: background 0.12s, border-color 0.12s, color 0.12s; font-variant-numeric: tabular-nums; line-height: 1; } .pagination__page:hover, .pagination__prev:hover, .pagination__next:hover { background: var(--hover); color: var(--text-primary); text-decoration: none; } /* Prev / Next — outline look for emphasis */ .pagination__prev, .pagination__next { border-color: var(--border); background: var(--canvas); padding: 0 12px; } .pagination__prev .bi, .pagination__next .bi { font-size: 12px; color: var(--text-muted); } .pagination__prev:hover .bi, .pagination__next:hover .bi { color: var(--text-primary); } /* Active page — solid zinc-900 fill (matches primary button) */ .pagination__page.is-active { background: var(--zinc-900); color: #fff; border-color: var(--zinc-900); } .pagination__page.is-active:hover { background: var(--zinc-800); color: #fff; } /* Disabled prev / next */ .pagination__prev.is-disabled, .pagination__next.is-disabled { color: var(--text-muted); border-color: var(--border-soft); background: var(--canvas); opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* Gap ellipsis */ .pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; color: var(--text-muted); font-weight: 400; } /* On mobile: keep prev/next visible, compress list */ @media (max-width: 575.98px) { .pagination { flex-direction: column; align-items: stretch; gap: 12px; } .pagination__list { justify-content: center; flex-wrap: wrap; } .pagination__prev, .pagination__next { justify-content: center; } } /* -------------------------------------------------------------------------- 13. Breadcrumb -------------------------------------------------------------------------- */ .breadcrumb { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; background: transparent; padding: 0; margin: 0; } .breadcrumb-item { color: var(--text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--zinc-400); content: '/'; } .breadcrumb-item a { color: var(--text-secondary); text-decoration: none; } .breadcrumb-item a:hover { color: var(--text-primary); } .breadcrumb-item.active { color: var(--text-primary); font-weight: 500; } /* -------------------------------------------------------------------------- 14. Auth pages (login / register) -------------------------------------------------------------------------- */ .auth-page { min-height: 100vh; background: var(--zinc-50); display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .auth-card { width: 100%; max-width: 400px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-surface); box-shadow: var(--shadow-pop); overflow: hidden; } .auth-card__header { background: var(--canvas); padding: 32px 32px 8px; text-align: center; border-bottom: 0; } .auth-card__logo { font-family: var(--font-sans); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; text-transform: none; color: var(--text-primary); line-height: 1.3; margin: 0 0 4px; display: inline-flex; align-items: center; gap: 10px; } .auth-card__logo-mark { width: 32px; height: 32px; border-radius: var(--r-control); background: var(--zinc-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .auth-card__logo-mark .bi { color: #fff; font-size: 16px; line-height: 1; } .auth-card__subtitle { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); margin: 0; } .auth-card__body { padding: 24px 32px 8px; } .auth-card__footer { padding: 12px 32px 24px; text-align: center; border-top: 0; } .auth-card__footer p { font-size: 13px; color: var(--text-muted); margin: 0; } .auth-card__footer a { color: var(--text-primary); font-weight: 500; text-decoration: underline; } .auth-card__footer a:hover { color: var(--text-secondary); } /* -------------------------------------------------------------------------- 15. Needs-PIN indicator -------------------------------------------------------------------------- */ @keyframes pulse-soft { 0% { opacity: 1; } 50% { opacity: 0.65; } 100% { opacity: 1; } } .badge-needs-pin, .badge.badge-pulse { animation: pulse-soft 2.4s ease-in-out infinite; } /* -------------------------------------------------------------------------- 16. Utility overrides -------------------------------------------------------------------------- */ .text-muted { color: var(--text-muted) !important; } .text-primary { color: var(--text-primary) !important; } .text-danger { color: var(--rose-700) !important; } .text-success { color: var(--green-700) !important; } .small, small { font-size: 12px; } /* Bootstrap container overrides — we own layout via .app-shell */ .container-fluid.py-4 { padding: 0 !important; max-width: 100%; margin: 0; } /* bg-light inside pin-add form */ .bg-light { background: var(--zinc-50) !important; border-radius: var(--r-surface); } /* rounded utilities — remap to our scale */ .rounded { border-radius: var(--r-surface) !important; } /* Links inside tables */ .table a { color: var(--text-primary); } .table a.text-decoration-none:hover { color: var(--text-secondary); text-decoration: underline !important; } /* -------------------------------------------------------------------------- 17. Empty state -------------------------------------------------------------------------- */ .text-center.py-5 .bi[style] { color: var(--zinc-300); } .text-center.py-4 .bi[style], .text-center.py-5 .bi[style] { font-size: 40px !important; } /* -------------------------------------------------------------------------- 18. Responsive -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .card-body { padding: 16px; } .modal-body { padding: 16px; } .table th, .table td { padding: 10px 12px; } .page-header h1, .d-flex.justify-content-between.align-items-center h1.h3 { font-size: 18px; } } @media (max-width: 575.98px) { h1, .h1 { font-size: 20px; } .btn { padding: 8px 12px; } } /* ========================================================================== Dark theme — component-level overrides ========================================================================== */ /* Cards (general) */ html.theme-dark .card { background: #18181b; border-color: #27272a; } html.theme-dark .card-header, html.theme-dark .card-header.bg-transparent { background: #18181b !important; border-bottom-color: #27272a; } html.theme-dark .card-footer { background: #18181b; border-top-color: #27272a; } /* Filter card tinted body */ html.theme-dark .card.mb-4 > .card-body { background: #111113; } /* Inputs */ html.theme-dark .form-control, html.theme-dark .form-select { background: #18181b; border-color: #3f3f46; color: #fafafa; } html.theme-dark .form-control::placeholder { color: #71717a; } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { border-color: #71717a; outline: 2px solid rgba(161, 161, 170, 0.25); } html.theme-dark .input-group-text { background: #27272a; border-color: #3f3f46; color: #d4d4d8; } /* Form check */ html.theme-dark .form-check-input { background: #18181b; border-color: #52525b; } html.theme-dark .form-check-input:hover:not(:checked) { border-color: #71717a; } html.theme-dark .form-check-input:checked { background-color: #fafafa !important; border-color: #fafafa !important; } html.theme-dark .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2318181b' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e"); } html.theme-dark .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2318181b'/%3e%3c/svg%3e"); } /* Buttons — invert primary to white-on-black */ html.theme-dark .btn-primary { background: #fafafa; border-color: #fafafa; color: #18181b; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), inset 0 -1px 0 0 rgba(0,0,0,0.08); } html.theme-dark .btn-primary:hover { background: #e4e4e7 !important; border-color: #e4e4e7 !important; color: #18181b !important; } html.theme-dark .btn-outline-secondary, html.theme-dark .btn-outline-primary, html.theme-dark .btn-outline-light { background: transparent; border-color: #3f3f46; color: #fafafa; } html.theme-dark .btn-outline-secondary:hover, html.theme-dark .btn-outline-primary:hover, html.theme-dark .btn-outline-light:hover { background: #27272a; border-color: #52525b; color: #fafafa; } html.theme-dark .btn-plain, html.theme-dark .btn-ghost { color: #fafafa; } html.theme-dark .btn-plain:hover, html.theme-dark .btn-ghost:hover { background: #27272a; color: #fafafa; } html.theme-dark .btn-plain-danger { color: #fda4af; } html.theme-dark .btn-plain-danger:hover { background: rgba(244, 63, 94, 0.1); color: #fda4af; } html.theme-dark .btn-outline-danger { background: transparent; border-color: #3f3f46; color: #fda4af; } html.theme-dark .btn-outline-danger:hover { background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.3); color: #fecaca; } html.theme-dark .btn-outline-success { background: transparent; border-color: #3f3f46; color: #86efac; } html.theme-dark .btn-outline-success:hover { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: #bbf7d0; } /* Badges — semi-transparent tint + lighter text */ html.theme-dark .badge.bg-primary { background: rgba(59, 130, 246, 0.15) !important; color: #93c5fd !important; } html.theme-dark .badge.bg-secondary, html.theme-dark .badge.bg-zinc, html.theme-dark .page-header .badge, html.theme-dark .d-flex.justify-content-between.align-items-center h1.h3 .badge.bg-secondary { background: rgba(161, 161, 170, 0.15) !important; color: #d4d4d8 !important; } html.theme-dark .badge.bg-success { background: rgba(34, 197, 94, 0.15) !important; color: #86efac !important; } html.theme-dark .badge.bg-warning, html.theme-dark .badge.bg-warning.text-dark { background: rgba(245, 158, 11, 0.15) !important; color: #fcd34d !important; } html.theme-dark .badge.bg-danger { background: rgba(244, 63, 94, 0.15) !important; color: #fda4af !important; } /* Alerts — dark translucent fills */ html.theme-dark .alert { background: #18181b; border-color: #27272a; color: #fafafa; } html.theme-dark .alert-danger { background: rgba(244, 63, 94, 0.08); border-color: rgba(244, 63, 94, 0.2); border-left-color: #e11d48; color: #fda4af; } html.theme-dark .alert-danger .bi { color: #fda4af; } html.theme-dark .alert-success { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.2); border-left-color: #16a34a; color: #86efac; } html.theme-dark .alert-success .bi { color: #86efac; } html.theme-dark .alert-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); border-left-color: #d97706; color: #fcd34d; } html.theme-dark .alert-warning .bi { color: #fcd34d; } html.theme-dark .alert-info { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); border-left-color: #2563eb; color: #93c5fd; } html.theme-dark .alert-info .bi { color: #93c5fd; } /* Modals */ html.theme-dark .modal-content { background: #18181b; border-color: #27272a; } html.theme-dark .modal-header { background: #18181b; border-bottom-color: #27272a; } html.theme-dark .modal-header .btn-close { filter: invert(1) grayscale(1); } html.theme-dark .modal-body { background: #18181b; } html.theme-dark .modal-footer { background: #0b0b0d; border-top-color: #27272a; } /* Combobox */ html.theme-dark .combobox__control { background: #18181b; border-color: #3f3f46; } html.theme-dark .combobox__panel { background: #18181b; border-color: #27272a; } html.theme-dark .combobox__option { color: #fafafa; } html.theme-dark .combobox__option:hover, html.theme-dark .combobox__option.is-active { background: #fafafa; color: #18181b; } html.theme-dark .combobox__option.is-selected::after { color: #a1a1aa; } html.theme-dark .combobox__option.is-selected:hover::after, html.theme-dark .combobox__option.is-selected.is-active::after { color: #18181b; } html.theme-dark .combobox__chevron { color: #a1a1aa; } /* Tables — row hover slightly lighter */ html.theme-dark .table-hover > tbody > tr:hover > td, html.theme-dark .table-hover > tbody > tr:hover > th { background: #18181b; } html.theme-dark .pin-table tbody tr:hover td { background: #18181b; } /* Monospace — keep muted in table cells */ html.theme-dark .table .font-monospace, html.theme-dark .table td .font-monospace, html.theme-dark .table td span.font-monospace { color: #d4d4d8; } /* Pagination */ html.theme-dark .pagination__prev, html.theme-dark .pagination__next { background: #18181b; border-color: #3f3f46; color: #fafafa; } html.theme-dark .pagination__prev:hover, html.theme-dark .pagination__next:hover, html.theme-dark .pagination__page:hover { background: #27272a; color: #fafafa; } html.theme-dark .pagination__page.is-active { background: #fafafa; color: #18181b; border-color: #fafafa; } html.theme-dark .pagination__page.is-active:hover { background: #e4e4e7; color: #18181b; } html.theme-dark .pagination__prev.is-disabled, html.theme-dark .pagination__next.is-disabled { background: #0f0f10; color: #52525b; border-color: #27272a; } /* Switch — track stays darker, thumb inverts too */ html.theme-dark .switch__track { background: #3f3f46; } html.theme-dark .switch__input:checked ~ .switch__track { background: #fafafa; } html.theme-dark .switch__thumb { background: #18181b; box-shadow: 0 1px 2px rgba(0,0,0,0.5); } html.theme-dark .switch-label:hover .switch__track { background: #52525b; } html.theme-dark .switch-label:hover .switch__input:checked ~ .switch__track { background: #e4e4e7; } /* Sidebar */ html.theme-dark .sidebar { border-right-color: #18181b; } html.theme-dark .sidebar__toggle { background: #18181b; border-color: #3f3f46; color: #fafafa; } html.theme-dark .sidebar__brand-mark { background: #fafafa; color: #18181b; } html.theme-dark .sidebar__avatar { background: #27272a; color: #fafafa; } html.theme-dark .sidebar__link i, html.theme-dark .sidebar__link .bi { color: #71717a; } html.theme-dark .sidebar__link:hover i, html.theme-dark .sidebar__link.is-active i, html.theme-dark .sidebar__link:hover .bi, html.theme-dark .sidebar__link.is-active .bi { color: #fafafa; } html.theme-dark .sidebar__collapse:hover { background: #27272a; color: #fafafa; } /* Auth pages */ html.theme-dark .auth-page { background: #09090b; } html.theme-dark .auth-card { background: #18181b; border-color: #27272a; box-shadow: 0 10px 40px rgba(0,0,0,0.7); } html.theme-dark .auth-card__logo { color: #fafafa; } html.theme-dark .auth-card__logo-mark { background: #fafafa; } html.theme-dark .auth-card__logo-mark .bi { color: #18181b; } /* Inline code (Catalyst Text) */ html.theme-dark code, html.theme-dark .inline-code { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: #fafafa; } /* Text links inside paragraphs */ html.theme-dark p a:not(.btn):not(.nav-link):not(.row-link), html.theme-dark .text-link, html.theme-dark .auth-card__footer a { color: #fafafa; text-decoration-color: rgba(250, 250, 250, 0.5); } html.theme-dark p a:not(.btn):not(.nav-link):not(.row-link):hover, html.theme-dark .text-link:hover, html.theme-dark .auth-card__footer a:hover { color: #fafafa; text-decoration-color: #fafafa; } /* Strong / bold */ html.theme-dark strong, html.theme-dark b { color: #fafafa; } /* Breadcrumb */ html.theme-dark .breadcrumb-item + .breadcrumb-item::before { color: #52525b; } html.theme-dark .breadcrumb-item a { color: #a1a1aa; } html.theme-dark .breadcrumb-item a:hover { color: #fafafa; } html.theme-dark .breadcrumb-item.active { color: #fafafa; } /* Sidebar logout icon button */ html.theme-dark .sidebar__logout { color: #a1a1aa; } html.theme-dark .sidebar__logout:hover { background: #27272a; color: #fafafa; } /* Theme toggle icons swap */ html:not(.theme-dark) .theme-icon-dark, html:not(.theme-dark) .theme-label-dark { display: none !important; } html.theme-dark .theme-icon-light, html.theme-dark .theme-label-light { display: none !important; }