/* HydroLens CSS Bundle — Auto-generated, do not edit */
/* ═══ UI/class.ui.css ═══ */
/**
* UI Component System - CSS Design Tokens & Styles
* All styling via CSS classes only - no inline styles
*/
/* ============================================
DESIGN TOKENS (CSS Custom Properties)
============================================ */
:root {
/* ============================================
HYPER-PARAMETERS — The 24 knobs that control everything
============================================ */
/* Color (8) */
--hp-hue-1: 217;
--hp-sat-1: 75;
--hp-hue-2: 260;
--hp-sat-2: 60;
--hp-hue-accent: 157;
--hp-neutral-warmth: 0;
--hp-surface-tint: 0;
/* Shape (2) */
--hp-corner-scale: 1.0;
--hp-border-scale: 0.5;
/* Effects (6) */
--hp-shadow-intensity: 0.05;
--hp-shadow-blur: 0.8;
--hp-hover-intensity: 0.8;
--hp-sharpness: 1;
--hp-backdrop-blur: 0;
--hp-transition-speed: 1;
/* Layout (3) */
--hp-density: 1;
--hp-scale: 1;
--hp-text-scale: 1;
/* Typography (4) */
--hp-style-weight: 0.8;
--hp-range: 1;
--hp-letter-spacing: 0;
--hp-line-height: 1.5;
/* ============================================
LIGHTNESS SCALE — Foundation for all colors
Dark mode inverts these; everything follows
============================================ */
--l-50: 97%;
--l-100: 93%;
--l-200: 86%;
--l-300: 76%;
--l-400: 64%;
--l-500: 50%;
--l-600: 41%;
--l-700: 33%;
--l-800: 24%;
--l-900: 16%;
--l-950: 9%;
/* ============================================
PRIMARY COLOR SCALE — from hp-hue-1, hp-sat-1
============================================ */
--ui-pri-h: var(--hp-hue-1);
--ui-pri-s: calc(var(--hp-sat-1) * 1%);
--ui-primary-50: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-50));
--ui-primary-100: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-100));
--ui-primary-200: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-200));
--ui-primary-300: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-300));
--ui-primary-400: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-400));
--ui-primary-500: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-500));
--ui-primary-600: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-600));
--ui-primary-700: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-700));
--ui-primary-800: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-800));
--ui-primary-900: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-900));
--ui-primary: var(--ui-primary-500);
--ui-primary-hover: var(--ui-primary-600);
--ui-primary-light: var(--ui-primary-50);
--ui-primary-dark: var(--ui-primary-800);
/* ============================================
SECONDARY COLOR SCALE — from hp-hue-2, hp-sat-2
============================================ */
--ui-sec-h: var(--hp-hue-2);
--ui-sec-s: calc(var(--hp-sat-2) * 1%);
--ui-secondary-50: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-50));
--ui-secondary-100: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-100));
--ui-secondary-200: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-200));
--ui-secondary-300: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-300));
--ui-secondary-400: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-400));
--ui-secondary-500: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-500));
--ui-secondary-600: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-600));
--ui-secondary-700: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-700));
--ui-secondary-800: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-800));
--ui-secondary-900: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-900));
--ui-secondary: var(--ui-secondary-500);
--ui-secondary-hover: var(--ui-secondary-600);
--ui-secondary-light: var(--ui-secondary-50);
--ui-secondary-dark: var(--ui-secondary-800);
/* ============================================
ACCENT COLOR SCALE — tertiary from hp-hue-accent
============================================ */
--ui-acc-h: var(--hp-hue-accent);
--ui-acc-s: calc(var(--hp-sat-1) * 0.8%);
--ui-accent-50: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-50));
--ui-accent-100: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-100));
--ui-accent-200: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-200));
--ui-accent-300: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-300));
--ui-accent-400: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-400));
--ui-accent-500: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-500));
--ui-accent-600: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-600));
--ui-accent-700: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-700));
--ui-accent-800: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-800));
--ui-accent-900: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-900));
--ui-accent: var(--ui-accent-500);
--ui-accent-hover: var(--ui-accent-600);
--ui-accent-light: var(--ui-accent-50);
--ui-accent-dark: var(--ui-accent-800);
/* ============================================
NEUTRAL PALETTE — tinted grays for cohesion
============================================ */
--ui-neu-h: calc(var(--hp-hue-1) + var(--hp-neutral-warmth) * 20);
--ui-neu-s: calc(var(--hp-sat-1) * (0.06 + var(--hp-surface-tint) * 0.12) * 1%);
--ui-white: hsl(var(--ui-pri-h), calc(var(--hp-surface-tint) * var(--hp-sat-1) * 0.15 * 1%), calc(100% - var(--hp-surface-tint) * 2%));
--ui-gray-50: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-50));
--ui-gray-100: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-100));
--ui-gray-200: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-200));
--ui-gray-300: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-300));
--ui-gray-400: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-400));
--ui-gray-500: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-500));
--ui-gray-600: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-600));
--ui-gray-700: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-700));
--ui-gray-800: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-800));
--ui-gray-900: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-900));
--ui-black: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-950));
/* ============================================
STATUS COLORS — fixed hues, same lightness scale
============================================ */
--ui-suc-h: 145; --ui-suc-s: 55%;
--ui-dan-h: 0; --ui-dan-s: 60%;
--ui-war-h: 40; --ui-war-s: 80%;
--ui-inf-h: 200; --ui-inf-s: 60%;
--ui-success: hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-500));
--ui-success-hover: hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-600));
--ui-success-light: hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-50));
--ui-success-dark: hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-800));
--ui-danger: hsl(var(--ui-dan-h), var(--ui-dan-s), 55%);
--ui-danger-hover: hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-600));
--ui-danger-light: hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-50));
--ui-danger-dark: hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-800));
--ui-warning: hsl(var(--ui-war-h), var(--ui-war-s), 50%);
--ui-warning-hover: hsl(var(--ui-war-h), var(--ui-war-s), var(--l-600));
--ui-warning-light: hsl(var(--ui-war-h), var(--ui-war-s), var(--l-50));
--ui-warning-dark: hsl(var(--ui-war-h), var(--ui-war-s), var(--l-800));
--ui-info: hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-500));
--ui-info-hover: hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-600));
--ui-info-light: hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-50));
--ui-info-dark: hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-800));
/* ============================================
TYPOGRAPHY — derived from hyper-parameters
============================================ */
--ui-font-heading: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
--ui-font-body: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
--ui-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Modular type scale from --hp-range */
--ui-type-ratio: calc(1.0 + (0.25 * var(--hp-range)));
--ui-text-2xs: calc(0.625rem * var(--hp-text-scale));
--ui-text-xs: calc(0.75rem * var(--hp-text-scale));
--ui-text-sm: calc(0.875rem * var(--hp-text-scale));
--ui-text-base: calc(1rem * var(--hp-text-scale));
--ui-text-lg: calc(1rem * var(--ui-type-ratio) * var(--hp-text-scale));
--ui-text-xl: calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-text-scale));
--ui-text-2xl: calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-text-scale));
--ui-text-3xl: calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-text-scale));
--ui-text-4xl: calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-text-scale));
/* Font weights derived from style-weight */
--ui-font-normal: 400;
--ui-font-medium: 500;
--ui-font-semibold: 600;
--ui-font-bold: 700;
--ui-font-extrabold: 800;
/* Line height & letter spacing */
--ui-leading-tight: calc(var(--hp-line-height) - 0.25);
--ui-leading-normal: var(--hp-line-height);
--ui-leading-relaxed: calc(var(--hp-line-height) + 0.25);
--ui-ls-body: calc(var(--hp-letter-spacing) * 1em);
--ui-ls-heading: calc(var(--hp-letter-spacing) * 0.5em - 0.01em);
/* ============================================
SPACING — derived from density + scale
============================================ */
--ui-space-unit: calc(0.25rem * var(--hp-density) * var(--hp-scale));
--ui-space-0: 0;
--ui-space-1: var(--ui-space-unit);
--ui-space-2: calc(var(--ui-space-unit) * 2);
--ui-space-3: calc(var(--ui-space-unit) * 3);
--ui-space-4: calc(var(--ui-space-unit) * 4);
--ui-space-5: calc(var(--ui-space-unit) * 5);
--ui-space-6: calc(var(--ui-space-unit) * 6);
--ui-space-8: calc(var(--ui-space-unit) * 8);
--ui-space-10: calc(var(--ui-space-unit) * 10);
--ui-space-12: calc(var(--ui-space-unit) * 12);
--ui-space-16: calc(var(--ui-space-unit) * 16);
/* ============================================
BORDER RADIUS — from corner-scale
============================================ */
--ui-radius-none: 0;
--ui-radius-sm: calc(2px * var(--hp-corner-scale));
--ui-radius-md: calc(4px * var(--hp-corner-scale));
--ui-radius-lg: calc(6px * var(--hp-corner-scale));
--ui-radius-xl: calc(8px * var(--hp-corner-scale));
--ui-radius-2xl: calc(12px * var(--hp-corner-scale));
--ui-radius-full: 9999px;
/* ============================================
BORDER WIDTH — from style-weight + border-scale
============================================ */
--ui-border-width: calc((0.5px + 1.2px * var(--hp-style-weight)) * var(--hp-border-scale) * (0.5 + 0.5 * var(--hp-sharpness)));
/* ============================================
SHADOWS — intensity + blur + sharpness controlled
Sharpness inverts blur: high sharpness = tighter shadows
============================================ */
--ui-shadow-blur-factor: calc(var(--hp-shadow-blur) / max(var(--hp-sharpness), 0.3));
--ui-shadow-none: none;
--ui-shadow-sm: 0 1px calc(2px * var(--ui-shadow-blur-factor)) 0 rgb(0 0 0 / var(--hp-shadow-intensity));
--ui-shadow-md: 0 4px calc(6px * var(--ui-shadow-blur-factor)) -1px rgb(0 0 0 / var(--hp-shadow-intensity)),
0 2px calc(4px * var(--ui-shadow-blur-factor)) -2px rgb(0 0 0 / var(--hp-shadow-intensity));
--ui-shadow-lg: 0 10px calc(15px * var(--ui-shadow-blur-factor)) -3px rgb(0 0 0 / var(--hp-shadow-intensity)),
0 4px calc(6px * var(--ui-shadow-blur-factor)) -4px rgb(0 0 0 / var(--hp-shadow-intensity));
--ui-shadow-xl: 0 20px calc(25px * var(--ui-shadow-blur-factor)) -5px rgb(0 0 0 / var(--hp-shadow-intensity)),
0 8px calc(10px * var(--ui-shadow-blur-factor)) -6px rgb(0 0 0 / var(--hp-shadow-intensity));
--ui-shadow-2xl: 0 25px calc(50px * var(--ui-shadow-blur-factor)) -12px rgb(0 0 0 / calc(var(--hp-shadow-intensity) * 2.5));
--ui-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / var(--hp-shadow-intensity));
/* ============================================
TRANSITIONS — speed multiplier
============================================ */
--ui-transition-fast: calc(150ms * var(--hp-transition-speed)) ease;
--ui-transition-normal: calc(250ms * var(--hp-transition-speed)) ease;
--ui-transition-slow: calc(350ms * var(--hp-transition-speed)) ease;
/* ============================================
HOVER EFFECTS — intensity controlled
============================================ */
--ui-hover-lift: calc(-1px * var(--hp-hover-intensity));
--ui-hover-shadow-boost: calc(var(--hp-shadow-intensity) * (1 + var(--hp-hover-intensity)));
/* ============================================
GLASS / MATERIAL
============================================ */
--ui-glass-blur: calc(var(--hp-backdrop-blur) * 1px);
--ui-glass-bg: rgba(255, 255, 255, calc(0.7 + 0.2 * (1 - var(--hp-backdrop-blur) / 30)));
/* ============================================
FOCUS RING
============================================ */
--ui-focus-ring: 0 0 0 calc(2px * var(--hp-border-scale) + 1px) var(--ui-primary-200);
/* ============================================
Z-INDEX LAYERS (unchanged)
============================================ */
--ui-z-dropdown: 100;
--ui-z-sticky: 200;
--ui-z-modal-backdrop: 300;
--ui-z-modal: 400;
--ui-z-popover: 500;
--ui-z-tooltip: 600;
--ui-z-toast: 700;
/* ============================================
LEGACY COMPAT — theme config aliases
============================================ */
--ui-density: var(--hp-density);
--ui-radius-default: var(--ui-radius-md);
}
/* ============================================
DARK MODE — Lightness scale inversion
All colors (primary, secondary, neutral, status)
adapt automatically. No per-color redeclaration.
============================================ */
[data-theme="dark"], .dark {
/* Invert lightness scale — everything follows */
--l-50: 9%;
--l-100: 13%;
--l-200: 18%;
--l-300: 25%;
--l-400: 38%;
--l-500: 55%;
--l-600: 62%;
--l-700: 72%;
--l-800: 82%;
--l-900: 90%;
--l-950: 96%;
/* White surface becomes dark */
--ui-white: hsl(var(--ui-neu-h), var(--ui-neu-s), 7%);
/* Glass material adapts */
--ui-glass-bg: rgba(0, 0, 0, calc(0.3 + 0.15 * var(--hp-backdrop-blur) / 30));
/* Shadows stronger for dark mode contrast */
--ui-shadow-sm: 0 1px calc(2px * var(--ui-shadow-blur-factor)) 0 rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.15));
--ui-shadow-md: 0 4px calc(6px * var(--ui-shadow-blur-factor)) -1px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.15)),
0 2px calc(4px * var(--ui-shadow-blur-factor)) -2px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.1));
--ui-shadow-lg: 0 10px calc(15px * var(--ui-shadow-blur-factor)) -3px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.2)),
0 4px calc(6px * var(--ui-shadow-blur-factor)) -4px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.15));
}
/* ============================================
SHARED COLOR SYSTEM — [data-color] palettes
Components reference --_c, --_c-hover, --_c-light, --_c-dark
============================================ */
[data-color="primary"] { --_c: var(--ui-primary); --_c-hover: var(--ui-primary-hover); --_c-light: var(--ui-primary-light); --_c-dark: var(--ui-primary-dark); }
[data-color="secondary"] { --_c: var(--ui-secondary); --_c-hover: var(--ui-secondary-hover); --_c-light: var(--ui-secondary-light); --_c-dark: var(--ui-secondary-dark); }
[data-color="success"] { --_c: var(--ui-success); --_c-hover: var(--ui-success-hover); --_c-light: var(--ui-success-light); --_c-dark: var(--ui-success-dark); }
[data-color="danger"] { --_c: var(--ui-danger); --_c-hover: var(--ui-danger-hover); --_c-light: var(--ui-danger-light); --_c-dark: var(--ui-danger-dark); }
[data-color="warning"] { --_c: var(--ui-warning); --_c-hover: var(--ui-warning-hover); --_c-light: var(--ui-warning-light); --_c-dark: var(--ui-warning-dark); }
[data-color="info"] { --_c: var(--ui-info); --_c-hover: var(--ui-info-hover); --_c-light: var(--ui-info-light); --_c-dark: var(--ui-info-dark); }
[data-color="gray"] { --_c: var(--ui-gray-500); --_c-hover: var(--ui-gray-600); --_c-light: var(--ui-gray-100); --_c-dark: var(--ui-gray-700); }
[data-color="white"] { --_c: white; --_c-hover: var(--ui-gray-100); --_c-light: white; --_c-dark: var(--ui-gray-200); }
[data-color="tip"] { --_c: var(--ui-secondary); --_c-hover: var(--ui-secondary-hover); --_c-light: var(--ui-secondary-light); --_c-dark: var(--ui-secondary-dark); }
/* ============================================
SHARED FOCUS STYLE — used by all text inputs
============================================ */
.ui-config-select:focus,
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
.ui-dt-search input:focus,
.dataTables_filter input:focus,
.ui-date-picker input[type="date"]:focus,
/* focus styles in consolidated rule above */
/* ============================================
MINIMALISM MODE (no borders)
============================================ */
.ui-no-borders .ui-card,
.ui-no-borders .ui-input,
.ui-no-borders .ui-select,
.ui-no-borders .ui-textarea,
.ui-no-borders .ui-tabs-list,
.ui-no-borders .ui-card-header,
.ui-no-borders .ui-card-footer,
.ui-no-borders .ui-modal-header,
.ui-no-borders .ui-modal-footer {
border: none !important;
box-shadow: none !important;
}
/* ============================================
DENSITY SCALING
============================================ */
/* Space utilities that respect density */
.ui-space-density-1 { margin: calc(var(--ui-space-1) * var(--ui-density)); }
.ui-space-density-2 { margin: calc(var(--ui-space-2) * var(--ui-density)); }
.ui-space-density-4 { margin: calc(var(--ui-space-4) * var(--ui-density)); }
.ui-gap-density-2 { gap: calc(var(--ui-space-2) * var(--ui-density)); }
.ui-gap-density-4 { gap: calc(var(--ui-space-4) * var(--ui-density)); }
.ui-p-density-2 { padding: calc(var(--ui-space-2) * var(--ui-density)); }
.ui-p-density-4 { padding: calc(var(--ui-space-4) * var(--ui-density)); }
/* ============================================
THEME UTILITY CLASSES
============================================ */
/* === Border Radius Utilities === */
.ui-radius-none { border-radius: var(--ui-radius-none) !important; }
.ui-radius-sm { border-radius: var(--ui-radius-sm) !important; }
.ui-radius-md { border-radius: var(--ui-radius-md) !important; }
.ui-radius-lg { border-radius: var(--ui-radius-lg) !important; }
.ui-radius-xl { border-radius: var(--ui-radius-xl) !important; }
.ui-radius-2xl { border-radius: var(--ui-radius-2xl) !important; }
.ui-radius-full { border-radius: var(--ui-radius-full) !important; }
/* === Shadow Utilities === */
.ui-shadow-none { box-shadow: var(--ui-shadow-none) !important; }
.ui-shadow-sm { box-shadow: var(--ui-shadow-sm) !important; }
.ui-shadow-md { box-shadow: var(--ui-shadow-md) !important; }
.ui-shadow-lg { box-shadow: var(--ui-shadow-lg) !important; }
.ui-shadow-xl { box-shadow: var(--ui-shadow-xl) !important; }
.ui-shadow-2xl { box-shadow: var(--ui-shadow-2xl) !important; }
.ui-shadow-inner { box-shadow: var(--ui-shadow-inner) !important; }
/* === Size Utilities (component scale) === */
.ui-size-xs { font-size: var(--ui-text-xs); }
.ui-size-sm { font-size: var(--ui-text-sm); }
.ui-size-md { font-size: var(--ui-text-base); }
.ui-size-lg { font-size: var(--ui-text-lg); }
.ui-size-xl { font-size: var(--ui-text-xl); }
/* === Text Size Utilities === */
.ui-text-2xs { font-size: var(--ui-text-2xs) !important; }
.ui-text-xs { font-size: var(--ui-text-xs) !important; }
.ui-text-sm { font-size: var(--ui-text-sm) !important; }
.ui-text-base { font-size: var(--ui-text-base) !important; }
.ui-text-lg { font-size: var(--ui-text-lg) !important; }
.ui-text-xl { font-size: var(--ui-text-xl) !important; }
.ui-text-2xl { font-size: var(--ui-text-2xl) !important; }
.ui-text-3xl { font-size: var(--ui-text-3xl) !important; }
.ui-text-4xl { font-size: var(--ui-text-4xl) !important; }
/* === Color Scheme Utilities === */
.ui-color-primary { --ui-color: var(--ui-primary); --ui-color-light: var(--ui-primary-light); }
.ui-color-secondary { --ui-color: var(--ui-secondary); --ui-color-light: var(--ui-secondary-light); }
.ui-color-success { --ui-color: var(--ui-success); --ui-color-light: var(--ui-success-light); }
.ui-color-danger { --ui-color: var(--ui-danger); --ui-color-light: var(--ui-danger-light); }
.ui-color-warning { --ui-color: var(--ui-warning); --ui-color-light: var(--ui-warning-light); }
.ui-color-info { --ui-color: var(--ui-info); --ui-color-light: var(--ui-info-light); }
.ui-color-gray { --ui-color: var(--ui-gray-500); --ui-color-light: var(--ui-gray-100); }
.ui-color-dark { --ui-color: var(--ui-gray-800); --ui-color-light: var(--ui-gray-200); }
/* === Background Utilities for Variants === */
.ui-bg-light { background-color: var(--ui-color-light, var(--ui-primary-light)); }
.ui-bg-muted { background-color: var(--ui-gray-100); }
.ui-bg-glass {
background-color: var(--ui-glass-bg);
backdrop-filter: blur(var(--ui-glass-blur));
-webkit-backdrop-filter: blur(var(--ui-glass-blur));
}
/* === Border Utilities for Variants === */
.ui-border-none { border: none !important; }
.ui-border-subtle { border: var(--ui-border-width) solid var(--ui-gray-200) !important; }
.ui-border-solid { border: var(--ui-border-width) solid var(--ui-gray-400) !important; }
/* ============================================
LAYOUT UTILITY CLASSES
============================================ */
/* === Display & Flexbox === */
.ui-flex { display: flex; }
.ui-inline-flex { display: inline-flex; }
.ui-grid { display: grid; }
.ui-block { display: block; }
.ui-inline { display: inline; }
.ui-inline-block { display: inline-block; }
.ui-hidden { display: none !important; }
.ui-flex-row { flex-direction: row; }
.ui-flex-col { flex-direction: column; }
.ui-flex-wrap { flex-wrap: wrap; }
.ui-flex-nowrap { flex-wrap: nowrap; }
.ui-flex-1 { flex: 1; }
.ui-flex-auto { flex: auto; }
.ui-flex-none { flex: none; }
.ui-items-start { align-items: flex-start; }
.ui-items-center { align-items: center; }
.ui-items-end { align-items: flex-end; }
.ui-items-stretch { align-items: stretch; }
.ui-justify-start { justify-content: flex-start; }
.ui-justify-center { justify-content: center; }
.ui-justify-end { justify-content: flex-end; }
.ui-justify-between { justify-content: space-between; }
.ui-justify-around { justify-content: space-around; }
/* === Gap Utilities === */
.ui-gap-0 { gap: 0; }
.ui-gap-1 { gap: var(--ui-space-1); }
.ui-gap-2 { gap: var(--ui-space-2); }
.ui-gap-3 { gap: var(--ui-space-3); }
.ui-gap-4 { gap: var(--ui-space-4); }
.ui-gap-5 { gap: var(--ui-space-5); }
.ui-gap-6 { gap: var(--ui-space-6); }
.ui-gap-8 { gap: var(--ui-space-8); }
/* === Margin Utilities === */
.ui-m-0 { margin: 0; }
.ui-m-1 { margin: var(--ui-space-1); }
.ui-m-2 { margin: var(--ui-space-2); }
.ui-m-3 { margin: var(--ui-space-3); }
.ui-m-4 { margin: var(--ui-space-4); }
.ui-m-6 { margin: var(--ui-space-6); }
.ui-m-8 { margin: var(--ui-space-8); }
.ui-m-auto { margin: auto; }
.ui-mt-0 { margin-top: 0; }
.ui-mt-1 { margin-top: var(--ui-space-1); }
.ui-mt-2 { margin-top: var(--ui-space-2); }
.ui-mt-3 { margin-top: var(--ui-space-3); }
.ui-mt-4 { margin-top: var(--ui-space-4); }
.ui-mt-6 { margin-top: var(--ui-space-6); }
.ui-mt-8 { margin-top: var(--ui-space-8); }
.ui-mb-0 { margin-bottom: 0; }
.ui-mb-1 { margin-bottom: var(--ui-space-1); }
.ui-mb-2 { margin-bottom: var(--ui-space-2); }
.ui-mb-3 { margin-bottom: var(--ui-space-3); }
.ui-mb-4 { margin-bottom: var(--ui-space-4); }
.ui-mb-6 { margin-bottom: var(--ui-space-6); }
.ui-mb-8 { margin-bottom: var(--ui-space-8); }
.ui-ml-0 { margin-left: 0; }
.ui-ml-1 { margin-left: var(--ui-space-1); }
.ui-ml-2 { margin-left: var(--ui-space-2); }
.ui-ml-3 { margin-left: var(--ui-space-3); }
.ui-ml-4 { margin-left: var(--ui-space-4); }
.ui-ml-auto { margin-left: auto; }
.ui-mr-0 { margin-right: 0; }
.ui-mr-1 { margin-right: var(--ui-space-1); }
.ui-mr-2 { margin-right: var(--ui-space-2); }
.ui-mr-3 { margin-right: var(--ui-space-3); }
.ui-mr-4 { margin-right: var(--ui-space-4); }
.ui-mr-auto { margin-right: auto; }
.ui-mx-auto { margin-left: auto; margin-right: auto; }
.ui-my-0 { margin-top: 0; margin-bottom: 0; }
.ui-my-4 { margin-top: var(--ui-space-4); margin-bottom: var(--ui-space-4); }
.ui-my-6 { margin-top: var(--ui-space-6); margin-bottom: var(--ui-space-6); }
/* === Padding Utilities === */
.ui-p-0 { padding: 0; }
.ui-p-1 { padding: var(--ui-space-1); }
.ui-p-2 { padding: var(--ui-space-2); }
.ui-p-3 { padding: var(--ui-space-3); }
.ui-p-4 { padding: var(--ui-space-4); }
.ui-p-6 { padding: var(--ui-space-6); }
.ui-p-8 { padding: var(--ui-space-8); }
.ui-pt-0 { padding-top: 0; }
.ui-pt-2 { padding-top: var(--ui-space-2); }
.ui-pt-4 { padding-top: var(--ui-space-4); }
.ui-pt-6 { padding-top: var(--ui-space-6); }
.ui-pb-0 { padding-bottom: 0; }
.ui-pb-2 { padding-bottom: var(--ui-space-2); }
.ui-pb-3 { padding-bottom: var(--ui-space-3); }
.ui-pb-4 { padding-bottom: var(--ui-space-4); }
.ui-pb-6 { padding-bottom: var(--ui-space-6); }
.ui-px-0 { padding-left: 0; padding-right: 0; }
.ui-px-2 { padding-left: var(--ui-space-2); padding-right: var(--ui-space-2); }
.ui-px-3 { padding-left: var(--ui-space-3); padding-right: var(--ui-space-3); }
.ui-px-4 { padding-left: var(--ui-space-4); padding-right: var(--ui-space-4); }
.ui-px-6 { padding-left: var(--ui-space-6); padding-right: var(--ui-space-6); }
.ui-py-0 { padding-top: 0; padding-bottom: 0; }
.ui-py-2 { padding-top: var(--ui-space-2); padding-bottom: var(--ui-space-2); }
.ui-py-3 { padding-top: var(--ui-space-3); padding-bottom: var(--ui-space-3); }
.ui-py-4 { padding-top: var(--ui-space-4); padding-bottom: var(--ui-space-4); }
.ui-py-6 { padding-top: var(--ui-space-6); padding-bottom: var(--ui-space-6); }
/* === Width & Height === */
.ui-w-full { width: 100%; }
.ui-w-auto { width: auto; }
.ui-h-full { height: 100%; }
.ui-h-auto { height: auto; }
.ui-min-h-screen { min-height: 100vh; }
.ui-max-w-sm { max-width: 24rem; }
.ui-max-w-md { max-width: 28rem; }
.ui-max-w-lg { max-width: 32rem; }
.ui-max-w-xl { max-width: 36rem; }
.ui-max-w-2xl { max-width: 42rem; }
.ui-max-w-4xl { max-width: 56rem; }
.ui-max-w-full { max-width: 100%; }
/* === Text Utilities === */
.ui-text-left { text-align: left; }
.ui-text-center { text-align: center; }
.ui-text-right { text-align: right; }
.ui-font-normal { font-weight: var(--ui-font-normal); }
.ui-font-medium { font-weight: var(--ui-font-medium); }
.ui-font-semibold { font-weight: var(--ui-font-semibold); }
.ui-font-bold { font-weight: var(--ui-font-bold); }
.ui-text-white { color: var(--ui-white); }
.ui-text-black { color: var(--ui-black); }
.ui-text-gray-400 { color: var(--ui-gray-400); }
.ui-text-gray-500 { color: var(--ui-gray-500); }
.ui-text-gray-600 { color: var(--ui-gray-600); }
.ui-text-gray-700 { color: var(--ui-gray-700); }
.ui-text-gray-800 { color: var(--ui-gray-800); }
.ui-text-gray-900 { color: var(--ui-gray-900); }
.ui-text-primary { color: var(--ui-primary); }
.ui-text-secondary { color: var(--ui-secondary); }
.ui-text-success { color: var(--ui-success); }
.ui-text-danger { color: var(--ui-danger); }
.ui-text-warning { color: var(--ui-warning); }
.ui-text-info { color: var(--ui-info); }
.ui-uppercase { text-transform: uppercase; }
.ui-lowercase { text-transform: lowercase; }
.ui-capitalize { text-transform: capitalize; }
.ui-tracking-wide { letter-spacing: 0.05em; }
/* === Background Utilities === */
.ui-bg-white { background-color: var(--ui-white); }
.ui-bg-gray-50 { background-color: var(--ui-gray-50); }
.ui-bg-gray-100 { background-color: var(--ui-gray-100); }
.ui-bg-gray-200 { background-color: var(--ui-gray-200); }
.ui-bg-primary { background-color: var(--ui-primary); }
.ui-bg-primary-light { background-color: var(--ui-primary-light); }
.ui-bg-secondary { background-color: var(--ui-secondary); }
.ui-bg-secondary-light { background-color: var(--ui-secondary-light); }
.ui-bg-success-light { background-color: var(--ui-success-light); }
.ui-bg-danger-light { background-color: var(--ui-danger-light); }
.ui-bg-warning-light { background-color: var(--ui-warning-light); }
.ui-bg-info-light { background-color: var(--ui-info-light); }
.ui-bg-transparent { background-color: transparent; }
/* === Position Utilities === */
.ui-relative { position: relative; }
.ui-absolute { position: absolute; }
.ui-fixed { position: fixed; }
.ui-sticky { position: sticky; }
.ui-top-0 { top: 0; }
.ui-right-0 { right: 0; }
.ui-bottom-0 { bottom: 0; }
.ui-left-0 { left: 0; }
.ui-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
/* === Z-Index Utilities === */
.ui-z-10 { z-index: 10; }
.ui-z-20 { z-index: 20; }
.ui-z-50 { z-index: 50; }
.ui-z-dropdown { z-index: var(--ui-z-dropdown); }
.ui-z-modal { z-index: var(--ui-z-modal); }
.ui-z-tooltip { z-index: var(--ui-z-tooltip); }
.ui-z-toast { z-index: var(--ui-z-toast); }
/* === Overflow === */
.ui-overflow-auto { overflow: auto; }
.ui-overflow-hidden { overflow: hidden; }
.ui-overflow-visible { overflow: visible; }
.ui-overflow-y-auto { overflow-y: auto; }
.ui-overflow-x-auto { overflow-x: auto; }
/* === Cursor === */
.ui-cursor-pointer { cursor: pointer; }
.ui-cursor-default { cursor: default; }
.ui-cursor-not-allowed { cursor: not-allowed; }
/* === Transitions === */
.ui-transition { transition: all var(--ui-transition-normal); }
.ui-transition-fast { transition: all var(--ui-transition-fast); }
.ui-transition-slow { transition: all var(--ui-transition-slow); }
/* ============================================
PAGE LAYOUT COMPONENTS
============================================ */
/* Page wrapper - applies default page styling */
.ui-page {
font-family: var(--ui-font-body);
background-color: var(--ui-gray-50);
min-height: 100vh;
margin: 0;
padding: var(--ui-space-8);
box-sizing: border-box;
}
/* Page title */
.ui-page-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-3xl);
font-weight: var(--ui-font-bold);
color: var(--ui-gray-900);
margin: 0 0 var(--ui-space-2);
}
/* Page subtitle/description */
.ui-page-subtitle {
font-size: var(--ui-text-lg);
color: var(--ui-gray-600);
margin: 0 0 var(--ui-space-6);
}
/* Section wrapper for grouping related content */
.ui-section {
background-color: var(--ui-white);
border-radius: var(--ui-radius-lg);
padding: var(--ui-space-6);
margin-bottom: var(--ui-space-6);
box-shadow: var(--ui-shadow-sm);
}
/* Section title */
.ui-section-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
margin: 0 0 var(--ui-space-4);
padding-bottom: var(--ui-space-3);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
/* Section subtitle */
.ui-section-subtitle {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
margin: 0 0 var(--ui-space-2);
}
/* Category section - larger grouping with header */
.ui-category {
margin-bottom: var(--ui-space-8);
}
/* Category header with icon, title, description */
.ui-category-header {
display: flex;
align-items: center;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
padding-bottom: var(--ui-space-3);
border-bottom: 3px solid var(--ui-primary);
}
.ui-category-icon {
font-size: 1.5rem;
background-color: var(--ui-primary-light);
padding: var(--ui-space-2);
border-radius: var(--ui-radius-lg);
line-height: 1;
}
.ui-category-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
color: var(--ui-gray-900);
margin: 0;
}
.ui-category-desc {
font-size: var(--ui-text-sm);
color: var(--ui-gray-500);
margin-left: auto;
}
/* Demo row - flex container for displaying components */
.ui-demo-row {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-3);
align-items: flex-start;
}
/* Toolbar - fixed position action bar */
.ui-toolbar {
position: fixed;
top: var(--ui-space-4);
left: var(--ui-space-4);
z-index: var(--ui-z-sticky);
display: flex;
gap: var(--ui-space-2);
}
/* Panel - side panel for settings/config */
.ui-panel {
position: fixed;
top: var(--ui-space-4);
right: var(--ui-space-4);
z-index: var(--ui-z-sticky);
background-color: var(--ui-white);
border-radius: var(--ui-radius-xl);
box-shadow: var(--ui-shadow-lg);
padding: var(--ui-space-4);
width: 280px;
max-height: calc(100vh - 2rem);
overflow-y: auto;
transition: transform var(--ui-transition-normal), opacity var(--ui-transition-normal);
}
.ui-panel.ui-hidden {
transform: translateX(320px);
opacity: 0;
pointer-events: none;
}
.ui-panel-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
margin: 0 0 var(--ui-space-4);
padding-bottom: var(--ui-space-3);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
/* Config form elements for panels */
.ui-config-group {
margin-bottom: var(--ui-space-4);
}
.ui-config-group:last-child {
margin-bottom: 0;
}
.ui-config-label {
display: block;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-600);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--ui-space-2);
}
.ui-config-row {
display: flex;
gap: var(--ui-space-3);
}
.ui-config-row .ui-config-group {
flex: 1;
}
.ui-config-color {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-config-color-input {
width: 40px;
height: 40px;
padding: 0;
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
cursor: pointer;
background: none;
}
.ui-config-color-input::-webkit-color-swatch-wrapper {
padding: 2px;
}
.ui-config-color-input::-webkit-color-swatch {
border: none;
border-radius: var(--ui-radius-sm);
}
.ui-config-color-value {
font-family: var(--ui-font-mono);
font-size: var(--ui-text-xs);
color: var(--ui-gray-600);
}
.ui-config-select {
width: 100%;
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
background-color: var(--ui-white);
cursor: pointer;
}
.ui-config-slider {
width: 100%;
margin: 0;
cursor: pointer;
}
.ui-config-slider-value {
display: flex;
justify-content: space-between;
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-top: var(--ui-space-1);
}
.ui-config-preview {
display: flex;
gap: var(--ui-space-2);
margin-top: var(--ui-space-2);
}
.ui-config-preview-box {
flex: 1;
height: 32px;
border-radius: var(--ui-radius-md);
border: var(--ui-border-width) solid var(--ui-gray-200);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.ui-panel {
width: 260px;
right: var(--ui-space-2);
top: var(--ui-space-2);
padding: var(--ui-space-3);
}
.ui-page {
padding: var(--ui-space-4);
}
}
@media (max-width: 640px) {
.ui-toolbar {
left: var(--ui-space-2);
top: var(--ui-space-2);
}
.ui-toolbar .ui-btn {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
}
.ui-category-desc {
display: none;
}
}
@media (max-width: 480px) {
.ui-panel {
width: calc(100% - 1rem);
left: 0.5rem;
right: 0.5rem;
top: auto;
bottom: 0.5rem;
max-height: 50vh;
}
.ui-panel.ui-hidden {
transform: translateY(100%);
}
.ui-toolbar {
flex-wrap: wrap;
}
}
@media (max-width: 400px) {
.ui-toolbar {
flex-direction: column;
}
}
/* ============================================
EDIT FORM SECTION STYLES
============================================ */
.ui-edit-section {
margin-bottom: var(--ui-space-4);
}
.ui-edit-section-header {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ui-gray-500);
padding: var(--ui-space-2) 0;
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
margin-bottom: var(--ui-space-2);
}
.ui-edit-section-header.collapsible {
cursor: pointer;
user-select: none;
}
.ui-edit-section-header.collapsible:hover {
color: var(--ui-gray-700);
}
.ui-edit-section-icon {
display: inline-block;
width: 12px;
font-size: var(--ui-text-xs);
margin-right: var(--ui-space-1);
transition: transform var(--ui-transition-fast);
}
.ui-edit-section.collapsed .ui-edit-section-body {
display: none;
}
.ui-edit-section-body {
padding: var(--ui-space-2) 0;
}
/* ============================================
BASE STYLES
============================================ */
.ui {
box-sizing: border-box;
font-family: var(--ui-font-body);
font-size: var(--ui-text-base);
line-height: var(--ui-leading-normal);
letter-spacing: var(--ui-ls-body);
color: var(--ui-gray-900);
}
.ui *, .ui *::before, .ui *::after {
box-sizing: inherit;
}
/* Heading letter-spacing for all heading-font elements */
.ui-page-title, .ui-section-title, .ui-category-title, .ui-card-title,
.ui-panel-title, .ui-modal-title, .ui-accordion-title, .ui-tab-label,
[class*="ui-"][class*="-title"] {
letter-spacing: var(--ui-ls-heading);
}
/* ============================================
BUTTON COMPONENT
============================================ */
.ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-1);
padding: var(--ui-space-1) var(--ui-space-3);
font-family: var(--ui-font-body);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
line-height: 1;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--ui-radius-md);
cursor: pointer;
transition: all var(--ui-transition-fast);
white-space: nowrap;
}
.ui-btn:hover:not(:disabled) {
transform: translateY(calc(var(--ui-hover-lift) * 0.5));
}
.ui-btn:focus {
outline: 2px solid var(--ui-primary);
outline-offset: 2px;
}
.ui-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Button Variants — legacy class selectors set --_c */
.ui-btn-primary { --_c: var(--ui-primary); --_c-hover: var(--ui-primary-hover); }
.ui-btn-secondary { --_c: var(--ui-secondary); --_c-hover: var(--ui-secondary-hover); }
.ui-btn-success { --_c: var(--ui-success); --_c-hover: var(--ui-success-hover); }
.ui-btn-danger { --_c: var(--ui-danger); --_c-hover: var(--ui-danger-hover); }
.ui-btn-warning { --_c: var(--ui-warning); --_c-hover: var(--ui-warning-hover); }
.ui-btn[data-color],
.ui-btn-primary, .ui-btn-secondary, .ui-btn-success, .ui-btn-danger, .ui-btn-warning {
background: var(--_c); color: var(--ui-white);
}
.ui-btn[data-color]:hover:not(:disabled),
.ui-btn-primary:hover:not(:disabled), .ui-btn-secondary:hover:not(:disabled),
.ui-btn-success:hover:not(:disabled), .ui-btn-danger:hover:not(:disabled),
.ui-btn-warning:hover:not(:disabled) {
background: var(--_c-hover);
}
.ui-btn-outline {
background: transparent;
border-color: var(--ui-gray-300);
color: var(--ui-gray-700);
}
.ui-btn-outline:hover:not(:disabled) {
background: var(--ui-gray-50);
border-color: var(--ui-gray-400);
}
.ui-btn-ghost {
background: transparent;
color: var(--ui-gray-700);
}
.ui-btn-ghost:hover:not(:disabled) {
background: var(--ui-gray-100);
}
/* Button Sizes */
.ui-btn-sm {
padding: 2px var(--ui-space-2);
font-size: var(--ui-text-2xs);
}
.ui-btn-lg {
padding: var(--ui-space-2) var(--ui-space-4);
font-size: var(--ui-text-sm);
}
/* Button Style: Elevated (with shadow and hover lift) */
.ui-btn-elevated {
box-shadow: var(--ui-shadow-md);
}
.ui-btn-elevated:hover:not(:disabled) {
transform: translateY(var(--ui-hover-lift));
box-shadow: var(--ui-shadow-lg);
}
/* Button Icon Variant (circular) */
.ui-btn-icon {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--ui-radius-full);
}
.ui-btn-icon.ui-btn-sm {
width: 32px;
height: 32px;
}
.ui-btn-icon.ui-btn-lg {
width: 52px;
height: 52px;
}
/* ============================================
BUTTON GROUP
============================================ */
.ui-btn-group {
display: inline-flex;
gap: 0;
}
.ui-btn-group .ui-btn {
border-radius: 0;
margin: 0;
}
.ui-btn-group .ui-btn:first-child {
border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
}
.ui-btn-group .ui-btn:last-child {
border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
}
.ui-btn-group .ui-btn:not(:last-child) {
border-right: var(--ui-border-width) solid hsla(0, 0%, 100%, 0.2);
}
.ui-btn-group .ui-btn-outline:not(:last-child) {
border-right-color: var(--ui-gray-300);
}
/* Horizontal Button Group (explicit class) */
.ui-btn-group-horizontal {
flex-direction: row;
}
/* Vertical Button Group */
.ui-btn-group-vertical {
display: inline-flex;
flex-direction: column;
gap: 0;
}
.ui-btn-group-vertical .ui-btn {
border-radius: 0;
width: 100%;
}
.ui-btn-group-vertical .ui-btn:first-child {
border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
}
.ui-btn-group-vertical .ui-btn:last-child {
border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
}
.ui-btn-group-vertical .ui-btn:not(:last-child) {
border-bottom: var(--ui-border-width) solid hsla(0, 0%, 100%, 0.2);
}
/* Responsive button groups */
@media (max-width: 480px) {
.ui-btn-group {
flex-wrap: wrap;
}
.ui-btn-group .ui-btn {
font-size: var(--ui-text-xs);
padding: var(--ui-space-2) var(--ui-space-3);
}
}
/* ============================================
CARD COMPONENT
============================================ */
.ui-card {
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-sm);
transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
.ui-card:hover {
box-shadow: var(--ui-shadow-md);
}
.ui-card-header {
padding: var(--ui-space-2);
box-shadow: 0 1px 0 var(--ui-gray-100);
display: flex;
align-items: center;
justify-content: space-between;
}
.ui-card-collapse-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--ui-space-1) var(--ui-space-2);
color: var(--ui-gray-500);
font-size: var(--ui-text-sm);
border-radius: var(--ui-radius-sm);
transition: background-color 0.15s ease;
}
.ui-card-collapse-btn:hover {
background-color: var(--ui-gray-100);
color: var(--ui-gray-700);
}
.ui-card-body {
padding: var(--ui-space-2) var(--ui-space-3);
}
.ui-card-footer {
padding: var(--ui-space-2);
box-shadow: 0 -1px 0 var(--ui-gray-100);
background: var(--ui-gray-50);
border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}
.ui-card-title {
margin: 0;
font-family: var(--ui-font-heading);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
}
/* Card Compact Modifier (for detail panels / bindCard) */
.ui-card-compact .ui-card-header {
padding: var(--ui-space-1) var(--ui-space-3);
justify-content: flex-start;
gap: var(--ui-space-1);
border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.ui-card-compact .ui-card-title {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
color: var(--ui-gray-600);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.ui-card-compact .ui-card-body {
padding: var(--ui-space-2) var(--ui-space-3);
}
.ui-card-compact .ui-card-header i,
.ui-card-compact .ui-card-header .fas,
.ui-card-compact .ui-card-header .far {
color: var(--icon-color, var(--ui-gray-500));
font-size: var(--ui-text-xs);
}
/* Card Hover Lift */
.ui-card-hoverable {
transition: transform var(--ui-transition-normal), box-shadow var(--ui-transition-normal);
}
.ui-card-hoverable:hover {
transform: translateY(-4px);
box-shadow: var(--ui-shadow-lg);
}
/* Card Image Variant */
.ui-card-image .ui-card-img {
height: 160px;
background: var(--ui-primary);
position: relative;
overflow: hidden;
}
.ui-card-image .ui-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-card-image .ui-card-img-badge {
position: absolute;
top: 12px;
right: 12px;
padding: var(--ui-space-1) var(--ui-space-3);
background: var(--ui-white);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-primary);
}
/* Card Stat Variant */
.ui-card-stat {
text-align: center;
}
.ui-card-stat .ui-card-body {
padding: var(--ui-space-3);
}
.ui-card-stat-icon {
width: calc(36px * var(--hp-scale, 1));
height: calc(36px * var(--hp-scale, 1));
border-radius: var(--ui-radius-md);
background: var(--ui-primary-light);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--ui-space-2);
font-size: var(--ui-text-lg);
color: var(--ui-primary);
}
.ui-card-stat-value {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
color: var(--ui-primary);
line-height: 1;
}
.ui-card-stat-label {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-top: var(--ui-space-1);
}
/* Metric Chip — compact inline KPI (used by bindMetric) */
.ui-metric-chip {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-1) var(--ui-space-3);
background: var(--ui-white, #fff);
border: var(--ui-border-width, 1px) solid var(--ui-gray-200, #e5e7eb);
border-radius: var(--ui-radius-full, 999px);
font-size: var(--ui-text-xs);
line-height: 1.2;
white-space: nowrap;
}
.ui-metric-chip-icon {
font-size: var(--ui-text-sm);
flex-shrink: 0;
}
.ui-metric-chip-value {
font-weight: var(--ui-font-bold, 700);
font-size: var(--ui-text-sm);
line-height: 1;
}
.ui-metric-chip-label {
font-weight: var(--ui-font-medium, 500);
color: var(--ui-gray-600, #4b5563);
}
.ui-metric-chip-sub {
font-size: var(--ui-text-2xs, 0.65rem);
color: var(--ui-gray-400, #9ca3af);
}
/* Metric chip icon circle — tinted background circle for icons */
.ui-metric-chip-icon-circle {
width: 28px;
height: 28px;
border-radius: var(--ui-radius-md, 4px);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: var(--ui-text-xs, 0.75rem);
/* color set via style="--_mc-color:..." */
background: color-mix(in srgb, var(--_mc-color, var(--ui-primary)) 15%, transparent);
color: var(--_mc-color, var(--ui-primary));
}
/* Metric strip — flex row container for metric chips */
.ui-metric-strip {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-1);
padding: var(--ui-space-1) 0;
}
/* ─── Status Badge ─── dynamic-color tinted badge using CSS custom property */
/* Usage: Active */
.ui-status-badge {
display: inline-block;
font-size: var(--ui-text-2xs, 0.65rem);
font-weight: var(--ui-font-semibold, 600);
padding: 0.1rem 0.4rem;
border-radius: var(--ui-radius-full, 9999px);
line-height: 1.4;
background: color-mix(in srgb, var(--_status-color, var(--ui-gray-400)) 15%, transparent);
color: var(--_status-color, var(--ui-gray-400));
white-space: nowrap;
}
/* ─── Progress Mini ─── compact 6px progress bar */
/* Usage: */
.ui-progress-mini {
background: var(--ui-gray-200, #e5e7eb);
border-radius: var(--ui-radius-sm, 3px);
height: 6px;
overflow: hidden;
}
.ui-progress-mini-fill {
height: 100%;
border-radius: var(--ui-radius-sm, 3px);
transition: width 0.3s;
background: var(--_bar-color, var(--ui-primary));
}
/* ─── KV Row ─── label-value pair display */
/* Usage: StatusActive
*/
.ui-kv-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.15rem 0;
font-size: var(--ui-text-xs, 0.75rem);
border-bottom: 1px solid var(--ui-gray-100, #f3f4f6);
}
.ui-kv-label {
color: var(--ui-gray-500, #6b7280);
font-size: var(--ui-text-2xs, 0.65rem);
}
.ui-kv-value {
font-weight: var(--ui-font-medium, 500);
color: var(--ui-gray-800, #1f2937);
}
/* Card Profile Variant */
.ui-card-profile {
text-align: center;
}
.ui-card-profile .ui-card-body {
padding: var(--ui-space-8) var(--ui-space-6);
}
.ui-card-avatar {
width: 80px;
height: 80px;
border-radius: var(--ui-radius-full);
background: var(--ui-primary);
margin: 0 auto var(--ui-space-4);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-3xl);
color: var(--ui-white);
font-weight: var(--ui-font-bold);
font-family: var(--ui-font-heading);
border: 4px solid var(--ui-white);
box-shadow: var(--ui-shadow-md);
overflow: hidden;
}
.ui-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-card-name {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-bold);
color: var(--ui-gray-900);
margin: 0;
}
.ui-card-role {
font-size: var(--ui-text-sm);
color: var(--ui-secondary);
font-weight: var(--ui-font-medium);
margin-top: var(--ui-space-1);
}
/* Task Card Variant */
.ui-card-task {
text-align: left;
}
.ui-card-task .ui-card-body {
padding: var(--ui-space-4);
}
.ui-card-task-header {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-3);
}
.ui-card-task-avatar {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: var(--ui-radius-full);
background: var(--ui-primary-light);
color: var(--ui-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
overflow: hidden;
}
.ui-card-task-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-card-task-info {
flex: 1;
min-width: 0;
}
.ui-card-task-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
margin: 0;
line-height: 1.3;
}
.ui-card-task-subtitle {
font-size: var(--ui-text-sm);
color: var(--ui-gray-500);
margin: var(--ui-space-1) 0 0;
}
.ui-card-task-body {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
line-height: var(--ui-leading-relaxed);
margin: 0 0 var(--ui-space-3);
}
.ui-card-task-progress {
display: flex;
align-items: center;
gap: var(--ui-space-3);
margin-top: var(--ui-space-3);
}
.ui-card-task-progress .ui-progress {
flex: 1;
height: 6px;
}
.ui-card-task-progress-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-500);
min-width: 36px;
text-align: right;
}
.ui-card-task-actions {
display: flex;
justify-content: flex-end;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
border-top: var(--ui-border-width) solid var(--ui-gray-100);
background: var(--ui-gray-50);
}
/* Card Horizontal Template */
.ui-card-horizontal .ui-card-horizontal {
display: flex;
flex-direction: row;
}
.ui-card-horizontal .ui-card-horizontal-img {
width: 40%;
min-height: 160px;
flex-shrink: 0;
overflow: hidden;
}
.ui-card-horizontal .ui-card-horizontal-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ui-card-horizontal .ui-card-horizontal-content {
flex: 1;
padding: var(--ui-space-4);
display: flex;
flex-direction: column;
justify-content: center;
}
.ui-card-horizontal .ui-card-footer {
border-top: none;
background: transparent;
padding: var(--ui-space-3) 0 0;
margin-top: auto;
}
/* === Card Variant Styles (Visual Presets) === */
/* Minimal - No border, no shadow */
.ui-card-variant-minimal {
border: none;
box-shadow: none;
background: transparent;
}
/* Soft - Light background, no border */
.ui-card-variant-soft {
border: none;
box-shadow: none;
background: var(--ui-color-light, var(--ui-primary-light));
}
/* Outlined - Visible border, no shadow */
.ui-card-variant-outlined {
border: var(--ui-border-width) solid var(--ui-gray-400);
box-shadow: none;
background: var(--ui-white);
}
/* Elevated - Larger shadow */
.ui-card-variant-elevated {
border: none;
box-shadow: var(--ui-shadow-lg);
background: var(--ui-white);
}
/* Flat - Muted background, no shadow */
.ui-card-variant-flat {
border: none;
box-shadow: none;
background: var(--ui-gray-100);
}
/* Glass - Frosted glass effect */
.ui-card-variant-glass {
border: none;
box-shadow: var(--ui-shadow-md);
background: var(--ui-glass-bg);
backdrop-filter: blur(var(--ui-glass-blur));
-webkit-backdrop-filter: blur(var(--ui-glass-blur));
}
/* Variant footer styles */
.ui-card-variant-minimal .ui-card-footer,
.ui-card-variant-soft .ui-card-footer,
.ui-card-variant-flat .ui-card-footer {
background: transparent;
border-top-color: rgb(0 0 0 / var(--hp-shadow-intensity));
}
.ui-card-variant-glass .ui-card-footer {
background: var(--ui-glass-bg);
border-top: none;
}
/* ============================================
INPUT COMPONENT
============================================ */
/* Input Wrapper + Label (shared by all input templates) */
.ui-input-wrapper {
margin-bottom: var(--ui-space-2);
}
.ui-input-label {
display: block;
margin-bottom: 3px;
font-family: var(--ui-font-body);
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Inline-label: label left of input on one row */
.ui-input-inline-label {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-input-inline-label .ui-input-label {
flex: 0 0 auto;
margin-bottom: 0;
white-space: nowrap;
}
.ui-input-inline-label .ui-input {
flex: 1;
}
/* Floating-label: label positioned over input, floats up on focus/filled */
.ui-input-floating-label {
position: relative;
}
.ui-input-floating-label .ui-input {
padding-top: calc(var(--ui-space-2) + 2px);
}
.ui-input-floating-label .ui-input-label {
position: absolute;
top: 50%;
left: var(--ui-space-2);
transform: translateY(-50%);
font-size: var(--ui-text-sm);
text-transform: none;
letter-spacing: normal;
color: var(--ui-gray-400);
pointer-events: none;
transition: all 150ms ease;
}
.ui-input-floating-label .ui-input:focus ~ .ui-input-label,
.ui-input-floating-label .ui-input:not(:placeholder-shown) ~ .ui-input-label {
top: 2px;
transform: translateY(0);
font-size: var(--ui-text-2xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ui-primary);
}
.ui-input {
display: block;
width: 100%;
box-sizing: border-box;
padding: var(--ui-space-1) var(--ui-space-2);
font-family: var(--ui-font-body);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
line-height: var(--ui-leading-tight);
color: var(--ui-gray-800);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
/* focus styles in consolidated rule above */
.ui-input:disabled {
background: var(--ui-gray-100);
cursor: not-allowed;
}
.ui-input::placeholder {
color: var(--ui-gray-400);
}
.ui-input-error {
border-color: var(--ui-danger);
}
.ui-input-error:focus {
box-shadow: 0 0 0 3px var(--ui-danger-light);
}
/* ============================================
SELECT COMPONENT
============================================ */
.ui-select {
display: block;
width: 100%;
box-sizing: border-box;
padding: var(--ui-space-1) var(--ui-space-2);
padding-right: var(--ui-space-8);
font-family: var(--ui-font-body);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
line-height: var(--ui-leading-tight);
color: var(--ui-gray-800);
background: var(--ui-white) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right var(--ui-space-2) center;
background-size: 1.5em 1.5em;
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
appearance: none;
cursor: pointer;
transition: border-color var(--ui-transition-fast);
}
/* focus styles in consolidated rule above */
/* ============================================
CARD SELECT FIELD
============================================ */
/* The single card — clickable */
.ui-card-select {
display: flex;
align-items: center;
gap: var(--ui-space-3);
width: 100%;
box-sizing: border-box;
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-sm);
cursor: pointer;
transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
min-height: 48px;
}
.ui-card-select:hover {
border-color: var(--ui-primary-200);
box-shadow: var(--ui-shadow-md);
}
/* Search icon — right-aligned */
.ui-card-select-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
}
.ui-card-select:hover .ui-card-select-icon {
color: var(--ui-primary);
}
/* Avatar circle */
.ui-card-select-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: var(--ui-radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-white);
background: var(--ui-primary);
}
/* Title + subtitle */
.ui-card-select-info {
flex: 1;
min-width: 0;
}
.ui-card-select-title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-card-select-subtitle {
font-size: var(--ui-text-2xs);
color: var(--ui-gray-500);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---- Picker modal internals ---- */
.ui-card-select-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--ui-space-2);
padding: var(--ui-space-2) 0;
}
.ui-card-select-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
cursor: pointer;
transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), background var(--ui-transition-fast);
}
.ui-card-select-item:hover {
border-color: var(--ui-primary-200);
background: var(--ui-primary-50);
}
.ui-card-select-item.active {
border-color: var(--ui-primary);
box-shadow: 0 0 0 2px var(--ui-primary-100);
}
.ui-card-select-item .ui-card-select-avatar {
width: 32px;
height: 32px;
font-size: var(--ui-text-xs);
}
/* Picker search bar */
.ui-card-select-search {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
margin-bottom: var(--ui-space-2);
background: var(--ui-gray-50);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
}
.ui-card-select-search i {
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
}
.ui-card-select-search input {
flex: 1;
border: none;
background: none;
outline: none;
font-size: var(--ui-text-sm);
font-family: var(--ui-font-body);
color: var(--ui-gray-900);
}
.ui-card-select-search input::placeholder {
color: var(--ui-gray-400);
}
/* Picker count */
.ui-card-select-count {
font-size: var(--ui-text-2xs);
color: var(--ui-gray-500);
padding: var(--ui-space-1) 0;
text-align: right;
}
/* ============================================
TEXTAREA COMPONENT
============================================ */
.ui-textarea {
display: block;
width: 100%;
box-sizing: border-box;
min-height: 100px;
padding: var(--ui-space-3);
font-family: var(--ui-font-body);
font-size: var(--ui-text-sm);
line-height: var(--ui-leading-relaxed);
color: var(--ui-gray-900);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
resize: vertical;
transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
.ui-textarea:hover {
border-color: var(--ui-gray-300);
}
/* focus styles in consolidated rule above */
.ui-textarea:disabled {
background: var(--ui-gray-100);
cursor: not-allowed;
}
.ui-textarea::placeholder {
color: var(--ui-gray-400);
}
/* ============================================
CHECKBOX & RADIO
============================================ */
.ui-checkbox,
.ui-radio {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
cursor: pointer;
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.ui-checkbox-box,
.ui-radio-box {
width: 20px;
height: 20px;
border: var(--ui-border-width) solid var(--ui-gray-300);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--ui-transition-fast);
flex-shrink: 0;
}
.ui-checkbox-box {
border-radius: var(--ui-radius-sm);
}
.ui-radio-box {
border-radius: 50%;
}
.ui-checkbox:hover .ui-checkbox-box,
.ui-radio:hover .ui-radio-box {
border-color: var(--ui-primary);
}
.ui-checkbox.ui-checked .ui-checkbox-box {
background: var(--ui-primary);
border-color: var(--ui-primary);
}
.ui-checkbox.ui-checked .ui-checkbox-box::after {
content: '✓';
color: var(--ui-white);
font-size: 12px;
font-weight: bold;
}
.ui-radio.ui-checked .ui-radio-box {
border-color: var(--ui-primary);
}
.ui-radio.ui-checked .ui-radio-box::after {
content: '';
width: 10px;
height: 10px;
background: var(--ui-primary);
border-radius: 50%;
}
.ui-checkbox.ui-disabled,
.ui-radio.ui-disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================
SWITCH / TOGGLE COMPONENT
============================================ */
.ui-switch {
display: inline-flex;
align-items: center;
gap: var(--ui-space-3);
cursor: pointer;
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.ui-switch-track {
width: 48px;
height: 26px;
background: var(--ui-gray-300);
border-radius: 13px;
position: relative;
transition: background var(--ui-transition-fast);
flex-shrink: 0;
}
.ui-switch-thumb {
position: absolute;
width: 22px;
height: 22px;
background: var(--ui-white);
border-radius: 50%;
top: 2px;
left: 2px;
transition: left var(--ui-transition-fast);
box-shadow: var(--ui-shadow-sm);
}
.ui-switch.ui-checked .ui-switch-track {
background: var(--ui-primary);
}
.ui-switch.ui-checked .ui-switch-thumb {
left: 24px;
}
.ui-switch:hover .ui-switch-track {
background: var(--ui-gray-400);
}
.ui-switch.ui-checked:hover .ui-switch-track {
background: var(--ui-primary-hover);
}
.ui-switch.ui-disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Switch sizes */
.ui-switch-sm .ui-switch-track {
width: 36px;
height: 20px;
border-radius: 10px;
}
.ui-switch-sm .ui-switch-thumb {
width: 16px;
height: 16px;
top: 2px;
left: 2px;
}
.ui-switch-sm.ui-checked .ui-switch-thumb {
left: 18px;
}
/* ============================================
SLIDER / RANGE COMPONENT
============================================ */
.ui-slider {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
width: 100%;
}
.ui-slider-track {
width: 100%;
height: 6px;
border-radius: 3px;
background: var(--ui-gray-200);
appearance: none;
outline: none;
cursor: pointer;
}
.ui-slider-track::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ui-primary);
cursor: pointer;
box-shadow: var(--ui-shadow-md);
transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
.ui-slider-track::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: var(--ui-shadow-lg);
}
.ui-slider-track::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--ui-primary);
cursor: pointer;
border: none;
box-shadow: var(--ui-shadow-md);
}
.ui-slider-value {
text-align: center;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-primary);
}
.ui-slider.ui-disabled {
opacity: 0.5;
}
.ui-slider.ui-disabled .ui-slider-track {
cursor: not-allowed;
}
/* ============================================
BADGE COMPONENT
============================================ */
.ui-badge {
display: inline-flex;
align-items: center;
padding: var(--ui-space-1) var(--ui-space-2);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
line-height: 1;
border-radius: var(--ui-radius-full);
}
/* Badge color — legacy class selectors set --_c */
.ui-badge-primary { --_c: var(--ui-primary); --_c-light: var(--ui-primary-light); --_c-dark: var(--ui-primary-dark); }
.ui-badge-secondary { --_c: var(--ui-secondary); --_c-light: var(--ui-secondary-light); --_c-dark: var(--ui-secondary-dark); }
.ui-badge-success { --_c: var(--ui-success); --_c-light: var(--ui-success-light); --_c-dark: var(--ui-success-dark); }
.ui-badge-danger { --_c: var(--ui-danger); --_c-light: var(--ui-danger-light); --_c-dark: var(--ui-danger-dark); }
.ui-badge-warning { --_c: var(--ui-warning); --_c-light: var(--ui-warning-light); --_c-dark: var(--ui-warning-dark); }
.ui-badge-info { --_c: var(--ui-info); --_c-light: var(--ui-info-light); --_c-dark: var(--ui-info-dark); }
.ui-badge-gray { --_c: var(--ui-gray-500); --_c-light: var(--ui-gray-100); --_c-dark: var(--ui-gray-700); }
/* Shared badge color rules */
.ui-badge[data-color], .ui-badge-primary, .ui-badge-secondary, .ui-badge-success,
.ui-badge-danger, .ui-badge-warning, .ui-badge-info, .ui-badge-gray {
background: var(--_c-light); color: var(--_c-dark);
}
/* Badge Solid Variant */
.ui-badge-solid[data-color], .ui-badge-solid.ui-badge-primary, .ui-badge-solid.ui-badge-secondary,
.ui-badge-solid.ui-badge-success, .ui-badge-solid.ui-badge-danger, .ui-badge-solid.ui-badge-warning,
.ui-badge-solid.ui-badge-info, .ui-badge-solid.ui-badge-gray {
background: var(--_c); color: var(--ui-white);
}
/* Badge Outline Variant */
.ui-badge-outline[data-color], .ui-badge-outline.ui-badge-primary, .ui-badge-outline.ui-badge-secondary,
.ui-badge-outline.ui-badge-success, .ui-badge-outline.ui-badge-danger, .ui-badge-outline.ui-badge-warning,
.ui-badge-outline.ui-badge-info {
background: transparent; border: 1px solid var(--_c); color: var(--_c);
}
/* Badge Sizes */
.ui-badge-lg {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
}
.ui-badge-sm {
padding: 2px var(--ui-space-1);
font-size: 10px;
}
/* ============================================
ALERT COMPONENT
============================================ */
.ui-alert {
display: flex;
align-items: flex-start;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-lg);
border: none;
}
.ui-alert-icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
}
.ui-alert-content {
flex: 1;
}
.ui-alert-title {
margin: 0 0 var(--ui-space-1);
font-weight: var(--ui-font-semibold);
}
.ui-alert-message {
margin: 0;
font-size: var(--ui-text-sm);
}
.ui-alert[data-color] {
background: var(--_c-light);
border-color: var(--_c);
color: var(--_c-dark);
}
/* ============================================
MODAL COMPONENT
============================================ */
/* Modal wrapper - only allow pointer events when modal is active */
.ui-modal-wrapper {
pointer-events: none;
}
.ui-modal-wrapper:has(.ui-active) {
pointer-events: auto;
}
.ui-modal-backdrop {
position: fixed;
inset: 0;
background: rgb(0 0 0 / 0.5);
z-index: var(--ui-z-modal-backdrop);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ui-transition-normal), visibility var(--ui-transition-normal);
}
.ui-modal-backdrop.ui-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ui-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
width: 90%;
max-width: 32rem;
max-height: 90vh;
background: var(--ui-white);
border-radius: var(--ui-radius-xl);
box-shadow: var(--ui-shadow-xl);
z-index: var(--ui-z-modal);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ui-transition-normal), visibility var(--ui-transition-normal), transform var(--ui-transition-normal);
overflow: hidden;
display: flex;
flex-direction: column;
}
.ui-modal.ui-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.ui-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-3);
box-shadow: 0 1px 0 var(--ui-gray-100);
}
.ui-modal-title {
margin: 0;
font-family: var(--ui-font-heading);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
}
.ui-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
background: transparent;
border: none;
border-radius: var(--ui-radius-md);
color: var(--ui-gray-500);
cursor: pointer;
transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
}
.ui-modal-close:hover {
background: var(--ui-gray-100);
color: var(--ui-gray-700);
}
.ui-modal-body {
flex: 1;
padding: var(--ui-space-2) var(--ui-space-3);
overflow-y: auto;
}
.ui-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
box-shadow: 0 -1px 0 var(--ui-gray-200);
background: var(--ui-gray-50);
}
/* Modal Sizes */
.ui-modal-sm { max-width: 24rem; }
.ui-modal-lg { max-width: 48rem; }
.ui-modal-xl { max-width: 64rem; }
.ui-modal-full { max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); }
/* ============================================
TABS COMPONENT
============================================ */
.ui-tabs {
display: flex;
flex-direction: column;
}
.ui-tabs-list {
display: flex;
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
margin: 0;
padding: 0;
list-style: none;
}
.ui-tabs-tab {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-600);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
}
.ui-tabs-tab:hover {
color: var(--ui-gray-900);
}
.ui-tabs-tab.ui-active {
color: var(--ui-primary);
border-bottom-color: var(--ui-primary);
}
.ui-tabs-panel {
display: none;
padding: var(--ui-space-4);
}
.ui-tabs-panel.ui-active {
display: block;
}
/* Responsive tabs */
@media (max-width: 640px) {
.ui-tabs-list {
flex-wrap: wrap;
gap: var(--ui-space-1);
}
.ui-tabs-tab {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
}
.ui-tabs-pills .ui-tabs-list {
flex-wrap: wrap;
}
}
/* Tabs Pills Variant */
.ui-tabs-pills .ui-tabs-list {
background: transparent;
border-bottom: none;
padding: var(--ui-space-2);
gap: var(--ui-space-2);
}
.ui-tabs-pills .ui-tabs-tab {
border-radius: var(--ui-radius-lg);
border-bottom: none;
margin-bottom: 0;
background: var(--ui-gray-100);
}
.ui-tabs-pills .ui-tabs-tab:hover {
background: var(--ui-gray-200);
color: var(--ui-gray-900);
}
.ui-tabs-pills .ui-tabs-tab.ui-active {
background: var(--ui-primary);
color: var(--ui-white);
border-bottom-color: transparent;
}
/* Tabs Boxed Variant */
.ui-tabs-boxed {
background: var(--ui-white);
border-radius: var(--ui-radius-xl);
box-shadow: var(--ui-shadow-md);
overflow: hidden;
}
.ui-tabs-boxed .ui-tabs-list {
background: var(--ui-gray-50);
}
.ui-tabs-boxed .ui-tabs-tab {
flex: 1;
justify-content: center;
}
.ui-tabs-boxed .ui-tabs-tab.ui-active {
background: var(--ui-white);
}
/* Tabs Underline Template */
.ui-tabs-underline .ui-tabs-list {
border-bottom: 2px solid var(--ui-gray-200);
}
.ui-tabs-underline .ui-tabs-tab {
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.ui-tabs-underline .ui-tabs-tab.ui-active {
border-bottom-color: var(--ui-primary);
}
/* Tabs Vertical Template */
.ui-tabs-vertical {
flex-direction: row;
}
.ui-tabs-vertical .ui-tabs-list {
flex-direction: column;
border-bottom: none;
border-right: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-tabs-vertical .ui-tabs-tab {
border-bottom: none;
border-right: 2px solid transparent;
margin-right: -1px;
justify-content: flex-start;
}
.ui-tabs-vertical .ui-tabs-tab.ui-active {
border-right-color: var(--ui-primary);
}
.ui-tabs-vertical .ui-tabs-panels {
flex: 1;
}
/* Tabs Sizes */
.ui-tabs-sm .ui-tabs-tab { padding: var(--ui-space-1) var(--ui-space-2); font-size: var(--ui-text-sm); }
.ui-tabs-lg .ui-tabs-tab { padding: var(--ui-space-3) var(--ui-space-5); font-size: var(--ui-text-lg); }
/* Tabs Colors */
.ui-tabs[data-color] .ui-tabs-tab.ui-active { color: var(--_c); border-color: var(--_c); }
.ui-tabs-pills[data-color] .ui-tabs-tab.ui-active { background: var(--_c); }
/* Tab Icon */
.ui-tabs-icon {
margin-right: var(--ui-space-2);
}
/* ============================================
ACCORDION COMPONENT
============================================ */
.ui-accordion {
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
overflow: hidden;
}
.ui-accordion-item {
box-shadow: none;
margin-bottom: 1px;
}
.ui-accordion-item:last-child {
box-shadow: none;
}
.ui-accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--ui-space-1) var(--ui-space-2);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
background: var(--ui-primary-700);
color: var(--ui-white);
border: none;
cursor: pointer;
transition: background var(--ui-transition-fast);
}
.ui-accordion-trigger:hover {
background: var(--ui-primary-800);
}
.ui-accordion-icon {
transition: transform var(--ui-transition-fast);
color: var(--ui-white);
}
.ui-accordion-item.ui-active .ui-accordion-icon {
transform: rotate(180deg);
}
.ui-accordion-content {
display: none;
padding: var(--ui-space-1) var(--ui-space-2);
background: var(--ui-white);
}
.ui-accordion-item.ui-active .ui-accordion-content {
display: block;
}
/* Accordion Styled Variant (with circular icon, active highlight) */
.ui-accordion-styled {
box-shadow: var(--ui-shadow-md);
}
.ui-accordion-styled .ui-accordion-trigger {
font-family: var(--ui-font-heading);
}
.ui-accordion-styled .ui-accordion-item.ui-active .ui-accordion-trigger {
background: var(--ui-primary-light);
color: var(--ui-primary);
}
.ui-accordion-styled .ui-accordion-icon {
width: 24px;
height: 24px;
border-radius: var(--ui-radius-full);
background: var(--ui-gray-100);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-xs);
}
.ui-accordion-styled .ui-accordion-item.ui-active .ui-accordion-icon {
background: var(--ui-primary);
color: var(--ui-white);
}
/* Accordion Minimal Variant */
.ui-accordion-minimal {
border: none;
background: transparent;
}
.ui-accordion-minimal .ui-accordion-item {
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-accordion-minimal .ui-accordion-trigger {
padding: var(--ui-space-4) 0;
background: transparent;
}
.ui-accordion-minimal .ui-accordion-trigger:hover {
background: transparent;
color: var(--ui-primary);
}
.ui-accordion-minimal .ui-accordion-content {
background: transparent;
padding: 0 0 var(--ui-space-4) 0;
}
/* Accordion Panel — lightweight standalone collapsible (uiAccordion.createPanel) */
.ui-accordion-panel {
margin-bottom: 0.3rem;
}
.ui-accordion-panel-header {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.25rem;
cursor: pointer;
border-radius: var(--ui-radius-sm);
transition: background 0.15s;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
user-select: none;
}
.ui-accordion-panel-header:hover {
background: var(--ui-gray-100);
}
.ui-accordion-panel-chevron {
font-size: 0.55rem;
width: 0.7rem;
text-align: center;
transition: transform 0.15s;
}
.ui-accordion-panel-label {
flex: 1;
min-width: 0;
}
.ui-accordion-panel-content {
padding-left: 0.25rem;
}
/* ============================================
DROPDOWN COMPONENT
============================================ */
.ui-dropdown {
position: relative;
display: inline-block;
}
.ui-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin-top: var(--ui-space-1);
padding: var(--ui-space-1);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-lg);
z-index: var(--ui-z-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(-0.5rem);
transition: opacity var(--ui-transition-fast), visibility var(--ui-transition-fast), transform var(--ui-transition-fast);
}
.ui-dropdown.ui-active .ui-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ui-dropdown-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
width: 100%;
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
background: transparent;
border: none;
border-radius: var(--ui-radius-md);
text-align: left;
cursor: pointer;
transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
}
.ui-dropdown-item:hover {
background: var(--ui-gray-100);
color: var(--ui-gray-900);
}
.ui-dropdown-divider {
height: 1px;
margin: var(--ui-space-1) 0;
background: var(--ui-gray-200);
}
/* ============================================
TOAST COMPONENT
============================================ */
.ui-toast-container {
position: fixed;
bottom: var(--ui-space-4);
right: var(--ui-space-4);
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
z-index: var(--ui-z-toast);
pointer-events: none;
}
.ui-toast {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
min-width: 20rem;
max-width: 28rem;
padding: var(--ui-space-4);
background: var(--ui-white);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-lg);
pointer-events: auto;
animation: ui-toast-in var(--ui-transition-normal) ease;
}
@keyframes ui-toast-in {
from {
opacity: 0;
transform: translateX(1rem);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ui-toast-icon {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
}
.ui-toast-content {
flex: 1;
}
.ui-toast-title {
margin: 0 0 var(--ui-space-1);
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-sm);
}
.ui-toast-message {
margin: 0;
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
}
.ui-toast-close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
background: transparent;
border: none;
border-radius: var(--ui-radius-sm);
color: var(--ui-gray-400);
cursor: pointer;
transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
}
.ui-toast-close:hover {
background: var(--ui-gray-100);
color: var(--ui-gray-600);
}
.ui-toast[data-color] .ui-toast-icon { color: var(--_c); }
/* ============================================
SPINNER COMPONENT
============================================ */
.ui-spinner {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border: var(--ui-border-width) solid var(--ui-gray-200);
border-top-color: var(--ui-primary);
border-radius: 50%;
animation: ui-spin 0.75s linear infinite;
}
@keyframes ui-spin {
to { transform: rotate(360deg); }
}
.ui-spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }
.ui-spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }
.ui-spinner-xl { width: 3rem; height: 3rem; border-width: 4px; }
/* Spinner Dots Style */
.ui-spinner-dots {
display: flex;
gap: 6px;
width: auto;
height: auto;
border: none;
animation: none;
}
.ui-spinner-dot {
width: 10px;
height: 10px;
background: var(--ui-primary);
border-radius: 50%;
animation: ui-bounce 1.4s ease-in-out infinite;
}
.ui-spinner-dot:nth-child(1) { animation-delay: 0s; }
.ui-spinner-dot:nth-child(2) { animation-delay: 0.16s; }
.ui-spinner-dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes ui-bounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
40% { transform: scale(1); opacity: 1; }
}
.ui-spinner-dots.ui-spinner-sm .ui-spinner-dot { width: 6px; height: 6px; }
.ui-spinner-dots.ui-spinner-lg .ui-spinner-dot { width: 12px; height: 12px; }
.ui-spinner-dots.ui-spinner-xl .ui-spinner-dot { width: 16px; height: 16px; }
/* Spinner Bars Style */
.ui-spinner-bars {
display: flex;
gap: 4px;
align-items: center;
height: 24px;
width: auto;
border: none;
animation: none;
}
.ui-spinner-bar {
width: 4px;
height: 100%;
background: var(--ui-primary);
border-radius: 2px;
animation: ui-bars 1s ease-in-out infinite;
}
.ui-spinner-bar:nth-child(1) { animation-delay: 0s; }
.ui-spinner-bar:nth-child(2) { animation-delay: 0.1s; }
.ui-spinner-bar:nth-child(3) { animation-delay: 0.2s; }
.ui-spinner-bar:nth-child(4) { animation-delay: 0.3s; }
@keyframes ui-bars {
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}
.ui-spinner-bars.ui-spinner-sm { height: 16px; }
.ui-spinner-bars.ui-spinner-sm .ui-spinner-bar { width: 3px; }
.ui-spinner-bars.ui-spinner-lg { height: 32px; }
.ui-spinner-bars.ui-spinner-lg .ui-spinner-bar { width: 5px; }
.ui-spinner-bars.ui-spinner-xl { height: 40px; }
.ui-spinner-bars.ui-spinner-xl .ui-spinner-bar { width: 6px; }
/* Color variants via [data-color] */
.ui-spinner[data-color] { border-top-color: var(--_c); }
.ui-spinner-dots[data-color] .ui-spinner-dot { background: var(--_c); }
.ui-spinner-bars[data-color] .ui-spinner-bar { background: var(--_c); }
/* Pulse spinner template */
.ui-spinner-pulse {
animation: ui-pulse 1.5s ease-in-out infinite;
border: none;
}
@keyframes ui-pulse {
0%, 100% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1); opacity: 1; }
}
/* Circular template (default behavior) */
.ui-spinner-circular {
border: 3px solid var(--ui-gray-200);
border-top-color: var(--ui-primary);
animation: ui-spin 0.8s linear infinite;
}
/* Extra small spinner */
.ui-spinner-xs { width: 0.75rem; height: 0.75rem; border-width: 2px; }
/* ============================================
PROGRESS COMPONENT
============================================ */
.ui-progress {
width: 100%;
height: 0.5rem;
background: var(--ui-gray-200);
border-radius: var(--ui-radius-full);
overflow: hidden;
position: relative;
}
.ui-progress-bar {
height: 100%;
background: var(--ui-primary);
border-radius: var(--ui-radius-full);
transition: width var(--ui-transition-normal);
}
.ui-progress[data-color] .ui-progress-bar { background: var(--_c); }
/* Progress sizes */
.ui-progress-sm { height: 0.25rem; }
.ui-progress-lg { height: 1rem; }
/* Progress label */
.ui-progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--ui-text-xs);
font-weight: 500;
color: var(--ui-gray-700);
}
.ui-progress-lg .ui-progress-label { font-size: var(--ui-text-sm); }
/* Striped progress bar */
.ui-progress-bar-striped {
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-size: 1rem 1rem;
}
.ui-progress-bar-animated {
animation: ui-progress-stripes 1s linear infinite;
}
@keyframes ui-progress-stripes {
0% { background-position: 1rem 0; }
100% { background-position: 0 0; }
}
/* Circular progress */
.ui-progress-template-circular {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: auto;
height: auto;
background: none;
overflow: visible;
}
.ui-progress-circular {
transform: rotate(-90deg);
}
.ui-progress-circle-bg {
fill: none;
stroke: var(--ui-gray-200);
}
.ui-progress-circle-bar {
fill: none;
stroke: var(--ui-primary);
stroke-linecap: round;
transition: stroke-dashoffset 0.3s ease;
}
.ui-progress-template-circular .ui-progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--ui-text-sm);
font-weight: 600;
}
.ui-progress-template-circular[data-color] .ui-progress-circle-bar { stroke: var(--_c); }
/* Steps progress */
.ui-progress-template-steps {
background: none;
overflow: visible;
height: auto;
}
.ui-progress-steps {
display: flex;
align-items: center;
justify-content: center;
}
.ui-progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-2);
}
.ui-progress-step-indicator {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-sm);
font-weight: 500;
background: var(--ui-gray-200);
color: var(--ui-gray-600);
transition: all 0.2s ease;
}
.ui-progress-step-current .ui-progress-step-indicator {
background: var(--ui-primary);
color: white;
}
.ui-progress-step-completed .ui-progress-step-indicator {
background: var(--ui-success);
color: white;
}
.ui-progress-step-label {
font-size: var(--ui-text-xs);
color: var(--ui-gray-600);
text-align: center;
max-width: 80px;
}
.ui-progress-step-connector {
width: 3rem;
height: 2px;
background: var(--ui-gray-200);
margin: 0 var(--ui-space-2);
}
.ui-progress-step-connector.completed {
background: var(--ui-success);
}
/* ============================================
TABLE COMPONENT
============================================ */
.ui-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ui-text-sm);
}
.ui-table th,
.ui-table td {
padding: var(--ui-space-1) var(--ui-space-2);
text-align: left;
box-shadow: 0 1px 0 var(--ui-gray-100);
}
.ui-table th {
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-700);
background: var(--ui-gray-50);
}
.ui-table tbody tr:hover {
background: var(--ui-gray-50);
}
.ui-table-striped tbody tr:nth-child(even) {
background: var(--ui-gray-50);
}
/* Table template variations */
.ui-table-compact .ui-table th,
.ui-table-compact .ui-table td {
padding: var(--ui-space-1) var(--ui-space-2);
font-size: var(--ui-text-sm);
}
.ui-table-comfortable .ui-table th,
.ui-table-comfortable .ui-table td {
padding: var(--ui-space-4) var(--ui-space-5);
}
.ui-table-borderless .ui-table,
.ui-table-borderless .ui-table th,
.ui-table-borderless .ui-table td {
border: none;
}
.ui-table-borderless .ui-table tbody tr:hover {
background: var(--ui-gray-50);
}
/* DataTables Integration Styles */
.ui-table-wrapper {
width: 100%;
}
.ui-dt-top {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
}
.ui-dt-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.ui-dt-buttons .dt-button {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-700);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
cursor: pointer;
transition: all var(--ui-transition-fast);
}
.ui-dt-buttons .dt-button:hover {
background: var(--ui-gray-50);
border-color: var(--ui-gray-400);
}
.ui-dt-buttons .dt-button:active {
background: var(--ui-gray-100);
}
.ui-dt-controls {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--ui-space-3);
}
.ui-dt-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--ui-space-4);
flex-wrap: wrap;
gap: var(--ui-space-3);
}
.ui-dt-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--ui-space-4);
flex-wrap: wrap;
gap: var(--ui-space-3);
}
/* Column visibility dropdown */
.dt-button-collection {
position: absolute;
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-lg);
padding: var(--ui-space-2);
z-index: var(--ui-z-dropdown);
min-width: 160px;
}
.dt-button-collection .dt-button {
display: flex;
align-items: center;
width: 100%;
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
background: transparent;
border: none;
border-radius: var(--ui-radius-md);
cursor: pointer;
transition: background var(--ui-transition-fast);
text-align: left;
}
.dt-button-collection .dt-button:hover {
background: var(--ui-gray-100);
}
.dt-button-collection .dt-button.active {
background: var(--ui-primary-light);
color: var(--ui-primary-dark);
}
.dt-button-collection .dt-button.active::before {
content: '✓';
margin-right: var(--ui-space-2);
color: var(--ui-primary);
}
/* Column reorder visual feedback */
.dt-colReorder-moving {
outline: 2px dashed var(--ui-primary);
outline-offset: -2px;
}
.dt-colReorder-moving-target {
background: var(--ui-primary-light) !important;
}
.ui-dt-length select {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
background: var(--ui-white);
cursor: pointer;
}
.ui-dt-search input {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
min-width: 200px;
transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
/* focus styles in consolidated rule above */
.ui-dt-info {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
}
.ui-dt-pagination {
display: flex;
gap: var(--ui-space-1);
}
/* DataTables default class overrides */
.dataTables_wrapper {
font-family: var(--ui-font-body);
}
.dataTables_length {
display: flex;
align-items: center;
gap: var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
}
.dataTables_length select {
padding: var(--ui-space-2) var(--ui-space-8) var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
background: var(--ui-white);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right var(--ui-space-2) center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
}
.dataTables_filter {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.dataTables_filter input {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
min-width: 200px;
transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}
/* focus styles in consolidated rule above */
.dataTables_info {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
padding: var(--ui-space-2) 0;
}
.dataTables_paginate {
display: flex;
gap: var(--ui-space-1);
}
.dataTables_paginate .paginate_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
cursor: pointer;
transition: all var(--ui-transition-fast);
}
.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
background: var(--ui-gray-50);
border-color: var(--ui-gray-400);
}
.dataTables_paginate .paginate_button.current {
background: var(--ui-primary);
border-color: var(--ui-primary);
color: var(--ui-white);
}
.dataTables_paginate .paginate_button.disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Sorting indicators */
.ui-table thead th.sorting,
.ui-table thead th.sorting_asc,
.ui-table thead th.sorting_desc {
cursor: pointer;
position: relative;
padding-right: var(--ui-space-8);
}
.ui-table thead th.sorting::after,
.ui-table thead th.sorting_asc::after,
.ui-table thead th.sorting_desc::after {
position: absolute;
right: var(--ui-space-3);
top: 50%;
transform: translateY(-50%);
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
}
.ui-table thead th.sorting::after {
content: '⇅';
}
.ui-table thead th.sorting_asc::after {
content: '↑';
color: var(--ui-primary);
}
.ui-table thead th.sorting_desc::after {
content: '↓';
color: var(--ui-primary);
}
/* Responsive table */
.ui-table.collapsed tbody td.child {
padding: var(--ui-space-4);
}
.ui-table.collapsed tbody td.child ul {
list-style: none;
padding: 0;
margin: 0;
}
.ui-table.collapsed tbody td.child ul li {
display: flex;
padding: var(--ui-space-2) 0;
border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.ui-table.collapsed tbody td.child ul li:last-child {
border-bottom: none;
}
.ui-table.collapsed tbody td.child .dtr-title {
font-weight: var(--ui-font-semibold);
min-width: 100px;
color: var(--ui-gray-700);
}
/* ============================================
FORM LAYOUT
============================================ */
.ui-form-group {
margin-bottom: var(--ui-space-2);
}
.ui-form-label {
display: block;
margin-bottom: 3px;
font-family: var(--ui-font-body);
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ui-form-hint {
margin-top: var(--ui-space-1);
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
}
.ui-form-error {
margin-top: var(--ui-space-1);
font-size: var(--ui-text-xs);
color: var(--ui-danger);
}
.ui-form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--ui-space-4);
}
/* Form Templates */
.ui-form-template-inline .ui-form-inline {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--ui-space-3);
}
.ui-form-template-inline .ui-form-group {
margin-bottom: 0;
}
.ui-form-template-horizontal .ui-form-group-horizontal {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
}
.ui-form-template-horizontal .ui-form-group-horizontal .ui-form-label {
flex: 0 0 var(--label-width, 30%);
padding-top: 0.5rem;
text-align: right;
margin-bottom: 0;
}
.ui-form-template-horizontal .ui-form-group-horizontal .ui-form-input-wrap {
flex: 1;
}
.ui-form-template-compact .ui-form-group {
margin-bottom: var(--ui-space-2);
}
/* Form Sections */
.ui-form-section {
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-4);
margin-bottom: var(--ui-space-4);
}
.ui-form-section-title {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
padding: 0 var(--ui-space-2);
margin-bottom: var(--ui-space-2);
}
.ui-form-section-description {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
margin-bottom: var(--ui-space-3);
}
/* Form Buttons */
.ui-form-buttons {
display: flex;
gap: var(--ui-space-3);
margin-top: var(--ui-space-4);
padding-top: var(--ui-space-4);
border-top: var(--ui-border-width) solid var(--ui-gray-200);
}
/* Wizard Form */
.ui-form-steps {
display: flex;
justify-content: center;
margin-bottom: var(--ui-space-6);
padding-bottom: var(--ui-space-4);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-form-step {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4);
color: var(--ui-gray-400);
position: relative;
}
.ui-form-step:not(:last-child)::after {
content: '';
position: absolute;
right: -1rem;
width: 2rem;
height: 2px;
background: var(--ui-gray-200);
}
.ui-form-step.completed::after {
background: var(--ui-primary);
}
.ui-form-step-num {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ui-gray-200);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
}
.ui-form-step.active .ui-form-step-num {
background: var(--ui-primary);
color: white;
}
.ui-form-step.completed .ui-form-step-num {
background: var(--ui-primary);
color: white;
}
.ui-form-step.completed .ui-form-step-num::before {
content: '✓';
}
.ui-form-step-title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
}
.ui-form-step.active,
.ui-form-step.completed {
color: var(--ui-gray-800);
}
.ui-form-steps-content {
min-height: 200px;
}
.ui-form-step-content {
display: none;
}
.ui-form-step-content.active {
display: block;
}
/* Form Size Variants */
.ui-form-sm .ui-form-label {
font-size: var(--ui-text-2xs);
}
.ui-form-sm .ui-form-group {
margin-bottom: var(--ui-space-1);
}
.ui-form-lg .ui-form-label {
font-size: var(--ui-text-xs);
text-transform: none;
letter-spacing: normal;
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-600);
}
.ui-form-lg .ui-form-group {
margin-bottom: var(--ui-space-5);
}
/* Form Variant Styles */
.ui-form-variant-soft {
background: var(--ui-gray-50);
padding: var(--ui-space-4);
border-radius: var(--ui-radius-lg);
}
.ui-form-variant-outlined {
border: var(--ui-border-width) solid var(--ui-gray-300);
padding: var(--ui-space-4);
border-radius: var(--ui-radius-lg);
}
/* ============================================
EDIT MODE STYLES
============================================ */
.ui-edit-mode .ui-component {
position: relative;
outline: 1px dashed transparent;
transition: outline-color var(--ui-transition-fast);
}
.ui-edit-mode .ui-component:hover {
outline-color: var(--ui-primary-light);
}
.ui-edit-mode .ui-component.ui-selected {
outline: 2px solid var(--ui-primary);
outline-offset: 2px;
}
.ui-edit-mode .ui-component.ui-selected::after {
content: attr(data-component-type);
position: absolute;
top: -1.5rem;
left: 0;
padding: var(--ui-space-1) var(--ui-space-2);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-white);
background: var(--ui-primary);
border-radius: var(--ui-radius-sm);
}
/* Properties Panel */
.ui-properties-panel {
position: fixed;
top: var(--ui-space-4);
right: var(--ui-space-4);
width: 20rem;
max-height: calc(100vh - 2rem);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-xl);
box-shadow: var(--ui-shadow-xl);
z-index: var(--ui-z-modal);
overflow: hidden;
display: flex;
flex-direction: column;
}
.ui-properties-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
background: var(--ui-gray-50);
}
.ui-properties-title {
margin: 0;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
}
.ui-properties-body {
flex: 1;
padding: var(--ui-space-4);
overflow-y: auto;
}
/* ============================================
BREADCRUMBS COMPONENT
============================================ */
.ui-breadcrumbs {
display: flex;
align-items: center;
gap: var(--ui-space-2);
font-size: var(--ui-text-sm);
flex-wrap: wrap;
}
/* Responsive breadcrumbs */
@media (max-width: 480px) {
.ui-breadcrumbs {
font-size: var(--ui-text-xs);
gap: var(--ui-space-1);
}
}
.ui-breadcrumb-item {
color: var(--ui-gray-500);
text-decoration: none;
transition: color 0.2s ease;
cursor: pointer;
}
.ui-breadcrumb-item:hover {
color: var(--ui-primary);
}
.ui-breadcrumb-item.active {
color: var(--ui-gray-800);
font-weight: var(--ui-font-medium);
cursor: default;
}
.ui-breadcrumb-separator {
color: var(--ui-gray-300);
user-select: none;
}
/* Breadcrumbs List */
.ui-breadcrumbs-list {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: var(--ui-space-2);
}
/* Breadcrumb Icon */
.ui-breadcrumb-icon {
margin-right: var(--ui-space-1);
}
/* Breadcrumbs Sizes */
.ui-breadcrumbs-sm { font-size: var(--ui-text-xs); }
.ui-breadcrumbs-lg { font-size: var(--ui-text-base); }
/* Breadcrumbs Arrows Template */
.ui-breadcrumbs-arrows .ui-breadcrumbs-list {
gap: 0;
}
.ui-breadcrumbs-arrows .ui-breadcrumb-item {
position: relative;
padding: var(--ui-space-2) var(--ui-space-4);
padding-left: var(--ui-space-6);
background: var(--ui-gray-100);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.ui-breadcrumbs-arrows .ui-breadcrumb-item:first-child {
padding-left: var(--ui-space-4);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.ui-breadcrumbs-arrows .ui-breadcrumb-item.active {
background: var(--ui-primary);
color: white;
}
.ui-breadcrumbs-arrows.ui-breadcrumbs-primary .ui-breadcrumb-item.active { background: var(--ui-primary); }
/* Breadcrumbs Pills Template */
.ui-breadcrumbs-pills .ui-breadcrumb-item {
padding: var(--ui-space-1) var(--ui-space-3);
background: var(--ui-gray-100);
border-radius: var(--ui-radius-full);
}
.ui-breadcrumbs-pills .ui-breadcrumb-item.active {
background: var(--ui-gray-200);
}
.ui-breadcrumbs-pills.ui-breadcrumbs-primary .ui-breadcrumb-item.active {
background: var(--ui-primary);
color: white;
}
/* Breadcrumbs Dots Template */
.ui-breadcrumbs-dots .ui-breadcrumb-separator {
font-size: 0.5em;
}
/* ============================================
NAVBAR COMPONENT
============================================ */
.ui-navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-4);
background: var(--ui-white);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-sm);
}
.ui-navbar-brand {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-primary);
text-decoration: none;
}
.ui-navbar-nav {
display: flex;
align-items: center;
gap: var(--ui-space-2);
list-style: none;
margin: 0;
padding: 0;
}
.ui-nav-link {
padding: var(--ui-space-2) var(--ui-space-4);
color: var(--ui-gray-600);
text-decoration: none;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
border-radius: var(--ui-radius-md);
transition: all 0.2s ease;
cursor: pointer;
}
.ui-nav-link:hover {
background: var(--ui-gray-100);
color: var(--ui-gray-800);
}
.ui-nav-link.active {
background: var(--ui-primary-light);
color: var(--ui-primary);
}
.ui-navbar-actions {
display: flex;
align-items: center;
gap: var(--ui-space-3);
}
/* Responsive navbar */
@media (max-width: 768px) {
.ui-navbar {
flex-wrap: wrap;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
}
.ui-navbar-nav {
flex-wrap: wrap;
justify-content: center;
gap: var(--ui-space-1);
}
.ui-nav-link {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
}
}
@media (max-width: 480px) {
.ui-navbar {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.ui-navbar-nav {
width: 100%;
justify-content: center;
order: 3;
margin-top: var(--ui-space-2);
padding-top: var(--ui-space-2);
border-top: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-navbar-actions {
justify-content: center;
}
}
/* Navbar Container */
.ui-navbar-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Navbar Brand */
.ui-navbar-brand {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-navbar-logo {
height: 32px;
width: auto;
}
.ui-navbar-logo img {
height: 100%;
width: auto;
}
/* Nav Icon */
.ui-nav-icon {
margin-right: var(--ui-space-1);
}
/* Navbar Centered Template */
.ui-navbar-centered .ui-navbar-container {
justify-content: center;
}
.ui-navbar-centered .ui-navbar-nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.ui-navbar-centered .ui-navbar-brand {
position: absolute;
left: var(--ui-space-6);
}
.ui-navbar-centered .ui-navbar-actions {
position: absolute;
right: var(--ui-space-6);
}
/* Navbar Split Template */
.ui-navbar-split .ui-navbar-nav {
flex: 1;
justify-content: center;
}
/* Navbar Minimal Template */
.ui-navbar-minimal {
box-shadow: none;
background: transparent;
padding: var(--ui-space-3) 0;
}
.ui-navbar-minimal .ui-navbar-container {
gap: var(--ui-space-6);
}
/* Navbar Transparent Template */
.ui-navbar-transparent {
background: transparent;
box-shadow: none;
}
/* Navbar Dark */
.ui-navbar-dark {
background: var(--ui-gray-900);
}
.ui-navbar-dark .ui-navbar-brand,
.ui-navbar-dark .ui-navbar-brand-text {
color: white;
}
.ui-navbar-dark .ui-nav-link {
color: var(--ui-gray-300);
}
.ui-navbar-dark .ui-nav-link:hover {
background: var(--ui-gray-800);
color: white;
}
.ui-navbar-dark .ui-nav-link.active {
background: var(--ui-gray-700);
color: white;
}
/* Navbar Primary */
.ui-navbar-primary {
background: var(--ui-primary);
}
.ui-navbar-primary .ui-navbar-brand,
.ui-navbar-primary .ui-navbar-brand-text,
.ui-navbar-primary .ui-nav-link {
color: white;
}
.ui-navbar-primary .ui-nav-link:hover {
background: rgba(255,255,255,0.1);
}
.ui-navbar-primary .ui-nav-link.active {
background: rgba(255,255,255,0.2);
}
/* Navbar Sticky */
.ui-navbar-sticky {
position: sticky;
top: 0;
z-index: 100;
}
/* ============================================
SIDEBAR COMPONENT
============================================ */
.ui-sidebar {
width: 220px;
background: var(--ui-white);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-md);
padding: var(--ui-space-4) 0;
}
.ui-sidebar-header {
padding: var(--ui-space-2) var(--ui-space-5) var(--ui-space-4);
border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
margin-bottom: var(--ui-space-2);
}
.ui-sidebar-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.ui-sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.ui-sidebar-item {
margin: 2px var(--ui-space-2);
}
.ui-sidebar-link {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
color: var(--ui-gray-600);
text-decoration: none;
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
border-radius: var(--ui-radius-md);
transition: all 0.2s ease;
cursor: pointer;
}
.ui-sidebar-link:hover {
background: var(--ui-gray-100);
color: var(--ui-gray-800);
}
.ui-sidebar-link.active {
background: var(--ui-primary-light);
color: var(--ui-primary);
}
.ui-sidebar-icon {
width: 20px;
text-align: center;
flex-shrink: 0;
}
.ui-sidebar-badge {
margin-left: auto;
padding: 2px var(--ui-space-2);
background: var(--ui-secondary);
color: var(--ui-white);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
border-radius: 10px;
}
.ui-sidebar-section {
padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-2);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Sidebar Label */
.ui-sidebar-label {
flex: 1;
}
/* Sidebar Toggle */
.ui-sidebar-toggle {
background: none;
border: none;
cursor: pointer;
color: var(--ui-gray-500);
padding: var(--ui-space-1);
}
/* Sidebar Header with toggle */
.ui-sidebar-collapsible .ui-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Sidebar Compact Template */
.ui-sidebar-compact .ui-sidebar-link {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
}
.ui-sidebar-compact .ui-sidebar-icon {
width: 16px;
}
/* Sidebar Icons-Only Template */
.ui-sidebar-icons-only {
padding: var(--ui-space-3) 0;
}
.ui-sidebar-icons-only .ui-sidebar-link {
justify-content: center;
padding: var(--ui-space-3);
}
.ui-sidebar-icons-only .ui-sidebar-icon {
width: auto;
font-size: var(--ui-text-lg);
}
/* Sidebar Floating Template */
.ui-sidebar-floating {
position: fixed;
top: var(--ui-space-4);
left: var(--ui-space-4);
height: calc(100vh - var(--ui-space-8));
box-shadow: var(--ui-shadow-xl);
z-index: 50;
}
/* Sidebar Dark */
.ui-sidebar-dark {
background: var(--ui-gray-900);
}
.ui-sidebar-dark .ui-sidebar-title,
.ui-sidebar-dark .ui-sidebar-section {
color: var(--ui-gray-500);
}
.ui-sidebar-dark .ui-sidebar-link {
color: var(--ui-gray-300);
}
.ui-sidebar-dark .ui-sidebar-link:hover {
background: var(--ui-gray-800);
color: white;
}
.ui-sidebar-dark .ui-sidebar-link.active {
background: var(--ui-gray-700);
color: white;
}
.ui-sidebar-dark .ui-sidebar-header {
border-color: var(--ui-gray-700);
}
/* Sidebar Primary */
.ui-sidebar-primary {
background: var(--ui-primary);
}
.ui-sidebar-primary .ui-sidebar-title,
.ui-sidebar-primary .ui-sidebar-section,
.ui-sidebar-primary .ui-sidebar-link {
color: rgba(255,255,255,0.8);
}
.ui-sidebar-primary .ui-sidebar-link:hover {
background: rgba(255,255,255,0.1);
color: white;
}
.ui-sidebar-primary .ui-sidebar-link.active {
background: rgba(255,255,255,0.2);
color: white;
}
.ui-sidebar-primary .ui-sidebar-header {
border-color: rgba(255,255,255,0.1);
}
/* Sidebar Collapsed */
.ui-sidebar.collapsed {
width: 60px !important;
}
.ui-sidebar.collapsed .ui-sidebar-label,
.ui-sidebar.collapsed .ui-sidebar-badge,
.ui-sidebar.collapsed .ui-sidebar-section,
.ui-sidebar.collapsed .ui-sidebar-title {
display: none;
}
.ui-sidebar.collapsed .ui-sidebar-link {
justify-content: center;
padding: var(--ui-space-3);
}
/* ============================================
PAGINATION COMPONENT
============================================ */
.ui-pagination {
display: flex;
align-items: center;
gap: var(--ui-space-1);
}
.ui-page-item {
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-600);
cursor: pointer;
transition: all 0.2s ease;
border: none;
background: transparent;
user-select: none;
}
.ui-page-item:hover:not(.disabled):not(.active) {
background: var(--ui-gray-100);
color: var(--ui-gray-800);
}
.ui-page-item.active {
background: var(--ui-primary);
color: var(--ui-white);
}
.ui-page-item.disabled {
color: var(--ui-gray-300);
cursor: not-allowed;
}
.ui-page-ellipsis {
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ui-gray-400);
}
/* Responsive pagination */
@media (max-width: 640px) {
.ui-pagination {
flex-wrap: wrap;
justify-content: center;
}
.ui-page-item,
.ui-page-ellipsis {
min-width: 36px;
height: 36px;
font-size: var(--ui-text-xs);
}
}
@media (max-width: 480px) {
.ui-page-item,
.ui-page-ellipsis {
min-width: 32px;
height: 32px;
}
}
/* Pagination Sizes */
.ui-pagination-sm .ui-page-item { min-width: 32px; height: 32px; font-size: var(--ui-text-xs); }
.ui-pagination-lg .ui-page-item { min-width: 48px; height: 48px; font-size: var(--ui-text-base); }
/* Pagination Colors */
.ui-pagination-secondary .ui-page-item.active { background: var(--ui-secondary); }
.ui-pagination-gray .ui-page-item.active { background: var(--ui-gray-600); }
/* Pagination Simple Template */
.ui-pagination-simple {
gap: var(--ui-space-4);
}
.ui-pagination-simple .ui-page-prev,
.ui-pagination-simple .ui-page-next {
min-width: auto;
padding: 0 var(--ui-space-3);
}
.ui-pagination-simple .ui-pagination-info {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
}
/* Pagination Compact Template */
.ui-pagination-compact {
gap: var(--ui-space-2);
background: var(--ui-gray-100);
padding: var(--ui-space-1);
border-radius: var(--ui-radius-md);
}
.ui-pagination-compact .ui-page-item {
min-width: 32px;
height: 32px;
}
.ui-pagination-compact .ui-pagination-info {
padding: 0 var(--ui-space-2);
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
}
/* Pagination Load More Template */
.ui-pagination-load-more {
justify-content: center;
}
.ui-pagination-load-more .ui-pagination-load-more:disabled {
opacity: 0.5;
}
/* ============================================
SKELETON LOADER COMPONENT
============================================ */
.ui-skeleton {
background: linear-gradient(90deg, var(--ui-gray-200) 25%, var(--ui-gray-100) 50%, var(--ui-gray-200) 75%);
background-size: 200% 100%;
animation: ui-shimmer 1.5s infinite;
border-radius: var(--ui-radius-sm);
}
@keyframes ui-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ui-skeleton-text {
height: 16px;
margin-bottom: var(--ui-space-2);
}
.ui-skeleton-text:last-child {
width: 60%;
}
.ui-skeleton-title {
height: 24px;
width: 40%;
margin-bottom: var(--ui-space-4);
}
.ui-skeleton-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
}
.ui-skeleton-image {
width: 100%;
height: 160px;
border-radius: var(--ui-radius-md);
}
.ui-skeleton-button {
height: 40px;
width: 120px;
border-radius: var(--ui-radius-md);
}
.ui-skeleton-card {
background: var(--ui-white);
border-radius: var(--ui-radius-lg);
padding: var(--ui-space-5);
box-shadow: var(--ui-shadow-md);
}
/* ============================================
EMPTY STATE COMPONENT
============================================ */
.ui-empty-state {
text-align: center;
padding: var(--ui-space-6) var(--ui-space-4);
background: var(--ui-white);
border-radius: var(--ui-radius-lg);
border: 1px dashed var(--ui-gray-200);
}
.ui-empty-state-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--ui-space-3);
background: var(--ui-gray-100);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.ui-empty-state-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
margin: 0 0 var(--ui-space-1);
}
.ui-empty-state-desc {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
max-width: 300px;
margin: 0 auto var(--ui-space-3);
line-height: 1.6;
}
.ui-empty-state-action {
margin-top: var(--ui-space-4);
}
/* ============================================
TIMELINE COMPONENT
============================================ */
.ui-timeline {
position: relative;
padding-left: 24px;
}
.ui-timeline::before {
content: '';
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 2px;
background: var(--ui-gray-200);
}
.ui-timeline-item {
position: relative;
padding-bottom: var(--ui-space-4);
}
.ui-timeline-item:last-child {
padding-bottom: 0;
}
.ui-timeline-marker {
position: absolute;
left: -24px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ui-white);
border: 2px solid var(--ui-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
}
.ui-timeline-marker.completed {
background: var(--ui-primary);
color: var(--ui-white);
}
.ui-timeline-marker.secondary {
border-color: var(--ui-secondary);
}
.ui-timeline-marker.secondary.completed {
background: var(--ui-secondary);
}
.ui-timeline-content {
background: var(--ui-white);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-2);
box-shadow: var(--ui-shadow-sm);
border: var(--ui-border-width) solid var(--ui-gray-100);
}
.ui-timeline-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
margin: 0 0 var(--ui-space-1);
}
.ui-timeline-time {
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
margin-bottom: var(--ui-space-2);
}
.ui-timeline-desc {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
line-height: 1.6;
margin: 0;
}
/* ============================================
STEPPER / WIZARD COMPONENT
============================================ */
.ui-stepper {
display: flex;
justify-content: space-between;
position: relative;
}
.ui-stepper::before {
content: '';
position: absolute;
top: 14px;
left: 28px;
right: 28px;
height: 2px;
background: var(--ui-gray-200);
}
.ui-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.ui-step-indicator {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-300);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ui-font-heading);
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
transition: all 0.2s ease;
}
.ui-step.active .ui-step-indicator {
border-color: var(--ui-primary);
color: var(--ui-primary);
}
.ui-step.completed .ui-step-indicator {
background: var(--ui-primary);
border-color: var(--ui-primary);
color: var(--ui-white);
}
.ui-step-label {
margin-top: var(--ui-space-1);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-400);
text-align: center;
}
.ui-step.active .ui-step-label {
color: var(--ui-primary);
}
.ui-step.completed .ui-step-label {
color: var(--ui-gray-700);
}
/* Vertical Stepper */
.ui-stepper-vertical {
flex-direction: column;
gap: 0;
}
.ui-stepper-vertical::before {
top: 20px;
bottom: 20px;
left: 19px;
right: auto;
width: 2px;
height: auto;
}
.ui-stepper-vertical .ui-step {
flex-direction: row;
align-items: flex-start;
gap: var(--ui-space-4);
padding-bottom: var(--ui-space-8);
}
.ui-stepper-vertical .ui-step:last-child {
padding-bottom: 0;
}
.ui-stepper-vertical .ui-step-label {
margin-top: 0;
text-align: left;
}
.ui-stepper-vertical .ui-step-desc {
font-size: var(--ui-text-sm);
color: var(--ui-gray-500);
margin-top: var(--ui-space-1);
}
/* Responsive stepper - force vertical on mobile */
@media (max-width: 640px) {
.ui-stepper:not(.ui-stepper-vertical) {
flex-direction: column;
gap: 0;
}
.ui-stepper:not(.ui-stepper-vertical)::before {
top: 20px;
bottom: 20px;
left: 19px;
right: auto;
width: 2px;
height: auto;
}
.ui-stepper:not(.ui-stepper-vertical) .ui-step {
flex-direction: row;
align-items: flex-start;
gap: var(--ui-space-4);
padding-bottom: var(--ui-space-6);
}
.ui-stepper:not(.ui-stepper-vertical) .ui-step:last-child {
padding-bottom: 0;
}
.ui-stepper:not(.ui-stepper-vertical) .ui-step-label {
margin-top: 0;
text-align: left;
}
}
/* Phase 10 Template Styles */
/* Skeleton Templates */
.ui-skeleton-text .ui-skeleton { height: 16px; margin-bottom: var(--ui-space-2); }
.ui-skeleton-text .ui-skeleton:last-child { width: 60%; }
.ui-skeleton-avatar { display: flex; gap: var(--ui-space-4); align-items: flex-start; }
.ui-skeleton-avatar .ui-skeleton-avatar-circle { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.ui-skeleton-avatar.size-sm .ui-skeleton-avatar-circle { width: 32px; height: 32px; }
.ui-skeleton-avatar.size-lg .ui-skeleton-avatar-circle { width: 64px; height: 64px; }
.ui-skeleton-card { background: var(--ui-white); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); box-shadow: var(--ui-shadow-sm); border: var(--ui-border-width) solid var(--ui-gray-100); }
.ui-skeleton-card .ui-skeleton-card-image { height: 160px; margin: calc(-1 * var(--ui-space-4)); margin-bottom: var(--ui-space-4); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }
.ui-skeleton-table { width: 100%; }
.ui-skeleton-table .ui-skeleton-row { display: flex; gap: var(--ui-space-3); margin-bottom: var(--ui-space-3); }
.ui-skeleton-table .ui-skeleton-row .ui-skeleton { flex: 1; height: 20px; }
.ui-skeleton-table .ui-skeleton-row:first-child .ui-skeleton { height: 24px; background: var(--ui-gray-300); }
.ui-skeleton-list .ui-skeleton-list-item { display: flex; gap: var(--ui-space-3); margin-bottom: var(--ui-space-3); align-items: center; }
.ui-skeleton-list .ui-skeleton-list-icon { width: 24px; height: 24px; border-radius: var(--ui-radius-sm); flex-shrink: 0; }
.ui-skeleton-list .ui-skeleton-list-text { flex: 1; height: 16px; }
/* EmptyState Templates */
.ui-empty-state-compact { padding: var(--ui-space-6) var(--ui-space-4); }
.ui-empty-state-compact .ui-empty-state-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: var(--ui-space-3); }
.ui-empty-state-compact .ui-empty-state-title { font-size: var(--ui-text-base); }
.ui-empty-state-illustrated { border: none; background: transparent; }
.ui-empty-state-illustrated .ui-empty-state-image { max-width: 200px; max-height: 160px; margin: 0 auto var(--ui-space-5); }
.ui-empty-state-illustrated .ui-empty-state-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Timeline Templates */
.ui-timeline-compact { padding-left: 24px; }
.ui-timeline-compact::before { left: 7px; }
.ui-timeline-compact .ui-timeline-marker { width: 16px; height: 16px; left: -24px; font-size: 8px; border-width: 2px; }
.ui-timeline-compact .ui-timeline-content { padding: var(--ui-space-2) var(--ui-space-3); }
.ui-timeline-compact .ui-timeline-title { font-size: var(--ui-text-sm); }
.ui-timeline-compact .ui-timeline-item { padding-bottom: var(--ui-space-4); }
.ui-timeline-detailed .ui-timeline-marker { width: 32px; height: 32px; font-size: 14px; left: -40px; }
.ui-timeline-detailed { padding-left: 48px; }
.ui-timeline-detailed::before { left: 15px; }
.ui-timeline-detailed .ui-timeline-marker i { font-size: 14px; color: var(--ui-primary); }
.ui-timeline-detailed .ui-timeline-marker.completed i { color: var(--ui-white); }
.ui-timeline-alternating { padding-left: 50%; }
.ui-timeline-alternating::before { left: calc(50% - 1px); }
.ui-timeline-alternating .ui-timeline-marker { left: calc(-50% - 12px); }
.ui-timeline-alternating .ui-timeline-item:nth-child(even) { padding-left: calc(50% + 32px); padding-right: 0; margin-left: calc(-50%); }
.ui-timeline-alternating .ui-timeline-item:nth-child(even) .ui-timeline-marker { left: auto; right: calc(50% - 12px); }
.ui-timeline-alternating .ui-timeline-item:nth-child(odd) .ui-timeline-content { text-align: right; }
/* Stepper Templates */
.ui-stepper-compact .ui-step-indicator { width: 28px; height: 28px; font-size: var(--ui-text-xs); }
.ui-stepper-compact::before { top: 14px; }
.ui-stepper-compact .ui-step-label { font-size: var(--ui-text-xs); margin-top: var(--ui-space-2); }
.ui-stepper-dots .ui-step-indicator { width: 12px; height: 12px; background: var(--ui-gray-300); border: none; }
.ui-stepper-dots::before { top: 6px; }
.ui-stepper-dots .ui-step.active .ui-step-indicator { background: var(--ui-primary); transform: scale(1.3); }
.ui-stepper-dots .ui-step.completed .ui-step-indicator { background: var(--ui-primary); }
.ui-stepper-dots .ui-step-label-container { margin-top: var(--ui-space-3); }
/* ============================================
TOOLTIP COMPONENT
============================================ */
.ui-tooltip-wrapper {
position: relative;
display: inline-block;
}
.ui-tooltip {
position: absolute;
z-index: var(--ui-z-tooltip);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-white);
background: var(--ui-gray-900);
border-radius: var(--ui-radius-md);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.ui-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
.ui-tooltip::after {
content: '';
position: absolute;
border: 5px solid transparent;
}
/* Tooltip positions */
.ui-tooltip-top {
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
margin-bottom: var(--ui-space-2);
}
.ui-tooltip-top.visible {
transform: translateX(-50%) translateY(0);
}
.ui-tooltip-top::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: var(--ui-gray-900);
}
.ui-tooltip-bottom {
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
margin-top: var(--ui-space-2);
}
.ui-tooltip-bottom.visible {
transform: translateX(-50%) translateY(0);
}
.ui-tooltip-bottom::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom-color: var(--ui-gray-900);
}
.ui-tooltip-left {
right: 100%;
top: 50%;
transform: translateY(-50%) translateX(-8px);
margin-right: var(--ui-space-2);
}
.ui-tooltip-left.visible {
transform: translateY(-50%) translateX(0);
}
.ui-tooltip-left::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-left-color: var(--ui-gray-900);
}
.ui-tooltip-right {
left: 100%;
top: 50%;
transform: translateY(-50%) translateX(8px);
margin-left: var(--ui-space-2);
}
.ui-tooltip-right.visible {
transform: translateY(-50%) translateX(0);
}
.ui-tooltip-right::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-right-color: var(--ui-gray-900);
}
/* Tooltip template variations */
.ui-tooltip-rich {
padding: var(--ui-space-3) var(--ui-space-4);
text-align: left;
}
.ui-tooltip-rich .ui-tooltip-icon {
margin-right: var(--ui-space-2);
font-size: var(--ui-text-lg);
}
.ui-tooltip-rich .ui-tooltip-title {
font-weight: var(--ui-font-semibold);
margin-bottom: var(--ui-space-1);
}
.ui-tooltip-rich .ui-tooltip-text {
font-size: var(--ui-text-sm);
color: var(--ui-gray-300);
}
.ui-tooltip-light {
background: var(--ui-white);
color: var(--ui-gray-900);
border: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-tooltip-light::after {
border-color: transparent;
}
.ui-tooltip-light.ui-tooltip-top::after {
border-top-color: var(--ui-white);
}
.ui-tooltip-light.ui-tooltip-bottom::after {
border-bottom-color: var(--ui-white);
}
/* ============================================
POPOVER COMPONENT
============================================ */
.ui-popover-wrapper {
position: relative;
display: inline-block;
}
.ui-popover {
position: absolute;
z-index: var(--ui-z-popover);
min-width: 200px;
max-width: 320px;
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-lg);
opacity: 0;
transform: scale(0.95);
transition: opacity 0.15s ease, transform 0.15s ease;
pointer-events: none;
}
.ui-popover.visible {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.ui-popover-header {
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.ui-popover-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
margin: 0;
}
.ui-popover-body {
padding: var(--ui-space-3) var(--ui-space-4);
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
line-height: var(--ui-leading-relaxed);
}
.ui-popover-footer {
padding: var(--ui-space-3) var(--ui-space-4);
border-top: var(--ui-border-width) solid var(--ui-gray-100);
display: flex;
justify-content: flex-end;
gap: var(--ui-space-2);
}
.ui-popover::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-right: none;
border-bottom: none;
}
/* Popover positions */
.ui-popover-top {
bottom: 100%;
left: 50%;
transform: translateX(-50%) scale(0.95);
margin-bottom: var(--ui-space-3);
}
.ui-popover-top.visible {
transform: translateX(-50%) scale(1);
}
.ui-popover-top::before {
bottom: -7px;
left: 50%;
transform: translateX(-50%) rotate(-135deg);
}
.ui-popover-bottom {
top: 100%;
left: 50%;
transform: translateX(-50%) scale(0.95);
margin-top: var(--ui-space-3);
}
.ui-popover-bottom.visible {
transform: translateX(-50%) scale(1);
}
.ui-popover-bottom::before {
top: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
/* Popover left/right positions */
.ui-popover-left {
right: 100%;
top: 50%;
transform: translateY(-50%) scale(0.95);
margin-right: var(--ui-space-3);
}
.ui-popover-left.visible {
transform: translateY(-50%) scale(1);
}
.ui-popover-left::before {
right: -7px;
top: 50%;
transform: translateY(-50%) rotate(135deg);
}
.ui-popover-right {
left: 100%;
top: 50%;
transform: translateY(-50%) scale(0.95);
margin-left: var(--ui-space-3);
}
.ui-popover-right.visible {
transform: translateY(-50%) scale(1);
}
.ui-popover-right::before {
left: -7px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* Popover menu template */
.ui-popover-menu {
padding: var(--ui-space-2) 0;
}
.ui-popover-menu-item {
display: flex;
align-items: center;
padding: var(--ui-space-2) var(--ui-space-4);
cursor: pointer;
transition: background-color 0.15s ease;
}
.ui-popover-menu-item:hover {
background: var(--ui-gray-50);
}
.ui-popover-menu-icon {
margin-right: var(--ui-space-3);
color: var(--ui-gray-500);
width: 16px;
text-align: center;
}
.ui-popover-divider {
height: 1px;
background: var(--ui-gray-100);
margin: var(--ui-space-2) 0;
}
/* Popover confirm template */
.ui-popover-confirm .ui-popover-body {
padding: var(--ui-space-4);
}
.ui-popover-confirm .ui-popover-footer {
padding: var(--ui-space-3) var(--ui-space-4);
}
/* ============================================
DRAWER COMPONENT
============================================ */
.ui-drawer-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(0 0 0 / calc(var(--hp-shadow-intensity) * 5));
z-index: var(--ui-z-modal);
opacity: 0;
visibility: hidden;
transition: opacity var(--ui-transition-normal), visibility var(--ui-transition-normal);
}
.ui-drawer-backdrop.visible {
opacity: 1;
visibility: visible;
}
.ui-drawer {
position: fixed;
top: 0;
bottom: 0;
z-index: calc(var(--ui-z-modal) + 1);
background: var(--ui-white);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.ui-drawer-left {
left: 0;
transform: translateX(-100%);
}
.ui-drawer-right {
right: 0;
transform: translateX(100%);
}
.ui-drawer.visible {
transform: translateX(0);
}
/* Drawer sizes */
.ui-drawer-sm {
width: 280px;
}
.ui-drawer-md {
width: 400px;
}
.ui-drawer-lg {
width: 560px;
}
.ui-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-4) var(--ui-space-5);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-drawer-title {
font-family: var(--ui-font-heading);
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
margin: 0;
}
.ui-drawer-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--ui-radius-md);
cursor: pointer;
color: var(--ui-gray-500);
font-size: var(--ui-text-lg);
transition: background 0.15s ease, color 0.15s ease;
}
.ui-drawer-close:hover {
background: var(--ui-gray-100);
color: var(--ui-gray-700);
}
.ui-drawer-body {
flex: 1;
padding: var(--ui-space-5);
overflow-y: auto;
}
.ui-drawer-footer {
padding: var(--ui-space-4) var(--ui-space-5);
border-top: var(--ui-border-width) solid var(--ui-gray-200);
display: flex;
justify-content: flex-end;
gap: var(--ui-space-3);
}
/* Drawer template variations */
.ui-drawer-mini .ui-drawer-header {
padding: var(--ui-space-3) var(--ui-space-4);
}
.ui-drawer-mini .ui-drawer-body {
padding: var(--ui-space-4);
}
.ui-drawer-full {
width: 100% !important;
max-width: 100% !important;
}
.ui-drawer-panel {
box-shadow: var(--ui-shadow-sm);
}
/* Drawer top/bottom positions */
.ui-drawer-top {
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
max-height: 80vh;
transform: translateY(-100%);
}
.ui-drawer-top.visible {
transform: translateY(0);
}
.ui-drawer-bottom {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
max-height: 80vh;
transform: translateY(100%);
}
.ui-drawer-bottom.visible {
transform: translateY(0);
}
/* Drawer XL and full sizes */
.ui-drawer-xl {
width: 600px;
}
.ui-drawer-backdrop-hidden {
background: transparent;
pointer-events: none;
}
/* ============================================
AVATAR COMPONENT
============================================ */
.ui-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ui-radius-full);
background: var(--ui-primary-light);
color: var(--ui-primary);
font-weight: var(--ui-font-semibold);
overflow: hidden;
flex-shrink: 0;
}
.ui-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Avatar sizes */
.ui-avatar-xs {
width: 24px;
height: 24px;
font-size: var(--ui-text-xs);
}
.ui-avatar-sm {
width: 32px;
height: 32px;
font-size: var(--ui-text-sm);
}
.ui-avatar-md {
width: 40px;
height: 40px;
font-size: var(--ui-text-base);
}
.ui-avatar-lg {
width: 48px;
height: 48px;
font-size: var(--ui-text-lg);
}
.ui-avatar-xl {
width: 64px;
height: 64px;
font-size: var(--ui-text-xl);
}
/* Avatar variants — named color classes */
.ui-avatar[data-color] { background: var(--_c-light); color: var(--_c); }
.ui-avatar-primary { background: var(--ui-primary-700, #1d4ed8); color: var(--ui-white, #fff); }
.ui-avatar-secondary { background: var(--ui-secondary-700, #6d28d9); color: var(--ui-white, #fff); }
.ui-avatar-accent { background: var(--ui-accent-700, #047857); color: var(--ui-white, #fff); }
.ui-avatar-success { background: var(--ui-success, #16a34a); color: var(--ui-white, #fff); }
.ui-avatar-warning { background: var(--ui-warning, #d97706); color: var(--ui-white, #fff); }
.ui-avatar-info { background: var(--ui-info, #2563eb); color: var(--ui-white, #fff); }
.ui-avatar-danger { background: var(--ui-danger, #dc2626); color: var(--ui-white, #fff); }
/* Avatar Group */
.ui-avatar-group {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.ui-avatar-group .ui-avatar {
border: 2px solid var(--ui-white);
margin-left: -8px;
}
.ui-avatar-group .ui-avatar:last-child {
margin-left: 0;
}
.ui-avatar-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--ui-radius-full);
background: var(--ui-gray-200);
color: var(--ui-gray-600);
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-xs);
border: 2px solid var(--ui-white);
margin-left: -8px;
}
/* Avatar template variations */
.ui-avatar-square {
border-radius: var(--ui-radius-md);
}
.ui-avatar-rounded {
border-radius: var(--ui-radius-lg);
}
/* Avatar group template variations */
.ui-avatar-group-grid {
display: grid;
gap: var(--ui-space-2);
flex-direction: row;
}
.ui-avatar-group-grid .ui-avatar {
margin-left: 0;
}
.ui-avatar-group-stacked .ui-avatar {
margin-left: -12px;
box-shadow: 0 0 0 2px var(--ui-white);
}
/* ============================================
TREE VIEW COMPONENT
============================================ */
.ui-tree {
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.ui-tree-item {
user-select: none;
}
.ui-tree-node {
display: flex;
align-items: center;
padding: var(--ui-space-1) var(--ui-space-2);
border-radius: var(--ui-radius-md);
cursor: pointer;
gap: var(--ui-space-2);
transition: background 0.15s ease;
position: relative;
}
.ui-tree-node:hover {
background: var(--ui-gray-100);
}
.ui-tree-node.selected {
background: var(--ui-primary-light);
color: var(--ui-primary);
}
.ui-tree-toggle {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--ui-gray-400);
transition: transform 0.15s ease;
flex-shrink: 0;
}
.ui-tree-toggle.expanded {
transform: rotate(90deg);
}
.ui-tree-toggle.empty {
visibility: hidden;
}
.ui-tree-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ui-tree-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-tree-sublabel {
font-size: 0.85em;
color: var(--ui-gray-500);
margin-left: 0.4em;
opacity: 0.8;
}
.ui-tree-badge {
font-size: 0.6em;
padding: 0.1em 0.4em;
border-radius: 8px;
font-weight: 600;
margin-left: auto;
color: white;
background: var(--_badge-color, var(--ui-primary));
}
.ui-tree-children {
padding-left: var(--ui-space-5);
display: none;
}
.ui-tree-children.expanded {
display: block;
}
/* Tree template variations */
.ui-tree-compact .ui-tree-node {
padding: var(--ui-space-1) var(--ui-space-1);
font-size: var(--ui-text-xs);
}
.ui-tree-compact .ui-tree-children {
padding-left: var(--ui-space-3);
}
.ui-tree-files .ui-tree-icon {
font-size: var(--ui-text-base);
}
.ui-tree-checkboxes .ui-tree-checkbox {
width: 16px;
height: 16px;
margin-right: var(--ui-space-1);
}
/* Tree header (search + add) */
.ui-tree-header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
background: var(--ui-gray-50);
}
.ui-tree-search-input {
flex: 1;
min-width: 0;
font-size: var(--ui-text-sm);
box-sizing: border-box;
}
/* Tree node container */
.ui-tree-nodes {
overflow-y: auto;
padding: var(--ui-space-1);
}
/* Tree empty state */
.ui-tree-empty {
text-align: center;
color: var(--ui-gray-400);
padding: var(--ui-space-6) var(--ui-space-4);
font-size: var(--ui-text-sm);
}
/* Tree node edit actions (hover reveal — absolute overlay) */
.ui-tree-node-actions {
position: absolute;
right: var(--ui-space-1);
top: 0;
bottom: 0;
display: flex;
align-items: center;
gap: var(--ui-space-1);
opacity: 0;
pointer-events: none;
transition: opacity var(--ui-transition);
padding: 0 var(--ui-space-1) 0 var(--ui-space-3);
}
.ui-tree-node:hover > .ui-tree-node-actions {
opacity: 1;
pointer-events: auto;
background: linear-gradient(90deg, transparent, var(--ui-gray-100) 12px);
}
.ui-tree-node.selected:hover > .ui-tree-node-actions {
background: linear-gradient(90deg, transparent, var(--ui-primary-light) 12px);
}
.ui-tree-node-actions .ui-btn {
padding: var(--ui-space-1);
min-width: auto;
border-radius: var(--ui-radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.ui-tree-node-actions .ui-btn svg {
width: 16px;
height: 16px;
}
/* Tree drag-and-drop feedback */
.ui-tree-node[draggable="true"] { cursor: grab; }
.ui-tree-node-dragging { opacity: 0.4; cursor: grabbing; }
.ui-tree-node-drop-into { background: var(--ui-primary-light); outline: 2px dashed var(--ui-primary); border-radius: var(--ui-radius-md); }
.ui-tree-drop-indicator { position: absolute; height: 2px; background: var(--ui-primary); border-radius: 1px; pointer-events: none; z-index: 10; }
.ui-tree-drop-indicator::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-primary); }
.ui-tree-children-drop { background: var(--ui-primary-light); border-radius: var(--ui-radius-md); }
/* ============================================
BINDING DETAIL LAYOUT (bindCard / specimen detail)
============================================ */
.ui-detail-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: var(--ui-space-2);
align-items: start;
}
.ui-detail-col {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
min-width: 0;
overflow-wrap: break-word;
word-break: break-word;
}
.ui-detail-header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
margin: var(--ui-space-1) 0;
flex-wrap: wrap;
}
.ui-detail-title {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-bold);
color: var(--ui-primary);
}
.ui-detail-badge {
font-size: var(--ui-text-xs);
padding: 0.15rem 0.45rem;
border-radius: 10px;
font-weight: var(--ui-font-semibold);
display: inline-block;
}
.ui-detail-qr-row {
display: flex;
gap: var(--ui-space-3);
align-items: flex-start;
}
.ui-detail-qr-row .ui-binding-qr {
flex-shrink: 0;
}
.ui-detail-qr-row .ui-detail-kv-list {
flex: 1;
min-width: 0;
}
.ui-detail-kv {
display: flex;
justify-content: space-between;
padding: 0.15rem 0;
border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
font-size: var(--ui-text-xs);
}
.ui-detail-kv-label {
color: var(--ui-gray-400);
}
.ui-detail-kv-value {
font-weight: var(--ui-font-medium);
color: var(--ui-gray-800);
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
text-align: right;
}
.ui-detail-notes {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-top: var(--ui-space-1);
padding: var(--ui-space-1);
background: var(--ui-gray-50);
border-radius: var(--ui-radius-sm);
}
.ui-detail-empty {
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
text-align: center;
padding: var(--ui-space-3);
}
/* ============================================
LIST SELECTOR COMPONENT
============================================ */
.ui-list-selector {
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
overflow: hidden;
}
.ui-list-item {
display: flex;
align-items: center;
padding: var(--ui-space-1) var(--ui-space-2);
gap: var(--ui-space-2);
cursor: pointer;
transition: background 0.15s ease;
border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
position: relative;
font-size: var(--ui-text-sm);
}
.ui-list-item:last-child {
border-bottom: none;
}
.ui-list-item:hover {
background: var(--ui-gray-50);
}
.ui-list-item.selected {
background: var(--ui-secondary-50, #f5f3ff);
border-left: 3px solid var(--ui-secondary, #7c3aed);
padding-left: calc(var(--ui-space-2) - 3px);
}
.ui-list-item-checkbox {
width: 18px;
height: 18px;
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s ease;
}
.ui-list-item.selected .ui-list-item-checkbox {
background: var(--ui-primary);
border-color: var(--ui-primary);
color: var(--ui-white);
}
.ui-list-item-avatar {
flex-shrink: 0;
}
.ui-list-item-content {
flex: 1;
min-width: 0;
}
.ui-list-item-title {
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-list-item-subtitle {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-list-item-action {
flex-shrink: 0;
}
.ui-list-item-badge {
flex-shrink: 0;
margin-left: auto;
padding-left: var(--ui-space-2);
}
/* List selector template variations */
.ui-list-selector-compact .ui-list-item {
padding: var(--ui-space-1) var(--ui-space-2);
}
.ui-list-selector-compact .ui-list-item-title {
font-size: var(--ui-text-xs);
}
.ui-list-selector-detailed .ui-list-item {
padding: var(--ui-space-4);
}
.ui-list-selector-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--ui-space-3);
border: none;
}
.ui-list-selector-cards .ui-list-item {
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
flex-direction: column;
text-align: center;
padding: var(--ui-space-4);
}
.ui-list-selector-cards .ui-list-item.selected {
border-color: var(--ui-primary);
box-shadow: 0 0 0 2px var(--ui-primary-light);
}
.ui-list-selector-cards .ui-list-item-card {
flex-direction: column;
align-items: center;
}
/* List selector header (search + add button) */
.ui-list-header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
background: var(--ui-gray-50);
}
.ui-list-search-input {
flex: 1;
min-width: 0;
font-size: var(--ui-text-sm);
box-sizing: border-box;
}
/* Legacy search box support */
.ui-list-search {
padding: var(--ui-space-3);
border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
background: var(--ui-gray-50);
}
.ui-list-search .ui-input {
width: 100%;
font-size: var(--ui-text-sm);
box-sizing: border-box;
}
/* List selector items container */
.ui-list-items {
max-height: 400px;
overflow-y: auto;
}
/* List selector pagination wrapper */
.ui-list-pagination-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ui-space-2) var(--ui-space-3);
border-top: var(--ui-border-width) solid var(--ui-gray-200);
background: var(--ui-gray-50);
font-size: var(--ui-text-sm);
}
.ui-list-pagination-wrapper .ui-list-pagination-info {
color: var(--ui-gray-600);
}
.ui-list-pagination-wrapper .ui-pagination {
margin-left: auto;
}
/* Legacy pagination (deprecated) */
.ui-list-pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ui-space-2) var(--ui-space-3);
border-top: var(--ui-border-width) solid var(--ui-gray-200);
background: var(--ui-gray-50);
font-size: var(--ui-text-sm);
}
.ui-list-pagination-info {
color: var(--ui-gray-600);
}
.ui-list-pagination-btns {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-list-pagination-page {
color: var(--ui-gray-600);
min-width: 60px;
text-align: center;
}
/* List selector edit actions (hover reveal — absolute overlay) */
.ui-list-item-edit-actions {
position: absolute;
right: var(--ui-space-2);
top: 0;
bottom: 0;
display: flex;
align-items: center;
gap: var(--ui-space-1);
opacity: 0;
pointer-events: none;
transition: opacity var(--ui-transition);
padding: 0 var(--ui-space-2) 0 var(--ui-space-3);
}
.ui-list-item:hover .ui-list-item-edit-actions {
opacity: 1;
pointer-events: auto;
background: linear-gradient(90deg, transparent, var(--ui-white, #fff) 12px);
}
.ui-list-item.selected:hover .ui-list-item-edit-actions {
background: linear-gradient(90deg, transparent, var(--ui-primary-light) 12px);
}
.ui-list-item-edit-actions .ui-btn {
padding: var(--ui-space-1);
min-width: auto;
border-radius: var(--ui-radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.ui-list-item-edit-actions .ui-btn svg {
width: 16px;
height: 16px;
}
/* Ghost button variant */
.ui-btn-ghost {
background: transparent;
border: none;
color: var(--ui-gray-500);
}
.ui-btn-ghost:hover {
background: var(--ui-gray-100);
color: var(--ui-gray-700);
}
.ui-btn-danger-ghost {
color: var(--ui-gray-500);
}
.ui-btn-danger-ghost:hover {
background: var(--ui-danger-light);
color: var(--ui-danger);
}
/* List selector empty state */
.ui-list-empty {
padding: var(--ui-space-6);
text-align: center;
color: var(--ui-gray-500);
font-style: italic;
}
/* ========================================
PHASE 6: ADVANCED FORM ELEMENTS
======================================== */
/* File Input */
.ui-file-input {
border: 2px dashed var(--ui-gray-300);
border-radius: var(--ui-radius-lg);
padding: var(--ui-space-6);
text-align: center;
cursor: pointer;
transition: all var(--ui-transition);
background: var(--ui-white);
}
.ui-file-input:hover {
border-color: var(--ui-primary);
background: var(--ui-primary-light);
}
.ui-file-input.dragover {
border-color: var(--ui-primary);
background: var(--ui-primary-light);
border-style: solid;
}
.ui-file-input-icon {
font-size: var(--ui-text-3xl);
margin-bottom: var(--ui-space-2);
color: var(--ui-gray-400);
}
.ui-file-input-text {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
margin-bottom: var(--ui-space-1);
}
.ui-file-input-hint {
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
}
.ui-file-input input[type="file"] {
display: none;
}
.ui-file-input-files {
margin-top: var(--ui-space-3);
text-align: left;
}
.ui-file-input-file {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2);
background: var(--ui-gray-100);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
margin-bottom: var(--ui-space-2);
}
.ui-file-input-file:last-child {
margin-bottom: 0;
}
.ui-file-input-file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-file-input-file-size {
color: var(--ui-gray-500);
font-size: var(--ui-text-xs);
}
.ui-file-input-file-remove {
cursor: pointer;
color: var(--ui-gray-400);
padding: var(--ui-space-1);
border-radius: var(--ui-radius-sm);
}
.ui-file-input-file-remove:hover {
color: var(--ui-danger);
background: var(--ui-danger-light);
}
/* Color Picker */
.ui-color-picker {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-color-picker-swatch {
width: 40px;
height: 40px;
border-radius: var(--ui-radius-md);
border: var(--ui-border-width) solid var(--ui-gray-200);
cursor: pointer;
overflow: hidden;
position: relative;
}
.ui-color-picker-swatch input[type="color"] {
position: absolute;
top: -10px;
left: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
border: none;
cursor: pointer;
}
.ui-color-picker-value {
font-family: var(--ui-font-mono);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-gray-100);
border-radius: var(--ui-radius-md);
min-width: 80px;
text-align: center;
}
/* Date Picker */
.ui-date-picker {
position: relative;
}
.ui-date-picker input[type="date"] {
width: 100%;
padding: var(--ui-space-2) var(--ui-space-3);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
font-family: var(--ui-font-body);
font-size: var(--ui-text-base);
color: var(--ui-gray-900);
background: var(--ui-white);
transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
/* focus styles in consolidated rule above */
.ui-date-picker input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.6;
}
.ui-date-picker input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/* Number Stepper */
.ui-number-stepper {
display: inline-flex;
align-items: stretch;
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
overflow: hidden;
}
.ui-number-stepper-btn {
width: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--ui-gray-100);
border: none;
cursor: pointer;
font-size: var(--ui-text-lg);
color: var(--ui-gray-600);
transition: background var(--ui-transition);
}
.ui-number-stepper-btn:hover {
background: var(--ui-gray-200);
}
.ui-number-stepper-btn:active {
background: var(--ui-gray-300);
}
.ui-number-stepper-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ui-number-stepper-input {
width: 60px;
text-align: center;
border: none;
border-left: 1px solid var(--ui-gray-300);
border-right: var(--ui-border-width) solid var(--ui-gray-300);
font-family: var(--ui-font-body);
font-size: var(--ui-text-base);
color: var(--ui-gray-900);
-moz-appearance: textfield;
}
.ui-number-stepper-input::-webkit-outer-spin-button,
.ui-number-stepper-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ui-number-stepper-input:focus {
outline: none;
}
/* Tags Input */
.ui-tags-input {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
padding: var(--ui-space-2);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
background: var(--ui-white);
min-height: 42px;
cursor: text;
}
.ui-tags-input:focus-within {
border-color: var(--ui-primary);
box-shadow: 0 0 0 3px var(--ui-primary-light);
}
.ui-tags-input-tag {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-1) var(--ui-space-2);
background: var(--ui-primary-light);
color: var(--ui-primary);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-sm);
}
.ui-tags-input-tag-remove {
cursor: pointer;
opacity: 0.7;
font-size: var(--ui-text-xs);
}
.ui-tags-input-tag-remove:hover {
opacity: 1;
}
.ui-tags-input-field {
flex: 1;
min-width: 100px;
border: none;
outline: none;
font-family: var(--ui-font-body);
font-size: var(--ui-text-base);
padding: var(--ui-space-1);
}
/* Search Input */
.ui-search-input {
position: relative;
display: flex;
align-items: center;
}
.ui-search-input-icon {
position: absolute;
left: var(--ui-space-3);
color: var(--ui-gray-400);
pointer-events: none;
}
.ui-search-input input {
width: 100%;
padding: var(--ui-space-2) var(--ui-space-10);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-full);
font-family: var(--ui-font-body);
font-size: var(--ui-text-base);
color: var(--ui-gray-900);
background: var(--ui-white);
transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
/* focus styles in consolidated rule above */
.ui-search-input input::placeholder {
color: var(--ui-gray-400);
}
.ui-search-input-clear {
position: absolute;
right: var(--ui-space-3);
color: var(--ui-gray-400);
cursor: pointer;
padding: var(--ui-space-1);
border-radius: var(--ui-radius-full);
display: none;
}
.ui-search-input-clear:hover {
color: var(--ui-gray-600);
background: var(--ui-gray-100);
}
.ui-search-input.has-value .ui-search-input-clear {
display: block;
}
/* Rating */
.ui-rating {
display: inline-flex;
gap: var(--ui-space-1);
align-items: center;
}
/* Stars and Hearts (shared styles) */
.ui-rating-item {
font-size: var(--ui-text-xl);
color: var(--ui-gray-300);
cursor: pointer;
transition: color var(--ui-transition), transform var(--ui-transition);
}
.ui-rating-star, .ui-rating-heart {
font-size: var(--ui-text-xl);
color: var(--ui-gray-300);
cursor: pointer;
transition: color var(--ui-transition), transform var(--ui-transition);
}
.ui-rating-item:hover, .ui-rating-star:hover, .ui-rating-heart:hover {
transform: scale(1.1);
}
.ui-rating-item.filled, .ui-rating-star.filled {
color: var(--ui-warning);
}
.ui-rating-heart.filled {
color: var(--ui-danger);
}
/* Half-filled stars */
.ui-rating-item.half-filled {
position: relative;
color: var(--ui-gray-300);
}
.ui-rating-item.half-filled::before {
content: '★';
position: absolute;
left: 0;
width: 50%;
overflow: hidden;
color: var(--ui-warning);
}
.ui-rating.readonly .ui-rating-item,
.ui-rating.readonly .ui-rating-star,
.ui-rating.readonly .ui-rating-heart {
cursor: default;
}
.ui-rating.readonly .ui-rating-item:hover,
.ui-rating.readonly .ui-rating-star:hover,
.ui-rating.readonly .ui-rating-heart:hover {
transform: none;
}
/* Rating sizes */
.ui-rating-sm .ui-rating-item, .ui-rating-sm .ui-rating-star, .ui-rating-sm .ui-rating-heart { font-size: var(--ui-text-base); }
.ui-rating-lg .ui-rating-item, .ui-rating-lg .ui-rating-star, .ui-rating-lg .ui-rating-heart { font-size: var(--ui-text-2xl); }
.ui-rating-xl .ui-rating-item, .ui-rating-xl .ui-rating-star, .ui-rating-xl .ui-rating-heart { font-size: var(--ui-text-3xl); }
/* Color variants */
.ui-rating[data-color] .ui-rating-item.filled,
.ui-rating[data-color] .ui-rating-heart.filled { color: var(--_c); }
/* Thumbs rating */
.ui-rating-template-thumbs {
gap: var(--ui-space-3);
}
.ui-rating-thumb {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-gray-100);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-md);
cursor: pointer;
font-size: var(--ui-text-lg);
transition: all var(--ui-transition);
}
.ui-rating-thumb:hover {
background: var(--ui-gray-200);
}
.ui-rating-thumb.active {
border-color: var(--ui-primary);
background: var(--ui-primary-light);
}
.ui-rating-thumb-up.active {
border-color: var(--ui-success);
background: var(--ui-success-light);
}
.ui-rating-thumb-down.active {
border-color: var(--ui-danger);
background: var(--ui-danger-light);
}
.ui-rating-count {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
}
.ui-rating.readonly .ui-rating-thumb {
cursor: default;
}
.ui-rating.readonly .ui-rating-thumb:hover {
background: var(--ui-gray-100);
}
/* Numeric rating */
.ui-rating-template-numeric {
gap: var(--ui-space-1);
}
.ui-rating-num {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--ui-gray-100);
border: var(--ui-border-width) solid var(--ui-gray-300);
border-radius: var(--ui-radius-sm);
cursor: pointer;
font-size: var(--ui-text-sm);
font-weight: 500;
color: var(--ui-gray-600);
transition: all var(--ui-transition);
}
.ui-rating-num:hover {
background: var(--ui-gray-200);
border-color: var(--ui-gray-400);
}
.ui-rating-num.filled {
background: var(--ui-primary);
border-color: var(--ui-primary);
color: white;
}
.ui-rating.readonly .ui-rating-num {
cursor: default;
}
.ui-rating.readonly .ui-rating-num:hover {
background: var(--ui-gray-100);
border-color: var(--ui-gray-300);
}
.ui-rating-sm .ui-rating-num { width: 1.5rem; height: 1.5rem; font-size: var(--ui-text-xs); }
.ui-rating-lg .ui-rating-num { width: 2.5rem; height: 2.5rem; font-size: var(--ui-text-base); }
/* ========================================
PHASE 7: LAYOUT COMPONENTS
======================================== */
/* Divider */
.ui-divider {
display: flex;
align-items: center;
width: 100%;
margin: var(--ui-space-4) 0;
}
.ui-divider-line {
flex: 1;
height: 1px;
background: var(--ui-gray-200);
}
.ui-divider-accent .ui-divider-line {
background: var(--ui-primary);
height: 2px;
}
.ui-divider-dashed .ui-divider-line {
background: transparent;
border-top: 1px dashed var(--ui-gray-300);
}
.ui-divider-text {
padding: 0 var(--ui-space-3);
color: var(--ui-gray-500);
font-size: var(--ui-text-sm);
white-space: nowrap;
}
.ui-divider-vertical {
flex-direction: column;
width: auto;
height: 100%;
margin: 0 var(--ui-space-4);
}
.ui-divider-vertical .ui-divider-line {
width: 1px;
height: 100%;
min-height: 20px;
}
.ui-divider-vertical .ui-divider-text {
padding: var(--ui-space-2) 0;
}
/* Control-Stage Layout */
.ui-control-stage {
display: flex;
align-items: stretch;
gap: 0;
min-height: 400px;
border-radius: var(--ui-radius-lg);
overflow: hidden;
}
.ui-control-stage-control {
flex-shrink: 0;
display: flex;
flex-direction: column;
background: var(--ui-white);
border: none;
border-right: 1px solid var(--ui-gray-200);
border-radius: 0;
padding: var(--ui-space-3);
overflow-y: auto;
}
.ui-control-stage-control-sm { width: 200px; }
.ui-control-stage-control-md { width: 280px; }
.ui-control-stage-control-lg { width: 360px; }
.ui-control-stage-stage {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--ui-gray-50);
border: none;
border-radius: 0;
padding: var(--ui-space-3);
overflow: auto;
}
.ui-control-stage-control-content,
.ui-control-stage-stage-content {
flex: 1;
display: flex;
flex-direction: column;
}
.ui-control-stage-header {
font-family: var(--ui-font-heading);
font-size: 11px;
font-weight: 600;
color: var(--ui-gray-500);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-1) var(--ui-space-1);
border-bottom: none;
}
.ui-control-stage-reversed {
flex-direction: row-reverse;
}
.ui-control-stage-reversed > .ui-control-stage-control {
border-right: none;
border-left: 1px solid var(--ui-gray-200);
}
.ui-control-stage-stacked {
flex-direction: column;
}
.ui-control-stage-stacked .ui-control-stage-control {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--ui-gray-200);
}
/* ── Base list refinements inside control-stage ── */
.ui-control-stage .ui-list-selector {
border: none;
background: transparent;
}
.ui-control-stage .ui-list-items {
border: none;
}
.ui-control-stage .ui-list-header {
border-bottom: none;
background: transparent;
padding: var(--ui-space-1) 0;
margin-bottom: var(--ui-space-1);
}
.ui-control-stage .ui-list-item {
border-left: none;
border-right: none;
border-radius: var(--ui-radius-md);
margin: 1px 0;
transition: background 0.1s;
}
.ui-control-stage .ui-list-item:last-child {
border-bottom: none;
}
/* Grid */
.ui-grid {
display: grid;
gap: var(--ui-space-4);
}
.ui-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.ui-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ui-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ui-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.ui-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.ui-grid-gap-sm { gap: var(--ui-space-2); }
.ui-grid-gap-md { gap: var(--ui-space-4); }
.ui-grid-gap-lg { gap: var(--ui-space-6); }
.ui-grid-gap-xl { gap: var(--ui-space-8); }
/* Responsive grid */
@media (max-width: 768px) {
.ui-grid-responsive.ui-grid-cols-3,
.ui-grid-responsive.ui-grid-cols-4,
.ui-grid-responsive.ui-grid-cols-5,
.ui-grid-responsive.ui-grid-cols-6 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.ui-grid-responsive.ui-grid-cols-2,
.ui-grid-responsive.ui-grid-cols-3,
.ui-grid-responsive.ui-grid-cols-4,
.ui-grid-responsive.ui-grid-cols-5,
.ui-grid-responsive.ui-grid-cols-6 {
grid-template-columns: 1fr;
}
.ui-control-stage {
flex-direction: column;
}
.ui-control-stage-control {
width: 100% !important;
border-right: none;
border-bottom: 1px solid var(--ui-gray-200);
}
}
/* Phase 11 Template Styles */
/* Accordion Templates */
.ui-accordion-bordered .ui-accordion-item {
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
margin-bottom: var(--ui-space-2);
}
.ui-accordion-bordered .ui-accordion-trigger {
padding: var(--ui-space-4);
}
.ui-accordion-bordered .ui-accordion-content {
border-top: var(--ui-border-width) solid var(--ui-gray-200);
}
/* Divider Templates */
.ui-divider-dotted .ui-divider-line {
border-style: dotted;
border-width: 2px;
}
/* ControlStage Templates */
.ui-control-stage-minimal {
box-shadow: none;
border-radius: 0;
}
.ui-control-stage-minimal .ui-control-stage-control {
background: transparent;
border: none;
}
.ui-control-stage-minimal .ui-control-stage-stage {
background: transparent;
}
/* ── Nested control-stage (inside any parent) — seamless, no extra chrome ── */
.ui-control-stage .ui-control-stage {
box-shadow: none;
border-radius: 0;
min-height: 0;
flex: 1;
}
.ui-control-stage .ui-control-stage > .ui-control-stage-control {
border-right: 1px solid var(--ui-gray-200);
}
/* ══════════════════════════════════════════════════════════════════
Unified Control Stage — Apple System Settings aesthetic
Usage: new uiControlStage({ template: 'unified', controlSize: 'lg' })
══════════════════════════════════════════════════════════════════ */
.ui-control-stage-unified {
border-radius: 10px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.1);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Wider control sizes for unified (direct child only — don't cascade into nested stages) */
.ui-control-stage-unified > .ui-control-stage-control-sm { width: 240px; }
.ui-control-stage-unified > .ui-control-stage-control-md { width: 300px; }
.ui-control-stage-unified > .ui-control-stage-control-lg { width: 380px; }
/* Sidebar — warm Apple gray (direct child only) */
.ui-control-stage-unified > .ui-control-stage-control {
background: #dcd9d5;
border-right-color: rgba(0,0,0,0.1);
padding: 0;
}
/* Stage — clean white (direct child only) */
.ui-control-stage-unified > .ui-control-stage-stage {
background: #ffffff;
padding: 0;
}
/* Header — muted uppercase label */
.ui-control-stage-unified .ui-control-stage-header {
font-size: 11px;
font-weight: 600;
color: #86868b;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 12px 14px 4px;
margin-bottom: 0;
border-bottom: none;
}
/* ── Accordion ── */
.ui-control-stage-unified .ui-accordion {
border: none;
border-radius: 0;
background: transparent;
}
.ui-control-stage-unified .ui-accordion-item {
border-bottom: none;
}
.ui-control-stage-unified .ui-accordion-trigger {
background: transparent;
padding: 5px 10px;
font-size: 13px;
font-weight: 600;
color: #1d1d1f;
border-radius: 6px;
margin: 1px 6px;
}
.ui-control-stage-unified .ui-accordion-trigger:hover {
background: rgba(0,0,0,0.06);
}
.ui-control-stage-unified .ui-accordion-item.ui-active .ui-accordion-trigger {
background: rgba(0,0,0,0.09);
}
.ui-control-stage-unified .ui-accordion-content {
background: transparent;
padding: 2px 6px 6px;
}
.ui-control-stage-unified .ui-accordion-icon {
font-size: 11px;
color: #86868b;
}
/* ── List selector ── */
.ui-control-stage-unified .ui-list-selector {
border: none;
background: transparent;
}
.ui-control-stage-unified .ui-list-items {
border: none;
max-height: none;
overflow-y: visible;
}
.ui-control-stage-unified .ui-list-item {
border: none;
border-radius: 6px;
padding: 4px 8px;
margin: 1px 0;
transition: background 0.1s;
}
.ui-control-stage-unified .ui-list-item:last-child {
border-bottom: none;
}
.ui-control-stage-unified .ui-list-item:hover {
background: rgba(0,0,0,0.05);
}
.ui-control-stage-unified .ui-list-item.selected {
background: #007aff;
color: #fff;
}
.ui-control-stage-unified .ui-list-item.selected .ui-list-item-title { color: #fff; }
.ui-control-stage-unified .ui-list-item.selected .ui-list-item-subtitle { color: rgba(255,255,255,0.7); }
.ui-control-stage-unified .ui-list-item-title {
font-size: 13px;
font-weight: 500;
color: #1d1d1f;
letter-spacing: -0.01em;
}
.ui-control-stage-unified .ui-list-item-subtitle {
font-size: 11px;
color: #86868b;
}
.ui-control-stage-unified .ui-list-item-checkbox {
display: none;
}
/* ── List header (search + add) ── */
.ui-control-stage-unified .ui-list-header {
padding: 6px;
border-bottom: none;
background: transparent;
gap: 4px;
}
/* ── Inputs ── */
.ui-control-stage-unified .ui-input,
.ui-control-stage-unified input.ui-input {
border: none;
background: rgba(255,255,255,0.55);
border-radius: 6px;
font-size: 13px;
padding: 5px 8px;
color: #1d1d1f;
}
.ui-control-stage-unified .ui-input::placeholder { color: #86868b; }
.ui-control-stage-unified .ui-input:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0,122,255,0.3);
}
/* ── Tree view ── */
.ui-control-stage-unified .ui-tree-view {
border: none;
background: transparent;
}
.ui-control-stage-unified .ui-tree-header {
padding: 6px;
border-bottom: none;
background: transparent;
gap: 4px;
}
.ui-control-stage-unified .ui-tree-nodes {
padding: 2px;
overflow-y: visible;
}
.ui-control-stage-unified .ui-tree-node {
border: none;
border-radius: 5px;
padding: 3px 8px;
font-size: 13px;
font-weight: 400;
color: #1d1d1f;
}
.ui-control-stage-unified .ui-tree-node:hover {
background: rgba(0,0,0,0.05);
}
.ui-control-stage-unified .ui-tree-node.selected {
background: #007aff;
color: #fff;
}
.ui-control-stage-unified .ui-tree-compact .ui-tree-node {
padding: 3px 8px;
font-size: 12px;
}
.ui-control-stage-unified .ui-tree-empty {
font-size: 13px;
padding: 12px 8px;
color: #86868b;
}
.ui-control-stage-unified .ui-tree-sublabel {
font-size: 12px !important;
color: #86868b !important;
opacity: 1 !important;
}
.ui-control-stage-unified .ui-tree-node-actions {
opacity: 0;
pointer-events: none;
}
.ui-control-stage-unified .ui-tree-node:hover > .ui-tree-node-actions {
opacity: 0.8;
pointer-events: auto;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05) 12px);
}
.ui-control-stage-unified .ui-tree-node.selected:hover > .ui-tree-node-actions {
background: linear-gradient(90deg, transparent, #007aff 12px);
}
/* ── Buttons ── */
.ui-control-stage-unified .ui-btn {
border-radius: 6px;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.01em;
}
.ui-control-stage-unified .ui-btn-sm {
padding: 3px 8px;
font-size: 11px;
}
.ui-control-stage-unified .ui-btn-primary {
background: #007aff;
border-color: #007aff;
}
.ui-control-stage-unified .ui-btn-ghost {
border-color: transparent;
}
/* Grid Templates */
.ui-grid-masonry {
/* For true masonry, JavaScript would need to handle item placement */
align-items: start;
}
.ui-grid-auto {
display: grid;
/* gridTemplateColumns is set via JS */
}
/* ========================================
PHASE 8: MEDIA & CONTENT COMPONENTS
======================================== */
/* Carousel */
.ui-carousel {
position: relative;
overflow: hidden;
border-radius: var(--ui-radius-lg);
}
.ui-carousel-track {
display: flex;
transition: transform 0.3s ease-in-out;
}
.ui-carousel-slide {
flex: 0 0 100%;
min-width: 100%;
}
.ui-carousel-slide img {
width: 100%;
height: auto;
display: block;
}
.ui-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.9);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-lg);
color: var(--ui-gray-700);
box-shadow: var(--ui-shadow-md);
transition: all var(--ui-transition);
z-index: 10;
}
.ui-carousel-nav:hover {
background: var(--ui-white);
box-shadow: var(--ui-shadow-lg);
}
.ui-carousel-nav:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ui-carousel-nav-prev { left: var(--ui-space-3); }
.ui-carousel-nav-next { right: var(--ui-space-3); }
.ui-carousel-dots {
position: absolute;
bottom: var(--ui-space-3);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--ui-space-2);
z-index: 10;
}
.ui-carousel-dot {
width: 8px;
height: 8px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
padding: 0;
transition: all var(--ui-transition);
}
.ui-carousel-dot:hover {
background: rgba(255, 255, 255, 0.8);
}
.ui-carousel-dot.active {
background: var(--ui-white);
width: 24px;
}
/* Gallery */
.ui-gallery {
display: grid;
gap: var(--ui-space-2);
}
.ui-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ui-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ui-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ui-gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--ui-radius-md);
cursor: pointer;
aspect-ratio: 1;
}
.ui-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--ui-transition);
}
.ui-gallery-item:hover img {
transform: scale(1.05);
}
.ui-gallery-item-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--ui-transition);
}
.ui-gallery-item:hover .ui-gallery-item-overlay {
background: rgba(0, 0, 0, 0.3);
}
.ui-gallery-item-icon {
color: white;
font-size: var(--ui-text-2xl);
opacity: 0;
transform: scale(0.8);
transition: all var(--ui-transition);
}
.ui-gallery-item:hover .ui-gallery-item-icon {
opacity: 1;
transform: scale(1);
}
/* Lightbox */
.ui-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all var(--ui-transition);
}
.ui-lightbox.open {
opacity: 1;
visibility: visible;
}
.ui-lightbox-content {
max-width: 90vw;
max-height: 90vh;
}
.ui-lightbox-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.ui-lightbox-close {
position: absolute;
top: var(--ui-space-4);
right: var(--ui-space-4);
width: 40px;
height: 40px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.1);
border: none;
cursor: pointer;
color: white;
font-size: var(--ui-text-xl);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--ui-transition);
}
.ui-lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.ui-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: var(--ui-radius-full);
background: rgba(255, 255, 255, 0.1);
border: none;
cursor: pointer;
color: white;
font-size: var(--ui-text-2xl);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--ui-transition);
}
.ui-lightbox-nav:hover {
background: rgba(255, 255, 255, 0.2);
}
.ui-lightbox-prev { left: var(--ui-space-4); }
.ui-lightbox-next { right: var(--ui-space-4); }
/* Code Block */
.ui-code-block {
background: var(--ui-gray-900);
border-radius: var(--ui-radius-lg);
overflow: hidden;
color: var(--ui-gray-100);
}
.ui-code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-4);
background: var(--ui-gray-800);
border-bottom: var(--ui-border-width) solid var(--ui-gray-700);
}
.ui-code-block-body {
display: flex;
padding: var(--ui-space-4);
overflow-x: auto;
}
.ui-code-block-lang {
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
text-transform: uppercase;
font-weight: var(--ui-font-medium);
}
.ui-code-block-copy {
padding: var(--ui-space-1) var(--ui-space-2);
background: transparent;
border: var(--ui-border-width) solid var(--ui-gray-600);
border-radius: var(--ui-radius-sm);
color: var(--ui-gray-400);
font-size: var(--ui-text-xs);
cursor: pointer;
transition: all var(--ui-transition);
}
.ui-code-block-copy:hover {
background: var(--ui-gray-700);
color: var(--ui-white);
}
.ui-code-block-copy.copied {
background: var(--ui-success);
border-color: var(--ui-success);
color: var(--ui-white);
}
/* .ui-code-block-content is a element in the JS structure */
pre.ui-code-block-content {
margin: 0;
padding: 0;
font-family: var(--ui-font-mono);
font-size: var(--ui-text-sm);
line-height: 1.6;
color: var(--ui-gray-100);
flex: 1;
white-space: pre;
}
pre.ui-code-block-content code {
font-family: inherit;
color: inherit;
}
.ui-code-block-line-numbers {
flex-shrink: 0;
padding-right: var(--ui-space-4);
margin-right: var(--ui-space-4);
border-right: var(--ui-border-width) solid var(--ui-gray-700);
color: var(--ui-gray-600);
text-align: right;
user-select: none;
}
.ui-code-block-line-numbers span {
display: block;
line-height: 1.6;
}
/* Callout */
.ui-callout {
display: flex;
gap: var(--ui-space-3);
padding: var(--ui-space-4);
border-radius: var(--ui-radius-lg);
border-left: 4px solid;
}
.ui-callout[data-color] {
background: var(--_c-light);
border-color: var(--_c);
}
.ui-callout-icon {
flex-shrink: 0;
font-size: var(--ui-text-xl);
}
.ui-callout[data-color] .ui-callout-icon { color: var(--_c); }
.ui-callout-content {
flex: 1;
}
.ui-callout-title {
font-weight: var(--ui-font-semibold);
margin-bottom: var(--ui-space-1);
}
.ui-callout[data-color] .ui-callout-title { color: var(--_c-dark); }
.ui-callout-text {
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
line-height: 1.5;
}
/* ============================================
PHASE 9: INTERACTIVE CONTROLS
============================================ */
/* Segmented Control */
.ui-segmented-control {
display: inline-flex;
background: var(--ui-gray-100);
border-radius: var(--ui-radius-lg);
padding: var(--ui-space-1);
gap: var(--ui-space-1);
}
.ui-segmented-control-option {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-600);
background: transparent;
border: none;
cursor: pointer;
transition: all var(--ui-transition);
white-space: nowrap;
}
.ui-segmented-control-option:hover:not(.ui-segmented-control-option-active) {
color: var(--ui-gray-800);
background: var(--ui-gray-200);
}
.ui-segmented-control-option-active {
background: white;
color: var(--ui-gray-900);
box-shadow: var(--ui-shadow-sm);
}
.ui-segmented-control-option svg,
.ui-segmented-control-option img {
width: 16px;
height: 16px;
}
/* Segmented Control Sizes */
.ui-segmented-control-sm .ui-segmented-control-option {
padding: var(--ui-space-1) var(--ui-space-3);
font-size: var(--ui-text-xs);
}
.ui-segmented-control-lg .ui-segmented-control-option {
padding: var(--ui-space-3) var(--ui-space-5);
font-size: var(--ui-text-base);
}
/* Segmented Control Block (full width) */
.ui-segmented-control-block {
display: flex;
width: 100%;
}
.ui-segmented-control-block .ui-segmented-control-option {
flex: 1;
}
/* Segmented Control Variants */
.ui-segmented-control-primary .ui-segmented-control-option-active {
background: var(--ui-primary);
color: white;
}
.ui-segmented-control-dark {
background: var(--ui-gray-800);
}
.ui-segmented-control-dark .ui-segmented-control-option {
color: var(--ui-gray-400);
}
.ui-segmented-control-dark .ui-segmented-control-option:hover:not(.ui-segmented-control-option-active) {
color: var(--ui-gray-200);
background: var(--ui-gray-700);
}
.ui-segmented-control-dark .ui-segmented-control-option-active {
background: var(--ui-gray-600);
color: white;
}
/* Responsive segmented control */
@media (max-width: 480px) {
.ui-segmented-control {
flex-wrap: wrap;
}
.ui-segmented-control-option {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
}
}
/* Split Button */
.ui-split-button {
display: inline-flex;
position: relative;
}
.ui-split-button-main {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
border: none;
cursor: pointer;
transition: all var(--ui-transition);
border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
}
.ui-split-button-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--ui-space-2) var(--ui-space-2);
border: none;
cursor: pointer;
transition: all var(--ui-transition);
border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
border-left: var(--ui-border-width) solid hsla(0, 0%, 100%, 0.2);
}
.ui-split-button-toggle svg {
width: 16px;
height: 16px;
transition: transform var(--ui-transition);
}
.ui-split-button-toggle.ui-split-button-open svg {
transform: rotate(180deg);
}
/* Split Button Variants */
.ui-split-button[data-color] .ui-split-button-main,
.ui-split-button[data-color] .ui-split-button-toggle {
background: var(--_c);
color: white;
}
.ui-split-button[data-color] .ui-split-button-main:hover,
.ui-split-button[data-color] .ui-split-button-toggle:hover {
background: var(--_c-hover);
}
.ui-split-button-outline .ui-split-button-main,
.ui-split-button-outline .ui-split-button-toggle {
background: white;
color: var(--ui-gray-700);
border: var(--ui-border-width) solid var(--ui-gray-300);
}
.ui-split-button-outline .ui-split-button-toggle {
border-left: 1px solid var(--ui-gray-300);
}
.ui-split-button-outline .ui-split-button-main:hover,
.ui-split-button-outline .ui-split-button-toggle:hover {
background: var(--ui-gray-50);
}
/* Split Button Dropdown */
.ui-split-button-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: var(--ui-space-1);
background: white;
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
box-shadow: var(--ui-shadow-lg);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all var(--ui-transition);
}
.ui-split-button-dropdown.ui-split-button-dropdown-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ui-split-button-dropdown-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
width: 100%;
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
background: none;
border: none;
text-align: left;
cursor: pointer;
transition: background var(--ui-transition);
}
.ui-split-button-dropdown-item:first-child {
border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
}
.ui-split-button-dropdown-item:last-child {
border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
}
.ui-split-button-dropdown-item:hover {
background: var(--ui-gray-100);
}
.ui-split-button-dropdown-item svg {
width: 16px;
height: 16px;
color: var(--ui-gray-500);
}
.ui-split-button-dropdown-divider {
height: 1px;
background: var(--ui-gray-200);
margin: var(--ui-space-1) 0;
}
/* Split Button Sizes */
.ui-split-button-sm .ui-split-button-main {
padding: var(--ui-space-1) var(--ui-space-3);
font-size: var(--ui-text-xs);
}
.ui-split-button-sm .ui-split-button-toggle {
padding: var(--ui-space-1) var(--ui-space-1);
}
.ui-split-button-sm .ui-split-button-toggle svg {
width: 14px;
height: 14px;
}
.ui-split-button-lg .ui-split-button-main {
padding: var(--ui-space-3) var(--ui-space-5);
font-size: var(--ui-text-base);
}
.ui-split-button-lg .ui-split-button-toggle {
padding: var(--ui-space-3) var(--ui-space-3);
}
.ui-split-button-lg .ui-split-button-toggle svg {
width: 20px;
height: 20px;
}
/* ========================================
PHASE 12: MEDIA & CONTENT TEMPLATE STYLES
======================================== */
/* Carousel Templates */
.ui-carousel-minimal .ui-carousel-nav,
.ui-carousel-minimal .ui-carousel-dots {
display: none;
}
.ui-carousel-thumbnails {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.ui-carousel-thumbnail-strip {
display: flex;
gap: var(--ui-space-2);
overflow-x: auto;
padding: var(--ui-space-2) 0;
}
.ui-carousel-thumbnail {
flex: 0 0 60px;
width: 60px;
height: 40px;
border-radius: var(--ui-radius-sm);
overflow: hidden;
cursor: pointer;
opacity: 0.6;
transition: all var(--ui-transition);
border: 2px solid transparent;
}
.ui-carousel-thumbnail:hover {
opacity: 0.8;
}
.ui-carousel-thumbnail.active {
opacity: 1;
border-color: var(--ui-primary);
}
.ui-carousel-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Gallery Templates */
.ui-gallery-masonry {
display: block;
column-count: var(--gallery-cols, 3);
column-gap: var(--ui-space-4);
}
.ui-gallery-masonry .ui-gallery-item {
break-inside: avoid;
margin-bottom: var(--ui-space-4);
}
.ui-gallery-justified {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
}
.ui-gallery-justified .ui-gallery-item {
flex-grow: 1;
height: var(--gallery-row-height, 200px);
}
.ui-gallery-justified .ui-gallery-item img {
height: 100%;
width: auto;
min-width: 100%;
object-fit: cover;
}
/* CodeBlock Templates */
.ui-code-block-minimal {
border-radius: var(--ui-radius-md);
}
.ui-code-block-minimal .ui-code-block-header {
display: none;
}
.ui-code-block-minimal pre {
margin: 0;
padding: var(--ui-space-3);
}
.ui-code-block-terminal {
background: hsl(0, 0%, 12%);
border-radius: var(--ui-radius-lg);
overflow: hidden;
}
.ui-code-block-terminal .ui-code-block-header {
background: hsl(0, 0%, 20%);
padding: var(--ui-space-2) var(--ui-space-3);
display: flex;
align-items: center;
gap: var(--ui-space-4);
}
.ui-code-block-terminal-dots {
display: flex;
gap: var(--ui-space-2);
}
.ui-code-block-terminal-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.ui-code-block-terminal-dot:nth-child(1) { background: #ff5f56; }
.ui-code-block-terminal-dot:nth-child(2) { background: #ffbd2e; }
.ui-code-block-terminal-dot:nth-child(3) { background: #27c93f; }
.ui-code-block-terminal .ui-code-block-filename {
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
}
.ui-code-block-terminal pre {
margin: 0;
padding: var(--ui-space-4);
background: transparent;
}
.ui-code-block-terminal code {
color: #d4d4d4;
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}
/* Callout Templates */
.ui-callout-compact {
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
}
.ui-callout-compact .ui-callout-icon {
font-size: var(--ui-text-base);
}
.ui-callout-compact .ui-callout-title {
display: none;
}
.ui-callout-banner {
border-radius: 0;
border-left: none;
border-right: none;
padding: var(--ui-space-4) var(--ui-space-6);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.ui-callout-banner .ui-callout-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--ui-space-1);
}
/* ============================================
KANBAN BOARD COMPONENT
============================================ */
.ui-kanban {
display: flex;
gap: var(--ui-space-3);
min-height: 300px;
overflow-x: auto;
padding: var(--ui-space-2) 0;
}
.ui-kanban-column {
flex: 1;
min-width: 200px;
max-width: 320px;
background: var(--ui-gray-50);
border-radius: var(--ui-radius-lg);
display: flex;
flex-direction: column;
}
.ui-kanban-column-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 2px solid var(--kanban-col-color, var(--ui-gray-300));
}
.ui-kanban-column-label {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-700);
}
.ui-kanban-column-count {
font-size: var(--ui-text-xs);
background: var(--ui-gray-200);
color: var(--ui-gray-600);
padding: 0.1rem 0.4rem;
border-radius: var(--ui-radius-full);
font-weight: var(--ui-font-medium);
}
.ui-kanban-list {
flex: 1;
padding: var(--ui-space-2);
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
overflow-y: auto;
}
.ui-kanban-card {
background: var(--ui-white);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-2) var(--ui-space-3);
box-shadow: var(--ui-shadow-sm);
border-left: 3px solid var(--ui-gray-200);
cursor: pointer;
transition: box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}
.ui-kanban-card:hover {
box-shadow: var(--ui-shadow-md);
transform: translateY(-1px);
}
.ui-kanban-card-title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-800);
}
.ui-kanban-card-subtitle {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-top: var(--ui-space-1);
}
.ui-kanban-card-badges {
display: flex;
gap: var(--ui-space-1);
margin-top: var(--ui-space-2);
flex-wrap: wrap;
}
.ui-kanban-badge {
font-size: 0.65rem;
padding: 0.1rem 0.35rem;
border-radius: var(--ui-radius-sm);
background: var(--ui-primary-light);
color: var(--ui-primary-dark);
font-weight: var(--ui-font-medium);
}
/* Compact variant */
.ui-kanban-compact .ui-kanban-column {
min-width: 160px;
}
.ui-kanban-compact .ui-kanban-card {
padding: var(--ui-space-1) var(--ui-space-2);
}
.ui-kanban-compact .ui-kanban-card-title {
font-size: var(--ui-text-xs);
}
/* Kanban drag-and-drop */
.ui-kanban-card[draggable="true"] {
cursor: grab;
}
.ui-kanban-card-dragging {
opacity: 0.4;
cursor: grabbing;
}
.ui-kanban-list-dragover {
background: var(--ui-primary-light);
border-radius: var(--ui-radius-md);
outline: 2px dashed var(--ui-primary);
outline-offset: -2px;
}
.ui-kanban-drop-indicator {
height: 2px;
background: var(--ui-primary);
border-radius: var(--ui-radius-full);
margin: calc(-1 * var(--ui-space-1)) 0;
pointer-events: none;
opacity: 0;
transition: opacity var(--ui-transition-fast);
}
.ui-kanban-drop-indicator-visible {
opacity: 1;
}
/* M:N Kanban editor (bindMnEditor default) */
.ui-mn-kanban { display: flex; gap: var(--ui-space-3); min-height: 200px; overflow-x: auto; }
.ui-mn-kanban-available { background: var(--ui-gray-100); border: 1px dashed var(--ui-gray-300); }
.ui-mn-kanban-available .ui-kanban-card { opacity: 0.85; }
.ui-mn-kanban-card-inner { display: flex; align-items: center; gap: var(--ui-space-2); }
.ui-mn-kanban-dropzone { text-align: center; color: var(--ui-gray-400); border: 1px dashed var(--ui-gray-300); border-radius: var(--ui-radius-md); }
.ui-mn-kanban-remove { opacity: 0; transition: opacity var(--ui-transition-fast); border: none; background: none; color: var(--ui-danger); cursor: pointer; font-size: var(--ui-text-lg); line-height: 1; padding: 0 var(--ui-space-1); }
.ui-kanban-card:hover .ui-mn-kanban-remove { opacity: 1; }
/* ============================================
CALENDAR COMPONENT
============================================ */
.ui-calendar {
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.ui-calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-1);
margin-bottom: var(--ui-space-2);
}
.ui-calendar-title {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
}
.ui-calendar-nav {
background: none;
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-1) var(--ui-space-2);
cursor: pointer;
font-size: var(--ui-text-xs);
color: var(--ui-gray-600);
transition: background var(--ui-transition-fast);
}
.ui-calendar-nav:hover {
background: var(--ui-gray-100);
}
.ui-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
overflow: auto;
}
.ui-calendar-dayheader {
background: var(--ui-gray-100);
padding: var(--ui-space-1);
text-align: center;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-500);
text-transform: uppercase;
}
.ui-calendar-day {
background: var(--ui-white);
min-height: 70px;
padding: var(--ui-space-1);
cursor: pointer;
transition: background var(--ui-transition-fast);
}
.ui-calendar-day:hover {
background: var(--ui-gray-50);
}
.ui-calendar-day-empty {
background: var(--ui-gray-50);
cursor: default;
}
.ui-calendar-day-num {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-600);
margin-bottom: var(--ui-space-1);
}
.ui-calendar-today {
background: var(--ui-primary-light);
}
.ui-calendar-today .ui-calendar-day-num {
color: var(--ui-primary);
font-weight: var(--ui-font-bold);
}
.ui-calendar-event {
font-size: 0.65rem;
padding: 0.1rem 0.3rem;
border-radius: var(--ui-radius-sm);
background: var(--ui-primary);
color: var(--ui-white);
margin-bottom: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.ui-calendar-event:hover {
opacity: 0.85;
}
.ui-calendar-more {
font-size: 0.6rem;
color: var(--ui-gray-500);
padding: 0.1rem 0.3rem;
}
/* ============================================
CHAT COMPONENT
============================================ */
.ui-chat {
display: flex;
flex-direction: column;
font-size: var(--ui-text-sm);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
background: var(--ui-white);
}
.ui-chat-list {
flex: 1;
overflow-y: auto;
padding: var(--ui-space-3);
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
max-height: 400px;
min-height: 200px;
}
.ui-chat-row {
display: flex;
justify-content: flex-start;
}
.ui-chat-own {
justify-content: flex-end;
}
.ui-chat-bubble {
max-width: 75%;
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-lg);
background: var(--ui-gray-100);
color: var(--ui-gray-800);
}
.ui-chat-own .ui-chat-bubble {
background: var(--ui-primary);
color: var(--ui-white);
}
.ui-chat-sender {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-primary);
margin-bottom: var(--ui-space-1);
}
.ui-chat-content {
line-height: var(--ui-leading-normal);
}
.ui-chat-time {
font-size: 0.65rem;
color: var(--ui-gray-400);
margin-top: var(--ui-space-1);
text-align: right;
}
.ui-chat-own .ui-chat-time {
color: rgba(255,255,255,0.7);
}
.ui-chat-system {
text-align: center;
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
padding: var(--ui-space-1) 0;
font-style: italic;
}
.ui-chat-input-bar {
display: flex;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-top: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-chat-input {
flex: 1;
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-sm);
outline: none;
transition: border-color var(--ui-transition-fast);
}
.ui-chat-input:focus {
border-color: var(--ui-primary);
}
.ui-chat-send {
background: var(--ui-primary);
color: var(--ui-white);
border: none;
border-radius: var(--ui-radius-md);
padding: var(--ui-space-2) var(--ui-space-4);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: background var(--ui-transition-fast);
}
.ui-chat-send:hover {
background: var(--ui-primary-hover);
}
/* Compact variant */
.ui-chat-compact .ui-chat-list {
max-height: 250px;
padding: var(--ui-space-2);
gap: var(--ui-space-1);
}
.ui-chat-compact .ui-chat-bubble {
padding: var(--ui-space-1) var(--ui-space-2);
font-size: var(--ui-text-xs);
}
/* ============================================
GRAPH VIEW COMPONENT
============================================ */
.ui-graph {
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.ui-graph-svg {
width: 100%;
max-height: 450px;
display: block;
}
.ui-graph-edge {
stroke: var(--ui-gray-300);
stroke-width: 1.5;
}
.ui-graph-edge-label {
font-size: 9px;
fill: var(--ui-gray-500);
text-anchor: middle;
}
.ui-graph-node circle {
fill: var(--ui-primary);
stroke: var(--ui-white);
stroke-width: 2;
transition: fill 0.15s ease;
}
.ui-graph-node:hover circle {
fill: var(--ui-primary-hover);
}
.ui-graph-label {
font-size: 10px;
fill: var(--ui-white);
text-anchor: middle;
pointer-events: none;
font-weight: var(--ui-font-medium);
}
/* ─── Control Chart (Shewhart) ─────────────────────────────────────────────── */
.ui-control-chart {
font-family: var(--ui-font-family);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
background: var(--ui-white);
border: var(--ui-border-width) solid var(--ui-gray-200);
border-radius: var(--ui-radius);
padding: var(--ui-space-3);
}
.ui-cc-title {
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-sm);
margin-bottom: var(--ui-space-2);
color: var(--ui-gray-800);
}
.ui-cc-empty {
text-align: center;
padding: var(--ui-space-8) 0;
color: var(--ui-gray-400);
font-style: italic;
}
.ui-cc-svg {
width: 100%;
display: block;
}
.ui-cc-band-action {
fill: hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-50));
}
.ui-cc-band-warning {
fill: hsl(var(--ui-war-h), var(--ui-war-s), var(--l-50));
}
.ui-cc-line-mean {
stroke: var(--ui-primary);
stroke-width: 1.5;
stroke-dasharray: 6 3;
}
.ui-cc-line-warning {
stroke: var(--ui-warning);
stroke-width: 1;
stroke-dasharray: 4 3;
}
.ui-cc-line-action {
stroke: var(--ui-danger);
stroke-width: 1;
stroke-dasharray: 2 2;
}
.ui-cc-data-line {
fill: none;
stroke: var(--ui-primary);
stroke-width: 1.5;
}
.ui-cc-point {
stroke: var(--ui-white);
stroke-width: 1.5;
cursor: pointer;
transition: r 0.15s ease;
}
.ui-cc-point:hover {
r: 6;
}
.ui-cc-point-pass { fill: var(--ui-success); }
.ui-cc-point-warning { fill: var(--ui-warning); }
.ui-cc-point-fail { fill: var(--ui-danger); }
.ui-cc-point-pending { fill: var(--ui-gray-400); }
.ui-cc-label-x {
font-size: 9px;
fill: var(--ui-gray-500);
text-anchor: middle;
}
.ui-cc-label-y {
font-size: 9px;
fill: var(--ui-gray-500);
dominant-baseline: middle;
}
.ui-cc-label-y.end {
text-anchor: end;
}
.ui-cc-legend {
display: flex;
gap: var(--ui-space-3);
flex-wrap: wrap;
padding-top: var(--ui-space-2);
border-top: var(--ui-border-width) solid var(--ui-gray-100);
margin-top: var(--ui-space-2);
font-size: 11px;
color: var(--ui-gray-600);
}
.ui-cc-legend-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.ui-cc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.ui-cc-dot-pass { background: var(--ui-success); }
.ui-cc-dot-warning { background: var(--ui-warning); }
.ui-cc-dot-fail { background: var(--ui-danger); }
/* ============================================
QR CODE (#57)
============================================ */
.ui-qrcode {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ui-qrcode-empty {
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
font-style: italic;
}
.ui-qrcode-canvas {
line-height: 0;
}
.ui-qrcode-canvas canvas,
.ui-qrcode-canvas svg {
display: block;
border-radius: var(--ui-radius-sm);
}
/* ============================================
GANTT CHART (#58)
============================================ */
.ui-gantt {
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius);
background: var(--ui-white);
overflow: hidden;
}
.ui-gantt-wrapper {
display: flex;
height: 100%;
min-height: 200px;
}
.ui-gantt-labels {
width: 180px;
min-width: 180px;
border-right: 1px solid var(--ui-gray-200);
overflow-y: auto;
background: var(--ui-gray-50);
flex-shrink: 0;
}
.ui-gantt-label-header {
height: 52px;
display: flex;
align-items: center;
padding: 0 0.5rem;
font-size: var(--ui-text-xs);
font-weight: 600;
color: var(--ui-gray-500);
border-bottom: 1px solid var(--ui-gray-200);
background: var(--ui-gray-100);
}
.ui-gantt-task-label {
height: 28px;
display: flex;
align-items: center;
padding: 0 0.5rem;
font-size: var(--ui-text-xs);
color: var(--ui-gray-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-bottom: 1px solid var(--ui-gray-100);
cursor: pointer;
}
.ui-gantt-task-label:hover { background: var(--ui-gray-100); }
.ui-gantt-group-label {
height: 28px;
display: flex;
align-items: center;
padding: 0 0.5rem;
font-size: var(--ui-text-xs);
font-weight: 700;
color: var(--ui-gray-800);
background: var(--ui-gray-100);
border-bottom: 1px solid var(--ui-gray-200);
cursor: pointer;
user-select: none;
}
.ui-gantt-group-label i { margin-right: 0.3rem; font-size: 0.55rem; transition: transform 0.15s; }
.ui-gantt-group-label.collapsed i { transform: rotate(-90deg); }
.ui-gantt-timeline-scroll {
flex: 1;
overflow-x: auto;
overflow-y: auto;
position: relative;
}
.ui-gantt-timeline {
position: relative;
min-height: 100%;
}
.ui-gantt-header {
position: sticky;
top: 0;
z-index: 2;
background: var(--ui-gray-100);
border-bottom: 1px solid var(--ui-gray-200);
}
.ui-gantt-month-row,
.ui-gantt-day-row {
display: flex;
}
.ui-gantt-month-cell {
font-size: var(--ui-text-xs);
font-weight: 600;
color: var(--ui-gray-600);
padding: 0.2rem 0.4rem;
border-right: 1px solid var(--ui-gray-200);
white-space: nowrap;
overflow: hidden;
}
.ui-gantt-day-cell {
font-size: 0.6rem;
color: var(--ui-gray-500);
text-align: center;
border-right: 1px solid var(--ui-gray-100);
border-bottom: 1px solid var(--ui-gray-200);
box-sizing: border-box;
}
.ui-gantt-day-cell.weekend { background: var(--ui-gray-50); color: var(--ui-gray-400); }
.ui-gantt-rows { position: relative; }
.ui-gantt-row {
height: 28px;
position: relative;
border-bottom: 1px solid var(--ui-gray-50);
}
.ui-gantt-row:nth-child(even) { background: rgba(0,0,0,0.01); }
.ui-gantt-bar {
position: absolute;
top: 4px;
height: 20px;
border-radius: var(--ui-radius-sm);
display: flex;
align-items: center;
padding: 0 0.3rem;
font-size: 0.55rem;
color: #fff;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
transition: opacity 0.15s;
z-index: 1;
}
.ui-gantt-bar:hover { opacity: 0.85; }
.ui-gantt-bar-progress {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: var(--ui-radius-sm);
opacity: 0.3;
background: #000;
}
.ui-gantt-bar-label {
position: relative;
z-index: 1;
text-overflow: ellipsis;
overflow: hidden;
}
.ui-gantt-milestone {
position: absolute;
top: 6px;
width: 14px;
height: 14px;
transform: rotate(45deg);
border: 2px solid;
background: var(--ui-white);
z-index: 1;
cursor: pointer;
}
.ui-gantt-milestone:hover { box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
.ui-gantt-today {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: var(--ui-danger);
z-index: 3;
pointer-events: none;
}
.ui-gantt-group-row {
height: 28px;
background: var(--ui-gray-100);
border-bottom: 1px solid var(--ui-gray-200);
}
/* Compact variant */
.ui-gantt-compact .ui-gantt-labels { width: 140px; min-width: 140px; }
.ui-gantt-compact .ui-gantt-task-label,
.ui-gantt-compact .ui-gantt-group-label,
.ui-gantt-compact .ui-gantt-row,
.ui-gantt-compact .ui-gantt-group-row { height: 22px; }
.ui-gantt-compact .ui-gantt-bar { top: 2px; height: 18px; }
/* ============================================
PAGE FRAME — Full-page app shell
Header bar, nav tabs, stage area, footer
============================================ */
.ui-pageframe {
display: flex;
flex-direction: column;
min-height: 100%;
}
.ui-pageframe-main {
flex: 1;
min-height: 0;
overflow: auto;
display: flex;
flex-direction: column;
}
.ui-pageframe-stage {
flex: 1;
padding: var(--ui-space-2);
background: var(--ui-gray-50);
transition: opacity 150ms ease-out;
}
/* Header bar */
.ui-pageframe-header {
border-radius: 0;
box-shadow: none;
padding: 0 var(--ui-space-5);
flex-shrink: 0;
}
.ui-pageframe-header-primary {
background: var(--ui-primary);
color: var(--ui-white);
}
.ui-pageframe-header-dark {
background: var(--ui-gray-900);
color: var(--ui-white);
}
.ui-pageframe-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
margin: 0 auto;
height: 52px;
gap: var(--ui-space-6);
}
.ui-pageframe-brand {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex-shrink: 0;
}
.ui-pageframe-logo {
font-size: var(--ui-text-xl);
opacity: 0.9;
}
.ui-pageframe-titles {
display: flex;
flex-direction: column;
line-height: var(--ui-leading-tight);
}
.ui-pageframe-title {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-extrabold, 800);
letter-spacing: var(--ui-ls-heading);
}
.ui-pageframe-subtitle {
font-size: var(--ui-text-2xs, 0.625rem);
opacity: 0.6;
font-weight: var(--ui-font-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Nav tabs */
.ui-pageframe-nav {
display: flex;
align-items: center;
gap: var(--ui-space-1);
list-style: none;
margin: 0;
padding: 0;
}
.ui-pageframe-nav-link {
display: flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-md);
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
letter-spacing: 0.01em;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.ui-pageframe-nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--ui-white);
}
.ui-pageframe-nav-link.active {
background: rgba(255, 255, 255, 0.2);
color: var(--ui-white);
}
.ui-pageframe-nav-icon {
font-size: var(--ui-text-xs);
}
/* Right section */
.ui-pageframe-right {
display: flex;
align-items: center;
gap: var(--ui-space-3);
flex-shrink: 0;
}
.ui-pageframe-badges {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.ui-pageframe-auth {
display: flex;
align-items: center;
}
.ui-pageframe-auth-buttons {
display: flex;
align-items: center;
gap: var(--ui-space-1);
}
.ui-pageframe-auth-form {
display: flex;
flex-direction: column;
gap: var(--ui-space-3);
}
.ui-pageframe-auth-error {
color: var(--ui-red-500);
font-size: var(--ui-text-xs);
min-height: 1em;
}
.ui-pageframe-auth-link {
text-align: center;
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
padding-top: var(--ui-space-2);
border-top: 1px solid var(--ui-gray-100);
}
.ui-pageframe-auth-link a {
color: var(--ui-primary);
text-decoration: none;
font-weight: var(--ui-font-medium);
}
.ui-pageframe-auth-link a:hover {
text-decoration: underline;
}
.ui-pageframe-right input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.ui-pageframe-style-select {
background: rgba(255, 255, 255, 0.15);
color: var(--ui-white);
border: none;
border-radius: var(--ui-radius-sm);
padding: var(--ui-space-1) var(--ui-space-2);
font-size: var(--ui-text-xs);
cursor: pointer;
outline: none;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.ui-pageframe-style-select option {
background: var(--ui-gray-900);
color: var(--ui-white);
}
/* User area in header */
.ui-pageframe-user {
display: flex;
align-items: center;
gap: var(--ui-space-2);
cursor: pointer;
position: relative;
padding: var(--ui-space-1) var(--ui-space-2);
border-radius: var(--ui-radius-md);
transition: background 0.15s;
}
.ui-pageframe-user:hover {
background: rgba(255, 255, 255, 0.1);
}
.ui-pageframe-user-name {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-white);
white-space: nowrap;
}
/* User dropdown menu */
.ui-pageframe-user-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: var(--ui-space-1);
min-width: 180px;
background: var(--ui-white);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-lg);
z-index: 1000;
padding: var(--ui-space-1) 0;
overflow: hidden;
}
.ui-pageframe-dropdown-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
color: var(--ui-gray-700);
cursor: pointer;
transition: background 0.1s;
white-space: nowrap;
}
.ui-pageframe-dropdown-item:hover {
background: var(--ui-gray-50);
color: var(--ui-gray-900);
}
.ui-pageframe-dropdown-item i {
width: 14px;
text-align: center;
color: var(--ui-gray-400);
font-size: var(--ui-text-xs);
}
.ui-pageframe-dropdown-item:hover i {
color: var(--ui-primary);
}
/* ── Graph Service ── */
.gph-vis-container {
width: 100%;
height: 100%;
min-height: 400px;
}
/* Settings gear — top-right overlay inside graph container */
.gph-settings-gear {
position: absolute;
top: var(--ui-space-2);
right: var(--ui-space-2);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--ui-white);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
box-shadow: var(--ui-shadow-sm);
cursor: pointer;
z-index: 10;
color: var(--ui-gray-500);
font-size: var(--ui-text-sm);
transition: color 0.15s, box-shadow 0.15s;
}
.gph-settings-gear:hover {
color: var(--ui-primary);
box-shadow: var(--ui-shadow-md);
}
/* Settings dropdown — anchored below gear */
.gph-settings-dropdown {
position: absolute;
top: calc(var(--ui-space-2) + 36px);
right: var(--ui-space-2);
min-width: 160px;
background: var(--ui-white);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-lg);
z-index: 11;
padding: var(--ui-space-2);
display: none;
}
.gph-settings-dropdown.gph-visible {
display: block;
}
.gph-settings-section {
margin-bottom: var(--ui-space-2);
}
.gph-settings-section:last-child {
margin-bottom: 0;
}
.gph-settings-title {
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--ui-space-1);
}
.gph-settings-select {
width: 100%;
font-size: var(--ui-text-xs);
padding: var(--ui-space-1) var(--ui-space-2);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-sm);
background: var(--ui-white);
color: var(--ui-gray-700);
outline: none;
cursor: pointer;
}
.gph-settings-select:focus {
border-color: var(--ui-primary-300);
box-shadow: 0 0 0 2px var(--ui-primary-50);
}
/* Legend strip below graph */
.gph-legend {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-gray-50);
border-top: 1px solid var(--ui-gray-100);
border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}
.gph-legend-item {
display: flex;
align-items: center;
gap: var(--ui-space-1);
font-size: var(--ui-text-2xs);
color: var(--ui-gray-600);
white-space: nowrap;
}
.gph-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: var(--ui-radius-full);
flex-shrink: 0;
}
/* Footer */
.ui-pageframe-footer-wrap {
background: var(--ui-gray-900);
flex-shrink: 0;
}
.ui-pageframe-footer {
max-width: 1200px;
margin: 0 auto;
padding: var(--ui-space-4) var(--ui-space-4);
}
.ui-pageframe-footer-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ui-space-4);
}
.ui-pageframe-footer-heading {
color: var(--ui-white);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
margin: 0 0 var(--ui-space-3) 0;
}
.ui-pageframe-footer-link {
display: block;
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
text-decoration: none;
padding: var(--ui-space-1) 0;
cursor: pointer;
}
.ui-pageframe-footer-link:hover {
color: var(--ui-white);
}
.ui-pageframe-footer-copyright {
margin-top: var(--ui-space-3);
padding-top: var(--ui-space-2);
text-align: center;
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
box-shadow: 0 -1px 0 var(--ui-gray-700);
}
/* ── uiFooter ────────────────────────────────────────────────────────────────
Sticky site footer. Parent container must be display:flex; flex-direction:column;
and the content area above must have flex:1. This pushes the footer to the
viewport bottom when content is short, and lets it scroll naturally when
content overflows. The footer uses flex-shrink:0 so it never collapses. */
.ui-footer {
background: var(--ui-gray-900);
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
font-family: system-ui, -apple-system, sans-serif;
flex-shrink: 0;
}
.ui-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--ui-space-5);
max-width: 1200px;
margin: 0 auto;
padding: var(--ui-space-6) var(--ui-space-5);
}
.ui-footer-logo {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-bold);
color: var(--ui-white);
margin-bottom: var(--ui-space-3);
}
.ui-footer-logo i {
color: var(--ui-primary-400);
margin-right: var(--ui-space-1);
}
.ui-footer-desc {
margin: 0;
line-height: 1.7;
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
}
.ui-footer-heading {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-300);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--ui-space-3);
}
.ui-footer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
.ui-footer-list li {
display: flex;
align-items: baseline;
gap: var(--ui-space-2);
}
.ui-footer-list a {
color: var(--ui-gray-300);
text-decoration: none;
font-size: var(--ui-text-sm);
transition: color 150ms;
white-space: nowrap;
}
.ui-footer-list a:hover {
color: var(--ui-white);
}
.ui-footer-list span {
color: var(--ui-gray-500);
font-size: var(--ui-text-xs);
}
.ui-footer-email-btn {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
background: var(--ui-primary-600);
color: var(--ui-white);
padding: var(--ui-space-2) var(--ui-space-4);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
text-decoration: none;
transition: background 150ms;
cursor: pointer;
}
.ui-footer-email-btn:hover {
background: var(--ui-primary-500);
}
.ui-footer-email-hint {
margin: var(--ui-space-2) 0 0;
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
}
.ui-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
padding: var(--ui-space-3) var(--ui-space-5);
border-top: 1px solid var(--ui-gray-800);
max-width: 1200px;
margin: 0 auto;
}
.ui-footer-bottom-links {
display: flex;
gap: var(--ui-space-3);
}
.ui-footer-bottom-links a {
color: var(--ui-gray-500);
text-decoration: none;
transition: color 150ms;
}
.ui-footer-bottom-links a:hover {
color: var(--ui-gray-300);
}
/* Minimal template */
.ui-footer-minimal {
padding: var(--ui-space-3) var(--ui-space-5);
}
/* Responsive */
@media (max-width: 768px) {
.ui-footer-grid {
grid-template-columns: 1fr;
gap: var(--ui-space-4);
}
.ui-footer-bottom {
flex-direction: column;
gap: var(--ui-space-2);
text-align: center;
}
}
/* ─────────────────────────────────────────────────────────────────────────
StepAnimator — stepped content reveal (Core/StepAnimator.js)
───────────────────────────────────────────────────────────────────────── */
.ui-step-animator {
background: linear-gradient(135deg, var(--ui-secondary-50), var(--ui-primary-50));
padding: var(--ui-space-4);
border-radius: var(--ui-radius-lg);
border: var(--ui-border-width) solid var(--ui-secondary-200);
}
.ui-step-animator-title {
font-weight: var(--ui-font-semibold);
color: var(--ui-secondary-800);
font-size: var(--ui-text-sm);
margin-bottom: var(--ui-space-3);
display: flex;
align-items: center;
gap: 8px;
}
.ui-step-animator-steps {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
margin-bottom: var(--ui-space-3);
}
.ui-step-animator-step {
display: flex;
align-items: flex-start;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-md);
background: var(--ui-gray-100);
opacity: 0.3;
transition: all 0.4s ease;
}
.ui-step-animator-step.visible {
opacity: 1;
background: rgba(255,255,255,0.8);
}
.ui-step-animator-step.active {
opacity: 1;
background: var(--ui-white);
box-shadow: var(--ui-shadow-md);
border: var(--ui-border-width) solid var(--ui-secondary-300);
}
.ui-step-animator-number {
width: 24px;
height: 24px;
border-radius: var(--ui-radius-full);
background: var(--ui-secondary-200);
color: var(--ui-secondary-700);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
flex-shrink: 0;
}
.ui-step-animator-number.active {
background: var(--ui-secondary);
color: white;
}
.ui-step-animator-content {
flex: 1;
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
line-height: var(--ui-line-height);
}
.ui-step-animator-controls {
display: flex;
gap: var(--ui-space-2);
}
.ui-step-animator-btn {
padding: 6px 14px;
border-radius: var(--ui-radius-md);
border: none;
cursor: pointer;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
display: flex;
align-items: center;
gap: 6px;
transition: all 0.15s;
}
.ui-step-animator-btn.primary {
background: var(--ui-secondary);
color: white;
}
.ui-step-animator-btn.primary:hover {
background: var(--ui-secondary-600);
}
.ui-step-animator-btn.secondary {
background: var(--ui-secondary-100);
color: var(--ui-secondary-800);
}
.ui-step-animator-btn.secondary:hover {
background: var(--ui-secondary-200);
}
.ui-step-animator-btn.muted {
background: var(--ui-gray-100);
color: var(--ui-gray-600);
}
.ui-step-animator-btn.muted:hover {
background: var(--ui-gray-200);
}
/* ═══ amanzitrack.theme.css ═══ */
/**
* AmanziTrack Theme CSS — Hyper-Parameter Overrides + at-* Utility Classes
*
* Scoped via :root overrides.
* Prefix: at- (namespace isolation)
*
* Sections:
* 1. Hyper-parameter overrides
* 2. Semantic color tokens
* 3. Status color classes
* 4. Layout utilities
* 5. Card & panel classes
* 6. Badge & chip classes
* 7. Typography utilities
* 8. Map overlay classes
*/
/* ═══════════════════════════════════════════════════════════════════
1. HYPER-PARAMETER OVERRIDES
═══════════════════════════════════════════════════════════════════ */
:root {
/* NIWIS/DWS primary: institutional blue → H≈210, S≈100 */
--hp-hue-1: 210;
--hp-sat-1: 85;
/* Secondary: teal/water → H≈175, S≈70 */
--hp-hue-2: 175;
--hp-sat-2: 70;
/* Accent: green (water/environment) → H≈152 */
--hp-hue-accent: 152;
}
/* ═══════════════════════════════════════════════════════════════════
1b. DEMO MODE BADGE
═══════════════════════════════════════════════════════════════════ */
.at-demo-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.65rem;
border-radius: var(--ui-radius-md, 4px);
background: #fbbf24;
color: #78350f;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
line-height: 1;
animation: at-demo-pulse 3s ease-in-out infinite;
}
.at-demo-badge i { font-size: 0.55rem; }
@keyframes at-demo-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Badge inside dark headers (launcher, module, pageframe) */
.launcher-header .at-demo-badge,
.launcher-module-header .at-demo-badge,
.launcher-login-header .at-demo-badge,
.ui-pageframe-header .at-demo-badge {
background: rgba(251, 191, 36, 0.9);
box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}
/* ═══════════════════════════════════════════════════════════════════
1c. EMBEDDED MODULE FOOTER FIX
BenchStamp PageFrame footers use --bs-* vars for text color.
These aren't defined in AmanziTrack, so text is invisible on dark bg.
═══════════════════════════════════════════════════════════════════ */
.bs-pf-footer-desc,
.bs-pf-footer-link-text {
color: var(--ui-gray-400, #9ca3af);
}
.bs-pf-footer-link-text:hover {
color: var(--ui-white, #fff);
}
.bs-pf-footer-copyright {
color: var(--ui-gray-500, #6b7280);
border-color: var(--ui-gray-700, #374151);
}
/* ═══════════════════════════════════════════════════════════════════
2. SEMANTIC COLOR TOKENS
═══════════════════════════════════════════════════════════════════ */
:root {
/* Brand — DWS blue */
--at-brand: var(--ui-primary-700, #003366);
--at-brand-light: var(--ui-primary-50, #e6f0fa);
--at-brand-hover: var(--ui-primary-100, #cce0f5);
/* Pipe material colors */
--at-pipe-ac: #e53e3e;
--at-pipe-ci: #dd6b20;
--at-pipe-upvc: #3182ce;
--at-pipe-hdpe: #38a169;
--at-pipe-di: #805ad5;
--at-pipe-steel: #718096;
/* Status colors */
--at-success: var(--ui-accent, #10b981);
--at-success-bg: var(--ui-accent-light, #ecfdf5);
--at-warning: var(--ui-warning, #f59e0b);
--at-warning-bg: var(--ui-warning-light, #fffbeb);
--at-danger: var(--ui-danger, #ef4444);
--at-danger-bg: var(--ui-danger-light, #fef2f2);
/* Grays */
--at-text: var(--ui-gray-800, #1e293b);
--at-text-secondary: var(--ui-gray-600, #475569);
--at-text-muted: var(--ui-gray-400, #94a3b8);
--at-bg: var(--ui-gray-50, #f8fafc);
--at-bg-subtle: var(--ui-gray-100, #f1f5f9);
--at-border: var(--ui-gray-200, #e2e8f0);
/* Shadows */
--at-shadow-sm: var(--ui-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
--at-shadow-md: var(--ui-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
/* Radius */
--at-radius: var(--ui-radius-lg, 6px);
--at-radius-lg: var(--ui-radius-xl, 8px);
--at-radius-sm: var(--ui-radius-md, 4px);
}
/* ═══════════════════════════════════════════════════════════════════
3. STATUS COLOR CLASSES
═══════════════════════════════════════════════════════════════════ */
.at-status {
display: inline-block;
font-size: var(--ui-text-2xs, 0.55rem);
font-weight: var(--ui-font-semibold, 600);
padding: 0.1rem 0.4rem;
border-radius: 9999px;
line-height: 1.4;
}
.at-status-detected { background: color-mix(in srgb, var(--at-warning) 12%, transparent); color: var(--at-warning); }
.at-status-investigating { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #3b82f6; }
.at-status-confirmed { background: color-mix(in srgb, var(--at-danger) 12%, transparent); color: var(--at-danger); }
.at-status-repaired { background: color-mix(in srgb, var(--at-success) 12%, transparent); color: var(--at-success); }
.at-status-verified { background: color-mix(in srgb, #64748b 12%, transparent); color: #64748b; }
/* ═══════════════════════════════════════════════════════════════════
4. LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════════ */
.at-flex-row { display: flex; align-items: center; }
.at-flex-col { display: flex; flex-direction: column; }
.at-flex-between { display: flex; align-items: center; justify-content: space-between; }
.at-flex-1 { flex: 1; min-height: 0; }
.at-gap-xs { gap: 0.2rem; }
.at-gap-sm { gap: 0.4rem; }
.at-gap-md { gap: 0.75rem; }
.at-gap-lg { gap: 1rem; }
.at-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.at-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.at-panel {
flex: 1;
min-height: 0;
overflow: auto;
padding: var(--ui-space-5, 1.25rem);
background: var(--at-bg);
}
/* ═══════════════════════════════════════════════════════════════════
5. CARD & PANEL CLASSES
═══════════════════════════════════════════════════════════════════ */
.at-card {
background: var(--ui-white, white);
border-radius: var(--at-radius-lg);
padding: 0.75rem;
box-shadow: var(--at-shadow-sm);
border: 1px solid var(--at-border);
}
.at-card-interactive {
background: var(--ui-white, white);
border-radius: var(--at-radius-lg);
padding: 0.75rem;
box-shadow: var(--at-shadow-sm);
border: 1px solid var(--at-border);
cursor: pointer;
transition: box-shadow 0.2s, transform 0.15s;
}
.at-card-interactive:hover {
box-shadow: var(--at-shadow-md);
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════════
6. BADGE & CHIP CLASSES
═══════════════════════════════════════════════════════════════════ */
.at-badge {
display: inline-block;
font-size: var(--ui-text-2xs, 0.55rem);
font-weight: var(--ui-font-semibold, 600);
padding: 0.1rem 0.3rem;
border-radius: var(--at-radius-sm);
line-height: 1.4;
}
.at-badge-brand { background: color-mix(in srgb, var(--at-brand) 12%, transparent); color: var(--at-brand); }
.at-badge-success { background: var(--at-success-bg); color: var(--at-success); }
.at-badge-warning { background: var(--at-warning-bg); color: var(--at-warning); }
.at-badge-danger { background: var(--at-danger-bg); color: var(--at-danger); }
/* ═══════════════════════════════════════════════════════════════════
7. TYPOGRAPHY UTILITIES
═══════════════════════════════════════════════════════════════════ */
.at-text-brand { color: var(--at-brand); }
.at-text-success { color: var(--at-success); }
.at-text-warning { color: var(--at-warning); }
.at-text-danger { color: var(--at-danger); }
.at-text-muted { color: var(--at-text-muted); }
.at-text-secondary { color: var(--at-text-secondary); }
.at-section-header {
font-size: var(--ui-text-xs, 0.75rem);
font-weight: var(--ui-font-bold, 700);
color: var(--at-text);
margin-bottom: 0.5rem;
}
.at-label {
font-size: var(--ui-text-2xs, 0.55rem);
color: var(--at-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: var(--ui-font-semibold, 600);
}
.at-empty-text {
font-size: var(--ui-text-xs, 0.7rem);
color: var(--at-text-muted);
padding: 0.5rem;
}
/* ═══════════════════════════════════════════════════════════════════
8. MAP OVERLAY CLASSES
═══════════════════════════════════════════════════════════════════ */
.at-map-container {
width: 100%;
height: 100%;
min-height: 400px;
border-radius: var(--at-radius-lg);
overflow: hidden;
border: 1px solid var(--at-border);
}
.at-map-legend {
background: rgba(255, 255, 255, 0.92);
padding: 0.5rem 0.75rem;
border-radius: var(--at-radius);
box-shadow: var(--at-shadow-sm);
font-size: var(--ui-text-2xs, 0.6rem);
line-height: 1.6;
}
.at-map-legend-item {
display: flex;
align-items: center;
gap: 0.3rem;
}
.at-map-legend-swatch {
width: 12px;
height: 12px;
border-radius: 2px;
flex-shrink: 0;
}
/* ── NDVI Patch Glow ── */
.at-patch-glow {
animation: at-pulse 2.5s ease-in-out infinite;
}
@keyframes at-pulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
/* ── Map-dominant KPI overlay ── */
.at-kpi-overlay {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
z-index: 1000;
display: flex;
gap: 0.5rem;
pointer-events: none;
}
.at-kpi-overlay .at-kpi-chip {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border-radius: var(--at-radius);
padding: 0.4rem 0.65rem;
display: flex;
align-items: center;
gap: 0.4rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
pointer-events: auto;
font-size: var(--ui-text-xs, 0.7rem);
}
.at-kpi-chip-value {
font-weight: 700;
font-size: 0.85rem;
color: var(--at-text);
}
.at-kpi-chip-label {
font-size: 0.55rem;
color: var(--at-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ── Patch detail popup ── */
.at-patch-popup {
min-width: 220px;
font-size: 0.7rem;
line-height: 1.5;
}
.at-patch-popup-header {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 700;
font-size: 0.8rem;
margin-bottom: 0.3rem;
color: var(--at-brand, #059669);
}
.at-patch-popup-row {
display: flex;
justify-content: space-between;
padding: 0.15rem 0;
border-bottom: 1px solid var(--at-border-light, #f1f5f9);
}
.at-patch-popup-label {
color: var(--at-text-muted);
}
.at-patch-popup-val {
font-weight: 600;
}
/* ── Info panel (slide-in on map) ── */
.at-info-panel {
position: absolute;
right: 10px;
top: 60px;
bottom: 40px;
width: 300px;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border-radius: var(--at-radius-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
overflow-y: auto;
padding: 0.75rem;
font-size: var(--ui-text-xs, 0.7rem);
transition: transform 0.25s ease, opacity 0.25s ease;
}
.at-info-panel.hidden {
transform: translateX(320px);
opacity: 0;
pointer-events: none;
}
.at-info-panel-close {
position: absolute;
top: 0.4rem;
right: 0.4rem;
cursor: pointer;
background: none;
border: none;
font-size: 0.8rem;
color: var(--at-text-muted);
}
.at-info-panel-title {
font-weight: 700;
font-size: 0.85rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
/* ── Confidence meter ── */
.at-conf-bar {
height: 6px;
background: var(--at-border, #e2e8f0);
border-radius: 3px;
overflow: hidden;
margin: 0.3rem 0;
}
.at-conf-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
/* ── Time slider (map bottom overlay) ── */
.at-time-slider {
position: absolute;
bottom: 50px;
left: 10px;
right: 10px;
z-index: 1000;
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border-radius: var(--at-radius);
padding: 0.4rem 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
pointer-events: auto;
font-size: var(--ui-text-xs, 0.7rem);
}
.at-time-slider-label {
font-weight: 600;
color: var(--at-text);
min-width: 80px;
display: flex;
align-items: center;
gap: 0.3rem;
}
.at-time-slider input[type="range"] {
flex: 1;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: var(--at-border);
border-radius: 2px;
outline: none;
cursor: pointer;
}
.at-time-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--at-brand, #059669);
cursor: grab;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.at-time-play {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: var(--at-brand, #059669);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.55rem;
flex-shrink: 0;
}
.at-time-play:hover {
background: var(--at-brand-hover, #047857);
}
/* ── Overview stage (map-dominant with absolute overlays) ── */
.at-overview-stage {
position: relative;
overflow: hidden;
}
.at-map-abs-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ── Map overlay metric chips (style ui-metric-chip inside overlay) ── */
.at-kpi-overlay .ui-metric-chip {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
pointer-events: auto;
}
/* ── Investigations layout ── */
.at-investigations-stage {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
padding: var(--ui-space-5);
}
/* ── Reports layout ── */
.at-reports-stage {
padding: var(--ui-space-5);
overflow-y: auto;
}
/* ── Filter controls (Satellite tab) ── */
.at-filter-section {
padding: 0.75rem;
}
.at-filter-group {
margin-bottom: 0.5rem;
}
.at-filter-label {
font-size: var(--ui-text-2xs);
color: var(--at-text-muted);
}
.at-filter-select {
width: 100%;
padding: 0.3rem;
border: 1px solid var(--at-border);
border-radius: var(--at-radius-sm);
font-size: var(--ui-text-xs);
}
.at-filter-checkbox {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: var(--ui-text-2xs);
cursor: pointer;
margin-bottom: 0.75rem;
}
/* ── Stage inner (flex column with gap) ── */
.at-stage-inner {
display: flex;
flex-direction: column;
gap: var(--ui-space-2);
}
/* ── Data source/method rows ── */
.at-source-row {
font-size: var(--ui-text-2xs);
line-height: 1.8;
}
.at-source-icon {
display: inline-block;
width: 16px;
text-align: center;
}
/* ── Alert warning strip ── */
.at-warning-strip {
margin-top: 0.3rem;
padding: 0.2rem 0.4rem;
background: var(--at-danger-bg);
border-radius: var(--at-radius-sm);
color: var(--at-danger);
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-semibold);
}
/* Kanban board */
.at-kanban {
display: flex;
gap: 0.5rem;
overflow-x: auto;
min-height: 300px;
}
.at-kanban-col {
flex: 1;
min-width: 180px;
background: var(--at-bg-subtle);
border-radius: var(--at-radius);
display: flex;
flex-direction: column;
}
.at-kanban-header {
padding: 0.5rem 0.6rem;
font-size: var(--ui-text-xs, 0.7rem);
font-weight: var(--ui-font-bold, 700);
border-bottom: 2px solid var(--at-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.at-kanban-body {
flex: 1;
padding: 0.4rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.at-kanban-card {
background: var(--ui-white, white);
border-radius: var(--at-radius-sm);
padding: 0.5rem;
box-shadow: var(--at-shadow-sm);
cursor: pointer;
transition: box-shadow 0.15s;
font-size: var(--ui-text-2xs, 0.6rem);
}
.at-kanban-card:hover {
box-shadow: var(--at-shadow-md);
}
/* Detail panel */
.at-detail-panel {
background: var(--ui-white, white);
border-radius: var(--at-radius-lg);
border: 1px solid var(--at-border);
padding: 0.75rem;
box-shadow: var(--at-shadow-sm);
}
/* Stacked bar charts (SIV composition, IWA balance) */
.at-stacked-bar {
display: flex;
border-radius: var(--ui-radius-md, 6px);
overflow: hidden;
}
.at-stacked-bar-sm {
display: flex;
height: 24px;
border-radius: var(--ui-radius-sm, 4px);
overflow: hidden;
margin-bottom: var(--ui-space-2, 0.35rem);
}
.at-stacked-bar-lg {
display: flex;
height: 32px;
border-radius: var(--ui-radius-md, 6px);
overflow: hidden;
margin-bottom: var(--ui-space-3, 0.5rem);
}
/* Data tables (consumption lenses, zone ranking) */
.at-data-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--ui-space-3, 0.5rem);
}
.at-data-table th {
text-align: left;
padding: var(--ui-space-2, 0.35rem) var(--ui-space-3, 0.5rem);
border-bottom: 2px solid var(--ui-gray-200, #e5e7eb);
font-size: var(--ui-text-xs, 0.7rem);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ui-gray-500, #6b7280);
font-weight: var(--ui-font-semibold, 600);
}
.at-data-table td {
padding: var(--ui-space-2, 0.35rem) var(--ui-space-3, 0.5rem);
font-size: var(--ui-text-sm, 0.8rem);
border-bottom: 1px solid var(--ui-gray-100, #f3f4f6);
}
.at-data-table tbody tr:nth-child(even) {
background: var(--ui-gray-50, #f9fafb);
}
.at-data-table tbody tr:hover {
background: var(--ui-primary-50, #f0fdf4);
}
/* Accent strip (for descriptions) */
.at-accent-strip {
border-left: 3px solid var(--ui-primary-200, #a7f3d0);
background: var(--at-bg-subtle);
padding: 0.5rem 0.75rem;
font-size: var(--ui-text-xs, 0.7rem);
color: var(--at-text-secondary);
line-height: 1.5;
border-radius: 0 var(--at-radius-sm) var(--at-radius-sm) 0;
}
/* ═══════════════════════════════════════════════════════════════════
9. LAUNCHER CLASSES
═══════════════════════════════════════════════════════════════════ */
/* ── Module body states ── */
.at-launcher-body-full { flex: 1; overflow: auto; }
.at-launcher-body-padded { flex: 1; overflow: auto; padding: 2rem; }
.at-launcher-body-flush { padding: 0; }
/* ── Content wrap (settings / docs) ── */
.at-launcher-wrap { max-width: 900px; margin: 0 auto; }
/* ── Section card (settings / docs) ── */
.at-launcher-section {
background: var(--ui-white, white);
border-radius: var(--at-radius-lg);
padding: 1.5rem;
box-shadow: var(--at-shadow-sm);
margin-bottom: 1.25rem;
}
.at-launcher-section-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--at-bg-subtle);
}
.at-launcher-section-title {
font-size: var(--ui-text-sm, 0.95rem);
font-weight: var(--ui-font-bold, 700);
color: var(--at-text);
}
.at-launcher-section-count {
margin-left: auto;
font-size: var(--ui-text-2xs, 0.7rem);
color: var(--at-text-muted);
}
.at-launcher-section-icon { color: var(--at-text-secondary); }
/* ── User table (settings) ── */
.at-launcher-user-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ui-text-xs, 0.78rem);
}
.at-launcher-user-table thead tr {
text-align: left;
color: var(--at-text-secondary);
font-size: var(--ui-text-2xs, 0.7rem);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.at-launcher-user-table th { padding: 0.5rem 0.75rem; }
.at-launcher-user-table tbody tr { border-top: 1px solid var(--at-bg-subtle); }
.at-launcher-user-table td { padding: 0.6rem 0.75rem; }
.at-launcher-user-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
.at-launcher-user-table td.at-launcher-user-cell-td {
display: flex;
align-items: center;
gap: 0.5rem;
}
.at-launcher-td-role { color: var(--at-text-secondary); }
/* ── Inline avatar (small, settings table) ── */
.at-launcher-avatar-sm {
width: 28px;
height: 28px;
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: var(--ui-font-bold, 700);
flex-shrink: 0;
}
/* ── Status badge ── */
.at-launcher-status-active {
font-size: var(--ui-text-2xs, 0.65rem);
padding: 0.15rem 0.5rem;
border-radius: var(--at-radius-sm);
background: var(--at-success-bg);
color: var(--at-success);
font-weight: var(--ui-font-semibold, 600);
}
/* ── Role chips ── */
.at-launcher-role-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.at-launcher-role-chip {
font-size: var(--ui-text-xs, 0.75rem);
padding: 0.4rem 0.8rem;
border-radius: var(--at-radius);
background: var(--at-bg-subtle);
color: var(--at-text);
font-weight: var(--ui-font-medium, 500);
}
/* ── System info grid ── */
.at-launcher-sysinfo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
font-size: var(--ui-text-xs, 0.78rem);
}
.at-launcher-sysinfo-label { color: var(--at-text-muted); }
/* ── Docs list ── */
.at-launcher-doc-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.at-launcher-doc-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
border-radius: var(--at-radius-lg);
cursor: pointer;
transition: background 0.15s;
}
.at-launcher-doc-item:hover { background: var(--at-bg); }
.at-launcher-doc-icon {
color: var(--at-text-muted);
margin-top: 0.15rem;
font-size: var(--ui-text-xs, 0.8rem);
flex-shrink: 0;
}
.at-launcher-doc-name {
font-size: var(--ui-text-xs, 0.82rem);
font-weight: var(--ui-font-semibold, 600);
color: var(--at-text);
}
.at-launcher-doc-desc {
font-size: var(--ui-text-2xs, 0.72rem);
color: var(--at-text-secondary);
line-height: 1.5;
margin-top: 0.15rem;
}
/* ── Loading spinner ── */
.at-launcher-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex-direction: column;
gap: 1rem;
}
.at-launcher-loading-icon {
font-size: 2rem;
color: var(--at-brand);
animation: spin 1s linear infinite;
}
.at-launcher-loading-text {
font-size: var(--ui-text-xs, 0.85rem);
color: var(--at-text-secondary);
}
/* ── Error state ── */
.at-launcher-error {
text-align: center;
padding: 3rem;
color: var(--at-danger);
}
.at-launcher-error-icon {
font-size: 2rem;
margin-bottom: 1rem;
display: block;
}
/* ── Module header user info ── */
.at-launcher-header-name {
font-weight: var(--ui-font-semibold, 600);
font-size: var(--ui-text-xs, 0.8rem);
}
.at-launcher-header-role {
font-size: var(--ui-text-2xs, 0.65rem);
opacity: 0.7;
}
/* ── Module title icon ── */
.at-launcher-title-icon {
margin-right: 0.5rem;
opacity: 0.8;
}
/* ── Back button margin (inside page-frame headers) ── */
.at-launcher-back-margin { margin-right: 0.5rem; }
/* ── Footer paragraph gap ── */
.at-launcher-footer-gap { margin-top: 0.75rem; }
/* ── Footer button states ── */
.at-launcher-btn-error { background: var(--at-danger) !important; }
.at-launcher-btn-success { background: var(--at-success) !important; }
/* ═══ amanzitrack.css ═══ */
/**
* AmanziTrack Layout CSS
*
* Layout classes specific to AmanziTrack views.
* Uses --at-* and --ui-* tokens only.
*/
/* ── Four-lens grid (Consumption tab) ── */
.at-four-lens {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
flex: 1;
min-height: 0;
}
.at-lens-panel {
background: var(--ui-white, white);
border-radius: var(--at-radius-lg);
border: 1px solid var(--at-border);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.at-lens-header {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--at-border);
display: flex;
align-items: center;
gap: 0.4rem;
font-size: var(--ui-text-xs, 0.7rem);
font-weight: var(--ui-font-bold, 700);
color: var(--at-text);
flex-shrink: 0;
}
.at-lens-body {
flex: 1;
min-height: 0;
overflow: auto;
padding: 0.4rem;
}
/* ── KPI strip ── */
.at-kpi-strip {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
flex-shrink: 0;
}
/* ── Activity feed ── */
.at-activity-feed {
font-size: var(--ui-text-2xs, 0.6rem);
}
.at-activity-item {
display: flex;
align-items: flex-start;
gap: 0.4rem;
padding: 0.3rem 0;
border-bottom: 1px solid var(--at-border);
}
.at-activity-item:last-child {
border-bottom: none;
}
.at-activity-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 0.3rem;
}
/* ── DMA bar chart inline ── */
.at-dma-bar {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0;
font-size: var(--ui-text-2xs, 0.6rem);
}
.at-dma-bar-label {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--at-text-secondary);
}
.at-dma-bar-track {
flex: 1;
height: 8px;
background: var(--at-bg-subtle);
border-radius: 4px;
overflow: hidden;
}
.at-dma-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s;
}
.at-dma-bar-value {
width: 35px;
text-align: right;
font-weight: var(--ui-font-semibold, 600);
}
/* ── Table styles ── */
.at-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ui-text-2xs, 0.6rem);
}
.at-table th {
padding: 0.35rem 0.5rem;
text-align: left;
font-weight: var(--ui-font-semibold, 600);
color: var(--at-text-secondary);
border-bottom: 2px solid var(--at-border);
background: var(--at-bg-subtle);
font-size: var(--ui-text-2xs, 0.6rem);
}
.at-table td {
padding: 0.3rem 0.5rem;
border-bottom: 1px solid var(--at-border);
}
.at-table tr:hover {
background: var(--at-bg-subtle);
}
/* ── Responsive ── */
@media (max-width: 900px) {
.at-four-lens {
grid-template-columns: 1fr;
}
}
/* ═══ ../RiverHealth/riverhealth.theme.css ═══ */
/**
* riverhealth.theme.css — RiverHealth system theme
*
* Uses --ui-* hyper-parameter variables from class.ui.css.
* Water/environmental palette: teal-blue primary, green accents.
*/
/* ── System Hyper-Parameter Overrides ─────────────────────────────────── */
.riverhealth {
--hp-hue-1: 195;
--hp-sat-1: 65;
--hp-hue-accent: 142;
--hp-density: 0.9;
--hp-corner-scale: 0.85;
--hp-shadow-intensity: 0.08;
/* ── Semantic Color Palette ── */
--rh-good: hsl(142, 57%, 38%);
--rh-good-bg: hsl(142, 57%, 94%);
--rh-good-text: hsl(142, 57%, 28%);
--rh-good-border: hsl(142, 57%, 80%);
--rh-warning: hsl(38, 57%, 45%);
--rh-warning-bg: hsl(38, 57%, 94%);
--rh-warning-text: hsl(38, 57%, 30%);
--rh-warning-border:hsl(38, 57%, 80%);
--rh-danger: hsl(15, 57%, 45%);
--rh-danger-bg: hsl(15, 57%, 95%);
--rh-danger-text: hsl(15, 57%, 35%);
--rh-danger-border: hsl(15, 57%, 80%);
--rh-critical: hsl(0, 57%, 45%);
--rh-critical-bg: hsl(0, 57%, 95%);
--rh-critical-text: hsl(0, 57%, 35%);
--rh-critical-border:hsl(0, 57%, 70%);
--rh-na: hsl(210, 10%, 50%);
--rh-na-bg: hsl(210, 10%, 94%);
--rh-na-text: hsl(210, 10%, 40%);
--rh-na-border: hsl(210, 10%, 85%);
--rh-teal: hsl(195, 65%, 45%);
--rh-teal-dark: hsl(195, 65%, 25%);
--rh-amber: hsl(38, 92%, 50%);
--rh-gray-muted: hsl(210, 10%, 50%);
}
/* ── Stage Background Tint ──────────────────────────────────────────── */
.riverhealth .ui-pageframe-stage {
background: color-mix(in srgb, var(--ui-primary-50, hsl(195,65%,95%)) 15%, var(--ui-white, #fff));
}
/* ── Health Status Palette ────────────────────────────────────────────── */
.rh-status-good { color: var(--rh-good); }
.rh-status-warning { color: var(--rh-warning); }
.rh-status-danger { color: var(--rh-danger); }
.rh-status-critical { color: var(--rh-critical); }
.rh-status-na { color: var(--rh-na); }
.rh-bg-good { background: var(--rh-good-bg); }
.rh-bg-warning { background: var(--rh-warning-bg); }
.rh-bg-danger { background: var(--rh-danger-bg); }
.rh-bg-critical { background: var(--rh-critical-bg); }
.rh-bg-na { background: var(--rh-na-bg); }
.rh-badge-good { background: var(--rh-good-bg); color: var(--rh-good-text); }
.rh-badge-warning { background: var(--rh-warning-bg); color: var(--rh-warning-text); }
.rh-badge-danger { background: var(--rh-danger-bg); color: var(--rh-danger-text); }
.rh-badge-critical { background: var(--rh-critical-bg); color: var(--rh-critical-text); }
.rh-badge-na { background: var(--rh-na-bg); color: var(--rh-na-text); }
.rh-left-good { border-left: 3px solid var(--rh-good); }
.rh-left-warning { border-left: 3px solid var(--rh-warning); }
.rh-left-danger { border-left: 3px solid var(--rh-danger); }
.rh-left-critical { border-left: 3px solid var(--rh-critical); }
/* ── About Section Styles ─────────────────────────────────────────────── */
.rh-about-header {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-5) var(--ui-space-6);
background: linear-gradient(135deg, var(--rh-teal-dark) 0%, var(--rh-teal) 100%);
color: var(--ui-white);
border-radius: var(--ui-radius-lg);
margin-bottom: var(--ui-space-5);
}
.rh-about-header-icon {
font-size: var(--ui-text-3xl);
opacity: 0.9;
}
.rh-about-header-title {
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
}
.rh-about-header-tagline {
font-size: var(--ui-text-sm);
opacity: 0.85;
}
.rh-about-header-version {
font-size: var(--ui-text-xs);
opacity: 0.65;
margin-left: auto;
}
.rh-about-section {
padding: var(--ui-space-4) var(--ui-space-5);
line-height: 1.65;
}
.rh-about-para {
margin-bottom: var(--ui-space-3);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
line-height: 1.7;
}
.rh-about-heading {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
margin: var(--ui-space-4) 0 var(--ui-space-2) 0;
padding-bottom: var(--ui-space-1);
border-bottom: 1px solid var(--ui-gray-100);
}
.rh-about-badge {
display: inline-block;
padding: 0.15rem 0.55rem;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
margin: 0.15rem;
}
.rh-about-stat-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
background: color-mix(in srgb, var(--ui-primary) 10%, transparent);
color: var(--ui-primary-700);
}
.rh-about-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ui-text-sm);
margin: var(--ui-space-3) 0;
}
.rh-about-table th {
text-align: left;
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-gray-50);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-600);
font-size: var(--ui-text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid var(--ui-gray-200);
}
.rh-about-table td {
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--ui-gray-100);
color: var(--ui-gray-700);
}
.rh-about-table tr:hover td {
background: var(--ui-gray-50);
}
.rh-about-code {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: var(--ui-text-xs);
background: var(--ui-gray-50);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-3) var(--ui-space-4);
overflow-x: auto;
white-space: pre;
line-height: 1.5;
color: var(--ui-gray-700);
}
.rh-about-checklist {
list-style: none;
padding: 0;
margin: var(--ui-space-2) 0;
}
.rh-about-checklist li {
padding: var(--ui-space-1) 0;
padding-left: 1.5rem;
position: relative;
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.rh-about-checklist li::before {
position: absolute;
left: 0;
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: var(--ui-text-xs);
}
.rh-about-checklist li.done::before {
content: '\f00c';
color: var(--rh-good);
}
.rh-about-checklist li.todo::before {
content: '\f111';
color: var(--ui-gray-300);
}
.rh-about-checklist li.active::before {
content: '\f04b';
color: var(--ui-primary);
}
.rh-about-checklist .rh-about-phase-header {
padding-left: 0;
margin-top: var(--ui-space-3);
font-size: var(--ui-text-sm);
color: var(--ui-secondary-600);
border-bottom: 1px solid var(--ui-gray-100);
padding-bottom: var(--ui-space-1);
}
.rh-about-checklist .rh-about-phase-header::before {
display: none;
}
/* ── Map Styles ───────────────────────────────────────────────────────── */
.rh-map-container {
border-radius: var(--ui-radius-lg);
border: 1px solid var(--ui-gray-200);
overflow: hidden;
}
.rh-map-container-sm { height: 400px; }
.rh-map-container-lg { height: 500px; }
/* ── Spacing Helpers ── */
.rh-mt-4 { margin-top: var(--ui-space-4); }
.rh-mb-3 { margin-bottom: var(--ui-space-3); }
.rh-mb-4 { margin-bottom: var(--ui-space-4); }
/* ── Critical pulse ───────────────────────────────────────────────────── */
@keyframes rh-pulse-critical {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.rh-pulse-critical { animation: rh-pulse-critical 2s ease-in-out infinite; }
/* ── View Layout Styles ──────────────────────────────────────────────── */
.rh-dashboard {
padding: var(--ui-space-5) var(--ui-space-6);
}
.rh-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ui-space-4);
}
.rh-card {
background: var(--ui-white, #fff);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-sm);
overflow: hidden;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.rh-card:hover {
transform: translateY(-1px);
box-shadow: var(--ui-shadow-md);
}
.rh-card-header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
font-weight: var(--ui-font-semibold);
font-size: var(--ui-text-sm);
color: var(--ui-gray-800);
border-bottom: 1px solid var(--ui-gray-100);
background: linear-gradient(135deg,
color-mix(in srgb, var(--ui-primary, hsl(195,65%,45%)) 6%, transparent) 0%,
transparent 100%);
}
.rh-card-header i { color: var(--ui-primary, hsl(195,65%,45%)); }
.rh-card-body { padding: var(--ui-space-4); }
.rh-header-badge {
margin-left: auto;
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
font-weight: var(--ui-font-normal);
}
.rh-metrics-row {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
}
.rh-metric-chip {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
border-radius: var(--ui-radius-xl);
font-size: var(--ui-text-base);
background: color-mix(in srgb, var(--ui-primary, hsl(195,65%,45%)) 10%, transparent);
color: var(--ui-primary-700, hsl(195,65%,25%));
border: 1px solid color-mix(in srgb, var(--ui-primary, hsl(195,65%,45%)) 20%, transparent);
box-shadow: var(--ui-shadow-sm);
}
.rh-metric-chip strong {
font-size: var(--ui-text-lg);
}
.rh-metric-danger {
background: var(--rh-critical-bg);
color: var(--rh-critical-text);
border-color: color-mix(in srgb, var(--rh-critical) 30%, transparent);
}
.rh-form-group {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
}
.rh-form-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-600);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rh-form-select {
padding: var(--ui-space-2) var(--ui-space-3);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
background: var(--ui-white, #fff);
}
.rh-form-select:focus {
outline: none;
border-color: var(--ui-primary, hsl(195,65%,45%));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-primary, hsl(195,65%,45%)) 20%, transparent);
}
.rh-location-info {
padding: var(--ui-space-2) var(--ui-space-3);
background: color-mix(in srgb, var(--ui-primary, hsl(195,65%,45%)) 8%, transparent);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.rh-info-badge {
display: inline-block;
margin-left: var(--ui-space-2);
padding: 0 var(--ui-space-2);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
background: var(--ui-primary-100, hsl(195,65%,92%));
color: var(--ui-primary-700, hsl(195,65%,25%));
}
.rh-info-date {
margin-left: var(--ui-space-2);
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
}
.rh-chart-container {
position: relative;
height: 280px;
margin-top: var(--ui-space-3);
}
.rh-map-legend {
display: flex;
gap: var(--ui-space-4);
margin-top: var(--ui-space-3);
font-size: var(--ui-text-xs);
color: var(--ui-gray-600);
}
.rh-legend-dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
}
.rh-btn {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
cursor: pointer;
background: var(--ui-white, #fff);
color: var(--ui-gray-700);
}
.rh-btn:hover { background: var(--ui-gray-50); }
.rh-btn-primary {
background: var(--ui-primary, hsl(195,65%,45%));
color: var(--ui-white, #fff);
border-color: var(--ui-primary, hsl(195,65%,45%));
}
.rh-btn-primary:hover { opacity: 0.9; }
.rh-btn-sm {
padding: var(--ui-space-1) var(--ui-space-2);
font-size: var(--ui-text-xs);
}
.rh-data-controls {
display: flex;
gap: var(--ui-space-3);
align-items: flex-end;
margin-bottom: var(--ui-space-3);
}
.rh-data-table-wrap {
overflow: auto;
max-height: 500px;
}
.rh-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--ui-space-3);
font-size: var(--ui-text-sm);
}
.rh-page-btns {
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.rh-muted {
color: var(--ui-gray-500);
font-size: var(--ui-text-sm);
}
.rh-sub-tabs {
display: flex;
gap: var(--ui-space-1);
margin-bottom: var(--ui-space-4);
border-bottom: 2px solid var(--ui-gray-100);
padding-bottom: var(--ui-space-2);
}
.rh-sub-tab {
display: inline-flex;
align-items: center;
gap: var(--ui-space-1);
padding: var(--ui-space-2) var(--ui-space-3);
border: none;
border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
background: transparent;
color: var(--ui-gray-500);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
cursor: pointer;
transition: color 150ms ease, background 150ms ease;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.rh-sub-tab:hover { color: var(--ui-gray-700); background: var(--ui-gray-50); }
.rh-sub-tab.active {
color: var(--ui-primary, hsl(195,65%,45%));
background: color-mix(in srgb, var(--ui-primary, hsl(195,65%,45%)) 6%, transparent);
font-weight: var(--ui-font-semibold);
border-bottom-color: var(--ui-primary, hsl(195,65%,45%));
}
.rh-scroll-300 { max-height: 400px; overflow-y: auto; }
.rh-health-cell {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 32px;
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-bold);
box-shadow: var(--ui-shadow-sm);
}
.rh-good { background: var(--rh-good-bg); color: var(--rh-good-text); border: 1px solid var(--rh-good-border); }
.rh-warning { background: var(--rh-warning-bg); color: var(--rh-warning-text); border: 1px solid var(--rh-warning-border); }
.rh-danger { background: var(--rh-danger-bg); color: var(--rh-danger-text); border: 1px solid var(--rh-danger-border); }
.rh-critical { background: var(--rh-critical-bg); color: var(--rh-critical-text); border: 1px solid var(--rh-critical-border); }
.rh-na { background: var(--rh-na-bg); color: var(--rh-na-text); border: 1px solid var(--rh-na-border); }
.rh-vertical-header {
writing-mode: vertical-lr;
transform: rotate(180deg);
font-size: var(--ui-text-xs);
min-width: 50px;
}
.rh-param-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--ui-gray-100);
font-size: var(--ui-text-sm);
}
.rh-param-row:hover { background: var(--ui-gray-50); }
.rh-param-row.rh-selected { background: color-mix(in srgb, var(--ui-primary) 8%, transparent); }
.rh-param-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.rh-param-dot.rh-status-good { background: var(--rh-good); }
.rh-param-dot.rh-status-warning { background: var(--rh-warning); }
.rh-param-dot.rh-status-danger { background: var(--rh-danger); }
.rh-param-dot.rh-status-critical { background: var(--rh-critical); }
.rh-param-name { flex: 1; }
.rh-site-info { flex: 1; }
.rh-alert-date { margin-left: auto; }
.rh-detail-close { margin-left: auto; }
.rh-health-cell-lg { width: 48px; height: 32px; font-size: var(--ui-text-base); }
.rh-health-cell-sm { width: 32px; height: 20px; font-size: var(--ui-text-xs); }
.rh-param-card-header { display: flex; justify-content: space-between; align-items: center; }
.rh-param-latest { margin-top: var(--ui-space-1); }
.rh-param-trend { margin-top: var(--ui-space-1); }
.rh-col-site { min-width: 140px; }
.rh-col-site-cell { font-weight: var(--ui-font-medium); }
.rh-col-trend { text-align: center; }
.rh-matrix-wrap { max-height: 600px; }
.rh-chart-container-lg { height: 300px; }
.rh-config-actions { display: flex; gap: var(--ui-space-3); }
.rh-sort-icon { opacity: 0.3; }
.rh-worsening-item { flex-direction: column; align-items: flex-start; }
.rh-worsening-params { margin-top: var(--ui-space-1); }
.rh-worsening-tag { margin-right: var(--ui-space-2); }
.rh-data-filter-wrap { flex: 1; }
.rh-map-popup { font-size: var(--ui-text-sm); }
.rh-badge-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: var(--ui-space-2) 0;
}
.rh-chip-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: var(--ui-space-3) 0;
}
.rh-about-formula {
text-align: center;
font-size: var(--ui-text-base);
}
/* ── WQAI Styles ──────────────────────────────────────────────────────── */
.rh-rank-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
background: var(--ui-gray-100);
color: var(--ui-gray-600);
flex-shrink: 0;
}
.rh-qaz-positive { color: var(--rh-good-text); }
.rh-qaz-negative { color: var(--rh-critical-text); }
.rh-anomaly-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--ui-gray-100);
font-size: var(--ui-text-xs);
}
.rh-anomaly-row:hover { background: var(--ui-gray-50); }
.rh-anomaly-badge {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-semibold);
}
.rh-anomaly-badge-positive { background: var(--rh-good-bg); color: var(--rh-good-text); }
.rh-anomaly-badge-negative { background: var(--rh-critical-bg); color: var(--rh-critical-text); }
.rh-wqai-builtin-badge {
background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
color: var(--ui-accent);
margin-left: 0.3rem;
font-size: var(--ui-text-2xs);
}
.rh-wqai-weight-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-1) 0;
border-bottom: 1px solid var(--ui-gray-50);
}
.rh-wqai-weight-check {
display: flex;
align-items: center;
gap: var(--ui-space-1);
flex: 1;
font-size: var(--ui-text-xs);
cursor: pointer;
min-width: 0;
}
.rh-wqai-weight-check input[type="checkbox"] {
accent-color: var(--ui-primary);
}
.rh-wqai-weight-check span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rh-wqai-weight-slider {
width: 80px;
flex-shrink: 0;
accent-color: var(--ui-primary);
}
.rh-wqai-weight-value {
width: 20px;
text-align: right;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-bold);
color: var(--ui-primary-700);
flex-shrink: 0;
}
.rh-temporal-slider {
margin-top: var(--ui-space-3);
padding: var(--ui-space-2) var(--ui-space-3);
background: var(--ui-gray-50);
border-radius: var(--ui-radius-md);
}
.rh-temporal-controls {
display: flex;
align-items: center;
gap: var(--ui-space-3);
}
.rh-temporal-range {
flex: 1;
accent-color: var(--ui-primary);
}
.rh-alert-count {
padding: 0 var(--ui-space-2);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
background: var(--rh-critical-bg);
color: var(--rh-critical-text);
}
.rh-alert-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--ui-gray-100);
font-size: var(--ui-text-xs);
}
.rh-alert-msg {
width: 100%;
color: var(--ui-gray-500);
margin-top: 2px;
}
.rh-alert-icon-critical { color: var(--rh-critical-text); }
.rh-alert-icon-danger { color: var(--rh-danger); }
.rh-alert-icon-warning { color: var(--rh-warning); }
.rh-site-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--ui-space-3);
}
.rh-param-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--ui-space-3);
}
.rh-param-card {
padding: var(--ui-space-3);
background: var(--ui-gray-50);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-xs);
}
.rh-config-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--ui-space-3);
}
.rh-stats-box {
padding: var(--ui-space-3);
background: var(--ui-gray-50);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-xs);
color: var(--ui-gray-600);
line-height: 1.6;
}
.rh-stats-box h4 {
margin: 0 0 var(--ui-space-1) 0;
font-size: var(--ui-text-sm);
color: var(--ui-gray-800);
}
.rh-divider {
margin: var(--ui-space-2) 0;
border: none;
border-top: 1px solid var(--ui-gray-200);
}
.rh-worsening-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--ui-space-3);
}
/* ── Table Zebra Striping & Hover ────────────────────────────────────── */
.rh-about-table tbody tr:nth-child(even) td {
background: var(--ui-gray-50);
}
.rh-about-table tbody tr:hover td {
background: color-mix(in srgb, var(--ui-primary, hsl(195,65%,45%)) 8%, transparent) !important;
}
/* ── Value Color Coding (Data Table) ────────────────────────────────── */
.rh-value-critical {
color: var(--rh-critical-text);
font-weight: var(--ui-font-bold);
background: var(--rh-critical-bg);
padding: 2px 6px;
border-radius: var(--ui-radius-sm);
}
.rh-value-warning {
color: var(--rh-warning-text);
font-weight: var(--ui-font-semibold);
}
.rh-value-good {
color: var(--rh-good-text);
}
/* ── Alert Row Severity ─────────────────────────────────────────────── */
.rh-alert-row-critical {
background: var(--rh-critical-bg);
border-left: 3px solid var(--rh-critical);
}
.rh-alert-row-warning {
background: var(--rh-warning-bg);
border-left: 3px solid var(--rh-warning);
}
tr.rh-alert-row-critical td { background: var(--rh-critical-bg); }
tr.rh-alert-row-warning td { background: var(--rh-warning-bg); }
/* ── Map Empty State ────────────────────────────────────────────────── */
.rh-map-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 280px;
text-align: center;
gap: var(--ui-space-2);
}
.rh-map-empty-state i {
font-size: var(--ui-text-3xl);
color: var(--ui-primary-200, hsl(195,65%,80%));
}
.rh-map-empty-state .rh-empty-title {
font-size: var(--ui-text-base);
color: var(--ui-gray-500);
margin-top: var(--ui-space-2);
}
.rh-map-empty-state .rh-empty-hint {
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
}
@media (max-width: 1024px) {
.rh-grid-2 { grid-template-columns: 1fr; }
.rh-config-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.rh-dashboard { padding: var(--ui-space-3); }
.rh-config-grid { grid-template-columns: 1fr; }
.rh-metrics-row { flex-direction: column; }
}
/* ═══ ../HydroBlu/hydroblu.theme.css ═══ */
/* HydroBlu Theme — deep blue-green water palette */
:root {
--hp-hue-1: 210;
--hp-sat-1: 70;
--hp-hue-2: 160;
--hp-sat-2: 55;
--hp-hue-accent: 195;
}
/* Stat row */
.hb-stat-row {
display: flex;
gap: var(--ui-space-3);
margin-bottom: var(--ui-space-4);
flex-wrap: wrap;
}
.hb-stat-chip {
background: var(--ui-white);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
padding: var(--ui-space-3) var(--ui-space-4);
flex: 1;
min-width: 120px;
text-align: center;
box-shadow: var(--ui-shadow-sm);
}
.hb-stat-chip-value {
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
color: var(--ui-gray-800);
}
.hb-stat-chip-label {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-top: 2px;
}
/* Map */
.hb-map-card {
background: var(--ui-white);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-sm);
overflow: hidden;
}
.hb-map {
height: 550px;
width: 100%;
}
/* Legend */
.hb-legend {
display: flex;
align-items: center;
gap: var(--ui-space-4);
padding: var(--ui-space-3) var(--ui-space-4);
font-size: var(--ui-text-xs);
color: var(--ui-gray-600);
border-top: 1px solid var(--ui-gray-100);
}
.hb-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 4px;
vertical-align: middle;
}
.hb-legend-count {
margin-left: auto;
color: var(--ui-gray-400);
font-style: italic;
}
/* Region buttons */
.hb-region-bar {
display: flex;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-4) var(--ui-space-3);
}
.hb-region-btn {
border: 1px solid var(--ui-gray-200);
background: var(--ui-white);
border-radius: var(--ui-radius-md);
padding: var(--ui-space-1) var(--ui-space-3);
font-size: var(--ui-text-xs);
color: var(--ui-gray-600);
cursor: pointer;
transition: all 0.15s;
}
.hb-region-btn:hover {
background: var(--ui-primary-50);
border-color: var(--ui-primary-200);
color: var(--ui-primary-700);
}
/* About page */
.hb-about-header {
display: flex;
align-items: center;
gap: var(--ui-space-4);
padding: var(--ui-space-5) var(--ui-space-6);
background: linear-gradient(135deg, hsl(210, 70%, 45%), hsl(160, 55%, 40%));
color: white;
border-radius: var(--ui-radius-lg);
margin-bottom: var(--ui-space-4);
}
.hb-about-section {
padding: var(--ui-space-4);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
line-height: 1.65;
}
.hb-about-para {
margin: 0 0 var(--ui-space-3);
}
.hb-about-heading {
font-size: var(--ui-text-base);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
margin: var(--ui-space-4) 0 var(--ui-space-2);
padding-bottom: var(--ui-space-1);
border-bottom: 1px solid var(--ui-gray-100);
}
.hb-about-list {
margin: var(--ui-space-2) 0;
padding-left: 1.5rem;
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
}
.hb-about-list li {
margin-bottom: var(--ui-space-2);
}
/* ── Layout ── */
.hb-card {
background: var(--ui-white);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-sm);
padding: var(--ui-space-4);
}
.hb-card--flush { padding: 0; overflow: hidden; }
.hb-pane-header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: 1px solid var(--ui-gray-100);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hb-section-label {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--ui-space-3);
}
.hb-two-pane {
display: flex;
gap: var(--ui-space-4);
height: 600px;
min-height: 0;
}
.hb-pane-left { flex: 3; min-width: 0; display: flex; flex-direction: column; }
.hb-pane-right { flex: 2; min-width: 0; display: flex; flex-direction: column; }
.hb-pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ui-space-4); }
.hb-flex-col { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.hb-flex-row { display: flex; gap: var(--ui-space-4); align-items: flex-start; }
/* ── Status badge ── */
.hb-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px var(--ui-space-3);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
}
.hb-status-badge--active {
color: var(--ui-success);
background: rgba(34, 197, 94, 0.1);
}
.hb-status-badge--inactive {
color: var(--ui-danger);
background: rgba(239, 68, 68, 0.1);
}
.hb-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
}
/* ── Detail rows (GIS attributes) ── */
.hb-detail-row {
display: flex;
align-items: flex-start;
gap: var(--ui-space-3);
padding: var(--ui-space-2) 0;
border-bottom: 1px solid var(--ui-gray-100);
}
.hb-detail-icon {
width: 28px;
height: 28px;
border-radius: var(--ui-radius-md);
background: var(--ui-primary-50);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
font-size: var(--ui-text-xs);
color: var(--ui-primary-400);
}
.hb-detail-label {
font-size: var(--ui-text-2xs);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.hb-detail-value {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-800);
}
.hb-detail-header {
background: var(--ui-gray-50);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-lg);
padding: var(--ui-space-4);
margin-bottom: var(--ui-space-4);
}
.hb-detail-title {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-bold);
color: var(--ui-gray-800);
}
.hb-detail-coords {
display: flex;
gap: var(--ui-space-4);
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
}
/* ── Empty / prompt state ── */
.hb-prompt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 320px;
gap: var(--ui-space-3);
color: var(--ui-gray-400);
text-align: center;
}
.hb-prompt-icon { font-size: 2rem; opacity: 0.4; }
.hb-prompt-text { font-size: var(--ui-text-sm); font-weight: var(--ui-font-medium); }
.hb-prompt-sub { font-size: var(--ui-text-xs); color: var(--ui-gray-300); max-width: 200px; line-height: 1.5; }
/* ── ML View ── */
.hb-model-summary {
border-left: 3px solid var(--ui-primary-200);
background-color: var(--ui-gray-50);
}
.hb-model-title {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
margin-bottom: var(--ui-space-1);
}
.hb-model-desc {
font-size: var(--ui-text-sm);
color: var(--ui-gray-500);
margin-bottom: var(--ui-space-3);
}
.hb-model-meta {
display: flex;
flex-wrap: wrap;
gap: var(--ui-space-3);
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
}
.hb-active-badge {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-1) var(--ui-space-3);
background: var(--ui-success);
color: var(--ui-white);
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
white-space: nowrap;
}
.hb-metric-chip {
flex: 1;
display: flex;
align-items: center;
gap: var(--ui-space-3);
}
.hb-metric-chip-icon {
color: var(--ui-primary);
font-size: var(--ui-text-base);
opacity: 0.7;
}
.hb-metric-chip-value {
font-size: var(--ui-text-lg);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-900);
line-height: 1.2;
}
.hb-metric-chip-label {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-top: 2px;
}
/* Confusion matrix */
.hb-confusion-cell {
flex: 1;
padding: var(--ui-space-3);
border-radius: var(--ui-radius-md);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.hb-confusion-cell--tp { background: var(--ui-success); opacity: 0.65; }
.hb-confusion-cell--fn { background: var(--ui-danger); opacity: 0.4; }
.hb-confusion-cell--fp { background: var(--ui-danger); opacity: 0.35; }
.hb-confusion-cell--tn { background: var(--ui-success); opacity: 0.7; }
.hb-confusion-value {
opacity: 1;
color: var(--ui-white);
font-size: var(--ui-text-xl);
font-weight: var(--ui-font-bold);
}
.hb-confusion-label {
opacity: 1;
color: var(--ui-white);
font-size: var(--ui-text-2xs);
}
.hb-matrix-row-label {
width: 90px;
flex-shrink: 0;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-500);
display: flex;
align-items: center;
text-align: right;
padding-right: var(--ui-space-2);
}
.hb-matrix-col-headers {
display: flex;
gap: var(--ui-space-2);
padding-left: 90px;
}
.hb-matrix-col-header {
flex: 1;
text-align: center;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-500);
}
/* Feature importance */
.hb-feature-rank {
width: 18px;
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
text-align: right;
flex-shrink: 0;
}
.hb-feature-name {
width: 190px;
flex-shrink: 0;
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hb-feature-track {
flex: 1;
background: var(--ui-gray-100);
border-radius: var(--ui-radius-full);
height: 8px;
overflow: hidden;
}
.hb-feature-bar {
height: 100%;
background: var(--ui-primary);
border-radius: var(--ui-radius-full);
transition: width 0.4s ease;
}
.hb-feature-score {
width: 36px;
flex-shrink: 0;
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
text-align: right;
}
/* ── Inference View ── */
.hb-banner {
display: flex;
align-items: center;
gap: var(--ui-space-3);
padding: var(--ui-space-3) var(--ui-space-4);
margin-bottom: var(--ui-space-4);
background: var(--ui-primary-50);
border-left: 3px solid var(--ui-primary-300);
border-radius: var(--ui-radius-lg);
font-size: var(--ui-text-sm);
color: var(--ui-primary-800);
font-weight: var(--ui-font-medium);
}
.hb-banner-icon {
font-size: var(--ui-text-lg);
color: var(--ui-primary-400);
flex-shrink: 0;
}
.hb-prediction-card {
display: flex;
align-items: center;
gap: var(--ui-space-5);
padding: var(--ui-space-4) var(--ui-space-5);
border-radius: var(--ui-radius-lg);
box-shadow: var(--ui-shadow-sm);
}
.hb-prediction-card--active {
background: var(--ui-success-50, #f0fdf4);
border: 1px solid var(--ui-success-200, #bbf7d0);
}
.hb-prediction-card--inactive {
background: var(--ui-danger-50, #fef2f2);
border: 1px solid var(--ui-danger-200, #fecaca);
}
.hb-prediction-icon { font-size: 2.5rem; flex-shrink: 0; }
.hb-prediction-label { font-size: var(--ui-text-2xl); font-weight: var(--ui-font-bold); line-height: 1.2; }
.hb-prediction-meta { font-size: var(--ui-text-sm); color: var(--ui-gray-600); margin-top: 2px; }
.hb-prediction-coord { font-size: var(--ui-text-xs); color: var(--ui-gray-400); margin-top: 4px; }
.hb-gis-feature-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--ui-space-2) var(--ui-space-4);
font-size: var(--ui-text-sm);
border-bottom: 1px solid var(--ui-gray-50);
}
.hb-gis-feature-label {
display: flex;
align-items: center;
gap: var(--ui-space-2);
color: var(--ui-gray-500);
}
.hb-gis-feature-label i { width: 14px; text-align: center; }
.hb-gis-feature-value {
font-weight: var(--ui-font-medium);
color: var(--ui-gray-700);
}
.hb-inference-map { height: 500px; width: 100%; cursor: crosshair; }
.hb-neighbour-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--ui-radius-full);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
}
/* Table */
.hb-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ui-text-sm);
margin: var(--ui-space-3) 0;
}
.hb-table th {
background: var(--ui-gray-50);
padding: var(--ui-space-2) var(--ui-space-3);
text-align: left;
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-700);
border-bottom: 2px solid var(--ui-gray-200);
}
.hb-table td {
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--ui-gray-100);
color: var(--ui-gray-600);
}
/* ── GIS Explorer ── */
.hb-gis-explorer { height: 650px; }
.hb-gis-explorer-map { flex: 1; min-height: 0; }
.hb-gis-control-panel { max-width: 340px; min-width: 280px; }
.hb-gis-section {
padding: var(--ui-space-3) var(--ui-space-4);
border-bottom: 1px solid var(--ui-gray-100);
}
.hb-gis-section-header {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--ui-space-3);
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.hb-gis-section-header i { color: var(--ui-primary-400); }
.hb-gis-field-label {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
margin-bottom: var(--ui-space-1);
margin-top: var(--ui-space-2);
}
.hb-gis-select {
width: 100%;
padding: var(--ui-space-2) var(--ui-space-3);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-sm);
color: var(--ui-gray-700);
background: var(--ui-white);
}
.hb-gis-input {
flex: 1;
min-width: 0;
padding: var(--ui-space-2) var(--ui-space-3);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-xs);
color: var(--ui-gray-700);
}
.hb-gis-url-row {
display: flex;
gap: var(--ui-space-2);
margin-top: var(--ui-space-1);
}
.hb-gis-btn {
display: inline-flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border: none;
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-semibold);
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
}
.hb-gis-btn--primary {
background: var(--ui-primary);
color: var(--ui-white);
}
.hb-gis-btn--primary:hover { opacity: 0.9; }
.hb-gis-btn--accent {
background: var(--ui-accent, var(--ui-primary));
color: var(--ui-white);
margin-top: var(--ui-space-2);
}
.hb-gis-btn--accent:hover { opacity: 0.9; }
.hb-gis-status {
margin-top: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-xs);
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.hb-gis-status--loading { color: var(--ui-primary); background: var(--ui-primary-50); }
.hb-gis-status--ok { color: var(--ui-success); background: rgba(34, 197, 94, 0.08); }
.hb-gis-status--error { color: var(--ui-danger); background: rgba(239, 68, 68, 0.08); }
.hb-gis-empty {
color: var(--ui-gray-400);
font-size: var(--ui-text-xs);
padding: var(--ui-space-3);
text-align: center;
font-style: italic;
}
.hb-gis-loading {
color: var(--ui-primary);
font-size: var(--ui-text-xs);
padding: var(--ui-space-3);
text-align: center;
}
/* Tree browser */
.hb-gis-tree-item {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
font-size: var(--ui-text-xs);
color: var(--ui-gray-700);
cursor: pointer;
border-radius: var(--ui-radius-md);
transition: background 0.12s;
}
.hb-gis-tree-item:hover { background: var(--ui-gray-50); }
.hb-gis-tree-folder i { color: var(--ui-warning); }
.hb-gis-tree-back i { color: var(--ui-gray-400); }
.hb-gis-tree-service i { color: var(--ui-primary-400); }
.hb-gis-tree-layer {
justify-content: space-between;
padding-left: var(--ui-space-4);
}
.hb-gis-layer-name {
display: flex;
align-items: center;
gap: var(--ui-space-2);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hb-gis-layer-name i { color: var(--ui-accent, var(--ui-secondary-400)); }
.hb-gis-type-badge {
font-size: var(--ui-text-2xs);
padding: 1px 6px;
border-radius: var(--ui-radius-full);
background: var(--ui-gray-100);
color: var(--ui-gray-500);
font-weight: var(--ui-font-medium);
}
.hb-gis-layer-btn,
.hb-gis-layer-btn--loaded {
padding: 2px 8px;
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-2xs);
cursor: pointer;
background: var(--ui-white);
color: var(--ui-primary);
flex-shrink: 0;
}
.hb-gis-layer-btn--loaded {
background: var(--ui-success);
color: var(--ui-white);
border-color: var(--ui-success);
}
.hb-gis-service-title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
padding: var(--ui-space-2) var(--ui-space-3);
display: flex;
align-items: center;
gap: var(--ui-space-2);
}
.hb-gis-service-desc {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
padding: 0 var(--ui-space-3) var(--ui-space-2);
line-height: 1.4;
}
/* Active layers panel */
.hb-gis-active-layer {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) 0;
font-size: var(--ui-text-xs);
border-bottom: 1px solid var(--ui-gray-50);
}
.hb-gis-layer-color {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.hb-gis-layer-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ui-gray-700);
}
.hb-gis-layer-count {
font-size: var(--ui-text-2xs);
color: var(--ui-gray-400);
flex-shrink: 0;
}
.hb-gis-layer-toggle,
.hb-gis-layer-remove {
border: none;
background: none;
cursor: pointer;
color: var(--ui-gray-400);
padding: 2px;
font-size: var(--ui-text-xs);
}
.hb-gis-layer-toggle:hover { color: var(--ui-primary); }
.hb-gis-layer-remove:hover { color: var(--ui-danger); }
/* Feature detail panel */
.hb-gis-feature-detail {
margin-top: var(--ui-space-4);
}
.hb-gis-feature-header {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding-bottom: var(--ui-space-3);
border-bottom: 1px solid var(--ui-gray-100);
margin-bottom: var(--ui-space-3);
}
.hb-gis-feature-title {
font-size: var(--ui-text-sm);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-800);
flex: 1;
}
.hb-gis-close-btn {
border: none;
background: none;
cursor: pointer;
color: var(--ui-gray-400);
font-size: var(--ui-text-sm);
}
.hb-gis-close-btn:hover { color: var(--ui-gray-600); }
.hb-gis-feature-attrs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--ui-space-1);
}
.hb-gis-feature-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ui-space-1) var(--ui-space-3);
font-size: var(--ui-text-xs);
border-bottom: 1px solid var(--ui-gray-50);
}
.hb-gis-feature-key {
color: var(--ui-gray-400);
font-weight: var(--ui-font-medium);
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: var(--ui-text-2xs);
}
.hb-gis-feature-val {
color: var(--ui-gray-700);
font-weight: var(--ui-font-medium);
text-align: right;
}
/* Enrichment */
.hb-gis-enrich-info {
font-size: var(--ui-text-xs);
color: var(--ui-gray-500);
line-height: 1.5;
margin-bottom: var(--ui-space-2);
}
.hb-gis-enrich-summary {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
background: rgba(34, 197, 94, 0.08);
border-radius: var(--ui-radius-md);
font-size: var(--ui-text-xs);
color: var(--ui-gray-700);
margin-top: var(--ui-space-2);
}
.hb-gis-enrich-fields {
margin-top: var(--ui-space-2);
}
.hb-gis-field-tag {
display: inline-block;
padding: 1px 6px;
margin: 2px;
border-radius: var(--ui-radius-sm);
background: var(--ui-primary-50);
color: var(--ui-primary);
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-medium);
}
/* ── Training View ───────────────────────────────────────────────── */
.hb-train-group-label {
font-size: var(--ui-text-2xs);
font-weight: var(--ui-font-semibold);
color: var(--ui-gray-400);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: var(--ui-space-3);
margin-bottom: var(--ui-space-1);
}
.hb-train-feature-row {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: 3px 0;
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
cursor: pointer;
}
.hb-train-feature-row:hover {
color: var(--ui-gray-800);
}
.hb-train-feature-row input[type="checkbox"] {
accent-color: var(--ui-primary);
width: 14px;
height: 14px;
}
.hb-train-hp-details {
margin-top: var(--ui-space-3);
border: 1px solid var(--ui-gray-200);
border-radius: var(--ui-radius-md);
overflow: hidden;
}
.hb-train-hp-summary {
font-size: var(--ui-text-xs);
font-weight: var(--ui-font-medium);
color: var(--ui-gray-500);
padding: var(--ui-space-2) var(--ui-space-3);
cursor: pointer;
background: var(--ui-gray-50);
}
.hb-train-hp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
}
.hb-train-hp-row {
display: flex;
flex-direction: column;
gap: 2px;
}
.hb-train-hp-row label {
font-size: var(--ui-text-2xs);
color: var(--ui-gray-400);
}
.hb-train-hp-row input {
width: 100%;
}
/* Training progress */
.hb-train-progress {
padding: var(--ui-space-3) 0;
}
.hb-train-progress-text {
font-size: var(--ui-text-sm);
color: var(--ui-gray-600);
margin-bottom: var(--ui-space-2);
}
.hb-train-progress-bar {
height: 8px;
background: var(--ui-gray-100);
border-radius: var(--ui-radius-full);
overflow: hidden;
}
.hb-train-progress-fill {
height: 100%;
background: var(--ui-primary);
border-radius: var(--ui-radius-full);
transition: width 0.3s ease;
}
/* Training detail */
.hb-train-detail {
margin-top: var(--ui-space-4);
}
/* Ensemble results */
.hb-train-ensemble-summary {
display: flex;
gap: var(--ui-space-6);
padding: var(--ui-space-4) 0;
}
.hb-train-ensemble-metric {
text-align: center;
}
.hb-train-ensemble-value {
font-size: var(--ui-text-2xl);
font-weight: var(--ui-font-bold);
font-variant-numeric: tabular-nums;
}
.hb-train-ensemble-label {
font-size: var(--ui-text-xs);
color: var(--ui-gray-400);
margin-top: var(--ui-space-1);
}
/* ═══ ../InfraTrack2/infratrack2.css ═══ */
/* InfraTrack2 — System Styles
* Extracted from inline