/* ============================================================================ CyberSee — Component Style Variants ---------------------------------------------------------------------------- Rendered selectors are scoped by data-* attributes on so the same markup re-skins without touching JS. Variants are admin-selectable from Settings → Appearance. Token strategy: - default → no-op; the existing tokens/core/UI rules stay in charge. - other variants only override the properties they need; everything else still flows through --brand-* tokens. Selector targets cover the three table classes that account for >95% of tabular surfaces on the dashboard (see audit notes in style-tab partial): • .config-table — settings / configuration lists • .phishing-table — main threat data tables • .integrations-table — integrations management ============================================================================ */ /* ============================================================================ 1) Tables ============================================================================ */ /* The table-class roster reflects the audit on 2026-05-16: every table surface that ships its own class (vs raw Bootstrap .table) plus Bootstrap's own .table for the few places that use it bare. Adding a new table-named class? Append it to the :is(...) list below. */ /* ---- Minimal: radically airy, content-first ---- No table border, no row backgrounds, just typography. Cells get generous vertical breathing room and a near-invisible 1 px divider between rows. Headers are tiny + uppercase + bold so the column names read as labels above the data, not as a filled bar. Hover lights up the whole row in a brand-primary tint for a clear "you're aimed here" cue without breaking the visual restraint. */ body[data-table-style="minimal"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) { border: none !important; background: transparent !important; box-shadow: none !important; border-collapse: collapse !important; } body[data-table-style="minimal"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) thead th { background: transparent !important; border: none !important; border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 60%, transparent) !important; text-transform: uppercase !important; letter-spacing: .08em !important; font-size: 10px !important; font-weight: 700 !important; color: var(--brand-muted) !important; padding: 14px 14px !important; } body[data-table-style="minimal"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody td { border: none !important; border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 30%, transparent) !important; background: transparent !important; color: var(--brand-fg) !important; font-size: 13.5px !important; font-weight: 400 !important; padding: 18px 14px !important; line-height: 1.55 !important; } body[data-table-style="minimal"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr { background: transparent !important; box-shadow: none !important; transition: background .12s ease; } body[data-table-style="minimal"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr:last-child td { border-bottom: none !important; } body[data-table-style="minimal"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr:hover, body[data-table-style="minimal"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr:hover td { background: color-mix(in srgb, var(--brand-primary) 8%, transparent) !important; } /* ---- Cards: Notion / Linear-class row tiles ---- Design notes (after several iterations): - The row background stays IN THE SAME TONAL FAMILY as the wrapper (--brand-card-bg). Mixing with --brand-fg pulled the color towards a flat grey that clashed with the dark theme. Keeping card-bg as- is — and lifting with a hairline outline + drop shadow — makes each row read as a real card without breaking the site palette. - The card edge is a 1 px inset-spread shadow (no actual border, so it doesn't get cut by border-collapse: separate). Outline + drop shadow together is what dashboards like Notion / Linear use. - Tiny 3 % white mix in dark mode for the most subtle lift; light mode keeps card-bg untouched (already white). - Hover: brand-primary tint blends into the fill, the outline ring turns brand-primary, drop shadow grows, row lifts 2 px. - Header row gets a faint bottom-rule that anchors column labels visually above the row tiles. */ body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) { border-collapse: separate !important; border-spacing: 0 14px !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 12px; } /* Header row: small uppercase column labels + a faint bottom-rule that anchors them above the first card. padding-left matches body cell padding so the labels align with the data underneath. */ body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) thead th { background: transparent !important; border: none !important; border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 55%, transparent) !important; padding: 6px 20px 14px !important; color: var(--brand-muted) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; } /* Row container: clear any inherited border from core.css. The combo shadow does double duty — the first 0 0 0 1px shadow with `inset` off acts as a crisp 1 px outline (the card edge), the rest are the actual drop shadow for elevation. Single rule, no border-collapse conflicts. */ body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr { background: transparent !important; border: none !important; border-radius: 14px !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-fg) 8%, transparent), 0 6px 18px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .12); transition: box-shadow .25s ease, transform .25s ease, background .25s ease; } /* Card surface — keeps card-bg as-is (matches the wrapper's tonal family) with a barely-there 3 % white mix for the tiniest visual lift. The outline + shadow does the real card work. */ body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody td { background: color-mix(in srgb, var(--brand-card-bg) 97%, white 3%) !important; border: none !important; color: var(--brand-fg) !important; font-size: 14px !important; font-weight: 400 !important; padding: 20px 20px !important; vertical-align: middle !important; } /* Rounded corners on the leading + trailing edge cells. No leading accent line — caused awkward corner clipping in the previous design. */ body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody td:first-child { border-start-start-radius: 14px !important; border-end-start-radius: 14px !important; } body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody td:last-child { border-start-end-radius: 14px !important; border-end-end-radius: 14px !important; } /* Hover: outline ring turns brand-primary, drop shadow grows, fill picks up a 6 % brand-primary tint, row lifts 2 px. Subtle but the active row is unmistakable. */ body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr:hover td { background: color-mix(in srgb, var(--brand-card-bg) 92%, var(--brand-primary) 8%) !important; } body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 55%, transparent), 0 12px 28px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .15); transform: translateY(-2px); } /* Light mode: drop the white mix (white-on-white is invisible) and use a slightly softer outline + shadow recipe. */ html[data-bs-theme="light"] body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody td { background: var(--brand-card-bg) !important; } html[data-bs-theme="light"] body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-fg) 10%, transparent), 0 4px 14px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04); } html[data-bs-theme="light"] body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 45%, transparent), 0 10px 24px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .06); } /* Dark mode: stronger drop shadow + a slightly more visible outline so the rows lift cleanly off the dark wrapper. */ html[data-bs-theme="dark"] body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-fg) 10%, transparent), 0 8px 22px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25); } html[data-bs-theme="dark"] body[data-table-style="cards"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) tbody tr:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 65%, transparent), 0 16px 38px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .35); } /* ============================================================================ 2) Buttons (primary CTAs) — three distinct, polished looks ---------------------------------------------------------------------------- All three variants share the same press / focus / disabled affordances so the dashboard feels coherent regardless of which look the admin picks. Only the resting + hover paint differs: • default — premium gradient (--brand-primary → -700) with a soft brand-tinted glow. Lifts on hover, presses on active. • flat — solid brand fill, no gradient, no glow. Hover darkens by one shade (-600). Modern / minimal / Linear-style. • outlined — transparent fill, 2 px brand border, brand-coloured text. Fills with the brand on hover and the text turns white. The class roster covers every filled CTA we have audit-confirmed: Bootstrap (.btn-primary, .btn-danger, …), BEM custom (.btn--primary), semantic custom (.btn-primary-custom), and per-page save/create buttons (.save-btn, .create-button, …). .btn-warning is special: amber/yellow fails WCAG AA with white text, so it gets black text in every variant. ============================================================================ */ /* ─── Shared, all variants ─── Smooth transitions, tactile press feedback, brand-tinted focus ring, and a unified disabled state. These apply whatever variant is active so behaviour is consistent across the dashboard. */ body :is( .btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-primary-custom, .btn-danger-custom, .btn-success-custom, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn--primary, .btn-export-filters, .ui-btn--primary, .ui-btn--danger, .ui-btn--success, .ui-btn--warning, .ui-btn--info ) { transition: background .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease, color .2s ease !important; } body :is( .btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-primary-custom, .btn-danger-custom, .btn-success-custom, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn--primary, .btn-export-filters, .ui-btn--primary, .ui-btn--danger, .ui-btn--success, .ui-btn--warning, .ui-btn--info ):active:not(:disabled):not(.is-loading) { transform: translateY(0) scale(.97); } body :is( .btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-primary-custom, .btn-danger-custom, .btn-success-custom, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn--primary, .btn-export-filters, .ui-btn--primary, .ui-btn--danger, .ui-btn--success, .ui-btn--warning, .ui-btn--info ):disabled, body :is( .btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-primary-custom, .btn-danger-custom, .btn-success-custom, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn--primary, .btn-export-filters, .ui-btn--primary, .ui-btn--danger, .ui-btn--success, .ui-btn--warning, .ui-btn--info ).is-loading { opacity: .55 !important; cursor: not-allowed !important; transform: none !important; } /* ─── Variant: DEFAULT (premium gradient) ─── The base .btn-primary in core.css is just a flat solid fill — without an explicit "default" rule here, default and flat would look identical (which was the bug). The gradient + brand-tinted shadow makes default read as the polished baseline. */ body[data-button-style="default"] :is(.btn-primary, .btn-primary-custom, .btn--primary, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn-export-filters, .ui-btn--primary) { background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-800) 100%) !important; border: 1px solid var(--brand-primary) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .12) !important; } body[data-button-style="default"] :is(.btn-primary, .btn-primary-custom, .btn--primary, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn-export-filters, .ui-btn--primary):hover:not(:disabled):not(.is-loading) { background: linear-gradient(180deg, var(--brand-primary-600) 0%, var(--brand-primary) 100%) !important; box-shadow: 0 6px 18px rgba(var(--brand-primary-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .15) !important; transform: translateY(-1px); } body[data-button-style="default"] :is(.btn-danger, .btn-danger-custom, .ui-btn--danger) { background: linear-gradient(180deg, var(--brand-danger) 0%, var(--brand-danger-600) 100%) !important; border: 1px solid var(--brand-danger) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-danger-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .12) !important; } body[data-button-style="default"] :is(.btn-danger, .btn-danger-custom, .ui-btn--danger):hover:not(:disabled):not(.is-loading) { box-shadow: 0 6px 18px rgba(var(--brand-danger-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .15) !important; transform: translateY(-1px); } body[data-button-style="default"] :is(.btn-success, .btn-success-custom, .ui-btn--success) { background: linear-gradient(180deg, var(--brand-success) 0%, var(--brand-success-600) 100%) !important; border: 1px solid var(--brand-success) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-success-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .12) !important; } body[data-button-style="default"] :is(.btn-success, .btn-success-custom, .ui-btn--success):hover:not(:disabled):not(.is-loading) { box-shadow: 0 6px 18px rgba(var(--brand-success-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .15) !important; transform: translateY(-1px); } body[data-button-style="default"] :is(.btn-info, .ui-btn--info) { background: linear-gradient(180deg, var(--brand-info) 0%, var(--brand-info-600) 100%) !important; border: 1px solid var(--brand-info) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-info-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .12) !important; } body[data-button-style="default"] :is(.btn-info, .ui-btn--info):hover:not(:disabled):not(.is-loading) { box-shadow: 0 6px 18px rgba(var(--brand-info-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .15) !important; transform: translateY(-1px); } body[data-button-style="default"] :is(.btn-warning, .ui-btn--warning) { background: linear-gradient(180deg, var(--brand-warning) 0%, var(--brand-warning-600) 100%) !important; border: 1px solid var(--brand-warning) !important; color: #000 !important; box-shadow: 0 4px 12px rgba(var(--brand-warning-rgb), .25), inset 0 1px 0 rgba(255, 255, 255, .25) !important; } body[data-button-style="default"] :is(.btn-warning, .ui-btn--warning):hover:not(:disabled):not(.is-loading) { box-shadow: 0 6px 18px rgba(var(--brand-warning-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .3) !important; transform: translateY(-1px); } /* ─── Variant: FLAT (clean solid) ─── No gradient, no shadow, no lift. Hover darkens one shade. The whole look reads as "modern minimal" — the same approach Linear / Tailwind docs / Notion-style dashboards use for primary CTAs. */ body[data-button-style="flat"] :is( .btn-primary, .btn-danger, .btn-success, .btn-info, .btn-primary-custom, .btn-danger-custom, .btn-success-custom, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn--primary, .btn-export-filters, .ui-btn--primary, .ui-btn--danger, .ui-btn--success, .ui-btn--info ) { background-image: none !important; box-shadow: none !important; color: #fff !important; font-weight: 600 !important; } body[data-button-style="flat"] :is(.btn-warning, .ui-btn--warning) { background-image: none !important; box-shadow: none !important; color: #000 !important; font-weight: 600 !important; } body[data-button-style="flat"] :is(.btn-primary, .btn-primary-custom, .btn--primary, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn-export-filters, .ui-btn--primary) { background: var(--brand-primary) !important; border: 1px solid var(--brand-primary) !important; } body[data-button-style="flat"] :is(.btn-primary, .btn-primary-custom, .btn--primary, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn-export-filters, .ui-btn--primary):hover:not(:disabled):not(.is-loading) { background: var(--brand-primary-800) !important; border-color: var(--brand-primary-800) !important; transform: none !important; } body[data-button-style="flat"] :is(.btn-danger, .btn-danger-custom, .ui-btn--danger) { background: var(--brand-danger) !important; border: 1px solid var(--brand-danger) !important; } body[data-button-style="flat"] :is(.btn-danger, .btn-danger-custom, .ui-btn--danger):hover:not(:disabled):not(.is-loading) { background: var(--brand-danger-600) !important; border-color: var(--brand-danger-600) !important; transform: none !important; } body[data-button-style="flat"] :is(.btn-success, .btn-success-custom, .ui-btn--success) { background: var(--brand-success) !important; border: 1px solid var(--brand-success) !important; } body[data-button-style="flat"] :is(.btn-success, .btn-success-custom, .ui-btn--success):hover:not(:disabled):not(.is-loading) { background: var(--brand-success-600) !important; border-color: var(--brand-success-600) !important; transform: none !important; } body[data-button-style="flat"] :is(.btn-warning, .ui-btn--warning) { background: var(--brand-warning) !important; border: 1px solid var(--brand-warning) !important; } body[data-button-style="flat"] :is(.btn-warning, .ui-btn--warning):hover:not(:disabled):not(.is-loading) { background: var(--brand-warning-600) !important; border-color: var(--brand-warning-600) !important; transform: none !important; } body[data-button-style="flat"] :is(.btn-info, .ui-btn--info) { background: var(--brand-info) !important; border: 1px solid var(--brand-info) !important; } body[data-button-style="flat"] :is(.btn-info, .ui-btn--info):hover:not(:disabled):not(.is-loading) { background: var(--brand-info-600) !important; border-color: var(--brand-info-600) !important; transform: none !important; } /* ─── Variant: OUTLINED (ghost) ─── Transparent fill + 2 px brand border + brand-coloured text. On hover it fills with the brand and the text flips to white. Reads as a clear secondary affordance. Per-color rules preserve the semantic identity. */ body[data-button-style="outlined"] :is( .btn-primary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-primary-custom, .btn-danger-custom, .btn-success-custom, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn--primary, .btn-export-filters, .ui-btn--primary, .ui-btn--danger, .ui-btn--success, .ui-btn--warning, .ui-btn--info ) { background: transparent !important; background-image: none !important; box-shadow: none !important; font-weight: 700 !important; } body[data-button-style="outlined"] :is(.btn-primary, .btn-primary-custom, .btn--primary, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn-export-filters, .ui-btn--primary) { border: 2px solid var(--brand-primary) !important; color: var(--brand-primary) !important; } body[data-button-style="outlined"] :is(.btn-primary, .btn-primary-custom, .btn--primary, .save-btn, .save-button, .save-changes-button, .create-button, .add-user-button, .btn-export-filters, .ui-btn--primary):hover:not(:disabled):not(.is-loading) { background: var(--brand-primary) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), .25) !important; transform: translateY(-1px); } body[data-button-style="outlined"] :is(.btn-danger, .btn-danger-custom, .ui-btn--danger) { border: 2px solid var(--brand-danger) !important; color: var(--brand-danger) !important; } body[data-button-style="outlined"] :is(.btn-danger, .btn-danger-custom, .ui-btn--danger):hover:not(:disabled):not(.is-loading) { background: var(--brand-danger) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-danger-rgb), .25) !important; transform: translateY(-1px); } body[data-button-style="outlined"] :is(.btn-success, .btn-success-custom, .ui-btn--success) { border: 2px solid var(--brand-success) !important; color: var(--brand-success) !important; } body[data-button-style="outlined"] :is(.btn-success, .btn-success-custom, .ui-btn--success):hover:not(:disabled):not(.is-loading) { background: var(--brand-success) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-success-rgb), .25) !important; transform: translateY(-1px); } body[data-button-style="outlined"] :is(.btn-warning, .ui-btn--warning) { border: 2px solid var(--brand-warning) !important; color: var(--brand-warning) !important; } body[data-button-style="outlined"] :is(.btn-warning, .ui-btn--warning):hover:not(:disabled):not(.is-loading) { background: var(--brand-warning) !important; color: #000 !important; box-shadow: 0 4px 12px rgba(var(--brand-warning-rgb), .25) !important; transform: translateY(-1px); } body[data-button-style="outlined"] :is(.btn-info, .ui-btn--info) { border: 2px solid var(--brand-info) !important; color: var(--brand-info) !important; } body[data-button-style="outlined"] :is(.btn-info, .ui-btn--info):hover:not(:disabled):not(.is-loading) { background: var(--brand-info) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(var(--brand-info-rgb), .25) !important; transform: translateY(-1px); } /* Outlined keeps .filters-actions .btn-primary filled — it lives in a colored toolbar and going ghost there breaks the visual hierarchy. */ body[data-button-style="outlined"] .filters-actions .btn-primary { background: var(--brand-primary) !important; color: #fff !important; border-color: var(--brand-primary) !important; } /* ============================================================================ 3) Cards / Panels — three properly-distinct surface treatments ---------------------------------------------------------------------------- Same roster of ~45 panel/card classes for all three variants so an admin's pick rolls out uniformly across the dashboard. .preset-card is excluded — the appearance tab itself renders preset-cards and we don't want them re-skinned mid-pick. • default — premium baseline. Visible token-based border, layered drop shadow for depth, smooth hover lift. The shadow is split between a tight 1 px close shadow (anchors the card to the surface) and a wider soft shadow (the actual elevation cue). Hover bumps both + lifts 1 px. • flat — truly flat. No shadow ever. Stronger border (1 px brand- border at full opacity) so the card edge is the only cue. Hover transitions the border to a brand-primary blend so the card feels alive without depth. • glass — proper glassmorphic. Stronger blur (20 px) + saturate boost (180 %) for the frosted look. Inner highlight at the top edge simulates light hitting the surface. Hover grows the shadow and surfaces a faint brand-primary ring around the card. ============================================================================ */ /* ─── Variant: DEFAULT (premium baseline) ─── Adds a polished, designed baseline so default reads as "intentional" rather than "no override." Without this, default cards used whatever the per-page CSS happened to define — inconsistent across the dashboard. */ body[data-card-style="default"] :is(.settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card) { background: var(--brand-card-bg) !important; border: 1px solid var(--brand-border) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .06) !important; transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease !important; } html[data-bs-theme="dark"] body[data-card-style="default"] :is(.settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card) { box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 20px rgba(0, 0, 0, .35) !important; } /* ─── Variant: FLAT (clean minimal) ─── Zero shadow, single 1 px border at full brand-border. No hover lift — only the border-color shifts so the card visibly "responds" without gaining depth. */ body[data-card-style="flat"] :is(.settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card) { background: var(--brand-card-bg) !important; border: 1px solid var(--brand-border) !important; border-radius: 8px !important; box-shadow: none !important; transition: border-color .2s ease !important; } /* ─── Variant: GLASS (proper glassmorphic) ─── Stronger blur + saturate boost. Inset top highlight at 12 % white simulates light catching the leading edge (the defining glass cue). The fallback rgba bg still reads as translucent when backdrop-filter isn't supported. Stacking-context note: backdrop-filter creates a stacking context. We pin the card at z-index: 0 so it never floats above tooltips, modals, or the sidebar (Bootstrap's overlay layers use 1000+). */ body[data-card-style="glass"] :is(.settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card) { background: color-mix(in srgb, var(--brand-card-bg) 65%, transparent) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid color-mix(in srgb, var(--brand-fg) 12%, transparent) !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .12) !important; position: relative; z-index: 0; transition: box-shadow .25s ease, border-color .25s ease, background .25s ease !important; } html[data-bs-theme="dark"] body[data-card-style="glass"] :is(.settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card) { background: color-mix(in srgb, var(--brand-card-bg) 55%, transparent) !important; border-color: color-mix(in srgb, var(--brand-fg) 16%, transparent) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08) !important; } /* Print: backdrop-filter doesn't render to paper and the translucent fill prints as nearly invisible against the white sheet. Force a solid card background + drop the blur so cards stay readable when the admin prints a report. Applies to both light and dark stored tokens — the printer doesn't care which theme is active. */ @media print { body[data-card-style="glass"] :is(.settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card) { background: var(--brand-card-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } } /* ============================================================================ 4) Density (global) ---------------------------------------------------------------------------- Adjusts paddings on the surfaces users touch most: form-inputs, buttons, table cells, and card bodies. Targets only the project's own classes (not bare Bootstrap utilities) so third-party widgets stay untouched. ============================================================================ */ body[data-density="compact"] :is(.form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control) { padding: 6px 10px !important; min-height: 32px !important; } body[data-density="compact"] :is(.btn, .save-btn, .cache-btn, .ui-btn, .action-btn, .tmd-btn, .ref-copy-btn, .back-btn, .tab-button, .filter-chip, .btn--primary, .btn--ghost, .btn--sm, .btn-export-filters, .btn-clear-filters, .btn-secondary-custom, .btn-danger-custom, .btn-primary-custom, .btn-success-custom, .btn-primary-gradient, .danger-btn, .delete-btn, .warning-btn, .create-button, .save-button, .add-user-button) { padding: 6px 12px !important; } body[data-density="compact"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) :is(tbody td, thead th) { padding-block: 6px !important; padding-inline: 10px !important; } body[data-density="compact"] :is(.settings-box-body, .panel, .management-panel, .card, .card-like, .widget, .stat-card, .kpi-stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card, .settings-box, .side-widget, .help-card, .detail-card, .role-card, .integration-card) { padding: 12px !important; } body[data-density="spacious"] :is(.form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control) { padding: 14px 18px !important; min-height: 52px !important; } body[data-density="spacious"] :is(.btn, .save-btn, .cache-btn, .ui-btn, .action-btn, .tmd-btn, .ref-copy-btn, .back-btn, .tab-button, .filter-chip, .btn--primary, .btn--ghost, .btn--sm, .btn-export-filters, .btn-clear-filters, .btn-secondary-custom, .btn-danger-custom, .btn-primary-custom, .btn-success-custom, .btn-primary-gradient, .danger-btn, .delete-btn, .warning-btn, .create-button, .save-button, .add-user-button) { padding: 14px 22px !important; } body[data-density="spacious"] :is(.config-table, .phishing-table, .integrations-table, .am-table, .bin-results-table, .dl-table, .fat-table, .github-table, .mk-results-table, .usage-logs-table, .tdc-table, .osint-table, .pii-table-fixed, .table-download, .table-kv, .table) :is(tbody td, thead th) { padding-block: 18px !important; padding-inline: 18px !important; } body[data-density="spacious"] :is(.settings-box-body, .panel, .management-panel, .card, .card-like, .widget, .stat-card, .kpi-stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card, .settings-box, .side-widget, .help-card, .detail-card, .role-card, .integration-card) { padding: 28px !important; } /* ============================================================================ 5) Radius (global) ---------------------------------------------------------------------------- Re-tunes the border-radius for the surfaces that read as "containers". The default "rounded" value is a no-op (everything keeps the current project rhythm). Sharp drops to a near-square look; pill bumps inputs and buttons up to fully rounded. ============================================================================ */ /* Master button-shape list — audit on 2026-05-16 found 18+ distinct button class names beyond plain .btn. The :is(...) below covers Bootstrap variants (`.btn` catches anything with class="btn ..."), BEM custom (.btn--*), and standalone "*-btn" classes used across the dashboard. .btn-close and .skeleton-btn are excluded — close is a small × glyph that benefits from a circle, skeleton-btn is a loading placeholder. */ body[data-radius="sharp"] :is(.btn, .btn-icon, .save-btn, .cache-btn, .ui-btn, .action-btn, .tmd-btn, .ref-copy-btn, .back-btn, .tab-button, .filter-chip, .btn--primary, .btn--ghost, .btn--sm, .btn-export-filters, .btn-clear-filters, .btn-secondary-custom, .btn-danger-custom, .btn-primary-custom, .btn-success-custom, .btn-primary-gradient, .danger-btn, .delete-btn, .warning-btn, .create-button, .cancel-button, .save-button, .add-user-button, .save-changes-button, .form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control, .settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card, .badge, .ui-badge, .preset-card) { border-radius: 2px !important; } /* Buttons, single-line inputs, badges — fully rounded. textareas excluded on purpose: a 999 px radius on a multi-line field produces a stadium shape with semicircle short edges, which looks like a chat bubble more than a form field. They get the smaller card-radius below instead. */ body[data-radius="pill"] :is(.btn, .btn-icon, .save-btn, .cache-btn, .ui-btn, .action-btn, .tmd-btn, .ref-copy-btn, .back-btn, .tab-button, .filter-chip, .btn--primary, .btn--ghost, .btn--sm, .btn-export-filters, .btn-clear-filters, .btn-secondary-custom, .btn-danger-custom, .btn-primary-custom, .btn-success-custom, .btn-primary-gradient, .danger-btn, .delete-btn, .warning-btn, .create-button, .cancel-button, .save-button, .add-user-button, .save-changes-button, .form-control, .form-input, .form-select, .form-select-sm, select.form-control, .badge, .ui-badge) { border-radius: 999px !important; } /* Textareas in pill mode pick up the same softer radius as cards. */ body[data-radius="pill"] :is(.form-textarea, textarea.form-control) { border-radius: 16px !important; } body[data-radius="pill"] :is(.settings-card, .management-panel, .panel, .stat-card, .kpi-card, .kpi-stat-card, .kpi-hero-card, .kpi-service-card, .dl-stat-card, .osint-stat-card, .osint-card, .tmd-stat-card, .tmd-loader-card, .token-stat-card, .timeline-stat-card, .fat-stat-card, .modal-content, .card, .card-like, .widget, .settings-box, .side-widget, .dlm-card, .help-card, .detail-card, .policy-card, .integration-card, .step-card, .file-card, .keyword-card, .notification-card, .role-card, .audit-user-card, .audit-visitor-card, .wf-card, .perm-card, .permission-card, .logo-card, .port-card, .asset-card, .dz-card, .form-card, .tdc-card, .ui-card, .custom-card, .cs-selected-card, .cw-if-card, .cw-action-card, .preset-card) { border-radius: 24px !important; } /* ============================================================================ 6) Inputs (form fields) ---------------------------------------------------------------------------- Variants: • default – Bootstrap-shaped field with subtle bg + 4-sided border (current look, no override needed). • outlined – Transparent bg, full border in --brand-border, brand- primary border on focus. • underlined – No bg, no top / side borders; bottom border that turns brand-primary on focus. Inspired by Material text fields. Targets project + Bootstrap classes: .form-control / .form-input / select.form-control / textarea.form-control ============================================================================ */ /* ---- Outlined ---- Uses background-color (not the `background` shorthand) so .form-select keeps its background-image — that's where Bootstrap renders the dropdown arrow. The shorthand would wipe the image and leave bare selects with no chevron. Same reasoning applies to underlined below. */ body[data-input-style="outlined"] :is(.form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control) { background-color: transparent !important; border: 1px solid var(--brand-border) !important; box-shadow: none !important; } body[data-input-style="outlined"] :is(.form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control):focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18) !important; background-color: transparent !important; } /* ---- Underlined ---- padding-inline isn't pinned — let the density variant control horizontal spacing. Previously had `padding-inline: 4px !important` which fought `data-density="spacious"` and produced visually broken inputs (14 px top/bottom + 4 px left/right). */ body[data-input-style="underlined"] :is(.form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control) { background-color: transparent !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 1px solid var(--brand-border) !important; border-radius: 0 !important; box-shadow: none !important; transition: border-color .15s ease; } body[data-input-style="underlined"] :is(.form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control):focus { border-bottom: 2px solid var(--brand-primary) !important; box-shadow: none !important; background-color: transparent !important; } /* When pill-radius is also active, fully-rounded underlined fields read weirdly — keep them square-bottomed. */ body[data-input-style="underlined"][data-radius="pill"] :is(.form-control, .form-input, .form-select, .form-select-sm, .form-textarea, select.form-control, textarea.form-control) { border-radius: 0 !important; } /* ---- Form-check inputs (checkbox / radio / switch) ---- The text-field variants above don't reach .form-check-input because it's a different DOM (input plus a sibling label). The rules below re-skin the actual control under each input variant so the choice reads consistently across the form. */ /* Outlined: hollow box / circle, brand-primary border, fills on check. */ body[data-input-style="outlined"] .form-check-input { background-color: transparent !important; border: 1.5px solid var(--brand-border) !important; box-shadow: none !important; } body[data-input-style="outlined"] .form-check-input:checked { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } body[data-input-style="outlined"] .form-check-input:focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18) !important; } /* Underlined: drop the box entirely, render the choice as a bottom- bordered indicator. Works for checkbox + radio but Bootstrap's .form-switch keeps its pill — re-skin the switch track to match. */ body[data-input-style="underlined"] .form-check-input:not([type="radio"]) { background-color: transparent !important; border: none !important; border-bottom: 1.5px solid var(--brand-border) !important; border-radius: 0 !important; box-shadow: none !important; } body[data-input-style="underlined"] .form-check-input:not([type="radio"]):checked { border-bottom: 2px solid var(--brand-primary) !important; background-color: transparent !important; background-image: none !important; } /* Radios keep their circle — round shapes don't degrade gracefully to a single underline — but still pick up the brand fill on check. */ body[data-input-style="underlined"] .form-check-input[type="radio"] { background-color: transparent !important; border: 1.5px solid var(--brand-border) !important; box-shadow: none !important; } body[data-input-style="underlined"] .form-check-input[type="radio"]:checked { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } /* Form switches: keep the pill track but use brand colors */ body[data-input-style="underlined"] .form-switch .form-check-input { border: 1px solid var(--brand-border) !important; border-radius: 999px !important; } body[data-input-style="underlined"] .form-switch .form-check-input:checked { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } /* ============================================================================ 7) Tabs ---------------------------------------------------------------------------- Variants: • default – Tinted background + bottom-border underline on active (current look). No override. • underline – Pure underline only, no fills, minimal aesthetic. • pills – Fully rounded pill shape, active fills with --brand- primary and the underline is dropped. Targets the project's tab surfaces: .nav-tabs / .settings-tabs / .tab-btn ============================================================================ */ /* ---- Underline: clean, no fills ---- */ body[data-tabs-style="underline"] :is(.nav-tabs, .dl-nav-tabs) { gap: 18px; } body[data-tabs-style="underline"] :is(.nav-tabs, .dl-nav-tabs) .nav-link, body[data-tabs-style="underline"] .settings-tabs .tab-btn, body[data-tabs-style="underline"] .tab-btn { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding-block: 8px !important; padding-inline: 4px !important; color: var(--brand-muted); transition: color .15s ease, border-color .15s ease; } body[data-tabs-style="underline"] :is(.nav-tabs, .dl-nav-tabs) .nav-link:hover, body[data-tabs-style="underline"] .settings-tabs .tab-btn:hover, body[data-tabs-style="underline"] .tab-btn:hover { color: var(--brand-fg); background: transparent !important; } body[data-tabs-style="underline"] :is(.nav-tabs, .dl-nav-tabs) .nav-link.active, body[data-tabs-style="underline"] .settings-tabs .tab-btn.active, body[data-tabs-style="underline"] .tab-btn.active { background: transparent !important; color: var(--brand-primary) !important; border-bottom: 2px solid var(--brand-primary) !important; font-weight: 600; } /* ---- Pills: fully rounded, active is filled brand ---- */ body[data-tabs-style="pills"] :is(.nav-tabs, .dl-nav-tabs) { border-bottom: none !important; gap: 6px; } body[data-tabs-style="pills"] :is(.nav-tabs, .dl-nav-tabs) .nav-link, body[data-tabs-style="pills"] .settings-tabs .tab-btn, body[data-tabs-style="pills"] .tab-btn { background: transparent !important; border: 1px solid transparent !important; border-radius: 999px !important; padding-block: 6px !important; padding-inline: 14px !important; color: var(--brand-fg); transition: background .15s ease, color .15s ease; } body[data-tabs-style="pills"] :is(.nav-tabs, .dl-nav-tabs) .nav-link:hover, body[data-tabs-style="pills"] .settings-tabs .tab-btn:hover, body[data-tabs-style="pills"] .tab-btn:hover { background: color-mix(in srgb, var(--brand-primary) 10%, transparent) !important; color: var(--brand-primary) !important; } body[data-tabs-style="pills"] :is(.nav-tabs, .dl-nav-tabs) .nav-link.active, body[data-tabs-style="pills"] .settings-tabs .tab-btn.active, body[data-tabs-style="pills"] .tab-btn.active { background: var(--brand-primary) !important; color: #fff !important; border-color: var(--brand-primary) !important; } /* ============================================================================ 8) Badges ---------------------------------------------------------------------------- Targets the project's "ui-badge" family (the styled semantic-aware badges in ui-system.css). Each ui-badge--{variant} keeps its own accent color via tokens; this layer only switches the FILL pattern between three modes: • default – Current solid-tinted look (no override). • soft – Same color cue but with a softer 10% tint background and full-color text. Lower visual weight. • outline – Transparent fill, full color border + text. Highest contrast against busy backgrounds. .badge (raw Bootstrap) is intentionally left alone — those are often used for non-semantic counts where flipping the fill style would break readability. ============================================================================ */ /* Helper note: every variant below uses color-mix on the token that the existing .ui-badge--{name} rule already painted with, so the admin's brand-success/danger/warning/info choices flow through. */ /* ---- Soft: tinted background, full-color text ---- */ body[data-badge-style="soft"] .ui-badge--success { background: color-mix(in srgb, var(--brand-success) 14%, transparent) !important; color: var(--brand-success) !important; border-color: color-mix(in srgb, var(--brand-success) 30%, transparent) !important; } body[data-badge-style="soft"] .ui-badge--danger, body[data-badge-style="soft"] .ui-badge--critical { background: color-mix(in srgb, var(--brand-danger) 14%, transparent) !important; color: var(--brand-danger) !important; border-color: color-mix(in srgb, var(--brand-danger) 30%, transparent) !important; } body[data-badge-style="soft"] .ui-badge--warning, body[data-badge-style="soft"] .ui-badge--medium { background: color-mix(in srgb, var(--brand-warning) 14%, transparent) !important; color: var(--brand-warning) !important; border-color: color-mix(in srgb, var(--brand-warning) 30%, transparent) !important; } body[data-badge-style="soft"] .ui-badge--info, body[data-badge-style="soft"] .ui-badge--primary { background: color-mix(in srgb, var(--brand-info) 14%, transparent) !important; color: var(--brand-info) !important; border-color: color-mix(in srgb, var(--brand-info) 30%, transparent) !important; } body[data-badge-style="soft"] .ui-badge--high { background: color-mix(in srgb, var(--brand-risk-high) 14%, transparent) !important; color: var(--brand-risk-high) !important; border-color: color-mix(in srgb, var(--brand-risk-high) 30%, transparent) !important; } body[data-badge-style="soft"] .ui-badge--low { background: color-mix(in srgb, var(--brand-risk-low) 14%, transparent) !important; color: var(--brand-risk-low) !important; border-color: color-mix(in srgb, var(--brand-risk-low) 30%, transparent) !important; } /* ---- Outline: transparent, brand border + text ---- */ body[data-badge-style="outline"] .ui-badge--success { background: transparent !important; color: var(--brand-success) !important; border: 1px solid var(--brand-success) !important; } body[data-badge-style="outline"] .ui-badge--danger, body[data-badge-style="outline"] .ui-badge--critical { background: transparent !important; color: var(--brand-danger) !important; border: 1px solid var(--brand-danger) !important; } body[data-badge-style="outline"] .ui-badge--warning, body[data-badge-style="outline"] .ui-badge--medium { background: transparent !important; color: var(--brand-warning) !important; border: 1px solid var(--brand-warning) !important; } body[data-badge-style="outline"] .ui-badge--info, body[data-badge-style="outline"] .ui-badge--primary { background: transparent !important; color: var(--brand-info) !important; border: 1px solid var(--brand-info) !important; } body[data-badge-style="outline"] .ui-badge--high { background: transparent !important; color: var(--brand-risk-high) !important; border: 1px solid var(--brand-risk-high) !important; } body[data-badge-style="outline"] .ui-badge--low { background: transparent !important; color: var(--brand-risk-low) !important; border: 1px solid var(--brand-risk-low) !important; } /* ── Coverage for non-semantic variants ── The base ui-badge--{secondary, tag, entity, dynamic} are used across the dashboard (--secondary on 7+ pages, --tag on 20+) but weren't in the original variant inventory because they don't carry a brand semantic color. They still need to react to the badge-style choice so the appearance stays consistent. - secondary: neutral muted, uses --brand-muted as the source color - tag: keeps its squared corners + dashed border identity in every variant (it's a "this is a tag" affordance that should survive style switches), only the fill/text recipe changes - entity: only used in dev-ui-reference, not surfacing in user-facing pages, so left at its base style — no variant override needed - dynamic: bg color is set inline from DB values, can't be safely overridden by a static rule, also left at base */ /* Soft — secondary */ body[data-badge-style="soft"] .ui-badge--secondary { background: color-mix(in srgb, var(--brand-muted) 14%, transparent) !important; color: var(--brand-muted) !important; border-color: color-mix(in srgb, var(--brand-muted) 30%, transparent) !important; } /* Soft — tag (dashed border + squared corners preserved) */ body[data-badge-style="soft"] .ui-badge--tag { background: color-mix(in srgb, var(--brand-muted) 14%, transparent) !important; color: var(--brand-muted) !important; border: 1px dashed color-mix(in srgb, var(--brand-muted) 40%, transparent) !important; } /* Outline — secondary */ body[data-badge-style="outline"] .ui-badge--secondary { background: transparent !important; color: var(--brand-muted) !important; border: 1px solid var(--brand-muted) !important; } /* Outline — tag (dashed kept, fill removed) */ body[data-badge-style="outline"] .ui-badge--tag { background: transparent !important; color: var(--brand-muted) !important; border: 1px dashed var(--brand-muted) !important; } /* ============================================================================ 9) KPI / Stat Cards ---------------------------------------------------------------------------- Section ORDER MATTERS. .kpi-stat-card and the stat-card families are also targeted by section 3 (Card variants — flat/glass). The kpi rules below come AFTER section 3 on purpose: when both data-card-style and data-kpi-style are non-default, kpi wins the cascade for those shared selectors. Specificity is identical between the two sections (both use one attribute selector + :is(class), no nesting) so file order is the tie-breaker. Keep this block below section 3; don't reorder. The dashboard's stat surfaces (main-dashboard hero + service grid + the four-up KPI tiles + per-page stat-card families) share a markup pattern: icon + label + big number + sparkline/trend. The variants below re-skin that entire family without touching the markup. Targets: • .kpi-hero-card — large total-cases hero (left of grid) • .kpi-service-card — colored mini-tiles in the hero grid • .kpi-stat-card — four secondary KPI cards under the hero • .stat-card, .kpi-stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card — stat-card families used on inner pages Variants: • default — current modern look (gradient top stripe on service cards, subtle fade fills). No override. • minimal — strips the decorative chrome (gradient stripes, fade fills, hero card divider). Hairline borders, content- forward typography. Numbers and labels carry the visual weight. • filled — each card paints its identity color (--svc-color for service cards, --brand-primary tint for stat cards) as a soft 12% tint background. Colorful, easy to scan, distinct per-type. ============================================================================ */ /* ---- Minimal: strip decorative chrome, content-forward ---- */ body[data-kpi-style="minimal"] :is(.kpi-hero-card, .kpi-stat-card, .stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card) { background: var(--brand-card-bg) !important; border: 1px solid var(--brand-border) !important; box-shadow: none !important; background-image: none !important; } body[data-kpi-style="minimal"] :is(.kpi-hero-card, .kpi-stat-card, .stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card):hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border)) !important; box-shadow: none !important; transform: none !important; } /* Service tiles: drop the colored top stripe + fade fill */ body[data-kpi-style="minimal"] .kpi-service-card { background: var(--brand-card-bg) !important; background-image: none !important; border: 1px solid var(--brand-border) !important; border-top-width: 1px !important; box-shadow: none !important; } body[data-kpi-style="minimal"] .kpi-service-card:hover { background-image: none !important; border-color: color-mix(in srgb, var(--svc-color, var(--brand-primary)) 35%, var(--brand-border)) !important; box-shadow: none !important; transform: none !important; } body[data-kpi-style="minimal"] .kpi-service-card::after { display: none !important; } /* Hero card: remove the inner divider, drop padding slightly */ body[data-kpi-style="minimal"] .kpi-hero-left { border-right: 1px solid color-mix(in srgb, var(--brand-border) 55%, transparent) !important; } html[data-bs-theme="dark"] body[data-kpi-style="minimal"] :is(.kpi-hero-card, .kpi-stat-card, .stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card, .kpi-service-card) { background: color-mix(in srgb, var(--brand-card-bg) 92%, var(--brand-bg)) !important; } /* ---- Filled: identity-color tint per card ---- Service cards use their own `--svc-color` CSS variable (already set by inline style="--svc-color: #..."), so the tint follows whatever color was originally encoded for that service. The four stat cards under the hero pick up a brand-primary tint as a neutral default. */ body[data-kpi-style="filled"] .kpi-service-card { background: color-mix(in srgb, var(--svc-color, var(--brand-primary)) 12%, var(--brand-card-bg)) !important; background-image: none !important; border: 1px solid color-mix(in srgb, var(--svc-color, var(--brand-primary)) 35%, transparent) !important; border-top-width: 1px !important; } body[data-kpi-style="filled"] .kpi-service-card:hover { background: color-mix(in srgb, var(--svc-color, var(--brand-primary)) 18%, var(--brand-card-bg)) !important; border-color: color-mix(in srgb, var(--svc-color, var(--brand-primary)) 60%, transparent) !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--svc-color, var(--brand-primary)) 18%, transparent) !important; } body[data-kpi-style="filled"] .kpi-service-card::after { display: none !important; } body[data-kpi-style="filled"] .kpi-service-value, body[data-kpi-style="filled"] .kpi-service-label { color: var(--brand-fg) !important; } /* Hero + four-up stat cards: brand-primary tint */ body[data-kpi-style="filled"] :is(.kpi-hero-card, .kpi-stat-card, .stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card) { background: color-mix(in srgb, var(--brand-primary) 8%, var(--brand-card-bg)) !important; border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border)) !important; background-image: none !important; } body[data-kpi-style="filled"] :is(.kpi-hero-card, .kpi-stat-card, .stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card):hover { background: color-mix(in srgb, var(--brand-primary) 12%, var(--brand-card-bg)) !important; border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-border)) !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-primary) 15%, transparent) !important; } /* Light-mode tweak: tint is barely visible at 8 % on white. Bump it. */ html[data-bs-theme="light"] body[data-kpi-style="filled"] :is(.kpi-hero-card, .kpi-stat-card, .stat-card, .fat-stat-card, .dl-stat-card, .osint-stat-card, .tmd-stat-card, .token-stat-card, .timeline-stat-card) { background: color-mix(in srgb, var(--brand-primary) 6%, var(--brand-card-bg)) !important; } html[data-bs-theme="light"] body[data-kpi-style="filled"] .kpi-service-card { background: color-mix(in srgb, var(--svc-color, var(--brand-primary)) 8%, var(--brand-card-bg)) !important; }