/* ============================================================================ UTALII-UI — Shared CSS System Part 25: Token-based, zero inline styles, mobile-first, theme-able Breakpoints: 360px (base) · 640px · 1024px · 1440px Brand: Savanna Dusk — Espresso #1C1208 · Amber #D4872A · Sage #52B788 Mode: Hybrid — dark sidebar, light content body (Airtable quality standard) Fonts: Syne (display) · DM Sans (body) · Space Grotesk (mono/data) NOTE: Add Google Fonts link to platform layout : https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800 &family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600 &family=Space+Grotesk:wght@300;400;500;600&display=swap ============================================================================ */ /* ── TOKENS ──────────────────────────────────────────────────────────────────── */ :root { /* Color — base (Savanna Dusk warm scale) */ --u-color-bg-primary: #FFFFFF; --u-color-bg-secondary: #FAF6EE; --u-color-bg-tertiary: #F5EFE4; --u-color-bg-inverse: #1C1208; --u-color-text-primary: #1C1208; --u-color-text-secondary: #6B5A45; --u-color-text-tertiary: #9E8A74; --u-color-text-inverse: #FAF6EE; --u-color-border: #E5DDD0; --u-color-border-emphasis:#CBBFAD; /* Color — semantic */ --u-color-success: #52B788; --u-color-success-bg: #E8F8F0; --u-color-success-border: rgba(82,183,136,0.3); --u-color-warning: #D4872A; --u-color-warning-bg: #FDF5E8; --u-color-warning-border: rgba(212,135,42,0.25); --u-color-danger: #C0392B; --u-color-danger-bg: #FDECEA; --u-color-danger-border: rgba(192,57,43,0.2); --u-color-info: #2E86AB; --u-color-info-bg: #EBF5FA; --u-color-info-border: rgba(46,134,171,0.25); /* Color — brand (UtaliiOS platform defaults; overridden per tenant) */ --u-color-brand-primary: #1C1208; --u-color-brand-accent: #D4872A; --u-color-brand-accent-l: #E8A84E; --u-color-brand-surface: #FAF6EE; --u-color-brand-sage: #52B788; /* Spacing */ --u-space-1: 4px; --u-space-2: 8px; --u-space-3: 12px; --u-space-4: 16px; --u-space-5: 20px; --u-space-6: 24px; --u-space-8: 32px; --u-space-10:40px; --u-space-12:48px; --u-space-16:64px; /* Radius */ --u-radius-sm: 4px; --u-radius-md: 8px; --u-radius-lg: 12px; --u-radius-xl: 16px; --u-radius-full: 9999px; /* Shadows */ --u-shadow-sm: 0 1px 2px rgba(28,18,8,.05); --u-shadow-md: 0 4px 6px rgba(28,18,8,.07); --u-shadow-lg: 0 10px 15px rgba(28,18,8,.1); --u-shadow-xl: 0 20px 25px rgba(28,18,8,.1); /* Typography — Syne (display) · DM Sans (body) · Space Grotesk (data) */ --u-font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --u-font-display: 'Syne', system-ui, -apple-system, sans-serif; --u-font-mono: 'Space Grotesk', 'JetBrains Mono', 'Consolas', monospace; --u-text-xs: 11px; --u-text-sm: 13px; --u-text-base: 14px; --u-text-md: 16px; --u-text-lg: 18px; --u-text-xl: 20px; --u-text-2xl: 24px; --u-text-3xl:30px; --u-text-4xl: 36px; /* Sidebar */ --u-sidebar-w: 240px; --u-sidebar-w-collapsed: 64px; --u-topbar-h: 56px; /* Transitions */ --u-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1); --u-transition-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1); } /* Tenant theme override — GTL (guidedtanzania) keeps its own brand tokens */ [data-tenant-theme="guidedtanzania"] { --u-color-brand-primary: #1A0F06; --u-color-brand-accent: #D4A843; --u-color-brand-surface: #FAF5EC; } /* ── RESET ───────────────────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--u-text-base); -webkit-text-size-adjust: 100%; } body { font-family: var(--u-font-body); color: var(--u-color-text-primary); background: var(--u-color-bg-secondary); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img,svg { display: block; max-width: 100%; } a { color: var(--u-color-brand-accent); text-decoration: none; } a:hover { text-decoration: underline; } button,input,select,textarea { font: inherit; } table { border-collapse: collapse; width: 100%; } /* ── LAYOUT ──────────────────────────────────────────────────────────────────── */ .u-page { display: flex; min-height: 100vh; background: var(--u-color-bg-secondary); } .u-main { margin-left: var(--u-sidebar-w); flex: 1; display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; min-width: 0; transition: margin-left var(--u-transition-slow); } .u-content { flex: 1; padding: var(--u-space-6); max-width: 1400px; width: 100%; } .u-content-full { flex: 1; padding: var(--u-space-6); width: 100%; } /* ── SIDEBAR — Hybrid dark (espresso) ────────────────────────────────────────── */ .u-sidebar { width: var(--u-sidebar-w); position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; background: var(--u-color-bg-inverse); border-right: 1px solid rgba(212,135,42,0.12); display: flex; flex-direction: column; overflow-y: auto; transition: transform var(--u-transition-slow); } .u-sidebar-brand { padding: var(--u-space-4) var(--u-space-4) var(--u-space-3); border-bottom: 1px solid rgba(212,135,42,0.1); display: flex; align-items: center; gap: var(--u-space-3); min-height: var(--u-topbar-h); } /* Logo mark — amber-tinted box on dark sidebar; replace inner content with compass SVG in PHP template */ .u-sidebar-logo { width: 32px; height: 32px; border-radius: var(--u-radius-sm); background: rgba(212,135,42,0.16); border: 1px solid rgba(212,135,42,0.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--u-color-brand-accent); } /* Sidebar text elements inverted for dark background */ .u-sidebar-brand-name { font-family: var(--u-font-display); font-size: var(--u-text-sm); font-weight: 700; color: rgba(250,246,238,0.92); white-space: nowrap; overflow: hidden; letter-spacing: -0.01em; } .u-sidebar-brand-sub { font-size: var(--u-text-xs); color: rgba(250,246,238,0.35); white-space: nowrap; } .u-sidebar-nav { flex: 1; padding: var(--u-space-3) 0; } .u-nav-section { font-size: var(--u-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(212,168,67,0.65); padding: var(--u-space-4) var(--u-space-4) var(--u-space-2); } .u-nav-item { display: flex; align-items: center; gap: var(--u-space-3); padding: var(--u-space-2) var(--u-space-4); font-size: var(--u-text-sm); color: rgba(250,246,238,0.58); text-decoration: none; border-radius: 0; transition: background var(--u-transition), color var(--u-transition); position: relative; cursor: pointer; } .u-nav-item:hover { background: rgba(255,255,255,0.045); color: rgba(250,246,238,0.88); text-decoration: none; } .u-nav-item.active { background: rgba(212,135,42,0.14); color: var(--u-color-brand-accent-l); font-weight: 600; } .u-nav-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--u-color-brand-accent); border-radius: 0 var(--u-radius-sm) var(--u-radius-sm) 0; } .u-nav-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 16px; } .u-nav-badge { margin-left: auto; background: var(--u-color-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--u-radius-full); min-width: 18px; text-align: center; } .u-sidebar-user { padding: var(--u-space-3) var(--u-space-4); border-top: 1px solid rgba(212,135,42,0.1); display: flex; align-items: center; gap: var(--u-space-3); } .u-sidebar-avatar { width: 32px; height: 32px; border-radius: var(--u-radius-full); background: var(--u-color-brand-accent); color: var(--u-color-brand-primary); display: flex; align-items: center; justify-content: center; font-size: var(--u-text-xs); font-weight: 700; flex-shrink: 0; } .u-sidebar-user-name { font-size: var(--u-text-sm); font-weight: 500; color: rgba(250,246,238,0.78); line-height: 1.2; } .u-sidebar-user-role { font-size: var(--u-text-xs); color: rgba(250,246,238,0.35); } /* ── TOPBAR ──────────────────────────────────────────────────────────────────── */ .u-topbar { height: var(--u-topbar-h); background: var(--u-color-bg-primary); border-bottom: 1px solid var(--u-color-border); display: flex; align-items: center; padding: 0 var(--u-space-6); gap: var(--u-space-4); position: sticky; top: 0; z-index: 40; } .u-topbar-title { font-family: var(--u-font-display); font-size: var(--u-text-md); font-weight: 700; color: var(--u-color-text-primary); flex: 1; } .u-topbar-breadcrumb { font-size: var(--u-text-sm); color: var(--u-color-text-tertiary); display: flex; align-items: center; gap: var(--u-space-2); flex: 1; min-width: 0; overflow: hidden; } .u-topbar-breadcrumb a { color: var(--u-color-text-secondary); text-decoration: none; } .u-topbar-breadcrumb a:hover { color: var(--u-color-text-primary); } .u-topbar-breadcrumb span { color: var(--u-color-text-tertiary); } .u-topbar-actions { display: flex; align-items: center; gap: var(--u-space-3); } /* ── BELL NOTIFICATION ───────────────────────────────────────────────────────── */ .u-bell { position: relative; cursor: pointer; } .u-bell-btn { width: 36px; height: 36px; border-radius: var(--u-radius-md); background: transparent; border: 1px solid var(--u-color-border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--u-transition); color: var(--u-color-text-secondary); font-size: 18px; } .u-bell-btn:hover { background: var(--u-color-bg-tertiary); } .u-bell-count { position: absolute; top: -4px; right: -4px; background: var(--u-color-danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: var(--u-radius-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--u-color-bg-primary); } .u-bell-count.hidden { display: none; } .u-bell-drawer { position: absolute; top: calc(100% + 8px); right: -8px; width: 360px; background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-lg); box-shadow: var(--u-shadow-xl); z-index: 200; display: none; max-height: 480px; overflow: hidden; flex-direction: column; } .u-bell-drawer.open { display: flex; } .u-bell-drawer-header { padding: var(--u-space-4); border-bottom: 1px solid var(--u-color-border); display: flex; align-items: center; justify-content: space-between; } .u-bell-drawer-title { font-size: var(--u-text-sm); font-weight: 600; } .u-bell-drawer-list { overflow-y: auto; flex: 1; } .u-notif-item { display: flex; gap: var(--u-space-3); padding: var(--u-space-3) var(--u-space-4); border-bottom: 1px solid var(--u-color-border); cursor: pointer; transition: background var(--u-transition); text-decoration: none; color: inherit; } .u-notif-item:hover { background: var(--u-color-bg-secondary); } .u-notif-item.unread { background: var(--u-color-info-bg); } .u-notif-dot { width: 8px; height: 8px; border-radius: var(--u-radius-full); background: var(--u-color-info); flex-shrink: 0; margin-top: 5px; } .u-notif-dot.read { background: transparent; border: 1px solid var(--u-color-border); } .u-notif-title { font-size: var(--u-text-sm); font-weight: 500; line-height: 1.3; } .u-notif-body { font-size: var(--u-text-xs); color: var(--u-color-text-secondary); margin-top: 2px; } .u-notif-time { font-size: 10px; color: var(--u-color-text-tertiary); margin-top: 3px; } /* ── IMPERSONATION BANNER ────────────────────────────────────────────────────── */ .u-impersonation-banner { background: var(--u-color-warning-bg); border-bottom: 2px solid var(--u-color-warning); padding: var(--u-space-2) var(--u-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--u-space-4); font-size: var(--u-text-sm); color: #7C4A00; } .u-impersonation-banner strong { font-weight: 600; } /* ── CARDS ───────────────────────────────────────────────────────────────────── */ .u-card { background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-lg); padding: var(--u-space-6); } .u-card-raised { box-shadow: var(--u-shadow-md); } .u-card-flat { border: none; box-shadow: none; } .u-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--u-space-4); padding-bottom: var(--u-space-4); border-bottom: 1px solid var(--u-color-border); } .u-card-title { font-family: var(--u-font-display); font-size: var(--u-text-md); font-weight: 700; color: var(--u-color-text-primary); } .u-card-subtitle { font-size: var(--u-text-sm); color: var(--u-color-text-secondary); margin-top: 2px; } /* Card semantic variants — replaces inline background/border overrides */ .u-card--danger { background: var(--u-color-danger-bg); border-color: var(--u-color-danger-border); } .u-card--warning { background: var(--u-color-warning-bg); border-color: var(--u-color-warning-border); } .u-card--info { background: var(--u-color-info-bg); border-color: var(--u-color-info-border); } .u-card--success { background: var(--u-color-success-bg); border-color: var(--u-color-success-border); } /* ── STAT / KPI CARDS ────────────────────────────────────────────────────────── */ .u-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u-space-4); margin-bottom: var(--u-space-6); } .u-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--u-space-4); margin-bottom: var(--u-space-6); } .u-stat-card { background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-lg); padding: var(--u-space-5); text-align: center; } .u-stat-card--success { border-top: 3px solid var(--u-color-success); } .u-stat-card--info { border-top: 3px solid var(--u-color-info); } .u-stat-card--danger { border-top: 3px solid var(--u-color-danger); } .u-stat-card--warning { border-top: 3px solid var(--u-color-warning); } .u-stat-label { font-size: var(--u-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--u-color-text-tertiary); margin-bottom: var(--u-space-2); } .u-stat-value { font-family: var(--u-font-display); font-size: var(--u-text-3xl); font-weight: 700; color: var(--u-color-text-primary); line-height: 1; } .u-stat-trend { display: flex; align-items: center; gap: var(--u-space-1); font-size: var(--u-text-xs); margin-top: var(--u-space-2); } .u-stat-trend.up { color: var(--u-color-success); } .u-stat-trend.down { color: var(--u-color-danger); } .u-stat-trend.flat { color: var(--u-color-text-tertiary); } /* KPI accent border-top variants (Savanna Dusk style) */ .u-stat-card-accent { border-top: 2.5px solid var(--u-color-brand-accent); } .u-stat-card-accent.sage { border-top-color: var(--u-color-brand-sage); } .u-stat-card-accent.danger { border-top-color: var(--u-color-danger); } .u-stat-card-accent.info { border-top-color: var(--u-color-info); } .u-stat-card-accent.sienna { border-top-color: #8B4513; } /* ── TABLES ──────────────────────────────────────────────────────────────────── */ .u-table-responsive { overflow-x: auto; border-radius: var(--u-radius-lg); border: 1px solid var(--u-color-border); } .u-table-wrap { overflow-x: auto; } .u-table { width: 100%; border-collapse: collapse; font-size: var(--u-text-sm); } .u-table thead { background: var(--u-color-bg-secondary); } .u-table th { text-align: left; font-size: var(--u-text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--u-color-text-tertiary); padding: var(--u-space-3) var(--u-space-4); border-bottom: 1px solid var(--u-color-border); white-space: nowrap; } .u-table td { padding: var(--u-space-3) var(--u-space-4); border-bottom: 1px solid var(--u-color-border); vertical-align: middle; color: var(--u-color-text-primary); } .u-table tbody tr:last-child td { border-bottom: none; } .u-table tbody tr:hover td { background: var(--u-color-bg-secondary); } .u-table-dense th, .u-table-dense td { padding: var(--u-space-2) var(--u-space-3); } .u-table-sm th, .u-table-sm td { padding: var(--u-space-2) var(--u-space-3); font-size: var(--u-text-xs); } /* Data column — Space Grotesk for IDs, dates, amounts */ .u-table .u-col-mono { font-family: var(--u-font-mono); font-size: var(--u-text-xs); } .u-table .u-col-amount { font-family: var(--u-font-mono); font-weight: 600; color: var(--u-color-text-primary); } /* ── SEARCH + FILTER BAR ─────────────────────────────────────────────────────── */ .u-list-toolbar { display: flex; align-items: center; gap: var(--u-space-3); margin-bottom: var(--u-space-4); flex-wrap: wrap; } .u-toolbar { display: flex; align-items: center; gap: var(--u-space-3); margin-bottom: var(--u-space-4); flex-wrap: wrap; } .u-toolbar-search { display: flex; align-items: center; gap: var(--u-space-3); flex: 1; min-width: 200px; } .u-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 380px; } .u-search-icon { position: absolute; left: var(--u-space-3); top: 50%; transform: translateY(-50%); color: var(--u-color-text-tertiary); font-size: 16px; pointer-events: none; } .u-search-input { width: 100%; padding: var(--u-space-2) var(--u-space-3) var(--u-space-2) calc(var(--u-space-3) + 20px); background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-md); font-size: var(--u-text-sm); color: var(--u-color-text-primary); outline: none; transition: border-color var(--u-transition); } .u-search-input:focus { border-color: var(--u-color-brand-accent); } .u-filter-chips { display: flex; gap: var(--u-space-2); flex-wrap: wrap; } .u-chip { display: inline-flex; align-items: center; gap: 4px; padding: var(--u-space-1) var(--u-space-3); background: var(--u-color-bg-tertiary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-full); font-size: var(--u-text-xs); color: var(--u-color-text-secondary); cursor: pointer; text-decoration: none; transition: all var(--u-transition); white-space: nowrap; } .u-chip:hover { border-color: var(--u-color-border-emphasis); color: var(--u-color-text-primary); text-decoration: none; } .u-chip.active,.u-chip--active { background: var(--u-color-brand-accent); border-color: var(--u-color-brand-accent); color: var(--u-color-brand-primary); font-weight: 600; } .u-chip-badge { background: var(--u-color-danger); color: #fff; border-radius: var(--u-radius-full); padding: 0 4px; font-size: 9px; font-weight: 700; } .u-list-actions { margin-left: auto; display: flex; gap: var(--u-space-2); } /* ── BADGES / PILLS ──────────────────────────────────────────────────────────── */ .u-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--u-text-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--u-radius-full); white-space: nowrap; } .u-badge-success { background: var(--u-color-success-bg); color: var(--u-color-success); border: 1px solid var(--u-color-success-border); } .u-badge-warning { background: var(--u-color-warning-bg); color: var(--u-color-warning); border: 1px solid var(--u-color-warning-border); } .u-badge-danger { background: var(--u-color-danger-bg); color: var(--u-color-danger); border: 1px solid var(--u-color-danger-border); } .u-badge-info { background: var(--u-color-info-bg); color: var(--u-color-info); border: 1px solid var(--u-color-info-border); } .u-badge-neutral { background: var(--u-color-bg-tertiary); color: var(--u-color-text-secondary); border: 1px solid var(--u-color-border); } .u-badge-brand { background: var(--u-color-brand-primary); color: var(--u-color-brand-accent); border: 1px solid var(--u-color-brand-accent); } .u-badge-muted { background: var(--u-color-bg-tertiary); color: var(--u-color-text-tertiary); border: 1px solid var(--u-color-border); } .u-badge-primary { background: var(--u-color-info-bg); color: var(--u-color-info); border: 1px solid var(--u-color-info-border); } /* ── BUTTONS ─────────────────────────────────────────────────────────────────── */ .u-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--u-space-2); padding: var(--u-space-2) var(--u-space-4); font-size: var(--u-text-sm); font-weight: 500; border-radius: var(--u-radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--u-transition); text-decoration: none; white-space: nowrap; min-height: 36px; } .u-btn:disabled { opacity: .5; cursor: not-allowed; } .u-btn:hover { text-decoration: none; } .u-btn-primary { background: var(--u-color-brand-accent); color: var(--u-color-brand-primary); border-color: var(--u-color-brand-accent); font-weight: 600; } .u-btn-primary:hover { background: var(--u-color-brand-accent-l); border-color: var(--u-color-brand-accent-l); } .u-btn-secondary { background: var(--u-color-bg-primary); color: var(--u-color-text-primary); border-color: var(--u-color-border); } .u-btn-secondary:hover { background: var(--u-color-bg-tertiary); } .u-btn-ghost { background: transparent; color: var(--u-color-text-secondary); border-color: transparent; } .u-btn-ghost:hover { background: var(--u-color-bg-tertiary); color: var(--u-color-text-primary); } .u-btn-danger { background: var(--u-color-danger-bg); color: var(--u-color-danger); border-color: var(--u-color-danger-border); } .u-btn-danger:hover { background: var(--u-color-danger); color: #fff; } .u-btn-success { background: var(--u-color-success-bg); color: var(--u-color-success); border-color: var(--u-color-success-border); } .u-btn-success:hover { background: var(--u-color-success); color: #fff; } .u-btn-sm { padding: 4px 12px; font-size: var(--u-text-xs); min-height: 28px; } .u-btn-xs { padding: 2px 8px; font-size: var(--u-text-xs); min-height: 0; } .u-btn-lg { padding: var(--u-space-3) var(--u-space-6); font-size: var(--u-text-md); min-height: 44px; } .u-btn-icon { padding: var(--u-space-2); min-width: 36px; } /* Chip-style button (used in role assignment matrix) */ .u-btn-chip { border: none; cursor: pointer; padding: 2px 8px; } /* ── FORMS ───────────────────────────────────────────────────────────────────── */ .u-field { margin-bottom: var(--u-space-4); } .u-form-group { margin-bottom: var(--u-space-4); } .u-field-label { display: block; font-size: var(--u-text-sm); font-weight: 500; color: var(--u-color-text-primary); margin-bottom: var(--u-space-2); } .u-label { display: block; font-size: var(--u-text-sm); font-weight: 500; color: var(--u-color-text-primary); margin-bottom: var(--u-space-2); } .u-label--required::after { content: ' *'; color: var(--u-color-danger); } .u-field-label .required { color: var(--u-color-danger); margin-left: 2px; } .u-input,.u-select,.u-textarea { width: 100%; padding: var(--u-space-2) var(--u-space-3); background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-md); font-size: var(--u-text-sm); color: var(--u-color-text-primary); outline: none; transition: border-color var(--u-transition); appearance: none; } .u-input:focus,.u-select:focus,.u-textarea:focus { border-color: var(--u-color-brand-accent); box-shadow: 0 0 0 3px rgba(212,135,42,.14); } .u-input::placeholder,.u-textarea::placeholder { color: var(--u-color-text-tertiary); } /* Select chevron uses warm tertiary #9E8A74 */ .u-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E8A74' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .u-select-sm { font-size: var(--u-text-xs); padding: 4px 28px 4px 8px; min-height: 28px; background-position: right 8px center; } .u-select-xs { font-size: var(--u-text-xs); padding: 2px 24px 2px 6px; background-position: right 6px center; } .u-textarea { resize: vertical; min-height: 100px; line-height: 1.6; } .u-field-help { font-size: var(--u-text-xs); color: var(--u-color-text-tertiary); margin-top: var(--u-space-1); line-height: 1.4; } .u-field-error { font-size: var(--u-text-xs); color: var(--u-color-danger); margin-top: var(--u-space-1); } .u-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-space-4); } .u-form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--u-space-4); } .u-form-row--3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--u-space-4); } .u-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--u-space-4); } /* Responsive main-content + aside layout */ .u-layout-main-aside { display: grid; grid-template-columns: 2fr 1fr; gap: var(--u-space-5); align-items: start; } /* 6-column KPI strip */ .u-kpi-6 { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--u-space-4); margin-bottom: var(--u-space-6); } .u-form-actions { display: flex; align-items: center; gap: var(--u-space-3); padding-top: var(--u-space-4); } .u-form-page { max-width: 860px; } .u-checkbox-label { display: flex; align-items: center; gap: var(--u-space-2); font-size: var(--u-text-sm); cursor: pointer; } .u-switch { display: flex; align-items: center; gap: var(--u-space-3); cursor: pointer; } .u-switch-track { width: 36px; height: 20px; background: var(--u-color-border-emphasis); border-radius: var(--u-radius-full); position: relative; transition: background var(--u-transition); flex-shrink: 0; } .u-switch input:checked + .u-switch-track { background: var(--u-color-brand-accent); } .u-switch-thumb { width: 14px; height: 14px; background: #fff; border-radius: var(--u-radius-full); position: absolute; top: 3px; left: 3px; transition: transform var(--u-transition); box-shadow: var(--u-shadow-sm); } .u-switch input:checked ~ .u-switch-thumb { transform: translateX(16px); } .u-switch input { display: none; } /* ── MODALS ──────────────────────────────────────────────────────────────────── */ .u-modal-backdrop { position: fixed; inset: 0; background: rgba(28,18,8,.5); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--u-space-4); backdrop-filter: blur(4px); } .u-modal { background: var(--u-color-bg-primary); border-radius: var(--u-radius-xl); box-shadow: var(--u-shadow-xl); width: 100%; max-height: 90vh; display: flex; flex-direction: column; } .u-modal-sm { max-width: 480px; } .u-modal-md { max-width: 640px; } .u-modal-lg { max-width: 860px; } .u-modal-header { padding: var(--u-space-6) var(--u-space-6) var(--u-space-4); border-bottom: 1px solid var(--u-color-border); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--u-space-4); } .u-modal-title { font-family: var(--u-font-display); font-size: var(--u-text-lg); font-weight: 700; } .u-modal-body { padding: var(--u-space-6); overflow-y: auto; flex: 1; } .u-modal-footer { padding: var(--u-space-4) var(--u-space-6); border-top: 1px solid var(--u-color-border); display: flex; align-items: center; justify-content: flex-end; gap: var(--u-space-3); } /* ── FEEDBACK ────────────────────────────────────────────────────────────────── */ .u-alert { display: flex; gap: var(--u-space-3); padding: var(--u-space-4); border-radius: var(--u-radius-md); font-size: var(--u-text-sm); line-height: 1.5; margin-bottom: var(--u-space-4); } .u-alert-success { background: var(--u-color-success-bg); border: 1px solid var(--u-color-success-border); color: #1A6B4A; } .u-alert-warning { background: var(--u-color-warning-bg); border: 1px solid var(--u-color-warning-border); color: #7C4A00; } .u-alert-danger { background: var(--u-color-danger-bg); border: 1px solid var(--u-color-danger-border); color: #8B1A12; } .u-alert-info { background: var(--u-color-info-bg); border: 1px solid var(--u-color-info-border); color: #1A5F7A; } .u-toast { position: fixed; bottom: var(--u-space-6); right: var(--u-space-6); padding: var(--u-space-4) var(--u-space-5); border-radius: var(--u-radius-lg); font-size: var(--u-text-sm); font-weight: 500; box-shadow: var(--u-shadow-xl); z-index: 999; animation: toastIn .3s ease; } .u-toast-success { background: var(--u-color-success); color: #fff; } .u-toast-error { background: var(--u-color-danger); color: #fff; } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .u-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--u-space-16) var(--u-space-6); text-align: center; } .u-empty-icon { font-size: 48px; margin-bottom: var(--u-space-4); opacity: .4; } .u-empty-title { font-family: var(--u-font-display); font-size: var(--u-text-lg); font-weight: 700; color: var(--u-color-text-primary); margin-bottom: var(--u-space-2); } .u-empty-body { font-size: var(--u-text-sm); color: var(--u-color-text-secondary); max-width: 360px; } .u-skeleton { background: linear-gradient(90deg, var(--u-color-bg-tertiary) 25%, var(--u-color-bg-secondary) 50%, var(--u-color-bg-tertiary) 75%); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; border-radius: var(--u-radius-sm); } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .u-spinner { width: 20px; height: 20px; border: 2px solid var(--u-color-border); border-top-color: var(--u-color-brand-accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── PAGE HEADER ─────────────────────────────────────────────────────────────── */ .u-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--u-space-4); margin-bottom: var(--u-space-6); flex-wrap: wrap; } .u-page-title { font-family: var(--u-font-display); font-size: var(--u-text-2xl); font-weight: 700; color: var(--u-color-text-primary); } .u-page-subtitle { font-size: var(--u-text-sm); color: var(--u-color-text-secondary); margin-top: var(--u-space-1); } .u-page-actions { display: flex; align-items: center; gap: var(--u-space-3); flex-shrink: 0; } /* ── TABS ────────────────────────────────────────────────────────────────────── */ .u-tabs { display: flex; border-bottom: 2px solid var(--u-color-border); gap: 0; } .u-tab { padding: var(--u-space-2) var(--u-space-4); font-size: var(--u-text-sm); font-weight: 500; color: var(--u-color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--u-transition); } .u-tab:hover { color: var(--u-color-text-primary); text-decoration: none; } .u-tab--active { color: var(--u-color-brand-accent); border-bottom-color: var(--u-color-brand-accent); font-weight: 600; } /* ── PAGINATION ──────────────────────────────────────────────────────────────── */ .u-pagination { display: flex; align-items: center; gap: var(--u-space-2); padding: var(--u-space-4) 0; } .u-page-btn { min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--u-color-border); border-radius: var(--u-radius-md); font-size: var(--u-text-sm); color: var(--u-color-text-secondary); text-decoration: none; cursor: pointer; transition: all var(--u-transition); background: var(--u-color-bg-primary); } .u-page-btn:hover { border-color: var(--u-color-brand-accent); color: var(--u-color-brand-accent); text-decoration: none; } .u-page-btn.active { background: var(--u-color-brand-accent); border-color: var(--u-color-brand-accent); color: var(--u-color-brand-primary); font-weight: 600; } .u-page-btn:disabled { opacity: .4; cursor: not-allowed; } .u-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border: 1px solid var(--u-color-border); border-radius: var(--u-radius-md); font-size: var(--u-text-sm); color: var(--u-color-text-secondary); text-decoration: none; cursor: pointer; transition: all var(--u-transition); padding: 0 var(--u-space-2); } .u-page-link:hover { border-color: var(--u-color-brand-accent); color: var(--u-color-brand-accent); text-decoration: none; } .u-page-link--active { background: var(--u-color-brand-accent); border-color: var(--u-color-brand-accent); color: var(--u-color-brand-primary); font-weight: 600; } .u-pagination-info { font-size: var(--u-text-xs); color: var(--u-color-text-tertiary); margin-left: auto; } /* ── DIAGNOSTICS (health gauge cards) ────────────────────────────────────��──── */ .u-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--u-space-4); } .u-health-card { background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-lg); padding: var(--u-space-5); position: relative; overflow: hidden; } .u-health-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .u-health-card.green::before { background: var(--u-color-success); } .u-health-card.amber::before { background: var(--u-color-warning); } .u-health-card.red::before { background: var(--u-color-danger); } .u-health-score { font-family: var(--u-font-display); font-size: var(--u-text-4xl); font-weight: 700; line-height: 1; } .u-health-score.green { color: var(--u-color-success); } .u-health-score.amber { color: var(--u-color-warning); } .u-health-score.red { color: var(--u-color-danger); } .u-health-label { font-size: var(--u-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--u-color-text-tertiary); margin-top: var(--u-space-2); } .u-health-trend { display: flex; align-items: center; gap: 4px; font-size: var(--u-text-xs); margin-top: var(--u-space-2); color: var(--u-color-text-tertiary); } /* ── INCIDENT CARDS ──────────────────────────────────────────────────────────── */ .u-incident { background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-lg); padding: var(--u-space-5); margin-bottom: var(--u-space-4); } .u-incident-header { display: flex; align-items: flex-start; gap: var(--u-space-4); margin-bottom: var(--u-space-4); } .u-incident-title { font-family: var(--u-font-display); font-size: var(--u-text-md); font-weight: 700; flex: 1; } .u-incident-meta { font-size: var(--u-text-xs); color: var(--u-color-text-tertiary); margin-top: 2px; } .u-incident-box { padding: var(--u-space-3) var(--u-space-4); border-radius: var(--u-radius-md); font-size: var(--u-text-sm); margin-bottom: var(--u-space-3); line-height: 1.5; } .u-incident-cause { background: var(--u-color-warning-bg); border-left: 3px solid var(--u-color-warning); color: #7C4A00; } .u-incident-action { background: var(--u-color-success-bg); border-left: 3px solid var(--u-color-success); color: #1A6B4A; } .u-incident-scope { background: var(--u-color-bg-tertiary); border-left: 3px solid var(--u-color-border-emphasis); color: var(--u-color-text-secondary); } .u-incident-actions { display: flex; gap: var(--u-space-2); flex-wrap: wrap; margin-top: var(--u-space-4); padding-top: var(--u-space-4); border-top: 1px solid var(--u-color-border); } /* ── INLINE FORMS (table row actions) ────────────────────────────��──────────── */ .u-inline-form { display: inline-flex; } .u-actions-cell { display: flex; align-items: center; gap: var(--u-space-1); } .u-max-w-xs { max-width: 200px; } /* ── RESPONSIVE ──────────────────────────────────────────────────────────────── */ @media (max-width: 1023px) { .u-sidebar { transform: translateX(-100%); } .u-sidebar.open { transform: translateX(0); box-shadow: var(--u-shadow-xl); } .u-main { margin-left: 0; } .u-stat-grid { grid-template-columns: 1fr 1fr; } .u-form-row,.u-form-row--2col,.u-form-row--3col,.u-form-row-3 { grid-template-columns: 1fr; } .u-layout-main-aside { grid-template-columns: 1fr; } .u-kpi-6 { grid-template-columns: repeat(3,1fr); } .u-modal { margin: var(--u-space-4); max-height: 85vh; } .u-bell-drawer { width: min(300px, calc(100vw - 32px)); right: -4px; } } @media (max-width: 639px) { .u-content { padding: var(--u-space-4); } .u-topbar { padding: 0 var(--u-space-4); } .u-stat-grid,.u-stats-grid { grid-template-columns: 1fr 1fr; } .u-kpi-6 { grid-template-columns: repeat(2,1fr); } .u-list-toolbar { flex-direction: column; align-items: stretch; } .u-search-wrap { max-width: 100%; } .u-modal-backdrop { padding: var(--u-space-2); align-items: flex-end; } .u-modal { border-radius: var(--u-radius-xl) var(--u-radius-xl) 0 0; max-height: 90vh; } .u-table-responsive .u-table { font-size: var(--u-text-xs); } .u-table th, .u-table td { padding: var(--u-space-2) var(--u-space-3); } .u-health-grid { grid-template-columns: 1fr 1fr; } } /* ── UTILITIES ───────────────────────────────────────────────────────────────── */ .u-text-xs { font-size: var(--u-text-xs); } .u-text-sm { font-size: var(--u-text-sm); } .u-text-base { font-size: var(--u-text-base); } .u-text-secondary { color: var(--u-color-text-secondary); } .u-text-tertiary { color: var(--u-color-text-tertiary); } .u-text-success { color: var(--u-color-success); } .u-text-danger { color: var(--u-color-danger); } .u-text-warning { color: var(--u-color-warning); } .u-text-brand { color: var(--u-color-brand-accent); } .u-text-primary-color { color: var(--u-color-text-primary); } .u-text-center { text-align: center; } .u-text-right { text-align: right; } .u-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-font-display { font-family: var(--u-font-display); } .u-font-mono { font-family: var(--u-font-mono); } .u-font-600 { font-weight: 600; } .u-font-700 { font-weight: 700; } .u-flex { display: flex; } .u-flex-col { display: flex; flex-direction: column; } .u-flex-wrap { flex-wrap: wrap; } .u-inline-flex { display: inline-flex; } .u-items-center { align-items: center; } .u-justify-between { justify-content: space-between; } .u-gap-1 { gap: var(--u-space-1); } .u-gap-2 { gap: var(--u-space-2); } .u-gap-3 { gap: var(--u-space-3); } .u-gap-4 { gap: var(--u-space-4); } .u-mt-1 { margin-top: var(--u-space-1); } .u-mt-2 { margin-top: var(--u-space-2); } .u-mt-3 { margin-top: var(--u-space-3); } .u-mt-4 { margin-top: var(--u-space-4); } .u-mt-5 { margin-top: var(--u-space-5); } .u-mt-6 { margin-top: var(--u-space-6); } .u-mb-2 { margin-bottom: var(--u-space-2); } .u-mb-3 { margin-bottom: var(--u-space-3); } .u-mb-4 { margin-bottom: var(--u-space-4); } .u-mb-5 { margin-bottom: var(--u-space-5); } .u-mb-6 { margin-bottom: var(--u-space-6); } .u-mr-2 { margin-right: var(--u-space-2); } .u-ml-auto { margin-left: auto; } .u-p-0 { padding: 0; } .u-p-3 { padding: var(--u-space-3); } .u-p-4 { padding: var(--u-space-4); } .u-p-5 { padding: var(--u-space-5); } .u-px-4 { padding-left: var(--u-space-4); padding-right: var(--u-space-4); } .u-py-3 { padding-top: var(--u-space-3); padding-bottom: var(--u-space-3); } .u-align-center { align-items: center; } .u-link { color: var(--u-color-brand-accent); text-decoration: none; } .u-link:hover { text-decoration: underline; } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .u-list-plain { list-style: disc; margin: var(--u-space-3) 0; padding-left: 1rem; } /* ── SIDEBAR USER POPUP ──────────────────────────────────────────────────────── */ .u-user-popup { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-lg); box-shadow: var(--u-shadow-xl); overflow: hidden; display: none; z-index: 60; min-width: 200px; } .u-user-popup.open { display: block; animation: popupIn .15s ease; } @keyframes popupIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .u-user-popup-header { padding: var(--u-space-4); background: var(--u-color-bg-secondary); border-bottom: 1px solid var(--u-color-border); } .u-user-popup-name { font-weight: 600; font-size: var(--u-text-sm); color: var(--u-color-text-primary); } .u-user-popup-email { font-size: var(--u-text-xs); color: var(--u-color-text-tertiary); margin-top: 1px; word-break: break-all; } .u-user-popup-role { font-size: var(--u-text-xs); color: var(--u-color-brand-accent); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .u-user-popup-item { display: flex; align-items: center; gap: var(--u-space-3); padding: var(--u-space-2) var(--u-space-4); font-size: var(--u-text-sm); color: var(--u-color-text-secondary); text-decoration: none; transition: background var(--u-transition); } .u-user-popup-item:hover { background: var(--u-color-bg-secondary); color: var(--u-color-text-primary); text-decoration: none; } .u-user-popup-danger { color: var(--u-color-danger) !important; } .u-user-popup-danger:hover { background: var(--u-color-danger-bg) !important; } .u-user-popup-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; } .u-user-popup-divider { height: 1px; background: var(--u-color-border); margin: var(--u-space-1) 0; } /* ── SPRINT 2 PLACEHOLDER NAV ITEMS ─────────────────────────────────────────── */ .u-nav-item.placeholder { opacity: 0.55; } .u-nav-item.placeholder::after { content: 'Soon'; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; background: rgba(212,135,42,0.18); color: var(--u-color-brand-accent); padding: 1px 6px; border-radius: 20px; margin-left: auto; font-family: var(--u-font-body); } .u-nav-item.placeholder:hover { background: transparent; cursor: default; } /* ── PLACEHOLDER PAGE ────────────────────────────────────────────────────────── */ .u-placeholder-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: var(--u-space-16) var(--u-space-6); } .u-placeholder-badge { display: inline-flex; align-items: center; gap: var(--u-space-2); background: rgba(212,135,42,0.12); border: 1px solid rgba(212,135,42,0.25); color: var(--u-color-brand-accent); font-size: var(--u-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: var(--u-space-2) var(--u-space-4); border-radius: var(--u-radius-full); margin-bottom: var(--u-space-6); } .u-placeholder-icon { font-size: 56px; margin-bottom: var(--u-space-6); opacity: .5; } .u-placeholder-title { font-family: var(--u-font-display); font-size: var(--u-text-2xl); font-weight: 700; color: var(--u-color-text-primary); margin-bottom: var(--u-space-3); } .u-placeholder-body { font-size: var(--u-text-sm); color: var(--u-color-text-secondary); max-width: 440px; line-height: 1.7; margin-bottom: var(--u-space-8); } .u-placeholder-features { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--u-space-2); max-width: 560px; } .u-placeholder-feature { background: var(--u-color-bg-tertiary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-md); padding: var(--u-space-2) var(--u-space-3); font-size: var(--u-text-xs); color: var(--u-color-text-secondary); } /* Live search highlight */ .u-search-highlight { background: rgba(212,135,42,0.18); border-radius: 2px; } /* ── IMPERSONATION BANNER — sidebar offset fix ─────────────────────────────── Sidebar is position:fixed so the banner renders full-width behind it. Offset the banner content to start after the sidebar. ──────────────────── */ .u-impersonation-banner { margin-left: var(--u-sidebar-w); transition: margin-left var(--u-transition-slow); } @media (max-width: 1023px) { .u-impersonation-banner { margin-left: 0; } } /* ── SORTABLE TABLE HEADERS ─────────────────────────────────────────���──────── Add data-sort="asc|desc|none" to any to make it sortable. JS in platform-footer.php handles the actual sorting logic. ─────────────── */ .u-table th[data-sortable] { cursor: pointer; user-select: none; white-space: nowrap; } .u-table th[data-sortable]:hover { color: var(--u-color-text-primary); background: var(--u-color-bg-tertiary); } /* Stacked sort indicator — always visible, dim when inactive */ .u-table th[data-sortable]::after { content: '⬆⬇'; font-size: 8px; margin-left: 5px; opacity: 0.28; letter-spacing: -1px; display: inline-block; vertical-align: middle; } .u-table th[data-sort="asc"]::after { content: '⬆'; opacity: 1; color: var(--u-color-brand-accent); font-size: 10px; } .u-table th[data-sort="desc"]::after { content: '⬇'; opacity: 1; color: var(--u-color-brand-accent); font-size: 10px; } /* ── ENHANCED SEARCH BAR — column filter chips ─────────────────────────────── .u-search-field-wrap: wraps a label + input pair for per-column filtering. Renders inline with the main toolbar. ───────────────────────────────────── */ .u-search-fields { display: flex; gap: var(--u-space-2); flex-wrap: wrap; align-items: center; flex: 1; } .u-search-field { display: flex; align-items: center; gap: var(--u-space-2); background: var(--u-color-bg-primary); border: 1px solid var(--u-color-border); border-radius: var(--u-radius-md); padding: 0 var(--u-space-3); height: 34px; min-width: 140px; max-width: 200px; transition: border-color var(--u-transition); } .u-search-field:focus-within { border-color: var(--u-color-brand-accent); box-shadow: 0 0 0 3px rgba(212,135,42,.1); } .u-search-field-label { font-size: var(--u-text-xs); color: var(--u-color-text-tertiary); white-space: nowrap; font-weight: 500; letter-spacing: .02em; } .u-search-field input, .u-search-field select { border: none; outline: none; background: transparent; font-size: var(--u-text-xs); color: var(--u-color-text-primary); width: 100%; padding: 0; font-family: var(--u-font-body); } .u-search-field select { cursor: pointer; } .u-search-clear { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--u-radius-full); background: var(--u-color-bg-tertiary); color: var(--u-color-text-tertiary); font-size: 10px; cursor: pointer; border: none; flex-shrink: 0; transition: background var(--u-transition); } .u-search-clear:hover { background: var(--u-color-border-emphasis); color: var(--u-color-text-primary); } /* ── MOBILE MENU BUTTON ──────────────────────────────────────────────────────── */ .u-topbar-menu-btn { display: none; } @media (max-width: 1023px) { .u-topbar-menu-btn { display: inline-flex; } } /* ── MOBILE OVERLAY ──────────────────────────────────────────────────────────── */ .u-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 49; } .u-overlay.open { display: block; }