/*
* sens-theme-final.css
* SENS – Stored Energy Systems | Shared UI Design System
* Brand Guidelines: MKT-183 Rev F
*
* Drop-in replacement for sens-theme.css.
* Adds: application-wide --app-* design tokens (light + dark),
* Bootstrap component overrides, theme picker, and tokenized
* versions of all static components.
*
* Usage:
* 1. Link this file instead of sens-theme.css.
* 2. Add data-theme="light|dark" to (default: light).
* 3. To prevent flash of unstyled theme, place this inline
*
* Sections:
* 1. Brand Tokens (static, :root)
* 2. Application Theme Tokens (adaptive, [data-theme])
* 3. Base / Reset
* 4. Typography Utilities
* 5. Buttons — SENS Legacy (static)
* 6. Buttons — Bootstrap Overrides (adaptive)
* 7. Form Controls — SENS Legacy (static)
* 8. Form Controls — Bootstrap Overrides (adaptive)
* 9. Feedback — Alert & Divider
* 10. Status Indicators (Pills)
* 11. Badge & Notification Controls
* 12. Data Components — Cards, Tables, KPI
* 13. Connection Manager Components
* 14. Avatar & Dropdown
* 15. Theme Picker
* 16. Utility — Code / Monospace
*/
/* open-sans-300 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans-v44-latin-300.woff2') format('woff2');
}
/* open-sans-300italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src: url('../fonts/open-sans-v44-latin-300italic.woff2') format('woff2');
}
/* open-sans-regular - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2');
}
/* open-sans-italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2');
}
/* open-sans-500 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2');
}
/* open-sans-500italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 500;
src: url('../fonts/open-sans-v44-latin-500italic.woff2') format('woff2');
}
/* open-sans-600 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2');
}
/* open-sans-600italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src: url('../fonts/open-sans-v44-latin-600italic.woff2') format('woff2');
}
/* open-sans-700 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
}
/* open-sans-700italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: url('../fonts/open-sans-v44-latin-700italic.woff2') format('woff2');
}
/* open-sans-800 - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: url('../fonts/open-sans-v44-latin-800.woff2') format('woff2');
}
/* open-sans-800italic - latin */
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 800;
src: url('../fonts/open-sans-v44-latin-800italic.woff2') format('woff2');
}
/* ══════════════════════════════════════════════════════════════════════════
1. BRAND TOKENS (static — never change with theme)
══════════════════════════════════════════════════════════════════════════ */
:root {
/* Primary brand palette */
--sens-red: #E11F29;
--sens-red-dark: #752329;
--sens-black: #000000;
--sens-gray: #736F71;
--sens-lt-gray: #b9baba;
--sens-sage: #a8c0bb;
--sens-navy: #1b1d36;
--sens-white: #FFFFFF;
/* Light-mode surface defaults (used by legacy static components) */
--sens-bg: #f4f4f5;
--sens-border: #e2e2e3;
/* Alias */
--sens-cyan: #a8c0bb;
/* Override Bootstrap's border-radius scale to 0 — sharp corners throughout */
--bs-border-radius: 0;
--bs-border-radius-sm: 0;
--bs-border-radius-lg: 0;
--bs-border-radius-xl: 0;
--bs-border-radius-xxl: 0;
--bs-border-radius-pill: 0;
}
/* ══════════════════════════════════════════════════════════════════════════
2. APPLICATION THEME TOKENS (adaptive — drive all themed components)
Scope: [data-theme="light"] | [data-theme="dark"] on .
Token groups:
--app-page-* Page background & base text
--app-card-* Card surface elevation
--app-brand-* Split-panel brand column
--app-surface Primary content surface
--app-heading Primary heading text
--app-text-* Text hierarchy: muted → faint → label
--app-input-* Form control appearance & focus states
--app-control-* Icon controls (pw toggle, etc.)
--app-accent Interactive accent (checkbox, focus ring)
--app-btn-primary-* Primary action button states
--app-btn-outline-* Outline / SSO button states
--app-link / hover Hyperlinks & btn-link
--app-divider-* Separators & rule lines
--app-error-* Inline error / alert-danger surface
--app-picker-* Floating theme-picker pill
══════════════════════════════════════════════════════════════════════════ */
/* ── Light ─────────────────────────────────────────────────────────────── */
[data-theme="light"] {
/* Page */
--app-page-bg: #f0f2f5;
--app-page-text: var(--sens-black);
--app-card-shadow: 0 8px 40px rgba(0, 0, 0, 0.14);
--app-card-border: none;
/* Brand panel */
--app-brand-panel-bg: var(--sens-navy);
--app-brand-panel-border: none;
--app-brand-text-secondary: rgba(255, 255, 255, 0.55);
--app-brand-text-muted: rgba(255, 255, 255, 0.65);
--app-brand-text-faint: rgba(255, 255, 255, 0.30);
--app-brand-arc-primary: rgba(168, 192, 187, 0.18);
--app-brand-arc-accent: rgba(225, 31, 41, 0.14);
/* Surfaces & text */
--app-surface: var(--sens-white);
--app-heading: var(--sens-black);
--app-text-muted: var(--sens-gray);
--app-text-faint: var(--sens-lt-gray);
--app-label: var(--sens-gray);
/* Inputs */
--app-input-bg: #fafafa;
--app-input-border: #d8d8d8;
--app-input-text: var(--sens-black);
--app-input-placeholder: #bbb;
--app-input-focus-border: var(--sens-navy);
--app-input-focus-ring: rgba(27, 29, 54, 0.10);
--app-input-focus-bg: var(--sens-white);
/* Controls */
--app-control-muted: var(--sens-lt-gray);
--app-control-muted-hover: var(--sens-gray);
--app-accent: var(--sens-navy);
/* Buttons */
--app-btn-primary-press: #12142a;
--app-btn-primary-focus-ring: var(--sens-navy);
--app-btn-outline-text: var(--sens-navy);
--app-btn-outline-border: #d8d8d8;
--app-btn-outline-hover-bg: #f5f5f5;
--app-btn-outline-hover-border: #bbb;
--app-btn-outline-hover-text: var(--sens-navy);
--app-btn-outline-icon: var(--sens-navy);
/* Links */
--app-link: var(--sens-navy);
--app-link-hover: #12142a;
/* Dividers */
--app-divider-text: var(--sens-lt-gray);
--app-divider-line: var(--sens-border);
/* Feedback */
--app-error-bg: rgba(225, 31, 41, 0.06);
--app-error-border: rgba(225, 31, 41, 0.25);
--app-error-text: var(--sens-red-dark);
/* Theme picker */
--app-picker-bg: var(--sens-navy);
--app-picker-shadow: rgba(0, 0, 0, 0.22);
--app-picker-active-bg: rgba(255, 255, 255, 0.14);
--app-picker-active-text: var(--sens-white);
--app-picker-muted-text: rgba(255, 255, 255, 0.45);
--app-picker-hover-bg: rgba(255, 255, 255, 0.08);
--app-picker-hover-text: rgba(255, 255, 255, 0.8);
}
/* ── Dark ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
/* Page */
--app-page-bg: #141414;
--app-page-text: rgba(255, 255, 255, 0.90);
--app-card-shadow: 0 12px 56px rgba(0, 0, 0, 0.55);
--app-card-border: 1px solid rgba(255, 255, 255, 0.06);
/* Brand panel */
--app-brand-panel-bg: #12142a;
--app-brand-panel-border: 1px solid rgba(255, 255, 255, 0.05);
--app-brand-text-secondary: rgba(255, 255, 255, 0.45);
--app-brand-text-muted: rgba(255, 255, 255, 0.50);
--app-brand-text-faint: rgba(255, 255, 255, 0.22);
--app-brand-arc-primary: rgba(168, 192, 187, 0.12);
--app-brand-arc-accent: rgba(225, 31, 41, 0.10);
/* Surfaces & text */
--app-surface: #1f1f1f;
--app-heading: rgba(255, 255, 255, 0.92);
--app-text-muted: rgba(255, 255, 255, 0.42);
--app-text-faint: rgba(255, 255, 255, 0.28);
--app-label: rgba(255, 255, 255, 0.40);
/* Inputs */
--app-input-bg: #141414;
--app-input-border: rgba(255, 255, 255, 0.12);
--app-input-text: rgba(255, 255, 255, 0.85);
--app-input-placeholder: rgba(255, 255, 255, 0.20);
--app-input-focus-border: var(--sens-sage);
--app-input-focus-ring: rgba(168, 192, 187, 0.12);
--app-input-focus-bg: #111111;
/* Controls */
--app-control-muted: rgba(255, 255, 255, 0.25);
--app-control-muted-hover: rgba(255, 255, 255, 0.65);
--app-accent: var(--sens-sage);
/* Buttons */
--app-btn-primary-press: #0f1120;
--app-btn-primary-focus-ring: var(--sens-sage);
--app-btn-outline-text: rgba(255, 255, 255, 0.70);
--app-btn-outline-border: rgba(255, 255, 255, 0.14);
--app-btn-outline-hover-bg: rgba(255, 255, 255, 0.06);
--app-btn-outline-hover-border: rgba(255, 255, 255, 0.25);
--app-btn-outline-hover-text: rgba(255, 255, 255, 0.90);
--app-btn-outline-icon: var(--sens-sage);
/* Links */
--app-link: var(--sens-sage);
--app-link-hover: #d0e5e1;
/* Dividers */
--app-divider-text: rgba(255, 255, 255, 0.22);
--app-divider-line: rgba(255, 255, 255, 0.08);
/* Feedback */
--app-error-bg: rgba(225, 31, 41, 0.10);
--app-error-border: rgba(225, 31, 41, 0.30);
--app-error-text: #ff6b72;
/* Theme picker */
--app-picker-bg: #0d0e1c;
--app-picker-shadow: rgba(0, 0, 0, 0.45);
--app-picker-active-bg: rgba(168, 192, 187, 0.22);
--app-picker-active-text: #c8e0db;
--app-picker-muted-text: rgba(255, 255, 255, 0.35);
--app-picker-hover-bg: rgba(255, 255, 255, 0.07);
--app-picker-hover-text: rgba(255, 255, 255, 0.70);
}
/* ══════════════════════════════════════════════════════════════════════════
3. BASE / RESET
══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
}
body {
background-color: var(--app-page-bg);
color: var(--app-page-text);
transition: background-color 0.25s, color 0.25s;
}
/* ══════════════════════════════════════════════════════════════════════════
4. TYPOGRAPHY UTILITIES
══════════════════════════════════════════════════════════════════════════ */
.sens-headline {
font-weight: 800;
}
.sens-subheadline {
font-weight: 700;
}
.sens-title {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Section header row with optional count badge */
.section-hd {
font-size: 0.72rem;
font-weight: 700;
color: var(--sens-gray);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 8px;
}
/* Icon-only */
.icon-btn {
background: none;
border: none;
padding: 5px;
color: var(--sens-gray);
cursor: pointer;
transition: background 0.12s, color 0.12s;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.icon-btn:hover {
background: #f0f0f0;
color: var(--sens-black);
}
.icon-btn i {
font-size: 1rem;
}
/* Text link — adaptive (navy light / sage dark) */
.link-btn {
font-size: 0.73rem;
color: var(--app-link);
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: none;
transition: color 0.15s;
}
.link-btn:hover {
color: var(--app-link-hover);
text-decoration: underline;
}
/* ══════════════════════════════════════════════════════════════════════════
6. BUTTONS — BOOTSTRAP OVERRIDES (adaptive, --app-* token-driven)
Uses Bootstrap class names so no extra markup is needed.
All states respond to the active [data-theme].
══════════════════════════════════════════════════════════════════════════ */
.btn {
height: 40px;
}
.btn.btn-sm {
height: 30px;
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Primary action — navy/dark fill */
.btn.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--sens-navy);
color: var(--sens-white);
border: none;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.01em;
transition: background 0.12s;
box-shadow: none;
}
.btn.btn-primary:hover {
background: #2e3260;
border-color: transparent;
box-shadow: none;
}
.btn.btn-primary:active,
.btn.btn-primary:first-child:active {
background: var(--app-btn-primary-press);
border-color: transparent;
box-shadow: none;
}
.btn.btn-primary:focus-visible {
outline: 2px solid var(--app-btn-primary-focus-ring);
outline-offset: 2px;
box-shadow: none;
}
.btn.btn-primary:focus {
box-shadow: none;
}
.btn.btn-primary:disabled {
background: var(--sens-navy);
opacity: 0.38;
}
/* Dark mode: add subtle border to primary buttons for better contrast */
[data-theme="dark"] .btn.btn-primary {
border: 1px solid rgba(168, 192, 187, 0.15);
}
[data-theme="dark"] .btn.btn-primary:hover {
border-color: rgba(168, 192, 187, 0.25);
}
[data-theme="dark"] .btn.btn-primary:active,
[data-theme="dark"] .btn.btn-primary:first-child:active {
border-color: rgba(168, 192, 187, 0.35);
}
[data-theme="dark"] .btn.btn-primary:disabled {
border-color: rgba(168, 192, 187, 0.15);
}
/* Outline / SSO */
.btn.btn-outline-secondary {
background: transparent;
color: var(--app-btn-outline-text);
border: 1px solid var(--app-btn-outline-border);
font-size: 0.85rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: background 0.12s, border-color 0.12s, color 0.12s;
text-decoration: none;
box-shadow: none;
}
.btn.btn-outline-secondary:hover {
background: var(--app-btn-outline-hover-bg);
border-color: var(--app-btn-outline-hover-border);
color: var(--app-btn-outline-hover-text);
box-shadow: none;
}
.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary:first-child:active {
background: var(--app-btn-outline-hover-bg);
border-color: var(--app-btn-outline-hover-border);
color: var(--app-btn-outline-hover-text);
box-shadow: none;
}
.btn.btn-outline-secondary i {
color: var(--app-btn-outline-icon);
transition: color 0.25s;
}
.btn.btn-outline-secondary:disabled {
opacity: 0.38;
}
/* Text/link button */
.btn.btn-link {
color: var(--app-link);
font-size: 0.82rem;
background: none;
border: none;
padding: 0;
text-decoration: none;
box-shadow: none;
transition: color 0.15s;
}
.btn.btn-link:hover,
.btn.btn-link:focus {
color: var(--app-link-hover);
text-decoration: underline;
box-shadow: none;
}
/* Bare anchor tags — no class needed */
a:not([class]) {
color: var(--app-link);
text-decoration: none;
transition: color 0.15s;
}
a:not([class]):hover {
color: var(--app-link-hover);
text-decoration: underline;
}
/* ══════════════════════════════════════════════════════════════════════════
7. FORM CONTROLS — SENS LEGACY (static, light-mode only)
══════════════════════════════════════════════════════════════════════════ */
.field-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--sens-gray);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 5px;
display: block;
}
.app-input {
width: 100%;
height: 32px;
border: 1px solid #d8d8d8;
padding: 0 10px;
font-size: 0.82rem;
color: var(--sens-black);
background: #fafafa;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.app-input:focus {
border-color: var(--sens-red);
box-shadow: 0 0 0 3px rgba(225, 31, 41, 0.08);
background: var(--sens-white);
}
.app-input::placeholder {
color: #bbb;
}
.app-select {
width: 100%;
height: 32px;
border: 1px solid #d8d8d8;
padding: 0 10px;
font-size: 0.82rem;
color: var(--sens-black);
background: #fafafa;
outline: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23736F71' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color 0.15s, box-shadow 0.15s;
}
.app-select:focus {
border-color: var(--sens-red);
box-shadow: 0 0 0 3px rgba(225, 31, 41, 0.08);
}
.search-input-group {
display: flex;
align-items: center;
border: 1px solid var(--app-input-border);
background: var(--app-input-bg);
height: 30px;
padding: 0 10px;
gap: 6px;
}
.search-input-group i {
font-size: 0.75rem;
color: var(--app-input-placeholder);
}
.search-input-group input {
border: none;
background: transparent;
font-size: 0.78rem;
color: var(--app-input-text);
outline: none;
width: 100%;
font-family: inherit;
}
.search-input-group:focus-within {
border-color: var(--app-input-focus-border);
box-shadow: 0 0 0 3px var(--app-input-focus-ring);
}
/* ══════════════════════════════════════════════════════════════════════════
8. FORM CONTROLS — BOOTSTRAP OVERRIDES (adaptive, --app-* token-driven)
══════════════════════════════════════════════════════════════════════════ */
/* Label */
.form-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--app-label);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 5px;
transition: color 0.25s;
}
/* Text input / email / password / number */
.form-control {
border: 1px solid var(--app-input-border);
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
line-height: 1.5;
color: var(--app-input-text);
background: var(--app-input-bg);
box-shadow: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.25s, color 0.25s;
}
.form-control:focus {
border-color: var(--app-input-focus-border);
box-shadow: 0 0 0 3px var(--app-input-focus-ring);
background: var(--app-input-focus-bg);
color: var(--app-input-text);
}
.form-control::placeholder {
color: var(--app-input-placeholder);
}
/* Disabled / read-only state */
.form-control:disabled,
.form-control[readonly] {
background: var(--app-input-bg);
color: var(--app-text-faint);
border-color: var(--app-input-border);
opacity: 0.6;
cursor: not-allowed;
}
/* Textarea */
textarea.form-control {
height: auto;
padding: 10px 12px;
resize: vertical;
}
/* File input with proper vertical alignment */
input[type="file"].form-control {
display: flex;
align-items: center;
padding: 0;
padding-right: 12px;
}
input[type="file"].form-control::file-selector-button {
height: calc(100% + 2px);
margin: -1px 12px -1px -1px;
padding: 0 16px;
border: none;
border-right: 1px solid var(--app-input-border);
background: var(--bs-secondary-bg, #f8f9fa);
color: var(--bs-body-color);
cursor: pointer;
transition: background-color 0.15s;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
}
input[type="file"].form-control::file-selector-button:hover {
background: var(--bs-tertiary-bg, #e9ecef);
}
/* Dark mode: navy button */
[data-theme="dark"] input[type="file"].form-control::file-selector-button {
background: var(--sens-navy) !important;
color: rgba(255, 255, 255, 0.85);
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
/* ── Select / form-select caret ──────────────────────────────────────────────
Both select.form-control and .form-select share the same caret chevron.
The :root variables hold the two SVG variants (light & dark).
All state variants (default, :focus) are grouped together per theme so the
caret is never lost when .form-control:focus resets the background shorthand.
─────────────────────────────────────────────────────────────────────────── */
:root {
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23736F71' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' fill-opacity='0.6' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
/* Light mode — default & focus (focus re-applies caret because .form-control:focus
uses the background shorthand which resets background-image to none) */
select.form-control,
select.form-control:focus,
.form-select,
.form-select:focus {
appearance: none;
background-image: var(--select-caret-light);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 12px;
padding-right: 32px;
}
/* Dark mode — default & focus */
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-select:focus {
background-image: var(--select-caret-dark);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 12px;
}
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-control:focus {
color-scheme: dark;
}
[data-theme="dark"] select.form-control option {
background-color: #1f1f1f;
color: rgba(255, 255, 255, 0.85);
}
/* Dark mode form-select colors */
[data-theme="dark"] .form-select {
background-color: var(--app-input-bg);
border-color: var(--app-input-border);
color: var(--app-input-text);
}
[data-theme="dark"] .form-select:focus {
background-color: var(--app-input-focus-bg);
border-color: var(--app-input-focus-border);
box-shadow: 0 0 0 3px var(--app-input-focus-ring);
}
[data-theme="dark"] .form-select .text-muted {
color: var(--app-input-placeholder) !important;
}
/* Dark mode input-group-text (Bootstrap uses --bs-tertiary-bg which doesn't respond to data-theme) */
[data-theme="dark"] .input-group-text {
background-color: var(--app-input-bg);
border-color: var(--app-input-border);
color: var(--app-text-muted);
}
/* Dark mode modal — Bootstrap 5.3 scopes --bs-modal-* onto .modal-content itself,
so [data-theme="dark"] on can't override them via inheritance.
We must re-declare the variables at the same element level. */
[data-theme="dark"] .modal-content {
--bs-modal-bg: #1f1f1f;
--bs-modal-color: rgba(255, 255, 255, 0.90);
--bs-modal-border-color: rgba(255, 255, 255, 0.10);
--bs-modal-header-border-color: rgba(255, 255, 255, 0.08);
--bs-modal-footer-border-color: rgba(255, 255, 255, 0.08);
background-color: var(--bs-modal-bg);
color: var(--bs-modal-color);
border-color: var(--bs-modal-border-color);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
border-color: var(--bs-modal-header-border-color);
}
[data-theme="dark"] .modal .btn-close {
filter: invert(1) grayscale(1) brightness(1.5);
}
/* Password field: make room for toggle button */
.position-relative > .form-control {
padding-right: 38px;
}
/* Password visibility toggle button */
.pw-toggle {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 0;
color: var(--app-control-muted);
cursor: pointer;
line-height: 1;
font-size: 1rem;
transition: color 0.12s;
z-index: 5;
}
.pw-toggle:hover {
color: var(--app-control-muted-hover);
}
/* Checkbox & radio */
.form-check {
padding-left: 0;
}
.form-check-input {
accent-color: var(--app-accent);
width: 14px;
height: 14px;
cursor: pointer;
flex-shrink: 0;
margin-top: 0;
}
/* Override Bootstrap .form-check .form-check-input (float + negative margin) */
.form-check .form-check-input {
float: none;
margin-left: 0;
}
/* Dark mode: fix radio and checkbox backgrounds */
[data-theme="dark"] .form-check-input {
background-color: var(--app-input-bg);
border-color: var(--app-input-border);
}
[data-theme="dark"] .form-check-input:checked {
background-color: var(--app-accent);
border-color: var(--app-accent);
}
[data-theme="dark"] .form-check-input:focus {
border-color: var(--app-input-focus-border);
box-shadow: 0 0 0 3px var(--app-input-focus-ring);
}
.form-check-input:focus {
box-shadow: none;
border-color: var(--app-accent);
}
.form-check-input:checked {
background-color: var(--app-accent);
border-color: var(--app-accent);
}
.form-check-label {
font-size: 0.82rem;
color: var(--app-text-muted);
cursor: pointer;
transition: color 0.25s;
}
/* ══════════════════════════════════════════════════════════════════════════
9. FEEDBACK — ALERT & DIVIDER
══════════════════════════════════════════════════════════════════════════ */
/*
* Alert base + variants using Bootstrap class names.
* All variants are static semantic colors (intentionally theme-invariant)
* except alert-danger which mirrors the adaptive --app-error-* tokens.
*
* Usage:
*
*
* Message text.
*
*
* Variants: alert-danger | alert-success | alert-warning | alert-info | alert-primary
*/
/* Shared base */
.alert {
padding: 0.6rem 0.75rem;
font-size: 0.82rem;
display: flex;
align-items: flex-start;
gap: 0.5rem;
line-height: 1.5;
}
.alert i {
flex-shrink: 0;
margin-top: 0.05rem;
}
/* Danger / Error — adaptive (follows active theme) */
.alert.alert-danger {
background: var(--app-error-bg);
border: 1px solid var(--app-error-border);
color: var(--app-error-text);
transition: background 0.25s, border-color 0.25s, color 0.25s;
}
/* Success */
.alert.alert-success {
background: #f0fdf4;
border: 1px solid rgba(22, 163, 74, 0.30);
color: #15803d;
}
/* Warning */
.alert.alert-warning {
background: #fffbeb;
border: 1px solid rgba(202, 138, 4, 0.35);
color: #92400e;
}
/* Info */
.alert.alert-info {
background: #eff6ff;
border: 1px solid rgba(59, 130, 246, 0.30);
color: #1e40af;
}
/* Primary — SENS navy tint */
.alert.alert-primary {
background: rgba(27, 29, 54, 0.06);
border: 1px solid rgba(27, 29, 54, 0.20);
color: var(--sens-navy);
}
/* Dark-mode adjustments for static alerts */
[data-theme="dark"] .alert.alert-success {
background: rgba(22, 163, 74, 0.10);
border-color: rgba(22, 163, 74, 0.28);
color: #4ade80;
}
[data-theme="dark"] .alert.alert-warning {
background: rgba(202, 138, 4, 0.10);
border-color: rgba(202, 138, 4, 0.30);
color: #fbbf24;
}
[data-theme="dark"] .alert.alert-info {
background: rgba(59, 130, 246, 0.10);
border-color: rgba(59, 130, 246, 0.28);
color: #93c5fd;
}
[data-theme="dark"] .alert.alert-primary {
background: rgba(168, 192, 187, 0.08);
border-color: rgba(168, 192, 187, 0.22);
color: var(--sens-sage);
}
/* Dismissible close button */
.alert .alert-close {
margin-left: auto;
flex-shrink: 0;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 1rem;
opacity: 0.45;
line-height: 1;
color: inherit;
transition: opacity 0.15s;
align-self: flex-start;
}
.alert .alert-close:hover {
opacity: 0.85;
}
/* Horizontal rule with centered label text */
.app-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.5rem 0;
color: var(--app-divider-text);
font-size: 0.72rem;
transition: color 0.25s;
}
.app-divider::before,
.app-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--app-divider-line);
transition: background 0.25s;
}
/* Backward-compat alias */
.login-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1.5rem 0;
color: var(--app-divider-text);
font-size: 0.72rem;
transition: color 0.25s;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--app-divider-line);
transition: background 0.25s;
}
/* Theme dropdown — fits the navy navbar */
.theme-nav-btn {
background: none;
border: none;
padding: 0.4rem 0.55rem;
color: rgba(255,255,255,0.65);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
transition: background-color 0.15s, color 0.15s;
display: flex;
align-items: center;
}
.theme-nav-btn:hover {
background-color: rgba(255,255,255,0.1);
color: var(--sens-white);
}
.theme-nav-btn + .dropdown-menu .dropdown-item.active {
font-weight: 700;
color: var(--sens-navy);
}
.theme-nav-btn + .dropdown-menu .dropdown-item.active i {
color: var(--sens-navy);
}
/* Variant for use on light/page-bg surfaces instead of the dark top-bar */
.theme-nav-btn.on-light-bg {
color: var(--app-text-muted);
}
.theme-nav-btn.on-light-bg:hover {
background-color: rgba(0, 0, 0, 0.07);
color: var(--app-heading);
}
[data-theme="dark"] .theme-nav-btn.on-light-bg {
color: var(--app-text-muted);
}
[data-theme="dark"] .theme-nav-btn.on-light-bg:hover {
background-color: rgba(255, 255, 255, 0.08);
color: var(--app-page-text);
}
/* ══════════════════════════════════════════════════════════════════════════
10. STATUS INDICATORS — PILLS
Semantic colors intentionally fixed for accessibility in both themes.
══════════════════════════════════════════════════════════════════════════ */
.pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.67rem;
font-weight: 600;
padding: 2px 9px;
border-radius: 20px;
}
.pill i {
font-size: 0.42rem;
}
.pill.online {
background: #dcfce7;
color: #16a34a;
}
.pill.offline {
background: #fee2e2;
color: #dc2626;
}
.pill.idle {
background: #fef9c3;
color: #ca8a04;
}
.pill.charging {
background: #dbeafe;
color: #1d4ed8;
}
/* Status bar chips (e.g. app footer status bar) */
.status-chip {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.64rem;
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
}
.status-chip i {
font-size: 0.55rem;
}
.status-chip.s-ok i {
color: #4ade80;
}
.status-chip.s-warn i {
color: #fbbf24;
}
.status-chip.s-err i {
color: var(--sens-red);
}
.status-right {
margin-left: auto;
font-size: 0.63rem;
color: rgba(255, 255, 255, 0.3);
}
/* ══════════════════════════════════════════════════════════════════════════
11. BADGE & NOTIFICATION CONTROLS
══════════════════════════════════════════════════════════════════════════ */
/* Red dot badge (absolute-positioned over icon-btn) */
.notif-badge {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--sens-red);
color: var(--sens-white);
font-size: 0.58rem;
font-weight: 700;
border-radius: 50%;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
pointer-events: none;
}
/* Bell/notification button */
.notif-btn {
background: none;
border: none;
padding: 0.4rem 0.55rem;
transition: background-color 0.15s;
color: var(--sens-gray);
position: relative;
cursor: pointer;
}
.notif-btn:hover {
background-color: #f0f0f0;
color: var(--sens-black);
}
/* ══════════════════════════════════════════════════════════════════════════
12. DATA COMPONENTS — CARDS, TABLES, KPI
══════════════════════════════════════════════════════════════════════════ */
/* ── Data card (tokenized) ─────────────────────────────────────────────── */
.app-card {
background: var(--app-surface);
border: 1px solid var(--app-divider-line);
transition: background 0.25s, border-color 0.25s;
}
.app-card-hd {
padding: 10px 16px;
border-bottom: 1px solid var(--app-divider-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
transition: border-color 0.25s;
}
.app-card-title {
font-size: 0.82rem;
font-weight: 700;
color: var(--app-heading);
transition: color 0.25s;
}
/* ── Data card (legacy — static, light-mode only) ─────────────────────── */
.data-card {
background: var(--sens-white);
border: 1px solid var(--sens-border);
overflow: hidden;
}
.data-card-hd {
padding: 10px 16px;
border-bottom: 1px solid var(--sens-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.data-card-title {
font-size: 0.82rem;
font-weight: 700;
color: var(--sens-black);
}
/* ── KPI card (tokenized) ──────────────────────────────────────────────── */
.app-kpi {
background: var(--app-surface);
border: 1px solid var(--app-divider-line);
padding: 14px 18px;
height: 100%;
transition: background 0.25s, border-color 0.25s;
}
.app-kpi-label {
font-size: 0.68rem;
font-weight: 700;
color: var(--app-label);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 5px;
transition: color 0.25s;
}
.app-kpi-value {
font-size: 1.75rem;
font-weight: 800;
color: var(--app-heading);
line-height: 1;
transition: color 0.25s;
}
.app-kpi-value.accent {
color: var(--sens-red);
}
.app-kpi-sub {
font-size: 0.7rem;
color: var(--app-text-muted);
margin-top: 4px;
transition: color 0.25s;
}
.app-kpi-sub .trend-up {
color: #16a34a;
}
.app-kpi-sub .trend-down {
color: var(--sens-red);
}
/* KPI left-border accent variants */
.app-kpi.healthy {
border-left: 3px solid var(--sens-sage);
}
.app-kpi.alarming {
border-left: 3px solid var(--sens-red);
}
/* Healthy value — sage-dark readable on both themes */
.app-kpi-value.healthy {
color: #3d7a72;
}
/* ── KPI card (legacy — static) ───────────────────────────────────────── */
.kpi-card {
background: var(--sens-white);
border: 1px solid var(--sens-border);
padding: 14px 18px;
height: 100%;
}
.kpi-label {
font-size: 0.68rem;
font-weight: 600;
color: var(--sens-gray);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 5px;
}
.kpi-value {
font-size: 1.75rem;
font-weight: 800;
color: var(--sens-black);
line-height: 1;
}
.kpi-value.accent {
color: var(--sens-red);
}
.kpi-sub {
font-size: 0.7rem;
color: var(--sens-gray);
margin-top: 4px;
}
.kpi-sub .trend-up {
color: #16a34a;
}
.kpi-sub .trend-down {
color: var(--sens-red);
}
/* ── Data table (tokenized) ────────────────────────────────────────────── */
.app-table {
width: 100%;
font-size: 0.81rem;
border-collapse: collapse;
/* Neutralise Bootstrap's forced --bs-table-bg so our tokens control color */
--bs-table-bg: transparent;
--bs-table-color: var(--app-page-text);
--bs-table-border-color: var(--app-divider-line);
}
.app-table thead th {
background: var(--app-page-bg);
font-size: 0.67rem;
font-weight: 700;
color: var(--app-label);
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 8px 16px;
border-bottom: 2px solid var(--app-divider-line);
border-top: none;
white-space: nowrap;
text-align: left;
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.app-table tbody td {
padding: 9px 16px;
color: var(--app-page-text);
border-bottom: 1px solid var(--app-divider-line);
vertical-align: middle;
transition: color 0.25s, border-color 0.25s;
}
.app-table tbody tr:last-child td {
border-bottom: none;
}
.app-table tbody tr:hover td {
background: rgba(128, 128, 128, 0.04);
}
/* ══════════════════════════════════════════════════════════════════════════
13. CONNECTION MANAGER COMPONENTS (static)
══════════════════════════════════════════════════════════════════════════ */
.direct-conn-card {
background: var(--sens-white);
border: 1px solid var(--sens-border);
overflow: hidden;
}
.direct-conn-card .card-hd {
padding: 11px 18px;
border-bottom: 1px solid var(--sens-border);
display: flex;
align-items: center;
gap: 9px;
}
.direct-conn-card .card-hd i {
font-size: 1rem;
color: var(--sens-navy);
}
.direct-conn-card .card-hd-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--sens-black);
}
.direct-conn-card .card-body-inner {
padding: 18px;
}
.conn-item {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 18px;
border-bottom: 1px solid #f2f2f2;
cursor: pointer;
transition: background 0.1s;
}
.conn-item:last-child {
border-bottom: none;
}
.conn-item:hover {
background: #fafafa;
}
.conn-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1rem;
}
.conn-icon.saved {
background: rgba(225, 31, 41, 0.08);
color: var(--sens-red);
}
.conn-icon.avail {
background: #f0f4ff;
color: #3b5bdb;
}
.conn-icon.offline {
background: #f4f4f5;
color: var(--sens-lt-gray);
}
.conn-info {
flex: 1;
min-width: 0;
}
.conn-name {
font-size: 0.83rem;
font-weight: 700;
color: var(--sens-black);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conn-meta {
font-size: 0.7rem;
color: var(--sens-gray);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conn-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════════════
14. AVATAR & DROPDOWN (static)
══════════════════════════════════════════════════════════════════════════ */
.avatar-btn {
background: none;
border: none;
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
padding: 0.35rem 0.5rem;
transition: background-color 0.15s;
}
.avatar-btn:hover {
background-color: #f0f0f0;
}
.avatar-btn:focus-visible {
outline: 2px solid var(--sens-red);
outline-offset: 2px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--sens-red);
color: var(--sens-white);
font-size: 0.8rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: 0.04em;
}
.avatar-info {
line-height: 1.25;
text-align: left;
}
.avatar-name {
font-size: 0.8rem;
font-weight: 700;
color: var(--sens-black);
}
.avatar-role {
font-size: 0.68rem;
color: var(--sens-gray);
}
.avatar-chevron {
color: var(--sens-lt-gray);
font-size: 0.7rem;
margin-left: 0.1rem;
}
.dropdown-menu {
/* Override Bootstrap's hardcoded --bs-dropdown-* to our adaptive tokens */
--bs-dropdown-bg: var(--app-surface);
--bs-dropdown-color: var(--app-page-text);
--bs-dropdown-border-color: var(--app-divider-line);
--bs-dropdown-link-color: var(--app-page-text);
--bs-dropdown-link-hover-color: var(--app-heading);
--bs-dropdown-link-hover-bg: rgba(128, 128, 128, 0.08);
--bs-dropdown-divider-bg: var(--app-divider-line);
--bs-dropdown-header-color: var(--app-text-muted);
/* Neutralise Bootstrap's blue active fill */
--bs-dropdown-link-active-bg: rgba(27, 29, 54, 0.07);
--bs-dropdown-link-active-color: var(--app-heading);
background-color: var(--app-surface);
border: 1px solid var(--app-divider-line);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
padding: 0.5rem;
min-width: 210px;
transition: background 0.25s, border-color 0.25s;
}
.dropdown-header {
padding: 0.5rem 0.75rem 0.75rem;
font-size: 0.75rem;
color: var(--app-text-muted);
}
/* Override Bootstrap text utilities so they respond to our theme */
[data-theme="dark"] .text-muted {
color: var(--app-text-muted) !important;
}
[data-theme="dark"] .text-dark {
color: var(--app-heading) !important;
}
[data-theme="dark"] .text-body {
color: var(--app-page-text) !important;
}
.dropdown-item {
font-size: 0.84rem;
color: var(--app-page-text);
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 400;
transition: background 0.1s, color 0.1s;
}
.dropdown-item i {
font-size: 0.95rem;
color: var(--app-text-faint);
width: 16px;
text-align: center;
transition: color 0.1s;
}
.dropdown-item:hover {
background-color: rgba(128, 128, 128, 0.08);
color: var(--app-heading);
}
.dropdown-item:hover i {
color: var(--sens-red);
}
.dropdown-item.active,
.dropdown-item.active:focus {
background-color: rgba(27, 29, 54, 0.07);
color: var(--sens-navy);
font-weight: 600;
}
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item.active:focus {
background-color: rgba(168, 192, 187, 0.22) !important;
color: var(--sens-cyan) !important;
font-weight: 600;
}
.dropdown-item.active i {
color: var(--app-accent);
}
[data-theme="dark"] .dropdown-item.active i {
color: var(--sens-cyan) !important;
}
.dropdown-item.text-danger {
color: var(--sens-red) !important;
}
.dropdown-item.text-danger i {
color: var(--sens-red);
}
.dropdown-item.text-danger:hover {
background-color: rgba(225, 31, 41, 0.08);
color: var(--sens-red-dark) !important;
}
.dropdown-divider {
margin: 0.4rem 0;
border-color: var(--app-divider-line);
}
/* ══════════════════════════════════════════════════════════════════════════
15. THEME PICKER (adaptive floating pill)
══════════════════════════════════════════════════════════════════════════ */
.theme-picker {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 1000;
display: flex;
align-items: center;
background: var(--app-picker-bg);
border-radius: 100px;
padding: 4px;
box-shadow: 0 4px 16px var(--app-picker-shadow);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: background 0.25s, box-shadow 0.25s;
}
.theme-picker-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
height: 28px;
padding: 0 10px;
border-radius: 100px;
border: none;
cursor: pointer;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
letter-spacing: 0.01em;
transition: background 0.15s, color 0.15s;
font-family: 'Open Sans', sans-serif;
}
.theme-picker-btn i {
font-size: 0.85rem;
}
.theme-picker-btn.active {
background: var(--app-picker-active-bg);
color: var(--app-picker-active-text);
}
.theme-picker-btn:not(.active) {
background: transparent;
color: var(--app-picker-muted-text);
}
.theme-picker-btn:not(.active):hover {
background: var(--app-picker-hover-bg);
color: var(--app-picker-hover-text);
}
/* ══════════════════════════════════════════════════════════════════════════
16. UTILITY — CODE / MONOSPACE
══════════════════════════════════════════════════════════════════════════ */
code {
font-size: 0.72rem;
background: #f4f4f5;
padding: 1px 5px;
color: #333;
}
code.err {
color: var(--sens-red);
background: #fff0f0;
}
/* ══════════════════════════════════════════════════════════════════════════
17. VALIDATION
══════════════════════════════════════════════════════════════════════════ */
.invalid {
outline: 1px solid #e50000;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
.validation-message {
margin-top: 5px;
margin-left: 5px;
color: #e50000;
font-size: .80rem;
}
/* ══════════════════════════════════════════════════════════════════════════
18. APP CHROME — Navbar, Page Header Band, Footer
Navy top navbar + sticky footer chrome shared across all portal pages.
══════════════════════════════════════════════════════════════════════════ */
/* ── Top navbar ─────────────────────────────────────────────────────────── */
.navbar {
background-color: var(--sens-navy);
border-bottom: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
padding: 0 1.5rem;
height: 64px;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 0.65rem;
text-decoration: none;
flex-shrink: 0;
padding: 0;
}
/* White hamburger icon */
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Dropdown caret */
.navbar-nav .nav-link.dropdown-toggle::after {
margin-left: 0.25rem;
vertical-align: 0.1em;
border-top-color: rgba(255, 255, 255, 0.5);
}
.navbar-nav .nav-link.dropdown-toggle:hover::after,
.navbar-nav .nav-link.dropdown-toggle.active::after {
border-top-color: var(--sens-white);
}
/* Nav links — white on navy */
.navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.65);
font-size: 0.78rem;
font-weight: 600;
padding: 0.4rem 0.6rem;
transition: color 0.15s, background-color 0.15s;
white-space: nowrap;
position: relative;
}
.navbar-nav .nav-link:hover {
color: var(--sens-white);
background-color: rgba(255, 255, 255, 0.1);
}
/* Keep dropdown-toggle white when open (.show) */
.navbar-nav .nav-link.show,
.navbar-nav .nav-link.dropdown-toggle.show {
color: var(--sens-white);
background-color: rgba(255, 255, 255, 0.1);
}
.navbar-nav .nav-link.active {
color: var(--sens-white);
background-color: rgba(255, 255, 255, 0.12);
}
/* Sage underline indicator on active link */
.navbar-nav .nav-link.active:not(.dropdown-toggle)::after {
content: '';
position: absolute;
bottom: -1px;
left: 10%;
right: 10%;
height: 2px;
background: var(--sens-sage);
border: none;
}
/* Dropdown-toggle active: use ::before so ::after stays free for the caret */
.navbar-nav .nav-link.dropdown-toggle.active::before {
content: '';
position: absolute;
bottom: -1px;
left: 10%;
right: 10%;
height: 2px;
background: var(--sens-sage);
}
.navbar-nav .nav-link i {
margin-right: 0.25rem;
font-size: 0.85rem;
vertical-align: -1px;
}
/* Notification button — white on navy */
.navbar .notif-btn {
color: rgba(255, 255, 255, 0.65);
}
.navbar .notif-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--sens-white);
}
/* Avatar — navy context overrides */
.navbar .avatar-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.navbar .avatar-btn:focus-visible {
outline-color: var(--sens-sage);
}
.navbar .avatar {
background-color: var(--sens-navy);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.navbar .avatar-name {
color: var(--sens-white);
}
.navbar .avatar-role {
color: rgba(255, 255, 255, 0.5);
}
.navbar .avatar-chevron {
color: rgba(255, 255, 255, 0.4);
}
/* Dropdown hover — navy tint */
.navbar .dropdown-item:hover {
background-color: #eef0f6;
color: var(--sens-navy);
}
.navbar .dropdown-item:hover i {
color: var(--sens-navy);
}
/* ── Page header band ───────────────────────────────────────────────────── */
.page-header-band {
background: var(--app-surface);
border-bottom: 1px solid var(--app-divider-line);
padding: 1rem 1.5rem;
transition: background 0.25s, border-color 0.25s;
}
/* ── Site footer ────────────────────────────────────────────────────────── */
.site-footer {
background: var(--sens-navy);
padding: 0.75rem 1.5rem;
margin-top: auto;
}
.site-footer a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.15s;
}
.site-footer a:hover {
color: rgba(255, 255, 255, 0.85);
}
/* ══════════════════════════════════════════════════════════════════════════
19. BREADCRUMB
══════════════════════════════════════════════════════════════════════════ */
.app-breadcrumb ol {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.app-breadcrumb li {
display: flex;
align-items: center;
font-size: 0.69rem;
font-weight: 600;
color: var(--app-text-muted);
transition: color 0.25s;
}
/* Chevron separator */
.app-breadcrumb li + li::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin: 0 2px;
background-color: var(--app-text-faint);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
flex-shrink: 0;
transition: background-color 0.25s;
}
.app-breadcrumb li a {
color: var(--app-text-muted);
text-decoration: none;
transition: color 0.15s;
}
.app-breadcrumb li a:hover {
color: var(--app-link);
text-decoration: none;
}
/* Current page — no link, slightly stronger */
.app-breadcrumb li[aria-current="page"] {
color: var(--app-heading);
font-weight: 600;
}
/* ══════════════════════════════════════════════════════════════════════════
20. LOGIN PAGE
Split-panel login card: brand panel (left) + form panel (right).
Relies on Section 2 tokens, Section 6 button overrides, Section 8
form overrides, and Section 9 alert/divider — no hard-coded colors.
══════════════════════════════════════════════════════════════════════════ */
.login-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}
/* ── Card ─────────────────────────────────────────────────────────────── */
.login-card {
display: flex;
width: 100%;
max-width: 860px;
min-height: 520px;
overflow: hidden;
box-shadow: var(--app-card-shadow);
border: var(--app-card-border);
transition: box-shadow 0.25s, border-color 0.25s;
}
/* ── Brand panel ─────────────────────────────────────────────────────── */
.login-brand-panel {
flex: 0 0 340px;
background-color: var(--app-brand-panel-bg);
background-image: radial-gradient(circle at 20% 80%, rgba(168, 192, 187, 0.12) 0%, transparent 55%), radial-gradient(circle at 80% 20%, rgba(225, 31, 41, 0.08) 0%, transparent 50%);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 2.5rem 2rem;
position: relative;
overflow: hidden;
border-right: var(--app-brand-panel-border);
transition: background-color 0.25s, border-color 0.25s;
}
.login-brand-panel::after {
content: '';
position: absolute;
right: -80px;
bottom: -80px;
width: 260px;
height: 260px;
border-radius: 50%;
border: 2px solid var(--app-brand-arc-primary);
}
.login-brand-panel::before {
content: '';
position: absolute;
right: -40px;
bottom: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
border: 2px solid var(--app-brand-arc-accent);
}
.brand-logo img {
height: 38px;
width: auto;
}
.brand-tagline {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem 0 1.5rem;
}
.brand-tagline h2 {
font-size: 1.45rem;
font-weight: 800;
color: var(--sens-white);
line-height: 1.25;
margin: 0 0 0.75rem;
}
.brand-tagline h2 span {
color: var(--sens-sage);
}
.brand-tagline p {
font-size: 0.82rem;
color: var(--app-brand-text-secondary);
line-height: 1.6;
margin: 0;
transition: color 0.25s;
}
.brand-features {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-top: 1.5rem;
}
.brand-feature-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.77rem;
color: var(--app-brand-text-muted);
transition: color 0.25s;
}
.brand-feature-item i {
font-size: 0.8rem;
color: var(--sens-sage);
flex-shrink: 0;
}
.brand-footer {
font-size: 0.68rem;
color: var(--app-brand-text-faint);
position: relative;
z-index: 1;
transition: color 0.25s;
}
/* ── Form panel ──────────────────────────────────────────────────────── */
.login-form-panel {
flex: 1;
background: var(--app-surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 2.5rem;
transition: background 0.25s;
}
.login-form-inner {
width: 100%;
max-width: 320px;
}
.login-form-inner h3 {
font-size: 1.2rem;
font-weight: 800;
color: var(--app-heading);
margin: 0 0 0.25rem;
transition: color 0.25s;
}
.login-form-inner .login-subtitle {
font-size: 0.8rem;
color: var(--app-text-muted);
margin: 0 0 2rem;
transition: color 0.25s;
}
/* Login-scoped overrides — keep globals untouched */
.login-form-inner .btn.btn-primary {
width: 100%;
}
.login-form-panel .btn.btn-outline-secondary {
width: 100%;
font-size: 0.82rem;
}
.login-form-panel .btn.btn-link {
font-size: 0.73rem;
}
.login-form-inner .alert.alert-danger {
margin-bottom: 1rem;
}
/* Footer links */
.login-footer-links {
margin-top: 1.75rem;
text-align: center;
font-size: 0.73rem;
color: var(--app-text-faint);
transition: color 0.25s;
}
.login-footer-links a {
color: var(--app-link);
text-decoration: none;
transition: color 0.15s;
}
.login-footer-links a:hover {
color: var(--app-link-hover);
text-decoration: underline;
}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.login-card {
flex-direction: column;
max-width: 420px;
min-height: unset;
}
.login-brand-panel {
flex: none;
padding: 1.75rem 1.5rem;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.brand-tagline {
padding: 1rem 0 0.5rem;
}
.login-form-panel {
padding: 2rem 1.5rem;
}
}
/* ══════════════════════════════════════════════════════════════════════════
21. SIDEBAR LAYOUT
Fixed top navbar + collapsible left sidebar + scrollable main content.
Tokens: --navbar-h, --sidebar-w, --sidebar-w-sm on :root.
Add .navbar-fixed to