/* =============================================================================== GHT UI Framework ------------------------------------------------------------------------------- Version: 4.0 Author: GHT - Sebastian Pelaez. Date: 2026-02-09 DESCRIPTION: Design system CSS-first inpired in Bootstrap, Bulma and Tailwind. Includes: - Modern reset - Tokens (CSS Variables) - Layout system (grid + flex) - Atomic utilities (spacing, border, overflow) - UI components (cards, tabs, badges, tables, panels, modals) - Light / dark theme support - Reusable animations - Responsive design utilities - Accessibility utilities - Utilities classes for common patterns (disabled, hidden, text overflow, margin, padding, flex, grid, etc) NAMING CONVENTION: - Global prefix: ght- - Modifiers: .ght-[component].ght-[state|variant] - States: .ght-active, .ght-show, .ght-expanded, .ght-selected THEME SYSTEM: - Default: light - Dark theme: body.ght-theme-dark or body.dark-theme USAGE: this file is designed to be used complete. DO NOT remove CSS variables without reviewing dependencies. =============================================================================== /* ============================================================================= FONT LOADING ------------------------------------------------------------------------------ Purpose: - Loads the primary UI typeface used across the GHT UI Framework. ============================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); /* ============================================================================= GLOBAL RESET ------------------------------------------------------------------------------ Purpose: - Establish a predictable and modern baseline across browsers. - Reduce layout bugs caused by default browser styles. - Ensure components behave consistently in flexible layouts. Design principles: - Non-destructive reset (does NOT remove all defaults). - Optimized for component-based UI systems. - Friendly to dynamic content and LLM-generated markup. Important for LLMs: - After this reset, all components assume: - box-sizing: border-box - media elements are responsive by default - typography is inherited unless explicitly overridden ============================================================================= */ /* --------------------------------------------------------------------------- Universal baseline - Prevents flex/grid overflow issues (min-width: 0) - Forces font inheritance for consistency --------------------------------------------------------------------------- */ * { min-width: 0; font: inherit; } /* --------------------------------------------------------------------------- Box model normalization - Ensures padding and borders are included in width/height calculations --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* --------------------------------------------------------------------------- Media elements - Removes inline element spacing issues - Makes media responsive by default --------------------------------------------------------------------------- */ img, video, svg { display: block; height: auto; max-width: 100%; } /* --------------------------------------------------------------------------- Document root - Removes default margin - Uses dynamic viewport height (accounts for mobile browser UI) --------------------------------------------------------------------------- */ body { margin: 0; min-height: 100dvh; } /* --------------------------------------------------------------------------- Headings - Enables balanced line wrapping for better readability - Modern CSS feature (progressive enhancement) --------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } /* --------------------------------------------------------------------------- Paragraphs - Improves line wrapping for long text blocks --------------------------------------------------------------------------- */ p { text-wrap: pretty; } /* --------------------------------------------------------------------------- Preformatted text - Removes unexpected margins that break layouts --------------------------------------------------------------------------- */ pre { margin: 0; } /* ============================================================================= DESIGN TOKENS ------------------------------------------------------------------------------- These variables define the visual system of the framework. DO NOT use hardcoded values in components. Grouping: - Base colors - Semantic colors (success, error, warning, info) - Backgrounds (light / dark) - States - Z-index ============================================================================= */ :root { /* =========================================================================== BASE COLORS --------------------------------------------------------------------------- Primitive colors used as building blocks. These should rarely be used directly by components. =========================================================================== */ --black: #000000; --white: #ffffff; --white-50: #f6f8f9; /* =========================================================================== SEMANTIC COLORS — LIGHT THEME --------------------------------------------------------------------------- These tokens express intent (success, error, warning, info, inactive). Components should prefer these over raw colors. =========================================================================== */ --main-bg-light: #eceff1; --text-color-title-light: #232a2e; --main-success-color-light: #13bd7c; --secondary-success-color-light: #36d190; --main-error-color-light: #ea5b45; --secondary-error-color-light: #f48675; --main-warning-color-light: #edd70d; --secondary-warning-color-light: #f9f64b; --main-info-color-light: #2eb9ed; --secondary-info-color-light: #83d5f6; --inactive-text-light: #889ea8; --inactive-bg-light: #d6dde1; --wf-page-header-bg-light: #3a6ea5; --secondary-error-color-light-opc-40: #f4867566; /* =========================================================================== SEMANTIC COLORS — DARK THEME --------------------------------------------------------------------------- Dark theme equivalents. Applied via body class or token overrides. =========================================================================== */ --main-bg-dark: #353f45; --secondary-bg-dark: #212324; --modal-body-bg-dark: #3c4950; --inactive-bg-dark: #556a74; --secondary-success-color-dark: #70e5b1; --secondary-error-color-dark: #fab2a7; --secondary-warning-color-dark: #fafc8c; --secondary-info-color-dark: #bde7fa; /* =========================================================================== BRAND / ACCENT COLORS --------------------------------------------------------------------------- Brand-specific blues and accents. Prefer semantic tokens in components where possible. =========================================================================== */ --primary-blue-900: #24476c; --primary-blue-800: #24476c; --primary-blue-400: #639ccd; --secondary-blue-600: #2e649b; --secondary-blue-300: #99bde0; --primary-blue-800-opc-8: #2e649b14; /* =========================================================================== BORDERS & STATE COLORS =========================================================================== */ --border-color: #b2c0c7; --row-selected-background-light: #89bace; --row-selected-background-dark: #6f7f86; /* =========================================================================== LEGACY TOKENS --------------------------------------------------------------------------- Maintained for backward compatibility. SHOULD NOT be used in new components. =========================================================================== */ --main-bg-color: #eceff1; --primary-blue-default: #2e649b; --secondary-blue-default: #24476c; --secondary-blue-800: #2e649b66; --tertiary-blue-default: #2e649b14; --surface-blue-50: #f6fbff; --stroke-shadow-gray-300: #8ca8ba; --title-black-900: #1a1e20; --subtitle-black-700: #3a3e41; --paragraph-note-black-500: #94999c; --basic-white-50: #ffffff; --surface-blue-100: #e6f6fb; --surface-blue-200: #dff0f9; --inactive-text-default: #889ea8; --inactive-bg-default: #d6dde1; --inactive-gray-500: #a6a6a6; --inactive-gray-200: #f1f1f1; --disabled-gray-500: #b2c0c7; --informative-blue-700: #1395bd; --informative-blue-700-hover: #83d5f6; --error-red-500: #ea5b45; --error-red-500-hover: #f48675; --error-orange-500: #b53420; --error-bg-default: #f4867566; --error-active-dark: #f48675; --error-hover: #fab2a7; --success-green-400: #13bd7c; --success-green-400-hover: #36d190; --warning-yellow-600: #edd70d; --warning-yellow-600-hover: #f9f64b; --btn-bg-loading: #99bde0; --primary-blue-focus: #2eb9ed; --text-paragraph-default: #45565f; --main-dark-bg-color: #353f45; --basic-dark-50: #000000; --text-title-light: #232a2e; --all-inactive-background-dark: #556a74; --sms-hover-dark: #70e5b1; --inactive-gray-basic: #d9d9d9; --active-dark: #639ccd; --dark-hover: #45535e; --dark-text-default: #f6f8f9; --dark-hover-2: #bde7fa; --dark-body-2: #3c4950; --accessibility-dark: #212324; --menu-dark: #212324; --text-subtitle-light: #6c757d; --header-classic-bg: #3a6ea5; --header-classic-dark-bg: #495a6d; --scrollbar-dark-track: #556a70; --scrollbar-dark-thumb: #b0c0c4; --panel-background-light: #f6f6f6; --row-selected-background-light: #89bace; --row-selected-background-dark: #6f7f86; --sms-warning-hover-dark: #fafc8c; /* =========================================================================== TYPOGRAPHY =========================================================================== */ --main-font: "Poppins", sans-serif; --main-font-regular: 400; --main-font-medium: 500; --main-font-semibold: 600; --font-size-40: 40px; --font-size-36: 36px; --font-size-32: 32px; --font-size-28: 28px; --font-size-24: 24px; --font-size-20: 20px; --font-size-16: 16px; --font-size-14: 14px; --font-size-12: 12px; --letter-spacing-default: 0px; --line-height-default: 1.2; /* =========================================================================== SPACING SCALE --------------------------------------------------------------------------- Used by utilities, layout, and components. =========================================================================== */ --spacing-4: 4px; --spacing-6: 6px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-44: 44px; --spacing-52: 52px; /* =========================================================================== BREAKPOINTS --------------------------------------------------------------------------- Reference values (used in JS or documentation). =========================================================================== */ --breakpoint-xs: 360px; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-xxl: 1440px; /* =========================================================================== SIZING TOKENS =========================================================================== */ --height-12: 12px; --height-16: 16px; --height-20: 20px; --height-24: 24px; --height-28: 28px; --height-32: 32px; --height-36: 36px; --height-44: 44px; --height-52: 52px; --height-60: 60px; --height-72: 72px; --width-12: 12px; --width-16: 16px; --width-20: 20px; --width-24: 24px; --width-28: 28px; --width-32: 32px; --width-36: 36px; --width-44: 44px; --width-52: 52px; --width-60: 60px; --width-72: 72px; /* =========================================================================== MOTION & INTERACTION =========================================================================== */ --scroll-duration: 5s; --scroll-distance: 100%; /* =========================================================================== CURSOR SIZE --------------------------------------------------------------------------- Used for custom cursor styles in interactive components. =========================================================================== */ --cursor-size: 50; /* =========================================================================== Z-INDEX SCALE --------------------------------------------------------------------------- Defines visual stacking order across the app. Components MUST use these tokens. =========================================================================== */ --toast-z-index: 350; --modal-z-index: 100; --autocomplete-container-z-index: 10; --multiple-select-z-index: 10; --tooltip-z-index: 300; --hotkeys-z-index: 200; --dropdown-menu-z-index: 150; --feedback-container-z-index: 250; --accessibility-container-z-index: 250; --image-preview-container-z-index: 300; --alert-container-z-index: 300; --loader-container-z-index: 350; --panel-container-z-index: 250; --panel-overlay-z-index: 200; --datepicker-calendar-z-index: 10; --onboarding-z-index: 400; --panel-loader-z-index: 350; } /* ============================================================================= GLOBAL TYPOGRAPHY & INTERACTION BASELINE ------------------------------------------------------------------------------ Purpose: - Establish default typographic behavior for text-level elements. - Centralize letter-spacing and line-height control via design tokens. - Ensure accessibility-driven adjustments (via JS) propagate consistently. Why this exists: - Accessibility features dynamically modify letter-spacing and line-height. - Defining these at a global level avoids per-component overrides. - LLM-generated markup can safely assume readable defaults. LLM CONTRACT: - Text elements inherit spacing from tokens unless explicitly overridden. - Accessibility controls may update token values at runtime. - Components SHOULD NOT hardcode letter-spacing or line-height. ============================================================================= */ /* --------------------------------------------------------------------------- Document-level defaults --------------------------------------------------------------------------- */ body { letter-spacing: var(--letter-spacing-default); /* Custom cursor configuration. NOTE: cursor-size is controlled via token for accessibility / UX reasons */ cursor: auto var(--cursor-size) auto var(--cursor-size) auto; } /* --------------------------------------------------------------------------- Text-level elements - Applies consistent typography across common inline and interactive elements --------------------------------------------------------------------------- */ p, span, label, a, button { letter-spacing: var(--letter-spacing-default); line-height: var(--line-height-default); } /* ============================================================================= UTILITY CLASSES ------------------------------------------------------------------------------ Purpose: - Small, atomic helper classes that apply a single, well-defined behavior. - Designed to be composed directly in HTML. - High specificity is intentional (uses !important). LLM CONTRACT: - Utilities MAY override component styles. - Utilities should be preferred over inline styles. - Utilities must do ONE thing only. ============================================================================= */ /* =========================================================================== UTILITY: SEPARATOR / HR --------------------------------------------------------------------------- Visual horizontal separation helper. Does NOT replace the
semantic element. =========================================================================== */ .ght-separator { width: 90%; } /* =========================================================================== UTILITY: INPUT WITH ICON --------------------------------------------------------------------------- Layout helper for text inputs that include a leading icon. Expected HTML structure:
=========================================================================== */ .ght-input-icon { position: relative; } .ght-input-icon input[type="text"] { padding-left: 35px; } .ght-input-icon .ght-icons { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); } /* =========================================================================== UTILITY: INFO TEXT (TRUNCATION) --------------------------------------------------------------------------- For single-line text truncation with ellipsis. Useful for tables, cards, labels, and constrained layouts. NOTE: - This utility intentionally enforces nowrap. =========================================================================== */ .ght-info-text { text-overflow: ellipsis !important; text-wrap: nowrap !important; overflow: hidden !important; } /* =========================================================================== UTILITY: DISABLED STATE --------------------------------------------------------------------------- Disables user interaction without altering visual appearance. Use cases: - Temporary disabled UI - Read-only sections =========================================================================== */ .ght-disabled { pointer-events: none !important; } .ght-disabled > a { pointer-events: none !important; } /* Disable all transitions and animations globally. Used by accessibility controls. --------------------------------------------------------------------------- */ .ght-disable-animations *:not(.ght-datepicker-wrapper, .ght-datepicker-wrapper *) { transition: none !important; animation: none !important; } /* =========================================================================== UTILITY: VISIBILITY =========================================================================== */ .ght-hidden { display: none !important; } /* =========================================================================== UTILITY: REQUIRED INPUT STATE --------------------------------------------------------------------------- Visual indicator for required / invalid input fields. =========================================================================== */ .ght-input-required { border: 1px solid var(--main-error-color-light) !important; } /* =========================================================================== UTILITY: CURSOR --------------------------------------------------------------------------- Explicit cursor control utilities. =========================================================================== */ .ght-cursor-pointer { cursor: pointer !important; } .ght-cursor-default { cursor: default !important; } .ght-cursor-not-allowed { cursor: not-allowed !important; } /* ============================================================================= LAYOUT UTILITIES — DISPLAY & FLEX ------------------------------------------------------------------------------ Purpose: - Provide low-level layout primitives for composing UI directly in HTML. - Designed to replace custom CSS and inline styles for common layouts. Design principles: - One utility = one responsibility. - High specificity is intentional (!important). - These utilities DO NOT define spacing, colors, or typography. LLM CONTRACT: - Prefer these utilities over inline styles. - Compose multiple utilities instead of creating new CSS rules. - These utilities may override component defaults. ============================================================================= */ /* =========================================================================== UTILITY: DISPLAY --------------------------------------------------------------------------- Controls the CSS display property. =========================================================================== */ .ght-display-flex { display: flex !important; } .ght-display-block { display: block !important; } .ght-display-inline-block { display: inline-block !important; } .ght-display-none { display: none !important; } /* =========================================================================== UTILITY: FLEX JUSTIFICATION (MAIN AXIS) --------------------------------------------------------------------------- */ .ght-justify-center { justify-content: center !important; } .ght-justify-between { justify-content: space-between !important; } .ght-justify-left { justify-content: flex-start !important; } .ght-justify-right { justify-content: flex-end !important; } .ght-justify-evenly { justify-content: space-evenly !important; } /* =========================================================================== UTILITY: FLEX DIRECTION --------------------------------------------------------------------------- */ .ght-display-direction-column { flex-direction: column !important; } .ght-display-direction-row { flex-direction: row !important; } /* =========================================================================== UTILITY: FLEX GROW / SHRINK --------------------------------------------------------------------------- */ .ght-flex-1 { flex: 1 1 0% !important; } /* =========================================================================== UTILITY: FLEX ALIGNMENT (CROSS AXIS) --------------------------------------------------------------------------- */ .ght-align-center { align-items: center !important; } .ght-align-start { align-items: flex-start !important; } .ght-align-end { align-items: flex-end !important; } .ght-align-baseline { align-items: baseline !important; } .ght-align-stretch { align-items: stretch !important; } /* ============================================================================= LAYOUT UTILITIES — GAP ------------------------------------------------------------------------------ Purpose: - Control spacing between children in flexbox and grid layouts. - Provides consistent spacing using the global spacing scale. Design principles: - Token-driven spacing (no hardcoded values). - Atomic utilities: one class = one gap rule. - High specificity is intentional (!important). LLM CONTRACT: - Gap utilities assume the container is either display:flex or display:grid. - Prefer .ght-gap-* over margin hacks between children. - Do not mix manual margins with gap utilities on the same axis. ============================================================================= */ /* =========================================================================== UTILITY: ROW GAP --------------------------------------------------------------------------- Controls vertical spacing between rows. Works in flex (with flex-wrap) and grid layouts. =========================================================================== */ .ght-row-gap-4 { row-gap: var(--spacing-4) !important; } .ght-row-gap-6 { row-gap: var(--spacing-6) !important; } .ght-row-gap-8 { row-gap: var(--spacing-8) !important; } .ght-row-gap-12 { row-gap: var(--spacing-12) !important; } .ght-row-gap-16 { row-gap: var(--spacing-16) !important; } .ght-row-gap-20 { row-gap: var(--spacing-20) !important; } .ght-row-gap-24 { row-gap: var(--spacing-24) !important; } .ght-row-gap-32 { row-gap: var(--spacing-32) !important; } .ght-row-gap-40 { row-gap: var(--spacing-40) !important; } .ght-row-gap-44 { row-gap: var(--spacing-44) !important; } /* =========================================================================== UTILITY: COLUMN GAP --------------------------------------------------------------------------- Controls horizontal spacing between columns. Works in flex and grid layouts. =========================================================================== */ .ght-column-gap-4 { column-gap: var(--spacing-4) !important; } .ght-column-gap-6 { column-gap: var(--spacing-6) !important; } .ght-column-gap-8 { column-gap: var(--spacing-8) !important; } .ght-column-gap-12 { column-gap: var(--spacing-12) !important; } .ght-column-gap-16 { column-gap: var(--spacing-16) !important; } .ght-column-gap-20 { column-gap: var(--spacing-20) !important; } .ght-column-gap-24 { column-gap: var(--spacing-24) !important; } .ght-column-gap-32 { column-gap: var(--spacing-32) !important; } .ght-column-gap-40 { column-gap: var(--spacing-40) !important; } .ght-column-gap-44 { column-gap: var(--spacing-44) !important; } /* =========================================================================== UTILITY: UNIFIED GAP --------------------------------------------------------------------------- Controls both row and column gaps simultaneously. =========================================================================== */ .ght-gap-0 { gap: 0 !important; } .ght-gap-4 { gap: var(--spacing-4) !important; } .ght-gap-6 { gap: var(--spacing-6) !important; } .ght-gap-8 { gap: var(--spacing-8) !important; } .ght-gap-12 { gap: var(--spacing-12) !important; } .ght-gap-16 { gap: var(--spacing-16) !important; } .ght-gap-20 { gap: var(--spacing-20) !important; } .ght-gap-24 { gap: var(--spacing-24) !important; } .ght-gap-32 { gap: var(--spacing-32) !important; } .ght-gap-40 { gap: var(--spacing-40) !important; } .ght-gap-44 { gap: var(--spacing-44) !important; } /* ============================================================================= LAYOUT UTILITIES — WIDTH & HEIGHT ------------------------------------------------------------------------------ Purpose: - Provide explicit sizing helpers for common percentage-based layouts. - Avoid inline styles for width / height control. - Enable predictable sizing in layout composition. Design principles: - Utilities are explicit and opt-in. - Percentages are intentional and limited to common fractions. - High specificity is intentional (!important). LLM CONTRACT: - Percentage-based sizes depend on the parent element's dimensions. - Prefer layout (flex, grid, gap) over fixed sizing when possible. - Do NOT invent arbitrary percentage utilities. ============================================================================= */ /* =========================================================================== UTILITY: WIDTH --------------------------------------------------------------------------- Controls element width using common percentages. =========================================================================== */ .ght-width-auto { width: auto !important; } .ght-width-100 { width: 100% !important; } .ght-width-50 { width: 50% !important; } .ght-width-33 { width: 33.33% !important; } .ght-width-25 { width: 25% !important; } .ght-width-20 { width: 20% !important; } .ght-width-16 { width: 16.66% !important; } .ght-width-5 { width: 5% !important; } /* =========================================================================== UTILITY: HEIGHT --------------------------------------------------------------------------- Controls element height using percentages or viewport units. NOTE: - Percentage heights require the parent to have an explicit height. =========================================================================== */ .ght-height-auto { height: auto !important; } .ght-height-100vh { height: 100vh !important; } .ght-height-100 { height: 100% !important; } .ght-height-50 { height: 50% !important; } .ght-height-33 { height: 33.33% !important; } .ght-height-25 { height: 25% !important; } .ght-height-20 { height: 20% !important; } .ght-height-16 { height: 16.66% !important; } .ght-height-5 { height: 5% !important; } /* ============================================================================= UTILITY: ICON SIZE ------------------------------------------------------------------------------ Purpose: - Standardize icon dimensions across the UI. - Ensure icons scale consistently with the design system size tokens. - Avoid arbitrary width / height values on icons. Design principles: - Icons are square by default (width === height). - Sizes are derived from height tokens for consistency. - High specificity is intentional (!important). LLM CONTRACT: - Use these utilities ONLY for icons or icon-like elements. - Do NOT use icon size utilities for general layout sizing. - Do NOT invent new icon size values. ============================================================================= */ /* =========================================================================== ICON SIZE UTILITIES --------------------------------------------------------------------------- Applies fixed square dimensions to icons. =========================================================================== */ .ght-icon-size-12 { width: var(--height-12) !important; height: var(--height-12) !important; } .ght-icon-size-16 { width: var(--height-16) !important; height: var(--height-16) !important; } .ght-icon-size-20 { width: var(--height-20) !important; height: var(--height-20) !important; } .ght-icon-size-24 { width: var(--height-24) !important; height: var(--height-24) !important; } .ght-icon-size-28 { width: var(--height-28) !important; height: var(--height-28) !important; } .ght-icon-size-32 { width: var(--height-32) !important; height: var(--height-32) !important; } .ght-icon-size-36 { width: var(--height-36) !important; height: var(--height-36) !important; } .ght-icon-size-44 { width: var(--height-44) !important; height: var(--height-44) !important; } .ght-icon-size-52 { width: var(--height-52) !important; height: var(--height-52) !important; } /* ============================================================================= TEXT UTILITIES ------------------------------------------------------------------------------ Purpose: - Provide atomic helpers for text transformation, wrapping, weight, and alignment. - Enable predictable text behavior without inline styles. - Include optional animated / interactive text patterns. Design principles: - One utility = one text responsibility. - High specificity is intentional (!important). - Prefer composition over custom CSS rules. LLM CONTRACT: - Use these utilities to control text behavior and appearance. - Do NOT hardcode text styles inside components. - Animated text utilities should be used intentionally and sparingly. ============================================================================= */ /* =========================================================================== UTILITY: TEXT TRANSFORM =========================================================================== */ .ght-text-uppercase { text-transform: uppercase !important; } .ght-text-capitalize { text-transform: capitalize !important; } .ght-text-lowercase { text-transform: lowercase !important; } /* =========================================================================== UTILITY: TEXT OVERFLOW / TRUNCATION --------------------------------------------------------------------------- */ .ght-text-ellipsis { overflow: hidden !important; text-overflow: ellipsis !important; text-wrap: nowrap !important; } /* =========================================================================== UTILITY: SCROLLING / ANIMATED TEXT --------------------------------------------------------------------------- Used to reveal long text on hover via horizontal scrolling animation. Expected HTML structure: Short preview Full long text content NOTE: - Requires --scroll-duration and --scroll-distance tokens. - Animation is disabled when accessibility disables animations. =========================================================================== */ .ght-scrolling-text { position: relative; display: inline-block; max-width: 140px; overflow: hidden; white-space: nowrap; vertical-align: middle; } .ght-text-static { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ght-text-animated { position: absolute; top: 0; left: 0; white-space: nowrap; transform: translateX(100%); opacity: 0; } .ght-scrolling-text:hover .ght-text-static { opacity: 0; } .ght-scrolling-text:hover .ght-text-animated { opacity: 1; animation: ghtScrollText linear infinite; animation-duration: var(--scroll-duration); } /* =========================================================================== UTILITY: TEXT WRAPPING --------------------------------------------------------------------------- */ .ght-text-wrap { overflow: hidden !important; text-overflow: ellipsis !important; text-wrap: wrap !important; } .ght-text-nowrap { overflow: hidden !important; text-overflow: ellipsis !important; text-wrap: nowrap !important; } /* =========================================================================== UTILITY: TEXT DECORATION & STYLE --------------------------------------------------------------------------- */ .ght-text-underline { text-decoration: underline !important; } .ght-text-italic { font-style: italic !important; } .ght-text-bold { font-weight: bold !important; } .ght-text-normal { font-weight: normal !important; } /* =========================================================================== UTILITY: TEXT ALIGNMENT --------------------------------------------------------------------------- */ .ght-text-center { text-align: center !important; } .ght-text-left { text-align: left !important; } .ght-text-right { text-align: right !important; } /* ============================================================================= COLOR UTILITIES — BACKGROUND ------------------------------------------------------------------------------ Purpose: - Map design tokens to atomic background-color utilities. - Allow color usage directly in HTML without inline styles. - Provide a safe, controlled palette for LLM-generated markup. Design principles: - Every utility maps 1:1 to a design token. - No raw color values are allowed in utilities. - High specificity is intentional (!important). LLM CONTRACT: - Use background utilities instead of inline styles. - Prefer SEMANTIC color utilities over brand / primitive colors. - Legacy color utilities exist for backward compatibility only. ============================================================================= */ /* =========================================================================== BACKGROUND COLORS — CURRENT / SEMANTIC TOKENS --------------------------------------------------------------------------- */ .ght-bg-black { background-color: var(--black) !important; } .ght-bg-white { background-color: var(--white) !important; } .ght-bg-main-bg-light { background-color: var(--main-bg-light) !important; } .ght-bg-primary-blue-800 { background-color: var(--primary-blue-800) !important; } .ght-bg-primary-blue-900 { background-color: var(--primary-blue-900) !important; } .ght-bg-secondary-blue-600 { background-color: var(--secondary-blue-600) !important; } .ght-bg-border-color { background-color: var(--border-color) !important; } .ght-bg-text-color-title-light { background-color: var(--text-color-title-light) !important; } .ght-bg-white-50 { background-color: var(--white-50) !important; } .ght-bg-inactive-text-light { background-color: var(--inactive-text-light) !important; } .ght-bg-inactive-bg-light { background-color: var(--inactive-bg-light) !important; } .ght-bg-secondary-warning-color-light { background-color: var(--secondary-warning-color-light) !important; } .ght-bg-main-warning-color-light { background-color: var(--main-warning-color-light) !important; } .ght-bg-secondary-error-color-light { background-color: var(--secondary-error-color-light) !important; } .ght-bg-main-error-color-light { background-color: var(--main-error-color-light) !important; } .ght-bg-secondary-success-color-light { background-color: var(--secondary-success-color-light) !important; } .ght-bg-main-success-color-light { background-color: var(--main-success-color-light) !important; } .ght-bg-secondary-info-color-light { background-color: var(--secondary-info-color-light) !important; } .ght-bg-main-info-color-light { background-color: var(--main-info-color-light) !important; } .ght-bg-main-bg-dark { background-color: var(--main-bg-dark) !important; } .ght-bg-primary-blue-400 { background-color: var(--primary-blue-400) !important; } .ght-bg-secondary-blue-300 { background-color: var(--secondary-blue-300) !important; } .ght-bg-modal-body-bg-dark { background-color: var(--modal-body-bg-dark) !important; } .ght-bg-inactive-bg-dark { background-color: var(--inactive-bg-dark) !important; } .ght-bg-secondary-warning-color-dark { background-color: var(--secondary-warning-color-dark) !important; } .ght-bg-secondary-error-color-dark { background-color: var(--secondary-error-color-dark) !important; } .ght-bg-secondary-success-color-dark { background-color: var(--secondary-success-color-dark) !important; } .ght-bg-secondary-info-color-dark { background-color: var(--secondary-info-color-dark) !important; } .ght-bg-wf-page-header-bg-light { background-color: var(--wf-page-header-bg-light) !important; } .ght-bg-element-visited-color { background-color: var(--element-visited-color) !important; } .ght-bg-primary-blue-800-opc-8 { background-color: var(--primary-blue-800-opc-8) !important; } .ght-bg-secondary-error-color-light-opc-40 { background-color: var(--secondary-error-color-light-opc-40) !important; } .ght-bg-secondary-bg-dark { background-color: var(--secondary-bg-dark) !important; } .ght-bg-row-selected-background-dark { background-color: var(--row-selected-background-dark) !important; } .ght-bg-inactive-gray-500 { background-color: var(--inactive-gray-500) !important; } /* =========================================================================== BACKGROUND COLORS — LEGACY TOKENS --------------------------------------------------------------------------- These utilities exist for backward compatibility. DO NOT use in new components. =========================================================================== */ .ght-bg-main-bg-color { background-color: var(--main-bg-color) !important; } .ght-bg-primary-blue-default { background-color: var(--primary-blue-default) !important; } .ght-bg-secondary-blue-default { background-color: var(--secondary-blue-default) !important; } .ght-bg-secondary-blue-800 { background-color: var(--secondary-blue-800) !important; } .ght-bg-tertiary-blue-default { background-color: var(--tertiary-blue-default) !important; } .ght-bg-surface-blue-50 { background-color: var(--surface-blue-50) !important; } .ght-bg-stroke-shadow-gray-300 { background-color: var(--stroke-shadow-gray-300) !important; } .ght-bg-title-black-900 { background-color: var(--title-black-900) !important; } .ght-bg-subtitle-black-700 { background-color: var(--subtitle-black-700) !important; } .ght-bg-paragraph-note-black-500 { background-color: var(--paragraph-note-black-500) !important; } .ght-bg-basic-white-50 { background-color: var(--basic-white-50) !important; } .ght-bg-surface-blue-100 { background-color: var(--surface-blue-100) !important; } .ght-bg-surface-blue-200 { background-color: var(--surface-blue-200) !important; } .ght-bg-inactive-text-default { background-color: var(--inactive-text-default) !important; } .ght-bg-inactive-bg-default { background-color: var(--inactive-bg-default) !important; } .ght-bg-inactive-gray-200 { background-color: var(--inactive-gray-200) !important; } .ght-bg-disabled-gray-500 { background-color: var(--disabled-gray-500) !important; } .ght-bg-informative-blue-700 { background-color: var(--informative-blue-700) !important; } .ght-bg-informative-blue-700-hover { background-color: var(--informative-blue-700-hover) !important; } .ght-bg-error-red-500 { background-color: var(--error-red-500) !important; } .ght-bg-error-red-500-hover { background-color: var(--error-red-500-hover) !important; } .ght-bg-error-orange-500 { background-color: var(--error-orange-500) !important; } .ght-bg-error-bg-default { background-color: var(--error-bg-default) !important; } .ght-bg-error-active-dark { background-color: var(--error-active-dark) !important; } .ght-bg-error-hover { background-color: var(--error-hover) !important; } .ght-bg-success-green-400 { background-color: var(--success-green-400) !important; } .ght-bg-success-green-400-hover { background-color: var(--success-green-400-hover) !important; } .ght-bg-warning-yellow-600 { background-color: var(--warning-yellow-600) !important; } .ght-bg-warning-yellow-600-hover { background-color: var(--warning-yellow-600-hover) !important; } .ght-bg-btn-bg-loading { background-color: var(--btn-bg-loading) !important; } .ght-bg-primary-blue-focus { background-color: var(--primary-blue-focus) !important; } .ght-bg-text-paragraph-default { background-color: var(--text-paragraph-default) !important; } .ght-bg-main-dark-bg-color { background-color: var(--main-dark-bg-color) !important; } .ght-bg-basic-dark-50 { background-color: var(--basic-dark-50) !important; } .ght-bg-text-title-light { background-color: var(--text-title-light) !important; } .ght-bg-all-inactive-background-dark { background-color: var(--all-inactive-background-dark) !important; } .ght-bg-sms-hover-dark { background-color: var(--sms-hover-dark) !important; } .ght-bg-inactive-gray-basic { background-color: var(--inactive-gray-basic) !important; } .ght-bg-active-dark { background-color: var(--active-dark) !important; } .ght-bg-dark-hover { background-color: var(--dark-hover) !important; } .ght-bg-dark-text-default { background-color: var(--dark-text-default) !important; } .ght-bg-dark-hover-2 { background-color: var(--dark-hover-2) !important; } .ght-bg-dark-body-2 { background-color: var(--dark-body-2) !important; } .ght-bg-accessibility-dark { background-color: var(--accessibility-dark) !important; } .ght-bg-menu-dark { background-color: var(--menu-dark) !important; } .ght-bg-text-subtitle-light { background-color: var(--text-subtitle-light) !important; } .ght-bg-header-classic-bg { background-color: var(--header-classic-bg) !important; } .ght-bg-header-classic-dark-bg { background-color: var(--header-classic-dark-bg) !important; } .ght-bg-scrollbar-dark-track { background-color: var(--scrollbar-dark-track) !important; } .ght-bg-scrollbar-dark-thumb { background-color: var(--scrollbar-dark-thumb) !important; } .ght-bg-panel-background-light { background-color: var(--panel-background-light) !important; } .ght-bg-row-selected-background-light { background-color: var(--row-selected-background-light) !important; } .ght-bg-sms-warning-hover-dark { background-color: var(--sms-warning-hover-dark) !important; } /* ============================================================================= COLOR UTILITIES — TEXT (FOREGROUND) ------------------------------------------------------------------------------ Purpose: - Map design tokens to atomic text color utilities. - Control text color directly in HTML without inline styles. - Provide a constrained, auditable color palette for text usage. Design principles: - Every utility maps 1:1 to a design token. - No raw color values are allowed. - High specificity is intentional (!important). - Text color utilities are separate from background color utilities. LLM CONTRACT: - Use text color utilities ONLY for text / foreground content. - Prefer SEMANTIC text colors over brand or decorative colors. - Legacy text color utilities exist for backward compatibility only. ============================================================================= */ /* =========================================================================== TEXT COLORS — CURRENT / SEMANTIC TOKENS --------------------------------------------------------------------------- */ .ght-color-black { color: var(--black) !important; } .ght-color-white { color: var(--white) !important; } .ght-color-main-bg-light { color: var(--main-bg-light) !important; } .ght-color-primary-blue-800 { color: var(--primary-blue-800) !important; } .ght-color-primary-blue-900 { color: var(--primary-blue-900) !important; } .ght-color-secondary-blue-600 { color: var(--secondary-blue-600) !important; } .ght-color-border-color { color: var(--border-color) !important; } .ght-color-text-color-title-light { color: var(--text-color-title-light) !important; } .ght-color-white-50 { color: var(--white-50) !important; } .ght-color-inactive-text-light { color: var(--inactive-text-light) !important; } .ght-color-inactive-bg-light { color: var(--inactive-bg-light) !important; } .ght-color-secondary-warning-color-light { color: var(--secondary-warning-color-light) !important; } .ght-color-main-warning-color-light { color: var(--main-warning-color-light) !important; } .ght-color-secondary-error-color-light { color: var(--secondary-error-color-light) !important; } .ght-color-main-error-color-light { color: var(--main-error-color-light) !important; } .ght-color-secondary-success-color-light { color: var(--secondary-success-color-light) !important; } .ght-color-main-success-color-light { color: var(--main-success-color-light) !important; } .ght-color-secondary-info-color-light { color: var(--secondary-info-color-light) !important; } .ght-color-main-info-color-light { color: var(--main-info-color-light) !important; } .ght-color-main-bg-dark { color: var(--main-bg-dark) !important; } .ght-color-primary-blue-400 { color: var(--primary-blue-400) !important; } .ght-color-secondary-blue-300 { color: var(--secondary-blue-300) !important; } .ght-color-modal-body-bg-dark { color: var(--modal-body-bg-dark) !important; } .ght-color-inactive-bg-dark { color: var(--inactive-bg-dark) !important; } .ght-color-secondary-warning-color-dark { color: var(--secondary-warning-color-dark) !important; } .ght-color-secondary-error-color-dark { color: var(--secondary-error-color-dark) !important; } .ght-color-secondary-success-color-dark { color: var(--secondary-success-color-dark) !important; } .ght-color-secondary-info-color-dark { color: var(--secondary-info-color-dark) !important; } .ght-color-wf-page-header-bg-light { color: var(--wf-page-header-bg-light) !important; } .ght-color-element-visited-color { color: var(--element-visited-color) !important; } .ght-color-primary-blue-800-opc-8 { color: var(--primary-blue-800-opc-8) !important; } .ght-color-secondary-error-color-light-opc-40 { color: var(--secondary-error-color-light-opc-40) !important; } .ght-color-secondary-bg-dark { color: var(--secondary-bg-dark) !important; } .ght-color-row-selected-background-dark { color: var(--row-selected-background-dark) !important; } .ght-color-inactive-gray-500 { color: var(--inactive-gray-500) !important; } /* =========================================================================== TEXT COLORS — LEGACY TOKENS --------------------------------------------------------------------------- These utilities exist for backward compatibility. DO NOT use in new components. =========================================================================== */ .ght-color-main-bg-color { color: var(--main-bg-color) !important; } .ght-color-primary-blue-default { color: var(--primary-blue-default) !important; } .ght-color-secondary-blue-default { color: var(--secondary-blue-default) !important; } .ght-color-secondary-blue-800 { color: var(--secondary-blue-800) !important; } .ght-color-tertiary-blue-default { color: var(--tertiary-blue-default) !important; } .ght-color-surface-blue-50 { color: var(--surface-blue-50) !important; } .ght-color-stroke-shadow-gray-300 { color: var(--stroke-shadow-gray-300) !important; } .ght-color-title-black-900 { color: var(--title-black-900) !important; } .ght-color-subtitle-black-700 { color: var(--subtitle-black-700) !important; } .ght-color-paragraph-note-black-500 { color: var(--paragraph-note-black-500) !important; } .ght-color-basic-white-50 { color: var(--basic-white-50) !important; } .ght-color-surface-blue-100 { color: var(--surface-blue-100) !important; } .ght-color-surface-blue-200 { color: var(--surface-blue-200) !important; } .ght-color-inactive-text-default { color: var(--inactive-text-default) !important; } .ght-color-inactive-bg-default { color: var(--inactive-bg-default) !important; } .ght-color-inactive-gray-200 { color: var(--inactive-gray-200) !important; } .ght-color-disabled-gray-500 { color: var(--disabled-gray-500) !important; } .ght-color-informative-blue-700 { color: var(--informative-blue-700) !important; } .ght-color-informative-blue-700-hover { color: var(--informative-blue-700-hover) !important; } .ght-color-error-red-500 { color: var(--error-red-500) !important; } .ght-color-error-red-500-hover { color: var(--error-red-500-hover) !important; } .ght-color-error-orange-500 { color: var(--error-orange-500) !important; } .ght-color-error-bg-default { color: var(--error-bg-default) !important; } .ght-color-error-active-dark { color: var(--error-active-dark) !important; } .ght-color-error-hover { color: var(--error-hover) !important; } .ght-color-success-green-400 { color: var(--success-green-400) !important; } .ght-color-success-green-400-hover { color: var(--success-green-400-hover) !important; } .ght-color-warning-yellow-600 { color: var(--warning-yellow-600) !important; } .ght-color-warning-yellow-600-hover { color: var(--warning-yellow-600-hover) !important; } .ght-color-btn-bg-loading { color: var(--btn-bg-loading) !important; } .ght-color-primary-blue-focus { color: var(--primary-blue-focus) !important; } .ght-color-text-paragraph-default { color: var(--text-paragraph-default) !important; } .ght-color-main-dark-bg-color { color: var(--main-dark-bg-color) !important; } .ght-color-basic-dark-50 { color: var(--basic-dark-50) !important; } .ght-color-text-title-light { color: var(--text-title-light) !important; } .ght-color-all-inactive-background-dark { color: var(--all-inactive-background-dark) !important; } .ght-color-sms-hover-dark { color: var(--sms-hover-dark) !important; } .ght-color-inactive-gray-basic { color: var(--inactive-gray-basic) !important; } .ght-color-active-dark { color: var(--active-dark) !important; } .ght-color-dark-hover { color: var(--dark-hover) !important; } .ght-color-dark-text-default { color: var(--dark-text-default) !important; } .ght-color-dark-hover-2 { color: var(--dark-hover-2) !important; } .ght-color-dark-body-2 { color: var(--dark-body-2) !important; } .ght-color-accessibility-dark { color: var(--accessibility-dark) !important; } .ght-color-menu-dark { color: var(--menu-dark) !important; } .ght-color-text-subtitle-light { color: var(--text-subtitle-light) !important; } .ght-color-header-classic-bg { color: var(--header-classic-bg) !important; } .ght-color-header-classic-dark-bg { color: var(--header-classic-dark-bg) !important; } .ght-color-scrollbar-dark-track { color: var(--scrollbar-dark-track) !important; } .ght-color-scrollbar-dark-thumb { color: var(--scrollbar-dark-thumb) !important; } .ght-color-panel-background-light { color: var(--panel-background-light) !important; } .ght-color-row-selected-background-light { color: var(--row-selected-background-light) !important; } .ght-color-sms-warning-hover-dark { color: var(--sms-warning-hover-dark) !important; } /* ============================================================================= TYPOGRAPHY UTILITIES — FONT WEIGHT ------------------------------------------------------------------------------ Purpose: - Apply standardized font-weight values using design tokens. - Avoid hardcoded numeric font-weight values in components or markup. - Ensure typography consistency across the UI. Design principles: - Font weights are token-driven. - Utilities map directly to the typography scale. - High specificity is intentional. LLM CONTRACT: - Use these utilities instead of numeric font-weight values. - Do NOT invent new font-weight utilities. - Prefer semantic weight tokens over raw numbers. ============================================================================= */ /* =========================================================================== FONT WEIGHT UTILITIES =========================================================================== */ .ght-font-main-font-regular { font-weight: var(--main-font-regular); } .ght-font-main-font-medium { font-weight: var(--main-font-medium); } .ght-font-main-font-semibold { font-weight: var(--main-font-semibold); } /* ============================================================================= TYPOGRAPHY UTILITIES — FONT SIZE ------------------------------------------------------------------------------ Purpose: - Apply standardized font sizes using the typography scale tokens. - Avoid hardcoded font-size values in components or inline styles. - Allow explicit text sizing when semantic elements are not sufficient. Design principles: - Font sizes are token-driven. - Utilities are explicit and discrete. - High specificity is intentional (!important). LLM CONTRACT: - Use these utilities instead of raw font-size values. - Prefer semantic HTML (h1–h6, p, small) when appropriate. - Do NOT invent new font-size utilities. ============================================================================= */ /* =========================================================================== FONT SIZE UTILITIES =========================================================================== */ .ght-font-size-36 { font-size: var(--font-size-36) !important; } .ght-font-size-32 { font-size: var(--font-size-32) !important; } .ght-font-size-28 { font-size: var(--font-size-28) !important; } .ght-font-size-24 { font-size: var(--font-size-24) !important; } .ght-font-size-20 { font-size: var(--font-size-20) !important; } .ght-font-size-16 { font-size: var(--font-size-16) !important; } .ght-font-size-14 { font-size: var(--font-size-14) !important; } .ght-font-size-12 { font-size: var(--font-size-12) !important; } /* ============================================================================= SPACING UTILITIES — PADDING ------------------------------------------------------------------------------ Purpose: - Control internal spacing (padding) using the global spacing scale. - Avoid hardcoded padding values and inline styles. - Enable fast layout composition directly in HTML. Design principles: - Token-driven spacing. - Atomic utilities: one class = one padding rule. - High specificity is intentional (!important). LLM CONTRACT: - Use padding utilities instead of inline padding styles. - Prefer container-level padding over child margin hacks. - Do NOT invent new spacing values. ============================================================================= */ /* =========================================================================== UTILITY: UNIFORM PADDING --------------------------------------------------------------------------- Applies padding on all sides. =========================================================================== */ .ght-spacing-0 { padding: 0 !important; } .ght-spacing-4 { padding: var(--spacing-4) !important; } .ght-spacing-8 { padding: var(--spacing-8) !important; } .ght-spacing-12 { padding: var(--spacing-12) !important; } .ght-spacing-16 { padding: var(--spacing-16) !important; } .ght-spacing-20 { padding: var(--spacing-20) !important; } .ght-spacing-24 { padding: var(--spacing-24) !important; } .ght-spacing-32 { padding: var(--spacing-32) !important; } .ght-spacing-40 { padding: var(--spacing-40) !important; } .ght-spacing-44 { padding: var(--spacing-44) !important; } .ght-spacing-52 { padding: var(--spacing-52) !important; } /* =========================================================================== UTILITY: DIRECTIONAL PADDING --------------------------------------------------------------------------- Controls padding per side. Format: - ght-p{t|r|b|l}-{size} =========================================================================== */ .ght-pt-4 { padding-top: var(--spacing-4) !important; } .ght-pr-4 { padding-right: var(--spacing-4) !important; } .ght-pb-4 { padding-bottom: var(--spacing-4) !important; } .ght-pl-4 { padding-left: var(--spacing-4) !important; } .ght-pt-8 { padding-top: var(--spacing-8) !important; } .ght-pr-8 { padding-right: var(--spacing-8) !important; } .ght-pb-8 { padding-bottom: var(--spacing-8) !important; } .ght-pl-8 { padding-left: var(--spacing-8) !important; } .ght-pt-12 { padding-top: var(--spacing-12) !important; } .ght-pr-12 { padding-right: var(--spacing-12) !important; } .ght-pb-12 { padding-bottom: var(--spacing-12) !important; } .ght-pl-12 { padding-left: var(--spacing-12) !important; } .ght-pt-16 { padding-top: var(--spacing-16) !important; } .ght-pr-16 { padding-right: var(--spacing-16) !important; } .ght-pb-16 { padding-bottom: var(--spacing-16) !important; } .ght-pl-16 { padding-left: var(--spacing-16) !important; } .ght-pt-20 { padding-top: var(--spacing-20) !important; } .ght-pr-20 { padding-right: var(--spacing-20) !important; } .ght-pb-20 { padding-bottom: var(--spacing-20) !important; } .ght-pl-20 { padding-left: var(--spacing-20) !important; } .ght-pt-24 { padding-top: var(--spacing-24) !important; } .ght-pr-24 { padding-right: var(--spacing-24) !important; } .ght-pb-24 { padding-bottom: var(--spacing-24) !important; } .ght-pl-24 { padding-left: var(--spacing-24) !important; } .ght-pt-32 { padding-top: var(--spacing-32) !important; } .ght-pr-32 { padding-right: var(--spacing-32) !important; } .ght-pb-32 { padding-bottom: var(--spacing-32) !important; } .ght-pl-32 { padding-left: var(--spacing-32) !important; } .ght-pt-40 { padding-top: var(--spacing-40) !important; } .ght-pr-40 { padding-right: var(--spacing-40) !important; } .ght-pb-40 { padding-bottom: var(--spacing-40) !important; } .ght-pl-40 { padding-left: var(--spacing-40) !important; } .ght-pt-44 { padding-top: var(--spacing-44) !important; } .ght-pr-44 { padding-right: var(--spacing-44) !important; } .ght-pb-44 { padding-bottom: var(--spacing-44) !important; } .ght-pl-44 { padding-left: var(--spacing-44) !important; } .ght-pt-52 { padding-top: var(--spacing-52) !important; } .ght-pr-52 { padding-right: var(--spacing-52) !important; } .ght-pb-52 { padding-bottom: var(--spacing-52) !important; } .ght-pl-52 { padding-left: var(--spacing-52) !important; } /* ============================================================================= SPACING UTILITIES — MARGIN ------------------------------------------------------------------------------ Purpose: - Control external spacing (margin) between elements. - Replace ad-hoc margin styles and inline CSS. - Provide predictable, token-driven spacing. Design principles: - Token-driven spacing scale. - Atomic utilities: one class = one margin rule. - High specificity is intentional (!important). LLM CONTRACT: - Use margin utilities for spacing BETWEEN elements. - Prefer gap utilities for spacing BETWEEN children of a container. - Prefer padding utilities for spacing INSIDE a container. - Do NOT invent new margin values. ============================================================================= */ /* =========================================================================== UTILITY: RESET MARGIN --------------------------------------------------------------------------- */ .ght-margin-0 { margin: 0 !important; } .ght-mt-0 { margin-top: 0 !important; } .ght-mr-0 { margin-right: 0 !important; } .ght-mb-0 { margin-bottom: 0 !important; } .ght-ml-0 { margin-left: 0 !important; } /* =========================================================================== UTILITY: DIRECTIONAL MARGIN --------------------------------------------------------------------------- Format: - ght-m{t|r|b|l}-{size} =========================================================================== */ .ght-mt-4 { margin-top: var(--spacing-4) !important; } .ght-mr-4 { margin-right: var(--spacing-4) !important; } .ght-mb-4 { margin-bottom: var(--spacing-4) !important; } .ght-ml-4 { margin-left: var(--spacing-4) !important; } .ght-mt-8 { margin-top: var(--spacing-8) !important; } .ght-mr-8 { margin-right: var(--spacing-8) !important; } .ght-mb-8 { margin-bottom: var(--spacing-8) !important; } .ght-ml-8 { margin-left: var(--spacing-8) !important; } .ght-mt-12 { margin-top: var(--spacing-12) !important; } .ght-mr-12 { margin-right: var(--spacing-12) !important; } .ght-mb-12 { margin-bottom: var(--spacing-12) !important; } .ght-ml-12 { margin-left: var(--spacing-12) !important; } .ght-mt-16 { margin-top: var(--spacing-16) !important; } .ght-mr-16 { margin-right: var(--spacing-16) !important; } .ght-mb-16 { margin-bottom: var(--spacing-16) !important; } .ght-ml-16 { margin-left: var(--spacing-16) !important; } .ght-mt-20 { margin-top: var(--spacing-20) !important; } .ght-mr-20 { margin-right: var(--spacing-20) !important; } .ght-mb-20 { margin-bottom: var(--spacing-20) !important; } .ght-ml-20 { margin-left: var(--spacing-20) !important; } .ght-mt-24 { margin-top: var(--spacing-24) !important; } .ght-mr-24 { margin-right: var(--spacing-24) !important; } .ght-mb-24 { margin-bottom: var(--spacing-24) !important; } .ght-ml-24 { margin-left: var(--spacing-24) !important; } .ght-mt-32 { margin-top: var(--spacing-32) !important; } .ght-mr-32 { margin-right: var(--spacing-32) !important; } .ght-mb-32 { margin-bottom: var(--spacing-32) !important; } .ght-ml-32 { margin-left: var(--spacing-32) !important; } .ght-mt-40 { margin-top: var(--spacing-40) !important; } .ght-mr-40 { margin-right: var(--spacing-40) !important; } .ght-mb-40 { margin-bottom: var(--spacing-40) !important; } .ght-ml-40 { margin-left: var(--spacing-40) !important; } .ght-mt-44 { margin-top: var(--spacing-44) !important; } .ght-mr-44 { margin-right: var(--spacing-44) !important; } .ght-mb-44 { margin-bottom: var(--spacing-44) !important; } .ght-ml-44 { margin-left: var(--spacing-44) !important; } .ght-mt-52 { margin-top: var(--spacing-52) !important; } .ght-mr-52 { margin-right: var(--spacing-52) !important; } .ght-mb-52 { margin-bottom: var(--spacing-52) !important; } .ght-ml-52 { margin-left: var(--spacing-52) !important; } /* ============================================================================= BORDER UTILITIES ------------------------------------------------------------------------------ Purpose: - Control border visibility and placement. - Provide quick ways to add or remove borders without custom CSS. - Use design tokens for consistent border styling. Design principles: - Borders are token-driven (color, width). - Utilities are atomic and explicit. - High specificity is intentional (!important). LLM CONTRACT: - Use border utilities instead of inline border styles. - These utilities control border presence, not border radius. - Do NOT invent new border colors or widths. ============================================================================= */ /* =========================================================================== UTILITY: REMOVE BORDERS --------------------------------------------------------------------------- */ .ght-borderless { border: none !important; } .ght-borderless-right { border-right: none !important; } .ght-borderless-left { border-left: none !important; } .ght-borderless-top { border-top: none !important; } .ght-borderless-bottom { border-bottom: none !important; } /* =========================================================================== UTILITY: ADD BORDERS --------------------------------------------------------------------------- Applies a 1px solid border using the default border color token. =========================================================================== */ .ght-border-right { border-right: 1px solid var(--border-color) !important; } .ght-border-left { border-left: 1px solid var(--border-color) !important; } .ght-border-top { border-top: 1px solid var(--border-color) !important; } .ght-border-bottom { border-bottom: 1px solid var(--border-color) !important; } .ght-border { border: 1px solid var(--border-color) !important; } /* ============================================================================= LAYOUT UTILITIES — OVERFLOW ------------------------------------------------------------------------------ Purpose: - Control content clipping and scrolling behavior. - Prevent layout breaking caused by overflowing content. - Enable explicit scroll containers when required. Design principles: - Atomic utilities: one class = one overflow rule. - High specificity is intentional (!important). - Utilities should be applied consciously due to UX impact. LLM CONTRACT: - Use overflow utilities only when content constraints are known. - Prefer layout solutions (flex, grid, sizing) before forcing overflow. - Be cautious: overflow can hide content or affect accessibility. ============================================================================= */ /* =========================================================================== UTILITY: OVERFLOW (BOTH AXES) --------------------------------------------------------------------------- */ .ght-overflow-hidden { overflow: hidden !important; } .ght-overflow-auto { overflow: auto !important; } .ght-overflow-scroll { overflow: scroll !important; } /* =========================================================================== UTILITY: OVERFLOW — VERTICAL AXIS --------------------------------------------------------------------------- */ .ght-overflow-y-scroll { overflow-y: scroll !important; } .ght-overflow-y-hidden { overflow-y: hidden !important; } /* =========================================================================== UTILITY: OVERFLOW — HORIZONTAL AXIS --------------------------------------------------------------------------- */ .ght-overflow-x-scroll { overflow-x: scroll !important; } .ght-overflow-x-hidden { overflow-x: hidden !important; } /* ============================================================================= MOTION & ANIMATION UTILITIES ------------------------------------------------------------------------------ Purpose: - Define reusable motion primitives for UI feedback and transitions. - Provide named animations that can be reused by components and utilities. - Enable consistent animation behavior across the system. Design principles: - Animations are opt-in, never automatic. - Motion is subtle and short-lived. - Animations must respect accessibility preferences. LLM CONTRACT: - Use animation utilities intentionally, not decoratively. - Do NOT invent new keyframes. - Animations may be globally disabled for accessibility. ============================================================================= */ /* =========================================================================== KEYFRAMES: GENERIC MOTION --------------------------------------------------------------------------- */ /* Continuous rotation (e.g. loaders, spinners) */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ght-animate-spin { animation: spin 2s linear infinite; } /* Modal / panel entrance animation */ @keyframes fadeInModal { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ght-animate-fade-in-modal { animation: fadeInModal 1s ease-in-out infinite alternate; } /* Subtle attention pulse */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .ght-animate-pulse { animation: pulse 2s ease-in-out infinite; } /* Repeating grow / shrink effect (status or attention feedback) */ @keyframes grow { 0% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.7; } } .ght-animate-grow { animation: grow 1.5s ease-in-out infinite; } @keyframes ghtScrollText { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--scroll-distance))); } } @keyframes wave { 0% { height: 4px; } 50% { height: 16px; } 100% { height: 4px; } } .ght-animate-wave { animation: wave 1s ease-in-out infinite; animation-play-state: running; } .ght-animate-wave-delay-1 { animation-delay: 0s; animation-play-state: running; } .ght-animate-wave-delay-15 { animation-delay: 0.15s; } .ght-animate-wave-delay-3 { animation-delay: 0.3s; } .ght-animate-wave-delay-45 { animation-delay: 0.45s; } @keyframes dotElasticBefore { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1.5); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes dotElastic { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 1.5); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes dotElasticAfter { 0% { transform: scale(1, 1); } 25% { transform: scale(1, 1); } 50% { transform: scale(1, 0.67); } 75% { transform: scale(1, 1.5); } 100% { transform: scale(1, 1); } } .ght-animate-dot-elastic { display: flex; gap: 8px; align-items: flex-end; } .ght-animate-dot-elastic div { width: 10px; height: 10px; background: var(--active-dark); border-radius: 50%; transform-origin: center bottom; } .ght-animate-dot-elastic div:nth-child(1) { animation: dotElasticBefore 1s infinite ease-in-out; } .ght-animate-dot-elastic div:nth-child(2) { animation: dotElastic 1s infinite ease-in-out; } .ght-animate-dot-elastic div:nth-child(3) { animation: dotElasticAfter 1s infinite ease-in-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes micGrow { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* =========================================================================== KEYFRAMES: GHT STANDARD TRANSITIONS --------------------------------------------------------------------------- */ /* Standard enter animation */ @keyframes ghtFadeInDown { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Standard exit animation */ @keyframes ghtFadeOutUp { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.95); } } @keyframes fadeInScale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes pulseAnim { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes ghtBlink { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } .ght-animate-blink { animation: ghtBlink 1.2s ease-in-out infinite; } /* =========================================================================== ANIMATION UTILITIES --------------------------------------------------------------------------- */ /* Apply standard enter animation */ .ght-anim-in { animation: ghtFadeInDown 0.25s ease forwards; } /* Apply standard exit animation */ .ght-anim-out { animation: ghtFadeOutUp 0.25s ease forwards; } /* ============================================================================= TYPOGRAPHY — HEADINGS (STRUCTURAL) ------------------------------------------------------------------------------ Purpose: - Define visual hierarchy for headings. - Headings are multi-line by default. - Truncation is NOT applied globally. ============================================================================= */ h1 { font-size: var(--font-size-36); font-weight: var(--main-font-regular); } h2 { font-size: var(--font-size-32); font-weight: var(--main-font-regular); } h3 { font-size: var(--font-size-28); font-weight: var(--main-font-regular); } h4 { font-size: var(--font-size-24); font-weight: var(--main-font-regular); } h5 { font-size: var(--font-size-20); font-weight: var(--main-font-medium); } /* ----------------------------------------------------------------------------------------- */ /* ========================================================== GHT GRID CORE Core flex-based grid logic. All column size classes only set --ght-span ========================================================== ## Grid System (Flex-based) The GHT Grid is a 12-column flexbox layout system inspired by Bootstrap. ### Core concepts - `.ght-row` defines a flex container - `.ght-col-*` defines column width via CSS variables - Breakpoints override column span, not layout logic ### Column sizing Column width is calculated as: span / 12 * 100% Example: - `.ght-col-6` → 50% - `.ght-col-4-5` → 37.5% AI NOTE: - Column width is controlled by --ght-span - Breakpoints override --ght-span only - Do not redefine flex or max-width in media queries */ .ght-row { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; /* Grid configuration */ --ght-columns: 12; --ght-gutter-x: 15px; --ght-gutter-y: 10px; row-gap: var(--ght-gutter-y); } .ght-col, [class*="ght-col-"] { box-sizing: border-box; padding-left: var(--ght-gutter-x); padding-right: var(--ght-gutter-x); /* Default span */ --ght-span: 12; flex: 0 0 calc(var(--ght-span) / var(--ght-columns) * 100%); max-width: calc(var(--ght-span) / var(--ght-columns) * 100%); min-width: 0; } .ght-col-1 { --ght-span: 1; } .ght-col-2 { --ght-span: 2; } .ght-col-3 { --ght-span: 3; } .ght-col-4 { --ght-span: 4; } .ght-col-5 { --ght-span: 5; } .ght-col-6 { --ght-span: 6; } .ght-col-7 { --ght-span: 7; } .ght-col-8 { --ght-span: 8; } .ght-col-9 { --ght-span: 9; } .ght-col-10 { --ght-span: 10; } .ght-col-11 { --ght-span: 11; } .ght-col-12 { --ght-span: 12; } .ght-col-auto { flex: 1 1 auto; max-width: 100%; min-width: 0; } /* ========================================================== BREAKPOINTS Overrides only --ght-span ========================================================== */ @media (min-width: 360px) { .ght-col-xs-1 { --ght-span: 1; } .ght-col-xs-2 { --ght-span: 2; } .ght-col-xs-3 { --ght-span: 3; } .ght-col-xs-4 { --ght-span: 4; } .ght-col-xs-5 { --ght-span: 5; } .ght-col-xs-6 { --ght-span: 6; } .ght-col-xs-7 { --ght-span: 7; } .ght-col-xs-8 { --ght-span: 8; } .ght-col-xs-9 { --ght-span: 9; } .ght-col-xs-10 { --ght-span: 10; } .ght-col-xs-11 { --ght-span: 11; } .ght-col-xs-12 { --ght-span: 12; } } @media (min-width: 576px) { .ght-col-sm-1 { --ght-span: 1; } .ght-col-sm-2 { --ght-span: 2; } .ght-col-sm-3 { --ght-span: 3; } .ght-col-sm-4 { --ght-span: 4; } .ght-col-sm-5 { --ght-span: 5; } .ght-col-sm-6 { --ght-span: 6; } .ght-col-sm-7 { --ght-span: 7; } .ght-col-sm-8 { --ght-span: 8; } .ght-col-sm-9 { --ght-span: 9; } .ght-col-sm-10 { --ght-span: 10; } .ght-col-sm-11 { --ght-span: 11; } .ght-col-sm-12 { --ght-span: 12; } } @media (min-width: 768px) { .ght-col-md-1 { --ght-span: 1; } .ght-col-md-2 { --ght-span: 2; } .ght-col-md-3 { --ght-span: 3; } .ght-col-md-4 { --ght-span: 4; } .ght-col-md-5 { --ght-span: 5; } .ght-col-md-6 { --ght-span: 6; } .ght-col-md-7 { --ght-span: 7; } .ght-col-md-8 { --ght-span: 8; } .ght-col-md-9 { --ght-span: 9; } .ght-col-md-10 { --ght-span: 10; } .ght-col-md-11 { --ght-span: 11; } .ght-col-md-12 { --ght-span: 12; } } @media (min-width: 992px) { .ght-col-lg-1 { --ght-span: 1; } .ght-col-lg-2 { --ght-span: 2; } .ght-col-lg-3 { --ght-span: 3; } .ght-col-lg-4 { --ght-span: 4; } .ght-col-lg-5 { --ght-span: 5; } .ght-col-lg-6 { --ght-span: 6; } .ght-col-lg-7 { --ght-span: 7; } .ght-col-lg-8 { --ght-span: 8; } .ght-col-lg-9 { --ght-span: 9; } .ght-col-lg-10 { --ght-span: 10; } .ght-col-lg-11 { --ght-span: 11; } .ght-col-lg-12 { --ght-span: 12; } } @media (min-width: 1200px) { .ght-col-xl-1 { --ght-span: 1; } .ght-col-xl-2 { --ght-span: 2; } .ght-col-xl-3 { --ght-span: 3; } .ght-col-xl-4 { --ght-span: 4; } .ght-col-xl-5 { --ght-span: 5; } .ght-col-xl-6 { --ght-span: 6; } .ght-col-xl-7 { --ght-span: 7; } .ght-col-xl-8 { --ght-span: 8; } .ght-col-xl-9 { --ght-span: 9; } .ght-col-xl-10 { --ght-span: 10; } .ght-col-xl-11 { --ght-span: 11; } .ght-col-xl-12 { --ght-span: 12; } } @media (min-width: 1440px) { .ght-col-xxl-1 { --ght-span: 1; } .ght-col-xxl-2 { --ght-span: 2; } .ght-col-xxl-3 { --ght-span: 3; } .ght-col-xxl-4 { --ght-span: 4; } .ght-col-xxl-5 { --ght-span: 5; } .ght-col-xxl-6 { --ght-span: 6; } .ght-col-xxl-7 { --ght-span: 7; } .ght-col-xxl-8 { --ght-span: 8; } .ght-col-xxl-9 { --ght-span: 9; } .ght-col-xxl-10 { --ght-span: 10; } .ght-col-xxl-11 { --ght-span: 11; } .ght-col-xxl-12 { --ght-span: 12; } } /* ========================================================== GHT GRID (CSS GRID VERSION) Modern alternative to flex-based grid ========================================================== */ .ght-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 30px; } .ght-span-1 { grid-column: span 1; } .ght-span-2 { grid-column: span 2; } .ght-span-3 { grid-column: span 3; } .ght-span-4 { grid-column: span 4; } .ght-span-5 { grid-column: span 5; } .ght-span-6 { grid-column: span 6; } .ght-span-7 { grid-column: span 7; } .ght-span-8 { grid-column: span 8; } .ght-span-9 { grid-column: span 9; } .ght-span-10 { grid-column: span 10; } .ght-span-11 { grid-column: span 11; } .ght-span-12 { grid-column: span 12; } /* ------------------------------------------------------------------------------------------------ */ /* MAIN CONTENT */ /* ------------------------------------------------------------------------------------------------ */ /* ============================================================================= APPLICATION BASE STYLES — BODY & MAIN CONTAINERS ------------------------------------------------------------------------------ Purpose: - Define the global visual environment of the application. - Establish base typography, colors, and layout constraints. - Provide theme switching (light / dark) at the root level. Design principles: - The body defines defaults, not components. - Components must inherit from body whenever possible. - Layout overflow is intentionally constrained at the root. LLM CONTRACT: - Do NOT override body styles inside components. - Use provided containers instead of redefining layout primitives. - Theme switching is handled via body classes only. ============================================================================= */ /* =========================================================================== TEMPORARY / LEGACY LAYOUT HELPERS --------------------------------------------------------------------------- */ /* Temporary offset for side-menu layouts (legacy / transitional) */ .ght-temp-menu { margin-left: 240px; } /* =========================================================================== GLOBAL ICON BASE --------------------------------------------------------------------------- */ /* Base background for icon containers */ .ght-icons { background-color: var(--text-color-title-light); } /* =========================================================================== BODY — APPLICATION ROOT --------------------------------------------------------------------------- */ body { font-family: var(--main-font) !important; font-size: var(--font-size-16); font-weight: var(--main-font-regular); background-color: var(--main-bg-light); color: var(--text-color-title-light); margin: 0; padding: 0; /* Body overflow is intentionally hidden. Scrolling must be handled by .ght-page-content or similar containers. */ overflow: hidden; } /* =========================================================================== MAIN CONTENT WRAPPERS --------------------------------------------------------------------------- */ /* Primary content wrapper */ .ght-main-content { width: 100%; } /* Scrollable page content area */ .ght-page-content { width: 100%; overflow-y: auto; } /* Fluid container with horizontal padding */ .ght-container-fluid { width: 100%; padding-right: var(--spacing-16); padding-left: var(--spacing-16); margin-right: auto; margin-left: auto; box-sizing: border-box; } /* =========================================================================== DISABLED STATE — GLOBAL FEEDBACK --------------------------------------------------------------------------- */ .ght-disabled:hover { background-color: var(--inactive-gray-500); color: var(--white); } /* =========================================================================== THEME: DARK --------------------------------------------------------------------------- Theme switching is applied at the body level. =========================================================================== */ body.ght-theme-dark, body.dark-theme { background-color: var(--main-bg-dark); color: var(--white); } body.ght-theme-dark .ght-disabled:hover, body.dark-theme .ght-disabled:hover { background-color: var(--inactive-bg-light); color: var(--white); } body.ght-theme-dark .ght-icons, body.dark-theme .ght-icons { background-color: var(--white); } /* ============================================================================= COMPONENT — APPLICATION HEADER ------------------------------------------------------------------------------ Purpose: - Define the top application header bar. - Host navigation context, page title, status banners, and user tools. - Provide a fixed-height, single-row layout. Design principles: - Header height is fixed and predictable. - Header content is single-line by default. - Truncation is intentional to prevent layout breakage. LLM CONTRACT: - Do NOT change header height. - Do NOT introduce multi-line content inside header. - Use provided sub-elements for structure. ============================================================================= */ /* =========================================================================== HEADER ROOT --------------------------------------------------------------------------- */ .ght-header { height: 44px; display: flex; justify-content: space-between; align-items: center; } /* =========================================================================== HEADER ICONS --------------------------------------------------------------------------- */ /* Standard icon container inside header */ .ght-header .ght-icons { width: 24px; height: 24px; flex-shrink: 0; } /* =========================================================================== HEADER TITLE AREA --------------------------------------------------------------------------- */ /* Left section: title + optional banners */ .ght-header-title { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--spacing-20); } /* Informational banner (status, environment, alerts) */ .ght-header-banner-info { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 3px 10px; border-radius: 5px; background-color: var(--primary-blue-800); color: var(--white); } /* Banner text is always single-line and truncated */ .ght-header-banner-info-text { overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; } /* =========================================================================== HEADER TOOLS (RIGHT SIDE) --------------------------------------------------------------------------- */ /* Right section: actions, user info, settings */ .ght-header-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--spacing-16); } /* User name label */ .ght-header-user-name { font-size: var(--font-size-16); font-weight: var(--main-font-semibold); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ----------------------------------------------------------------------------------------- */ /* COMPONENTS */ /* ----------------------------------------------------------------------------------------- */ /* ============================================================================= COMPONENT — BUTTONS ------------------------------------------------------------------------------ Purpose: - Provide a consistent, accessible button system. - Support multiple sizes, states, and themes. - Handle loading, disabled, and grouped button scenarios. Design principles: - Buttons are inline-flex for icon + text alignment. - Width defaults to 100% (container-driven layout). - Visual states are explicit and predictable. LLM CONTRACT: - Always use .ght-btn as the base class. - Combine exactly ONE size modifier and ONE variant modifier. - Do NOT override button styles inline. ============================================================================= */ /* =========================================================================== BUTTON BASE --------------------------------------------------------------------------- */ .ght-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } /* Button label text (single-line, truncates if needed) */ .ght-btn-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Icons inside buttons should not shrink */ .ght-btn i { flex-shrink: 0; } .ght-btn-loading { pointer-events: none; } /* =========================================================================== BUTTON GROUP --------------------------------------------------------------------------- */ .ght-btn-group { display: flex; flex-direction: row; } .ght-btn-group > .ght-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 1px solid var(--border-color); } .ght-btn-group > .ght-btn:nth-child(2) { border-top-left-radius: 0; border-bottom-left-radius: 0; max-width: fit-content; padding: 0 6px; } /* =========================================================================== BUTTON SIZES --------------------------------------------------------------------------- */ .ght-btn-small { height: var(--height-28); padding: 4px 12px; font-size: var(--font-size-16); font-weight: var(--main-font-semibold); border-radius: 8px; } .ght-btn-medium { height: var(--height-36); padding: 4px 12px; font-size: var(--font-size-16); font-weight: var(--main-font-semibold); border-radius: 8px; } .ght-btn-large { height: var(--height-44); padding: 4px 12px; font-size: var(--font-size-16); font-weight: var(--main-font-semibold); border-radius: 16px; } /* =========================================================================== BUTTON VARIANT — PRIMARY --------------------------------------------------------------------------- */ .ght-btn-primary { background-color: var(--primary-blue-800); color: var(--white); border: 1px solid var(--primary-blue-800); } .ght-btn-primary > .ght-icons { background-color: var(--white); } /* Hover / active */ .ght-btn-primary:hover { background-color: var(--secondary-blue-600); } .ght-btn-primary:active { background-color: var(--secondary-blue-600); box-shadow: 0 3px 4px #00000040 inset; } /* Focus */ .ght-btn-primary:focus { outline-color: var(--main-info-color-light); } /* =========================================================================== BUTTON STATES — DISABLED & LOADING --------------------------------------------------------------------------- */ .ght-btn-primary:disabled, .ght-btn-primary.ght-disabled { background-color: var(--inactive-bg-light); color: var(--inactive-text-light); border: 1px solid var(--inactive-bg-light); pointer-events: none; } .ght-btn-primary:disabled > .ght-icons, .ght-btn-primary.ght-disabled > .ght-icons { background-color: var(--inactive-text-light); } /* Loading state */ .ght-btn-primary.ght-btn-loading { position: relative; background-color: var(--secondary-blue-300); color: var(--white); border: none; } .ght-btn-primary.ght-btn-loading:hover { background-color: var(--secondary-blue-300); } .ght-btn-primary.ght-btn-loading::before { content: ""; width: var(--width-16); height: var(--height-16); margin-right: 8px; border: 2px solid var(--primary-blue-800); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } /* DARKTHEME */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary { background-color: var(--primary-blue-400); color: var(--primary-blue-800); border: 1px solid var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary > .ght-icons { background-color: var(--primary-blue-800); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary:hover { background-color: var(--secondary-blue-300); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary:active { background-color: var(--secondary-blue-300); box-shadow: 0 3px 4px #00000040 inset; } body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary:disabled, body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary.ght-disabled { background-color: var(--inactive-bg-dark); color: var(--main-bg-dark); border: 1px solid var(--inactive-bg-dark); pointer-events: none; } body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary:disabled > .ght-icons, body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary.ght-disabled > .ght-icons { background-color: var(--main-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary.ght-btn-loading { background-color: var(--secondary-blue-300); color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-primary.ght-btn-loading > .ght-icons { background-color: var(--primary-blue-400); } /* ============================================================================= BUTTON — SECONDARY ------------------------------------------------------------------------------ Outlined / transparent button. Supports light and dark themes. ============================================================================= */ /* LIGHT / DEFAULT */ .ght-btn-secondary { background-color: transparent; color: var(--primary-blue-800); border: 1px solid var(--primary-blue-800); } .ght-btn-secondary > .ght-icons { background-color: var(--primary-blue-800); } .ght-btn-secondary:hover { background-color: var(--secondary-blue-300); } .ght-btn-secondary:active { background-color: var(--secondary-blue-300); box-shadow: 0 3px 4px #00000040 inset; } .ght-btn-secondary:focus { outline-color: var(--main-info-color-light); } .ght-btn-secondary:disabled, .ght-btn-secondary.ght-disabled { color: var(--border-color); border: 1px solid var(--border-color); pointer-events: none; } .ght-btn-secondary:disabled > .ght-icons, .ght-btn-secondary.ght-disabled > .ght-icons { background-color: var(--border-color); } /* Loading */ .ght-btn-secondary.ght-btn-loading { position: relative; } .ght-btn-secondary.ght-btn-loading::before { content: ""; display: inline-block; width: var(--width-16); height: var(--height-16); border: 2px solid var(--primary-blue-800); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px; } /* ============================================================================= BUTTON — SECONDARY (DARK THEME) ------------------------------------------------------------------------------ Supports `.ght-theme-dark` (canonical) and `.dark-theme` (legacy). ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary { background-color: transparent; color: var(--primary-blue-400); border: 1px solid var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary > .ght-icons { background-color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary:hover { background-color: var(--text-color-title-light); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary:active { background-color: var(--text-color-title-light); box-shadow: 0 3px 4px #00000040 inset; } body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary:disabled, body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary.ght-disabled { background-color: var(--main-bg-dark); color: var(--inactive-bg-dark); border: 1px solid var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary:disabled > .ght-icons, body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary.ght-disabled > .ght-icons { background-color: var(--inactive-bg-dark); } /* Loading (dark) */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary.ght-btn-loading { background-color: var(--text-color-title-light); color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary.ght-btn-loading > .ght-icons { background-color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-secondary.ght-btn-loading::before { border-color: var(--primary-blue-400); border-top-color: transparent; } /* ============================================================================= BUTTON — TERTIARY ------------------------------------------------------------------------------ Low-emphasis / ghost button. Used for secondary actions, inline actions, or toolbars. ============================================================================= */ /* LIGHT / DEFAULT */ .ght-btn-tertiary { background-color: transparent; color: var(--primary-blue-800); border: none; } .ght-btn-tertiary > .ght-icons { background-color: var(--primary-blue-800); } .ght-btn-tertiary:hover { background-color: var(--primary-blue-800-opc-8); } .ght-btn-tertiary:active { background-color: var(--primary-blue-800-opc-8); box-shadow: 0 3px 4px #00000010 inset; } .ght-btn-tertiary:focus { outline-color: var(--main-info-color-light); } /* Disabled */ .ght-btn-tertiary:disabled, .ght-btn-tertiary.ght-disabled { color: var(--inactive-text-light); pointer-events: none; } .ght-btn-tertiary:disabled > .ght-icons, .ght-btn-tertiary.ght-disabled > .ght-icons { background-color: var(--inactive-text-light); } /* Loading */ .ght-btn-tertiary.ght-btn-loading { position: relative; pointer-events: none; } .ght-btn-tertiary.ght-btn-loading::before { content: ""; display: inline-block; width: var(--width-16); height: var(--height-16); margin-right: 8px; border: 2px solid var(--primary-blue-800); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } /* ============================================================================= BUTTON — TERTIARY (DARK THEME) ------------------------------------------------------------------------------ Supports `.ght-theme-dark` (canonical) and `.dark-theme` (legacy). ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary { background-color: transparent; color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary > .ght-icons { background-color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary:hover { background-color: var(--text-color-title-light); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary:active { background-color: var(--text-color-title-light); box-shadow: 0 3px 4px #00000040 inset; } /* Disabled (dark) */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary:disabled, body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary.ght-disabled { background-color: transparent; color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary:disabled > .ght-icons, body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary.ght-disabled > .ght-icons { background-color: var(--inactive-bg-dark); } /* Loading (dark) */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary.ght-btn-loading { background-color: transparent; color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary.ght-btn-loading > .ght-icons { background-color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-tertiary.ght-btn-loading::before { border-color: var(--primary-blue-400); border-top-color: transparent; } /* ============================================================================= BUTTON — ERROR ------------------------------------------------------------------------------ Destructive / error actions. Used for delete, remove, irreversible operations. ============================================================================= */ /* LIGHT / DEFAULT */ .ght-btn-error { background-color: transparent; color: var(--main-error-color-light); border: 1px solid var(--main-error-color-light); } .ght-btn-error > .ght-icons { background-color: var(--main-error-color-light); } .ght-btn-error:hover { background-color: var(--secondary-error-color-light-opc-40); } .ght-btn-error:active { background-color: var(--secondary-error-color-light-opc-40); box-shadow: 0 3px 4px #00000010 inset; } .ght-btn-error:focus { outline-color: var(--main-info-color-light); } /* Disabled */ .ght-btn-error:disabled, .ght-btn-error.ght-disabled { color: var(--inactive-text-light); border-color: var(--inactive-text-light); pointer-events: none; } .ght-btn-error:disabled > .ght-icons, .ght-btn-error.ght-disabled > .ght-icons { background-color: var(--inactive-text-light); } /* Loading */ .ght-btn-error.ght-btn-loading { position: relative; pointer-events: none; } .ght-btn-error.ght-btn-loading::before { content: ""; display: inline-block; width: var(--width-16); height: var(--height-16); margin-right: 8px; border: 2px solid var(--main-error-color-light); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } /* ============================================================================= BUTTON — ERROR (DARK THEME) ------------------------------------------------------------------------------ Supports `.ght-theme-dark` (canonical) and `.dark-theme` (legacy). ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-error { background-color: transparent; color: var(--secondary-error-color-light); border-color: var(--secondary-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-error > .ght-icons { background-color: var(--secondary-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-error:hover { background-color: var(--text-color-title-light); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-error:active { background-color: var(--text-color-title-light); box-shadow: 0 3px 4px #00000040 inset; } /* Disabled (dark) */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-error:disabled, body:is(.ght-theme-dark, .dark-theme) .ght-btn-error.ght-disabled { background-color: var(--main-bg-dark); color: var(--inactive-bg-dark); border-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-error:disabled > .ght-icons, body:is(.ght-theme-dark, .dark-theme) .ght-btn-error.ght-disabled > .ght-icons { background-color: var(--inactive-bg-dark); } /* Loading (dark) */ body:is(.ght-theme-dark, .dark-theme) .ght-btn-error.ght-btn-loading { background-color: var(--main-bg-dark); color: var(--secondary-error-color-light); border-color: var(--secondary-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-error.ght-btn-loading > .ght-icons { background-color: var(--secondary-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-btn-error.ght-btn-loading::before { border-color: var(--secondary-error-color-light); border-top-color: transparent; } /* ============================================================================= FAB BUTTON (Floating Action Button) ------------------------------------------------------------------------------ Purpose: - Primary floating action. - Icon-only circular button. - Used for main or contextual actions. LLM CONTRACT: - FAB buttons MUST contain only an icon. - Text is NOT allowed inside FAB buttons. - FAB size is controlled via size modifiers. - FAB buttons do NOT use .ght-btn. ============================================================================= */ /* =========================================================================== FAB BASE --------------------------------------------------------------------------- */ .ght-fab-btn { display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; cursor: pointer; background-color: var(--primary-blue-800); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; } /* Icon inside FAB */ .ght-fab-btn > .ght-icons { background-color: var(--white); } /* Hover / active */ .ght-fab-btn:hover { background-color: var(--secondary-blue-600); } .ght-fab-btn:active { background-color: var(--secondary-blue-600); box-shadow: 0 3px 4px #00000040 inset; } .ght-fab-btn:disabled, .ght-fab-btn.ght-disabled { background-color: var(--inactive-bg-light); pointer-events: none; } .ght-fab-btn:disabled > .ght-icons, .ght-fab-btn.ght-disabled > .ght-icons { background-color: var(--inactive-text-light); } /* ============================================================================= FAB BUTTON — DARK THEME ------------------------------------------------------------------------------ Supports `.ght-theme-dark` (canonical) and `.dark-theme` (legacy). ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn { background-color: var(--main-info-color-light); color: var(--main-bg-dark); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn > .ght-icons { background-color: var(--main-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn:hover { background-color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn:active { background-color: var(--primary-blue-400); box-shadow: 0 3px 4px #00000040 inset; } /* Disabled */ body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn:disabled, body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn.ght-disabled { background-color: var(--inactive-bg-dark); color: var(--main-bg-dark); pointer-events: none; } body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn:disabled > .ght-icons, body:is(.ght-theme-dark, .dark-theme) .ght-fab-btn.ght-disabled > .ght-icons { background-color: var(--main-bg-dark); } /* ============================================================================= FAB OPTIONS / SPEED DIAL ------------------------------------------------------------------------------ Expandable group of FAB actions related to a main FAB. Structure: - Wrapper: positioning context - Trigger: main FAB button - Container: holds option buttons - Option: individual FAB actions JS controls visibility via `.ght-show`. LLM CONTRACT: - Wrapper MUST wrap trigger + options container - Visibility is controlled ONLY via `.ght-show` - Do NOT toggle inline styles ============================================================================= */ /* =========================================================================== WRAPPER --------------------------------------------------------------------------- */ .ght-fab-btn-options-wrapper { position: relative; display: inline-block; } /* =========================================================================== TRIGGER (MAIN FAB) --------------------------------------------------------------------------- */ .ght-fab-btn-options { cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; } /* =========================================================================== OPTIONS CONTAINER --------------------------------------------------------------------------- */ .ght-fab-btn-options-container { position: absolute; display: flex; flex-direction: column; gap: 10px; align-items: center; z-index: var(--dropdown-menu-z-index, 150); /* Hidden by default */ opacity: 0; pointer-events: none; transform: scale(0.95); transition: opacity 0.2s ease, transform 0.2s ease; } /* Visible state (JS toggles this class) */ .ght-fab-btn-options-container.ght-show { opacity: 1; pointer-events: auto; transform: scale(1); } /* =========================================================================== POSITIONING MODIFIERS --------------------------------------------------------------------------- */ /* Vertical */ .ght-fab-btn-options-container.ght-top { bottom: calc(var(--fab-offset, 70px)); left: 50%; transform: translateX(-50%) scale(0.95); } .ght-fab-btn-options-container.ght-bottom { top: calc(var(--fab-offset, 70px)); left: 50%; transform: translateX(-50%) scale(0.95); } /* Horizontal */ .ght-fab-btn-options-container.ght-left { top: 50%; right: calc(var(--fab-offset, 70px)); transform: translateY(-50%) scale(0.95); flex-direction: row; } .ght-fab-btn-options-container.ght-right { top: 50%; left: calc(var(--fab-offset, 70px)); transform: translateY(-50%) scale(0.95); flex-direction: row; } /* =========================================================================== OPTION ITEM --------------------------------------------------------------------------- */ .ght-fab-btn-option { display: flex; align-items: center; justify-content: center; } /* ============================================================================= FAB BUTTON — SIZE MODIFIERS ------------------------------------------------------------------------------ Controls the physical size of the Floating Action Button and its icon. Design rules: - FAB size is fixed (width & height). - FAB buttons do NOT use padding for sizing. - Icon size scales proportionally with FAB size. - Font-size is only relevant for icon fonts. LLM CONTRACT: - Always apply exactly ONE FAB size modifier. - Do NOT override width/height manually. - Icon size is controlled automatically by the size modifier. ============================================================================= */ /* Small FAB */ .ght-fab-btn-small { width: var(--height-52); height: var(--height-52); font-size: var(--font-size-12); } /* Medium FAB (default recommended size) */ .ght-fab-btn-medium { width: var(--height-60); height: var(--height-60); font-size: var(--font-size-16); } /* Large FAB */ .ght-fab-btn-large { width: var(--height-72); height: var(--height-72); font-size: var(--font-size-20); } /* Icon scaling per FAB size */ .ght-fab-btn-small > .ght-icons { width: var(--height-28); height: var(--height-28); } .ght-fab-btn-medium > .ght-icons { width: var(--height-32); height: var(--height-32); } .ght-fab-btn-large > .ght-icons { width: var(--height-36); height: var(--height-36); } /* ------------------------------------------------------------------------------------------------ */ /* ============================================================================= INPUTS SYSTEM ------------------------------------------------------------------------------ This file defines base input components used across the UI. Components: - .ght-textbox → simple standalone input - .ght-textfield → composite input with label, helper text, icons LLM CONTRACT: - Use .ght-textbox for simple forms - Use .ght-textfield-container for full-featured inputs - Do NOT mix both patterns ============================================================================= */ /* =========================================================================== TEXTBOX (SIMPLE INPUT) --------------------------------------------------------------------------- */ .ght-textbox { flex: 1; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--white); color: var(--text-color-title-light); text-indent: 5px; outline: none !important; } .ght-textbox:focus { border-color: var(--main-info-color-light); } .ght-textbox::placeholder { color: var(--inactive-text-light); } .ght-textbox:disabled, .ght-disabled .ght-textbox { color: var(--inactive-text-light); cursor: not-allowed; pointer-events: none; } /* =========================================================================== TEXTFIELD (COMPOSITE INPUT) --------------------------------------------------------------------------- */ /* Structure: - .ght-textfield-container (root) - .ght-textfield-label - .ght-textfield-wrapper - .ght-icons (optional) - .ght-textfield - .ght-textfield-text (optional trailing text) - .ght-info-text */ .ght-textfield-container { display: flex; flex-direction: column; gap: 4px; } /* Label */ .ght-textfield-label { font-size: var(--font-size-16); font-weight: var(--main-font-regular); color: var(--text-color-title-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Helper / info text */ .ght-info-text { font-size: var(--font-size-12); font-weight: var(--main-font-semibold); color: var(--text-color-title-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wrapper */ .ght-textfield-wrapper { position: relative; display: flex; align-items: center; width: 100%; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--white); transition: border-color 0.2s ease, background-color 0.2s ease; } .ght-textfield-wrapper > .ght-icons { background-color: var(--text-color-title-light); } .ght-textfield-wrapper:focus-within { border-color: var(--main-info-color-light); } /* Input */ .ght-textfield { flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-size-16); color: var(--text-color-title-light); text-indent: 5px; } .ght-textfield::placeholder { color: var(--inactive-text-light); } /* Sizes */ .ght-textfield-wrapper.ght-medium { height: var(--height-28); } .ght-textfield-wrapper.ght-large { height: var(--height-36); } /* Trailing text */ .ght-textfield-text { padding: 0 5px; border-left: 1px solid var(--border-color); font-size: var(--font-size-16); color: var(--text-color-title-light); } /* =========================================================================== STATES — DISABLED --------------------------------------------------------------------------- */ /* Preferred: - Apply .ght-disabled to the container Fallback: - Input :disabled is supported but should not be the only control */ .ght-textfield-container.ght-disabled .ght-textfield-wrapper { background-color: var(--inactive-bg-light); border-color: var(--inactive-bg-light); } .ght-textfield-container.ght-disabled, .ght-textfield-container.ght-disabled * { color: var(--inactive-text-light); pointer-events: none; } .ght-textfield-container.ght-disabled .ght-icons { background-color: var(--inactive-text-light); } /* Fallback for native disabled input */ .ght-textfield:disabled { color: var(--inactive-text-light); pointer-events: none; } /* Optional progressive enhancement */ .ght-textfield-container:has(.ght-textfield:disabled) { color: var(--inactive-text-light); pointer-events: none; } .ght-textfield-container:has(.ght-textfield:disabled) .ght-textfield-wrapper { background-color: var(--inactive-bg-light); border-color: var(--inactive-bg-light); } .ght-textfield-container:has(.ght-textfield:disabled) .ght-textfield-label { color: var(--inactive-text-light); } .ght-textfield-container:has(.ght-textfield:disabled) .ght-textfield-text { color: var(--inactive-text-light); } .ght-textfield-container:has(.ght-textfield:disabled) .ght-info-text { color: var(--inactive-text-light); pointer-events: none; } .ght-textfield-container:has(.ght-textfield:disabled) .ght-icons { background-color: var(--inactive-text-light); pointer-events: none; } /* =========================================================================== STATES — ERROR --------------------------------------------------------------------------- */ .ght-textfield-container.ght-error .ght-textfield-wrapper { border-color: var(--main-error-color-light); } .ght-textfield-container.ght-error .ght-textfield-label, .ght-textfield-container.ght-error .ght-textfield, .ght-textfield-container.ght-error .ght-textfield-text, .ght-textfield-container.ght-error .ght-info-text { color: var(--main-error-color-light); } .ght-textfield-container.ght-error .ght-textfield::placeholder { color: var(--secondary-error-color-light-opc-40); } .ght-textfield-container.ght-error .ght-icons { background-color: var(--main-error-color-light); } /* ============================================================================= TEXTFIELD — DARK THEME ------------------------------------------------------------------------------ Supports `.ght-theme-dark` (canonical) and `.dark-theme` (legacy). `:has()` is intentionally preserved. ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-textfield-text { color: var(--white-50); border-left: 1px solid var(--white-50); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container .ght-textfield-label, body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container .ght-info-text { color: var(--white-50); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-wrapper { border: 1px solid var(--white-50); background-color: var(--main-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield { color: var(--white); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-wrapper > .ght-icons { background-color: var(--white); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-wrapper:focus-within { border-color: var(--main-info-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield::placeholder { color: var(--inactive-text-light); } /* =========================================================================== DISABLED — VIA CONTAINER --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-disabled .ght-textfield-wrapper { background-color: var(--main-bg-dark); border-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-disabled, body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-disabled * { color: var(--inactive-bg-dark); pointer-events: none; } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-disabled .ght-icons { background-color: var(--inactive-bg-dark); } /* =========================================================================== DISABLED — VIA :has() --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container:has(.ght-textfield:disabled) .ght-textfield-wrapper { background-color: var(--main-bg-dark); border-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container:has(.ght-textfield:disabled) .ght-textfield-label, body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container:has(.ght-textfield:disabled) .ght-textfield-text, body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container:has(.ght-textfield:disabled) .ght-info-text { color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container:has(.ght-textfield:disabled) .ght-textfield-text { border-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container:has(.ght-textfield:disabled) .ght-icons { background-color: var(--inactive-bg-dark); pointer-events: none; } /* =========================================================================== ERROR STATE --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-textfield-wrapper { border-color: var(--main-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-textfield-label, body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-textfield-text, body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-textfield, body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-info-text { color: var(--main-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-textfield-text { border-color: var(--main-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-textfield::placeholder { color: var(--secondary-error-color-light-opc-40); } body:is(.ght-theme-dark, .dark-theme) .ght-textfield-container.ght-error .ght-icons { background-color: var(--main-error-color-light); } /* ------------------------------------------------------------------------------------------------ */ /* ============================================================================= CHECKBOX COMPONENT ------------------------------------------------------------------------------ Custom styled checkbox with label. Structure: - .ght-checkbox-wrapper (clickable container) - .ght-checkbox (native input[type="checkbox"]) - .ght-checkbox-label LLM CONTRACT: - Checkbox input MUST be inside .ght-checkbox-wrapper - State is controlled at wrapper level when possible - Do NOT mix native and custom checkbox visuals ============================================================================= */ /* =========================================================================== WRAPPER --------------------------------------------------------------------------- */ .ght-checkbox-wrapper { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px; cursor: pointer; } .ght-checkbox-wrapper:hover { background-color: var(--inactive-bg-light); border-radius: 4px; } /* =========================================================================== CHECKBOX INPUT --------------------------------------------------------------------------- */ .ght-checkbox { width: var(--width-16); height: var(--height-16); margin-left: 4px; flex-shrink: 0; appearance: none; border-radius: 2px; background-color: var(--white); border: 1px solid var(--border-color); cursor: pointer; } .ght-checkbox:focus { outline-color: var(--main-info-color-light); } /* Checked state (custom, consistent across browsers) */ .ght-checkbox:checked { background-color: var(--primary-blue-800); border-color: var(--primary-blue-800); } .ght-checkbox:checked::after { content: ""; display: block; width: 4px; height: 8px; margin: 2px auto; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* =========================================================================== LABEL --------------------------------------------------------------------------- */ .ght-checkbox-label { font-size: var(--font-size-16); color: var(--text-color-title-light); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* =========================================================================== DISABLED STATE --------------------------------------------------------------------------- */ /* Preferred: wrapper-level */ .ght-checkbox-wrapper.ght-disabled { pointer-events: none; } .ght-checkbox-wrapper.ght-disabled .ght-checkbox { background-color: var(--inactive-bg-light); border-color: var(--inactive-bg-light); } .ght-checkbox-wrapper.ght-disabled .ght-checkbox-label { color: var(--inactive-text-light); } /* Native disabled support */ .ght-checkbox:disabled { background-color: var(--inactive-bg-light); border-color: var(--inactive-bg-light); } /* Progressive enhancement */ .ght-checkbox-wrapper:has(.ght-checkbox:disabled) { pointer-events: none; } .ght-checkbox-wrapper:has(.ght-checkbox:disabled) .ght-checkbox-label { color: var(--inactive-text-light); } /* =========================================================================== ERROR STATE --------------------------------------------------------------------------- */ .ght-checkbox-wrapper.ght-error .ght-checkbox { border-color: var(--main-error-color-light); } .ght-checkbox-wrapper.ght-error .ght-checkbox:checked { background-color: var(--main-error-color-light); border-color: var(--main-error-color-light); } .ght-checkbox-wrapper.ght-error .ght-checkbox-label { color: var(--main-error-color-light); } /* ============================================================================= CHECKBOX — DARK THEME ------------------------------------------------------------------------------ Supports `.ght-theme-dark` (canonical) and `.dark-theme` (legacy). `:has()` is intentionally preserved. ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-checkbox-wrapper:hover { background-color: var(--inactive-bg-dark); border-radius: 4px; } body:is(.ght-theme-dark, .dark-theme) .ght-checkbox { background-color: var(--main-bg-dark); border: 1px solid var(--white-50); } body:is(.ght-theme-dark, .dark-theme) .ght-checkbox:checked { accent-color: var(--primary-blue-400); color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-checkbox-label { color: var(--white-50); } /* =========================================================================== DISABLED — VIA WRAPPER --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-checkbox-wrapper.ght-disabled .ght-checkbox { background-color: var(--inactive-bg-dark); border-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-checkbox-wrapper.ght-disabled .ght-checkbox-label { color: var(--inactive-bg-dark); } /* =========================================================================== DISABLED — VIA :has() --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-checkbox-wrapper:has(.ght-checkbox:disabled) .ght-checkbox { background-color: var(--inactive-bg-dark); border-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-checkbox-wrapper:has(.ght-checkbox:disabled) .ght-checkbox-label { color: var(--inactive-bg-dark); } /* ============================================================================= RADIO BUTTON COMPONENT ------------------------------------------------------------------------------ Custom styled radio button with optional grouping. Structure: - .ght-radio-wrapper (clickable item) - input[type="radio"].ght-radio - .ght-radio-label Optional grouping: - .ght-radio-group-wrapper - .ght-radio-group-label - .ght-radio-group-container LLM CONTRACT: - Radio input MUST be inside .ght-radio-wrapper - Group-level states override item-level states - Do NOT mix native and custom radio visuals ============================================================================= */ /* =========================================================================== RADIO ITEM --------------------------------------------------------------------------- */ .ght-radio-wrapper { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; padding: 2px; } .ght-radio-wrapper:hover { background-color: var(--inactive-bg-light); border-radius: 4px; } .ght-radio { accent-color: var(--primary-blue-800); width: var(--width-16); height: var(--height-16); margin: 0px 0px 0px 4px; flex-shrink: 0; } .ght-radio-label { font-size: var(--font-size-16); color: var(--text-color-title-light); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ght-radio-wrapper.ght-disabled .ght-radio { background-color: var(--inactive-bg-light); accent-color: var(--inactive-bg-light); appearance: none; border-radius: 8px; } .ght-radio-wrapper.ght-disabled .ght-radio-label { color: var(--inactive-text-light); } .ght-radio-wrapper:has(.ght-radio:disabled) .ght-radio { background-color: var(--inactive-bg-light); accent-color: var(--inactive-bg-light); appearance: none; border-radius: 8px; } .ght-radio-wrapper:has(.ght-radio:disabled) .ght-radio-label { color: var(--inactive-text-light); } .ght-radio-wrapper:has(.ght-radio:disabled) { pointer-events: none; } .ght-radio-wrapper.ght-error .ght-radio { accent-color: var(--main-error-color-light); border-color: var(--main-error-color-light); } .ght-radio-wrapper.ght-error .ght-radio-label { color: var(--main-error-color-light); } .ght-radio-group-wrapper { display: flex; gap: 4px; flex-direction: column; } .ght-radio-group-label { font-size: var(--font-size-16); font-weight: var(--main-font-regular); color: var(--text-color-title-light); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ght-radio-group-container { display: flex; gap: 4px; } .ght-radio-group-container.ght-vertical { flex-direction: column; } .ght-radio-group-container.ght-horizontal { flex-direction: row; } .ght-radio-group-wrapper.ght-disabled .ght-radio-group-label { color: var(--inactive-text-light); } .ght-radio-group-wrapper.ght-disabled .ght-radio-label { color: var(--inactive-text-light); } .ght-radio-group-wrapper.ght-disabled .ght-info-text { color: var(--inactive-text-light); } .ght-radio-group-wrapper.ght-disabled .ght-info-text a:visited { color: var(--inactive-text-light); } .ght-radio-group-wrapper.ght-disabled .ght-radio { background-color: var(--inactive-bg-light); accent-color: var(--inactive-bg-light); appearance: none; border-radius: 8px; } .ght-radio-group-wrapper.ght-error .ght-radio-group-label { color: var(--main-error-color-light); } .ght-radio-group-wrapper.ght-error .ght-radio-label { color: var(--main-error-color-light); } .ght-radio-group-wrapper.ght-error .ght-radio { accent-color: var(--main-error-color-light); border-color: var(--main-error-color-light); } .ght-radio-group-wrapper.ght-error .ght-info-text { color: var(--main-error-color-light); } .ght-radio-group-wrapper.ght-error .ght-info-text a:visited { color: var(--main-error-color-light); } /* DARKTHEME */ body:is(.ght-theme-dark, .dark-theme) .ght-radio-wrapper:hover { background-color: var(--inactive-bg-dark); border-radius: 4px; } body:is(.ght-theme-dark, .dark-theme) .ght-radio { accent-color: var(--primary-blue-400); } body:is(.ght-theme-dark, .dark-theme) .ght-radio-label, body:is(.ght-theme-dark, .dark-theme) .ght-radio-group-label { color: var(--white-50); } body:is(.ght-theme-dark, .dark-theme) .ght-radio-wrapper.ght-disabled .ght-radio { background-color: var(--inactive-bg-dark); accent-color: var(--inactive-bg-dark); appearance: none; border-radius: 8px; } body:is(.ght-theme-dark, .dark-theme) .ght-radio-wrapper.ght-disabled .ght-radio-label { color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-radio-wrapper:has(.ght-radio:disabled) .ght-radio { background-color: var(--inactive-bg-dark); accent-color: var(--inactive-bg-dark); appearance: none; border-radius: 8px; } body:is(.ght-theme-dark, .dark-theme) .ght-radio-wrapper:has(.ght-radio:disabled) .ght-radio-label { color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-radio-group-wrapper.ght-disabled .ght-radio-group-label, body:is(.ght-theme-dark, .dark-theme) .ght-radio-group-wrapper.ght-disabled .ght-radio-label, body:is(.ght-theme-dark, .dark-theme) .ght-radio-group-wrapper.ght-disabled .ght-info-text { color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-radio-group-wrapper.ght-disabled .ght-info-text a:visited { color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-radio-group-wrapper.ght-disabled .ght-radio { background-color: var(--inactive-bg-dark); accent-color: var(--inactive-bg-dark); appearance: none; border-radius: 8px; } body:is(.ght-theme-dark, .dark-theme) .ght-radio-wrapper.ght-error .ght-radio { accent-color: var(--main-error-color-light); border-color: var(--main-error-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-radio-wrapper.ght-error .ght-radio-label { color: var(--main-error-color-light); } /* ------------------------------------------------------------------------------------------------ */ /* ============================================================================= SELECT COMPONENT ------------------------------------------------------------------------------ Native behavior and applies visual states through wrapper classes. STRUCTURE (REQUIRED): - .ght-select-wrapper - label.ght-select-label (optional) - select.ght-select - .ght-info-text (optional helper / error text) SIZING: - Default: small - .ght-medium → medium height - .ght-large → large height STATES: - .ght-disabled (preferred, wrapper-level) - native :disabled (supported via :has) - .ght-error (validation state) AI / LLM NOTE: - Do NOT replace - Do NOT replace with div-based slider - Thumb and track are styled via vendor pseudo-elements ============================================================================= */ /* =========================================================================== WRAPPER --------------------------------------------------------------------------- */ .ght-range-wrapper { display: flex; flex-direction: column; gap: 15px; padding: 2px; cursor: pointer; } /* =========================================================================== RANGE INPUT --------------------------------------------------------------------------- */ .ght-range { -webkit-appearance: none; appearance: none; width: 100%; height: 9px; background: var(--secondary-blue-300); border-radius: 5px; outline: none; opacity: 0.7; transition: opacity 0.2s; } /* Firefox track */ input[type="range"]::-moz-range-track { background-color: var(--secondary-blue-300); } /* =========================================================================== THUMB — WEBKIT --------------------------------------------------------------------------- */ .ght-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; background: var(--primary-blue-800); border-radius: 50%; cursor: pointer; } /* Active / interaction */ .ght-range::-webkit-slider-thumb:active { border: 2px solid var(--secondary-blue-300); } /* =========================================================================== THUMB — FIREFOX --------------------------------------------------------------------------- */ .ght-range::-moz-range-thumb { width: 30px; height: 30px; background: var(--primary-blue-800); border-radius: 50%; cursor: pointer; } .ght-range::-moz-range-thumb:hover { border: 2px solid var(--secondary-blue-300); } .ght-range::-moz-range-thumb:active { border: 2px solid var(--secondary-blue-300); } /* =========================================================================== DISABLED STATE (WRAPPER-LEVEL) --------------------------------------------------------------------------- */ .ght-range-wrapper.ght-disabled .ght-range { background-color: var(--inactive-text-light); } .ght-range-wrapper.ght-disabled .ght-range::-webkit-slider-thumb { background-color: var(--inactive-text-light); } .ght-range-wrapper.ght-disabled .ght-range-value { background-color: var(--inactive-text-light); } .ght-range-wrapper.ght-disabled .ght-info-text { color: var(--inactive-text-light); pointer-events: none; } /* =========================================================================== DISABLED STATE (NATIVE :disabled — KEEP :has()) --------------------------------------------------------------------------- */ .ght-range-wrapper:has(.ght-range:disabled) .ght-range { background-color: var(--inactive-text-light); } .ght-range-wrapper:has(.ght-range:disabled) .ght-range::-webkit-slider-thumb { background-color: var(--inactive-text-light); pointer-events: none; } .ght-range-wrapper:has(.ght-range:disabled) .ght-range-value { background-color: var(--inactive-text-light); pointer-events: none; } .ght-range-wrapper:has(.ght-range:disabled) .ght-info-text { color: var(--inactive-text-light); pointer-events: none; } /* =========================================================================== VALUE INDICATOR --------------------------------------------------------------------------- */ .ght-range-value { font-size: var(--font-size-16); background-color: var(--primary-blue-800); color: var(--white); padding: 5px 10px; border-radius: 5px; width: 48px; display: flex; justify-content: center; text-align: center; } /* ============================================================================= RANGE — DARK THEME ------------------------------------------------------------------------------ Unified dark theme styles for range component. Both `.ght-theme-dark` and `.dark-theme` are equivalent. AI / LLM NOTE: - Do NOT duplicate dark theme rules - Extend this block for any future dark range behavior ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-range { background: var(--secondary-info-color-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-range::-webkit-slider-thumb, body:is(.ght-theme-dark, .dark-theme) .ght-range::-moz-range-thumb { background: var(--primary-blue-400); } /* =========================================================================== DISABLED STATE (WRAPPER-LEVEL) --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper.ght-disabled .ght-range { background-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper.ght-disabled .ght-range::-webkit-slider-thumb { background-color: var(--modal-body-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper.ght-disabled .ght-range-value { background-color: var(--modal-body-bg-dark); color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper.ght-disabled .ght-info-text { color: var(--inactive-bg-dark); pointer-events: none; } /* =========================================================================== DISABLED STATE (NATIVE :disabled — KEEP :has()) --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper:has(.ght-range:disabled) .ght-range { background-color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper:has(.ght-range:disabled) .ght-range::-webkit-slider-thumb { background-color: var(--modal-body-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper:has(.ght-range:disabled) .ght-range-value { background-color: var(--modal-body-bg-dark); color: var(--inactive-bg-dark); pointer-events: none; } body:is(.ght-theme-dark, .dark-theme) .ght-range-wrapper:has(.ght-range:disabled) .ght-info-text { color: var(--inactive-bg-dark); pointer-events: none; } /* =========================================================================== VALUE --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-range-value { background-color: var(--inactive-bg-dark); } /* ============================================================================= DATE INPUT COMPONENT ------------------------------------------------------------------------------ Native styled to match the GHT design system. This component intentionally relies on the browser-native date picker (calendar UI is NOT custom). STRUCTURE (REQUIRED): - .ght-date-wrapper - label.ght-date-label (optional) - input[type="date"].ght-date - .ght-info-text (optional helper / validation text) SIZING: - Default: small - .ght-medium → medium height - .ght-large → large height STATES: - .ght-disabled (wrapper-level, preferred) - native :disabled (supported via :has) - .ght-error (validation state) AI / LLM NOTE: - This is a native date input - Do NOT replace with custom calendar widgets - All visual states are controlled via the wrapper ============================================================================= */ /* =========================================================================== WRAPPER --------------------------------------------------------------------------- */ .ght-date-wrapper { display: flex; flex-direction: column; gap: 4px; } /* =========================================================================== DATE INPUT --------------------------------------------------------------------------- */ .ght-date { border: 1px solid var(--border-color); outline: none; background: var(--white); color: var(--text-color-title-light); text-indent: 5px; height: var(--height-28); border-radius: 4px; font-family: var(--main-font); box-sizing: border-box; font-size: var(--font-size-16); } /* =========================================================================== SIZES --------------------------------------------------------------------------- */ .ght-date-wrapper.ght-medium .ght-date { height: var(--height-28); } .ght-date-wrapper.ght-large .ght-date { height: var(--height-36); } /* =========================================================================== FOCUS STATE --------------------------------------------------------------------------- */ .ght-date:focus { border-color: var(--main-info-color-light); } /* =========================================================================== LABEL --------------------------------------------------------------------------- */ .ght-date-label { font-size: var(--font-size-16); font-weight: var(--main-font-regular); color: var(--text-color-title-light); } /* =========================================================================== DISABLED STATE (WRAPPER-LEVEL — PREFERRED) --------------------------------------------------------------------------- */ .ght-date-wrapper.ght-disabled .ght-date { background-color: var(--inactive-bg-light); border-color: var(--inactive-bg-light); color: var(--inactive-text-light); } .ght-date-wrapper.ght-disabled .ght-date-label, .ght-date-wrapper.ght-disabled .ght-info-text { color: var(--inactive-text-light); } /* =========================================================================== DISABLED STATE (NATIVE :disabled — SUPPORTED) --------------------------------------------------------------------------- */ /* Uses :has() for progressive enhancement */ .ght-date-wrapper:has(.ght-date:disabled) .ght-date { background-color: var(--inactive-bg-light); border-color: var(--inactive-bg-light); color: var(--inactive-text-light); } .ght-date-wrapper:has(.ght-date:disabled) .ght-date-label, .ght-date-wrapper:has(.ght-date:disabled) .ght-info-text { color: var(--inactive-text-light); pointer-events: none; } /* =========================================================================== ERROR STATE --------------------------------------------------------------------------- */ .ght-date-wrapper.ght-error .ght-date { border-color: var(--main-error-color-light); color: var(--main-error-color-light); } .ght-date-wrapper.ght-error .ght-date-label { color: var(--main-error-color-light); } .ght-date-wrapper.ght-error .ght-date::placeholder { color: var(--main-error-color-light); } .ght-date-wrapper.ght-error .ght-info-text { color: var(--main-error-color-light); } /* DARKTHEME */ /* ============================================================================= DATE INPUT — DARK THEME ------------------------------------------------------------------------------ Unified dark theme styles. Both `.ght-theme-dark` and `.dark-theme` are equivalent. AI / LLM NOTE: - Do NOT duplicate dark theme rules - Always extend this block for dark date input behavior ============================================================================= */ body:is(.ght-theme-dark, .dark-theme) .ght-date { border: 1px solid var(--white-50); background: var(--main-bg-dark); color: var(--white); } body:is(.ght-theme-dark, .dark-theme) .ght-date::-webkit-calendar-picker-indicator { filter: invert(1) brightness(2); cursor: pointer; } body:is(.ght-theme-dark, .dark-theme) .ght-date:focus { border-color: var(--main-info-color-light); } body:is(.ght-theme-dark, .dark-theme) .ght-date-label { color: var(--white-50); } /* =========================================================================== DISABLED STATE (WRAPPER-LEVEL) --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-date-wrapper.ght-disabled .ght-date { background-color: var(--main-bg-dark); border-color: var(--inactive-bg-dark); color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-date-wrapper.ght-disabled .ght-date-label, body:is(.ght-theme-dark, .dark-theme) .ght-date-wrapper.ght-disabled .ght-info-text { color: var(--inactive-bg-dark); pointer-events: none; } /* =========================================================================== DISABLED STATE (NATIVE :disabled — KEEP :has()) --------------------------------------------------------------------------- */ body:is(.ght-theme-dark, .dark-theme) .ght-date-wrapper:has(.ght-date:disabled) .ght-date { background-color: var(--main-bg-dark); border-color: var(--inactive-bg-dark); color: var(--inactive-bg-dark); } body:is(.ght-theme-dark, .dark-theme) .ght-date-wrapper:has(.ght-date:disabled) .ght-date-label, body:is(.ght-theme-dark, .dark-theme) .ght-date-wrapper:has(.ght-date:disabled) .ght-info-text { color: var(--inactive-bg-dark); pointer-events: none; } /* ============================================================================= TEXTAREA COMPONENT ------------------------------------------------------------------------------ Styled native