/* =========================================================================== CompleteStatus — Design System (brand.css) --------------------------------------------------------------------------- Loaded AFTER Metronic's style.bundle.css on EVERY layout (app, auth, public site, status pages, errors), so equal-specificity overrides win by source order. This file never edits the vendored bundle: it defines the brand tokens, maps Bootstrap/Metronic's custom properties onto them, and restyles the shared components (buttons, forms, cards, badges, tables, sidebar). Public-website-only styling lives in site.css; auth pages add auth.css. Source of truth: Larry's branding brief (Logos/branding.md, 2026-10-01), summarised in docs/BRAND.md. NAVY = trust / structure BLUE = interaction / primary action GREEN = healthy / the logo check RED = failure / incident AMBER = warning WHITE + PALE GRAY = the workspace Every colour has a job. Green is never a generic action colour. ========================================================================= */ /* ---- 1. Brand tokens (names exactly as in the brief) ------------------ */ :root { /* Brand */ --brand-navy: #08172F; --brand-blue: #0787E3; --brand-blue-bright: #19A5F8; --brand-green: #55D900; /* Backgrounds */ --bg-page: #F6F8FB; --bg-white: #FFFFFF; --bg-subtle: #EFF4F9; --bg-dark: #0D1117; --bg-dark-elevated: #151A22; /* Text */ --text-primary: #0B1630; --text-secondary: #536174; --text-muted: #788598; --text-on-dark: #FFFFFF; --text-on-dark-muted: #AAB4C2; /* Borders */ --border-default: #E2E7EE; --border-strong: #CCD5E0; /* Actions */ --action-primary: #0787E3; --action-primary-hover: #006FCA; --action-light: #EAF5FD; /* Semantic status (fills: dots, bars, borders, icons, chart marks) */ --status-success: #22C55E; --status-warning: #F59E0B; --status-danger: #E83D5B; --status-info: #7C5CFC; --status-neutral: #64748B; /* ---- AA companions -------------------------------------------------- The brief requires WCAG 2.2 AA (4.5:1 for normal text). A few of its colours are fills that are too light to carry text, so TEXT uses a deeper step of the same hue. Never use the fill values above for small text; never use these for decoration. */ --action-fill: #0675CE; /* primary button ground: white 4.7:1 (#0787E3 is 3.8:1) */ --action-fill-hover: #0062B5; /* 5.8:1 */ --action-fill-active: #00559E; --link: #006FCA; /* = --action-primary-hover: 5.1:1 on white, 4.7:1 on --bg-page */ --link-hover: #00559E; --link-on-dark: #19A5F8; /* = --brand-blue-bright: 6.5:1 on navy */ --text-muted-aa: #647084; /* muted copy: 5.0:1 on white (#788598 is 3.8:1, placeholders/decor only) */ --status-success-text: #15803D; /* 5.0:1 on white */ --status-warning-text: #B45309; /* 5.0:1 */ --status-danger-text: #C81E3F; /* 5.7:1 */ --status-info-text: #6D4AE8; /* 5.5:1 */ --status-danger-fill: #D42A4A; /* solid red ground for white text: 5.0:1 */ --status-success-fill: #15803D; /* solid green ground for white text */ /* Soft status grounds (badges, alerts, row tints) */ --status-success-soft: #E9F9EF; --status-warning-soft: #FEF5E1; --status-danger-soft: #FDECEF; --status-info-soft: #F1EDFF; --status-neutral-soft: #EEF2F6; /* Tables */ --row-hover: #F8FAFC; --row-selected: #EEF7FD; --row-separator: #EDF1F6; /* Security grades: one grade-specific semantic scale everywhere (app, tools, reports). Text on each ground passes AA. */ --grade-a: var(--status-success-fill); /* #15803D — white 5.0:1 */ --grade-b: #387F29; /* still "good": a quieter green, white 5.0:1 */ --grade-c: var(--status-warning); /* amber — navy text */ --grade-d: #C2410C; /* orange — white 5.2:1 */ --grade-f: var(--status-danger-fill); /* red — white 5.0:1 */ /* Charts: normal metrics are blue; a comparison series (p95) is a muted lavender that still reads at 3:1 on white. wt-app.js reads these. */ --chart-primary: var(--brand-blue); --chart-compare: #8F8AC4; --chart-axis: var(--text-muted-aa); --chart-grid: #E8EDF3; /* Shape — restrained: infrastructure software, not a lifestyle product */ --radius-btn: 8px; --radius-input: 8px; --radius-card-sm: 10px; --radius-card: 12px; --radius-card-lg: 14px; /* Elevation — cards are defined by white + border, with only a breath of shadow */ --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04); --shadow-raised: 0 2px 4px rgba(15, 23, 42, .05), 0 12px 28px rgba(15, 23, 42, .08); --shadow-popover: 0 4px 8px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .12); --focus-ring: 0 0 0 3px rgba(7, 135, 227, .15); --focus-outline: #0787E3; /* Type */ --font-sans: Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; /* Motion: 150–200ms, never bouncy */ --ease: cubic-bezier(.2, .7, .2, 1); --dur: 180ms; /* Legacy aliases (pre-2026-10 names still referenced across the app) */ --wt-ink-900: var(--brand-navy); --wt-ink-800: #0B1B35; --wt-ink-700: #10213D; --wt-ink-600: #152946; --wt-ink-500: #1E3354; --wt-brand-blue: var(--brand-blue); --wt-up: var(--status-success); --wt-warn: var(--status-warning); --wt-down: var(--status-danger); } /* ---- 2. Light theme: map Bootstrap/Metronic onto the tokens ------------- */ :root, [data-bs-theme="light"] { --wt-primary: var(--action-fill); --wt-primary-rgb: 6, 117, 206; --wt-primary-hover: var(--action-fill-hover); --wt-primary-active: var(--action-fill-active); --wt-primary-text: var(--link); --wt-primary-text-rgb: 0, 111, 202; --wt-accent: var(--status-success-text); --wt-accent-rgb: 21, 128, 61; --wt-accent-strong: var(--status-success); --wt-focus-glow: rgba(7, 135, 227, .15); --bs-font-sans-serif: var(--font-sans); --bs-font-monospace: var(--font-mono); --bs-body-color: var(--text-primary); --bs-body-color-rgb: 11, 22, 48; --bs-heading-color: var(--text-primary); --bs-body-bg: var(--bg-white); --bs-body-bg-rgb: 255, 255, 255; --bs-app-bg-color: var(--bg-page); --bs-app-blank-bg-color: var(--bg-white); --bs-border-color: var(--border-default); --bs-border-radius: var(--radius-btn); --bs-border-radius-sm: 6px; --bs-border-radius-lg: var(--radius-card); --bs-border-radius-xl: var(--radius-card-lg); --bs-root-card-border-color: var(--border-default); --bs-root-card-box-shadow: var(--shadow-card); /* Blue-gray neutral ramp (Metronic's 100–900 slots) */ --bs-gray-100: #F6F8FB; --bs-gray-100-rgb: 246, 248, 251; --bs-gray-200: #EFF4F9; --bs-gray-200-rgb: 239, 244, 249; --bs-gray-300: #E2E7EE; --bs-gray-300-rgb: 226, 231, 238; --bs-gray-400: #CCD5E0; --bs-gray-400-rgb: 204, 213, 224; --bs-gray-500: #788598; --bs-gray-500-rgb: 120, 133, 152; --bs-gray-600: #5B677B; --bs-gray-600-rgb: 91, 103, 123; --bs-gray-700: #44526A; --bs-gray-700-rgb: 68, 82, 106; --bs-gray-800: #24324A; --bs-gray-800-rgb: 36, 50, 74; --bs-gray-900: #0B1630; --bs-gray-900-rgb: 11, 22, 48; --bs-gray: #5B677B; --bs-gray-dark: #24324A; --bs-text-gray-100: #F6F8FB; --bs-text-gray-200: #EFF4F9; --bs-text-gray-300: #E2E7EE; --bs-text-gray-400: #8A96A8; --bs-text-gray-500: var(--text-muted-aa); --bs-text-gray-600: var(--text-secondary); --bs-text-gray-700: #44526A; --bs-text-gray-800: #24324A; --bs-text-gray-900: var(--text-primary); --bs-text-muted: var(--text-muted-aa); --bs-secondary-color: var(--text-secondary); --bs-light: var(--bg-subtle); --bs-light-rgb: 239, 244, 249; --bs-light-active: var(--border-default); --bs-light-inverse: #24324A; --bs-secondary: var(--bg-subtle); --bs-secondary-rgb: 239, 244, 249; --bs-secondary-bg: var(--bg-subtle); --bs-dark: var(--brand-navy); --bs-dark-rgb: 8, 23, 47; --bs-text-dark: var(--brand-navy); /* Primary = blue (interaction) */ --bs-primary: var(--action-fill); --bs-primary-rgb: 6, 117, 206; --bs-primary-active: var(--action-fill-hover); --bs-primary-light: var(--action-light); --bs-primary-inverse: #FFFFFF; --bs-primary-clarity: rgba(7, 135, 227, .2); --bs-primary-bg-subtle: var(--action-light); --bs-primary-border-subtle: #B9DDF7; --bs-primary-text-emphasis: var(--link); --bs-text-primary: var(--link); --bs-link-color: var(--link); --bs-link-color-rgb: 0, 111, 202; --bs-link-hover-color: var(--link-hover); --bs-link-hover-color-rgb: 0, 85, 158; /* Status */ --bs-success: var(--status-success); --bs-success-rgb: 34, 197, 94; --bs-success-active: #16A34A; --bs-success-light: var(--status-success-soft); --bs-success-clarity: rgba(34, 197, 94, .2); --bs-text-success: var(--status-success-text); --bs-warning: var(--status-warning); --bs-warning-rgb: 245, 158, 11; --bs-warning-active: #D97706; --bs-warning-light: var(--status-warning-soft); --bs-warning-inverse: var(--text-primary); --bs-warning-clarity: rgba(245, 158, 11, .2); --bs-text-warning: var(--status-warning-text); --bs-danger: var(--status-danger); --bs-danger-rgb: 232, 61, 91; --bs-danger-active: var(--status-danger-fill); --bs-danger-light: var(--status-danger-soft); --bs-danger-clarity: rgba(232, 61, 91, .2); --bs-text-danger: var(--status-danger-text); --bs-info: var(--status-info); --bs-info-rgb: 124, 92, 252; --bs-info-active: #6D4AE8; --bs-info-light: var(--status-info-soft); --bs-info-clarity: rgba(124, 92, 252, .2); --bs-text-info: var(--status-info-text); --bs-form-valid-border-color: var(--status-success); --bs-form-invalid-border-color: var(--status-danger); --bs-form-invalid-color: var(--status-danger-text); /* Menus / dropdowns */ --bs-menu-dropdown-box-shadow: var(--shadow-popover); --bs-menu-heading-color: var(--text-muted-aa); --bs-menu-link-color-hover: var(--link); --bs-menu-link-color-show: var(--link); --bs-menu-link-color-here: var(--link); --bs-menu-link-color-active: var(--link); --bs-menu-link-bg-color-hover: var(--bg-page); --bs-menu-link-bg-color-show: var(--bg-page); --bs-menu-link-bg-color-here: var(--action-light); --bs-menu-link-bg-color-active: var(--action-light); --bs-code-color: #24324A; --bs-code-bg: var(--bg-subtle); } /* ---- 3. Dark theme (the app's optional dark mode; public pages are light) */ [data-bs-theme="dark"] { --wt-primary: var(--action-fill); --wt-primary-rgb: 6, 117, 206; --wt-primary-hover: #0A82E0; --wt-primary-active: var(--action-fill-hover); --wt-primary-text: var(--link-on-dark); --wt-primary-text-rgb: 25, 165, 248; --wt-accent: #4ADE80; --wt-accent-rgb: 74, 222, 128; --wt-accent-strong: #4ADE80; --wt-focus-glow: rgba(25, 165, 248, .30); --text-muted-aa: #8A96A8; /* Hairlines and quiet grounds follow the theme, so anything drawn with the tokens (separators, card headers, input addons) stays dark. */ --border-default: #232B36; --border-strong: #2E3744; --bg-subtle: #1A2029; --row-hover: #1A2029; --row-selected: #142235; --row-separator: #222A35; --chart-compare: #A39EDB; --chart-axis: #8A96A8; --chart-grid: #232B36; --bs-body-color: #E6EBF2; --bs-body-color-rgb: 230, 235, 242; --bs-heading-color: #F2F5F9; --bs-body-bg: var(--bg-dark-elevated); --bs-body-bg-rgb: 21, 26, 34; --bs-app-bg-color: var(--bg-dark); --bs-app-blank-bg-color: var(--bg-dark); --bs-border-color: #232B36; --bs-root-card-border-color: #232B36; --bs-root-card-box-shadow: none; --bs-gray-100: #151A22; --bs-gray-100-rgb: 21, 26, 34; --bs-gray-200: #1A2029; --bs-gray-200-rgb: 26, 32, 41; --bs-gray-300: #232B36; --bs-gray-300-rgb: 35, 43, 54; --bs-gray-400: #2E3744; --bs-gray-400-rgb: 46, 55, 68; --bs-gray-500: #5D6878; --bs-gray-500-rgb: 93, 104, 120; --bs-gray-600: #8A96A8; --bs-gray-600-rgb: 138, 150, 168; --bs-gray-700: #AAB4C2; --bs-gray-700-rgb: 170, 180, 194; --bs-gray-800: #D5DCE5; --bs-gray-800-rgb: 213, 220, 229; --bs-gray-900: #F2F5F9; --bs-gray-900-rgb: 242, 245, 249; --bs-text-gray-400: #6E7A8C; --bs-text-gray-500: #8A96A8; --bs-text-gray-600: #9AA5B5; --bs-text-gray-700: #AAB4C2; --bs-text-gray-800: #D5DCE5; --bs-text-gray-900: #F2F5F9; --bs-text-muted: #8A96A8; --bs-light: #1A2029; --bs-light-rgb: 26, 32, 41; --bs-light-active: #232B36; --bs-light-inverse: #AAB4C2; --bs-primary: var(--action-fill); --bs-primary-rgb: 6, 117, 206; --bs-primary-active: #0A82E0; --bs-primary-light: #102538; --bs-primary-inverse: #FFFFFF; --bs-primary-text-emphasis: var(--link-on-dark); --bs-text-primary: var(--link-on-dark); --bs-link-color: var(--link-on-dark); --bs-link-color-rgb: 25, 165, 248; --bs-link-hover-color: #6CC4FA; --bs-success: var(--status-success); --bs-success-light: #12261C; --bs-text-success: #4ADE80; --bs-warning: var(--status-warning); --bs-warning-light: #2A2112; --bs-warning-inverse: var(--text-primary); --bs-text-warning: #FBBF24; --bs-danger: var(--status-danger); --bs-danger-light: #2C1820; --bs-text-danger: #F4708E; --bs-info: var(--status-info); --bs-info-light: #1F1B36; --bs-text-info: #B69CFF; --bs-menu-link-bg-color-hover: #1A2029; --bs-menu-link-bg-color-here: #102538; --bs-menu-link-bg-color-active: #102538; --bs-menu-link-color-hover: var(--link-on-dark); --bs-menu-link-color-active: var(--link-on-dark); --bs-code-color: #D5DCE5; --bs-code-bg: #1A2029; } /* text-primary / link-primary read --bs-primary-rgb (the button ground); text uses the AA link tint instead. */ .text-primary { color: var(--bs-text-primary) !important; } .link-primary { color: var(--bs-link-color) !important; } .link-primary:hover, .link-primary:focus { color: var(--bs-link-hover-color) !important; text-decoration-color: var(--bs-link-hover-color) !important; } /* ---- 4. Base type ------------------------------------------------------ */ /* Metronic pins html/body to 13px (!important). The brief asks for 15–17px body copy on the site and readable app text: 14px is the app's base (every Metronic rem scales with it); public pages size their copy explicitly. */ html, body { font-size: 14px !important; font-family: var(--font-sans); font-feature-settings: "cv11", "ss01"; } @media (max-width: 991.98px) { html, body { font-size: 13px !important; } } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--bs-heading-color); letter-spacing: -.011em; } code { color: var(--bs-code-color); background-color: var(--bs-code-bg); border-radius: 5px; font-family: var(--font-mono); font-weight: 500; } ::selection { background: rgba(7, 135, 227, .18); } /* ---- 5. Buttons -------------------------------------------------------- */ .btn { --bs-btn-border-radius: var(--radius-btn); --bs-btn-font-weight: 600; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } @media (max-width: 767.98px) { /* Touch targets: 44px minimum on phones (brief: mobile). Inline/link-style buttons keep their own height. */ .btn:not(.btn-icon):not(.btn-sm):not(.btn-link):not(.btn-flush) { min-height: 44px; } } /* Primary — blue, white text, AA ground */ .btn.btn-primary { --bs-btn-color: #FFFFFF; --bs-btn-bg: var(--action-fill); --bs-btn-border-color: var(--action-fill); --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--action-fill-hover); --bs-btn-hover-border-color: var(--action-fill-hover); --bs-btn-focus-shadow-rgb: 7, 135, 227; --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: var(--action-fill-active); --bs-btn-active-border-color: var(--action-fill-active); --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: var(--action-fill); --bs-btn-disabled-border-color: var(--action-fill); color: #FFFFFF; background-color: var(--action-fill); border-color: var(--action-fill); } .btn.btn-primary:hover:not(.btn-active), .btn.btn-primary:focus-visible:not(.btn-active) { color: #FFFFFF !important; background-color: var(--action-fill-hover) !important; border-color: var(--action-fill-hover) !important; } .btn.btn-primary:active:not(.btn-active), .btn.btn-primary.active { background-color: var(--action-fill-active) !important; border-color: var(--action-fill-active) !important; } /* Secondary — very light blue-gray ground, navy text */ .btn.btn-light, .btn.btn-secondary { color: #24324A; background-color: var(--bg-subtle); border-color: var(--bg-subtle); } .btn.btn-light:hover:not(.btn-active), .btn.btn-secondary:hover:not(.btn-active), .btn.btn-light:focus-visible:not(.btn-active) { color: var(--text-primary) !important; background-color: var(--border-default) !important; border-color: var(--border-default) !important; } [data-bs-theme="dark"] .btn.btn-light, [data-bs-theme="dark"] .btn.btn-secondary { color: #D5DCE5; background-color: #1A2029; border-color: #1A2029; } [data-bs-theme="dark"] .btn.btn-light:hover:not(.btn-active), [data-bs-theme="dark"] .btn.btn-secondary:hover:not(.btn-active) { color: #FFFFFF !important; background-color: #232B36 !important; border-color: #232B36 !important; } /* Soft primary — pale blue ground, blue text */ .btn.btn-light-primary { --bs-btn-color: var(--link); color: var(--link); background-color: var(--action-light); border-color: var(--action-light); } .btn.btn-light-primary:hover:not(.btn-active), .btn.btn-light-primary:focus-visible:not(.btn-active), .btn.btn-light-primary.active { color: #FFFFFF !important; background-color: var(--action-fill) !important; border-color: var(--action-fill) !important; } [data-bs-theme="dark"] .btn.btn-light-primary { --bs-btn-color: var(--link-on-dark); color: var(--link-on-dark); background-color: #102538; border-color: #102538; } /* Outline (neutral) */ .btn.btn-outline, .btn.btn-outline-secondary { border: 1px solid var(--border-strong); color: var(--text-primary); background: var(--bg-white); } [data-bs-theme="dark"] .btn.btn-outline, [data-bs-theme="dark"] .btn.btn-outline-secondary { color: #E6EBF2; background: transparent; border-color: #2E3744; } /* Danger — red only for destructive actions; white text needs the deeper fill */ .btn.btn-danger { color: #FFFFFF; background-color: var(--status-danger-fill); border-color: var(--status-danger-fill); } .btn.btn-danger:hover:not(.btn-active), .btn.btn-danger:focus-visible:not(.btn-active) { color: #FFFFFF !important; background-color: #B71C3A !important; border-color: #B71C3A !important; } /* ---- 6. Forms ---------------------------------------------------------- */ .form-control, .form-select { border: 1px solid var(--border-strong); border-radius: var(--radius-input); color: var(--text-primary); font-weight: 400; min-height: 42px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .form-control-sm, .form-select-sm { min-height: 34px; } textarea.form-control { min-height: 0; } .form-control::placeholder { color: var(--text-muted); opacity: 1; } .form-control:focus, .form-select:focus, .form-control.form-control-solid:focus { border-color: var(--focus-outline); box-shadow: var(--focus-ring); outline: none; } .form-control.form-control-solid, .form-select.form-select-solid { background-color: var(--bg-white); border-color: var(--border-strong); color: var(--text-primary); } /* Metronic's "solid" fields swap to a grey ground (and grey text) on focus; the brand keeps them white with the blue border + ring. */ .form-control.form-control-solid:focus, .form-control.form-control-solid:active, .form-select.form-select-solid:focus, .form-select.form-select-solid:active, .dropdown.show > .form-control.form-control-solid { background-color: var(--bg-white); border-color: var(--focus-outline) !important; color: var(--text-primary); } .form-control:disabled, .form-select:disabled, .form-control[readonly].form-control-solid { background-color: var(--bg-subtle); border-color: var(--border-default); color: var(--text-secondary); } .input-group-text { background-color: var(--bg-subtle); border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: var(--radius-input); } .input-group.input-group-solid .input-group-text, .input-group.input-group-solid .form-control { border-color: var(--border-strong); } .form-control::file-selector-button { background-color: var(--bg-subtle); color: var(--text-primary); } .form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--status-danger) !important; } .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(232, 61, 91, .15); } /* Errors are never colour alone: the red border always comes with a text message under the field. */ .invalid-feedback, .fv-plugins-message-container.invalid-feedback { color: var(--status-danger-text); font-weight: 500; } .form-label { color: var(--bs-heading-color); font-weight: 500; } .form-text { color: var(--text-muted-aa); } .required::after { color: var(--status-danger-text); } /* Checkboxes, radios and switches. Metronic's "solid" controls are a pale grey tile with no border: invisible on a white card (WCAG 1.4.11 needs 3:1 for a control's boundary). Unchecked = white + a #8A96A8 edge (3.0:1); checked = blue. Switch knobs follow Bootstrap: grey when off, white on. */ .form-check-input { border: 1.5px solid #8A96A8; background-color: var(--bg-white); } .form-check.form-check-solid .form-check-input { border: 1.5px solid #8A96A8; } .form-check.form-check-solid .form-check-input:not(:checked), .form-switch.form-check-solid .form-check-input:not(:checked) { background-color: var(--bg-white); } .form-check-input:checked, .form-check.form-check-solid .form-check-input:checked, .form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate, .form-check-input[type=checkbox]:indeterminate { background-color: var(--action-fill); border-color: var(--action-fill); } .form-check-input:focus { box-shadow: var(--focus-ring); border-color: var(--focus-outline); } /* Metronic colours check/radio labels with --bs-gray-500, a decoration grey (3.7:1); a label is text, so it gets the secondary text colour. */ .form-check-label { color: var(--text-secondary); } .form-check-input:disabled { opacity: .55; } .form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label { opacity: .7; } .form-switch .form-check-input:not(:checked), .form-switch.form-check-solid .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23788598'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); } /* A selected card-style choice (Metronic .form-check-image / wall themes). */ .form-check-image.active .form-check-wrapper { border-color: var(--brand-blue); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .form-control.form-control-solid, [data-bs-theme="dark"] .form-select.form-select-solid { background-color: #0F141B; border-color: #2E3744; color: #E6EBF2; } [data-bs-theme="dark"] .form-control.form-control-solid:focus, [data-bs-theme="dark"] .form-select.form-select-solid:focus, [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #0F141B; color: #F2F5F9; border-color: var(--brand-blue-bright) !important; box-shadow: 0 0 0 3px rgba(25, 165, 248, .22); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: #151A22; border-color: #232B36; color: #8A96A8; } [data-bs-theme="dark"] .input-group-text, [data-bs-theme="dark"] .form-control::file-selector-button { background-color: #1A2029; border-color: #2E3744; color: #AAB4C2; } [data-bs-theme="dark"] .form-check-input, [data-bs-theme="dark"] .form-check.form-check-solid .form-check-input:not(:checked), [data-bs-theme="dark"] .form-switch.form-check-solid .form-check-input:not(:checked) { background-color: #0F141B; border-color: #6E7A8C; } [data-bs-theme="dark"] .form-check-input:checked { background-color: var(--action-fill); border-color: var(--action-fill); } [data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238A96A8'/%3e%3c/svg%3e"); } /* ---- 7. Cards ---------------------------------------------------------- */ .card { --bs-card-border-color: var(--border-default); --bs-card-border-radius: var(--radius-card); --bs-card-inner-border-radius: calc(var(--radius-card) - 1px); --bs-card-box-shadow: var(--shadow-card); } .card .card-header { border-bottom-color: var(--border-default); } .card .card-footer { border-top-color: var(--border-default); } [data-bs-theme="dark"] .card { --bs-card-border-color: #232B36; --bs-card-box-shadow: none; } /* ---- 8. Badges: status pairs colour with text (never colour alone) ----- */ .badge { --bs-badge-border-radius: 6px; font-weight: 600; letter-spacing: .01em; } .badge-light-primary { color: var(--link); background-color: var(--action-light); } .badge-light-success { color: var(--status-success-text); background-color: var(--status-success-soft); } .badge-light-warning { color: var(--status-warning-text); background-color: var(--status-warning-soft); } .badge-light-danger { color: var(--status-danger-text); background-color: var(--status-danger-soft); } .badge-light-info { color: var(--status-info-text); background-color: var(--status-info-soft); } .badge-light, .badge-light-dark, .badge-secondary { color: #24324A; background-color: var(--status-neutral-soft); } .badge-primary { color: #FFFFFF; background-color: var(--action-fill); } .badge-success { color: #FFFFFF; background-color: var(--status-success-fill); } .badge-danger { color: #FFFFFF; background-color: var(--status-danger-fill); } .badge-warning { color: var(--text-primary); background-color: var(--status-warning); } .badge-info { color: #FFFFFF; background-color: var(--status-info-text); } [data-bs-theme="dark"] .badge-light-primary { color: var(--link-on-dark); background-color: #102538; } [data-bs-theme="dark"] .badge-light-success { color: #4ADE80; background-color: #12261C; } [data-bs-theme="dark"] .badge-light-warning { color: #FBBF24; background-color: #2A2112; } [data-bs-theme="dark"] .badge-light-danger { color: #F4708E; background-color: #2C1820; } [data-bs-theme="dark"] .badge-light-info { color: #B69CFF; background-color: #1F1B36; } [data-bs-theme="dark"] .badge-light, [data-bs-theme="dark"] .badge-secondary { color: #AAB4C2; background-color: #1A2029; } /* ---- 9. Tables --------------------------------------------------------- */ /* White cards, very light separators, no zebra, hover #F8FAFC, selected #EEF7FD, muted column labels. */ .table { --bs-table-border-color: var(--row-separator); --bs-table-hover-bg: var(--row-hover); --bs-table-active-bg: var(--row-selected); --bs-table-striped-bg: var(--row-hover); } .table.table-row-dashed tr, .table.table-row-bordered tr { border-bottom-style: solid !important; border-bottom-color: var(--row-separator) !important; } .table.table-row-gray-100 tr, .table.table-row-gray-200 tr, .table.table-row-gray-300 tr { border-bottom-color: var(--row-separator) !important; } .table thead tr th, .table thead th { color: var(--text-muted-aa); } .table tbody tr { transition: background-color var(--dur) var(--ease); } .table.table-hover > tbody > tr:hover > * , .wt-row-hover > tbody > tr:hover > * { background-color: var(--row-hover); --bs-table-accent-bg: var(--row-hover); } .table > tbody > tr.is-selected > *, .table > tbody > tr.selected > * { background-color: var(--row-selected); } /* ---- 10. Dropdowns / popovers ----------------------------------------- */ .dropdown-menu, .menu-sub-dropdown { border: 1px solid var(--border-default); border-radius: var(--radius-card-sm); box-shadow: var(--shadow-popover); } [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .menu-sub-dropdown { border-color: #232B36; } /* ---- Layout utilities Metronic/Bootstrap omits ------------------------- */ /* Bootstrap 5 / Metronic 8 ship NO `.min-w-0` (it's a Tailwind utility), yet several views use it as the flex/grid child guard that lets `.text-truncate` actually engage — without `min-width:0` a flex item refuses to shrink below its content's intrinsic width and long strings force horizontal page scroll. Defining it here (loaded after the bundle) makes every existing use work: dashboard live panel, page-health panel, redirect tracer, wall editor. */ .min-w-0 { min-width: 0 !important; } /* ---- Accent (check green) — sparing utilities -------------------------- */ .text-wt-accent { color: var(--wt-accent) !important; } .bg-wt-accent { background-color: var(--status-success) !important; } .wt-beacon-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); } /* ---- Focus ring (keyboard) --------------------------------------------- */ /* Blue, always: green means "healthy", never "focused". */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-check-input:focus-visible, .menu-link:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; box-shadow: var(--focus-ring) !important; border-radius: 6px; } /* =========================================================================== Logo lockup (2026-10 masters; lockup ~6.57:1, mark ~1.47:1) Delivered as . Both ground variants are rendered; CSS shows the right one for the ground: the white-wordmark original on dark grounds (.wt-on-dark, .app-sidebar, dark theme), the ink-wordmark logo-light.png on light grounds. display:none also removes the hidden one from the accessibility tree, so screen readers announce the logo once. ========================================================================= */ .wt-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; line-height: 1; white-space: nowrap; } .wt-logo__mark, .wt-logo__full { flex: 0 0 auto; display: block; object-fit: contain; } .wt-logo__full--on-dark { display: none; } [data-bs-theme="dark"] .wt-logo__full--on-light, .wt-on-dark .wt-logo__full--on-light, .app-sidebar .wt-logo__full--on-light { display: none; } [data-bs-theme="dark"] .wt-logo__full--on-dark, .wt-on-dark .wt-logo__full--on-dark, .app-sidebar .wt-logo__full--on-dark { display: block; } .wt-on-dark { color: var(--text-on-dark); } /* =========================================================================== Application shell (layouts/app.blade.php: ) --------------------------------------------------------------------------- A visual refresh of the signed-in app. Navigation, markup structure and workflows are unchanged. Everything that changes sizing is scoped to .app-default so the public site, auth and status pages keep their own. ========================================================================= */ /* ---- Sidebar (brief: #0D1117 ground, #AAB4C2 text, #1A2029 active item, white active text, 2px brand-blue marker; compact) ---------------------- */ @media (min-width: 992px) { /* 265px → 248px: the lockup still fits with room for the edge toggle. */ .app-default { --bs-app-sidebar-width: 248px; --bs-app-sidebar-width-actual: 248px; } /* Restated at higher specificity, or the line above would win over Metronic's minimised width. */ .app-default[data-kt-app-sidebar-minimize=on] { --bs-app-sidebar-width: 75px; } } [data-kt-app-layout=dark-sidebar] .app-sidebar { background-color: var(--bg-dark); border-right: 1px solid #1A2029; } [data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo, .app-sidebar-logo { border-bottom: 1px solid rgba(255, 255, 255, .06); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link { color: var(--text-on-dark-muted); border-radius: 8px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title { color: var(--text-on-dark-muted); font-weight: 500; } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon { color: #7D889A; } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet { background-color: #5D6878; } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-arrow::after { background-color: #7D889A; } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) { background-color: var(--bg-dark-elevated); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i { color: var(--text-on-dark); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet { background-color: var(--text-on-dark-muted); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active { background-color: #1A2029; color: var(--text-on-dark); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title { color: var(--text-on-dark); font-weight: 600; } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon .svg-icon { color: var(--brand-blue-bright); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet { background-color: var(--brand-blue-bright); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-title, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-title { color: var(--text-on-dark); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i { color: var(--text-on-dark-muted); } [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-arrow::after, [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-arrow::after { background-color: var(--text-on-dark-muted); } /* Compact rows: 36px items, 14px labels, 18px icons (Metronic: ~45px / 15.4px / 21px). */ .app-default .app-sidebar .menu .menu-item { padding-block: 1px; } .app-default .app-sidebar .menu .menu-item .menu-link { padding: .45rem .75rem; min-height: 36px; } .app-default .app-sidebar-menu .menu > .menu-item > .menu-link > .menu-title, .app-default .app-sidebar .menu .menu-title { font-size: 1rem; line-height: 1.4; } .app-default .app-sidebar .menu-sub .menu-item .menu-link .menu-title { font-size: .95rem; } .app-default .app-sidebar .menu .menu-link .menu-icon { width: 1.5rem; margin-right: .65rem; } .app-default .app-sidebar .menu .menu-link .menu-icon i { font-size: 1.3rem !important; } .app-default .app-sidebar .menu .menu-item .menu-heading { font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .08em; } .app-default .app-sidebar .menu-item.pt-5 { padding-top: 1rem !important; } /* Active nav item: a 2px brand-blue marker inside the pill's straight left edge (blue = "you are here"; green is reserved for health). */ .app-sidebar .menu-item .menu-link.active { position: relative; } .app-sidebar .menu-item > .menu-link.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 0 2px 2px 0; background: var(--brand-blue); } /* Expanded/collapsed logo toggle: Metronic's `.app-sidebar-logo-minimize { display: none }` ties .wt-logo's inline-flex on specificity and this file loads later, so the mark leaked in next to the full lockup. Restate the toggle at higher specificity (mirrors style.bundle.css behaviour). */ .app-sidebar-logo .app-sidebar-logo-minimize { display: none; } [data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar-logo .app-sidebar-logo-default { display: none; } [data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar-logo .app-sidebar-logo-minimize { display: inline-flex; } [data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-logo .app-sidebar-logo-default { display: none; } [data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-logo .app-sidebar-logo-minimize { display: inline-flex; } /* Minimised: the check mark sits centred in the 75px rail. */ @media (min-width: 992px) { [data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-logo { padding-inline: 1.45rem !important; } } /* Edge toggle (collapse/expand): a small white key on the sidebar's edge. */ .app-default { --bs-app-sidebar-base-toggle-btn-bg-color: var(--bg-white); --bs-app-sidebar-base-toggle-btn-box-shadow: 0 1px 2px rgba(15, 23, 42, .10); --bs-app-sidebar-base-border-color: var(--border-default); } [data-bs-theme="dark"] .app-default { --bs-app-sidebar-base-toggle-btn-bg-color: #1A2029; --bs-app-sidebar-base-toggle-btn-box-shadow: none; --bs-app-sidebar-base-border-color: #2E3744; } .app-default .app-sidebar-toggle { width: 28px !important; height: 28px !important; border-radius: 8px; } .app-default .app-sidebar-toggle i { color: var(--text-secondary); font-size: 1.1rem !important; } .app-default .app-sidebar-toggle:hover i { color: var(--link); } [data-bs-theme="dark"] .app-default .app-sidebar-toggle i { color: var(--text-on-dark-muted); } /* ---- Header ------------------------------------------------------------ */ /* At the top it sits on the page ground; once you scroll it becomes a white, slightly translucent bar with a hairline (Metronic: a big soft shadow). */ .app-default { --bs-app-header-base-bg-color: transparent; --bs-app-header-minimize-bg-color: rgba(255, 255, 255, .92); --bs-app-header-minimize-box-shadow: 0 1px 0 var(--border-default); --bs-app-footer-bg-color: transparent; } [data-bs-theme="dark"] .app-default { --bs-app-header-base-bg-color: transparent; --bs-app-header-minimize-bg-color: rgba(13, 17, 23, .9); --bs-app-header-minimize-box-shadow: 0 1px 0 #1A2029; } .app-default[data-kt-app-header-minimize=on] .app-header { -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); } @media (max-width: 991.98px) { .app-default .app-header { border-bottom-color: var(--border-default) !important; } [data-bs-theme="dark"] .app-default .app-header { background-color: var(--bg-dark); border-bottom-color: #1A2029 !important; } } /* The header repeats the page title only once the toolbar's

has scrolled away (Metronic flags the scrolled header on ). */ .wt-header-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } [data-kt-app-header-minimize=on] .wt-header-title { opacity: 1; transform: none; } .wt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; font-weight: 700; font-size: .9rem; letter-spacing: .02em; color: #fff; background: var(--brand-navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .wt-avatar--lg { width: 44px; height: 44px; font-size: 1rem; } [data-bs-theme="dark"] .wt-avatar { background: #1A2B47; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } /* Topbar user identity chip */ .wt-user-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .4rem; border-radius: 8px; transition: background-color var(--dur) var(--ease); } .wt-user-chip:hover { background: rgba(7, 135, 227, .07); } .wt-new-btn { font-weight: 600; } /* ---- Toolbar: page title (22–26px) + breadcrumb + page actions --------- */ .wt-page-title { font-size: 1.75rem; /* 24.5px on desktop, 22.75px on phones */ line-height: 1.2; font-weight: 700; letter-spacing: -.022em; text-wrap: balance; } .app-default .app-toolbar .breadcrumb { font-size: .9rem !important; } .app-default .app-toolbar .breadcrumb .breadcrumb-item { color: var(--text-muted-aa); } .app-default .app-toolbar .breadcrumb .breadcrumb-item a:hover { color: var(--link) !important; } .wt-toolbar-actions { flex-wrap: wrap; justify-content: flex-end; } .wt-toolbar-actions .btn { white-space: nowrap; } @media (max-width: 767.98px) { /* Phones: the title takes its own row, the actions wrap below it. */ .app-default #kt_app_toolbar_container { flex-wrap: wrap; row-gap: .85rem; } .app-default #kt_app_toolbar_container > .page-title { width: 100%; margin-right: 0 !important; } .wt-toolbar-actions { width: 100%; justify-content: flex-start !important; } } /* ---- Buttons (app density) -------------------------------------------- */ /* Default buttons match the 42px fields (Metronic: 47px, 15.4px text), so a field and its button line up. Small buttons keep Metronic's ~34px. */ .app-default .btn { --bs-btn-font-size: 1rem; } .app-default .btn.btn-sm, .app-default .btn-group-sm > .btn { --bs-btn-font-size: .95rem; } .app-default .btn.btn-lg { --bs-btn-font-size: 1.1rem; } .app-default :not(.btn-group-sm):not(.btn-group-lg) > .btn:not(.btn-sm):not(.btn-lg):not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon):not(.btn-hover-outline) { padding: calc(.675rem + 1px) calc(1.3rem + 1px); } /* ---- Cards ------------------------------------------------------------- */ /* Card headings 15–18px (Metronic's .h3 reads ~19.5px at the app's size). */ .app-default .card > .card-header .card-title, .app-default .card > .card-header .card-title > .h3, .app-default .card > .card-header .card-title > h2, .app-default .card > .card-header .card-title > h3, .app-default .card > .card-header .card-title > .card-label { font-size: 1.2rem; line-height: 1.35; letter-spacing: -.012em; } .app-default .card > .card-header { min-height: 64px; } /* A soft divider instead of Metronic's dashed separators inside cards. */ .app-default .separator { border-bottom-color: var(--border-default); } .app-default .separator.separator-dashed { border-bottom-style: solid; } @media (max-width: 575.98px) { /* Phones: Metronic's 29–32px card padding eats a third of a 390px screen. */ .app-default .card > .card-header { padding-inline: 1.25rem; } .app-default .card > .card-body { padding: 1.25rem; } .app-default .card > .card-footer { padding-inline: 1.25rem; } /* Filter rows in a card header: full width, two selects per row. */ .app-default .card > .card-header .card-toolbar:has(.form-select) { width: 100%; } .app-default .card-toolbar > .d-flex.flex-wrap > .form-select { flex: 1 1 140px; width: auto !important; min-width: 0; } } /* ---- Forms (app density) ----------------------------------------------- */ /* 42px fields with 14px text (Metronic: 47px / 15.4px). Phones use 16px text so iOS never zooms the page on focus. */ .app-default .form-control:not(.form-control-sm):not(.form-control-lg):not(textarea), .app-default .form-select:not(.form-select-sm):not(.form-select-lg) { font-size: 1rem; padding-top: .55rem; padding-bottom: .55rem; } .app-default textarea.form-control:not(.form-control-sm) { font-size: 1rem; } .app-default .form-control:not(.form-control-sm):not(.form-control-lg) { padding-inline: .9rem; } .app-default .form-select:not(.form-select-sm):not(.form-select-lg) { padding-left: .9rem; } .app-default .input-group-text { font-size: 1rem; padding: .55rem .9rem; } .app-default .form-control-sm, .app-default .form-select-sm { border-radius: 7px; } .app-default .form-label { font-size: 1rem; margin-bottom: .45rem; } /* Switches: a 22×38px toggle (Metronic's default is a chunky 32×46px). */ .app-default .form-switch.form-check-custom:not(.form-switch-sm):not(.form-switch-lg) .form-check-input { height: 1.55rem; width: 2.7rem; } @media (max-width: 767.98px) { .app-default .form-control, .app-default .form-select { font-size: 16px !important; } } /* ---- Tables ------------------------------------------------------------ */ /* White cards, very light separators, ~48px rows, muted uppercase column labels, hover #F8FAFC, selected #EEF7FD, no zebra. */ .app-default .table > thead > tr > th { font-weight: 600; letter-spacing: .035em; } .app-default .table.align-middle > tbody > tr > td { height: 48px; } .app-default .table.table-row-dashed > tbody > tr:hover > *, .app-default .table.table-row-bordered > tbody > tr:hover > * { background-color: var(--row-hover); } .app-default .table > tbody > tr:has(> td:first-child .form-check-input[type=checkbox]:checked) > * { background-color: var(--row-selected); } .app-default .table a:not(.btn):not(.badge):not([class*="text-gray"]):not([class*="text-dark"]):not(.text-muted) { color: var(--link); } /* ---- Tabs / segmented controls / menus -------------------------------- */ .app-default .nav-line-tabs .nav-item .nav-link.active, .app-default .nav-line-tabs .nav-item .nav-link:hover:not(.disabled) { border-bottom-color: var(--brand-blue); color: var(--link); } .app-default .btn-group > .btn.btn-light { border: 0; } .app-default .btn-group > .btn.btn-light:not(:last-child) { box-shadow: inset -1px 0 0 var(--border-default); } .app-default .menu-sub-dropdown { padding-block: .5rem !important; } [data-bs-theme="dark"] .app-default .btn-group > .btn.btn-light:not(:last-child) { box-shadow: inset -1px 0 0 #232B36; } /* ---- Alerts / notices in the app -------------------------------------- */ .app-default .alert { border-width: 1px; } .app-default .notice { border-radius: var(--radius-card-sm) !important; } .app-default .notice.border-dashed { border-style: solid !important; } .app-default .notice.border-warning { border-color: #F6D9A6 !important; } .app-default .notice.border-danger { border-color: #F5C2CC !important; } .app-default .notice.border-primary { border-color: #B9DDF7 !important; } .app-default .notice.border-success { border-color: #BDE8CC !important; } .app-default .notice.border-info { border-color: #D6CCFE !important; } [data-bs-theme="dark"] .app-default .notice.border-warning { border-color: #5A4317 !important; } [data-bs-theme="dark"] .app-default .notice.border-danger { border-color: #5C2532 !important; } [data-bs-theme="dark"] .app-default .notice.border-primary { border-color: #17406A !important; } [data-bs-theme="dark"] .app-default .notice.border-success { border-color: #1D4A31 !important; } [data-bs-theme="dark"] .app-default .notice.border-info { border-color: #3A2F6E !important; } /* Metronic's dashed grey boxes (stat tiles, detail panels) read as unfinished: a solid hairline instead. Dashed stays where it means "placeholder" (dashed cards, coloured drop zones). */ .app-default .border-dashed.border-gray-300:not(.card) { border-style: solid !important; border-color: var(--border-default) !important; } .app-default .rounded.border-dashed.border-gray-300:not(.card) { border-radius: var(--radius-card-sm) !important; } /* Header dropdowns (user / theme): 14px rows, a little tighter. */ .app-default .app-header .menu-sub-dropdown .menu-link { padding-top: .55rem; padding-bottom: .55rem; font-size: 1rem; } .app-default .app-header .menu-sub-dropdown .menu-item.my-1 { margin-top: 1px !important; margin-bottom: 1px !important; } /* ---- Footer ------------------------------------------------------------ */ .app-default .app-footer { font-size: .9rem; } /* ---- Security grade chip (): grade-specific colour ------ */ .cs-grade-badge { color: #FFFFFF; letter-spacing: -.01em; } .cs-grade-badge--a { background-color: var(--grade-a); } .cs-grade-badge--b { background-color: var(--grade-b); } .cs-grade-badge--c { background-color: var(--grade-c); color: var(--text-primary); } .cs-grade-badge--d { background-color: var(--grade-d); } .cs-grade-badge--f { background-color: var(--grade-f); } .cs-grade-badge--none { background-color: var(--status-neutral-soft); color: var(--text-secondary); } [data-bs-theme="dark"] .cs-grade-badge--none { background-color: #1A2029; color: #AAB4C2; } /* ---- Dashboard (dashboard/index + partials/live) ----------------------- */ /* Moved out of an inline