/**
* Base Styles
* Shared reset and common styles across all pages
* This file should be loaded FIRST, before navigation.css and page-specific CSS
*/
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Standard SPA page container.
* `.admin-page` is the shared root container for the app's list + detail pages
* (vendor assessments, board reports, gaps, evidence packages, IR programs,
* policies, remediation plans, …). The `* { padding: 0 }` reset above zeroes
* its padding, so without a base rule any page using `.admin-page` sits flush
* against the sidebar with no gutter. This base rule gives every such page the
* standard content gutter using the shared --content-padding tokens. Pages that
* need bespoke padding still override it with a higher-specificity selector
* (e.g. `.admin-page.policy-case-file`, `.remediation-plan-detail.admin-page`),
* so this is additive and cannot regress those. */
.admin-page {
padding: var(--content-padding, 2rem);
width: 100%;
box-sizing: border-box;
}
@media (max-width: 1200px) {
.admin-page { padding: var(--content-padding-md, 1.5rem); }
}
@media (max-width: 768px) {
.admin-page { padding: var(--content-padding-sm, 1.25rem); }
}
/* Global Focus Styles - WCAG Accessibility */
/* Using :focus-visible to show focus only for keyboard navigation, not mouse clicks */
:focus-visible {
outline: 2px solid var(--accent-primary, #3b82f6);
outline-offset: 2px;
}
/* Reset default focus for elements that have custom focus styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent-primary, #3b82f6);
outline-offset: 2px;
box-shadow: var(--focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.2));
}
/* Remove outline when box-shadow is present (for better aesthetics) */
button:focus-visible,
a:focus-visible {
outline: none;
box-shadow: var(--focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.2));
}
/* Success context focus (e.g., save buttons) */
.btn-success:focus-visible,
.btn-primary:focus-visible {
box-shadow: var(--focus-ring-success, 0 0 0 3px rgba(34, 197, 94, 0.2));
}
/* Danger context focus (e.g., delete buttons) */
.btn-danger:focus-visible {
box-shadow: var(--focus-ring-danger, 0 0 0 3px rgba(239, 68, 68, 0.2));
}
/* Visually Hidden / Screen Reader Only - for screen readers only */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Skip link for keyboard users - accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--accent-primary, #3b82f6);
color: white;
padding: 8px 16px;
z-index: 10000;
text-decoration: none;
border-radius: 0 0 4px 0;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
}
/* ========================================
CSS VARIABLES - 3-TIER ARCHITECTURE
Tier 1: Foundation (raw palette - never use directly in components)
Tier 2: Semantic (theme-aware mappings - use for most styling)
Tier 3: Component (specific UI patterns)
======================================== */
:root {
/* ========================================
TIER 1: FOUNDATION PALETTE
Raw color values - DO NOT use directly in components
These form the base palette for theme switching
======================================== */
/* Slate Gray Scale */
--foundation-slate-50: #f8fafc;
--foundation-slate-100: #f1f5f9;
--foundation-slate-200: #e2e8f0;
--foundation-slate-300: #cbd5e1;
--foundation-slate-400: #94a3b8;
--foundation-slate-500: #64748b;
--foundation-slate-600: #475569;
--foundation-slate-700: #334155;
--foundation-slate-800: #1e293b;
--foundation-slate-900: #0f172a;
--foundation-slate-950: #020617;
/* Indigo (Brand Primary) */
--foundation-indigo-400: #818cf8;
--foundation-indigo-500: #6366f1;
--foundation-indigo-600: #4f46e5;
--foundation-indigo-700: #4338ca;
/* Emerald (Success) */
--foundation-emerald-400: #34d399;
--foundation-emerald-500: #10b981;
--foundation-emerald-600: #059669;
--foundation-emerald-700: #047857;
/* Amber (Warning) */
--foundation-amber-400: #fbbf24;
--foundation-amber-500: #f59e0b;
--foundation-amber-600: #d97706;
--foundation-amber-700: #b45309;
/* Red (Danger) */
--foundation-red-400: #f87171;
--foundation-red-500: #ef4444;
--foundation-red-600: #dc2626;
--foundation-red-700: #b91c1c;
/* Sky (Info - distinct from brand indigo) */
--foundation-sky-400: #38bdf8;
--foundation-sky-500: #0ea5e9;
--foundation-sky-600: #0284c7;
--foundation-sky-700: #0369a1;
/* Teal (Charts/Data Visualization) */
--foundation-teal-400: #2dd4bf;
--foundation-teal-500: #14b8a6;
--foundation-teal-600: #0d9488;
/* ========================================
TIER 2: SEMANTIC VARIABLES (Dark Mode Default)
Theme-aware mappings - use these in components
======================================== */
/* Colors - Dark Theme */
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--card-bg: #1e293b;
--color-bg-card: var(--card-bg);
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-tertiary: #64748b; /* Alias for muted - used in subtitles, metadata */
--text-muted: #64748b;
--text-placeholder: #64748b;
--text-on-accent: #ffffff; /* Text on accent-colored backgrounds */
--text-on-accent-muted: rgba(255, 255, 255, 0.85);
--border-color: #334155;
--border-light: rgba(255, 255, 255, 0.1);
/* Semantic surface/border aliases */
--bg-elevated: var(--card-bg);
--border-subtle: var(--border-color);
/* Form Input Colors - Dark Theme */
--input-bg: #1e293b;
--input-border: #475569;
--input-focus-border: var(--accent-primary);
/* Accent Colors */
--accent-primary: #3b82f6;
--accent-primary-hover: #2563eb;
--accent-primary-bg: rgba(59, 130, 246, 0.2);
--accent-primary-border: rgba(59, 130, 246, 0.3);
/* Primary Color (alias for compatibility) */
--primary-color: #3b82f6;
--primary-color-hover: #2563eb;
--accent-success: #10b981;
--accent-warning: #f59e0b;
--accent-danger: #ef4444;
/* CIS Theme */
--cis-primary: #34d399;
--cis-bg: rgba(52, 211, 153, 0.2);
--cis-border: rgba(52, 211, 153, 0.3);
/* Custom Assessment Theme - Cyan
(Visually distinct from canned framework adapters which use teal,
reflecting the "user-built" character of custom assessments.
Re-themed off purple — see TypeColorRegistry.) */
--custom-primary: #06b6d4;
--custom-bg: rgba(6, 182, 212, 0.15);
--custom-border: rgba(6, 182, 212, 0.3);
/* Semantic Colors */
--color-success: #22c55e;
--color-success-bg: rgba(34, 197, 94, 0.1);
--color-success-border: rgba(34, 197, 94, 0.3);
--color-success-text: #4ade80;
--color-success-dark: #22c55e;
--color-success-darker: #16a34a;
--color-warning: #f59e0b;
--color-warning-bg: rgba(245, 158, 11, 0.1);
--color-warning-border: rgba(245, 158, 11, 0.3);
--color-warning-text: #fbbf24;
--color-danger: #ef4444;
--color-danger-bg: rgba(239, 68, 68, 0.1);
--color-danger-border: rgba(239, 68, 68, 0.3);
--color-danger-text: #f87171;
--color-danger-dark: #dc2626;
/* Info - Changed to Sky blue (distinct from brand indigo) */
--color-info: #0ea5e9;
--color-info-bg: rgba(14, 165, 233, 0.1);
--color-info-border: rgba(14, 165, 233, 0.3);
--color-info-text: #38bdf8;
/* RGB variants for rgba() usage */
--color-warning-rgb: 245, 158, 11;
--color-primary-rgb: 59, 130, 246;
--color-success-rgb: 34, 197, 94;
/* Hover variants for buttons */
--color-success-hover: #16a34a;
--color-warning-hover: #d97706;
--color-danger-hover: #dc2626;
/* Additional semantic colors - Teal (for charts and secondary accents) */
--color-teal: #14b8a6;
--color-teal-bg: rgba(20, 184, 166, 0.1);
--color-teal-border: rgba(20, 184, 166, 0.3);
/* Additional semantic colors - Pink (for board reports and accents) */
--color-pink: #ec4899;
/* ========================================
CATEGORICAL IDENTITY PALETTE (--cat-*)
For "what kind of thing is this?" differentiation across the app
(work item types, evidence types, claimable-work sources, etc.).
NEVER used for status/severity — semantic colors (--color-danger,
--color-warning, --color-success) own that meaning. Mixing the two
creates visual ambiguity (a red badge stops meaning "critical").
Single source of truth for type→color mapping:
www-talarity/js/services/type-color-registry.js
======================================== */
/* Cat-Blue: Work / My Workspace family */
--cat-blue: #3b82f6;
--cat-blue-light: #60a5fa;
--cat-blue-dark: #2563eb;
--cat-blue-bg: rgba(59, 130, 246, 0.1);
--cat-blue-bg-strong: rgba(59, 130, 246, 0.2);
--cat-blue-border: rgba(59, 130, 246, 0.3);
--cat-blue-text: #93c5fd;
/* Cat-Sky: Evidence / Artifacts family */
--cat-sky: #0ea5e9;
--cat-sky-light: #38bdf8;
--cat-sky-dark: #0284c7;
--cat-sky-bg: rgba(14, 165, 233, 0.1);
--cat-sky-bg-strong: rgba(14, 165, 233, 0.2);
--cat-sky-border: rgba(14, 165, 233, 0.3);
--cat-sky-text: #7dd3fc;
/* Cat-Teal: Compliance / Assessments family */
--cat-teal: #14b8a6;
--cat-teal-light: #2dd4bf;
--cat-teal-dark: #0d9488;
--cat-teal-bg: rgba(20, 184, 166, 0.1);
--cat-teal-bg-strong: rgba(20, 184, 166, 0.2);
--cat-teal-border: rgba(20, 184, 166, 0.3);
--cat-teal-text: #5eead4;
/* Cat-Cyan: Audit / Reports family */
--cat-cyan: #06b6d4;
--cat-cyan-light: #22d3ee;
--cat-cyan-dark: #0891b2;
--cat-cyan-bg: rgba(6, 182, 212, 0.1);
--cat-cyan-bg-strong: rgba(6, 182, 212, 0.2);
--cat-cyan-border: rgba(6, 182, 212, 0.3);
--cat-cyan-text: #67e8f9;
/* Cat-Rose: Risk / Incidents family (distinct from --color-danger so a rose
badge reads "category" not "alert") */
--cat-rose: #f43f5e;
--cat-rose-light: #fb7185;
--cat-rose-dark: #e11d48;
--cat-rose-bg: rgba(244, 63, 94, 0.1);
--cat-rose-bg-strong: rgba(244, 63, 94, 0.2);
--cat-rose-border: rgba(244, 63, 94, 0.3);
--cat-rose-text: #fda4af;
/* Cat-Pink: Vendor / People family (the non-purple replacement for the
"external party / human-centric" feel that --color-purple used to carry) */
--cat-pink: #ec4899;
--cat-pink-light: #f472b6;
--cat-pink-dark: #db2777;
--cat-pink-bg: rgba(236, 72, 153, 0.1);
--cat-pink-bg-strong: rgba(236, 72, 153, 0.2);
--cat-pink-border: rgba(236, 72, 153, 0.3);
--cat-pink-text: #f9a8d4;
/* Cat-Slate: Governance / Policy / Platform-admin family */
--cat-slate: #64748b;
--cat-slate-light: #94a3b8;
--cat-slate-dark: #475569;
--cat-slate-bg: rgba(100, 116, 139, 0.1);
--cat-slate-bg-strong: rgba(100, 116, 139, 0.2);
--cat-slate-border: rgba(100, 116, 139, 0.3);
--cat-slate-text: #cbd5e1;
/* ====================================================================
MODULE PALETTE (--module-*)
Single source of truth for module branding across the app.
Matches www-talarity/js/constants/product-modules.js (which mirrors
backend functions/src/utils/productCategoryConfig.js). Used by
home-page module cards (primary) and nav section headers (-soft).
The AI glow is applied to nav sections that contain at least one
moduleId='ai' item when the AI module is licensed.
==================================================================== */
--module-governance: #2563EB;
--module-governance-soft: color-mix(in srgb, #2563EB 85%, white 15%);
--module-governance-bg: rgba(37, 99, 235, 0.10);
--module-risk: #DC2626;
--module-risk-soft: color-mix(in srgb, #DC2626 85%, white 15%);
--module-risk-bg: rgba(220, 38, 38, 0.10);
--module-compliance: #059669;
--module-compliance-soft: color-mix(in srgb, #059669 85%, white 15%);
--module-compliance-bg: rgba(5, 150, 105, 0.10);
--module-vendor: #7C3AED;
--module-vendor-soft: color-mix(in srgb, #7C3AED 85%, white 15%);
--module-vendor-bg: rgba(124, 58, 237, 0.10);
--module-ai: #F59E0B;
--module-ai-soft: color-mix(in srgb, #F59E0B 85%, white 15%);
--module-ai-bg: rgba(245, 158, 11, 0.10);
--module-ai-glow: color-mix(in srgb, #F59E0B 45%, transparent);
/* Buttons */
--btn-primary-bg: #3b82f6;
--btn-primary-bg-hover: #2563eb;
--btn-primary-text: #ffffff;
--btn-secondary-bg: transparent;
--btn-secondary-border: #334155;
--btn-secondary-text: #e2e8f0;
--btn-secondary-bg-hover: #1f2937;
--btn-secondary-text-hover: #cbd5e1;
/* Semantic Card Backgrounds */
--card-success-bg: rgba(34, 197, 94, 0.08);
--card-danger-bg: rgba(239, 68, 68, 0.08);
--card-warning-bg: rgba(245, 158, 11, 0.08);
--card-info-bg: rgba(14, 165, 233, 0.08);
/* ========================================
TIER 3: COMPONENT VARIABLES
Specialized UI patterns
======================================== */
/* Chart Palette - Extended 12 colors for data visualization
Professional enterprise palette with colorblind-safe distinctions
Primary Set (1-6): For most use cases */
--chart-1: #3b82f6; /* Blue - primary series */
--chart-2: #10b981; /* Emerald */
--chart-3: #f59e0b; /* Amber */
--chart-4: #0ea5e9; /* Sky */
--chart-5: #f43f5e; /* Rose (was purple — banned) */
--chart-6: #14b8a6; /* Teal */
/* Secondary Set (7-12): For organizations with 10+ companies */
--chart-7: #f97316; /* Orange */
--chart-8: #3b82f6; /* Blue */
--chart-9: #ec4899; /* Pink */
--chart-10: #84cc16; /* Lime */
--chart-11: #06b6d4; /* Cyan */
--chart-12: #64748b; /* Slate (was violet — banned) */
--chart-grid-color: #475569; /* Grid lines for radar/line charts */
--chart-fill-opacity: 0.25; /* Fill opacity for radar charts */
/* ========================================
COLORBLIND-SAFE RISK COLORS (WCAG AA Compliant)
Uses shape + color + icon redundancy for accessibility
Critical: Triangle, High: Diamond, Medium: Square, Low: Circle
======================================== */
/* Risk Level Colors - Optimized for colorblind users */
--risk-critical: #dc2626; /* Red-600 - Critical risk */
--risk-critical-bg: rgba(220, 38, 38, 0.15);
--risk-critical-border: rgba(220, 38, 38, 0.4);
--risk-critical-text: #fca5a5; /* Lighter for dark mode text */
--risk-high: #f97316; /* Orange-500 - High risk (distinct from red) */
--risk-high-bg: rgba(249, 115, 22, 0.15);
--risk-high-border: rgba(249, 115, 22, 0.4);
--risk-high-text: #fdba74;
--risk-medium: #3b82f6; /* Blue-500 - Medium risk (NOT yellow/amber) */
--risk-medium-bg: rgba(59, 130, 246, 0.15);
--risk-medium-border: rgba(59, 130, 246, 0.4);
--risk-medium-text: #93c5fd;
--risk-low: #10b981; /* Emerald-500 - Low risk */
--risk-low-bg: rgba(16, 185, 129, 0.15);
--risk-low-border: rgba(16, 185, 129, 0.4);
--risk-low-text: #6ee7b7;
--risk-minimal: #16a34a; /* Green-600 - Minimal risk (best state) */
--risk-minimal-bg: rgba(22, 163, 74, 0.15);
--risk-minimal-border: rgba(22, 163, 74, 0.4);
--risk-minimal-text: #86efac;
--risk-none: #64748b; /* Slate-500 - No risk/pending */
--risk-none-bg: rgba(100, 116, 139, 0.15);
--risk-none-border: rgba(100, 116, 139, 0.4);
--risk-none-text: #94a3b8;
/* Status Badge Colors (FAIR scenario status, lifecycle badges) */
--status-new-bg: rgba(16, 185, 129, 0.15);
--status-new-text: #34d399;
--status-stale-bg: rgba(245, 158, 11, 0.15);
--status-stale-text: #fbbf24;
--status-current-bg: rgba(148, 163, 184, 0.15);
--status-current-text: #94a3b8;
--status-nodata-bg: rgba(100, 116, 139, 0.1);
--status-nodata-text: #64748b;
--status-accepted-bg: rgba(20, 184, 166, 0.15); /* Teal (was violet) */
--status-accepted-text: #5eead4;
/* Legacy color aliases (for backward compatibility) */
--color-critical: var(--risk-critical);
--color-high: var(--risk-high);
--color-medium: var(--risk-medium);
--color-low: var(--risk-low);
/* 4-Level Operational Scoring (dashboards, assessments)
Ranges: Critical 0-40, Developing 41-60, Managed 61-80, Optimized 81-100 */
--score-critical: #dc2626;
--score-critical-bg: rgba(220, 38, 38, 0.15);
--score-developing: #d97706;
--score-developing-bg: rgba(217, 119, 6, 0.15);
--score-managed: #ca8a04;
--score-managed-bg: rgba(202, 138, 4, 0.15);
--score-optimized: #16a34a;
--score-optimized-bg: rgba(22, 163, 74, 0.15);
/* 5-Level Board Report Scoring (investor presentations)
Ranges: Critical 0-39, Poor 40-59, Fair 60-74, Good 75-89, Excellent 90-100 */
--board-critical: #ef4444;
--board-critical-bg: rgba(239, 68, 68, 0.15);
--board-poor: #d97706;
--board-poor-bg: rgba(217, 119, 6, 0.15);
--board-fair: #f59e0b;
--board-fair-bg: rgba(245, 158, 11, 0.15);
--board-good: #3b82f6;
--board-good-bg: rgba(59, 130, 246, 0.15);
--board-excellent: #10b981;
--board-excellent-bg: rgba(16, 185, 129, 0.15);
/* CIS Implementation Groups (maturity progression, NOT traffic light)
Sky → Indigo → Indigo-600 progression (all blues) */
--cis-ig1: #0ea5e9; /* Sky-500 - Foundation (IG1) */
--cis-ig1-bg: rgba(14, 165, 233, 0.15);
--cis-ig2: #6366f1; /* Indigo-500 - Advanced (IG2) */
--cis-ig2-bg: rgba(99, 102, 241, 0.15);
--cis-ig3: #4f46e5; /* Indigo-600 - Expert (IG3) */
--cis-ig3-bg: rgba(79, 70, 229, 0.15);
/* Neutral States */
--color-neutral: #64748b;
--color-neutral-bg: rgba(100, 116, 139, 0.1);
--color-disabled: #94a3b8;
--color-archived: #71717a;
/* Header/Gradient backgrounds */
--header-gradient-start: #1e293b;
--header-gradient-end: #334155;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Typography Scale (1.25 modular scale)
Base: 16px, Ratio: 1.25 */
--text-display: 2.441rem; /* 39px - Hero sections, major dashboard titles */
--text-h1: 1.953rem; /* 31px - Dashboard page titles */
--text-h2: 1.563rem; /* 25px - Section headers */
--text-h3: 1.25rem; /* 20px - Card titles, subsection headers */
--text-body: 1rem; /* 16px - Body text, data labels */
--text-small: 0.875rem; /* 14px - Secondary info, metadata */
--text-micro: 0.75rem; /* 12px - Badges, timestamps, captions */
/* Tailwind-compatible Font Size Aliases */
--text-2xs: 0.625rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-heading-lg: 1.75rem;
--text-3xl: 2rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
/* Font Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.2; /* Headings */
--line-height-normal: 1.5; /* Body text */
--line-height-dense: 1.4; /* Tables, dense content */
/* Spacing */
--sidebar-width-collapsed: 60px;
--sidebar-width-expanded: 330px;
--container-padding: 2rem;
/* Numeric Spacing Scale (Tailwind-compatible)
Used by: custom-assessment-hub, my-dashboards, dashboard-builder,
dashboard-viewer, error-handling, benchmark, ciso-package,
report-builder, reports-history, dashboard-widgets */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
/* Transitions */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
/* Border Radius */
--border-radius: 12px;
--border-radius-lg: 16px;
--border-radius-sm: 8px;
--border-radius-xs: 4px;
--border-radius-pill: 9999px;
/* Layout */
--content-max-width: 1800px;
--content-padding: 2rem;
--content-padding-md: 1.5rem;
--content-padding-sm: 1.25rem;
/* Header */
--header-padding: 2.5rem 2rem;
--header-radius: 12px;
--header-icon-size: 56px;
--header-gradient: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1a4971 100%);
--header-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
/* Card Backgrounds (used across all pages) */
--bg-card: var(--bg-secondary);
--bg-card-hover: var(--bg-tertiary);
/* Primary Color (alias for accent-primary, used in executive summaries) */
--color-primary: #3b82f6;
--color-primary-light: rgba(59, 130, 246, 0.15);
/* Transition shorthand (used across pages) */
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Spacing - Section and Card Gaps */
--section-gap: 2rem;
--card-gap: 1.5rem;
--card-gap-sm: 1rem;
/* Gap Utilities (aliased for semantic use) */
--gap-xs: 0.5rem;
--gap-sm: 0.75rem;
--gap-md: 1rem;
--gap-lg: 1.5rem;
--gap-xl: 2rem;
/* Shadows - Dark Theme */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.35);
/* Card shadow shorthand */
--card-shadow: var(--shadow-sm);
--card-shadow-hover: var(--shadow-md);
/* Interactive Hover */
--bg-hover: rgba(255, 255, 255, 0.06);
/* Focus States */
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
--focus-ring-success: 0 0 0 3px rgba(34, 197, 94, 0.2);
--focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.2);
/* Button Sizing */
--btn-padding-xs: 0.375rem 0.75rem;
--btn-padding-sm: 0.5rem 1rem;
--btn-padding-md: 0.75rem 1.5rem;
--btn-padding-lg: 1rem 1.75rem;
--btn-font-xs: 0.75rem;
--btn-font-sm: 0.875rem;
--btn-font-md: 1rem;
--btn-font-lg: 1.05rem;
/* Semantic Background Colors - Light variants (0.1 opacity) - for default badges */
--color-success-bg-light: rgba(34, 197, 94, 0.1);
--color-warning-bg-light: rgba(245, 158, 11, 0.1);
--color-danger-bg-light: rgba(239, 68, 68, 0.1);
--color-info-bg-light: rgba(59, 130, 246, 0.1);
--color-purple-bg-light: rgba(100, 116, 139, 0.1); /* Re-pointed to slate (was indigo) */
--color-accent-bg-light: rgba(59, 130, 246, 0.1);
--color-teal-bg-light: rgba(20, 184, 166, 0.1);
--color-pink-bg-light: rgba(236, 72, 153, 0.1);
--color-primary-bg-light: rgba(59, 130, 246, 0.1);
--color-neutral-bg-light: rgba(100, 116, 139, 0.1);
/* Semantic Background Colors - Medium variants (0.15 opacity) - for hover states */
--color-success-bg-medium: rgba(34, 197, 94, 0.15);
--color-warning-bg-medium: rgba(245, 158, 11, 0.15);
--color-danger-bg-medium: rgba(239, 68, 68, 0.15);
--color-info-bg-medium: rgba(59, 130, 246, 0.15);
--color-accent-bg-medium: rgba(59, 130, 246, 0.15);
--color-teal-bg-medium: rgba(20, 184, 166, 0.15);
--color-neutral-bg-medium: rgba(100, 116, 139, 0.15);
/* Semantic Background Colors - Strong variants (0.2 opacity) - for active/emphasis states */
--color-success-bg-strong: rgba(34, 197, 94, 0.2);
--color-warning-bg-strong: rgba(245, 158, 11, 0.2);
--color-danger-bg-strong: rgba(239, 68, 68, 0.2);
--color-info-bg-strong: rgba(59, 130, 246, 0.2);
--color-accent-bg-strong: rgba(59, 130, 246, 0.2);
--color-teal-bg-strong: rgba(20, 184, 166, 0.2);
--color-neutral-bg-strong: rgba(100, 116, 139, 0.2);
/* Badge Opacity Standards */
--badge-opacity-light: 0.1; /* Default badge backgrounds */
--badge-opacity-medium: 0.15; /* Hover states, secondary emphasis */
--badge-opacity-strong: 0.2; /* Active states, primary emphasis */
/* License Tier Colors - Dark Theme (progression: neutral → brand → premium) */
--license-trial: #94a3b8; /* Slate gray - neutral */
--license-standard: #22c55e; /* Emerald - entry tier */
--license-professional: #6366f1; /* Indigo-500 - core brand */
--license-enterprise: #3730a3; /* Indigo-800 - premium */
/* Avatar Colors - Dark Theme (6 colors for consistent user avatars - professional palette) */
--avatar-color-0: #3b82f6; /* Blue */
--avatar-color-1: #10b981; /* Emerald */
--avatar-color-2: #f59e0b; /* Amber */
--avatar-color-3: #ef4444; /* Red */
--avatar-color-4: #14b8a6; /* Teal */
--avatar-color-5: #6366f1; /* Indigo */
--avatar-default: #6b7280; /* Gray default */
/* Audit Log Severity Colors - Dark Theme */
/* Critical/Security Events - Red/Pink */
--audit-critical-bg: rgba(239, 68, 68, 0.15);
--audit-critical-border: rgba(239, 68, 68, 0.5);
--audit-critical-text: #fca5a5;
--audit-critical-icon: #f87171;
/* Error Events - Amber-Orange (darker amber for distinction from warning) */
--audit-error-bg: rgba(217, 119, 6, 0.12);
--audit-error-border: rgba(217, 119, 6, 0.45);
--audit-error-text: #fbbf24;
--audit-error-icon: #d97706;
/* Warning Events - Amber */
--audit-warning-bg: rgba(245, 158, 11, 0.1);
--audit-warning-border: rgba(245, 158, 11, 0.4);
--audit-warning-text: #fbbf24;
--audit-warning-icon: #f59e0b;
/* Success Events - Green */
--audit-success-bg: rgba(34, 197, 94, 0.1);
--audit-success-border: rgba(34, 197, 94, 0.35);
--audit-success-text: #4ade80;
--audit-success-icon: #22c55e;
/* Info/Neutral Events - Blue */
--audit-info-bg: rgba(59, 130, 246, 0.08);
--audit-info-border: rgba(59, 130, 246, 0.3);
--audit-info-text: #60a5fa;
--audit-info-icon: #3b82f6;
/* System Events - Gray/Slate */
--audit-system-bg: rgba(148, 163, 184, 0.06);
--audit-system-border: rgba(148, 163, 184, 0.25);
--audit-system-text: #94a3b8;
--audit-system-icon: #64748b;
/* Transition Speed */
--transition-speed: 0.2s;
/* License Card Colors */
--color-license-trial: #a0aec0;
--color-license-professional: #4c6ef5;
--color-license-enterprise: #475569; /* Slate-dark (re-themed off legacy purple) */
/* Seat Progress Colors */
--color-seats-default: #48bb78;
--color-seats-warning: #ed8936;
--color-seats-danger: #f56565;
/* Re-pointed to slate (was indigo). The variable name is preserved as a
compatibility alias for the 50+ CSS files that reference it; new code
should use --cat-slate instead. The old "purple semantics" — i.e.
neutral institutional / governance — are still served by these tokens,
just in a non-banned hue. */
--color-purple: #475569; /* Slate-dark */
--color-purple-light: #64748b; /* Slate */
--color-purple-bg: rgba(100, 116, 139, 0.15);
--color-gold: #d4af37;
--color-gold-bg: rgba(212, 175, 55, 0.15);
/* Disabled States */
--text-disabled: #64748b;
--bg-disabled: #1e293b;
--border-disabled: #334155;
/* Light Background Variants (dark mode) */
--color-success-bg-light: rgba(34, 197, 94, 0.2);
--color-warning-bg-light: rgba(245, 158, 11, 0.2);
--color-danger-bg-light: rgba(239, 68, 68, 0.2);
--color-info-bg-light: rgba(59, 130, 246, 0.2);
--color-purple-bg-light: rgba(100, 116, 139, 0.2); /* Slate (was indigo) */
--color-pink-bg-light: rgba(236, 72, 153, 0.2);
--color-primary-bg-light: rgba(59, 130, 246, 0.2);
/* Status Tint Backgrounds - Dark Mode (default) */
--tint-danger: rgba(239, 68, 68, 0.15);
--tint-warning: rgba(245, 158, 11, 0.15);
--tint-caution: rgba(234, 179, 8, 0.12);
--tint-success: rgba(34, 197, 94, 0.15);
--tint-info: rgba(59, 130, 246, 0.15);
--tint-purple: rgba(100, 116, 139, 0.15); /* Slate (was violet) */
--tint-neutral: rgba(255, 255, 255, 0.05);
/* Backward Compatibility Aliases */
--surface-color: var(--bg-secondary);
--success-color: var(--color-success);
--warning-color: var(--color-warning);
--danger-color: var(--color-danger);
--info-color: var(--color-info);
}
/* Base Body Styles */
body {
font-family: var(--font-family);
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
margin-left: var(--sidebar-width-collapsed);
transition: none;
line-height: 1.5;
overflow-x: clip; /* Prevent horizontal scroll content from showing behind fixed sidebar */
}
/* Global print release.
*
* The SPA shell uses `.app-main { overflow: hidden; height: 100% }` so the
* sidebar can stay anchored while `.app-content` scrolls. That clamps the
* page to one viewport for window.print() / page.pdf() — only the first
* screen prints. The role-dashboard CSS handles this via a `pv-print-mode`
* class that has to be manually added, but every other page in the app
* inherits the clamp and silently prints just the first screen. Release
* the height + overflow constraints app-wide whenever the browser is
* actually printing so all pages print full content by default. */
@media print {
html,
body,
main.app-main,
.app-main,
.app-content,
#appContent {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/* Hide the sidebar in print — it's interactive chrome, not content. */
.sidebar,
.nav-toggle,
.navigation,
body > nav {
display: none !important;
}
body {
margin-left: 0 !important;
}
}
/* Match browser-chromed controls (date/time pickers, scrollbars, native form
widgets) to the active theme. Without this, renders its
calendar icon + popup in the OS default scheme, which reads as brown/ochre
on our dark surfaces. */
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="light"] {
color-scheme: light;
}
/* ========================================
AUTH GATE - Hide content until authenticated
Pages requiring auth should add class="auth-pending" to body
Auth service removes this class once authentication is confirmed
======================================== */
body.auth-pending > *:not(.sidebar):not(script):not(noscript):not(style) {
visibility: hidden !important;
}
body.auth-pending::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-primary);
z-index: 9998;
opacity: 1;
transition: opacity 0.15s ease-out;
}
/* Smooth fade-out of overlay when auth completes */
body.auth-ready::before {
opacity: 0;
pointer-events: none;
}
body.auth-pending::after {
content: '';
position: fixed;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin: -16px 0 0 -16px;
border: 3px solid var(--border-color);
border-top-color: var(--accent-color, #3182ce);
border-radius: 50%;
animation: auth-spinner 0.8s linear infinite;
z-index: 9999;
}
@keyframes auth-spinner {
to { transform: rotate(360deg); }
}
/* Remove auth gate once authenticated */
body.auth-ready > * {
visibility: visible;
}
body.auth-ready::after {
display: none;
}
/* Expanded sidebar state - set by navigation.js */
body.sidebar-expanded {
margin-left: var(--sidebar-width-expanded);
}
/* Once JS has applied sidebar state, use CSS variables (override any initial !important rules) */
body.sidebar-state-applied {
margin-left: var(--sidebar-width-collapsed);
}
body.sidebar-state-applied.sidebar-expanded {
margin-left: var(--sidebar-width-expanded);
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--bg-tertiary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
/* Common Link Styles */
a {
color: var(--accent-primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Common Button Base */
button {
font-family: var(--font-family);
cursor: pointer;
}
/* ========================================
GLOBAL FORM ELEMENT THEMING
All form elements inherit theme colors automatically
======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
background-color: var(--input-bg, var(--card-bg));
color: var(--text-primary);
border: 1px solid var(--input-border, var(--border-color));
font-family: var(--font-family);
font-size: var(--text-body, 1rem);
border-radius: var(--border-radius-sm, 8px);
padding: 0.625rem 0.875rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input::placeholder,
textarea::placeholder {
color: var(--text-placeholder, var(--text-muted));
}
/* Dropdown/Select option styling */
select option {
background-color: var(--card-bg);
color: var(--text-primary);
}
/* Focus states for form elements */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
border-color: var(--accent-primary, var(--primary-color));
outline: none;
box-shadow: var(--focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.2));
}
/* Disabled form elements */
input:disabled,
textarea:disabled,
select:disabled {
background-color: var(--bg-disabled, var(--bg-tertiary));
color: var(--text-disabled, var(--text-muted));
border-color: var(--border-disabled, var(--border-color));
cursor: not-allowed;
opacity: 0.7;
}
/* Read-only form elements */
input:read-only:not(:disabled),
textarea:read-only:not(:disabled) {
background-color: var(--bg-secondary);
cursor: default;
}
/* Checkbox and Radio styling */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--accent-primary, var(--primary-color));
width: 1rem;
height: 1rem;
cursor: pointer;
}
/* File input styling */
input[type="file"] {
color: var(--text-primary);
}
input[type="file"]::file-selector-button {
background-color: var(--btn-secondary-bg-hover, var(--bg-tertiary));
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm, 8px);
padding: 0.5rem 1rem;
cursor: pointer;
font-family: var(--font-family);
transition: background-color var(--transition-fast);
}
input[type="file"]::file-selector-button:hover {
background-color: var(--bg-tertiary);
}
/* Button Variants */
.btn-primary,
.no-data-btn.primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
border: 1px solid var(--btn-primary-bg);
}
.btn-primary:hover,
.no-data-btn.primary:hover {
background: var(--btn-primary-bg-hover);
border-color: var(--btn-primary-bg-hover);
}
.btn-secondary,
.no-data-btn.secondary {
background: var(--btn-secondary-bg);
color: var(--btn-secondary-text);
border: 1px solid var(--btn-secondary-border);
}
.btn-secondary:hover,
.no-data-btn.secondary:hover {
background: var(--btn-secondary-bg-hover);
color: var(--btn-secondary-text-hover);
border-color: var(--btn-secondary-border);
}
/* Badges (canonical) */
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: var(--border-radius-pill);
font-size: var(--text-micro);
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
}
.badge-sm {
padding: 0.125rem 0.5rem;
font-size: var(--text-micro);
}
/* Artifact-version staleness badge — rendered next to any linked artifact
* whose pinned version is no longer the chain head. The badge is purely
* informational; the link itself stays pinned to the version that was
* originally attached (audit/immutability rule). */
.badge-version-stale {
background: rgba(245, 158, 11, 0.12);
color: var(--cat-warning, #b45309);
border: 1px solid rgba(245, 158, 11, 0.32);
font-weight: 600;
cursor: help;
}
.badge-version-stale .badge-link {
margin-left: 0.4rem;
color: var(--color-primary);
text-decoration: underline;
cursor: pointer;
font-weight: 500;
}
.badge-version-stale .badge-link:hover { opacity: 0.85; }
/* No Data / Empty State (shared across pages) */
.no-data-prompt {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 120px);
padding: 2rem;
}
.no-data-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 3rem;
text-align: center;
max-width: 540px;
width: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.no-data-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(52, 211, 153, 0.15));
border-radius: 50%;
margin-bottom: 1.5rem;
color: var(--btn-primary-bg);
}
.no-data-card h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 0.75rem 0;
}
.no-data-card p {
color: var(--text-secondary);
font-size: 1rem;
margin: 0 0 2rem 0;
line-height: 1.5;
}
.no-data-actions {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
.no-data-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-radius: 10px;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.no-data-btn svg {
flex-shrink: 0;
}
@media (max-width: 640px) {
.no-data-card {
padding: 2rem;
}
.no-data-actions {
gap: 0.75rem;
}
}
/* Responsive - Collapsed Sidebar */
@media (max-width: 640px) {
body {
margin-left: 0;
padding-left: 1rem;
padding-right: 1rem;
}
}
/* Light Theme - Soft Blue Design with Clear Visual Hierarchy */
@media (prefers-color-scheme: light) {
:root {
/*
* Soft Blue Light Mode Palette
* - bg-primary: Soft blue-gray page background
* - bg-secondary: Lighter blue for cards/sections
* - bg-tertiary: Slightly deeper blue for hover states
* - card-bg: White cards for contrast
*/
--bg-primary: #e8f0f8;
--bg-secondary: #f0f5fa;
--bg-tertiary: #dce8f3;
--card-bg: #ffffff;
--color-bg-card: var(--card-bg);
/* Text Colors - High contrast for readability */
--text-primary: #1a2a3a; /* 13.2:1 contrast */
--text-secondary: #4a5a6a; /* 7.2:1 contrast */
--text-tertiary: #5a6a7a; /* Alias for muted - used in subtitles, metadata */
--text-muted: #5a6a7a; /* 5.8:1 contrast (AA compliant) */
--text-on-accent: #ffffff; /* Text on accent-colored backgrounds */
--text-on-accent-muted: rgba(255, 255, 255, 0.85);
/* Border Colors - Soft blue tints */
--border-color: #c5d5e5;
--border-light: rgba(26, 42, 58, 0.08);
/* Semantic surface/border aliases */
--bg-elevated: var(--card-bg);
--border-subtle: var(--border-color);
/* Form Input Colors - Light Theme */
--input-bg: #ffffff;
--input-border: #c5d5e5;
--input-focus-border: var(--accent-primary);
/* Accent Colors - Deeper for light background contrast */
--accent-primary: #2563eb;
--accent-primary-hover: #1d4ed8;
--accent-primary-bg: rgba(37, 99, 235, 0.12);
--accent-primary-border: rgba(37, 99, 235, 0.25);
--accent-success: #059669;
--accent-warning: #d97706;
--accent-danger: #dc2626;
/* CIS Theme - Light Mode */
--cis-primary: #059669;
--cis-bg: rgba(5, 150, 105, 0.08);
--cis-border: rgba(5, 150, 105, 0.2);
/* Custom Assessment Theme - Light Mode (Cyan, was purple) */
--custom-primary: #0891b2;
--custom-bg: rgba(8, 145, 178, 0.08);
--custom-border: rgba(8, 145, 178, 0.2);
/* Semantic Colors - Light Mode (higher opacity for visibility) */
--color-success-bg: rgba(34, 197, 94, 0.15);
--color-warning-bg: rgba(245, 158, 11, 0.15);
--color-danger-bg: rgba(239, 68, 68, 0.15);
--color-info-bg: rgba(59, 130, 246, 0.15);
/* Light Background Variants */
--color-success-bg-light: #dcfce7;
--color-warning-bg-light: #fef3c7;
--color-danger-bg-light: #fee2e2;
--color-info-bg-light: #dbeafe;
--color-purple-bg-light: #f1f5f9; /* Slate-100 (was violet) */
--color-pink: #db2777;
--color-pink-bg-light: #fce7f3;
--color-primary-bg-light: #dbeafe;
/* Categorical Identity Palette - Light Mode (deeper hues for contrast on
light backgrounds; bg/border tints stay alpha-based) */
--cat-blue: #2563eb;
--cat-blue-light: #3b82f6;
--cat-blue-dark: #1d4ed8;
--cat-blue-bg: rgba(37, 99, 235, 0.08);
--cat-blue-bg-strong: rgba(37, 99, 235, 0.16);
--cat-blue-border: rgba(37, 99, 235, 0.25);
--cat-blue-text: #1e40af;
--cat-sky: #0284c7;
--cat-sky-light: #0ea5e9;
--cat-sky-dark: #0369a1;
--cat-sky-bg: rgba(2, 132, 199, 0.08);
--cat-sky-bg-strong: rgba(2, 132, 199, 0.16);
--cat-sky-border: rgba(2, 132, 199, 0.25);
--cat-sky-text: #075985;
--cat-teal: #0d9488;
--cat-teal-light: #14b8a6;
--cat-teal-dark: #0f766e;
--cat-teal-bg: rgba(13, 148, 136, 0.08);
--cat-teal-bg-strong: rgba(13, 148, 136, 0.16);
--cat-teal-border: rgba(13, 148, 136, 0.25);
--cat-teal-text: #115e59;
--cat-cyan: #0891b2;
--cat-cyan-light: #06b6d4;
--cat-cyan-dark: #0e7490;
--cat-cyan-bg: rgba(8, 145, 178, 0.08);
--cat-cyan-bg-strong: rgba(8, 145, 178, 0.16);
--cat-cyan-border: rgba(8, 145, 178, 0.25);
--cat-cyan-text: #155e75;
--cat-rose: #e11d48;
--cat-rose-light: #f43f5e;
--cat-rose-dark: #be123c;
--cat-rose-bg: rgba(225, 29, 72, 0.08);
--cat-rose-bg-strong: rgba(225, 29, 72, 0.16);
--cat-rose-border: rgba(225, 29, 72, 0.25);
--cat-rose-text: #9f1239;
--cat-pink: #db2777;
--cat-pink-light: #ec4899;
--cat-pink-dark: #be185d;
--cat-pink-bg: rgba(219, 39, 119, 0.08);
--cat-pink-bg-strong: rgba(219, 39, 119, 0.16);
--cat-pink-border: rgba(219, 39, 119, 0.25);
--cat-pink-text: #9d174d;
--cat-slate: #475569;
--cat-slate-light: #64748b;
--cat-slate-dark: #334155;
--cat-slate-bg: rgba(71, 85, 105, 0.08);
--cat-slate-bg-strong: rgba(71, 85, 105, 0.16);
--cat-slate-border: rgba(71, 85, 105, 0.25);
--cat-slate-text: #1e293b;
/* Semantic Card Backgrounds - Light Mode */
--card-success-bg: rgba(5, 150, 105, 0.1);
--card-danger-bg: rgba(220, 38, 38, 0.1);
--card-warning-bg: rgba(217, 119, 6, 0.1);
--card-info-bg: rgba(2, 132, 199, 0.1);
/* WCAG AA Compliant Semantic Colors - Light Mode
These darker variants provide 4.5:1+ contrast on white */
--color-success: #059669;
--color-success-text: #047857;
--color-warning: #d97706;
--color-warning-text: #92400e;
--color-danger: #dc2626;
--color-danger-text: #991b1b;
--color-danger-border: #fecaca;
--color-warning-border: #fed7aa;
--color-info: #0284c7;
--color-info-text: #0369a1;
/* Chart Palette - Light Mode (slightly deeper for contrast) */
--chart-1: #2563eb;
--chart-2: #059669;
--chart-3: #d97706;
--chart-4: #0284c7; /* Sky-600 */
--chart-5: #0d9488;
--chart-grid-color: #94a3b8; /* Darker grid for light mode visibility */
--chart-fill-opacity: 0.35; /* Higher fill opacity for light mode */
/* 4-Level Operational Scoring - Light Mode */
--score-critical: #dc2626;
--score-critical-bg: rgba(220, 38, 38, 0.12);
--score-developing: #ea580c;
--score-developing-bg: rgba(234, 88, 12, 0.12);
--score-managed: #ca8a04;
--score-managed-bg: rgba(202, 138, 4, 0.12);
--score-optimized: #16a34a;
--score-optimized-bg: rgba(22, 163, 74, 0.12);
/* 5-Level Board Report Scoring - Light Mode */
--board-critical: #dc2626;
--board-critical-bg: rgba(220, 38, 38, 0.12);
--board-poor: #ea580c;
--board-poor-bg: rgba(234, 88, 12, 0.12);
--board-fair: #d97706;
--board-fair-bg: rgba(217, 119, 6, 0.12);
--board-good: #2563eb;
--board-good-bg: rgba(37, 99, 235, 0.12);
--board-excellent: #059669;
--board-excellent-bg: rgba(5, 150, 105, 0.12);
/* CIS Implementation Groups - Light Mode (all blues) */
--cis-ig1: #0284c7; /* Sky-600 */
--cis-ig1-bg: rgba(2, 132, 199, 0.12);
--cis-ig2: #4f46e5; /* Indigo-600 */
--cis-ig2-bg: rgba(79, 70, 229, 0.12);
--cis-ig3: #3730a3; /* Indigo-800 */
--cis-ig3-bg: rgba(55, 48, 163, 0.12);
/* Neutral States - Light Mode */
--color-neutral: #64748b;
--color-neutral-bg: rgba(100, 116, 139, 0.08);
--color-disabled: #94a3b8;
--color-archived: #71717a;
/* Header/Gradient backgrounds - Light Mode */
--header-gradient-start: #c5d5e5;
--header-gradient-end: #e8f0f8;
/* RGB variants - Light Mode */
--color-warning-rgb: 217, 119, 6;
--color-primary-rgb: 37, 99, 235;
--color-success-rgb: 5, 150, 105;
/* Hover variants - Light Mode */
--color-success-hover: #047857;
--color-warning-hover: #b45309;
--color-danger-hover: #b91c1c;
/* Additional semantic colors - Light Mode (Teal for secondary accents) */
--color-teal: #0d9488;
--color-teal-bg: rgba(20, 184, 166, 0.12);
--color-teal-border: rgba(20, 184, 166, 0.25);
/* Buttons - Light Mode */
--btn-primary-bg: #2563eb;
--btn-primary-bg-hover: #1d4ed8;
--btn-primary-text: #ffffff;
--btn-secondary-bg: transparent;
--btn-secondary-border: #94a3b8;
--btn-secondary-text: #1a2a3a;
--btn-secondary-bg-hover: #dce8f3;
--btn-secondary-text-hover: #0f1a2a;
/* Layout - Light Mode - keep blue gradient for headers */
--header-gradient: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1a4971 100%);
/* Card Backgrounds - Light Mode (white cards on soft blue background) */
--bg-card: #ffffff;
--bg-card-hover: #f8fafc;
/* Primary Color - Light Mode */
--color-primary: #2563eb;
--color-primary-light: rgba(37, 99, 235, 0.12);
/* Shadows - Light Mode (softer blue-tinted shadows) */
--shadow-sm: 0 1px 3px rgba(26, 42, 58, 0.06), 0 1px 2px rgba(26, 42, 58, 0.04);
--shadow-md: 0 4px 8px rgba(26, 42, 58, 0.08), 0 2px 4px rgba(26, 42, 58, 0.04);
--shadow-lg: 0 10px 20px rgba(26, 42, 58, 0.1), 0 4px 8px rgba(26, 42, 58, 0.06);
--shadow-xl: 0 20px 40px rgba(26, 42, 58, 0.12);
/* Focus States - Light Mode */
--focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 0 0 2px #2563eb;
--focus-ring-success: 0 0 0 3px rgba(5, 150, 105, 0.15), 0 0 0 2px #059669;
--focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.15), 0 0 0 2px #dc2626;
/* Audit Log Severity Colors - Light Mode */
--audit-critical-bg: rgba(220, 38, 38, 0.12);
--audit-critical-border: rgba(220, 38, 38, 0.4);
--audit-critical-text: #991b1b;
--audit-critical-icon: #dc2626;
--audit-error-bg: rgba(234, 88, 12, 0.1);
--audit-error-border: rgba(234, 88, 12, 0.35);
--audit-error-text: #9a3412;
--audit-error-icon: #ea580c;
--audit-warning-bg: rgba(217, 119, 6, 0.1);
--audit-warning-border: rgba(217, 119, 6, 0.35);
--audit-warning-text: #92400e;
--audit-warning-icon: #d97706;
--audit-success-bg: rgba(5, 150, 105, 0.1);
--audit-success-border: rgba(5, 150, 105, 0.3);
--audit-success-text: #047857;
--audit-success-icon: #059669;
--audit-info-bg: rgba(37, 99, 235, 0.08);
--audit-info-border: rgba(37, 99, 235, 0.25);
--audit-info-text: #1e40af;
--audit-info-icon: #2563eb;
--audit-system-bg: rgba(71, 85, 105, 0.06);
--audit-system-border: rgba(71, 85, 105, 0.2);
--audit-system-text: #475569;
--audit-system-icon: #64748b;
/* License Tier Colors - Light Mode */
--license-trial: #64748b; /* Slate gray */
--license-standard: #16a34a; /* Green - darker for light bg */
--license-professional: #4f46e5; /* Indigo-600 - darker for light bg */
--license-enterprise: #3730a3; /* Indigo-800 - premium */
/* Legacy aliases for backwards compatibility */
--color-license-trial: var(--license-trial);
--color-license-professional: var(--license-professional);
--color-license-enterprise: var(--license-enterprise);
/* Avatar Colors - Light Mode (6 colors - professional palette) */
--avatar-color-0: #2563eb; /* Blue */
--avatar-color-1: #059669; /* Emerald */
--avatar-color-2: #d97706; /* Amber */
--avatar-color-3: #dc2626; /* Red */
--avatar-color-4: #0d9488; /* Teal */
--avatar-color-5: #475569; /* Slate (was indigo) */
--avatar-default: #6b7280; /* Gray default */
/* Seat Progress Colors - Light Mode */
--color-seats-default: #059669;
--color-seats-warning: #d97706;
--color-seats-danger: #dc2626;
/* Re-pointed to slate (was indigo). See dark-mode comment above. */
--color-purple: #475569; /* Slate-dark */
--color-purple-light: #64748b; /* Slate */
--color-purple-bg: rgba(100, 116, 139, 0.12);
--color-gold: #b8860b;
--color-gold-bg: rgba(184, 134, 11, 0.12);
/* Disabled States - Light Mode */
--text-disabled: #94a3b8;
--bg-disabled: #f5f7fa;
--border-disabled: #d5dde5;
/* Status Tint Backgrounds - Light Mode */
--tint-danger: #fef2f2;
--tint-warning: #fff7ed;
--tint-caution: #fffbeb;
--tint-success: #ecfdf5;
--tint-info: #eff6ff;
--tint-purple: #f1f5f9; /* Slate-100 (was violet) */
--tint-neutral: #f8fafc;
/* Backward Compatibility Aliases */
--surface-color: var(--bg-secondary);
--success-color: var(--color-success);
--warning-color: var(--color-warning);
--danger-color: var(--color-danger);
--info-color: var(--color-info);
}
}
/* Manual Light Mode Override via data-theme attribute */
[data-theme="light"] {
/* Soft Blue Light Mode Palette */
--bg-primary: #e8f0f8;
--bg-secondary: #f0f5fa;
--bg-tertiary: #dce8f3;
--card-bg: #ffffff;
--color-bg-card: var(--card-bg);
--text-primary: #1a2a3a;
--text-secondary: #4a5a6a;
--text-tertiary: #5a6a7a;
--text-muted: #5a6a7a;
--text-placeholder: #94a3b8;
--border-color: #c5d5e5;
--border-light: rgba(26, 42, 58, 0.08);
/* Semantic surface/border aliases */
--bg-elevated: var(--card-bg);
--border-subtle: var(--border-color);
/* Form Input Colors - Light Theme */
--input-bg: #ffffff;
--input-border: #c5d5e5;
--input-focus-border: var(--accent-primary);
--accent-primary: #2563eb;
--accent-primary-hover: #1d4ed8;
--accent-primary-bg: rgba(37, 99, 235, 0.12);
--accent-primary-border: rgba(37, 99, 235, 0.25);
/* Interactive Hover */
--bg-hover: rgba(0, 0, 0, 0.04);
/* Primary Color (alias for compatibility) */
--primary-color: #3b82f6;
--primary-color-hover: #1d4ed8;
--accent-success: #059669;
--accent-warning: #d97706;
--accent-danger: #dc2626;
--cis-primary: #059669;
--cis-bg: rgba(5, 150, 105, 0.08);
--cis-border: rgba(5, 150, 105, 0.2);
--custom-primary: #0891b2; /* Cyan (was purple) */
--custom-bg: rgba(8, 145, 178, 0.08);
--custom-border: rgba(8, 145, 178, 0.2);
--color-success-bg: rgba(34, 197, 94, 0.15);
--color-warning-bg: rgba(245, 158, 11, 0.15);
--color-danger-bg: rgba(239, 68, 68, 0.15);
--color-info-bg: rgba(59, 130, 246, 0.15);
--color-success-bg-light: #dcfce7;
--color-warning-bg-light: #fef3c7;
--color-danger-bg-light: #fee2e2;
--color-info-bg-light: #dbeafe;
--color-purple-bg-light: #f1f5f9; /* Slate-100 (was violet) */
--color-pink: #db2777;
--color-pink-bg-light: #fce7f3;
--color-primary-bg-light: #dbeafe;
/* Categorical Identity Palette - Light Mode (mirror of @media block) */
--cat-blue: #2563eb;
--cat-blue-light: #3b82f6;
--cat-blue-dark: #1d4ed8;
--cat-blue-bg: rgba(37, 99, 235, 0.08);
--cat-blue-bg-strong: rgba(37, 99, 235, 0.16);
--cat-blue-border: rgba(37, 99, 235, 0.25);
--cat-blue-text: #1e40af;
--cat-sky: #0284c7;
--cat-sky-light: #0ea5e9;
--cat-sky-dark: #0369a1;
--cat-sky-bg: rgba(2, 132, 199, 0.08);
--cat-sky-bg-strong: rgba(2, 132, 199, 0.16);
--cat-sky-border: rgba(2, 132, 199, 0.25);
--cat-sky-text: #075985;
--cat-teal: #0d9488;
--cat-teal-light: #14b8a6;
--cat-teal-dark: #0f766e;
--cat-teal-bg: rgba(13, 148, 136, 0.08);
--cat-teal-bg-strong: rgba(13, 148, 136, 0.16);
--cat-teal-border: rgba(13, 148, 136, 0.25);
--cat-teal-text: #115e59;
--cat-cyan: #0891b2;
--cat-cyan-light: #06b6d4;
--cat-cyan-dark: #0e7490;
--cat-cyan-bg: rgba(8, 145, 178, 0.08);
--cat-cyan-bg-strong: rgba(8, 145, 178, 0.16);
--cat-cyan-border: rgba(8, 145, 178, 0.25);
--cat-cyan-text: #155e75;
--cat-rose: #e11d48;
--cat-rose-light: #f43f5e;
--cat-rose-dark: #be123c;
--cat-rose-bg: rgba(225, 29, 72, 0.08);
--cat-rose-bg-strong: rgba(225, 29, 72, 0.16);
--cat-rose-border: rgba(225, 29, 72, 0.25);
--cat-rose-text: #9f1239;
--cat-pink: #db2777;
--cat-pink-light: #ec4899;
--cat-pink-dark: #be185d;
--cat-pink-bg: rgba(219, 39, 119, 0.08);
--cat-pink-bg-strong: rgba(219, 39, 119, 0.16);
--cat-pink-border: rgba(219, 39, 119, 0.25);
--cat-pink-text: #9d174d;
--cat-slate: #475569;
--cat-slate-light: #64748b;
--cat-slate-dark: #334155;
--cat-slate-bg: rgba(71, 85, 105, 0.08);
--cat-slate-bg-strong: rgba(71, 85, 105, 0.16);
--cat-slate-border: rgba(71, 85, 105, 0.25);
--cat-slate-text: #1e293b;
--card-success-bg: rgba(5, 150, 105, 0.1);
--card-danger-bg: rgba(220, 38, 38, 0.1);
--card-warning-bg: rgba(217, 119, 6, 0.1);
--card-info-bg: rgba(2, 132, 199, 0.1);
/* WCAG AA Compliant Semantic Colors - Light Mode
These darker variants provide 4.5:1+ contrast on white */
--color-success: #059669;
--color-success-text: #047857;
--color-success-dark: #166534;
--color-success-darker: #14532d;
--color-success-border: #bbf7d0;
--color-warning: #d97706;
--color-warning-text: #92400e;
--color-danger: #dc2626;
--color-danger-text: #991b1b;
--color-danger-dark: #991b1b;
--color-danger-border: #fecaca;
--color-warning-border: #fed7aa;
--color-info: #0284c7;
--color-info-text: #0369a1;
--color-info-border: #bae6fd;
/* RGB variants - Light Mode */
--color-warning-rgb: 217, 119, 6;
--color-primary-rgb: 37, 99, 235;
--color-success-rgb: 5, 150, 105;
/* Primary Color Dark (for hover states) */
--color-primary-dark: #1d4ed8;
/* Chart Palette - 5 colors professional (non-semantic) */
--chart-1: #2563eb; /* Blue - slightly deeper for light bg */
--chart-2: #059669; /* Emerald */
--chart-3: #d97706; /* Amber */
--chart-4: #0284c7; /* Sky-600 */
--chart-5: #0d9488; /* Teal */
--chart-grid-color: #94a3b8; /* Darker grid for light mode visibility */
--chart-fill-opacity: 0.35; /* Higher fill opacity for light mode */
/* 4-Level Operational Scoring - Light Mode */
--score-critical: #dc2626;
--score-critical-bg: rgba(220, 38, 38, 0.12);
--score-developing: #d97706;
--score-developing-bg: rgba(217, 119, 6, 0.12);
--score-managed: #ca8a04;
--score-managed-bg: rgba(202, 138, 4, 0.12);
--score-optimized: #16a34a;
--score-optimized-bg: rgba(22, 163, 74, 0.12);
/* 5-Level Board Report Scoring - Light Mode */
--board-critical: #dc2626;
--board-critical-bg: rgba(220, 38, 38, 0.12);
--board-poor: #ea580c;
--board-poor-bg: rgba(234, 88, 12, 0.12);
--board-fair: #d97706;
--board-fair-bg: rgba(217, 119, 6, 0.12);
--board-good: #2563eb;
--board-good-bg: rgba(37, 99, 235, 0.12);
--board-excellent: #059669;
--board-excellent-bg: rgba(5, 150, 105, 0.12);
/* CIS Implementation Groups - Light Mode (all blues) */
--cis-ig1: #0284c7; /* Sky-600 - Foundation (IG1) */
--cis-ig1-bg: rgba(2, 132, 199, 0.12);
--cis-ig2: #4f46e5; /* Indigo-600 - Advanced (IG2) */
--cis-ig2-bg: rgba(79, 70, 229, 0.12);
--cis-ig3: #3730a3; /* Indigo-800 - Expert (IG3) */
--cis-ig3-bg: rgba(55, 48, 163, 0.12);
/* Neutral States - Light Mode */
--color-neutral: #64748b;
--color-neutral-bg: rgba(100, 116, 139, 0.08);
--color-disabled: #94a3b8;
--color-archived: #71717a;
/* Status Badge Colors - Light Mode */
--status-new-bg: #D1FAE5;
--status-new-text: #059669;
--status-stale-bg: #FEF3C7;
--status-stale-text: #D97706;
--status-current-bg: #E5E7EB;
--status-current-text: #6B7280;
--status-nodata-bg: #F3F4F6;
--status-nodata-text: #9CA3AF;
--status-accepted-bg: #ccfbf1; /* Teal-100 (was violet) */
--status-accepted-text: #0f766e;
--header-gradient-start: #c5d5e5;
--header-gradient-end: #e8f0f8;
--color-success-hover: #047857;
--color-warning-hover: #b45309;
--color-danger-hover: #b91c1c;
/* Teal for secondary accents */
--color-teal: #0d9488;
--color-teal-bg: rgba(20, 184, 166, 0.12);
--color-teal-border: rgba(20, 184, 166, 0.25);
--btn-primary-bg: #2563eb;
--btn-primary-bg-hover: #1d4ed8;
--btn-primary-text: #ffffff;
--btn-secondary-bg: transparent;
--btn-secondary-border: #94a3b8;
--btn-secondary-text: #1a2a3a;
--btn-secondary-bg-hover: #dce8f3;
--btn-secondary-text-hover: #0f1a2a;
--header-gradient: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1a4971 100%);
--bg-card: #ffffff;
--bg-card-hover: #f8fafc;
--color-primary: #2563eb;
--color-primary-light: rgba(37, 99, 235, 0.12);
--shadow-sm: 0 1px 3px rgba(26, 42, 58, 0.06), 0 1px 2px rgba(26, 42, 58, 0.04);
--shadow-md: 0 4px 8px rgba(26, 42, 58, 0.08), 0 2px 4px rgba(26, 42, 58, 0.04);
--shadow-lg: 0 10px 20px rgba(26, 42, 58, 0.1), 0 4px 8px rgba(26, 42, 58, 0.06);
--shadow-xl: 0 20px 40px rgba(26, 42, 58, 0.12);
--focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 0 0 2px #2563eb;
--focus-ring-success: 0 0 0 3px rgba(5, 150, 105, 0.15), 0 0 0 2px #059669;
--focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.15), 0 0 0 2px #dc2626;
--audit-critical-bg: rgba(220, 38, 38, 0.12);
--audit-critical-border: rgba(220, 38, 38, 0.4);
--audit-critical-text: #991b1b;
--audit-critical-icon: #dc2626;
--audit-error-bg: rgba(234, 88, 12, 0.1);
--audit-error-border: rgba(234, 88, 12, 0.35);
--audit-error-text: #9a3412;
--audit-error-icon: #ea580c;
--audit-warning-bg: rgba(217, 119, 6, 0.1);
--audit-warning-border: rgba(217, 119, 6, 0.35);
--audit-warning-text: #92400e;
--audit-warning-icon: #d97706;
--audit-success-bg: rgba(5, 150, 105, 0.1);
--audit-success-border: rgba(5, 150, 105, 0.3);
--audit-success-text: #047857;
--audit-success-icon: #059669;
--audit-info-bg: rgba(37, 99, 235, 0.08);
--audit-info-border: rgba(37, 99, 235, 0.25);
--audit-info-text: #1e40af;
--audit-info-icon: #2563eb;
--audit-system-bg: rgba(71, 85, 105, 0.06);
--audit-system-border: rgba(71, 85, 105, 0.2);
--audit-system-text: #475569;
--audit-system-icon: #64748b;
/* License Card Colors - Light Mode */
--color-license-trial: #64748b;
--color-license-professional: #4338ca;
--color-license-enterprise: #334155; /* Slate-dark (was indigo-800) */
/* Seat Progress Colors - Light Mode */
--color-seats-default: #059669;
--color-seats-warning: #d97706;
--color-seats-danger: #dc2626;
/* Re-pointed to slate. Variable name preserved for back-compat. */
--color-purple: #475569; /* Slate-dark */
--color-purple-light: #64748b; /* Slate */
--color-purple-bg: rgba(100, 116, 139, 0.12);
--color-gold: #b8860b;
--color-gold-bg: rgba(184, 134, 11, 0.12);
/* Status Tint Backgrounds - Light Mode (for badges, indicators, status pills) */
--tint-danger: #fef2f2;
--tint-warning: #fff7ed;
--tint-caution: #fffbeb;
--tint-success: #ecfdf5;
--tint-info: #eff6ff;
--tint-purple: #f1f5f9; /* Slate-100 (was violet) */
--tint-neutral: #f8fafc;
/* Disabled States - Light Mode */
--text-disabled: #94a3b8;
--bg-disabled: #f5f7fa;
--border-disabled: #d5dde5;
/* Backward Compatibility Aliases - Light Mode */
--surface-color: var(--bg-secondary);
--success-color: var(--color-success);
--warning-color: var(--color-warning);
--danger-color: var(--color-danger);
--info-color: var(--color-info);
}
/* Dark Mode Override - Manual toggle */
[data-theme="dark"] {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--card-bg: #1e293b;
--color-bg-card: var(--card-bg);
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
--text-muted: #64748b;
--border-color: #334155;
--border-light: rgba(255, 255, 255, 0.1);
/* Semantic surface/border aliases */
--bg-elevated: var(--card-bg);
--border-subtle: var(--border-color);
/* Form Input Colors - Dark Theme */
--input-bg: #1e293b;
--input-border: #475569;
--input-focus-border: var(--accent-primary);
/* CIS Theme - Dark Mode */
--cis-primary: #34d399;
--cis-bg: rgba(52, 211, 153, 0.2);
--cis-border: rgba(52, 211, 153, 0.3);
/* Custom Assessment Theme - Dark Mode (Cyan, was purple) */
--custom-primary: #06b6d4;
--custom-bg: rgba(6, 182, 212, 0.2);
--custom-border: rgba(6, 182, 212, 0.3);
/* Semantic Colors - Dark Mode */
--color-success-bg: rgba(34, 197, 94, 0.1);
--color-warning-bg: rgba(245, 158, 11, 0.1);
--color-danger-bg: rgba(239, 68, 68, 0.1);
--color-info-bg: rgba(59, 130, 246, 0.1);
--color-pink: #ec4899;
--color-pink-bg-light: rgba(236, 72, 153, 0.1);
--color-primary-bg-light: rgba(59, 130, 246, 0.1);
/* Success background alias for dark mode */
--success-bg: rgba(34, 197, 94, 0.15);
/* Status Tint Backgrounds - Dark Mode */
--tint-danger: rgba(239, 68, 68, 0.15);
--tint-warning: rgba(245, 158, 11, 0.15);
--tint-caution: rgba(234, 179, 8, 0.12);
--tint-success: rgba(34, 197, 94, 0.15);
--tint-info: rgba(59, 130, 246, 0.15);
--tint-purple: rgba(100, 116, 139, 0.15); /* Slate (was violet) */
--tint-neutral: rgba(255, 255, 255, 0.05);
/* Card Backgrounds - Dark Mode */
--bg-card: var(--bg-secondary);
--bg-card-hover: var(--bg-tertiary);
/* Shadows - Dark Mode (deeper shadows) */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6);
/* Button Colors - Dark Mode (override light mode media query) */
--btn-primary-bg: #3b82f6;
--btn-primary-bg-hover: #2563eb;
--btn-primary-text: #ffffff;
--btn-secondary-bg: transparent;
--btn-secondary-border: #475569;
--btn-secondary-text: #e2e8f0;
--btn-secondary-bg-hover: #334155;
--btn-secondary-text-hover: #f1f5f9;
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
/* Reset to light background for printing */
body {
background: white !important;
color: #1e293b !important;
margin-left: 0 !important;
}
/* Hide navigation and interactive elements */
.sidebar,
.nav-toggle,
.btn,
.modal,
.toast-container {
display: none !important;
}
/* Remove shadows and borders for cleaner print */
* {
box-shadow: none !important;
}
/* Ensure content takes full width */
.page-shell,
.dashboard-container,
.overview-container,
.manage-container,
.hub-container,
.main-container {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
/* Avoid page breaks inside cards */
.card,
.section,
table {
break-inside: avoid;
}
}
/* ============================================
Org Group Read-Only Mode
Applied via body.org-group-read-only when a
non-admin group user has read but not write
access to an org feature.
============================================ */
/* Hide primary action buttons (create, add, save) */
body.org-group-read-only .header-actions .btn-primary,
body.org-group-read-only .header-actions .btn-success {
display: none !important;
}
/* Hide danger buttons (delete, remove) */
body.org-group-read-only .btn-danger,
body.org-group-read-only .btn-sm.btn-danger {
display: none !important;
}
/* Hide elements explicitly marked as write-only */
body.org-group-read-only [data-write-only] {
display: none !important;
}
/* Disable inline edit triggers */
body.org-group-read-only .editable-field,
body.org-group-read-only .inline-edit-trigger {
pointer-events: none;
cursor: default;
}
/* Dim edit and delete action buttons */
body.org-group-read-only .edit-btn,
body.org-group-read-only .delete-btn {
pointer-events: none;
opacity: 0.4;
}
/* ==========================================================================
Session Timeout Modal
========================================================================== */
.session-timeout-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
.session-timeout-modal {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 32px;
max-width: 400px;
text-align: center;
box-shadow: var(--shadow-lg);
}
.session-timeout-modal h3 {
margin: 0 0 12px;
font-size: var(--text-lg, 1.125rem);
color: var(--text-primary);
}
.session-timeout-modal p {
margin: 0 0 20px;
color: var(--text-secondary);
font-size: 14px;
}
.session-timeout-countdown {
font-size: 36px;
font-weight: 700;
color: var(--color-danger);
margin: 0 0 20px;
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
}
.session-timeout-modal .btn-stay {
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
border: none;
padding: var(--btn-padding-md);
border-radius: var(--border-radius-sm);
font-size: var(--text-small);
cursor: pointer;
}
/* ─────────────────────────────────────────────────────────────────────────
ExternalSourceStamp — shared "synced from " provenance markup
(www-talarity/js/services/external-source-stamp.js). Used on every page
that pulls from an external source: workforce, asset inventory,
vulnerabilities. Colours come from theme variables only.
───────────────────────────────────────────────────────────────────────── */
.ext-source-stamp {
display: inline-flex;
align-items: center;
color: var(--text-secondary);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
cursor: default;
}
.ext-source-line {
display: inline-flex;
align-items: center;
margin-top: 0.35rem;
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
}
.ext-source-disabled {
color: var(--color-danger, #ef4444);
font-weight: 600;
}
.ext-source-banner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
margin: 0 0 1rem 0;
padding: 0.55rem 0.85rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm, 6px);
color: var(--text-secondary);
font-size: 12.5px;
}
.ext-source-banner .ext-source-banner-text { flex: 1 1 auto; }
.ext-source-banner strong { color: var(--text-primary); font-weight: 600; }
.ext-source-banner-actions {
display: inline-flex;
align-items: center;
gap: 0.75rem;
flex: 0 0 auto;
}
.ext-source-banner-refresh {
background: transparent;
border: 1px solid var(--accent-primary);
color: var(--accent-primary);
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.ext-source-banner-refresh:hover:not(:disabled) {
background: var(--accent-primary-bg);
}
.ext-source-banner-refresh:disabled {
opacity: 0.6;
cursor: default;
}
.ext-source-banner-config {
color: var(--accent-primary);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.ext-source-banner-config:hover { text-decoration: underline; }
/* Per-provider source cards in the Asset Sources settings tab. */
.asset-source-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
margin: 16px 0;
}
.asset-source-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius, 8px);
padding: 14px 16px;
}
.asset-source-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.asset-source-card-name {
font-weight: 600;
color: var(--text-primary);
}
.asset-source-card-state {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-secondary);
}
.asset-source-card-state .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-secondary);
display: inline-block;
}
.asset-source-card-state.connected { color: var(--color-success, #22c55e); }
.asset-source-card-state.connected .dot { background: var(--color-success, #22c55e); }
.asset-source-card-state.paused { color: var(--color-warning-text, #fbbf24); }
.asset-source-card-state.paused .dot { background: var(--color-warning, #f59e0b); }
.asset-source-card-meta {
color: var(--text-secondary);
font-size: 12.5px;
line-height: 1.6;
margin-bottom: 4px;
}
.asset-source-card-meta b { color: var(--text-primary); font-weight: 600; }
.asset-source-card-desc {
color: var(--text-secondary);
font-size: 12px;
margin: 6px 0 10px 0;
}
.asset-source-card-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}