@layer omniui.reset, omniui.tokens, omniui.utilities, omniui.components;
/*!
 * OmniUI v0.5.0
 * Copyright 2024-2025 Thomas Whitehouse. All rights reserved.
 * Proprietary and confidential. See LICENSE file for details.
 */
/*
 * OMNIUI CORE STYLES - POSTCSS EDITION
 * Three-layer architecture: CSS/HTML → Progressive Enhancement → JS Utilities
 *
 * CASCADE LAYERS (lowest to highest priority):
 * - omniui.reset: CSS reset, box-sizing
 * - omniui.tokens: Design tokens, color modes
 * - omniui.utilities: Variants, focus-ring, accessibility helpers
 * - omniui.components: All UI components (tier1, tier2, tier3)
 *
 * Consumer stylesheets can insert their own layers between these:
 * @layer omniui.reset, omniui.tokens, brand.tokens, omniui.utilities, omniui.components, brand.overrides;
 *
 * Unlayered CSS always wins over layered CSS (for end-user customization).
 */
/* Establish layer order - MUST be first */
/* =============================================================================
 * LAYER: omniui.reset
 * CSS reset - box-sizing, margins, defaults
 * ============================================================================= */
@layer omniui.reset{

/* =============================================================================
   OMNIUI CSS RESET - NUCLEAR EDITION
   Minimal modern reset for 2024+ browsers
   ============================================================================= */

/* Box sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Document setup */
html {
  line-height: 1.5;
  text-size-adjust: 100%;
}

/* Body defaults */
body {
  margin: 0;
  font-family: var(--omni-font-sans);
  font-size: var(--omni-text-base);
  line-height: inherit;
  color: var(--omni-color-text);
  background-color: var(--omni-color-background);
}

/* Remove default margins */
h1, h2, h3, h4, h5, h6,
p, pre, figure, blockquote, dl, dd {
  margin: 0;
}

/* Lists */
ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Images and media */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Remove default button styles */
button {
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

/* Tables */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* Hidden attribute */
[hidden] {
  display: none !important;
}

/* Remove focus outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/*
 * That's it. 80 lines instead of 344.
 * Modern browsers are consistent enough that we don't need to reset everything.
 * Component styles handle their specific needs.
 */
}
/* =============================================================================
 * LAYER: omniui.tokens
 * Design tokens, color modes, core variables
 * ============================================================================= */
@layer omniui.tokens{

/*
 * OMNIUI DESIGN SYSTEM VARIABLES
 * Import design tokens from @omniui/tokens package
 */
}
@layer omniui.tokens{

/*
 * OMNIUI DESIGN TOKENS - POSTCSS EDITION
 * Minimal, focused variable system for a UI library
 */

/* CLEAN VARIABLE SYSTEM (140 variables, all working) */

/* =============================================================================
 * OMNIUI CLEAN COLOR SYSTEM
 * 30 semantic color variables - nothing more
 * ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
   * 1. SURFACES (4 colors)
   * ------------------------------------------------------------------------- */
  --omni-color-background: #fff;        /* Page background */
  --omni-color-surface: #f8fafc;          /* Card/component background */  
  --omni-color-surface-alt: #f1f5f9;      /* Alternate surface (table stripes, hover) */
  --omni-color-overlay: rgb(0 0 0 / 0.5); /* Modal backdrop */
  
  /* -------------------------------------------------------------------------
   * 2. TEXT (3 colors)
   * ------------------------------------------------------------------------- */
  --omni-color-text: #1e293b;             /* Primary text */
  --omni-color-text-muted: #64748b;       /* Secondary/muted text */
  --omni-color-text-inverse: #fff;     /* Text on dark backgrounds */
  
  /* -------------------------------------------------------------------------
   * 3. BORDERS (2 colors)
   * ------------------------------------------------------------------------- */
  --omni-color-border: #e2e8f0;           /* Default borders */
  --omni-color-border-focus: var(--omni-color-primary); /* Focus/active borders */
  
  /* -------------------------------------------------------------------------
   * 4. BRAND ACTIONS (6 colors - neutral defaults, customizable by tenant)
   * ------------------------------------------------------------------------- */
  --omni-color-primary: #3b82f6;          /* Primary brand color (neutral blue) */
  --omni-color-primary-text: #fff;     /* Text on primary */
  --omni-color-secondary: #6b7280;        /* Secondary brand color (neutral gray) */
  --omni-color-secondary-text: #fff;   /* Text on secondary */
  --omni-color-accent: #8b5cf6;           /* Accent/tertiary color (purple) */
  --omni-color-accent-text: #fff;      /* Text on accent */
  
  /* -------------------------------------------------------------------------
   * 5. SYSTEM STATES (8 colors - consistent across themes)
   * ------------------------------------------------------------------------- */
  --omni-color-success: #10b981;          /* Success background */
  --omni-color-success-text: #fff;     /* Success text */
  --omni-color-warning: #f59e0b;          /* Warning background */
  --omni-color-warning-text: #000;     /* Warning text (black for contrast) */
  --omni-color-danger: #ef4444;           /* Danger background */
  --omni-color-danger-text: #fff;      /* Danger text */
  --omni-color-info: #3b82f6;             /* Info background */
  --omni-color-info-text: #fff;        /* Info text */
  
  /* -------------------------------------------------------------------------
   * 5.1. LIGHT/DARK VARIANTS (for alerts, status indicators, etc.)
   * ------------------------------------------------------------------------- */
  --omni-color-primary-light: color-mix(in sRGB, var(--omni-color-primary) 20%, var(--omni-color-background));
  --omni-color-primary-dark: color-mix(in sRGB, var(--omni-color-primary) 80%, var(--omni-color-text));
  --omni-color-secondary-light: color-mix(in sRGB, var(--omni-color-secondary) 20%, var(--omni-color-background));
  --omni-color-secondary-dark: color-mix(in sRGB, var(--omni-color-secondary) 80%, var(--omni-color-text));
  --omni-color-accent-light: color-mix(in sRGB, var(--omni-color-accent) 20%, var(--omni-color-background));
  --omni-color-accent-dark: color-mix(in sRGB, var(--omni-color-accent) 80%, var(--omni-color-text));
  --omni-color-success-light: color-mix(in sRGB, var(--omni-color-success) 20%, var(--omni-color-background));
  --omni-color-success-dark: color-mix(in sRGB, var(--omni-color-success) 80%, var(--omni-color-text));
  --omni-color-warning-light: color-mix(in sRGB, var(--omni-color-warning) 20%, var(--omni-color-background));
  --omni-color-warning-dark: color-mix(in sRGB, var(--omni-color-warning) 80%, var(--omni-color-text));
  --omni-color-danger-light: color-mix(in sRGB, var(--omni-color-danger) 20%, var(--omni-color-background));
  --omni-color-danger-dark: color-mix(in sRGB, var(--omni-color-danger) 80%, var(--omni-color-text));
  --omni-color-info-light: color-mix(in sRGB, var(--omni-color-info) 20%, var(--omni-color-background));
  --omni-color-info-dark: color-mix(in sRGB, var(--omni-color-info) 80%, var(--omni-color-text));
  
  /* -------------------------------------------------------------------------
   * 6. INTERACTIVE (3 colors)
   * ------------------------------------------------------------------------- */
  --omni-color-link: var(--omni-color-primary);     /* Link color (uses primary) */
  --omni-color-link-hover: #ea580c;           /* Link hover (darker orange) */
  --omni-color-selection: rgb(255 107 0 / 0.2); /* Text selection background */
}

/* =============================================================================
 * DARK MODE THEME
 * ============================================================================= */

[data-color-mode="dark"] {
  /* Surfaces - inverted */
  --omni-color-background: #0f172a;
  --omni-color-surface: #1e293b;
  --omni-color-surface-alt: #334155;
  --omni-color-overlay: rgb(0 0 0 / 0.8);
  
  /* Text - inverted */
  --omni-color-text: #f1f5f9;
  --omni-color-text-muted: #94a3b8;
  --omni-color-text-inverse: #0f172a;
  
  /* Borders - darker */
  --omni-color-border: #334155;
  --omni-color-border-focus: var(--omni-color-primary);
  
  /* Brand colors stay the same (tenant decides if they work) */

  /* System colors stay the same */

  /* Interactive adapts */
  --omni-color-selection: rgb(255 107 0 / 0.3);
}

/* =============================================================================
 * HIGH CONTRAST THEME
 * ============================================================================= */

[data-color-mode="high-contrast"] {
  /* Maximum contrast */
  --omni-color-background: #fff;
  --omni-color-surface: #fff;
  --omni-color-surface-alt: #f3f4f6;
  --omni-color-overlay: rgba(0, 0, 0, 0.9);
  
  /* Pure black text */
  --omni-color-text: #000;
  --omni-color-text-muted: #374151;
  --omni-color-text-inverse: #fff;
  
  /* Black borders */
  --omni-color-border: #000;
  --omni-color-border-focus: #000;
  
  /* Force high contrast on actions */
  --omni-color-primary: #000;
  --omni-color-primary-text: #fff;
  --omni-color-secondary: #000;
  --omni-color-secondary-text: #fff;
  
  /* System colors with borders for visibility */
  --omni-color-success: #059669;
  --omni-color-success-text: #000;
  --omni-color-warning: #d97706;
  --omni-color-warning-text: #000;
  --omni-color-danger: #dc2626;
  --omni-color-danger-text: #fff;
  --omni-color-info: #2563eb;
  --omni-color-info-text: #fff;
  
  /* High contrast links */
  --omni-color-link: #00e;
  --omni-color-link-hover: #551a8b;
  --omni-color-selection: rgba(0, 0, 0, 0.3);
}

/* 30 semantic color variables */

/* =============================================================================
 * FOUNDATION VARIABLES - CLEAN VERSION
 * Only variables that actually matter for a UI library
 * ============================================================================= */

:root {
  /* ===== COLORS (from existing clean system) =====
   * Colors are handled in _colors-clean.scss - don't duplicate here */
  
  /* ===== TYPOGRAPHY =====
   * Font families */
  --omni-font-sans: system-ui, -apple-system, sans-serif;
  --omni-font-serif: ui-serif, georgia, serif;
  --omni-font-mono: ui-monospace, menlo, monaco, 'Cascadia Code', monospace;
  
  /* Font sizes (only the ones you actually use) */
  --omni-text-xs: 0.75rem;    /* 12px */
  --omni-text-sm: 0.875rem;   /* 14px */  
  --omni-text-base: 1rem;     /* 16px */
  --omni-text-lg: 1.125rem;   /* 18px */
  --omni-text-xl: 1.25rem;    /* 20px */
  --omni-text-2xl: 1.5rem;    /* 24px */
  --omni-text-3xl: 1.875rem;  /* 30px */
  --omni-text-4xl: 2.25rem;   /* 36px */
  --omni-text-5xl: 3rem;      /* 48px */
  --omni-text-6xl: 3.75rem;   /* 60px */

  /* Font weights (only common ones) */
  --omni-font-normal: 400;
  --omni-font-medium: 500;
  --omni-font-semibold: 600;
  --omni-font-bold: 700;
  
  /* Line heights - DEPRECATED: Not used in OmniUI
   * Components hardcode appropriate line-heights (usually 1.5 for text, 1.2 for UI)
   * Override specific components in your app if needed
   * --omni-line-height-tight: 1.2;
   * --omni-line-height-snug: 1.375;
   * --omni-line-height-base: 1.5;
   * --omni-line-height-relaxed: 1.625;
   * --omni-line-height-loose: 2; */
  
  /* ===== SPACING =====
   * Only the spacing values you actually use */
  --omni-space-half: 0.125rem; /* 2px */
  --omni-space-1: 0.25rem;    /* 4px */
  --omni-space-2: 0.5rem;     /* 8px */
  --omni-space-3: 0.75rem;    /* 12px */
  --omni-space-4: 1rem;       /* 16px */
  --omni-space-5: 1.25rem;    /* 20px */
  --omni-space-6: 1.5rem;     /* 24px */
  --omni-space-8: 2rem;       /* 32px */
  --omni-space-10: 2.5rem;    /* 40px */
  --omni-space-12: 3rem;      /* 48px */
  --omni-space-16: 4rem;      /* 64px */
  --omni-space-20: 5rem;      /* 80px */
  --omni-space-24: 6rem;      /* 96px */
  --omni-space-32: 8rem;      /* 128px */

  /* ===== BORDERS ===== */
  --omni-border-width: 1px;
  --omni-border-width-2: 2px;
  
  /* Border radius (clean naming) */
  --omni-radius-sm: 0.125rem;  /* 2px */
  --omni-radius: 0.25rem;      /* 4px */  
  --omni-radius-md: 0.375rem;  /* 6px */
  --omni-radius-lg: 0.5rem;    /* 8px */
  --omni-radius-xl: 0.75rem;   /* 12px */
  --omni-radius-full: 9999px;
  
  /* ===== SHADOWS =====
   * Only the shadows you actually use */
  --omni-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --omni-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --omni-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --omni-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --omni-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* ===== ANIMATIONS =====
   * Simple transitions - not 15 different timing functions */
  --omni-transition: 150ms ease-out;
  --omni-transition-slow: 300ms ease-out;
  
  /* Animation durations */
  --omni-duration-200: 200ms;
  --omni-duration-300: 300ms;
  --omni-duration-400: 400ms;
  --omni-duration-500: 500ms;
  --omni-duration-1000: 1s;
  
  /* Easing functions */
  --omni-ease-out: ease-out;
  --omni-ease-in-out: ease-in-out;
  
  /* Transform scales */
  --omni-scale-30: 0.3;
  --omni-scale-95: 0.95;
  --omni-scale-100: 1;
  --omni-scale-105: 1.05;
  --omni-scale-110: 1.1;
  --omni-scale-130: 1.3;
  
  /* ===== FOCUS RING ===== */
  --omni-focus-ring: 0 0 0 3px color-mix(in sRGB, var(--omni-color-primary) 50%, transparent);
  --omni-focus-offset: 2px;
  
  /* ===== Z-INDEX =====
   * Only the layers you actually use */
  --omni-z-dropdown: 1000;
  --omni-z-modal: 1050;
  --omni-z-tooltip: 1100;
  --omni-z-toast: 1200;
  
  /* ===== OPACITY ===== */
  --omni-opacity-disabled: 0.6;
  --omni-opacity-0: 0;
  --omni-opacity-100: 1;
  
  /* ===== MISC ===== */
  --omni-transition-all: all 150ms ease-out;
  --omni-transition-colors: color 150ms ease-out, background-color 150ms ease-out;
  --omni-transition-transform: transform 150ms ease-out;
  --omni-transition-duration: 400ms;
  --omni-spacing-4: 1rem; /* Alias for lazy-load.scss */
  --omni-spacing-2: 0.5rem; /* Alias for lazy-load.scss */
  --omni-z-index-dropdown: 1000; /* Alias for share.scss */
  
  
  /* Extra font weights for utilities */
  --omni-font-weight-thin: 100;
  --omni-font-weight-extralight: 200;
  --omni-font-weight-light: 300;
  --omni-font-weight-extrabold: 800;
  --omni-font-weight-black: 900;
  
  /* Letter spacing */
  --omni-letter-spacing-tighter: -0.05em;
  --omni-letter-spacing-tight: -0.025em;
  --omni-letter-spacing-normal: 0;
  --omni-letter-spacing-wide: 0.025em;
  --omni-letter-spacing-wider: 0.05em;
  --omni-letter-spacing-widest: 0.1em;
}

/* ~50 essential foundation variables */

/* =============================================================================
 * COMPONENT VARIABLES - CLEAN VERSION
 * Only variables for things that actually need customization
 * ============================================================================= */

:root {
  /* ===== BUTTONS =====
   * Basic button sizing - not 20 different variations */
  --omni-button-height: 2.5rem;        /* 40px */
  --omni-button-height-sm: 2rem;       /* 32px */
  --omni-button-height-lg: 3rem;       /* 48px */
  --omni-button-padding: 0 var(--omni-space-4);
  --omni-button-padding-sm: 0 var(--omni-space-3);
  --omni-button-padding-lg: 0 var(--omni-space-6);
  --omni-button-radius: var(--omni-radius);
  --omni-button-font-weight: var(--omni-font-medium);
  
  /* ===== FORMS =====
   * Input basics */
  --omni-input-height: 2.5rem;         /* 40px */
  --omni-input-height-sm: 2rem;        /* 32px */
  --omni-input-height-lg: 3rem;        /* 48px */
  --omni-input-padding: 0 var(--omni-space-3);
  --omni-input-radius: var(--omni-radius);
  --omni-input-border: var(--omni-border-width) solid var(--omni-color-border);
  --omni-input-focus-border: var(--omni-border-width) solid var(--omni-color-primary);
  
  /* Label spacing */
  --omni-label-spacing: var(--omni-space-2);
  --omni-form-group-spacing: var(--omni-space-6);
  
  /* ===== CARDS ===== */
  --omni-card-padding: var(--omni-space-6);
  --omni-card-radius: var(--omni-radius-lg);
  --omni-card-border: var(--omni-border-width) solid var(--omni-color-border);
  --omni-card-shadow: var(--omni-shadow-sm);
  
  /* ===== MODALS ===== */
  --omni-modal-width: 32rem;           /* 512px */
  --omni-modal-width-sm: 24rem;        /* 384px */
  --omni-modal-width-lg: 48rem;        /* 768px */
  --omni-modal-padding: var(--omni-space-6);
  --omni-modal-radius: var(--omni-radius-lg);
  --omni-modal-shadow: var(--omni-shadow-xl);
  --omni-modal-backdrop: rgb(0 0 0 / 0.5);
  
  /* ===== DROPDOWNS ===== */
  --omni-dropdown-padding: var(--omni-space-2) 0;
  --omni-dropdown-item-padding: var(--omni-space-3) var(--omni-space-4);
  --omni-dropdown-radius: var(--omni-radius);
  --omni-dropdown-shadow: var(--omni-shadow-lg);
  --omni-dropdown-border: var(--omni-border-width) solid var(--omni-color-border);
  
  /* ===== TOOLTIPS ===== */
  --omni-tooltip-padding: var(--omni-space-2) var(--omni-space-3);
  --omni-tooltip-radius: var(--omni-radius);
  --omni-tooltip-shadow: var(--omni-shadow);
  --omni-tooltip-font-size: var(--omni-text-sm);
  
  /* ===== BADGES ===== */
  --omni-badge-padding: var(--omni-space-1) var(--omni-space-2);
  --omni-badge-radius: var(--omni-radius);
  --omni-badge-font-size: var(--omni-text-xs);
  --omni-badge-font-weight: var(--omni-font-medium);
  
  /* ===== TABLES ===== */
  --omni-table-cell-padding: var(--omni-space-3) var(--omni-space-4);
  --omni-table-border: var(--omni-border-width) solid var(--omni-color-border);
  
  /* ===== ALERTS ===== */
  --omni-alert-padding: var(--omni-space-4);
  --omni-alert-radius: var(--omni-radius);
  --omni-alert-border: var(--omni-border-width) solid;
  
  /* ===== PROGRESS ===== */
  --omni-progress-height: var(--omni-space-2);
  --omni-progress-radius: var(--omni-radius-full);
  
  /* ===== AVATARS ===== */
  --omni-avatar-size-xs: 1.5rem;              /* 24px */
  --omni-avatar-size-sm: var(--omni-space-8); /* 32px */
  --omni-avatar-size: var(--omni-space-10);   /* 40px - default */
  --omni-avatar-size-lg: 3.5rem;              /* 56px */
  --omni-avatar-size-xl: 5rem;                /* 80px */
  --omni-avatar-radius: var(--omni-radius-full);
  --omni-avatar-font-size: var(--omni-text-sm);
  
  /* ===== SPINNERS ===== */
  --omni-spinner-size: 1.5rem;         /* 24px */
  --omni-spinner-size-sm: 1rem;        /* 16px */
  --omni-spinner-size-lg: 2rem;        /* 32px */
  --omni-spinner-border-width: 2px;
  
  /* ===== LAYOUT =====
   * Container sizes */
  --omni-container-sm: 640px;
  --omni-container-md: 768px;
  --omni-container-lg: 1024px;
  --omni-container-xl: 1280px;
  --omni-container-max-width: var(--omni-container-xl);
  --omni-container-padding: var(--omni-space-4);
  
  /* Layout components */
  --omni-navbar-height: 4rem;          /* 64px */
  --omni-sidebar-width: 16rem;         /* 256px */
  --omni-sidebar-width-collapsed: 4rem; /* 64px */
  --omni-section-padding: var(--omni-space-8);
  
  /* Grid system */
  --omni-grid-columns: 12;
  --omni-grid-gap: var(--omni-space-6);
  
  /* Dashboard specific */
  --omni-dashboard-columns: 12;
  --omni-dashboard-row-height: 120px;
  
  /* Bento grid */
  --omni-bento-columns: 12;
}

/* ~60 focused component variables */

/* Layout systems */

/* =============================================================================
 * LAYOUT VARIABLES - SIMPLE VERSION
 * Basic layout tokens that actually matter for a UI library
 * ============================================================================= */

:root {
  /* ===== BREAKPOINTS =====
   * These are the only breakpoints that matter */
  --omni-breakpoint-sm: 640px;   /* Mobile */
  --omni-breakpoint-md: 768px;   /* Tablet */  
  --omni-breakpoint-lg: 1024px;  /* Desktop */
  --omni-breakpoint-xl: 1280px;  /* Large desktop */
  
  /* ===== CONTAINERS =====
   * Basic container widths */
  --omni-container-sm: 640px;
  --omni-container-md: 768px;
  --omni-container-lg: 1024px;
  --omni-container-xl: 1280px;
  --omni-container-padding: var(--omni-space-4);
  
  /* ===== COMMON LAYOUT DIMENSIONS =====
   * Only the essentials that components actually need */
  --omni-navbar-height: 4rem;      /* 64px - standard navbar */
  --omni-sidebar-width: 280px;     /* 280px - standard sidebar */
  --omni-sidebar-width-collapsed: 64px; /* 64px - icon-only sidebar */
  
  /* ===== GRID SYSTEM =====
   * Simple 12-column grid */
  --omni-grid-columns: 12;
  --omni-grid-gap: var(--omni-space-4);
  --omni-grid-gap-sm: var(--omni-space-2);
  --omni-grid-gap-lg: var(--omni-space-6);
  
  /* ===== SECTION SPACING =====
   * Common section spacing that components use */
  --omni-section-padding: var(--omni-space-16);
  --omni-section-padding-sm: var(--omni-space-8);
  --omni-section-gap: var(--omni-space-8);
  
  /* ===== Z-INDEX LAYERS =====
   * Simple stacking context */
  --omni-z-sticky: 100;
  --omni-z-dropdown: 1000;
  --omni-z-modal: 1100;
  --omni-z-tooltip: 1200;
  
  /* ===== SAFE AREAS =====
   * Mobile safe area support */
  --omni-safe-area-top: env(safe-area-inset-top, 0);
  --omni-safe-area-bottom: env(safe-area-inset-bottom, 0);
  --omni-safe-area-left: env(safe-area-inset-left, 0);
  --omni-safe-area-right: env(safe-area-inset-right, 0);
}

/* ===== RESPONSIVE ADJUSTMENTS =====
 * Only adjust what actually matters at different screen sizes */

@media (width <= 768px) {
  :root {
    --omni-container-padding: var(--omni-space-3);
    --omni-section-padding: var(--omni-space-8);
    --omni-grid-gap: var(--omni-space-3);
  }
}

@media (width <= 640px) {
  :root {
    --omni-container-padding: var(--omni-space-2);
    --omni-section-padding: var(--omni-space-6);
    --omni-grid-gap: var(--omni-space-2);
  }
}

/* Export tokens for JavaScript consumption */

:export {
  /* Foundation tokens will be auto-generated by build process */
}
}
@layer omniui.tokens{

/* =============================================================================
 * OMNIUI COLOR MODE DEFINITIONS
 * Just the color overrides for different modes - everything else stays in foundation
 * ============================================================================= */

/* =============================================================================
 * LIGHT MODE (DEFAULT)
 * ============================================================================= */
:root,
html[data-color-mode="light"] {
  /* Brand colors */
  --omni-color-primary: #3b82f6;
  --omni-color-primary-text: #fff;
  --omni-color-secondary: #6b7280;
  --omni-color-secondary-text: #fff;
  --omni-color-accent: #8b5cf6;
  --omni-color-accent-text: #fff;

  /* State colors */
  --omni-color-success: #10b981;
  --omni-color-success-text: #fff;
  --omni-color-warning: #f59e0b;
  --omni-color-warning-text: #000;
  --omni-color-danger: #ef4444;
  --omni-color-danger-text: #fff;
  --omni-color-info: #06b6d4;
  --omni-color-info-text: #fff;

  /* Surface colors */
  --omni-color-background: #fff;
  --omni-color-surface: #fff;
  --omni-color-surface-alt: #f9fafb;
  --omni-color-overlay: rgb(0, 0, 0, 0.5);

  /* Text colors */
  --omni-color-text: #111827;
  --omni-color-text-muted: #6b7280;
  --omni-color-text-inverse: #fff;

  /* Border colors */
  --omni-color-border: #e5e7eb;
  --omni-color-border-focus: #3b82f6;

  /* Interactive colors */
  --omni-color-link: #3b82f6;
  --omni-color-link-hover: #2563eb;
  --omni-color-selection: rgb(59, 130, 246, 0.2);
}

/* =============================================================================
 * DARK MODE
 * ============================================================================= */
html[data-color-mode="dark"] {
  /* Brand colors */
  --omni-color-primary: #60a5fa;
  --omni-color-primary-text: #000;
  --omni-color-secondary: #9ca3af;
  --omni-color-secondary-text: #000;
  --omni-color-accent: #a78bfa;
  --omni-color-accent-text: #000;

  /* State colors */
  --omni-color-success: #34d399;
  --omni-color-success-text: #000;
  --omni-color-warning: #fbbf24;
  --omni-color-warning-text: #000;
  --omni-color-danger: #f87171;
  --omni-color-danger-text: #000;
  --omni-color-info: #22d3ee;
  --omni-color-info-text: #000;

  /* Surface colors */
  --omni-color-background: #111827;
  --omni-color-surface: #1f2937;
  --omni-color-surface-alt: #374151;
  --omni-color-overlay: rgb(0, 0, 0, 0.7);

  /* Text colors */
  --omni-color-text: #f9fafb;
  --omni-color-text-muted: #9ca3af;
  --omni-color-text-inverse: #111827;

  /* Border colors */
  --omni-color-border: #4b5563;
  --omni-color-border-focus: #60a5fa;

  /* Interactive colors */
  --omni-color-link: #60a5fa;
  --omni-color-link-hover: #93bbfc;
  --omni-color-selection: rgb(96, 165, 250, 0.3);
}

/* =============================================================================
 * HIGH CONTRAST MODE
 * ============================================================================= */
html[data-color-mode="high-contrast"] {
  /* Brand colors */
  --omni-color-primary: #0052cc;
  --omni-color-primary-text: #fff;
  --omni-color-secondary: #000;
  --omni-color-secondary-text: #fff;
  --omni-color-accent: #5b21b6;
  --omni-color-accent-text: #fff;

  /* State colors */
  --omni-color-success: #008000;
  --omni-color-success-text: #fff;
  --omni-color-warning: #ff8c00;
  --omni-color-warning-text: #000;
  --omni-color-danger: #dc143c;
  --omni-color-danger-text: #fff;
  --omni-color-info: #00f;
  --omni-color-info-text: #fff;

  /* Surface colors */
  --omni-color-background: #fff;
  --omni-color-surface: #fff;
  --omni-color-surface-alt: #f0f0f0;
  --omni-color-overlay: rgb(0, 0, 0, 0.9);

  /* Text colors */
  --omni-color-text: #000;
  --omni-color-text-muted: #404040;
  --omni-color-text-inverse: #fff;

  /* Border colors */
  --omni-color-border: #000;
  --omni-color-border-focus: #0052cc;

  /* Interactive colors */
  --omni-color-link: #0052cc;
  --omni-color-link-hover: #003380;
  --omni-color-selection: rgb(0, 82, 204, 0.3);
}

/* Typography, spacing, shadows, etc. are defined in foundation tokens
 * This file ONLY handles color mode switching */

/*
 * USAGE:
 * <!-- Default light theme -->
 * <html>
 * 
 * <!-- Dark theme -->
 * <html data-color-mode="dark">
 * 
 * <!-- High contrast -->
 * <html data-color-mode="high-contrast">
 */
}
@layer omniui.tokens{

/* =============================================================================
 * OMNIUI RESPONSIVE BREAKPOINTS - NUCLEAR POSTCSS EDITION
 * Material UI standard breakpoints as CSS custom properties
 * ============================================================================= */

:root {
  /* Breakpoint values - Material UI standard */
  --omni-breakpoint-xs: 0px;      /* 0px+ (extra-small - phones) */
  --omni-breakpoint-sm: 600px;    /* 600px+ (small - large phones/small tablets) */
  --omni-breakpoint-md: 900px;    /* 900px+ (medium - tablets) */
  --omni-breakpoint-lg: 1200px;   /* 1200px+ (large - laptops/small desktops) */
  --omni-breakpoint-xl: 1536px;   /* 1536px+ (extra-large - large desktops) */
}

/* =============================================================================
 * RESPONSIVE VISIBILITY UTILITIES - NUCLEAR EDITION
 * Using CSS custom properties and :where() for zero specificity
 * ============================================================================= */

/* Hide at breakpoints and up */
:where(.omni-hide-sm-up) {
  @media (min-width: var(--omni-breakpoint-sm)) {
    display: none !important;
  }
}

:where(.omni-hide-md-up) {
  @media (min-width: var(--omni-breakpoint-md)) {
    display: none !important;
  }
}

:where(.omni-hide-lg-up) {
  @media (min-width: var(--omni-breakpoint-lg)) {
    display: none !important;
  }
}

:where(.omni-hide-xl-up) {
  @media (min-width: var(--omni-breakpoint-xl)) {
    display: none !important;
  }
}

/* Hide at breakpoints and down */
:where(.omni-hide-sm-down) {
  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    display: none !important;
  }
}

:where(.omni-hide-md-down) {
  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    display: none !important;
  }
}

:where(.omni-hide-lg-down) {
  @media (width <= calc(var(--omni-breakpoint-lg) - 1px)) {
    display: none !important;
  }
}

/* Show only at specific breakpoints - respects element's natural display */
:where(.omni-show-sm-only) {
  display: none !important;

  @media (min-width: var(--omni-breakpoint-sm)) and (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    display: revert !important;
  }
}

:where(.omni-show-md-only) {
  display: none !important;

  @media (min-width: var(--omni-breakpoint-md)) and (width <= calc(var(--omni-breakpoint-lg) - 1px)) {
    display: revert !important;
  }
}

:where(.omni-show-lg-only) {
  display: none !important;

  @media (min-width: var(--omni-breakpoint-lg)) and (width <= calc(var(--omni-breakpoint-xl) - 1px)) {
    display: revert !important;
  }
}

/* Mobile-only visibility */
:where(.omni-show-mobile-only) {
  @media (min-width: var(--omni-breakpoint-sm)) {
    display: none !important;
  }
}

:where(.omni-hide-mobile) {
  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    display: none !important;
  }
}
}
@layer omniui.tokens{

/*
 * OMNIUI TRANSITION UTILITIES - NUCLEAR POSTCSS EDITION
 * Pure CSS utility classes, no mixins
 * GPU-accelerated, accessible, modern
 */

/* Base transition utility classes */
:where(.omni-transition) {
  transition: transform var(--omni-duration-300, 300ms) var(--omni-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
  
  @media (prefers-reduced-motion: reduce) {
    transition-duration: 0.01ms !important;
  }
}

:where(.omni-transition-fast) {
  transition: transform var(--omni-duration-150, 150ms) var(--omni-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
  
  @media (prefers-reduced-motion: reduce) {
    transition-duration: 0.01ms !important;
  }
}

:where(.omni-transition-slow) {
  transition: transform var(--omni-duration-500, 500ms) var(--omni-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
  
  @media (prefers-reduced-motion: reduce) {
    transition-duration: 0.01ms !important;
  }
}

/* Fade transitions */
:where(.omni-fade) {
  transition: opacity var(--omni-duration-300, 300ms) var(--omni-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
  
  @media (prefers-reduced-motion: reduce) {
    transition-duration: 0.01ms !important;
  }
}

/* Modal/overlay transitions */
:where(.omni-modal-transition) {
  transition: 
    opacity var(--omni-duration-300, 300ms) var(--omni-ease-out, cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--omni-duration-300, 300ms) var(--omni-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
  
  @media (prefers-reduced-motion: reduce) {
    transition-duration: 0.01ms !important;
  }
}

/* Remove all transitions */
:where(.omni-no-transition) {
  transition: none !important;
}

/* Motion-safe transitions */
@media (prefers-reduced-motion: no-preference) {
  :where(.omni-motion-safe) {
    transition: transform var(--omni-duration-300, 300ms) var(--omni-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
  }
}

/* GPU acceleration utilities */
:where(.omni-gpu-accelerate) {
  transform: translateZ(0);
  will-change: transform;
}

:where(.omni-gpu-decelerate) {
  transform: none;
  will-change: auto;
}

/* Animation preparation utilities */
:where(.omni-prepare-animation) {
  transform: translateZ(0);
  perspective: 1000px;
  backface-visibility: hidden;
}

:where(.omni-cleanup-animation) {
  transform: none;
  perspective: none;
  backface-visibility: visible;
  will-change: auto;
}

/* Modern CSS features */
@supports (view-transition-name: auto) {
  :where(.omni-view-transition) {
    view-transition-name: auto;
  }
}

@supports (animation-timeline: view()) {
  :where(.omni-scroll-animation) {
    animation-timeline: view();
  }
}
}
@layer omniui.tokens{

/*
 * OMNIUI CORE ANIMATIONS
 * Only animations actually used by components
 */

/* Spin - spinners, loading states */
@keyframes omni-spin {
  to { transform: rotate(360deg); }
}

/* Pulse - skeletons, placeholders, loading states */
@keyframes omni-pulse {
  50% { opacity: 0.5; }
}

/* Fade - modals, toasts, popovers */
@keyframes omni-fade-in {
  from { opacity: 0; }
}

@keyframes omni-fade-out {
  to { opacity: 0; }
}

/* Scale - popovers, dropdowns */
@keyframes omni-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Slide - toasts, drawers */
@keyframes omni-slide-in-bottom {
  from {
    transform: translateY(100%);
  }
}

@keyframes omni-slide-in-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes omni-slide-out-bottom {
  to {
    transform: translateY(100%);
  }
}

@keyframes omni-slide-out-right {
  to {
    transform: translateX(100%);
  }
}

/* Shimmer - skeleton loading with gradient sweep */
@keyframes omni-shimmer {
  to { background-position: 200% 0; }
}

/* Progress bar indeterminate */
@keyframes omni-progress {
  to { background-position: -200% 0; }
}

/* That's it. 60 lines instead of 245. */

/* No bounce, shake, wobble, or other attention-seeking bullshit. */
}
@layer omniui.tokens{

/*
 * OMNIUI CORE EFFECTS
 * Pure CSS visual effects - no animation wrappers, no wank
 */

/* VISUAL EFFECTS
 * ============================================================================= */

/* Glass morphism - frosted glass effect */
.omni-effect-glass {
  background: rgb(255, 255, 255, 0.1);
  border: 1px solid rgb(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px 0 rgb(31, 38, 135, 0.37),
    inset 0 0 0 1px rgb(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

[data-color-mode="dark"] .omni-effect-glass {
  background: rgb(0, 0, 0, 0.5);
  border-color: rgb(255, 255, 255, 0.1);
}

/* Gradient background */
.omni-effect-gradient {
  color: var(--omni-color-text-inverse);
  background: linear-gradient(135deg, var(--omni-color-primary), var(--omni-color-accent));
}

/* Neumorphic - soft 3D appearance */
.omni-effect-neumorphic {
  background: var(--omni-color-surface);
  border: none;
  box-shadow: 
    5px 5px 10px rgb(0, 0, 0, 0.1),
    -5px -5px 10px rgb(255, 255, 255, 0.1),
    inset 1px 1px 2px rgb(255, 255, 255, 0.3),
    inset -1px -1px 2px rgb(0, 0, 0, 0.1);
}

/* SIMPLE TRANSFORMS
 * ============================================================================= */

.omni-effect-hover-grow:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.omni-effect-hover-shrink:hover {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.omni-effect-hover-rotate:hover {
  transform: rotate(5deg);
  transition: transform 0.3s ease;
}

.omni-effect-hover-lift:hover {
  box-shadow: 0 4px 12px rgb(0, 0, 0, 0.15);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* LOADING STATES
 * ============================================================================= */

.omni-effect-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--omni-color-surface-alt);
}

.omni-effect-skeleton::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background: linear-gradient(
    90deg,
    transparent 25%,
    rgb(255, 255, 255, 0.5) 50%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: omni-skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ACCESSIBILITY
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .omni-effect-hover-grow:hover,
  .omni-effect-hover-shrink:hover,
  .omni-effect-hover-rotate:hover,
  .omni-effect-hover-lift:hover {
    transform: none;
  }
  
  .omni-effect-skeleton::after {
    animation: none;
  }
}
}
/* =============================================================================
 * LAYER: omniui.utilities
 * Variant system, focus rings, accessibility helpers
 * ============================================================================= */
@layer omniui.utilities{

/* =============================================================================
   OMNIUI VARIANT SYSTEM - NUCLEAR VERSION
   Data attributes set CSS custom properties - no fallbacks, no bullshit
   Every component that has variants MUST use this system
   ============================================================================= */

/* Intent Variants (semantic colors) */
[data-variant="primary"] {
  --omni-variant-bg: var(--omni-color-primary);
  --omni-variant-text: var(--omni-color-primary-text);
  --omni-variant-border: var(--omni-color-primary);
  --omni-variant-hover-bg: var(--omni-color-primary);
  --omni-variant-hover-border: var(--omni-color-primary);
}

[data-variant="secondary"] {
  --omni-variant-bg: var(--omni-color-secondary);
  --omni-variant-text: var(--omni-color-secondary-text);
  --omni-variant-border: var(--omni-color-secondary);
  --omni-variant-hover-bg: var(--omni-color-secondary);
  --omni-variant-hover-border: var(--omni-color-secondary);
}

[data-variant="success"] {
  --omni-variant-bg: var(--omni-color-success);
  --omni-variant-text: var(--omni-color-success-text);
  --omni-variant-border: var(--omni-color-success);
  --omni-variant-hover-bg: var(--omni-color-success);
  --omni-variant-hover-border: var(--omni-color-success);
}

[data-variant="warning"] {
  --omni-variant-bg: var(--omni-color-warning);
  --omni-variant-text: var(--omni-color-warning-text);
  --omni-variant-border: var(--omni-color-warning);
  --omni-variant-hover-bg: var(--omni-color-warning);
  --omni-variant-hover-border: var(--omni-color-warning);
}

[data-variant="danger"] {
  --omni-variant-bg: var(--omni-color-danger);
  --omni-variant-text: var(--omni-color-danger-text);
  --omni-variant-border: var(--omni-color-danger);
  --omni-variant-hover-bg: var(--omni-color-danger);
  --omni-variant-hover-border: var(--omni-color-danger);
}

[data-variant="info"] {
  --omni-variant-bg: var(--omni-color-info);
  --omni-variant-text: var(--omni-color-info-text);
  --omni-variant-border: var(--omni-color-info);
  --omni-variant-hover-bg: var(--omni-color-info);
  --omni-variant-hover-border: var(--omni-color-info);
}

/* Style Variants (visual treatments) */
[data-variant-style="solid"] {
  --omni-variant-style-bg: var(--omni-variant-bg);
  --omni-variant-style-text: var(--omni-variant-text);
  --omni-variant-style-border: var(--omni-variant-border);
  --omni-variant-style-hover-bg: var(--omni-variant-hover-bg);
}

[data-variant-style="soft"] {
  --omni-variant-style-bg: color-mix(in srgb, var(--omni-variant-bg) 15%, transparent);
  --omni-variant-style-text: var(--omni-variant-bg);
  --omni-variant-style-border: transparent;
  --omni-variant-style-hover-bg: color-mix(in srgb, var(--omni-variant-bg) 25%, transparent);
}

[data-variant-style="outline"] {
  --omni-variant-style-bg: transparent;
  --omni-variant-style-text: var(--omni-variant-bg);
  --omni-variant-style-border: var(--omni-variant-border);
  --omni-variant-style-hover-bg: color-mix(in srgb, var(--omni-variant-bg) 15%, transparent);
}

[data-variant-style="ghost"] {
  --omni-variant-style-bg: transparent;
  --omni-variant-style-text: var(--omni-variant-bg);
  --omni-variant-style-border: transparent;
  --omni-variant-style-hover-bg: color-mix(in srgb, var(--omni-variant-bg) 15%, transparent);
}

/* Size Variants (consistent sizing across components) */
[data-size="sm"] {
  --omni-variant-height: var(--omni-input-height-sm);
  --omni-variant-padding-x: var(--omni-space-2);
  --omni-variant-padding-y: var(--omni-space-1);
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-gap: var(--omni-space-1);
  --omni-variant-icon-size: var(--omni-space-4); /* 16px = 1rem */
}

[data-size="md"] {
  --omni-variant-height: var(--omni-input-height);
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-gap: var(--omni-space-2);
  --omni-variant-icon-size: var(--omni-space-5); /* 20px = 1.25rem */
}

[data-size="lg"] {
  --omni-variant-height: var(--omni-input-height-lg);
  --omni-variant-padding-x: var(--omni-space-4);
  --omni-variant-padding-y: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-lg);
  --omni-variant-gap: var(--omni-space-3);
  --omni-variant-icon-size: var(--omni-space-6); /* 24px = 1.5rem */
}

/* Width Variants (for buttons and inputs) */
[data-width="full"] {
  --omni-variant-width: 100%;
}

[data-width="auto"] {
  --omni-variant-width: auto;
}

/* State Variants (can be combined with other variants) */
[data-state="loading"] {
  --omni-variant-opacity: 0.7; /* Standard loading opacity */
  --omni-variant-cursor: wait;
  --omni-variant-pointer-events: none;
}

[data-state="disabled"] {
  --omni-variant-opacity: var(--omni-opacity-disabled);
  --omni-variant-cursor: not-allowed;
  --omni-variant-pointer-events: none;
}

/* Compound Variants - specific combinations get special treatment */
[data-variant="danger"][data-variant-style="outline"] {
  --omni-variant-hover-bg: color-mix(in srgb, var(--omni-color-danger) 15%, transparent);
  --omni-variant-hover-text: var(--omni-color-danger-text);
}

[data-variant="primary"][data-variant-style="outline"] {
  --omni-variant-hover-bg: color-mix(in srgb, var(--omni-color-primary) 15%, transparent);
}

[data-variant="success"][data-variant-style="outline"] {
  --omni-variant-hover-bg: color-mix(in srgb, var(--omni-color-success) 15%, transparent);
}

/* Focus state enhancement for all variants */
[data-variant] {
  --omni-variant-focus-ring: 0 0 0 3px color-mix(in srgb, var(--omni-variant-bg) 20%, transparent);
}

/* Default values - ALWAYS set data-size if not specified */
[data-variant]:not([data-size]) {
  --omni-variant-height: var(--omni-input-height);
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-gap: var(--omni-space-2);
  --omni-variant-icon-size: var(--omni-space-5); /* 20px = 1.25rem */
}

/* Default variant style is solid */
[data-variant]:not([data-variant-style]) {
  --omni-variant-style-bg: var(--omni-variant-bg);
  --omni-variant-style-text: var(--omni-variant-text);
  --omni-variant-style-border: var(--omni-variant-border);
  --omni-variant-style-hover-bg: var(--omni-variant-hover-bg);
}
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI SCROLL UTILITIES - MINIMAL
   Simple hidden scrollbars and basic scroll hints
   ============================================================================= */

/* Hide native scrollbars across all browsers */
.omni-scroll-hidden {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.omni-scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Smooth scrolling behavior */
.omni-scroll-smooth {
  scroll-behavior: smooth;
}

/* Basic scroll hints with fade gradients */
.omni-scroll-fade {
  position: relative;
}

.omni-scroll-fade::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 20px;
  pointer-events: none;
  content: '';
  background: linear-gradient(to bottom, var(--omni-color-surface), transparent);
}

.omni-scroll-fade::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 20px;
  pointer-events: none;
  content: '';
  background: linear-gradient(to top, var(--omni-color-surface), transparent);
}
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI LOADING STATE UTILITY
   Universal loading pattern that works with any component
   ============================================================================= */

/* Container loading state */
:where(.omni-loading) {
  position: relative;
  pointer-events: none;
  cursor: wait;
}

/* Center spinner over content */
:where(.omni-loading) .omni-spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}

/* Optional: fade content while loading */
:where(.omni-loading-fade) > *:not(.omni-spinner) {
  opacity: 0.5;
  transition: opacity var(--omni-transition);
}

/* Better approach: use pseudo-element overlay */
:where(.omni-loading-overlay-content)::before {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: '';
  background: rgb(255 255 255 / 0.7);
}

/* Inline loading state */
:where(.omni-loading-inline) {
  display: inline-flex;
  gap: var(--omni-space-2);
  align-items: center;
}

:where(.omni-loading-inline) .omni-spinner {
  flex-shrink: 0;
}

/* Full page/overlay loading */
:where(.omni-loading-overlay) {
  position: fixed;
  inset: 0;
  z-index: var(--omni-z-modal);
  display: grid;
  place-items: center;
  background: var(--omni-color-overlay);
}

/* Container variant (for specific sections) */
:where(.omni-loading-overlay--container) {
  position: absolute;
}

/* Loading message pattern */
:where(.omni-loading-message) {
  display: flex;
  flex-direction: column;
  gap: var(--omni-space-3);
  align-items: center;
  color: var(--omni-color-text);
  text-align: center;
}

:where(.omni-loading-overlay) .omni-loading-message {
  color: var(--omni-color-text-inverse);
}
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI TOUCH TARGET UTILITY
   Ensures minimum 44px touch targets for interactive elements on touch devices
   ============================================================================= */

/* Apply to any interactive element that needs touch optimization */
@media (pointer: coarse) {
  :where(.omni-touch-target) {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Auto-apply to common interactive elements */
  :where(
    button,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"],
    .omni-button,
    .omni-fab,
    .omni-toggle,
    .omni-bookmark,
    .omni-like-button,
    .omni-vote-button,
    .omni-page-link,
    .omni-tab,
    .omni-accordion-trigger
  ):not(.omni-touch-target-opt-out) {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* For inline buttons/links that shouldn't grow horizontally */
  :where(.omni-touch-target-height-only) {
    min-width: auto;
    min-height: 44px;
  }
  
  /* For elements that already have adequate size */
  :where(
    .omni-button-lg,
    .omni-fab-lg,
    .omni-pagination-lg .omni-page-link,
    textarea,
    select[multiple]
  ) {
    /* Already large enough, don't override */
    min-width: unset;
    min-height: unset;
  }
}

/* Opt-out class for when you really don't want touch scaling */
:where(.omni-touch-target-opt-out) {
  min-width: unset !important;
  min-height: unset !important;
}
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI ACCESSIBILITY UTILITIES
   Global accessibility patterns to eliminate repetition across components
   ============================================================================= */

/* Reduced motion - automatically applies to all animated elements */
@media (prefers-reduced-motion: reduce) {
  /* Kill all transitions and animations globally */
  :where(
    .omni-button,
    .omni-fab,
    .omni-card,
    .omni-modal,
    .omni-toast,
    .omni-tooltip,
    .omni-accordion,
    .omni-stepper,
    .omni-progress,
    .omni-skeleton,
    .omni-spinner,
    .omni-toggle,
    .omni-bookmark,
    .omni-like-button,
    .omni-vote-button,
    .omni-share-button,
    .omni-pagination,
    .omni-nav,
    .omni-text-input,
    .omni-range,
    .omni-file-upload,
    .omni-dropdown,
    .omni-autocomplete,
    .omni-sidebar,
    .omni-drawer,
    .omni-parallax,
    .omni-tilt-card,
    .omni-magnetic-button,
    .omni-badge,
    .omni-badge-interactive,
    .omni-text-input
  ) {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  
  /* Kill pseudo-element animations too */
  :where(
    .omni-button,
    .omni-fab,
    .omni-toggle,
    .omni-progress,
    .omni-skeleton,
    .omni-spinner
  )::before,
  :where(
    .omni-button,
    .omni-fab,
    .omni-toggle,
    .omni-progress,
    .omni-skeleton,
    .omni-spinner
  )::after {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  
  /* Specific fixes for complex components */
  .omni-spinner {
    animation: none !important;
  }
  
  .omni-spinner::before,
  .omni-spinner::after {
    animation: none !important;
  }
  
  .omni-skeleton::before {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  /* Add visible borders to borderless elements */
  :where(
    .omni-button,
    .omni-fab,
    .omni-toggle,
    .omni-bookmark,
    .omni-like-button,
    .omni-vote-button,
    .omni-page-link,
    .omni-badge,
    .omni-badge-interactive
  ) {
    border: 2px solid transparent;
  }
  
  :where(
    .omni-button,
    .omni-fab,
    .omni-toggle,
    .omni-bookmark,
    .omni-like-button,
    .omni-vote-button,
    .omni-page-link,
    .omni-badge,
    .omni-badge-interactive
  ):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    border-color: Highlight;
  }
  
  /* Ensure sufficient contrast for state indicators */
  :where(.omni-step-indicator) {
    border-width: 3px;
  }
  
  :where(.omni-progress-bar) {
    border: 2px solid ButtonText;
  }
  
  /* Override any transparency */
  :where(
    .omni-modal-backdrop,
    .omni-dropdown-backdrop,
    .omni-toast-backdrop
  ) {
    background: Canvas;
    border: 2px solid ButtonText;
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  /* Use system colors */
  :where(
    .omni-button,
    .omni-fab,
    .omni-card,
    .omni-modal
  ) {
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonText;
  }
  
  :where(
    .omni-button,
    .omni-fab,
    .omni-card,
    .omni-modal
  ):hover {
    color: HighlightText;
    background: Highlight;
  }
  
  :where(
    .omni-button,
    .omni-fab,
    .omni-card,
    .omni-modal
  ):disabled {
    color: Canvas;
    background: GrayText;
  }
  
  :where(.omni-text-input) {
    color: FieldText;
    background: Field;
    border-color: FieldText;
  }
  
  :where(.omni-text-input):focus {
    color: HighlightText;
    background: Highlight;
  }
}

/* Opt-out classes for components that handle their own accessibility */
:where(.omni-accessibility-opt-out) {
  border: unset !important;
  transform: unset !important;

  /* Remove global accessibility styles */
  transition: unset !important;
  animation: unset !important;
}
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI FOCUS RING UTILITY
   Consistent focus states for all interactive elements
   ============================================================================= */

/* Global focus ring for all interactive elements */
:where(
  button,
  [role="button"],
  [tabindex]:not([tabindex="-1"]),
  input,
  select,
  textarea,
  a,
  .omni-button,
  .omni-fab,
  .omni-toggle,
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-share-button,
  .omni-page-link,
  .omni-tab,
  .omni-accordion-trigger,
  .omni-modal-close,
  .omni-toast-close,
  .omni-dropdown-trigger,
  .omni-step-indicator,
  .omni-badge-interactive,
  .omni-sidebar-item
):focus-visible {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: 2px;
  border-radius: var(--omni-radius-sm);
}

/* Enhanced focus for form elements */
:where(
  .omni-text-input,
  .omni-textarea,
  select,
  .omni-range
):focus-visible {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--omni-color-primary) 20%, transparent);
}

/* Special focus for dangerous actions */
:where(
  .omni-button-danger,
  .omni-vote-down,
  [data-destructive="true"]
):focus-visible {
  outline-color: var(--omni-color-danger);
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--omni-color-danger) 20%, transparent);
}

/* Focus within containers (for keyboard navigation) */
:where(
  .omni-modal,
  .omni-dropdown,
  .omni-tooltip,
  .omni-popover
):focus-within {
  border-color: var(--omni-color-primary);
}

/* Skip links for screen readers */
.omni-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: 1000;
  padding: 8px;
  color: var(--omni-color-primary-text);
  text-decoration: none;
  background: var(--omni-color-primary);
  border-radius: var(--omni-radius-sm);
}

.omni-skip-link:focus {
  top: 6px;
}

/* Focus trap helper (for modals, dropdowns) */
.omni-focus-trap {
  /* No additional properties needed for the main selector */
}

/* Hidden elements that can receive focus for trapping */
.omni-focus-trap::before,
.omni-focus-trap::after {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  content: '';
  opacity: 0;
}

/* Opt-out for custom focus handling */
:where(.omni-focus-custom):focus-visible {
  outline: none;
  box-shadow: none;
}
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI ICON SIZING UTILITY
   Consistent icon sizing across all components
   ============================================================================= */

/* Standard icon sizing for interactive elements */
:where(
  .omni-button,
  .omni-fab,
  .omni-toggle,
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-share-button,
  .omni-page-link,
  .omni-tab,
  .omni-accordion-trigger,
  .omni-modal-close,
  .omni-toast-close,
  .omni-dropdown-trigger,
  .omni-step-indicator,
  .omni-nav-link,
  .omni-card-action
) > :is(svg, .omni-icon, [class*="icon"], img):not(.omni-avatar) {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  stroke: currentColor;
}

/* Small variant icons */
:where(.omni-button-sm, .omni-fab-sm, .omni-tab-sm) > :is(svg, .omni-icon, [class*="icon"], img):not(.omni-avatar) {
  width: 1em;
  height: 1em;
}

/* Large variant icons */
:where(.omni-button-lg, .omni-fab-lg, .omni-tab-lg) > :is(svg, .omni-icon, [class*="icon"], img):not(.omni-avatar) {
  width: 1.5em;
  height: 1.5em;
}

/* Icon-only buttons get slightly larger icons */
:where(
  .omni-button-icon,
  .omni-fab,
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button
) > :is(svg, .omni-icon, [class*="icon"], img):not(.omni-avatar) {
  width: 1.5em;
  height: 1.5em;
}

:where(.omni-button-sm, .omni-fab-sm):is(.omni-button-icon, .omni-fab, .omni-bookmark, .omni-like-button, .omni-vote-button) > :is(svg, .omni-icon, [class*="icon"], img):not(.omni-avatar) {
  width: 1.25em;
  height: 1.25em;
}

:where(.omni-button-lg, .omni-fab-lg):is(.omni-button-icon, .omni-fab, .omni-bookmark, .omni-like-button, .omni-vote-button) > :is(svg, .omni-icon, [class*="icon"], img):not(.omni-avatar) {
  width: 1.75em;
  height: 1.75em;
}

/* Spinner sizing in loading states */
:where(.omni-button-loading, .omni-fab-loading) .omni-spinner {
  width: 1.25em;
  height: 1.25em;
}

:where(.omni-button-sm, .omni-fab-sm):is(.omni-button-loading, .omni-fab-loading) .omni-spinner {
  width: 1em;
  height: 1em;
}

:where(.omni-button-lg, .omni-fab-lg):is(.omni-button-loading, .omni-fab-loading) .omni-spinner {
  width: 1.5em;
  height: 1.5em;
}

/* Status icons (success, warning, error) */
:where(
  .omni-alert,
  .omni-toast,
  .omni-notification,
  .omni-form-error,
  .omni-form-success
) > :is(svg, .omni-icon, [class*="icon"]):first-child {
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

/* Navigation icons */
:where(.omni-nav, .omni-breadcrumb, .omni-pagination) :is(svg, .omni-icon, [class*="icon"]) {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Avatar sizing (different from regular icons) */
:where(.omni-avatar) {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

:where(.omni-avatar-sm) {
  width: 2rem;
  height: 2rem;
}

:where(.omni-avatar-lg) {
  width: 3rem;
  height: 3rem;
}

:where(.omni-avatar-xl) {
  width: 4rem;
  height: 4rem;
}

/* Custom icon sizes */
.omni-icon-xs { width: 0.75rem; height: 0.75rem; }
.omni-icon-sm { width: 1rem; height: 1rem; }
.omni-icon-md { width: 1.25rem; height: 1.25rem; }
.omni-icon-lg { width: 1.5rem; height: 1.5rem; }
.omni-icon-xl { width: 2rem; height: 2rem; }
.omni-icon-2xl { width: 2.5rem; height: 2.5rem; }
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI INTERACTION STATES UTILITY
   Global disabled, loading, and hover patterns
   ============================================================================= */

/* Disabled state for all interactive elements */
:where(
  button,
  [role="button"],
  input,
  select,
  textarea,
  .omni-button,
  .omni-fab,
  .omni-toggle,
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-share-button,
  .omni-page-link,
  .omni-tab,
  .omni-accordion-trigger,
  .omni-dropdown-trigger,
  .omni-card-action,
  .omni-badge-interactive,
  .omni-text-input,
  .omni-sidebar-item
):disabled,
:where(
  [aria-disabled="true"],
  .omni-disabled,
  .omni-badge[aria-disabled="true"],
  .omni-badge-interactive[aria-disabled="true"],
  .omni-text-input[aria-disabled="true"]
) {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Remove hover effects for disabled elements */
:where(
  button,
  [role="button"],
  input,
  select,
  textarea,
  .omni-button,
  .omni-fab,
  .omni-toggle,
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-share-button,
  .omni-page-link,
  .omni-tab,
  .omni-accordion-trigger,
  .omni-dropdown-trigger,
  .omni-card-action,
  .omni-badge-interactive,
  .omni-text-input,
  .omni-sidebar-item
):disabled:hover,
:where(
  [aria-disabled="true"],
  .omni-disabled,
  .omni-badge[aria-disabled="true"],
  .omni-badge-interactive[aria-disabled="true"],
  .omni-text-input[aria-disabled="true"]
):hover {
  box-shadow: none;
  transform: none;
}

/* Loading state for interactive elements */
:where(
  .omni-loading
) {
  pointer-events: none;
  cursor: wait;
}

/* Hide text/icons while loading */
:where(
  .omni-loading
) > :not(.omni-spinner) {
  opacity: 0;
}

/* Position spinner (for non-flex containers) */
:where(
  .omni-loading
) .omni-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Special handling for flex-based button/FAB loading */
:where(
  .omni-button-loading,
  .omni-fab-loading
) {
  pointer-events: none;
  cursor: wait;
}

/* Hide text content but keep spinner visible in flex flow */
:where(
  .omni-button-loading,
  .omni-fab-loading
) > :not(.omni-spinner) {
  visibility: hidden;
}

/* Spinner stays in flex flow - no absolute positioning needed */
:where(
  .omni-button-loading,
  .omni-fab-loading
) .omni-spinner {
  position: static;
  transform: none;
}

/* Hover effects for interactive elements */
:where(
  .omni-button,
  .omni-fab,
  .omni-toggle,
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-share-button,
  .omni-page-link,
  .omni-tab,
  .omni-card,
  .omni-nav-link,
  .omni-badge-interactive
):hover:not(:disabled, [aria-disabled="true"], .omni-loading) {
  /* Enhanced shadow */
  box-shadow: var(--omni-shadow-md);
}

/* Color shift for buttons on hover */
:where(
  .omni-button,
  .omni-fab
):hover:not(:disabled, [aria-disabled="true"], .omni-loading) {
  filter: brightness(0.85);
}

/* Active/pressed state */
:where(
  .omni-button,
  .omni-fab,
  .omni-toggle,
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-share-button,
  .omni-page-link,
  .omni-tab,
  .omni-badge-interactive
):active:not(:disabled, [aria-disabled="true"], .omni-loading) {
  box-shadow: var(--omni-shadow-sm);
}

/* Selected/pressed state for toggleable elements */
:where(
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-tab,
  .omni-page-link
)[aria-pressed="true"],
:where(
  .omni-toggle
)[aria-checked="true"],
:where(
  .omni-step
).omni-step-active,
:where(
  .omni-nav-link
).omni-nav-active {
  color: var(--omni-color-primary);
}

/* Fill icons when active */
:where(
  .omni-bookmark,
  .omni-like-button,
  .omni-vote-button,
  .omni-tab,
  .omni-page-link
)[aria-pressed="true"] svg,
:where(
  .omni-toggle
)[aria-checked="true"] svg,
:where(
  .omni-step
).omni-step-active svg,
:where(
  .omni-nav-link
).omni-nav-active svg {
  fill: currentColor;
}

/* Error/invalid state */
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select,
  .omni-toggle,
  .omni-file-upload
):invalid:not(:placeholder-shown),
:where(
  .omni-error,
  .omni-invalid,
  [aria-invalid="true"]
) {
  border-color: var(--omni-color-danger);
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--omni-color-danger) 20%, transparent);
}

/* Success/valid state - Tier 2 JavaScript validation only */
:where(
  .omni-success,
  .omni-valid
) {
  border-color: var(--omni-color-success);
}

:where(
  .omni-success,
  .omni-valid
):focus {
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--omni-color-success) 20%, transparent);
}

/* Read-only state */
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select
):read-only {
  cursor: default;
  background: var(--omni-color-background);
  border-style: dashed;
}

/* Read-only state focus */
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select
):read-only:focus {
  border-color: var(--omni-color-border);
  box-shadow: none;
}

/* Required field indicator */
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select,
  .omni-toggle,
  .omni-file-upload,
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
):required,
:where(.omni-required) {
  position: relative;
}

/* Add red asterisk after required fields */
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select,
  .omni-toggle,
  .omni-file-upload,
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
):required::after,
:where(.omni-required)::after {
  position: absolute;
  top: var(--omni-space-1);
  right: var(--omni-space-2);
  z-index: 1;
  font-weight: bold;
  color: var(--omni-color-danger);
  pointer-events: none;
  content: "*";
}

/* Required field that's empty gets warning border */
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select
):required:placeholder-shown,
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select
):required:invalid:not(:focus) {
  border-color: var(--omni-color-warning);
}

/* Placeholder styling consistency */
:where(
  .omni-text-input,
  .omni-textarea,
  .omni-select
)::placeholder {
  color: var(--omni-color-text-muted);
  opacity: 1;
}

/* Selection styling */
::selection {
  color: var(--omni-color-text);
  background: var(--omni-color-selection, color-mix(in srgb, var(--omni-color-primary) 30%, transparent));
}
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI SAFE AREA UTILITIES - NUCLEAR EDITION
   Handle device safe areas (iPhone notch, home indicator, etc.)
   ============================================================================= */

/* Individual safe area utilities */
.omni-safe-top { 
  padding-top: env(safe-area-inset-top); 
}

.omni-safe-bottom { 
  padding-bottom: env(safe-area-inset-bottom); 
}

.omni-safe-left { 
  padding-left: env(safe-area-inset-left); 
}

.omni-safe-right { 
  padding-right: env(safe-area-inset-right); 
}

/* Combined utilities for common patterns */
.omni-safe-x {
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

.omni-safe-y {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.omni-safe-all {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Minimum safe area (ensures at least base padding) */
.omni-safe-top-min { 
  padding-top: max(var(--omni-space-3), env(safe-area-inset-top)); 
}

.omni-safe-bottom-min { 
  padding-bottom: max(var(--omni-space-3), env(safe-area-inset-bottom)); 
}

/*
 * USAGE:
 * <header class="omni-safe-top">...</header>
 * <main class="omni-safe-x">...</main>
 * <div class="omni-safe-all">...</div>
 * 
 * For modals/overlays that need minimum padding:
 * <div class="omni-modal omni-safe-top-min">...</div>
 */
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI CLOSE BUTTON UTILITY
   Universal close/clear/remove button for modals, alerts, tags, inputs
   ============================================================================= */

:where(.omni-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--omni-color-text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--omni-radius-sm);
  transition: all 150ms ease;
}

:where(.omni-close)::before {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  content: '×';
}

:where(.omni-close):hover:not(:disabled) {
  color: white;
  background: var(--omni-color-danger);
}

/* Focus and disabled states handled by global utilities */

/* Size variants */
:where(.omni-close-sm) {
  width: 1.5rem;
  height: 1.5rem;
}

:where(.omni-close-sm)::before {
  font-size: 1.25rem;
}

:where(.omni-close-lg) {
  width: 2.5rem;
  height: 2.5rem;
}

:where(.omni-close-lg)::before {
  font-size: 1.75rem;
}

/* Position variants for absolute positioning */
:where(.omni-close-absolute) {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
}

:where(.omni-close-top-right) {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/*
 * USAGE:
 * 
 * Basic close button:
 * <button class="omni-close" aria-label="Close"></button>
 * 
 * Small clear button in input:
 * <button class="omni-close omni-close-sm omni-close-absolute" aria-label="Clear"></button>
 * 
 * Modal close button:
 * <button class="omni-close omni-close-top-right" aria-label="Close modal"></button>
 * 
 * Use aria-label for accessibility since content is just ×
 */
}
@layer omniui.utilities{

/* =============================================================================
 * SMOOTH SCROLL - NUCLEAR EDITION
 * Just the CSS parts. JavaScript handles the interactive stuff.
 * ============================================================================= */

/* Enable smooth scrolling by default */
html {
  scroll-behavior: smooth;

  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

/* Utility classes */
.omni-scroll-auto {
  scroll-behavior: auto;
}

.omni-scroll-smooth {
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

/* Scroll margin for fixed headers */
.omni-scroll-mt-header { 
  scroll-margin-top: var(--omni-header-height, 4rem); 
}

.omni-scroll-mt-sm { scroll-margin-top: var(--omni-space-2); }
.omni-scroll-mt-md { scroll-margin-top: var(--omni-space-4); }
.omni-scroll-mt-lg { scroll-margin-top: var(--omni-space-6); }

/* Scroll snap utilities */
.omni-scroll-snap-x {
  scroll-snap-type: x mandatory;
  
  > * {
    scroll-snap-align: start;
  }
}

.omni-scroll-snap-y {
  scroll-snap-type: y mandatory;
  
  > * {
    scroll-snap-align: start;
  }
}

.omni-scroll-snap-center {
  > * {
    scroll-snap-align: center;
  }
}

/*
 * That's it. 56 lines instead of 207.
 * Scroll indicators, back-to-top buttons, and progress bars are JavaScript's job.
 */
}
@layer omniui.utilities{

/* =============================================================================
   OMNIUI SCREEN READER UTILITIES
   Accessibility utilities for screen readers
   ============================================================================= */

.omni-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}

.omni-sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  clip: auto !important;
}
}
@layer omniui.utilities{

/* =============================================================================
 * OMNIUI FOCUS UTILITIES
 * Focus management and accessibility
 * ============================================================================= */

.omni-focus-ring {
  outline: 0;
  box-shadow: var(--omni-focus-ring);
}

.omni-focus-ring-primary {
  outline: 0;
  box-shadow: 0 0 0 var(--omni-focus-ring-width) var(--omni-color-primary);
}

.omni-focus-ring-danger {
  outline: 0;
  box-shadow: 0 0 0 var(--omni-focus-ring-width) var(--omni-color-danger);
}

/* Skip link for keyboard navigation */
.omni-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: var(--omni-z-index-skiplink);
  padding: 8px;
  color: var(--omni-color-white);
  text-decoration: none;
  background: var(--omni-color-primary);
  border-radius: var(--omni-radius);
}

.omni-skip-link:focus {
  top: 6px;
}
}
@layer omniui.utilities{

/* =============================================================================
 * OMNIUI COLOR CONTRAST UTILITIES
 * High contrast and accessibility support
 * ============================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --omni-border-width: var(--omni-hc-border-width);
    --omni-focus-ring-width: var(--omni-hc-outline-width);
  }

  .omni-button {
    border-width: var(--omni-hc-border-width);
  }

  .omni-form-control {
    border-width: var(--omni-hc-border-width);
  }
}

/* Forced colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  .omni-button {
    color: ButtonText;
    background-color: ButtonFace;
    border: 1px solid ButtonText;
  }

  .omni-button:hover {
    color: HighlightText;
    background-color: Highlight;
  }

  .omni-form-control {
    color: FieldText;
    background-color: Field;
    border: 1px solid ButtonText;
  }
}
}
@layer omniui.utilities{

/* =============================================================================
 * OMNIUI PRINT STYLES
 * Print-specific optimizations
 * ============================================================================= */

@media print {
  /* Hide interactive elements */
  .omni-button,
  .omni-dropdown,
  .omni-modal,
  .omni-toast {
    display: none !important;
  }

  /* Ensure good contrast */
  * {
    color: black !important;
    background: white !important;
  }

  /* Optimize spacing */
  .omni-container {
    max-width: none !important;
    padding: 0 !important;
  }
}
}
/* =============================================================================
 * LAYER: omniui.components
 * All UI components - Tier 1 (CSS-only), Tier 2 (enhanced), Tier 3 (JS-required)
 * ============================================================================= */
/* TIER 1: CSS-ONLY COMPONENTS (alphabetical) */
@layer omniui.components{
/* =============================================================================
 * OMNIUI ACCORDION - NUCLEAR DIV-BASED EDITION
 * Progressive enhancement: Shows all content without JS, animates with JS
 * =============================================================================
 *
 * Base accordion container */
:where(.omni-accordion) {
  margin-block-end: var(--omni-space-4);
}

/* Accordion item */
:where(.omni-accordion-item) {
  background: var(--omni-variant-style-bg);
  border: 1px solid var(--omni-variant-style-border);
  border-radius: var(--omni-radius-md);
  margin-block-end: var(--omni-space-2);
  overflow: hidden;
}

/* Accordion header - always visible */
:where(.omni-accordion-header) {
  margin: 0;
  font-size: var(--omni-variant-font-size);
  font-weight: var(--omni-font-medium);
}

/* Accordion trigger button */
:where(.omni-accordion-trigger) {
  position: relative;
  width: 100%;
  padding: var(--omni-space-3) var(--omni-variant-padding-x);
  padding-inline-end: calc(var(--omni-variant-padding-x) + 2em);
  font: inherit;
  line-height: 1;
  color: var(--omni-variant-style-text);
  text-align: start;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--omni-transition);
  display: flex;
  align-items: center;
  gap: var(--omni-space-2);
}

/* Without JS, hide the button and show as plain heading */
:where(.omni-accordion:not(.js-enabled)) .omni-accordion-trigger {
  cursor: default;
  padding-inline-end: var(--omni-variant-padding-x);
}

:where(.omni-accordion.js-enabled) .omni-accordion-trigger:hover {
  background: color-mix(in sRGB, var(--omni-color-surface) 95%, var(--omni-color-text));
}

:where(.omni-accordion.js-enabled) .omni-accordion-trigger:active {
  background: color-mix(in sRGB, var(--omni-color-surface) 90%, var(--omni-color-text));
}

/* Focus styles */
:where(.omni-accordion-trigger):focus-visible {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: 2px;
}

/* Chevron icon - only show with JS */
:where(.omni-accordion.js-enabled) .omni-accordion-trigger::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--omni-variant-padding-x);
  width: 0.5em;
  height: 0.5em;
  content: '';
  border-right: var(--omni-border-width) solid var(--omni-color-text-muted);
  border-bottom: var(--omni-border-width) solid var(--omni-color-text-muted);
  transform: translateY(-50%) rotate(45deg);
  transition: transform var(--omni-transition);
}

:where(.omni-accordion-trigger[aria-expanded="true"])::after {
  transform: translateY(-50%) rotate(225deg);
}

/* Content wrapper */
:where(.omni-accordion-content) {
  border-block-start: 1px solid var(--omni-variant-style-border);
}

/* Without JS, content is always visible */
:where(.omni-accordion:not(.js-enabled)) .omni-accordion-content {
  display: block !important;
}

/* With JS, content is hidden by default */
:where(.omni-accordion.js-enabled) .omni-accordion-content[hidden] {
  display: none;
}

/* Inner content wrapper for padding */
:where(.omni-accordion-inner) {
  padding: var(--omni-space-3) var(--omni-variant-padding-x);
  color: var(--omni-variant-style-text);
}

/* Flush variant - no gaps between items */
:where(.omni-accordion[data-style="flush"]) .omni-accordion-item {
  margin-block-end: 0;
  border-radius: 0;
}

:where(.omni-accordion[data-style="flush"]) .omni-accordion-item + .omni-accordion-item {
  border-block-start: none;
}

:where(.omni-accordion[data-style="flush"]) .omni-accordion-item:first-child {
  border-start-start-radius: var(--omni-radius-md);
  border-start-end-radius: var(--omni-radius-md);
}

:where(.omni-accordion[data-style="flush"]) .omni-accordion-item:last-child {
  border-end-start-radius: var(--omni-radius-md);
  border-end-end-radius: var(--omni-radius-md);
}

/* Default variant and size values */
:where(.omni-accordion):not([data-variant]) {
  --omni-variant-bg: var(--omni-color-surface);
  --omni-variant-text: var(--omni-color-text);
  --omni-variant-border: var(--omni-color-border);
  --omni-variant-style-bg: var(--omni-variant-bg);
  --omni-variant-style-text: var(--omni-variant-text);
  --omni-variant-style-border: var(--omni-variant-border);
}

:where(.omni-accordion):not([data-size]) {
  --omni-variant-padding-x: var(--omni-space-4);
  --omni-variant-padding-y: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-base);
}

/* Transition duration */
:where(.omni-accordion) {
  --omni-transition: 200ms ease;
}

/* Compact variant - reduced padding for dense UIs */
:where(.omni-accordion[data-compact="true"]) {
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-sm);
}

:where(.omni-accordion[data-compact="true"]) .omni-accordion-trigger {
  padding-block: var(--omni-space-1);
}

:where(.omni-accordion[data-compact="true"]) .omni-accordion-inner {
  padding-block: var(--omni-space-2);
}

/* Full trigger variant - entire header is clickable */
:where(.omni-accordion[data-trigger="full"]) .omni-accordion-header {
  margin: 0;
  padding: 0;
}

:where(.omni-accordion[data-trigger="full"]) .omni-accordion-trigger {
  width: 100%;
  text-align: start;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :where(.omni-accordion-item) {
    border-width: 2px;
  }
  
  :where(.omni-accordion-trigger) {
    font-weight: var(--omni-font-bold);
  }
}

/* Print styles - show all content */
@media print {
  :where(.omni-accordion-content) {
    display: block !important;
  }
  
  :where(.omni-accordion-trigger)::after {
    display: none;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI ALERT - NUCLEAR DATA VARIANT EDITION
 * Uses data attributes for all variants. No legacy class names.
 * =============================================================================
 *
 * ACCESSIBILITY (WAI-ARIA):
 * Alerts MUST include appropriate ARIA roles for screen reader announcements.
 *
 * For URGENT messages (errors, warnings, critical):
 *   <div class="omni-alert" data-variant="danger" role="alert">
 *     Error: Your session has expired.
 *   </div>
 *   → role="alert" implies aria-live="assertive" (announced immediately)
 *
 * For NON-URGENT messages (success, info, general):
 *   <div class="omni-alert" data-variant="success" role="status">
 *     Settings saved successfully.
 *   </div>
 *   → role="status" implies aria-live="polite" (announced when idle)
 *
 * Recommended mapping:
 *   - danger, warning → role="alert" (urgent)
 *   - success, info, primary → role="status" (advisory)
 *
 * ===== BASE ALERT ===== */

:where(.omni-alert) {
  position: relative;
  padding: var(--omni-space-3) var(--omni-space-4);
  margin-block-end: var(--omni-space-4);
  
  /* Default alert styling - neutral */
  color: var(--omni-color-text);
  background-color: var(--omni-color-surface-alt);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
}

/* Alert variants using direct color system */
:where(.omni-alert[data-variant="primary"]) {
  color: var(--omni-color-primary);
  background-color: color-mix(in sRGB, var(--omni-color-primary) 10%, var(--omni-color-surface));
  border-color: color-mix(in sRGB, var(--omni-color-primary) 30%, var(--omni-color-border));
}

:where(.omni-alert[data-variant="success"]) {
  color: var(--omni-color-success);
  background-color: color-mix(in sRGB, var(--omni-color-success) 10%, var(--omni-color-surface));
  border-color: color-mix(in sRGB, var(--omni-color-success) 30%, var(--omni-color-border));
}

:where(.omni-alert[data-variant="warning"]) {
  color: var(--omni-color-warning);
  background-color: color-mix(in sRGB, var(--omni-color-warning) 10%, var(--omni-color-surface));
  border-color: color-mix(in sRGB, var(--omni-color-warning) 30%, var(--omni-color-border));
}

:where(.omni-alert[data-variant="danger"]) {
  color: var(--omni-color-danger);
  background-color: color-mix(in sRGB, var(--omni-color-danger) 10%, var(--omni-color-surface));
  border-color: color-mix(in sRGB, var(--omni-color-danger) 30%, var(--omni-color-border));
}

:where(.omni-alert[data-variant="info"]) {
  color: var(--omni-color-info);
  background-color: color-mix(in sRGB, var(--omni-color-info) 10%, var(--omni-color-surface));
  border-color: color-mix(in sRGB, var(--omni-color-info) 30%, var(--omni-color-border));
}

/* ===== DISMISSIBLE ALERTS ===== */

:where(.omni-alert[data-dismissible="true"]) {
  padding-inline-end: var(--omni-space-12);
  
  /* Close button - use global .omni-close utility with alert-specific positioning */
  .omni-close {
    position: absolute;
    inset-block-start: var(--omni-space-2);
    inset-inline-end: var(--omni-space-2);
    color: inherit;
    opacity: 0.6;
    
    &:hover {
      background: color-mix(in sRGB, currentColor 10%, transparent);
      opacity: 1;
    }
  }
}

/* ===== RESPONSIVE ===== */

@media (width <= 640px) {
  :where(.omni-alert) {
    padding: var(--omni-space-2) var(--omni-space-3);
    font-size: var(--omni-text-sm);
  }

  :where(.omni-alert[data-dismissible="true"]) {
    padding-inline-end: var(--omni-space-10);
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI AVATAR - NUCLEAR DATA VARIANT EDITION
   Circular images with initials fallback. Data attributes or nothing.
   =============================================================================

   USAGE:
   <div class="omni-avatar" data-size="md" data-initials="JD"></div>
   <div class="omni-avatar" data-size="lg" data-status="online"><img src="..."></div>
   <div class="omni-avatar" data-variant="primary" data-size="sm">JD</div>
   ============================================================================= */

/* Base avatar - ONE default size, variant system for others */
:where(.omni-avatar) {
  /* Size variables - set by data-size, used by component */
  --_avatar-size: var(--omni-avatar-size);
  --_avatar-font-size: var(--omni-avatar-font-size);
  --_avatar-status-size: 0.75rem; /* 12px default */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--_avatar-size);
  block-size: var(--_avatar-size);
  font-size: var(--_avatar-font-size);
  font-weight: var(--omni-font-medium);
  line-height: 1;
  color: var(--omni-variant-style-text, var(--omni-color-text-inverse));
  user-select: none;
  background: var(--omni-variant-style-bg, #6b7280);
  border-radius: var(--omni-radius-full);

  /* Image - clip to circle */
  img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  /* Initials fallback */
  &[data-initials]::before {
    text-transform: uppercase;
    content: attr(data-initials);
  }
}

/* =============================================================================
 * SIZE VARIANTS
 * ============================================================================= */

:where(.omni-avatar[data-size="xs"]) {
  --_avatar-size: var(--omni-avatar-size-xs);
  --_avatar-font-size: var(--omni-text-xs);
  --_avatar-status-size: 0.5rem; /* 8px */
}

:where(.omni-avatar[data-size="sm"]) {
  --_avatar-size: var(--omni-avatar-size-sm);
  --_avatar-font-size: var(--omni-text-xs);
  --_avatar-status-size: 0.625rem; /* 10px */
}

/* md is default, no override needed */

:where(.omni-avatar[data-size="lg"]) {
  --_avatar-size: var(--omni-avatar-size-lg);
  --_avatar-font-size: var(--omni-text-base);
  --_avatar-status-size: 0.875rem; /* 14px */
}

:where(.omni-avatar[data-size="xl"]) {
  --_avatar-size: var(--omni-avatar-size-xl);
  --_avatar-font-size: var(--omni-text-xl);
  --_avatar-status-size: 1rem; /* 16px */
}

/* Status indicators using data attributes */
:where(.omni-avatar[data-status]) {
  &::after {
    position: absolute;
    /* Position at corner, offset to sit on circle edge consistently */
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: var(--_avatar-status-size);
    block-size: var(--_avatar-status-size);
    content: '';
    background: var(--omni-color-text-muted);
    border: 2px solid var(--omni-color-background);
    border-radius: var(--omni-radius-full);
  }
}

/* Status variants - specific colors for each state */
:where(.omni-avatar[data-status="online"])::after {
  background: var(--omni-color-success);
}

:where(.omni-avatar[data-status="offline"])::after {
  background: var(--omni-color-text-muted);
}

:where(.omni-avatar[data-status="busy"])::after {
  background: var(--omni-color-warning);
}

/* Avatar group */
:where(.omni-avatar-group) {
  display: flex;
  
  .omni-avatar:not(:first-child) {
    margin-inline-start: calc(var(--omni-space-2) * -1);
    border: var(--omni-border-width) solid var(--omni-color-background);
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI BADGE - NUCLEAR DATA VARIANT EDITION
 * No fallbacks. No class variants. Trust the system.
 * =============================================================================
 *
 * USAGE:
 * <span class="omni-badge" data-variant="primary">New</span>
 * <span class="omni-badge" data-variant="danger" data-variant-style="outline">Error</span>
 * <span class="omni-badge" data-variant="success">Success</span>
 * <a href="#" class="omni-badge omni-badge-interactive" data-variant="info">Click me</a>
 *
 * STATUS BADGES (WCAG: color + icon + text):
 * <span class="omni-badge" data-variant="success">
 *   <svg class="omni-badge-icon">...</svg>
 *   Active
 * </span>
 *
 * DOT INDICATOR:
 * <span class="omni-badge omni-badge-dot" data-variant="success"></span>
 *
 * NO LONGER SUPPORTED:
 * <span class="omni-badge omni-badge-primary">OLD WAY</span>
 * ============================================================================= */

/* Base badge - REQUIRES variant system */
:where(.omni-badge) {
  /* Layout */
  display: inline-flex;
  gap: var(--omni-variant-gap, var(--omni-space-1));
  align-items: center;
  justify-content: center;

  /* Sizing with optical vertical centering */
  /* Top padding slightly less to compensate for font baseline */
  padding-block-start: 0.1875rem;  /* 3px */
  padding-block-end: 0.25rem;      /* 4px */
  padding-inline: 0.5rem;          /* 8px */

  /* Typography */
  font-family: var(--omni-font-sans);
  font-size: var(--omni-badge-font-size);
  font-weight: var(--omni-badge-font-weight);
  line-height: 1;
  color: var(--omni-variant-style-text, var(--omni-color-secondary-text));
  white-space: nowrap;
  /* Prevent descenders from affecting height */
  vertical-align: middle;

  /* Colors from variant system with secondary default */
  background: var(--omni-variant-style-bg, var(--omni-color-secondary));
  border: 1px solid var(--omni-variant-style-border, transparent);

  /* Fixed properties */
  border-radius: var(--omni-badge-radius);
}

/* Interactive badges */
:where(.omni-badge-interactive) {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  
  &:hover:not(:disabled, [aria-disabled="true"]) {
    opacity: 0.85;
  }
}

/* Pill style modifier */
:where(.omni-badge[data-variant-style="pill"]) {
  border-radius: var(--omni-radius-full);
}

/* -----------------------------------------------------------------------------
 * Icon Support (for WCAG status badges: color + icon + text)
 * ----------------------------------------------------------------------------- */
:where(.omni-badge-icon),
:where(.omni-badge svg:first-child) {
  flex-shrink: 0;
  width: 0.75em;
  height: 0.75em;
  fill: currentColor;
}

/* Larger icon for better visibility in status badges */
:where(.omni-badge[data-size="lg"]) .omni-badge-icon,
:where(.omni-badge[data-size="lg"]) svg:first-child {
  width: 1em;
  height: 1em;
}

/* -----------------------------------------------------------------------------
 * Dot Indicator (small status dot without text)
 * NO :where() - needs specificity to override badge size padding
 * ----------------------------------------------------------------------------- */
.omni-badge-dot {
  width: 0.5rem;    /* 8px */
  height: 0.5rem;
  padding: 0;
  border-radius: var(--omni-radius-full);
  font-size: 0;     /* Hide any text */
}

/* Medium dot */
.omni-badge-dot[data-size="md"] {
  width: 0.625rem;  /* 10px */
  height: 0.625rem;
  padding: 0;
}

/* Large dot */
.omni-badge-dot[data-size="lg"] {
  width: 0.75rem;   /* 12px */
  height: 0.75rem;
  padding: 0;
}

/* Dot with pulse animation (for active/live status) */
:where(.omni-badge-dot[data-animate="pulse"]) {
  animation: omni-badge-pulse 2s ease-in-out infinite;
}

@keyframes omni-badge-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-badge-dot[data-animate="pulse"]) {
    animation: none;
  }
}

/* -----------------------------------------------------------------------------
 * Size Variants (optional)
 * ----------------------------------------------------------------------------- */
:where(.omni-badge[data-size="sm"]) {
  padding-block-start: 0.0625rem;  /* 1px */
  padding-block-end: 0.125rem;     /* 2px */
  padding-inline: 0.375rem;        /* 6px */
  font-size: var(--omni-text-xs);
}

:where(.omni-badge[data-size="lg"]) {
  padding-block-start: 0.3125rem;  /* 5px */
  padding-block-end: 0.375rem;     /* 6px */
  padding-inline: 0.75rem;         /* 12px */
  font-size: var(--omni-text-sm);
}

/* All other states handled by global utilities and variant system */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI BANNER - LEAN & INFORMATIVE
 * Full-width announcement bars with sensible defaults
 * =============================================================================
 *
 * ACCESSIBILITY (WAI-ARIA):
 * Banners should include ARIA roles based on their urgency level.
 *
 * For ADVISORY announcements (maintenance, updates, info):
 *   <div class="omni-banner" data-variant="info" role="status">
 *     <div class="omni-banner-content">
 *       System maintenance scheduled for tonight at 10 PM EST.
 *     </div>
 *   </div>
 *   → role="status" implies aria-live="polite" (announced when idle)
 *
 * For CRITICAL announcements (outages, security, urgent):
 *   <div class="omni-banner" data-variant="danger" role="alert">
 *     <div class="omni-banner-content">
 *       Service outage detected. We are investigating.
 *     </div>
 *   </div>
 *   → role="alert" implies aria-live="assertive" (announced immediately)
 *
 * Recommended mapping:
 *   - danger → role="alert" (critical, urgent)
 *   - warning, success, info → role="status" (advisory)
 *
 * ============================================================================= */

:where(.omni-banner) {
  --omni-banner-close-offset: 0.75rem;
  --omni-banner-close-space: 3rem;
  
  position: relative;
  inline-size: 100%;
  padding-block: var(--omni-variant-padding-y, var(--omni-space-3));
  padding-inline: var(--omni-variant-padding-x, var(--omni-space-4));
  color: var(--omni-variant-style-text, var(--omni-color-text));
  background: var(--omni-variant-style-bg, var(--omni-color-info));
  border-block-end: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
}

/* Default to info style when no variant specified */
:where(.omni-banner):not([data-variant]) {
  --omni-variant-style-bg: var(--omni-color-info);
  --omni-variant-style-text: var(--omni-color-info-text);
  --omni-variant-style-border: var(--omni-color-border);
}

:where(.omni-banner-content) {
  display: flex;
  gap: var(--omni-variant-gap, var(--omni-space-3));
  align-items: center;
  max-inline-size: var(--omni-container-max-width);
  margin-inline: auto;
}

/* Dismissible variant - adds space for close button */
:where(.omni-banner[data-dismissible="true"]) {
  padding-inline-end: calc(var(--omni-variant-padding-x) + var(--omni-banner-close-space));
}

:where(.omni-banner[data-dismissible="true"]) .omni-close {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--omni-banner-close-offset);
  transform: translateY(-50%);
}

/* Sticky positioning */
:where(.omni-banner[data-position="sticky"]) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--omni-z-banner);
}

/* Fixed positioning (top) */
:where(.omni-banner[data-position="fixed"]) {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--omni-z-banner);
}

/* Fixed positioning (bottom) - cookie consent style */
:where(.omni-banner[data-position="bottom"]) {
  position: fixed;
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--omni-z-banner);
}

/*
 * USAGE:
 * <div class="omni-banner" data-variant="info">
 *   <div class="omni-banner-content">
 *     System maintenance scheduled for tonight at 10 PM EST.
 *   </div>
 * </div>
 * 
 * <div class="omni-banner" data-variant="warning" data-dismissible="true">
 *   <div class="omni-banner-content">
 *     Your session will expire in 5 minutes.
 *   </div>
 *   <button class="omni-close" aria-label="Dismiss"></button>
 * </div>
 * 
 * <div class="omni-banner" data-variant="danger" data-position="sticky" data-size="sm">
 *   <div class="omni-banner-content">
 *     Critical security update required.
 *   </div>
 * </div>
 * 
 * Variants: data-variant (info, warning, danger, success)
 * Sizes: data-size (sm, md, lg)
 * Position: data-position (sticky, fixed)
 * Dismissible: data-dismissible="true"
 */
}
@layer omniui.components{

/* =============================================================================
   OMNIUI BOTTOM NAVIGATION - MOBILE APP-STYLE NAV
   Fixed bottom bar for mobile navigation, hidden on desktop.

   Data attributes:
   - data-variant (icons-only) - Hide labels, show icons only
   - data-position (fixed/sticky) - Positioning mode (default: fixed)

   ACCESSIBILITY (WCAG 2.1):
   - Use <nav> with aria-label to describe navigation purpose
   - Use aria-current="page" on the active link
   - Ensure touch targets are at least 44x44px (we use 48px)

   USAGE:
   <nav class="omni-bottom-nav" aria-label="Main navigation">
     <a href="/" class="omni-bottom-nav-item" aria-current="page">
       <svg class="omni-bottom-nav-icon">...</svg>
       <span class="omni-bottom-nav-label">Home</span>
     </a>
     <a href="/search" class="omni-bottom-nav-item">
       <svg class="omni-bottom-nav-icon">...</svg>
       <span class="omni-bottom-nav-label">Search</span>
     </a>
   </nav>

   Material Design 3 specs:
   - Height: 56px (80px with safe area)
   - Icon: 24x24px
   - Touch target: 48x48px minimum
   - 3-5 items max
   ============================================================================= */

/* Base bottom nav - fixed to bottom, full width */
:where(.omni-bottom-nav) {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--omni-z-sticky);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  min-block-size: 56px;
  padding-block-end: env(safe-area-inset-bottom, 0);
  background: var(--omni-color-surface);
  border-block-start: var(--omni-border-width) solid var(--omni-color-border);
  box-shadow: var(--omni-shadow-lg);
}

/* Position variants */
:where(.omni-bottom-nav[data-position="sticky"]) {
  position: sticky;
}

/* Nav item - touch target and layout */
:where(.omni-bottom-nav-item) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--omni-space-1);
  flex: 1;
  min-inline-size: 80px;
  max-inline-size: 168px;
  min-block-size: 48px;
  padding: var(--omni-space-2) var(--omni-space-3);
  color: var(--omni-color-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: var(--omni-transition);
  -webkit-tap-highlight-color: transparent;
}

/* Hover state */
:where(.omni-bottom-nav-item):hover {
  color: var(--omni-color-text);
  background: var(--omni-color-surface-alt);
}

/* Active/current page state */
:where(.omni-bottom-nav-item[aria-current="page"]),
:where(.omni-bottom-nav-item[data-active]) {
  color: var(--omni-color-primary);
}


/* Icon styling */
:where(.omni-bottom-nav-icon) {
  inline-size: 24px;
  block-size: 24px;
  flex-shrink: 0;
}

/* Label styling */
:where(.omni-bottom-nav-label) {
  font-size: var(--omni-text-xs);
  font-weight: var(--omni-font-medium);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 100%;
}

/* Active label is slightly bolder */
:where(.omni-bottom-nav-item[aria-current="page"]) .omni-bottom-nav-label,
:where(.omni-bottom-nav-item[data-active]) .omni-bottom-nav-label {
  font-weight: var(--omni-font-semibold);
}

/* Icons-only variant - hide labels */
:where(.omni-bottom-nav[data-variant="icons-only"]) .omni-bottom-nav-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icons-only: adjust item padding */
:where(.omni-bottom-nav[data-variant="icons-only"]) .omni-bottom-nav-item {
  padding-block: var(--omni-space-3);
}

/* Badge support - position badge on icon */
:where(.omni-bottom-nav-item) {
  position: relative; /* For badge positioning */
}

:where(.omni-bottom-nav-item) .omni-badge {
  position: absolute;
  inset-block-start: var(--omni-space-1);
  inset-inline-start: calc(50% + 4px);
  transform: translateX(-50%);
}

/* Hide on desktop - use sidebar/navbar instead */
@media (width > 768px) {
  :where(.omni-bottom-nav) {
    display: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-bottom-nav-item) {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  :where(.omni-bottom-nav) {
    border-block-start-width: 2px;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI GRID SYSTEM - NUCLEAR POSTCSS EDITION
 * Pure CSS Grid foundation - no JavaScript required
 * ============================================================================= */

/* =============================================================================
 * SIMPLE GRID UTILITIES
 * Basic column layouts that just work
 * ============================================================================= */

:where(.omni-grid) {
  display: grid;
  gap: var(--omni-space-4);
}

/* Equal column layouts - each works standalone */
:where(.omni-grid-2) {
  display: grid;
  gap: var(--omni-space-4);
  grid-template-columns: repeat(2, 1fr);

  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    grid-template-columns: 1fr;
  }
}

:where(.omni-grid-3) {
  display: grid;
  gap: var(--omni-space-4);
  grid-template-columns: repeat(3, 1fr);

  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    grid-template-columns: 1fr;
  }
}

:where(.omni-grid-4) {
  display: grid;
  gap: var(--omni-space-4);
  grid-template-columns: repeat(4, 1fr);

  @media (width <= calc(var(--omni-breakpoint-lg) - 1px)) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    grid-template-columns: 1fr;
  }
}

/* Auto-fit responsive grid */
:where(.omni-grid-auto) {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--omni-grid-min-width), 100%), 1fr));
}

/* Common app layouts */
:where(.omni-grid-sidebar) {
  grid-template-columns: var(--omni-sidebar-width) 1fr;
  gap: var(--omni-space-6);
  
  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    grid-template-columns: 1fr;
  }
}

:where(.omni-grid-header) {
  grid-template-rows: auto 1fr;
  min-block-size: 100vh;
}

/* Gap utilities */
:where(.omni-grid-gap-0) { gap: 0; }
:where(.omni-grid-gap-2) { gap: var(--omni-space-2); }
:where(.omni-grid-gap-4) { gap: var(--omni-space-4); }
:where(.omni-grid-gap-6) { gap: var(--omni-space-6); }

/* =============================================================================
 * BENTO GRID SYSTEM
 * Advanced layouts with flexible item sizing
 * ============================================================================= */

:where(.omni-bento-grid) {
  --omni-bento-columns: 12;
  --omni-bento-gap: var(--omni-space-4);

  display: grid;
  grid-template-columns: repeat(var(--omni-bento-columns), 1fr);
  grid-auto-flow: dense; /* Fill gaps intelligently */
  gap: var(--omni-bento-gap);

  /* Container query support - widgets respond to grid size, not viewport */
  container-type: inline-size;
  container-name: bento;

  /* Responsive column reduction */
  @media (width <= calc(var(--omni-breakpoint-lg) - 1px)) {
    --omni-bento-columns: 8;
  }

  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    --omni-bento-columns: 4;
    --omni-bento-gap: var(--omni-space-3);
  }

  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    --omni-bento-columns: 2;
    --omni-bento-gap: var(--omni-space-2);
  }
}

/* =============================================================================
 * MAGAZINE LAYOUT
 * Editorial layout with featured content
 * ============================================================================= */

:where(.omni-bento-grid-magazine) {
  grid-auto-rows: minmax(120px, auto);
}

/* Feature patterns for visual interest */
:where(.omni-bento-grid-magazine) > :first-child {
  grid-row: span 2;
  grid-column: span 6;
  
  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    grid-column: span 4;
  }
  
  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    grid-row: span 1;
    grid-column: span 2;
  }
}

/* Secondary features */
:where(.omni-bento-grid-magazine) > :nth-child(2),
:where(.omni-bento-grid-magazine) > :nth-child(3) {
  grid-column: span 3;
  
  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    grid-column: span 2;
  }
}

/* =============================================================================
 * MASONRY LAYOUT
 * Pinterest-style with CSS columns (not grid)
 * ============================================================================= */

:where(.omni-bento-grid-masonry) {
  display: block;
  column-count: 4;
  column-gap: var(--omni-space-4);
  
  @media (width <= calc(var(--omni-breakpoint-lg) - 1px)) {
    column-count: 3;
  }
  
  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    column-count: 2;
    column-gap: var(--omni-space-3);
  }
  
  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    column-count: 1;
  }
}

:where(.omni-bento-grid-masonry) > * {
  display: inline-block;
  inline-size: 100%;
  margin-block-end: var(--omni-space-4);
  break-inside: avoid;
  
  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    margin-block-end: var(--omni-space-3);
  }
}

/* =============================================================================
 * BENTO ITEMS
 * Grid items with span utilities
 * ============================================================================= */

:where(.omni-bento-item) {
  /* Default span - reduces on smaller screens */
  grid-column: span 3;

  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    grid-column: span 2;
  }
}

/* Simple span utilities (responsive) */
:where(.omni-bento-span-2) {
  grid-column: span 2;
}

:where(.omni-bento-span-3) {
  grid-column: span 3;
  
  @media (width <= calc(var(--omni-breakpoint-md) - 1px)) {
    grid-column: span 2;
  }
}

:where(.omni-bento-span-4) {
  grid-column: span 4;

  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    grid-column: span 2;
  }
}

:where(.omni-bento-span-6) {
  grid-column: span 6;

  @media (width <= calc(var(--omni-breakpoint-lg) - 1px)) {
    grid-column: span 4;
  }

  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    grid-column: span 2;
  }
}

:where(.omni-bento-span-8) {
  grid-column: span 8;

  @media (width <= calc(var(--omni-breakpoint-lg) - 1px)) {
    grid-column: span 4;
  }

  @media (width <= calc(var(--omni-breakpoint-sm) - 1px)) {
    grid-column: span 2;
  }
}

:where(.omni-bento-span-full) {
  grid-column: 1 / -1;
}

/* Row spans */
:where(.omni-bento-row-2) {
  grid-row: span 2;
}

:where(.omni-bento-row-3) {
  grid-row: span 3;
}

/* =============================================================================
 * ROW HEIGHT UTILITIES
 * Control grid-auto-rows behavior
 * ============================================================================= */

:where(.omni-bento-rows-auto) {
  grid-auto-rows: minmax(120px, auto);
}

:where(.omni-bento-rows-fixed) {
  grid-auto-rows: 192px;
}

:where(.omni-bento-rows-sm) {
  grid-auto-rows: 120px;
}

:where(.omni-bento-rows-lg) {
  grid-auto-rows: 240px;
}

:where(.omni-bento-rows-equal) {
  grid-auto-rows: 1fr;
}

/* =============================================================================
 * GAP UTILITIES
 * Granular gap control including separate row/column gaps
 * ============================================================================= */

:where(.omni-bento-gap-0) { gap: 0; }
:where(.omni-bento-gap-2) { gap: var(--omni-space-2); }
:where(.omni-bento-gap-3) { gap: var(--omni-space-3); }
:where(.omni-bento-gap-4) { gap: var(--omni-space-4); }
:where(.omni-bento-gap-6) { gap: var(--omni-space-6); }

/* Separate row/column gaps */
:where(.omni-bento-row-gap-2) { row-gap: var(--omni-space-2); }
:where(.omni-bento-row-gap-4) { row-gap: var(--omni-space-4); }
:where(.omni-bento-row-gap-6) { row-gap: var(--omni-space-6); }

:where(.omni-bento-col-gap-2) { column-gap: var(--omni-space-2); }
:where(.omni-bento-col-gap-4) { column-gap: var(--omni-space-4); }
:where(.omni-bento-col-gap-6) { column-gap: var(--omni-space-6); }

/* =============================================================================
 * BENTO ITEM INTERACTIONS
 * Hover effects and transitions for interactive bento grids
 * Note: Base .omni-bento-item defined above in BENTO ITEMS section
 * ============================================================================= */

:where(.omni-bento-item[data-interactive]) {
  transition:
    transform var(--omni-transition),
    box-shadow var(--omni-transition);
}

:where(.omni-bento-item[data-interactive]:hover) {
  transform: translateY(-2px);
  box-shadow: var(--omni-shadow-md);
}

:where(.omni-bento-item[data-interactive]:active) {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  :where(.omni-bento-item[data-interactive]) {
    transition: none;
  }

  :where(.omni-bento-item[data-interactive]:hover),
  :where(.omni-bento-item[data-interactive]:active) {
    transform: none;
  }
}

/* =============================================================================
 * DYNAMIC LAYOUTS WITH :has()
 * Opt-in auto-adaptation based on content count
 * Use data-auto-layout="true" to enable
 * ============================================================================= */

/* When grid has 1-3 items, use auto-fit for better distribution */
:where(.omni-bento-grid[data-auto-layout]:has(> :nth-child(1)):not(:has(> :nth-child(4)))) {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* When grid has 4-6 items, use tighter rows */
:where(.omni-bento-grid[data-auto-layout]:has(> :nth-child(4)):not(:has(> :nth-child(7)))) {
  grid-auto-rows: minmax(160px, auto);
}

/* When grid has 7+ items, allow more compact layout */
:where(.omni-bento-grid[data-auto-layout]:has(> :nth-child(7))) {
  grid-auto-rows: minmax(140px, auto);
}

/* =============================================================================
 * CONTAINER QUERY RESPONSIVE ITEMS
 * Items respond to bento container size, not viewport
 * ============================================================================= */

@container bento (max-width: 600px) {
  :where(.omni-bento-item:not(.omni-bento-span-full)) {
    grid-column: span 2;
  }
}

@container bento (max-width: 400px) {
  :where(.omni-bento-item) {
    grid-column: 1 / -1;
  }
}

/* =============================================================================
 * ASPECT RATIOS
 * For consistent media sizing
 * ============================================================================= */

:where(.omni-aspect-square) {
  aspect-ratio: 1;
}

:where(.omni-aspect-video) {
  aspect-ratio: 16 / 9;
}

:where(.omni-aspect-portrait) {
  aspect-ratio: 3 / 4;
}

:where(.omni-aspect-landscape) {
  aspect-ratio: 4 / 3;
}

/* =============================================================================
 * ALIGNMENT UTILITIES
 * ============================================================================= */

:where(.omni-grid-center) {
  place-items: center;
}

:where(.omni-grid-start) {
  place-items: start;
}

:where(.omni-grid-stretch) {
  place-items: stretch;
}
}
@layer omniui.components{

/*
 * OMNIUI BREADCRUMB - NUCLEAR DATA VARIANT EDITION
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Breadcrumbs MUST be wrapped in <nav> with aria-label.
 * Current page MUST use aria-current="page".
 *
 * USAGE:
 * <nav aria-label="Breadcrumb">
 *   <ol class="omni-breadcrumb" data-separator="chevron">
 *     <li class="omni-breadcrumb-item">
 *       <a class="omni-breadcrumb-link" href="/">Home</a>
 *     </li>
 *     <li class="omni-breadcrumb-item">
 *       <a class="omni-breadcrumb-link" href="/products">Products</a>
 *     </li>
 *     <li class="omni-breadcrumb-item" aria-current="page">Current Page</li>
 *   </ol>
 * </nav>
 */

:where(.omni-breadcrumb) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  margin: 0;
  font-size: var(--omni-variant-font-size);
  list-style: none;
}

:where(.omni-breadcrumb-item) {
  display: flex;
  align-items: center;
}

:where(.omni-breadcrumb-item):not(:last-child)::after {
  margin: 0 var(--omni-variant-spacing);
  color: var(--omni-color-text-muted);
  content: var(--omni-variant-separator);
}

:where(.omni-breadcrumb-item[data-state="active"]),
:where(.omni-breadcrumb-item[aria-current="page"]) {
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-text);
}

:where(.omni-breadcrumb-link) {
  color: var(--omni-variant-link-color);
  text-decoration: none;
}

:where(.omni-breadcrumb-link):hover {
  text-decoration: underline;
}

:where(.omni-breadcrumb):not([data-separator]) {
  --omni-variant-separator: '/';
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-spacing: var(--omni-space-2);
  --omni-variant-link-color: var(--omni-color-link);
}

:where(.omni-breadcrumb[data-separator="chevron"]) {
  --omni-variant-separator: '›';
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-spacing: var(--omni-space-2);
  --omni-variant-link-color: var(--omni-color-link);
}

:where(.omni-breadcrumb[data-separator="arrow"]) {
  --omni-variant-separator: '→';
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-spacing: var(--omni-space-2);
  --omni-variant-link-color: var(--omni-color-link);
}

:where(.omni-breadcrumb[data-size="xs"]) {
  --omni-variant-font-size: var(--omni-text-xs);
  --omni-variant-spacing: var(--omni-space-1);
  --omni-variant-link-color: var(--omni-color-link);
}

:where(.omni-breadcrumb[data-size="lg"]) {
  --omni-variant-font-size: var(--omni-text-lg);
  --omni-variant-spacing: var(--omni-space-3);
  --omni-variant-link-color: var(--omni-color-link);
}

@media (width <= 40rem) {
  :where(.omni-breadcrumb) {
    --omni-variant-font-size: var(--omni-text-xs);
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI BUTTON - LEAN & RESILIENT
 * Works by default, enhances with data attributes
 * =============================================================================
 *
 * USAGE:
 * <button class="omni-button">Default Button</button>
 * <button class="omni-button" data-variant="primary">Primary</button>
 * <button class="omni-button" data-variant="danger" data-variant-style="outline">Cancel</button>
 * <button class="omni-button" data-variant="success" data-size="lg">Save</button>
 * <button class="omni-button" data-type="icon">🔍</button>
 * ============================================================================= */

/* Base button - Works by default, enhances with variants */
.omni-button {
  /* Layout with sensible defaults */
  position: relative;
  display: inline-flex;
  gap: var(--omni-variant-gap, var(--omni-space-2));
  align-items: center;
  justify-content: center;
  inline-size: var(--omni-variant-width, auto);
  block-size: var(--omni-variant-height, var(--omni-space-10));
  padding-block: 0;
  padding-inline: var(--omni-variant-padding-x, var(--omni-space-4));
  
  /* Typography with defaults */
  font-family: inherit;
  font-size: var(--omni-variant-font-size, var(--omni-font-sm));
  font-weight: var(--omni-font-medium);
  line-height: 1;
  color: var(--omni-variant-style-text, var(--omni-color-text));
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: var(--omni-variant-pointer-events, auto);
  
  /* Interaction states */
  cursor: var(--omni-variant-cursor, pointer);
  user-select: none;

  /* Colors with sensible defaults */
  background: var(--omni-variant-style-bg, var(--omni-color-surface));
  border: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
  
  /* Fixed properties */
  border-radius: var(--omni-radius-md);
  opacity: var(--omni-variant-opacity, 1);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

/* Interactive states */
.omni-button:hover:not(:disabled, [data-state="disabled"], [data-state="loading"]) {
  background: var(--omni-variant-style-hover-bg, var(--omni-color-surface-alt));
  box-shadow: var(--omni-shadow-sm);
}

.omni-button:active:not(:disabled, [data-state="disabled"], [data-state="loading"]) {
  box-shadow: none;
}

/* Disabled state styling for HTML disabled attribute */
.omni-button:disabled {
  opacity: var(--omni-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state - add padding for spinner */
.omni-button[data-state="loading"] {
  padding-inline-start: calc(var(--omni-variant-padding-x) + 1.5em);
}

/* Loading state spinner */
.omni-button[data-state="loading"]::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--omni-variant-padding-x);
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid transparent;
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: omni-spin 0.6s linear infinite;
}

/* Focus handled by global utility or variant system */
.omni-button:focus-visible {
  outline: none;
  box-shadow: var(--omni-variant-focus-ring);
}

/* Disabled state handled by global utility */

/* Icon sizing handled by global utility */


/* ===== ICON BUTTONS ===== */

/* Square button for icons only */

:where(.omni-button[data-type="icon"]) {
  inline-size: var(--omni-variant-height);
  padding-inline: 0;
}

/* Default variant - REQUIRED for component to work without data attributes */
:where(.omni-button):not([data-variant]) {
  --omni-variant-bg: var(--omni-color-secondary);
  --omni-variant-text: var(--omni-color-secondary-text);
  --omni-variant-border: var(--omni-color-secondary);
  --omni-variant-style-bg: var(--omni-variant-bg);
  --omni-variant-style-text: var(--omni-variant-text);
  --omni-variant-style-border: var(--omni-variant-border);
  --omni-variant-style-hover-bg: var(--omni-variant-bg);
}

/* Default size - REQUIRED for component to work without data attributes */
:where(.omni-button):not([data-size]) {
  --omni-variant-height: var(--omni-input-height);
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-gap: var(--omni-space-2);
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI BUTTON GROUP - NUCLEAR CSS
   Data attributes: data-orientation (horizontal/vertical)
   ============================================================================= */

/* Base button group */
:where(.omni-button-group) {
  display: inline-flex;
  vertical-align: middle;
}

/* Direct children handling */
:where(.omni-button-group) > :where(.omni-button) {
  position: relative;
  flex: 1 1 auto;
}

/* Remove radius between buttons - horizontal */
:where(.omni-button-group) > :where(.omni-button):not(:first-child) {
  margin-inline-start: calc(var(--omni-border-width) * -1);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

:where(.omni-button-group) > :where(.omni-button):not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Z-index for interactive states */
:where(.omni-button-group) > :where(.omni-button):is(:focus, :active, :hover) {
  z-index: 1;
}

/* Vertical orientation */
:where(.omni-button-group[data-orientation="vertical"]) {
  flex-direction: column;
  align-items: stretch;
}

:where(.omni-button-group[data-orientation="vertical"]) > :where(.omni-button) {
  inline-size: 100%;
}

/* Remove radius between buttons - vertical */
:where(.omni-button-group[data-orientation="vertical"]) > :where(.omni-button):not(:first-child) {
  margin-block-start: calc(var(--omni-border-width) * -1);
  margin-inline-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

:where(.omni-button-group[data-orientation="vertical"]) > :where(.omni-button):not(:last-child) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI CARD - LEAN & FLEXIBLE
 * Works by default, enhances with data attributes
 * =============================================================================
 *
 * USAGE:
 * <div class="omni-card">Default card</div>
 * <div class="omni-card" data-variant="primary">Primary card</div>
 * <div class="omni-card" data-variant="danger" data-variant-style="outline">Outlined danger card</div>
 * <div class="omni-card" data-hover="true">Hoverable card</div>
 * <div class="omni-card" data-elevation="none">Flat card (no shadow)</div>
 * ============================================================================= */

/* Base card - Works by default, enhances with variants */
:where(.omni-card) {
  display: block;
  padding: var(--omni-variant-padding, var(--omni-space-6));
  color: var(--omni-variant-style-text, var(--omni-color-text));
  background: var(--omni-variant-style-bg, var(--omni-color-surface));
  border: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
  border-radius: var(--omni-radius-lg);
  box-shadow: var(--omni-shadow-sm);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;

  /* Remove default margins from common elements */
  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }
}

/* Hover effect with data attribute */
:where(.omni-card[data-hover="true"]):hover {
  box-shadow: var(--omni-shadow-md);
  transform: translateY(-2px);
}

/* Card sections (optional for complex layouts) */
:where(.omni-card-header) {
  padding: var(--omni-variant-padding);
  margin: calc(var(--omni-variant-padding) * -1);
  margin-block-end: var(--omni-variant-padding);
  border-block-end: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
  border-radius: var(--omni-radius-lg) var(--omni-radius-lg) 0 0;
}

:where(.omni-card-footer) {
  padding: var(--omni-variant-padding);
  margin: calc(var(--omni-variant-padding) * -1);
  margin-block-start: var(--omni-variant-padding);
  background: color-mix(in sRGB, var(--omni-variant-style-bg, var(--omni-color-surface)) 95%, var(--omni-color-overlay));
  border-block-start: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
  border-radius: 0 0 var(--omni-radius-lg) var(--omni-radius-lg);
}

/* Card actions */
:where(.omni-card-actions) {
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
  margin-block-start: var(--omni-space-4);
}

:where(.omni-card-footer .omni-card-actions) {
  margin-block-start: 0;
}

/* Semantic elements - use .omni-card (not :where) to beat browser defaults */
.omni-card h1,
.omni-card h2,
.omni-card h3,
.omni-card h4 {
  margin-block-start: 0;
  margin-block-end: var(--omni-space-3);
}

:where(.omni-card) p {
  margin-block-end: var(--omni-space-3);
}

:where(.omni-card) p:last-child {
  margin-block-end: 0;
}

/* Elevation control (card-specific) */
:where(.omni-card[data-elevation="none"]) {
  box-shadow: none;
}

/* Default padding - one size, developers can override */
:where(.omni-card) {
  --omni-variant-padding: var(--omni-space-6);
}

/* Size variants */
:where(.omni-card[data-size="sm"]) {
  --omni-variant-padding: var(--omni-space-4);
}

:where(.omni-card[data-size="lg"]) {
  --omni-variant-padding: var(--omni-space-8);
}

/* Layout modifiers */
:where(.omni-card[data-layout="horizontal"]) {
  display: flex;
  gap: var(--omni-variant-padding);
}

/* Clickable cards */
:where(a.omni-card),
:where(button.omni-card) {
  display: block;
  inline-size: 100%;
  color: var(--omni-variant-style-text, var(--omni-color-text));
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}

:where(a.omni-card):hover,
:where(button.omni-card):hover {
  box-shadow: var(--omni-shadow-md);
  transform: translateY(-2px);
}

/* Focus states for clickable cards */
:where(a.omni-card):focus-visible,
:where(button.omni-card):focus-visible {
  outline: none;
  box-shadow: var(--omni-variant-focus-ring, 0 0 0 3px color-mix(in srgb, var(--omni-color-primary) 30%, transparent));
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-card) {
    transition: none;
  }

  :where(.omni-card[data-hover="true"]):hover,
  :where(a.omni-card):hover,
  :where(button.omni-card):hover {
    transform: none;
  }
}

/* Responsive adjustments */
@media (width <= 640px) {
  :where(.omni-card[data-layout="horizontal"]) {
    flex-direction: column;
  }
}

/* =============================================================================
 * SELECTABLE CARDS (Radio/Checkbox Pattern)
 * Pure CSS selection using hidden inputs and :checked pseudo-class
 *
 * Usage:
 *   <label class="omni-card" data-selectable>
 *     <input type="radio" name="plan" value="basic" hidden>
 *     <span>Basic Plan</span>
 *   </label>
 * ============================================================================= */

/* Selectable card wrapper */
:where(.omni-card[data-selectable]) {
  cursor: pointer;
  user-select: none;
}

/* Selected state */
:where(.omni-card[data-selectable]:has(input:checked)) {
  border-color: var(--omni-color-primary);
  box-shadow: 0 0 0 2px var(--omni-color-primary);
}

/* Hover state (when not selected) */
:where(.omni-card[data-selectable]:not(:has(input:checked))):hover {
  border-color: var(--omni-color-primary);
}

/* Disabled state */
:where(.omni-card[data-selectable]:has(input:disabled)) {
  opacity: var(--omni-opacity-disabled);
  cursor: not-allowed;
}

/* Focus state for keyboard navigation */
:where(.omni-card[data-selectable]:has(input:focus-visible)) {
  outline: none;
  box-shadow: var(--omni-variant-focus-ring, 0 0 0 3px color-mix(in srgb, var(--omni-color-primary) 30%, transparent));
}

/* Selected + focus state */
:where(.omni-card[data-selectable]:has(input:checked:focus-visible)) {
  box-shadow: 0 0 0 2px var(--omni-color-primary), 0 0 0 4px color-mix(in srgb, var(--omni-color-primary) 30%, transparent);
}

/* Image cards - NO :where() to beat reset's max-width: 100% */
/* Exclude horizontal layouts - images should sit alongside content there */
.omni-card:not([data-layout="horizontal"]) > img:first-child,
.omni-card:not([data-layout="horizontal"]) > picture:first-child > img,
.omni-card:not([data-layout="horizontal"]) > video:first-child,
.omni-card:not([data-layout="horizontal"]) > iframe:first-child {
  inline-size: calc(100% + var(--omni-variant-padding) * 2);
  max-inline-size: none; /* Override reset's max-width: 100% */
  margin: calc(var(--omni-variant-padding) * -1);
  margin-block-end: var(--omni-variant-padding);
  object-fit: cover;
  border-radius: var(--omni-radius-lg) var(--omni-radius-lg) 0 0;
}

/* Horizontal layout images - contained, not edge-to-edge */
.omni-card[data-layout="horizontal"] > img:first-child {
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--omni-radius-md);
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI CHECKBOX & RADIO
 * Native inputs with custom styling. Uses data-size, data-variant
 * =============================================================================
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Checkboxes/radios MUST have associated labels. Use wrapper <label> pattern:
 *
 *   <label class="omni-checkbox">
 *     <input type="checkbox" name="terms">
 *     <span>I agree to terms</span>
 *   </label>
 *
 * Radio group (use fieldset + legend):
 *   <fieldset>
 *     <legend>Preferred contact method</legend>
 *     <label class="omni-radio">
 *       <input type="radio" name="contact" value="email">
 *       <span>Email</span>
 *     </label>
 *     <label class="omni-radio">
 *       <input type="radio" name="contact" value="phone">
 *       <span>Phone</span>
 *     </label>
 *   </fieldset>
 *
 * Required checkbox:
 *   <label class="omni-checkbox">
 *     <input type="checkbox" name="terms" required aria-required="true">
 *     <span>I agree <span aria-hidden="true">*</span></span>
 *   </label>
 *
 * ============================================================================= */

/* Base wrapper */
:where(.omni-checkbox),
:where(.omni-radio) {
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
  cursor: pointer;
}

:where(.omni-checkbox:has(input:disabled)),
:where(.omni-radio:has(input:disabled)) {
  cursor: not-allowed;
}

/* Base input styling */
:where(.omni-checkbox input[type="checkbox"]),
:where(.omni-radio input[type="radio"]) {
  position: relative;
  width: var(--omni-variant-size, 1.25rem);  /* 20px default */
  height: var(--omni-variant-size, 1.25rem);
  appearance: none;
  cursor: pointer;
  background: var(--omni-color-background);
  border: 2px solid var(--omni-color-text-muted);
  transition: all var(--omni-transition);
  flex-shrink: 0;
}

:where(.omni-checkbox input[type="checkbox"]:hover:not(:disabled)),
:where(.omni-radio input[type="radio"]:hover:not(:disabled)) {
  border-color: var(--omni-color-primary);
}

:where(.omni-checkbox input[type="checkbox"]:disabled),
:where(.omni-radio input[type="radio"]:disabled) {
  opacity: var(--omni-opacity-disabled);
  cursor: not-allowed;
}

:where(.omni-checkbox input[type="checkbox"]:checked),
:where(.omni-radio input[type="radio"]:checked) {
  background: var(--omni-variant-bg, var(--omni-color-primary));
  border-color: var(--omni-variant-border, var(--omni-color-primary));
}

/* Checkbox specific */
:where(.omni-checkbox input[type="checkbox"]) {
  border-radius: var(--omni-radius-sm);
}

:where(.omni-checkbox input[type="checkbox"]:checked)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

:where(.omni-checkbox input[type="checkbox"]:indeterminate) {
  background: var(--omni-variant-bg, var(--omni-color-primary));
  border-color: var(--omni-variant-border, var(--omni-color-primary));
}

:where(.omni-checkbox input[type="checkbox"]:indeterminate)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  background: white;
  transform: translate(-50%, -50%);
}

/* Radio specific */
:where(.omni-radio input[type="radio"]) {
  border-radius: 50%;
}

:where(.omni-radio input[type="radio"]:checked) {
  background-image: radial-gradient(circle, white 25%, transparent 25%);
}

/* Size variants */
:where(.omni-checkbox[data-size="sm"]) input[type="checkbox"],
:where(.omni-radio[data-size="sm"]) input[type="radio"] {
  width: 1rem;  /* 16px */
  height: 1rem;
}

:where(.omni-radio[data-size="sm"]) input[type="radio"]:checked {
  background-image: radial-gradient(circle, white 20%, transparent 20%);
}

:where(.omni-checkbox[data-size="sm"]) input[type="checkbox"]:checked::after {
  width: 4px;
  height: 8px;
}

:where(.omni-checkbox[data-size="lg"]) input[type="checkbox"],
:where(.omni-radio[data-size="lg"]) input[type="radio"] {
  width: 1.5rem;  /* 24px */
  height: 1.5rem;
}

:where(.omni-radio[data-size="lg"]) input[type="radio"]:checked {
  background-image: radial-gradient(circle, white 30%, transparent 30%);
}

:where(.omni-checkbox[data-size="lg"]) input[type="checkbox"]:checked::after {
  width: 6px;
  height: 12px;
}

:where(.omni-checkbox[data-size="sm"]) input[type="checkbox"]:indeterminate::after {
  width: 8px;
  height: 2px;
}

:where(.omni-checkbox[data-size="lg"]) input[type="checkbox"]:indeterminate::after {
  width: 12px;
  height: 2px;
}

/* =============================================================================
 * VALIDATION STATES
 * ============================================================================= */

/* Required but not checked - shows invalid state */
:where(.omni-checkbox input[type="checkbox"]:required:invalid),
:where(.omni-radio input[type="radio"]:required:invalid) {
  border-color: var(--omni-color-danger);
}

:where(.omni-checkbox input[type="checkbox"]:required:invalid:hover),
:where(.omni-radio input[type="radio"]:required:invalid:hover) {
  border-color: var(--omni-color-danger-text);
}

/* Focus ring for invalid state */
:where(.omni-checkbox input[type="checkbox"]:required:invalid:focus-visible),
:where(.omni-radio input[type="radio"]:required:invalid:focus-visible) {
  outline: 2px solid var(--omni-color-danger);
  outline-offset: 2px;
}

/* =============================================================================
 * READONLY STATE
 * ============================================================================= */

/* Readonly: visible but not interactive */
:where(.omni-checkbox:has(input[readonly])),
:where(.omni-radio:has(input[readonly])) {
  cursor: default;
}

:where(.omni-checkbox input[type="checkbox"][readonly]),
:where(.omni-radio input[type="radio"][readonly]) {
  cursor: default;
  pointer-events: none;
  opacity: 0.7;
}

/* Checked readonly should still show the check/dot clearly */
:where(.omni-checkbox input[type="checkbox"][readonly]:checked),
:where(.omni-radio input[type="radio"][readonly]:checked) {
  opacity: 0.85;
}

/* =============================================================================
 * GROUP LAYOUTS
 * ============================================================================= */

/* Checkbox/radio group container */
:where(.omni-checkbox-group),
:where(.omni-radio-group) {
  display: flex;
  flex-direction: column;
  gap: var(--omni-space-2);
}

/* Horizontal layout */
:where(.omni-checkbox-group[data-layout="horizontal"]),
:where(.omni-radio-group[data-layout="horizontal"]) {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--omni-space-4);
}

/* Fieldset reset when used as group container */
:where(fieldset.omni-checkbox-group),
:where(fieldset.omni-radio-group) {
  border: none;
  padding: 0;
  margin: 0;
}

/*
 * USAGE:
 * <label class="omni-checkbox" data-size="sm">
 *   <input type="checkbox" name="agree">
 *   <span>I agree to terms</span>
 * </label>
 *
 * <label class="omni-radio" data-variant="danger">
 *   <input type="radio" name="option" value="1">
 *   <span>Option 1</span>
 * </label>
 *
 * Required checkbox (shows red border when unchecked):
 *   <label class="omni-checkbox">
 *     <input type="checkbox" name="terms" required>
 *     <span>I agree to terms *</span>
 *   </label>
 *
 * Readonly checkbox:
 *   <label class="omni-checkbox">
 *     <input type="checkbox" name="locked" checked readonly>
 *     <span>This option is locked</span>
 *   </label>
 *
 * Horizontal group:
 *   <div class="omni-checkbox-group" data-layout="horizontal">
 *     <label class="omni-checkbox">...</label>
 *     <label class="omni-checkbox">...</label>
 *   </div>
 *
 * Sizes: data-size (sm, md, lg)
 * Variants: data-variant (primary, success, danger, etc.)
 * Layouts: data-layout (horizontal) on group container
 */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI CODE BLOCK - NUCLEAR DATA VARIANT EDITION
 * Simple code display with data attributes for variants.
 * =============================================================================
 *
 * USAGE:
 * <div class="omni-code-block"><pre><code>console.log('hello');</code></pre></div>
 * <div class="omni-code-block" data-size="lg" data-header="true">
 *   <div class="omni-code-header">
 *     <span class="omni-code-filename">app.js</span>
 *     <div class="omni-code-actions">
 *       <button class="omni-copy omni-copy-sm" aria-label="Copy code">📋</button>
 *     </div>
 *   </div>
 *   <pre><code>console.log('hello');</code></pre>
 * </div>
 * <div class="omni-code-block" data-variant="primary" data-wrap="true">...</div>
 * <code class="omni-code-inline" data-variant="primary">inline code</code>
 * ============================================================================= */

/* Base code block - ONE default style, variant system for others */
:where(.omni-code-block) {
  position: relative;
  overflow: hidden;
  font-family: var(--omni-font-mono);
  font-size: var(--omni-variant-font-size, var(--omni-text-sm));
  line-height: 1.5;
  color: var(--omni-variant-style-text, var(--omni-color-text));
  background: var(--omni-variant-style-bg, var(--omni-color-surface-alt));
  border: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
  border-radius: var(--omni-radius-md);
}

:where(.omni-code-block) pre {
  padding: var(--omni-variant-padding, var(--omni-space-4));
  margin: 0;
  overflow: auto;
  color: inherit;
  tab-size: 2;
  white-space: pre;
  background: transparent;
}

:where(.omni-code-block) code {
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  border: none;
}

/* Code block with header */
:where(.omni-code-block[data-header="true"]) {
  .omni-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--omni-space-2) var(--omni-variant-padding, var(--omni-space-4));
    font-size: var(--omni-text-xs);
    color: color-mix(in sRGB, var(--omni-variant-style-text, var(--omni-color-text)) 70%, transparent);
    background: color-mix(in sRGB, var(--omni-variant-style-bg, var(--omni-color-surface-alt)) 95%, var(--omni-color-overlay));
    border-block-end: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
  }
  
  .omni-code-filename {
    font-weight: var(--omni-font-medium);
    color: var(--omni-variant-style-text, var(--omni-color-text));
  }
  
  .omni-code-actions {
    display: flex;
    gap: var(--omni-space-2);
  }
  
  pre {
    border-radius: 0;
  }
}

/* Inline code variant */
:where(.omni-code-inline) {
  padding: var(--omni-space-1) var(--omni-space-2);
  font-family: var(--omni-font-mono);
  font-size: var(--omni-text-xs);
  color: var(--omni-variant-style-text, var(--omni-color-text));
  background: var(--omni-variant-style-bg, var(--omni-color-surface-alt));
  border: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
  border-radius: var(--omni-radius-sm);
}

/* Text wrapping variant */
:where(.omni-code-block[data-wrap="true"]) pre {
  word-break: break-all;
  white-space: pre-wrap;
}

/* Scrollable overflow variant */
:where(.omni-code-block[data-overflow="scroll"]) { max-height: 400px; }

/* Mobile responsive - hardcoded breakpoint allowed */
@media (width <= 768px) {
  :where(.omni-code-block) {
    border-inline: none;
    border-radius: 0;
  }
  
  :where(.omni-code-block) pre {
    padding: var(--omni-space-3);
  }
  
  :where(.omni-code-block[data-header="true"]) .omni-code-header {
    padding: var(--omni-space-2) var(--omni-space-3);
  }
}

/* High contrast accessibility */
@media (prefers-contrast: high) {
  :where(.omni-code-block) {
    border-width: var(--omni-border-width-thick);
  }
  
  :where(.omni-code-block[data-header="true"]) .omni-code-header {
    border-block-end-width: var(--omni-border-width-thick);
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI COLOR INPUT - NUCLEAR DATA VARIANT EDITION
 * Native <input type="color"> with data-size support
 * ============================================================================= */

:where(.omni-color-input) {
  inline-size: var(--omni-variant-size, 3rem);
  block-size: var(--omni-variant-size, 3rem);
  padding: var(--omni-space-1);
  appearance: none;
  cursor: pointer;
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-variant-radius, var(--omni-radius));
  transition: border-color var(--omni-transition);
}

/* Size variants */
:where(.omni-color-input[data-size="sm"]) {
  --omni-variant-size: 2rem;
  --omni-variant-radius: var(--omni-radius-sm);
}

:where(.omni-color-input[data-size="lg"]) {
  --omni-variant-size: 4rem;
  --omni-variant-radius: var(--omni-radius-lg);
}

:where(.omni-color-input:hover:not(:disabled)) {
  border-color: var(--omni-color-primary);
}

:where(.omni-color-input:focus) {
  outline: none;
  border-color: var(--omni-color-primary);
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--omni-color-primary) 20%, transparent);
}

:where(.omni-color-input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Cross-browser swatch styling */
:where(.omni-color-input::-webkit-color-swatch-wrapper) {
  padding: 0;
  border: none;
  border-radius: calc(var(--omni-variant-radius) - var(--omni-space-1));
}

:where(.omni-color-input::-webkit-color-swatch) {
  border: none;
  border-radius: calc(var(--omni-variant-radius) - var(--omni-space-1));
}

:where(.omni-color-input::-moz-color-swatch) {
  border: none;
  border-radius: calc(var(--omni-variant-radius) - var(--omni-space-1));
}

/*
 * USAGE:
 * <input type="color" class="omni-color-input" data-size="md" value="#ff0000">
 * 
 * <input type="color" class="omni-color-input" data-size="lg" value="#3b82f6">
 * 
 * Sizes: data-size (sm, md, lg)
 * Uses variant system for consistent sizing across form inputs
 */
}
@layer omniui.components{

/* =============================================================================
   OMNIUI DIVIDER - NUCLEAR DATA VARIANT EDITION
   Clean visual separator. Supports data attributes for variants.
   =============================================================================

   USAGE:
   <hr class="omni-divider">
   <hr class="omni-divider" data-size="lg">
   <hr class="omni-divider" data-variant="primary">
   <div class="omni-divider" data-orientation="vertical"></div>
   ============================================================================= */

/* Base divider - ONE default spacing, variant system for others */
:where(.omni-divider) {
  display: block;
  inline-size: 100%;
  block-size: 0;
  margin-block: var(--omni-variant-gap, var(--omni-space-4));
  margin-inline: 0;
  border: 0;
  border-block-start: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
}

/* Vertical orientation */  
:where(.omni-divider[data-orientation="vertical"]) {
  display: inline-block;
  inline-size: 0;
  block-size: var(--omni-variant-height, 1.2em);
  margin-block: 0;
  margin-inline: var(--omni-variant-gap, var(--omni-space-3));
  vertical-align: middle;
  border-block-start: none;
  border-inline-start: 1px solid var(--omni-variant-style-border, var(--omni-color-border));
}

/* Mobile responsive - hardcoded breakpoint allowed */
@media (width <= 768px) {
  :where(.omni-divider[data-orientation="vertical"]) {
    display: none;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI EMPTY STATE - PLACEHOLDER FOR "NO CONTENT" STATES
 * Based on GitHub Primer "Blankslate" pattern
 * =============================================================================
 *
 * ANATOMY (per research):
 * 1. Graphic/Icon - decorative, aria-hidden="true"
 * 2. Primary Text (Title) - explains purpose
 * 3. Secondary Text (Description) - brief guidance
 * 4. Primary Action - button to initiate action
 * 5. Secondary Action - optional text link
 * 6. Border - optional, for structure
 *
 * TYPES:
 * - Information-focused: "Container is empty, not broken"
 * - Action-focused: Encourage user to fill space
 * - Celebration-focused: "Inbox zero" success states
 *
 * ACCESSIBILITY:
 * - Graphics are decorative → use aria-hidden="true"
 * - Use semantic headings (h2-h4) based on page structure
 * - Action buttons should have clear, descriptive labels
 *
 * USAGE:
 * <div class="omni-empty-state">
 *   <svg class="omni-empty-state-icon" aria-hidden="true">...</svg>
 *   <h3 class="omni-empty-state-title">No results found</h3>
 *   <p class="omni-empty-state-description">Try adjusting your search</p>
 *   <button class="omni-button" data-variant="primary">Clear filters</button>
 * </div>
 * ============================================================================= */

/* Base empty state - centered flex container */
:where(.omni-empty-state) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--omni-space-3);
  padding: var(--omni-variant-padding, var(--omni-space-8));
  text-align: center;
}

/* Graphic/Icon slot - decorative */
:where(.omni-empty-state-icon) {
  width: var(--omni-variant-icon-size, 4rem);
  height: var(--omni-variant-icon-size, 4rem);
  color: var(--omni-color-text-muted);
  opacity: 0.5;
}

/* Primary Text (Title) */
:where(.omni-empty-state-title) {
  margin: 0;
  font-size: var(--omni-variant-title-size, var(--omni-text-lg));
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
}

/* Secondary Text (Description) */
:where(.omni-empty-state-description) {
  margin: 0;
  max-width: 36ch;
  font-size: var(--omni-variant-text-size, var(--omni-text-base));
  color: var(--omni-color-text-muted);
  line-height: 1.5;
}

/* Actions container (primary + secondary) */
:where(.omni-empty-state-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omni-space-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--omni-space-2);
}

/* Direct button child also gets margin */
:where(.omni-empty-state) > .omni-button {
  margin-top: var(--omni-space-2);
}

/* Secondary action (text link below primary) */
:where(.omni-empty-state-link) {
  font-size: var(--omni-text-sm);
  color: var(--omni-color-link);
  text-decoration: none;
}

:where(.omni-empty-state-link):hover {
  text-decoration: underline;
}

/* =============================================================================
 * SIZE VARIANTS
 * ============================================================================= */

/* Small - for inline contexts (table cells, small cards) */
:where(.omni-empty-state[data-size="sm"]) {
  --omni-variant-padding: var(--omni-space-4);
  --omni-variant-icon-size: 2.5rem;
  --omni-variant-title-size: var(--omni-text-base);
  --omni-variant-text-size: var(--omni-text-sm);
  gap: var(--omni-space-2);
}

/* Large - for full-page empty states */
:where(.omni-empty-state[data-size="lg"]) {
  --omni-variant-padding: var(--omni-space-12);
  --omni-variant-icon-size: 6rem;
  --omni-variant-title-size: var(--omni-text-2xl);
  --omni-variant-text-size: var(--omni-text-lg);
  gap: var(--omni-space-4);
}

/* =============================================================================
 * BORDER VARIANT (optional structure)
 * ============================================================================= */

:where(.omni-empty-state[data-bordered]) {
  border: 2px dashed var(--omni-color-border);
  border-radius: var(--omni-radius-lg);
  background: var(--omni-color-surface);
}

/* =============================================================================
 * TYPE VARIANTS (semantic meaning)
 * ============================================================================= */

/* Error state - something went wrong */
:where(.omni-empty-state[data-variant="error"]) .omni-empty-state-icon {
  color: var(--omni-color-danger);
  opacity: 0.7;
}

/* Warning state - attention needed */
:where(.omni-empty-state[data-variant="warning"]) .omni-empty-state-icon {
  color: var(--omni-color-warning);
  opacity: 0.7;
}

/* Success/Celebration state - "inbox zero" */
:where(.omni-empty-state[data-variant="success"]) .omni-empty-state-icon {
  color: var(--omni-color-success);
  opacity: 0.7;
}

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */

@media (width <= 640px) {
  :where(.omni-empty-state:not([data-size])) {
    --omni-variant-padding: var(--omni-space-6);
    --omni-variant-icon-size: 3rem;
  }

  :where(.omni-empty-state[data-size="lg"]) {
    --omni-variant-padding: var(--omni-space-8);
    --omni-variant-icon-size: 4rem;
    --omni-variant-title-size: var(--omni-text-xl);
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI ENGAGE - LEAN SOCIAL INTERACTIONS
 * Bookmark, Like, Share - works by default, enhances with data attributes
 * ============================================================================= */

/* Base engage button with defaults */
:where(.omni-engage) {
  display: inline-flex;
  gap: var(--omni-variant-gap, var(--omni-space-2));
  align-items: center;
  justify-content: center;
  padding: var(--omni-variant-padding, var(--omni-space-2));
  font-size: var(--omni-variant-font-size, var(--omni-font-sm));
  font-weight: var(--omni-font-medium);
  color: var(--omni-variant-color, var(--omni-color-text));
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--omni-radius-md);
  transition: all var(--omni-transition);
}

/* Default variant values */
:where(.omni-engage):not([data-variant]) {
  --omni-variant-color: var(--omni-color-text);
  --omni-variant-hover-color: var(--omni-color-primary);
  --omni-variant-hover-bg: var(--omni-color-surface-alt);
  --omni-variant-hover-border: transparent;
  --omni-variant-active-color: var(--omni-color-primary);
  --omni-variant-active-bg: var(--omni-color-primary-text);
  --omni-variant-active-border: var(--omni-color-primary);
}

/* Hover state */
:where(.omni-engage:hover:not(:disabled)) {
  color: var(--omni-variant-hover-color, var(--omni-color-primary));
  background: var(--omni-variant-hover-bg, var(--omni-color-surface-alt));
  border-color: var(--omni-variant-hover-border, transparent);
}

/* Active/pressed state - just color change, icon fill handled separately */
:where(.omni-engage[data-active="true"]),
:where(.omni-engage[aria-pressed="true"]) {
  color: var(--omni-variant-active-color, var(--omni-color-primary));
}

/* Icon styling */
:where(.omni-engage svg) {
  inline-size: 1.25em;
  block-size: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: all var(--omni-transition);
}

/* Fill icon when active (for bookmark/like) */
:where(.omni-engage[data-action="bookmark"][data-active="true"] svg),
:where(.omni-engage[data-action="bookmark"][aria-pressed="true"] svg),
:where(.omni-engage[data-action="like"][data-active="true"] svg),
:where(.omni-engage[data-action="like"][aria-pressed="true"] svg) {
  fill: currentColor;
}

/* Optional text label */
:where(.omni-engage-text) {
  font-size: inherit;
  white-space: nowrap;
}

/* Optional count/metric */
:where(.omni-engage-count) {
  font-size: var(--omni-variant-count-size, var(--omni-font-sm));
  font-variant-numeric: tabular-nums;
  color: var(--omni-variant-count-color, var(--omni-color-text-muted));
}

/* Icon-only variant */
:where(.omni-engage[data-type="icon"]) {
  aspect-ratio: 1;
}

:where(.omni-engage[data-type="icon"] .omni-engage-text) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

/* Style variants */
:where(.omni-engage[data-style="solid"]) {
  --omni-variant-bg: var(--omni-color-surface-alt);
  --omni-variant-border: var(--omni-color-border);

  background: var(--omni-variant-bg);
  border-color: var(--omni-variant-border);
}

:where(.omni-engage[data-style="solid"]:hover:not(:disabled)) {
  --omni-variant-hover-bg: var(--omni-color-surface);
}

/* Loading state */
:where(.omni-engage[data-state="loading"]) {
  pointer-events: none;
  opacity: 0.7;
}

/* Success feedback (for share) */
:where(.omni-engage[data-state="success"]) {
  color: var(--omni-color-success);
  border-color: var(--omni-color-success);
}

/*
 * USAGE:
 * 
 * <!-- Bookmark -->
 * <button class="omni-engage" data-action="bookmark" data-active="true" aria-label="Bookmark">
 *   <svg>...</svg>
 *   <span class="omni-engage-text">Save</span>
 * </button>
 * 
 * <!-- Like with count -->
 * <button class="omni-engage" data-action="like" data-size="sm">
 *   <svg>...</svg>
 *   <span class="omni-engage-count">42</span>
 * </button>
 * 
 * <!-- Share -->
 * <button class="omni-engage" data-action="share" data-style="solid">
 *   <svg>...</svg>
 *   <span class="omni-engage-text">Share</span>
 * </button>
 * 
 * Actions: data-action (bookmark/like/share)
 * States: data-active="true", data-state (loading/success)
 * Variants: data-variant (primary/danger/etc)
 * Styles: data-style (default/solid)
 * Sizes: data-size (sm/md/lg)
 * 
 * JavaScript handles:
 * - Toggle states
 * - API calls
 * - Share API/fallbacks
 * - Success/error feedback
 */
}
@layer omniui.components{
/* =============================================================================
 * OMNIUI FAB - NUCLEAR DATA VARIANT EDITION
 * Floating button. Use data attributes or it doesn't float.
 * =============================================================================
 *
 * Base FAB - requires variant system */
:where(.omni-fab) {
  position: fixed;
  inset-block-end: var(--omni-space-4);
  inset-inline-end: var(--omni-space-4);
  z-index: var(--omni-z-modal);
  display: inline-flex;
  gap: var(--omni-variant-gap);
  align-items: center;
  justify-content: center;
  width: var(--omni-variant-height);
  height: var(--omni-variant-height);
  padding: 0;
  font-size: var(--omni-variant-font-size);
  font-weight: var(--omni-font-medium);
  color: var(--omni-variant-style-text);
  cursor: pointer;
  user-select: none;
  background: var(--omni-variant-style-bg);
  border: var(--omni-border-width-2) solid var(--omni-variant-style-border, transparent);
  border-radius: var(--omni-radius-full);
  box-shadow: var(--omni-shadow-lg);
  transition: var(--omni-transition);
  
  &:hover:not(:disabled, [data-state="disabled"], [data-state="loading"]) {
    box-shadow: var(--omni-shadow-xl);
    transform: scale(var(--omni-scale-105));
  }
  
  &:active:not(:disabled, [data-state="disabled"], [data-state="loading"]) {
    transform: scale(var(--omni-scale-95));
  }
}

/* Extended FAB (icon + text) */
:where(.omni-fab[data-extended="true"]) {
  width: auto;
  padding-inline: var(--omni-space-6);
}

/* Position variants */
:where(.omni-fab[data-position="top-right"]) {
  inset-block-start: var(--omni-space-4);
  inset-block-end: auto;
}

:where(.omni-fab[data-position="top-left"]) {
  inset-block-start: var(--omni-space-4);
  inset-block-end: auto;
  inset-inline-start: var(--omni-space-4);
  inset-inline-end: auto;
}

:where(.omni-fab[data-position="bottom-left"]) {
  inset-inline-start: var(--omni-space-4);
  inset-inline-end: auto;
}

/* Default variant and size - REQUIRED for component to work */
:where(.omni-fab):not([data-variant]) {
  --omni-variant-bg: var(--omni-color-primary);
  --omni-variant-text: var(--omni-color-primary-text);
  --omni-variant-style-bg: var(--omni-color-primary);
  --omni-variant-style-text: var(--omni-color-primary-text);
}

:where(.omni-fab):not([data-size]) {
  --omni-variant-height: calc(var(--omni-space-12) + var(--omni-space-2)); /* 3.5rem */
  --omni-variant-padding-x: 0;
  --omni-variant-font-size: var(--omni-text-xl);
  --omni-variant-gap: var(--omni-space-2);
}

/* Size variants */
:where(.omni-fab[data-size="sm"]) {
  --omni-variant-height: var(--omni-space-10); /* 2.5rem = 40px */
  --omni-variant-font-size: var(--omni-text-lg);
}

:where(.omni-fab[data-size="lg"]) {
  --omni-variant-height: var(--omni-space-24); /* 6rem = 96px */
  --omni-variant-font-size: var(--omni-text-3xl);
}

/* Focus state for keyboard navigation */
:where(.omni-fab):focus-visible {
  outline: none;
  box-shadow: var(--omni-shadow-lg),
    0 0 0 3px color-mix(in srgb, var(--omni-variant-style-bg) 30%, transparent);
}

/* Disabled state */
:where(.omni-fab:disabled),
:where(.omni-fab[data-state="disabled"]) {
  opacity: var(--omni-opacity-disabled);
  cursor: not-allowed;
  box-shadow: var(--omni-shadow-sm);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-fab) {
    transition: none;
  }

  :where(.omni-fab):hover:not(:disabled, [data-state="disabled"]),
  :where(.omni-fab):active:not(:disabled, [data-state="disabled"]) {
    transform: none;
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI FILE UPLOAD COMPONENT - NUCLEAR CSS
   Data attributes: data-size (compact)
   Clean CSS-only file upload styling - works without JavaScript
   ============================================================================= */

/* Native file input styling */
:where(.omni-file-input) input[type="file"] {
  inline-size: 100%;
  padding: var(--omni-space-3);
  font-family: var(--omni-font-sans);
  font-size: var(--omni-text-base);
  color: var(--omni-color-text);
  background: var(--omni-color-surface);
  border: var(--omni-border-width) solid var(--omni-color-border);
  border-radius: var(--omni-radius);
  transition: var(--omni-transition-colors);
}

:where(.omni-file-input) input[type="file"]:hover {
  border-color: var(--omni-color-primary);
}

/* Focus ring handled by global utility */
:where(.omni-file-input) input[type="file"]:focus {
  border-color: var(--omni-color-primary);
}

/* Style the file selector button */
:where(.omni-file-input) input[type="file"]::file-selector-button {
  padding: var(--omni-space-2) var(--omni-space-4);
  margin-inline-end: var(--omni-space-3);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-primary-text);
  cursor: pointer;
  background: var(--omni-color-primary);
  border: none;
  border-radius: var(--omni-radius);
  transition: var(--omni-transition-colors);
}

:where(.omni-file-input) input[type="file"]::file-selector-button:hover {
  background: var(--omni-color-link-hover);
}

/* Drag and drop zone */
:where(.omni-file-drop) {
  position: relative;
  padding: var(--omni-space-8);
  text-align: center;
  background: var(--omni-color-surface);
  border: calc(var(--omni-border-width) * 2) dashed var(--omni-color-border);
  border-radius: var(--omni-radius);
  transition: all var(--omni-transition);
}

:where(.omni-file-drop):hover {
  background: var(--omni-color-surface-alt);
  border-color: var(--omni-color-primary);
}

/* Native drag states */
:where(.omni-file-drop[data-dragover="true"]) {
  background: var(--omni-color-surface-alt);
  border-color: var(--omni-color-primary);
  transform: scale(1.01);
  box-shadow: var(--omni-shadow-lg);
}

/* Drag hover effect */
:where(.omni-file-drop[data-dragover="true"]) .omni-file-drop-label {
  color: var(--omni-color-primary);
  font-weight: var(--omni-font-medium);
}

:where(.omni-file-drop-label) {
  display: block;
  color: var(--omni-color-text-muted);
  cursor: pointer;
}

:where(.omni-file-drop-label):hover {
  color: var(--omni-color-primary);
}

/* Hide the actual input in drop zone */
:where(.omni-file-drop) input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: 100%;
  block-size: 100%;
  cursor: pointer;
  opacity: 0;
}

/* Compact file input */
:where(.omni-file-input[data-size="compact"]) {
  display: inline-block;
}

:where(.omni-file-input[data-size="compact"]) input[type="file"] {
  inline-size: auto;
}

/* Prevent drops on disabled elements */
:where(.omni-file-drop[disabled]),
:where(.omni-file-drop:has(input[disabled])) {
  pointer-events: none;
  opacity: 0.5;
}

/* Icon animation for drag state */
:where(.omni-file-drop[data-dragover="true"]) .omni-file-drop-icon {
  animation: omni-file-drop-pulse 1s ease-in-out infinite;
}

@keyframes omni-file-drop-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Optional: Add drag icon styles */
:where(.omni-file-drop-icon) {
  display: block;
  font-size: 3rem;
  margin-bottom: var(--omni-space-2);
  color: var(--omni-color-text-muted);
  transition: all var(--omni-transition);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-file-drop[data-dragover="true"]) {
    transform: none;
  }

  :where(.omni-file-drop[data-dragover="true"]) .omni-file-drop-icon {
    animation: none;
  }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/* Focus state for keyboard users */
:where(.omni-file-drop:has(input:focus-visible)) {
  outline: var(--omni-focus-ring);
  outline-offset: var(--omni-focus-ring-offset);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :where(.omni-file-drop) {
    border-width: 3px;
  }

  :where(.omni-file-drop[data-dragover="true"]) {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }

  :where(.omni-file-input) input[type="file"]:focus {
    outline: 3px solid currentColor;
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI FOOTER COMPONENT - NUCLEAR CSS
   Data attributes: 
   - data-align (start/center/end)
   - data-size (compact/default/large)
   - data-variant (dark/transparent)
   - data-position (sticky/fixed)
   - data-container (full/contained)
   ============================================================================= */

/* Base footer */
:where(.omni-footer) {
  padding: var(--omni-space-6);
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
  background: var(--omni-color-surface-alt);
  border-block-start: var(--omni-border-width) solid var(--omni-color-border);
}

/* Footer link styling */
:where(.omni-footer-link) {
  color: var(--omni-color-link);
  text-decoration: none;
  transition: var(--omni-transition-colors);
}

:where(.omni-footer-link):hover {
  color: var(--omni-color-link-hover);
  text-decoration: underline;
}

/* Focus ring handled by global utility */

/* Layout alignment */
:where(.omni-footer[data-align="start"]) {
  text-align: start;
}

:where(.omni-footer[data-align="center"]) {
  text-align: center;
}

:where(.omni-footer[data-align="end"]) {
  text-align: end;
}

/* Footer size variants */
:where(.omni-footer[data-size="compact"]) {
  padding: var(--omni-space-4);
  font-size: var(--omni-text-xs);
}

:where(.omni-footer[data-size="large"]) {
  padding: var(--omni-space-8) var(--omni-space-6);
}

/* Footer style variants */
:where(.omni-footer[data-variant="dark"]) {
  color: var(--omni-color-text);
  background: var(--omni-color-surface);
  border-block-start-color: var(--omni-color-border);
}

:where(.omni-footer[data-variant="transparent"]) {
  background: transparent;
  border-block-start: none;
}

/* Footer position variants */
:where(.omni-footer[data-position="sticky"]) {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--omni-z-dropdown);
}

:where(.omni-footer[data-position="fixed"]) {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--omni-z-dropdown);
}

/* Container width control */
:where(.omni-footer[data-container="full"]) {
  max-inline-size: 100%;
}

:where(.omni-footer[data-container="contained"]) {
  max-inline-size: var(--omni-container-max-width, 1200px);
  margin-inline: auto;
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI FORM LAYOUT - NUCLEAR CSS
   Data attributes: data-align (start/center/end) for form actions
   Form layout utilities and spacing helpers
   ============================================================================= */

/* Form groups - basic vertical spacing */
:where(.omni-form-group) {
  margin-block-end: var(--omni-space-4);
}

:where(.omni-form-group):last-child {
  margin-block-end: 0;
}

/* Labels */
:where(.omni-label) {
  display: block;
  margin-block-end: var(--omni-space-2);
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-text);
}

/* Required indicator */
:where(.omni-required) {
  margin-inline-start: var(--omni-space-1);
  color: var(--omni-color-danger);
}

/* Help text */
:where(.omni-help-text) {
  display: block;
  margin-block-start: var(--omni-space-2);
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
}

/* Error messages */
:where(.omni-error-message) {
  display: block;
  margin-block-start: var(--omni-space-2);
  font-size: var(--omni-text-sm);
  color: var(--omni-color-danger);
}

/* Inline forms - horizontal layout */
:where(.omni-form-inline) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omni-space-3);
  align-items: flex-end;
}

:where(.omni-form-inline) :where(.omni-form-group) {
  margin-block-end: 0;
}

:where(.omni-form-inline) :where(.omni-label) {
  margin-block-end: 0;
  margin-inline-end: var(--omni-space-2);
}

/* Form actions - button area */
:where(.omni-form-actions) {
  display: flex;
  gap: var(--omni-space-3);
  padding-block-start: var(--omni-space-4);
  margin-block-start: var(--omni-space-6);
  border-block-start: var(--omni-border-width) solid var(--omni-color-border);
}

:where(.omni-form-actions[data-align="start"]) {
  justify-content: flex-start;
}

:where(.omni-form-actions[data-align="center"]) {
  justify-content: center;
}

:where(.omni-form-actions[data-align="end"]) {
  justify-content: flex-end;
}

/* Two-column layout helper */
:where(.omni-form-row) {
  display: flex;
  gap: var(--omni-space-4);
}

:where(.omni-form-row) > * {
  flex: 1;
}

/* Mobile responsive */
@media (width <= 600px) { /* --omni-breakpoint-sm */
  :where(.omni-form-inline) {
    flex-direction: column;
    align-items: stretch;
  }
  
  :where(.omni-form-row) {
    flex-direction: column;
  }
  
  :where(.omni-form-actions) {
    flex-direction: column;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI HEATMAP GRID - TIER 1 CSS-ONLY
 * Configurable N×M grid for risk matrices, priority grids, skill assessments
 * =============================================================================
 *
 * USAGE:
 * <div class="omni-heatmap" role="grid" aria-label="Risk Matrix" data-columns="5" data-rows="5">
 *   <div class="omni-heatmap-header" role="row">
 *     <div class="omni-heatmap-corner" role="columnheader"></div>
 *     <div class="omni-heatmap-col-header" role="columnheader">Rare</div>
 *     ...
 *   </div>
 *   <div class="omni-heatmap-row" role="row">
 *     <div class="omni-heatmap-row-header" role="rowheader">Catastrophic</div>
 *     <div class="omni-heatmap-cell" role="gridcell" data-level="critical">25</div>
 *     ...
 *   </div>
 * </div>
 *
 * DATA ATTRIBUTES:
 * - data-columns: Grid columns (3-6, or set --omni-heatmap-columns directly)
 * - data-rows: Grid rows (3-6, or set --omni-heatmap-rows directly)
 * - data-level: Cell severity (critical, high, medium, low, info)
 * - data-pattern: Colorblind pattern (diagonal, dots, crosshatch, horizontal)
 * - data-selected: Highlights cell as selected
 * - data-interactive: Enables hover states on cells
 *
 * ============================================================================= */

/* =============================================================================
 * BASE GRID STRUCTURE
 * ============================================================================= */

:where(.omni-heatmap) {
  /* Configurable grid dimensions */
  --omni-heatmap-columns: 5;
  --omni-heatmap-rows: 5;
  --omni-heatmap-cell-size: minmax(3rem, 1fr);
  --omni-heatmap-gap: 2px;
  --omni-heatmap-header-width: auto;

  display: grid;
  grid-template-columns: var(--omni-heatmap-header-width) repeat(var(--omni-heatmap-columns), var(--omni-heatmap-cell-size));
  gap: var(--omni-heatmap-gap);
  background: var(--omni-color-border);
  border-radius: var(--omni-radius-md);
  overflow: hidden;
}

/* =============================================================================
 * GRID SIZE PRESETS
 * ============================================================================= */

:where(.omni-heatmap[data-columns="3"]) { --omni-heatmap-columns: 3; }
:where(.omni-heatmap[data-columns="4"]) { --omni-heatmap-columns: 4; }
:where(.omni-heatmap[data-columns="5"]) { --omni-heatmap-columns: 5; }
:where(.omni-heatmap[data-columns="6"]) { --omni-heatmap-columns: 6; }

:where(.omni-heatmap[data-rows="3"]) { --omni-heatmap-rows: 3; }
:where(.omni-heatmap[data-rows="4"]) { --omni-heatmap-rows: 4; }
:where(.omni-heatmap[data-rows="5"]) { --omni-heatmap-rows: 5; }
:where(.omni-heatmap[data-rows="6"]) { --omni-heatmap-rows: 6; }

/* =============================================================================
 * HEADER ROW
 * ============================================================================= */

:where(.omni-heatmap-header) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

:where(.omni-heatmap-corner) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--omni-space-2);
  background: var(--omni-color-surface);
}

:where(.omni-heatmap-col-header) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--omni-space-2);
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-text-muted);
  text-align: center;
  background: var(--omni-color-surface);
}

/* =============================================================================
 * DATA ROWS
 * ============================================================================= */

:where(.omni-heatmap-row) {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

:where(.omni-heatmap-row-header) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--omni-space-2) var(--omni-space-3);
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-text-muted);
  text-align: end;
  background: var(--omni-color-surface);
}

/* =============================================================================
 * CELLS
 * ============================================================================= */

:where(.omni-heatmap-cell) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding: var(--omni-space-2);
  font-weight: var(--omni-font-semibold);
  background: var(--omni-color-surface);
  transition: filter var(--omni-transition);
}

/* =============================================================================
 * LEVEL COLORS (mapping to existing tokens)
 * ============================================================================= */

:where(.omni-heatmap-cell[data-level="critical"]) {
  color: var(--omni-color-danger-text);
  background: var(--omni-color-danger);
}

:where(.omni-heatmap-cell[data-level="high"]) {
  color: var(--omni-color-warning-text);
  background: var(--omni-color-warning);
}

:where(.omni-heatmap-cell[data-level="medium"]) {
  color: var(--omni-color-info-text);
  background: var(--omni-color-info);
}

:where(.omni-heatmap-cell[data-level="low"]) {
  color: var(--omni-color-success-text);
  background: var(--omni-color-success);
}

:where(.omni-heatmap-cell[data-level="info"]) {
  color: var(--omni-color-secondary-text);
  background: var(--omni-color-secondary);
}

/* =============================================================================
 * PATTERN OVERLAYS (colorblind accessibility)
 * ============================================================================= */

:where(.omni-heatmap-cell[data-pattern])::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  opacity: 0.25;
}

:where(.omni-heatmap-cell[data-pattern="diagonal"])::before {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    currentColor 3px,
    currentColor 4px
  );
}

:where(.omni-heatmap-cell[data-pattern="dots"])::before {
  background: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 8px 8px;
}

:where(.omni-heatmap-cell[data-pattern="crosshatch"])::before {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 3px,
      currentColor 3px,
      currentColor 4px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      currentColor 3px,
      currentColor 4px
    );
}

:where(.omni-heatmap-cell[data-pattern="horizontal"])::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 4px,
    currentColor 4px,
    currentColor 5px
  );
}

/* =============================================================================
 * STATES
 * ============================================================================= */

/* Selected cell */
:where(.omni-heatmap-cell[data-selected]) {
  z-index: 1;
  outline: 3px solid var(--omni-color-text);
  outline-offset: -3px;
}

/* Interactive hover */
:where(.omni-heatmap[data-interactive] .omni-heatmap-cell:hover) {
  z-index: 1;
  cursor: pointer;
  filter: brightness(1.15);
}

/* Focus for keyboard navigation */
:where(.omni-heatmap-cell:focus) {
  z-index: 2;
  outline: 2px solid var(--omni-color-border-focus);
  outline-offset: -2px;
}

:where(.omni-heatmap-cell:focus-visible) {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: -2px;
}

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */

@media (max-width: 48rem) {
  :where(.omni-heatmap) {
    --omni-heatmap-cell-size: minmax(2.5rem, 1fr);
  }

  :where(.omni-heatmap-col-header),
  :where(.omni-heatmap-row-header) {
    font-size: var(--omni-text-xs);
    padding: var(--omni-space-1);
  }

  :where(.omni-heatmap-cell) {
    min-block-size: 2.5rem;
    font-size: var(--omni-text-sm);
  }
}

/* Horizontal scroll wrapper for very small screens */
:where(.omni-heatmap-wrapper) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =============================================================================
 * REDUCED MOTION
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.omni-heatmap-cell) {
    transition: none;
  }
}

/* =============================================================================
 * LEGEND COMPONENT (optional)
 * ============================================================================= */

:where(.omni-heatmap-legend) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omni-space-3);
  margin-block-start: var(--omni-space-3);
}

:where(.omni-heatmap-legend-item) {
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
}

:where(.omni-heatmap-legend-swatch) {
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: var(--omni-radius-sm);
}

:where(.omni-heatmap-legend-swatch[data-level="critical"]) {
  background: var(--omni-color-danger);
}

:where(.omni-heatmap-legend-swatch[data-level="high"]) {
  background: var(--omni-color-warning);
}

:where(.omni-heatmap-legend-swatch[data-level="medium"]) {
  background: var(--omni-color-info);
}

:where(.omni-heatmap-legend-swatch[data-level="low"]) {
  background: var(--omni-color-success);
}

:where(.omni-heatmap-legend-swatch[data-level="info"]) {
  background: var(--omni-color-secondary);
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI HERO - LANDING PAGE SECTIONS
 * Full-width marketing/landing hero sections with sensible defaults
 * =============================================================================
 *
 * USAGE:
 * <section class="omni-hero">
 *   <div class="omni-hero-content">
 *     <h1 class="omni-hero-title">Welcome</h1>
 *     <p class="omni-hero-tagline">Your tagline here</p>
 *     <p class="omni-hero-description">Longer description text.</p>
 *     <div class="omni-hero-actions">
 *       <button class="omni-button" data-variant="primary">Get Started</button>
 *       <button class="omni-button" data-variant-style="outline">Learn More</button>
 *     </div>
 *   </div>
 * </section>
 *
 * VARIANTS:
 * - data-size: sm | md (default) | lg (viewport height)
 * - data-align: center (default) | start
 * - data-background: image | gradient | overlay
 *
 * ACCESSIBILITY:
 * - Use <section> with aria-labelledby pointing to the heading
 * - H1 for main page hero, H2 for secondary heroes
 * - Ensure sufficient contrast with background images (use overlay)
 * ============================================================================= */

/* Base hero - works by default */
:where(.omni-hero) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 50vh;
  padding-block: var(--omni-space-12);
  padding-inline: var(--omni-space-6);
  color: var(--omni-color-text);
  text-align: center;
  background-color: var(--omni-color-surface);
  background-position: center;
  background-size: cover;
}

/* Content container */
:where(.omni-hero-content) {
  position: relative;
  z-index: 1;
  max-inline-size: 48rem;
  margin-inline: auto;
}

/* Title - large, prominent heading */
:where(.omni-hero-title) {
  margin-block: 0 var(--omni-space-4);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Tagline - secondary heading */
:where(.omni-hero-tagline) {
  margin-block: 0 var(--omni-space-3);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: var(--omni-color-text-muted);
}

/* Description - body text */
:where(.omni-hero-description) {
  margin-block: 0 var(--omni-space-6);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--omni-color-text-muted);
}

/* Actions - CTA buttons */
:where(.omni-hero-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omni-space-3);
  justify-content: center;
}

/* =============================================================================
 * SIZE VARIANTS
 * ============================================================================= */

/* Small - compact hero for secondary sections */
:where(.omni-hero[data-size="sm"]) {
  min-block-size: 30vh;
  padding-block: var(--omni-space-8);
}

:where(.omni-hero[data-size="sm"]) .omni-hero-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* Large - full viewport height */
:where(.omni-hero[data-size="lg"]) {
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

/* =============================================================================
 * ALIGNMENT VARIANTS
 * ============================================================================= */

/* Left-aligned content */
:where(.omni-hero[data-align="start"]) {
  text-align: start;
}

:where(.omni-hero[data-align="start"]) .omni-hero-content {
  margin-inline: 0;
}

:where(.omni-hero[data-align="start"]) .omni-hero-actions {
  justify-content: flex-start;
}

/* =============================================================================
 * BACKGROUND VARIANTS
 * ============================================================================= */

/* Image background - use with inline style for background-image */
:where(.omni-hero[data-background="image"]) {
  color: var(--omni-color-text-inverse);
}

/* Dark overlay for image backgrounds */
:where(.omni-hero[data-background="overlay"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
}

:where(.omni-hero[data-background="overlay"]) {
  color: var(--omni-color-text-inverse);
}

:where(.omni-hero[data-background="overlay"]) .omni-hero-tagline,
:where(.omni-hero[data-background="overlay"]) .omni-hero-description {
  color: rgb(255 255 255 / 0.8);
}

/* Gradient background */
:where(.omni-hero[data-background="gradient"]) {
  background: linear-gradient(135deg, var(--omni-color-primary) 0%, var(--omni-color-accent) 100%);
  color: var(--omni-color-text-inverse);
}

:where(.omni-hero[data-background="gradient"]) .omni-hero-tagline,
:where(.omni-hero[data-background="gradient"]) .omni-hero-description {
  color: rgb(255 255 255 / 0.85);
}

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */

@media (width <= 640px) {
  :where(.omni-hero) {
    padding-inline: var(--omni-space-4);
  }

  :where(.omni-hero-actions) {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.omni-hero[data-align="start"]) .omni-hero-actions {
    align-items: flex-start;
  }
}

/* =============================================================================
 * REDUCED MOTION
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.omni-hero) {
    background-attachment: scroll;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI STATUS INDICATOR - LEAN & RESILIENT
 * Works by default, enhances with data attributes
 * =============================================================================
 *
 * USAGE:
 * <span class="omni-status" data-variant="success"></span>
 * <span class="omni-status" data-variant="warning" data-style="badge">Warning</span>
 * <span class="omni-status" data-variant="info" data-animation="pulse"></span>
 *
 * NO LONGER SUPPORTED:
 * <span class="omni-status omni-status-success">OLD WAY - DON'T USE</span>
 * ============================================================================= */

/* Base status indicator - Works by default */
:where(.omni-status) {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  vertical-align: middle;
  color: var(--omni-variant-text, var(--omni-color-text));
  background: var(--omni-variant-bg, var(--omni-color-surface-alt));
  border-radius: var(--omni-radius-full);
  
  /* Badge style (pill with text) */
  &[data-style="badge"] {
    width: auto;
    height: auto;
    padding: var(--omni-space-1) var(--omni-space-2);
    font-size: var(--omni-text-xs);
    font-weight: var(--omni-font-medium);
    color: var(--omni-variant-text);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }
  
  /* Pulse animation */
  &[data-animation="pulse"] {
    animation: omni-pulse 2s ease-in-out infinite;
  }
}

@keyframes omni-pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }

  50% { 
    opacity: 0.7; 
    transform: scale(1.1);
  }
}

/* Default to neutral when no variant specified */
:where(.omni-status):not([data-variant]) {
  --omni-variant-bg: var(--omni-color-surface-alt);
  --omni-variant-text: var(--omni-color-text);
}

/* Accessibility handled by global utility */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-status[data-animation="pulse"]) {
    animation: none;
  }
}

/*
 * NEW DATA ATTRIBUTE USAGE:
 * <!-- Simple dot -->
 * <span class="omni-status" data-variant="success"></span>
 * 
 * <!-- Dot with text (use wrapper) -->
 * <span>
 *   <span class="omni-status" data-variant="warning"></span>
 *   Offline
 * </span>
 * 
 * <!-- Badge -->
 * <span class="omni-status" data-variant="danger" data-style="badge">Error</span>
 * 
 * <!-- Pulsing dot -->
 * <span class="omni-status" data-variant="info" data-animation="pulse"></span>
 * 
 * Available attributes:
 * - data-variant: success, warning, danger, info
 * - data-style: badge (pill with text)
 * - data-animation: pulse
 */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI KBD - KEYBOARD KEY STYLING
 * Styles for displaying keyboard keys and shortcuts
 * =============================================================================
 *
 * ACCESSIBILITY:
 * The <kbd> element is semantic but does NOT provide screen reader benefits.
 * For symbol keys, always provide aria-label:
 *
 *   <kbd class="omni-kbd" aria-label="Command">⌘</kbd>
 *   <kbd class="omni-kbd" aria-label="Shift">⇧</kbd>
 *
 * For key combinations:
 *   <kbd class="omni-kbd">Ctrl</kbd> + <kbd class="omni-kbd">K</kbd>
 *
 * ============================================================================= */

:where(.omni-kbd) {
  /* Typography */
  font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
  font-size: var(--omni-kbd-font-size, 0.85em);
  font-weight: var(--omni-font-medium);
  line-height: 1;

  /* Layout */
  display: inline-block;
  padding: var(--omni-kbd-padding-y, 0.2em) var(--omni-kbd-padding-x, 0.5em);
  vertical-align: baseline;

  /* Appearance */
  color: var(--omni-color-text);
  background-color: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-sm);

  /* 3D physical key effect - sharp shadow, no blur */
  box-shadow: 0 2px 0 0 var(--omni-color-border);

  /* Smooth transition for press effect */
  transition: box-shadow 0.05s ease-out, transform 0.05s ease-out;
}

/* Hover - slight press */
:where(.omni-kbd):hover {
  box-shadow: 0 1px 0 0 var(--omni-color-border);
  transform: translateY(1px);
}

/* Active - fully pressed */
:where(.omni-kbd):active {
  box-shadow: 0 0 0 0 var(--omni-color-border);
  transform: translateY(2px);
}

/* Size: Small */
:where(.omni-kbd[data-size="sm"]) {
  --omni-kbd-font-size: 0.75em;
  --omni-kbd-padding-x: 0.4em;
  --omni-kbd-padding-y: 0.15em;
}

/* Size: Large (for display purposes, not inline) */
:where(.omni-kbd[data-size="lg"]) {
  --omni-kbd-font-size: 1em;
  --omni-kbd-padding-x: 0.6em;
  --omni-kbd-padding-y: 0.25em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-kbd) {
    transition: none;
  }

  :where(.omni-kbd):hover,
  :where(.omni-kbd):active {
    transform: none;
  }
}

/*
 * USAGE:
 *
 * Basic key:
 *   <kbd class="omni-kbd">K</kbd>
 *
 * Key combination:
 *   <kbd class="omni-kbd">Ctrl</kbd> + <kbd class="omni-kbd">K</kbd>
 *
 * Symbol key with accessibility:
 *   <kbd class="omni-kbd" aria-label="Command">⌘</kbd>
 *
 * Size variants:
 *   <kbd class="omni-kbd" data-size="sm">Esc</kbd>
 *   <kbd class="omni-kbd" data-size="lg">Enter</kbd>
 *
 * Platform symbols:
 *   ⌘ Command (Mac)
 *   ⇧ Shift
 *   ⌥ Option (Mac)
 *   ⌃ Control
 *   ⏎ Return/Enter
 *   ⌫ Backspace/Delete
 *   ⇥ Tab
 */
}
@layer omniui.components{

/* =============================================================================
   OMNIUI LIST GROUP - NUCLEAR CSS
   Data attributes: 
   - data-variant (flush)
   - data-size (sm)
   - data-active (true)
   - data-disabled (true)
   ============================================================================= */

/* BASE LIST GROUP */

:where(.omni-list-group) {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--omni-color-surface);
  border: var(--omni-border-width) solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
}

:where(.omni-list-group-item) {
  position: relative;
  display: block;
  padding: var(--omni-space-3) var(--omni-space-4);
  color: var(--omni-color-text);
  text-decoration: none;
  background: var(--omni-color-surface);
  border-block-end: var(--omni-border-width) solid var(--omni-color-border);
  transition: background var(--omni-transition);
}

:where(.omni-list-group-item:last-child) {
  border-block-end: none;
}

:where(.omni-list-group-item:first-child) {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

:where(.omni-list-group-item:last-child) {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

/* Hover state */
:where(.omni-list-group-item:hover) {
  text-decoration: none;
  background: var(--omni-color-surface-alt);
}

/* Active state */
:where(.omni-list-group-item[data-active="true"]) {
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-primary-text);
  background: var(--omni-color-primary);
}

/* Disabled state */
:where(.omni-list-group-item[data-disabled="true"]) {
  color: var(--omni-color-text-muted);
  pointer-events: none;
  background: var(--omni-color-surface);
}

/* VARIANTS */

/* Flush variant (no borders) */
:where(.omni-list-group[data-variant="flush"]) {
  border: none;
  border-radius: 0;
}

:where(.omni-list-group[data-variant="flush"]) :where(.omni-list-group-item) {
  border-inline: none;
  border-radius: 0;
}

/* Small variant */
:where(.omni-list-group[data-size="sm"]) :where(.omni-list-group-item) {
  padding: var(--omni-space-2) var(--omni-space-3);
  font-size: var(--omni-text-sm);
}

/* Action items (buttons/links) */
:where(button.omni-list-group-item,
a.omni-list-group-item) {
  inline-size: 100%;
  text-align: start;
  cursor: pointer;
  background: none;
  border: none;
  
  /* Focus ring handled by global utility */
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI METER - NUCLEAR NATIVE EDITION
 * Using semantic <meter> element. Works without JS.
 * ============================================================================= */

/* ===== BASE METER ===== */

.omni-meter {
  /* Reset browser defaults */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Sizing */
  width: 100%;
  height: 0.75rem;
  
  /* Ensure proper display */
  display: block;
  overflow: hidden;
}

/* Track styling - WebKit/Blink */
.omni-meter::-webkit-meter-bar {
  background-color: var(--omni-color-surface-alt);
  border-radius: var(--omni-radius-sm);
}

/* Optimum value (in optimum range) */
.omni-meter::-webkit-meter-optimum-value {
  background-color: var(--omni-color-success);
  border-radius: var(--omni-radius-sm);
  transition: width 0.6s ease;
}

/* Suboptimum value (in neither low nor high) */
.omni-meter::-webkit-meter-suboptimum-value {
  background-color: var(--omni-color-warning);
  border-radius: var(--omni-radius-sm);
  transition: width 0.6s ease;
}

/* Even worse value (in low/high danger zones) */
.omni-meter::-webkit-meter-even-less-good-value {
  background-color: var(--omni-color-danger);
  border-radius: var(--omni-radius-sm);
  transition: width 0.6s ease;
}

/* Firefox styling */
.omni-meter::-moz-meter-bar {
  border-radius: var(--omni-radius-sm);
  transition: width 0.6s ease;
}

/* Firefox optimum */
.omni-meter:-moz-meter-optimum::-moz-meter-bar {
  background-color: var(--omni-color-success);
}

/* Firefox suboptimum */
.omni-meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background-color: var(--omni-color-warning);
}

/* Firefox sub-sub-optimum */
.omni-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background-color: var(--omni-color-danger);
}

/* ===== SIZE VARIANTS ===== */

:where(.omni-meter[data-size="sm"]) {
  height: 0.5rem;
}

:where(.omni-meter[data-size="lg"]) {
  height: 1.25rem;
}

/* ===== VARIANT OVERRIDES ===== */
/* Allow data-variant to override automatic colors */

:is([data-variant="primary"], [data-variant="secondary"]) .omni-meter::-webkit-meter-optimum-value,
:is([data-variant="primary"], [data-variant="secondary"]) .omni-meter::-webkit-meter-suboptimum-value,
:is([data-variant="primary"], [data-variant="secondary"]) .omni-meter::-webkit-meter-even-less-good-value,
:is([data-variant="primary"], [data-variant="secondary"]) .omni-meter:-moz-meter-optimum::-moz-meter-bar,
:is([data-variant="primary"], [data-variant="secondary"]) .omni-meter:-moz-meter-sub-optimum::-moz-meter-bar,
:is([data-variant="primary"], [data-variant="secondary"]) .omni-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background-color: var(--omni-variant-bg);
}

/* ===== ENHANCED WRAPPER (for JS labels) ===== */

.omni-meter-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.omni-meter-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--omni-text-xs);
  font-weight: 600;
  color: var(--omni-color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: nowrap;
}

/* Threshold indicators */
.omni-meter-thresholds {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
  font-size: var(--omni-text-xs);
  color: var(--omni-color-text-muted);
}

.threshold-low {
  color: var(--omni-color-danger);
}

.threshold-high {
  color: var(--omni-color-warning);
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .omni-meter::-webkit-meter-optimum-value,
  .omni-meter::-webkit-meter-suboptimum-value,
  .omni-meter::-webkit-meter-even-less-good-value,
  .omni-meter::-moz-meter-bar {
    transition: none;
  }
}

/* 
 * USAGE:
 * Basic (CSS only):
 * <meter class="omni-meter" value="8" min="0" max="10">8 out of 10</meter>
 * 
 * With thresholds:
 * <meter class="omni-meter" 
 *   value="6" min="0" max="10" 
 *   low="3" high="7" optimum="9"
 * >6 out of 10</meter>
 * 
 * With variant override:
 * <div data-variant="primary">
 *   <meter class="omni-meter" value="75" max="100">75%</meter>
 * </div>
 *
 * Enhanced (Tier 2 with JS):
 * <meter class="omni-meter"
 *   value="45" min="0" max="100"
 *   low="25" high="75" optimum="90"
 *   data-enhance
 *   data-label="true"
 * >45%</meter>
 *
 * ACCESSIBILITY NOTES:
 * - Always include fallback text content
 * - Use aria-label for context: "CPU usage: 45%"
 * - Consider aria-valuetext for friendly values
 * - <meter> has implicit role="meter" 
 */
}
@layer omniui.components{

/* =============================================================================
   OMNIUI METRIC COMPONENT - NUCLEAR CSS
   Data attributes:
   - data-layout (centered/horizontal)
   - data-size (sm/lg)
   - data-change (positive/negative/neutral) for change indicators
   Universal pattern for displaying numbers, stats, and key metrics
   ============================================================================= */

:where(.omni-metric) {
  display: flex;
  flex-direction: column;
  gap: var(--omni-space-2);
}

/* Layout variants */
:where(.omni-metric[data-layout="centered"]) {
  align-items: center;
  text-align: center;
}

:where(.omni-metric[data-layout="horizontal"]) {
  flex-direction: row;
  gap: var(--omni-space-3);
  align-items: baseline;
}

/* Core metric elements */
:where(.omni-metric-value) {
  font-size: var(--omni-text-2xl); /* Default size */
  font-weight: var(--omni-font-bold);
  line-height: 1.25; /* Tight line height for metrics */
  color: var(--omni-color-text);
}

:where(.omni-metric-label) {
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--omni-letter-spacing-wide);
}

:where(.omni-metric-change) {
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
}

/* Optional icon */
:where(.omni-metric-icon) {
  flex-shrink: 0;
  font-size: var(--omni-text-xl);
  color: var(--omni-color-text-muted);
}

/* Size variants */
:where(.omni-metric[data-size="sm"]) :where(.omni-metric-value) {
  font-size: var(--omni-text-xl);
}

:where(.omni-metric[data-size="lg"]) :where(.omni-metric-value) {
  font-size: var(--omni-text-3xl); /* Largest available */
}

/* Change indicator variants */
:where(.omni-metric-change[data-change="positive"]) {
  color: var(--omni-color-success);
}

:where(.omni-metric-change[data-change="negative"]) {
  color: var(--omni-color-danger);
}

:where(.omni-metric-change[data-change="neutral"]) {
  color: var(--omni-color-text-muted);
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI NAVIGATION - LEAN & FLEXIBLE
   Works by default, enhances with data attributes

   ACCESSIBILITY (WCAG 2.1):
   Navigation MUST use <nav> with aria-label (especially when multiple navs).
   Current page link MUST use aria-current="page".

   USAGE:
   <nav aria-label="Main navigation">
     <ul class="omni-nav" data-layout="vertical" data-style="pills">
       <li><a class="omni-nav-link" href="/" aria-current="page">Home</a></li>
       <li><a class="omni-nav-link" href="/about">About</a></li>
       <li><a class="omni-nav-link" href="/contact">Contact</a></li>
     </ul>
   </nav>

   Multiple navs on same page:
   <nav aria-label="Main navigation">...</nav>
   <nav aria-label="Account settings">...</nav>
   <nav aria-label="Footer links">...</nav>
   ============================================================================= */

/* Base navigation with defaults */
:where(.omni-nav) {
  display: flex;
  gap: var(--omni-variant-gap, var(--omni-space-1));
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Default values when no size specified */
:where(.omni-nav):not([data-size]) {
  --omni-variant-gap: var(--omni-space-1);
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-text: var(--omni-color-text-muted);
  --omni-variant-radius: var(--omni-radius-md);
}

/* Nav link with defaults */
:where(.omni-nav-link) {
  display: flex;
  align-items: center;
  padding: var(--omni-variant-padding-y, var(--omni-space-2)) var(--omni-variant-padding-x, var(--omni-space-3));
  color: var(--omni-variant-text, var(--omni-color-text-muted));
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--omni-variant-radius, var(--omni-radius-md));
  transition: var(--omni-transition);
}

:where(.omni-nav-link):hover {
  color: var(--omni-color-text);
  background: var(--omni-color-surface-alt);
}

:where(.omni-nav-link[data-state="active"]),
:where(.omni-nav-link[aria-current="page"]) {
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-primary);
  background: var(--omni-color-surface);
}

/* Layout variants */
:where(.omni-nav[data-layout="vertical"]) {
  flex-direction: column;
}

:where(.omni-nav[data-layout="center"]) {
  justify-content: center;
}

:where(.omni-nav[data-layout="fill"]) .omni-nav-item {
  flex: 1;
}

:where(.omni-nav[data-layout="fill"]) .omni-nav-link {
  text-align: center;
}

/* Style variants */
:where(.omni-nav[data-style="pills"]) .omni-nav-link {
  border-radius: var(--omni-radius-full);
}

:where(.omni-nav[data-style="tabs"]) {
  border-block-end: 1px solid var(--omni-color-border);
}

:where(.omni-nav[data-style="tabs"]) .omni-nav-link {
  margin-block-end: -1px;
  border-block-end: 2px solid transparent;
  border-start-start-radius: var(--omni-radius);
  border-start-end-radius: var(--omni-radius);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

:where(.omni-nav[data-style="tabs"]) .omni-nav-link:hover {
  border-block-end-color: var(--omni-color-border);
}

:where(.omni-nav[data-style="tabs"]) .omni-nav-link[data-state="active"],
:where(.omni-nav[data-style="tabs"]) .omni-nav-link[aria-current="page"] {
  background: var(--omni-color-surface);
  border-block-end-color: var(--omni-color-primary);
}

@media (width <= 48rem) {
  :where(.omni-nav) {
    flex-direction: column;
  }
  
  :where(.omni-nav-link) {
    text-align: start;
  }
}

:where(.omni-nav):not([data-layout], [data-style]) {
  --omni-variant-gap: var(--omni-space-2);
}

/* Default values for ALL nav links */
:where(.omni-nav-link) {
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-text: var(--omni-color-text-muted);
  --omni-variant-radius: var(--omni-radius);
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI NAVBAR COMPONENT - NUCLEAR CSS
   Data attributes:
   - data-position (sticky/fixed)
   - data-variant (minimal/transparent/dark)
   - data-align (start/center/end/between)
   - data-container (contained)
   - data-active (true) - for active links
   - data-mobile (collapsed/expanded) - for mobile nav state
   ============================================================================= */

/* Base navbar */
:where(.omni-navbar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--omni-space-4);
  background: var(--omni-color-surface);
  border-block-end: var(--omni-border-width) solid var(--omni-color-border);
}

/* Navbar brand */
:where(.omni-navbar-brand) {
  font-size: var(--omni-text-lg);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
  text-decoration: none;
  transition: var(--omni-transition-colors);
}

:where(.omni-navbar-brand):hover {
  color: var(--omni-color-primary);
}

/* Focus ring handled by global utility */

/* Navbar navigation */
:where(.omni-navbar-nav) {
  display: flex;
  gap: var(--omni-space-4);
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(.omni-navbar-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--omni-space-1);
  color: var(--omni-color-text-muted);
  text-decoration: none;
  transition: var(--omni-transition-colors);
}

:where(.omni-navbar-link):hover {
  color: var(--omni-color-primary);
}

/* Active link state */
:where(.omni-navbar-link[data-active="true"]) {
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-primary);
}

/* Position variants */
:where(.omni-navbar[data-position="sticky"]) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--omni-z-dropdown);
}

:where(.omni-navbar[data-position="fixed"]) {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--omni-z-dropdown);
}

/* Style variants */
:where(.omni-navbar[data-variant="minimal"]) {
  padding: var(--omni-space-2) var(--omni-space-4);
  border-block-end: none;
}

:where(.omni-navbar[data-variant="transparent"]) {
  background: transparent;
  border-block-end-color: color-mix(in sRGB, var(--omni-color-border) 50%, transparent);
  backdrop-filter: blur(var(--omni-space-2)); /* 8px blur */
}

:where(.omni-navbar[data-variant="dark"]) {
  background: var(--omni-color-surface-alt);
  border-block-end-color: var(--omni-color-border);
}

/* Alignment variants */
:where(.omni-navbar[data-align="start"]) {
  justify-content: flex-start;
}

:where(.omni-navbar[data-align="center"]) {
  justify-content: center;
}

:where(.omni-navbar[data-align="end"]) {
  justify-content: flex-end;
}

:where(.omni-navbar[data-align="between"]) {
  justify-content: space-between;
}

/* Container control */
:where(.omni-navbar[data-container="contained"]) > * {
  inline-size: 100%;
  max-inline-size: var(--omni-container-max-width, 1200px);
  margin-inline: auto;
}

/* Responsive behavior - basic reflow, no toggle */
@media (width <= 900px) { /* --omni-breakpoint-md */
  :where(.omni-navbar) {
    flex-wrap: wrap;
  }
  
  :where(.omni-navbar-nav) {
    flex-wrap: wrap;
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI NOTICE - LEAN NOTIFICATION SYSTEM
   Data attributes:
   - data-variant (primary/success/warning/danger/info)
   - data-state (unread)
   - data-size (compact)
   =============================================================================

   ACCESSIBILITY (WAI-ARIA):
   Notices are typically used in notification lists or as dynamic updates.

   For a LIST of notices (notification center):
     <section aria-label="Notifications">
       <article class="omni-notice" data-variant="info">
         <div class="omni-notice-body">New message received.</div>
       </article>
       <article class="omni-notice" data-variant="success">
         <div class="omni-notice-body">Payment processed.</div>
       </article>
     </section>
     → Use <article> for individual notices in a list
     → Wrap in <section> with aria-label for the group

   For DYNAMIC notices (added via JS):
     <div class="omni-notice" data-variant="warning" role="status">
       <div class="omni-notice-body">Your session expires in 5 minutes.</div>
     </div>
     → role="status" for advisory updates (polite)
     → role="alert" for urgent updates (assertive)

   For UNREAD indicators:
     <article class="omni-notice" data-state="unread" aria-label="Unread notification">
       ...
     </article>
     → Communicate unread state via aria-label or visually hidden text

   ============================================================================= */

/* BASE NOTICE */

:where(.omni-notice) {
  position: relative;
  margin-bottom: var(--omni-space-4);
  overflow: hidden;
  background: var(--omni-color-surface);
  border: var(--omni-border-width) solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
  box-shadow: var(--omni-shadow-md);
  transition: box-shadow var(--omni-transition);
  
  /* Default padding when no child components specified */
  padding: var(--omni-space-4);
}

/* Remove padding when using structured child components */
:where(.omni-notice:has(.omni-notice-header, .omni-notice-body, .omni-notice-footer)) {
  padding: 0;
}

:where(.omni-notice:hover) {
  box-shadow: var(--omni-shadow-lg);
}

/* NOTIFICATION HEADER */

:where(.omni-notice-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--omni-space-2) var(--omni-space-4);
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text-inverse);
  background: var(--omni-color-text);

  /* Close button handled by global utility */
}

/* Notification variants */
:where(.omni-notice[data-variant="primary"]) :where(.omni-notice-header) {
  color: var(--omni-color-primary-text);
  background: var(--omni-color-primary);
}

:where(.omni-notice[data-variant="success"]) :where(.omni-notice-header) {
  color: var(--omni-color-success-text);
  background: var(--omni-color-success);
}

:where(.omni-notice[data-variant="warning"]) :where(.omni-notice-header) {
  color: var(--omni-color-warning-text);
  background: var(--omni-color-warning);
}

:where(.omni-notice[data-variant="danger"]) :where(.omni-notice-header) {
  color: var(--omni-color-danger-text);
  background: var(--omni-color-danger);
}

:where(.omni-notice[data-variant="info"]) :where(.omni-notice-header) {
  color: var(--omni-color-info-text);
  background: var(--omni-color-info);
}

/* NOTIFICATION BODY & FOOTER */

:where(.omni-notice-body) {
  padding: var(--omni-space-4);
  color: var(--omni-color-text);
}

:where(.omni-notice-footer) {
  padding: var(--omni-space-3) var(--omni-space-4);
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
  background: var(--omni-color-surface-alt);
  border-block-start: var(--omni-border-width) solid var(--omni-color-border);
}

/* Notification states */

/* Unread state */
:where(.omni-notice[data-state="unread"]) {
  border-inline-start: 3px solid var(--omni-color-primary);
}

:where(.omni-notice[data-state="unread"]) :where(.omni-notice-header) {
  font-weight: var(--omni-font-bold);
}

/* Optional unread dot */
:where(.omni-notice[data-state="unread"])::before {
  position: absolute;
  inset-block-start: var(--omni-space-3);
  inset-inline-start: var(--omni-space-3);
  inline-size: 8px;
  block-size: 8px;
  content: '';
  background: var(--omni-color-primary);
  border-radius: 50%;
}

/* Size variants */
:where(.omni-notice[data-size="compact"]) {
  /* Reduce default padding for simple usage */
  padding: var(--omni-space-2) var(--omni-space-3) !important;
  
  /* Also reduce margins on direct children for tighter layout */
  > :first-child {
    margin-top: 0;
  }
  
  > :last-child {
    margin-bottom: 0;
  }
  
  /* Tighten spacing between elements */
  > * + * {
    margin-top: var(--omni-space-1);
  }
}

:where(.omni-notice[data-size="compact"]) :where(.omni-notice-body) {
  padding: var(--omni-space-3);
}

:where(.omni-notice[data-size="compact"]) :where(.omni-notice-footer) {
  padding: var(--omni-space-2) var(--omni-space-3);
}

/* NOTIFICATION METADATA */

:where(.omni-notice-meta) {
  display: flex;
  gap: var(--omni-space-3);
  align-items: center;
  margin-top: var(--omni-space-2);
  font-size: var(--omni-text-xs);
  color: var(--omni-color-text-muted);
}

/* Timestamp */
:where(.omni-notice-time) {
  white-space: nowrap;
}

/* NOTIFICATION ACTIONS */

:where(.omni-notice-actions) {
  display: flex;
  gap: var(--omni-space-2);
  margin-top: var(--omni-space-3);

  /* Use existing button classes instead of custom styling */
}

/* NOTIFICATION ICON */

:where(.omni-notice-icon) {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-inline-end: var(--omni-space-3);
  font-size: 1.25rem;
  border-radius: var(--omni-radius-sm);

  /* Use .omni-status indicators instead of custom icon backgrounds */
}

/* Body with icon layout */
:where(.omni-notice-body[data-has-icon="true"]) {
  display: flex;
  align-items: flex-start;
}

/* CONTENT TRUNCATION */

/* Truncate long messages in compact mode */
:where(.omni-notice[data-size="compact"]) :where(.omni-notice-message) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* RESPONSIVE */

@media (width <= 600px) { /* --omni-breakpoint-sm */
  :where(.omni-notice) {
    margin-bottom: var(--omni-space-3);
  }
  
  :where(.omni-notice-actions) {
    flex-direction: column;
  }
  
  :where(.omni-notice-actions) button {
    inline-size: 100%;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI PAGINATION - LEAN PAGE NAVIGATION
 * Works by default, enhances with data attributes
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Pagination MUST be wrapped in <nav> with aria-label.
 * Current page MUST use aria-current="page".
 *
 * USAGE:
 * <nav aria-label="Pagination">
 *   <ul class="omni-pagination">
 *     <li class="omni-page" data-control="prev">
 *       <a href="?page=1" class="omni-page-link" aria-label="Previous page">‹</a>
 *     </li>
 *     <li class="omni-page">
 *       <a href="?page=1" class="omni-page-link">1</a>
 *     </li>
 *     <li class="omni-page">
 *       <a href="?page=2" class="omni-page-link" aria-current="page">2</a>
 *     </li>
 *     <li class="omni-page" data-control="next">
 *       <a href="?page=3" class="omni-page-link" aria-label="Next page">›</a>
 *     </li>
 *   </ul>
 * </nav>
 * ============================================================================= */

/* Base pagination container with defaults */
:where(.omni-pagination) {
  display: flex;
  gap: var(--omni-variant-gap, var(--omni-space-2));
  align-items: center;
  justify-content: var(--omni-variant-justify, flex-start);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Individual page items */
:where(.omni-page) {
  display: flex;
}

/* Page links/buttons with defaults */
:where(.omni-page-link) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--omni-variant-min-width, 2.5rem);
  height: var(--omni-variant-height, 2.5rem);
  padding: 0 var(--omni-variant-padding-x, var(--omni-space-1));
  font-size: var(--omni-variant-font-size, var(--omni-text-base));
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-text);
  text-decoration: none;
  cursor: pointer;
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-variant-radius, var(--omni-radius-md));
  transition: all var(--omni-transition);
}

/* States */
:where(.omni-page-link:hover:not([data-current="page"], [aria-current="page"], :disabled)) {
  background: var(--omni-color-surface-alt);
  border-color: var(--omni-color-primary);
}

/* Active page - supports both data-current and aria-current */
:where(.omni-page-link[data-current="page"]),
:where(.omni-page-link[aria-current="page"]) {
  color: var(--omni-color-primary-text);
  cursor: default;
  background: var(--omni-color-primary);
  border-color: var(--omni-color-primary);
}

/* Ellipsis for long ranges */
:where(.omni-page-ellipsis) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--omni-variant-min-width);
  color: var(--omni-color-text-muted);
  cursor: default;
  user-select: none;
}

:where(.omni-page-ellipsis::before) {
  content: "…";
}

/* Alignment variants */
:where(.omni-pagination[data-align="center"]) {
  --omni-variant-justify: center;
}

:where(.omni-pagination[data-align="end"]) {
  --omni-variant-justify: flex-end;
}

/* Minimal style (connected buttons) */
:where(.omni-pagination[data-style="minimal"]) {
  --omni-variant-gap: 0;
}

:where(.omni-pagination[data-style="minimal"] .omni-page-link) {
  border-right-width: 0;
  border-radius: 0;
}

:where(.omni-pagination[data-style="minimal"] .omni-page:first-child .omni-page-link) {
  border-radius: var(--omni-radius-md) 0 0 var(--omni-radius-md);
}

:where(.omni-pagination[data-style="minimal"] .omni-page:last-child .omni-page-link) {
  border-right-width: 1px;
  border-radius: 0 var(--omni-radius-md) var(--omni-radius-md) 0;
}

:where(.omni-pagination[data-style="minimal"] .omni-page-link[data-current="page"]),
:where(.omni-pagination[data-style="minimal"] .omni-page-link[aria-current="page"]) {
  z-index: 1;
  border-right-width: 1px;
}

/* Responsive behavior */
@media (width <= 640px) {
  :where(.omni-pagination[data-responsive="true"] .omni-page:not([data-control], :has([data-current="page"]), :has([aria-current="page"]))) {
    display: none;
  }
}

/* 
 * USAGE:
 * <nav aria-label="Pagination">
 *   <ul class="omni-pagination" data-size="md" data-align="center">
 *     <li class="omni-page" data-control="prev">
 *       <a href="?page=1" class="omni-page-link" aria-label="Previous">
 *         <svg>...</svg>
 *       </a>
 *     </li>
 *     <li class="omni-page">
 *       <a href="?page=1" class="omni-page-link">1</a>
 *     </li>
 *     <li class="omni-page">
 *       <span class="omni-page-link" data-current="page" aria-current="page">2</span>
 *     </li>
 *     <li class="omni-page">
 *       <a href="?page=3" class="omni-page-link">3</a>
 *     </li>
 *     <li class="omni-page">
 *       <span class="omni-page-ellipsis" aria-hidden="true"></span>
 *     </li>
 *     <li class="omni-page" data-control="next">
 *       <a href="?page=3" class="omni-page-link" aria-label="Next">
 *         <svg>...</svg>
 *       </a>
 *     </li>
 *   </ul>
 * </nav>
 * 
 * Sizes: data-size (sm, md, lg)
 * Alignment: data-align (start, center, end) 
 * Styles: data-style (default, minimal)
 * Responsive: data-responsive="true" (hides numbers on mobile)
 */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI POPOVER - LOW-LEVEL PRIMITIVE
 * Styling for native HTML popover attribute. CSS-only, no JS required.
 * =============================================================================
 *
 * WHEN TO USE SOMETHING ELSE:
 * This is a low-level primitive. For most use cases, prefer:
 * - Modal (Tier 2): Blocking dialogs with focus trap, backdrop
 * - Dropdown (Tier 3): Action menus with keyboard navigation
 * - Tooltip (Tier 3): Accessible hints with proper ARIA
 * - Bottom Drawer (Tier 3): Mobile-friendly sheets
 *
 * WHAT NATIVE POPOVER PROVIDES:
 * ✅ Top layer (no z-index issues)
 * ✅ Light dismiss (click outside closes)
 * ✅ Escape key closes
 * ✅ Works without JavaScript
 *
 * WHAT NATIVE POPOVER DOES NOT PROVIDE:
 * ❌ Any semantic ARIA role
 * ❌ Focus trapping
 * ❌ Backdrop/overlay
 * ❌ Keyboard navigation within content
 *
 * IF YOU USE THIS, ADD ARIA BASED ON CONTENT:
 * - Interactive content: role="dialog" aria-labelledby="title-id"
 * - Action list: role="menu" (but use Dropdown instead)
 * - Selection list: role="listbox" (but use Combobox instead)
 *
 * USAGE:
 *   <button popovertarget="my-popover">Open</button>
 *   <div popover id="my-popover" class="omni-popover">
 *     Content - click outside to close
 *   </div>
 *
 * ============================================================================= */

/* Base popover element */
:where([popover].omni-popover) {
  /* Native popover positioning */
  position: fixed;
  inset: unset;
  inline-size: max-content;
  
  /* Sizing using design tokens */
  min-inline-size: var(--omni-space-48);
  max-inline-size: var(--omni-space-80);
  padding: 0;
  padding: var(--omni-variant-padding-y) var(--omni-variant-padding-x);

  /* Reset native popover styles */
  margin: 0;
  background: transparent;
  
  /* Our styling using variant system */
  background: var(--omni-variant-style-bg);
  border: none;
  border: 1px solid var(--omni-variant-style-border);
  border-radius: var(--omni-radius-md);
  box-shadow: var(--omni-shadow-lg);
  
  /* Smooth entrance using design tokens */
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--omni-transition), transform var(--omni-transition);
  
  /* When open (native :popover-open) */
  &:popover-open {
    opacity: 1;
    transform: scale(1);
  }
}

/* Position variants */
:where([popover].omni-popover[data-position="top"]) {
  transform-origin: bottom center;
}

:where([popover].omni-popover[data-position="bottom"]) {
  transform-origin: top center;
}

:where([popover].omni-popover[data-position="left"]) {
  transform-origin: center right;
}

:where([popover].omni-popover[data-position="right"]) {
  transform-origin: center left;
}

/* Size variants (using variant system) */
:where([popover].omni-popover[data-size="sm"]) {
  min-inline-size: var(--omni-space-32);
  max-inline-size: var(--omni-space-64);
}

:where([popover].omni-popover[data-size="lg"]) {
  min-inline-size: var(--omni-space-64);
  max-inline-size: var(--omni-space-96);
}

/* Mobile responsive */
@media (width <= 640px) {
  :where([popover].omni-popover) {
    max-inline-size: calc(100vw - var(--omni-space-4));
    
    /* Force bottom positioning on mobile */
    &[data-position="top"],
    &[data-position="left"],
    &[data-position="right"] {
      transform-origin: top center;
    }
  }
}

/* Default variant - REQUIRED for component to work */
:where([popover].omni-popover):not([data-variant]) {
  --omni-variant-bg: var(--omni-color-surface);
  --omni-variant-text: var(--omni-color-text);
  --omni-variant-border: var(--omni-color-border);
  --omni-variant-style-bg: var(--omni-variant-bg);
  --omni-variant-style-text: var(--omni-variant-text);
  --omni-variant-style-border: var(--omni-variant-border);
}

:where([popover].omni-popover):not([data-size]) {
  --omni-variant-padding-x: var(--omni-space-4);
  --omni-variant-padding-y: var(--omni-space-3);
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI PROGRESS - NUCLEAR NATIVE EDITION
 * Using semantic <progress> element. Works without JS.
 * ============================================================================= */

/* ===== BASE PROGRESS ===== */

.omni-progress {
  /* Reset browser defaults */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Sizing */
  width: 100%;
  height: 0.75rem;
  
  /* Ensure proper display */
  display: block;
  overflow: hidden;
}

/* Track styling - WebKit/Blink */
.omni-progress::-webkit-progress-bar {
  background-color: var(--omni-color-surface-alt);
  border-radius: var(--omni-radius-sm);
}

/* Fill styling - WebKit/Blink */
.omni-progress::-webkit-progress-value {
  background-color: var(--omni-variant-bg, var(--omni-color-primary));
  border-radius: var(--omni-radius-sm);
  transition: width 0.6s ease;
}

/* Fill styling - Firefox */
.omni-progress::-moz-progress-bar {
  background-color: var(--omni-variant-bg, var(--omni-color-primary));
  border-radius: var(--omni-radius-sm);
  transition: width 0.6s ease;
}

/* Indeterminate state */
.omni-progress:indeterminate {
  background: var(--omni-color-surface-alt);
  position: relative;
  overflow: hidden;
}

.omni-progress:indeterminate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: var(--omni-variant-bg, var(--omni-color-primary));
  border-radius: var(--omni-radius-sm);
  animation: omni-progress-indeterminate 1.5s infinite linear;
  will-change: transform;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .omni-progress:indeterminate::before {
    animation: none;
    left: 0;
    opacity: 0.3;
  }
  
  .omni-progress::-webkit-progress-value,
  .omni-progress::-moz-progress-bar {
    transition: none;
  }
  
  .omni-progress.paused::-webkit-progress-value,
  .omni-progress.paused::-moz-progress-bar {
    animation: none;
  }
}

/* ===== SIZE VARIANTS ===== */

:where(.omni-progress[data-size="sm"]) {
  height: 0.5rem;
}

:where(.omni-progress[data-size="lg"]) {
  height: 1.25rem;
}

/* ===== ANIMATIONS ===== */

@keyframes omni-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* ===== ENHANCED WRAPPER (for JS labels) ===== */

.omni-progress-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.omni-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--omni-text-xs);
  font-weight: 600;
  color: var(--omni-color-text-inverse);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: nowrap;
}

/* ETA label */
.omni-progress-eta {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  font-size: var(--omni-text-xs);
  color: var(--omni-color-text-muted);
}

/* Step label */
.omni-progress-steps {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.25rem;
  font-size: var(--omni-text-xs);
  color: var(--omni-color-text-muted);
}

/* ===== STATE MODIFIERS ===== */

/* Paused state */
.omni-progress.paused {
  opacity: 0.7;
}

.omni-progress.paused::-webkit-progress-value {
  animation: omni-progress-pulse 2s ease-in-out infinite;
}

.omni-progress.paused::-moz-progress-bar {
  animation: omni-progress-pulse 2s ease-in-out infinite;
}

/* Variant states - using OmniUI data-variant system */
[data-variant="danger"] .omni-progress::-webkit-progress-value,
[data-variant="danger"] .omni-progress::-moz-progress-bar {
  background-color: var(--omni-variant-bg);
}

[data-variant="warning"] .omni-progress::-webkit-progress-value,
[data-variant="warning"] .omni-progress::-moz-progress-bar {
  background-color: var(--omni-variant-bg);
}

[data-variant="success"] .omni-progress::-webkit-progress-value,
[data-variant="success"] .omni-progress::-moz-progress-bar {
  background-color: var(--omni-variant-bg);
}

[data-variant="secondary"] .omni-progress::-webkit-progress-value,
[data-variant="secondary"] .omni-progress::-moz-progress-bar {
  background-color: var(--omni-variant-bg);
}

/* Error state class (for JS enhancement) */
.omni-progress.error::-webkit-progress-value,
.omni-progress.error::-moz-progress-bar {
  background-color: var(--omni-color-danger);
}

/* Pulse animation for paused state */
@keyframes omni-progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 
 * USAGE:
 * Basic (CSS only):
 * <progress class="omni-progress" value="70" max="100">70%</progress>
 * 
 * With Variants (wrap in element with data-variant):
 * <div data-variant="danger">
 *   <progress class="omni-progress" value="15" max="100">15%</progress>
 * </div>
 * 
 * Enhanced (Tier 2 with JS):
 * <progress 
 *   class="omni-progress" 
 *   value="0" 
 *   max="100"
 *   data-enhance
 *   data-label="true"
 *   data-animate="true"
 *   data-color-stages="30:danger,70:warning,100:success"
 *   data-track-eta="true"
 *   data-steps="Upload,Process,Complete"
 * >0%</progress>
 *
 * Indeterminate:
 * <progress class="omni-progress"></progress>
 *
 * Without JS: Still shows working progress bar
 * With JS: All fancy features activate
 *
 * ACCESSIBILITY NOTES:
 * - Color states (danger/warning/success) must include aria-label
 *   Example: aria-label="Upload progress: 30%, low"
 * - Use aria-busy="true" during indeterminate state
 * - Consider aria-live="polite" for dynamic updates
 */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI RANGE SLIDER
 * Native HTML5 range input with data-size support
 * =============================================================================
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Range inputs MUST have associated labels for screen reader users.
 *
 *   <label for="volume">Volume</label>
 *   <div class="omni-range" data-size="md">
 *     <input type="range" id="volume" min="0" max="100" value="50">
 *   </div>
 *
 * With visible value display:
 *   <label for="brightness">Brightness: <output id="brightness-value">50</output>%</label>
 *   <div class="omni-range">
 *     <input type="range" id="brightness" min="0" max="100" value="50"
 *            aria-describedby="brightness-value">
 *   </div>
 *
 * ============================================================================= */

:where(.omni-range) {
  position: relative;
  display: block;
  inline-size: 100%;
  margin-block: var(--omni-variant-margin, var(--omni-space-4));
  
  /* Default sizes */
  --omni-variant-track-height: 0.5rem;
  --omni-variant-thumb-size: 1.25rem;
  --omni-variant-label-gap: var(--omni-space-2);
  --omni-variant-label-font-size: var(--omni-text-sm);
}

:where(.omni-range) input[type="range"] {
  inline-size: 100%;
  block-size: var(--omni-variant-track-height);
  appearance: none;
  cursor: pointer;
  outline: none;
  background: var(--omni-color-border);
  border-radius: var(--omni-radius-full);
  transition: background var(--omni-transition);
}

:where(.omni-range) input[type="range"]:hover:not(:disabled) {
  background: var(--omni-color-border);
}

:where(.omni-range) input[type="range"]:focus {
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--omni-color-primary) 20%, transparent);
}

:where(.omni-range) input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* WebKit browsers (Chrome, Safari, Edge) */
:where(.omni-range) input[type="range"]::-webkit-slider-thumb {
  inline-size: var(--omni-variant-thumb-size);
  block-size: var(--omni-variant-thumb-size);
  appearance: none;
  cursor: pointer;
  background: var(--omni-color-primary);
  border: 2px solid var(--omni-color-surface);
  border-radius: 50%;
  box-shadow: var(--omni-shadow-sm);
  transition: all var(--omni-transition);
}

:where(.omni-range) input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: var(--omni-shadow-md);
  transform: scale(1.1);
}

:where(.omni-range) input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

/* Firefox */
:where(.omni-range) input[type="range"]::-moz-range-thumb {
  inline-size: var(--omni-variant-thumb-size);
  block-size: var(--omni-variant-thumb-size);
  cursor: pointer;
  background: var(--omni-color-primary);
  border: 2px solid var(--omni-color-surface);
  border-radius: 50%;
  box-shadow: var(--omni-shadow-sm);
  transition: all var(--omni-transition);
}

:where(.omni-range) input[type="range"]::-moz-range-thumb:hover {
  box-shadow: var(--omni-shadow-md);
  transform: scale(1.1);
}

:where(.omni-range) input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.15);
}

/* Firefox track */
:where(.omni-range) input[type="range"]::-moz-range-track {
  block-size: var(--omni-variant-track-height);
  background: var(--omni-color-border);
  border: none;
  border-radius: var(--omni-radius-full);
}

/* Optional labels */
:where(.omni-range-labels) {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--omni-variant-label-gap);
  font-size: var(--omni-variant-label-font-size);
  color: var(--omni-color-text-muted);
}

/* Optional value display */
:where(.omni-range-value) {
  margin-block-end: var(--omni-variant-label-gap);
  font-size: var(--omni-variant-label-font-size);
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-text);
  text-align: center;
}

/* Size variants */
:where(.omni-range[data-size="sm"]) {
  --omni-variant-track-height: 0.375rem;
  --omni-variant-thumb-size: 1rem;
}

:where(.omni-range[data-size="lg"]) {
  --omni-variant-track-height: 0.625rem;
  --omni-variant-thumb-size: 1.5rem;
}

/* -----------------------------------------------------------------------------
 * Vertical orientation
 * Uses transform rotation - more reliable cross-browser than writing-mode
 * ----------------------------------------------------------------------------- */
:where(.omni-range[data-orientation="vertical"]) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  inline-size: auto;
  block-size: 12rem;
  margin-inline: var(--omni-space-4);
  margin-block: 0;
}

:where(.omni-range[data-orientation="vertical"]) input[type="range"] {
  inline-size: 12rem; /* Match container height */
  transform: rotate(-90deg);
  transform-origin: center center;
}

:where(.omni-range[data-orientation="vertical"]) .omni-range-labels {
  flex-direction: column-reverse;
  margin-block-start: 0;
  margin-inline-start: var(--omni-variant-label-gap);
}

:where(.omni-range[data-orientation="vertical"]) .omni-range-value {
  margin-block-end: 0;
  margin-inline-end: var(--omni-variant-label-gap);
}

/* -----------------------------------------------------------------------------
 * Tick marks
 * ----------------------------------------------------------------------------- */

:where(.omni-range-ticks) {
  display: flex;
  justify-content: space-between;
  padding-inline: calc(var(--omni-variant-thumb-size) / 2);
  margin-block-start: var(--omni-space-1);
}

:where(.omni-range-tick) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--omni-space-1);
  font-size: var(--omni-text-xs);
  color: var(--omni-color-text-muted);
}

:where(.omni-range-tick)::before {
  content: '';
  inline-size: 1px;
  block-size: 0.5rem;
  background: var(--omni-color-border);
}

/* -----------------------------------------------------------------------------
 * Dual Range (Tier 2 - requires JS)
 * ----------------------------------------------------------------------------- */
:where(.omni-range-dual) {
  position: relative;
  display: block;
  inline-size: 100%;
  padding-block: calc(var(--omni-variant-thumb-size, 1.25rem) / 2);
  margin-block: var(--omni-space-4);

  --omni-variant-track-height: 0.5rem;
  --omni-variant-thumb-size: 1.25rem;
}

:where(.omni-range-dual-track) {
  position: relative;
  block-size: var(--omni-variant-track-height);
  background: var(--omni-color-border);
  border-radius: var(--omni-radius-full);
}

:where(.omni-range-track-fill) {
  position: absolute;
  block-size: 100%;
  background: var(--omni-color-primary);
  border-radius: var(--omni-radius-full);
}

:where(.omni-range-dual) input[type="range"] {
  position: absolute;
  top: 0;
  inline-size: 100%;
  block-size: 100%;
  appearance: none;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

:where(.omni-range-dual) input[type="range"]::-webkit-slider-thumb {
  inline-size: var(--omni-variant-thumb-size);
  block-size: var(--omni-variant-thumb-size);
  appearance: none;
  cursor: pointer;
  background: var(--omni-color-primary);
  border: 2px solid var(--omni-color-surface);
  border-radius: 50%;
  box-shadow: var(--omni-shadow-sm);
  pointer-events: auto;
}

:where(.omni-range-dual) input[type="range"]::-moz-range-thumb {
  inline-size: var(--omni-variant-thumb-size);
  block-size: var(--omni-variant-thumb-size);
  cursor: pointer;
  background: var(--omni-color-primary);
  border: 2px solid var(--omni-color-surface);
  border-radius: 50%;
  box-shadow: var(--omni-shadow-sm);
  pointer-events: auto;
}

:where(.omni-range-dual-values) {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--omni-space-2);
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-range) input[type="range"],
  :where(.omni-range) input[type="range"]::-webkit-slider-thumb,
  :where(.omni-range) input[type="range"]::-moz-range-thumb {
    transition: none;
  }
  
  :where(.omni-range) input[type="range"]::-webkit-slider-thumb:hover,
  :where(.omni-range) input[type="range"]::-webkit-slider-thumb:active,
  :where(.omni-range) input[type="range"]::-moz-range-thumb:hover,
  :where(.omni-range) input[type="range"]::-moz-range-thumb:active {
    transform: none;
  }
}

/*
 * USAGE:
 * <div class="omni-range" data-size="md">
 *   <div class="omni-range-value">50</div>
 *   <input type="range" min="0" max="100" value="50">
 *   <div class="omni-range-labels">
 *     <span>0</span>
 *     <span>100</span>
 *   </div>
 * </div>
 * 
 * Sizes: data-size (sm, md, lg)
 * Uses variant system for track height, thumb size, and spacing
 */
}
@layer omniui.components{

/**
 * Nuclear Scroll Gallery - Functional CSS
 * Native scroll with CSS snap points
 * Add your own visual styling on top
 */

/* Container must scroll with snap points */
.scroll-gallery {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
}

/* Hide scrollbar but keep functionality */
.scroll-gallery.no-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.scroll-gallery.no-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Track holds the items */
.scroll-gallery .track {
  display: flex;
}

/* Each item snaps to position */
.scroll-gallery .item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Variable width items */
.scroll-gallery .item.variable {
  flex: 0 0 auto;
}

/* Center alignment option */
.scroll-gallery .item.center {
  scroll-snap-align: center;
}

/* Vertical gallery option */
.scroll-gallery.vertical {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}
.scroll-gallery.vertical .track {
  flex-direction: column;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-gallery {
    scroll-behavior: auto;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI SELECT
 * =============================================================================
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Selects MUST be associated with labels for screen reader users.
 *
 *   <label for="country">Country</label>
 *   <select id="country" class="omni-select" data-size="md">
 *     <option value="">Choose...</option>
 *     <option value="us">United States</option>
 *   </select>
 *
 * Required field:
 *   <label for="role">Role <span aria-hidden="true">*</span></label>
 *   <select id="role" class="omni-select" required aria-required="true">
 *
 * Error state (styling via interaction-states.css):
 *   <select id="country" class="omni-select"
 *           aria-invalid="true" aria-describedby="country-error">
 *   <span id="country-error" role="alert">Please select a country</span>
 *
 * ============================================================================= */

:where(.omni-select) {
  display: block;
  width: var(--omni-variant-width);
  height: var(--omni-variant-height);
  padding: var(--omni-variant-padding-y) var(--omni-space-10) var(--omni-variant-padding-y) var(--omni-variant-padding-x);
  
  font-family: inherit;
  font-size: var(--omni-variant-font-size);
  line-height: 1.5;
  color: var(--omni-color-text);
  
  background: var(--omni-color-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") no-repeat right var(--omni-space-3) center/16px 16px;
  border: var(--omni-input-border);
  border-radius: var(--omni-input-radius);
  
  appearance: none;
  cursor: pointer;
  transition: var(--omni-transition);
  
  /* ONE default to prevent total breakage - minimal default styling */
  --omni-variant-width: 200px;
  --omni-variant-height: 32px;
  --omni-variant-padding-y: var(--omni-space-1);
  --omni-variant-padding-x: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-xs);
}

:where(.omni-select:focus) {
  border: var(--omni-input-focus-border);
  outline: 3px solid color-mix(in sRGB, var(--omni-color-primary) 20%, transparent);
  outline-offset: 0;
}

/* Multiple select - remove dropdown arrow */
:where(.omni-select[multiple]) {
  background-image: none;
  padding-right: var(--omni-variant-padding-x);
  height: auto;
}

/* SIZE VARIANTS - Use data-size or get ugly defaults */
:where(.omni-select[data-size="sm"]) {
  --omni-variant-padding-y: var(--omni-space-1);
  --omni-variant-padding-x: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-height: 32px;
}

:where(.omni-select[data-size="md"]) {
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-height: 40px;
}

:where(.omni-select[data-size="lg"]) {
  --omni-variant-padding-y: var(--omni-space-3);
  --omni-variant-padding-x: var(--omni-space-4);
  --omni-variant-font-size: var(--omni-text-lg);
  --omni-variant-height: 48px;
}

/* WIDTH VARIANTS */
:where(.omni-select[data-width="sm"]) {
  --omni-variant-width: 150px;
}

:where(.omni-select[data-width="md"]) {
  --omni-variant-width: 250px;
}

:where(.omni-select[data-width="lg"]) {
  --omni-variant-width: 350px;
}

:where(.omni-select[data-width="full"]) {
  --omni-variant-width: 100%;
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI SIDEBAR COMPONENT - NUCLEAR CSS
   Data attributes: 
   - data-state (hidden/icon/extended) - Visual states only
   - data-position (left/right) - Positioning
   
   Note: This component provides visual states only. State management,
   breakpoint decisions, and overlay/backdrop handling are left to
   the implementing design system.
   ============================================================================= */

/* Base sidebar - hidden by default */
:where(.omni-sidebar) {
  position: fixed;
  inset-block: var(--omni-navbar-height) 0;
  
  /* Left positioning (default) */
  inset-inline-start: 0;
  z-index: var(--omni-z-dropdown); /* Sticky layer */
  display: flex;
  flex-direction: column;
  
  /* Hidden state (default) */
  inline-size: 0;
  overflow: hidden;
  background: var(--omni-color-surface);
  border: var(--omni-border-width) solid var(--omni-color-border);
  border-inline-start: none;
  border-inline-end: var(--omni-border-width) solid var(--omni-color-border);
  transform: translateX(-100%);
  transition: all var(--omni-duration-300) var(--omni-ease-out);
}

/* Right positioning */
:where(.omni-sidebar[data-position="right"]) {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-inline-start: var(--omni-border-width) solid var(--omni-color-border);
  border-inline-end: none;
  transform: translateX(100%);
}

/* Sidebar states */
:where(.omni-sidebar[data-state="icon"]) {
  inline-size: var(--omni-sidebar-width-collapsed);
  transform: translateX(0);
}

:where(.omni-sidebar[data-state="icon"]) :where(.omni-sidebar-text) {
  display: none;
}

:where(.omni-sidebar[data-state="icon"]) :where(.omni-sidebar-content) {
  padding: var(--omni-space-4) var(--omni-space-2);
}

:where(.omni-sidebar[data-state="icon"]) :where(.omni-sidebar-item) {
  gap: 0;
  justify-content: center;
  padding: var(--omni-space-3);
}

:where(.omni-sidebar[data-state="extended"]) {
  inline-size: var(--omni-sidebar-width);
  transform: translateX(0);
}

:where(.omni-sidebar[data-state="extended"]) :where(.omni-sidebar-text) {
  display: block;
}

/* Sidebar structure */
:where(.omni-sidebar-header) {
  display: none; /* Hidden by default on desktop */
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  block-size: var(--omni-navbar-height);
  padding-inline: var(--omni-space-4);
  background: var(--omni-color-surface-alt);
  border-block-end: var(--omni-border-width) solid var(--omni-color-border);
}

:where(.omni-sidebar-title) {
  margin: 0;
  font-size: var(--omni-text-lg);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
}

/* Close button - use global .omni-close utility */

:where(.omni-sidebar-content) {
  flex: 1;
  min-block-size: 0; /* Necessary for flex overflow */
  padding: var(--omni-space-4);
  overflow-y: auto;

  /* Scroll behavior handled by global scrollbar utility */
}

/* Sidebar navigation */
:where(.omni-sidebar-nav) {
  display: flex;
  flex-direction: column;
  gap: var(--omni-space-1);
}

:where(.omni-sidebar-item) {
  display: flex;
  gap: var(--omni-space-3);
  align-items: center;
  inline-size: 100%;
  padding: var(--omni-space-3);
  color: var(--omni-color-text);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--omni-radius);
  transition: all var(--omni-transition);
}

:where(.omni-sidebar-item):hover {
  background: var(--omni-color-surface-alt);
}

/* Focus ring handled by global utility */

:where(.omni-sidebar-item[data-active="true"]) {
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-primary);
  background: color-mix(in sRGB, var(--omni-color-primary) 10%, transparent);
}

:where(.omni-sidebar-item[data-active="true"]):hover {
  background: color-mix(in sRGB, var(--omni-color-primary) 15%, transparent);
}

/* Disabled state handled by global utility */

:where(.omni-sidebar-icon) {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: var(--omni-space-6);
  block-size: var(--omni-space-6);
  font-size: var(--omni-text-xl);
  line-height: 1;
}

:where(.omni-sidebar-text) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--omni-text-sm);
  line-height: 1.25; /* Tight line height for UI elements */
  white-space: nowrap;
}

/* Badge - use global .omni-badge utility */

/* Optional: Basic responsive adjustments */
@media (width <= 900px) { /* --omni-breakpoint-md */
  :where(.omni-sidebar-header) {
    display: flex; /* Show header on mobile for close button */
  }
}

/* Accessibility - High contrast */
@media (prefers-contrast: high) {
  :where(.omni-sidebar) {
    border-width: var(--omni-border-width-2);
  }
  
  :where(.omni-sidebar-item[data-active="true"]) {
    border: var(--omni-border-width-2) solid var(--omni-color-primary);
  }
}

/* Reduced motion handled by global utility */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI SKELETON - LOADING PLACEHOLDERS
 * Uses data-variant for animation, data-shape for form
 * =============================================================================
 *
 * RESEARCH (GitLab, Nord, MUI, Carbon):
 * - Shapes: text, circle, rect, rounded
 * - Animations: pulse (default), shimmer/wave
 * - Accessibility: aria-busy="true" on parent, reduced motion support
 * - Don't use for: buttons, inputs, modals, dropdowns
 * - Avoid showing for <300ms loads (prevents flash)
 *
 * USAGE:
 * <div aria-busy="true">
 *   <div class="omni-skeleton" data-shape="text" style="width: 60%"></div>
 *   <div class="omni-skeleton" data-shape="circle" style="width: 3rem"></div>
 * </div>
 * ============================================================================= */

:where(.omni-skeleton) {
  display: block;
  background: var(--omni-color-border);
  border-radius: var(--omni-radius-sm);
  animation: omni-pulse 1.5s ease-in-out infinite;
}

/* Shimmer/wave animation variant */
:where(.omni-skeleton[data-variant="shimmer"]) {
  background: linear-gradient(
    90deg,
    var(--omni-color-border) 0%,
    var(--omni-color-surface-alt) 50%,
    var(--omni-color-border) 100%
  );
  background-size: 200% 100%;
  animation: omni-shimmer 1.2s ease-in-out infinite;
}

/* =============================================================================
 * SHAPES
 * ============================================================================= */

/* Text - for paragraph lines */
:where(.omni-skeleton[data-shape="text"]) {
  block-size: 1em;
  margin-block: 0.25em;
}

/* Circle - for avatars */
:where(.omni-skeleton[data-shape="circle"]) {
  aspect-ratio: 1;
  border-radius: var(--omni-radius-full);
}

/* Rounded - for image cards, thumbnails */
:where(.omni-skeleton[data-shape="rounded"]) {
  border-radius: var(--omni-radius-lg);
}

/* Rect - for video/image placeholders (16:9) */
:where(.omni-skeleton[data-shape="rect"]) {
  aspect-ratio: 16/9;
}

/* =============================================================================
 * ACCESSIBILITY
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.omni-skeleton) {
    opacity: 0.6;
    animation: none;
  }
}
}
@layer omniui.components{
/* =============================================================================
 * OMNIUI SPINNER - NUCLEAR DATA VARIANT EDITION
 * Simple, efficient loading animation.
 * =============================================================================
 *
 * Base spinner - uses variant system for sizing and color */
.omni-spinner {
  display: inline-block;
  width: var(--omni-variant-icon-size, 1.25rem);
  height: var(--omni-variant-icon-size, 1.25rem);
  vertical-align: middle;
  border: 2px solid rgb(0, 0, 0, 0.1);
  border-top-color: var(--omni-variant-bg, currentColor);
  border-radius: 50%;
  animation: omni-spin 0.75s linear infinite;
}

/* Size overrides for extreme cases */
:where(.omni-spinner[data-size="xs"]) {
  width: 0.75rem;
  height: 0.75rem;
  border-width: 1.5px;
}

:where(.omni-spinner[data-size="xl"]) {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI STEPPER - NUCLEAR EDITION  
   Shows progress through sequential steps using data attributes.
   ============================================================================= */

/* Base stepper container */
:where(.omni-stepper) {
  display: flex;
  gap: var(--omni-variant-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Individual step */
:where(.omni-step) {
  position: relative;
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
}

/* Step indicator circle */
:where(.omni-step-indicator) {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--omni-variant-indicator-size);
  block-size: var(--omni-variant-indicator-size);
  font-size: var(--omni-variant-font-size);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text-muted);
  background: var(--omni-color-surface);
  border: var(--omni-border-width-thick) solid var(--omni-color-border);
  border-radius: 50%;
  transition: var(--omni-transition);
}

/* Step content wrapper */
:where(.omni-step-content) {
  min-inline-size: 0;
}

/* Step title */
:where(.omni-step-title) {
  margin: 0 0 var(--omni-space-half) 0;
  font-size: var(--omni-variant-font-size);
  font-weight: var(--omni-font-medium);
  color: var(--omni-color-text);
}

/* State variants using data attributes */
:where(.omni-step[data-state="active"]) .omni-step-indicator {
  color: var(--omni-color-primary-text);
  background: var(--omni-color-primary);
  border-color: var(--omni-color-primary);
}

:where(.omni-step[data-state="completed"]) .omni-step-indicator {
  color: var(--omni-color-success-text);
  background: var(--omni-color-success);
  border-color: var(--omni-color-success);
}

/* Connecting lines (horizontal) */
:where(.omni-step):not(:last-child)::after {
  flex: 1;
  block-size: var(--omni-border-width-thick);
  margin: 0 var(--omni-space-2);
  content: '';
  background: var(--omni-color-border);
}

/* Vertical orientation variant */
:where(.omni-stepper[data-orientation="vertical"]) {
  flex-direction: column;
}

:where(.omni-stepper[data-orientation="vertical"]) .omni-step:not(:last-child)::after {
  position: absolute;
  inset-block-start: var(--omni-variant-indicator-size);
  inset-inline-start: var(--omni-variant-line-offset);
  inline-size: var(--omni-border-width-thick);
  block-size: var(--omni-variant-gap);
  margin: 0;
}

/* Size variants */
:where(.omni-stepper[data-size="sm"]) {
  --omni-variant-indicator-size: var(--omni-space-6);
  --omni-variant-font-size: var(--omni-text-xs);
  --omni-variant-gap: var(--omni-space-3);
  --omni-variant-line-offset: calc(var(--omni-space-3) - var(--omni-border-width-thick) / 2);
}

:where(.omni-stepper[data-size="lg"]) {
  --omni-variant-indicator-size: var(--omni-space-10);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-gap: var(--omni-space-6);
  --omni-variant-line-offset: calc(var(--omni-space-5) - var(--omni-border-width-thick) / 2);
}

/* Default size - REQUIRED for component to work */
:where(.omni-stepper):not([data-size]) {
  --omni-variant-indicator-size: var(--omni-space-8);
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-gap: var(--omni-space-4);
  --omni-variant-line-offset: calc(var(--omni-space-4) - var(--omni-border-width-thick) / 2);
}

/* =============================================================================
   INTERACTIVE STEP LINKS
   ============================================================================= */

:where(.omni-step-link) {
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

:where(.omni-step-link:hover) .omni-step-indicator {
  border-color: var(--omni-color-primary);
}

:where(.omni-step-link:focus-visible) {
  outline: var(--omni-focus-ring);
  outline-offset: var(--omni-focus-ring-offset);
  border-radius: var(--omni-radius-sm);
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :where(.omni-step[data-state="active"]) .omni-step-indicator {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  :where(.omni-step[data-state="completed"]) .omni-step-indicator {
    outline: 2px solid currentColor;
  }
}

/* Current step indicator for screen reader users */
:where(.omni-step [aria-current="step"]) {
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TABLE COMPONENT - LEAN & SEMANTIC
 * Simple table styling with sensible defaults
 * ============================================================================= */

/* ============================================================================
 * BASE TABLE
 * ============================================================================ */

:where(.omni-table) {
  inline-size: 100%;
  margin-block-end: var(--omni-space-4);
  font-size: var(--omni-variant-font-size, var(--omni-font-sm));
  line-height: 1.5;
  color: var(--omni-color-text);
  border-collapse: collapse;
  background-color: var(--omni-color-surface);
}

:where(.omni-table) th,
:where(.omni-table) td {
  padding: var(--omni-variant-padding-y, var(--omni-space-3)) var(--omni-variant-padding-x, var(--omni-space-4));
  vertical-align: top;
  border-block-start: 1px solid var(--omni-color-border);
}

:where(.omni-table) thead th {
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
  text-align: start;
  border-block-start: 0;
  border-block-end: 2px solid var(--omni-color-border);
}

:where(.omni-table) caption {
  padding-block: var(--omni-variant-padding-y, var(--omni-space-3));
  padding-inline: 0;
  color: var(--omni-color-text-muted);
  text-align: start;
  caption-side: block-end;
}

/* Table footer - summary rows, totals */
:where(.omni-table) tfoot {
  font-weight: var(--omni-font-semibold);
}

:where(.omni-table) tfoot td,
:where(.omni-table) tfoot th {
  border-block-start: 2px solid var(--omni-color-border);
  background-color: var(--omni-color-surface-alt);
}

/* Row headers - th elements in tbody with scope="row" */
:where(.omni-table) tbody th[scope="row"] {
  font-weight: var(--omni-font-semibold);
  text-align: start;
}

/* ============================================================================
 * TABLE VARIANTS - DATA ATTRIBUTES
 * ============================================================================ */

/* Striped rows */
:where(.omni-table[data-striped="true"]) tbody tr:nth-of-type(odd) {
  background-color: var(--omni-color-surface-alt);
}

/* Hoverable rows */
:where(.omni-table[data-hover="true"]) tbody tr:hover {
  background-color: var(--omni-color-surface-alt);
}

/* Bordered table */
:where(.omni-table[data-bordered="true"]) {
  border: 1px solid var(--omni-color-border);
}

:where(.omni-table[data-bordered="true"]) th,
:where(.omni-table[data-bordered="true"]) td {
  border: 1px solid var(--omni-color-border);
}

/* Borderless table */
:where(.omni-table[data-borderless="true"]) th,
:where(.omni-table[data-borderless="true"]) td,
:where(.omni-table[data-borderless="true"]) thead th {
  border: 0;
}

/* ============================================================================
 * SIZE VARIANTS - DATA ATTRIBUTES
 * ============================================================================ */

/* Small size */
:where(.omni-table[data-size="sm"]) th,
:where(.omni-table[data-size="sm"]) td {
  padding: var(--omni-space-2);
  font-size: var(--omni-text-sm);
}

/* Large size */
:where(.omni-table[data-size="lg"]) th,
:where(.omni-table[data-size="lg"]) td {
  padding: var(--omni-space-4);
  font-size: var(--omni-text-lg);
}

/* Dense size - compact for data-heavy displays */
:where(.omni-table[data-size="dense"]) th,
:where(.omni-table[data-size="dense"]) td {
  padding: var(--omni-space-1) var(--omni-space-2);
  font-size: var(--omni-text-sm);
}

/* ============================================================================
 * STICKY HEADER
 * ============================================================================ */

/*
 * Usage: Wrap table in container with max-height and overflow-y: auto
 * <div class="omni-table-responsive" style="max-height: 400px; overflow-y: auto;">
 *   <table class="omni-table" data-sticky-header="true">...</table>
 * </div>
 */
:where(.omni-table[data-sticky-header="true"]) thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background-color: var(--omni-color-surface);
}

/* Ensure border visibility when scrolled (border-collapse hides it) */
:where(.omni-table[data-sticky-header="true"]) thead th::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  border-block-end: 2px solid var(--omni-color-border);
}

/* Remove original border since we're using pseudo-element */
:where(.omni-table[data-sticky-header="true"]) thead th {
  border-block-end: 0;
}

/* ============================================================================
 * RESPONSIVE CONTAINER
 * ============================================================================ */

:where(.omni-table-responsive) {
  display: block;
  inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.omni-table-responsive) .omni-table {
  margin-block-end: 0;
}

/* ============================================================================
 * DEFAULT SIZE - REQUIRED FOR COMPONENT TO WORK
 * ============================================================================ */

:where(.omni-table):not([data-size]) {
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-padding-y: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-base);
}

/* ============================================================================
 * RESPONSIVE CARDS PATTERN
 * On mobile, rows become stacked cards with label-value pairs
 *
 * Usage:
 * <table class="omni-table" data-responsive="cards">
 *   <thead>...</thead>
 *   <tbody>
 *     <tr>
 *       <td data-label="Name">Alice</td>
 *       <td data-label="Email">alice@example.com</td>
 *     </tr>
 *   </tbody>
 * </table>
 * ============================================================================ */

:where(.omni-table[data-responsive="cards"]) {
  --omni-table-card-breakpoint: 768px;
}

@media (max-width: 768px) {
  :where(.omni-table[data-responsive="cards"]) {
    display: block;
  }

  :where(.omni-table[data-responsive="cards"]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  :where(.omni-table[data-responsive="cards"]) tbody {
    display: flex;
    flex-direction: column;
    gap: var(--omni-space-4);
  }

  :where(.omni-table[data-responsive="cards"]) tbody tr {
    display: block;
    padding: var(--omni-space-4);
    background-color: var(--omni-color-surface);
    border: 1px solid var(--omni-color-border);
    border-radius: var(--omni-radius);
    box-shadow: var(--omni-shadow-sm);
  }

  :where(.omni-table[data-responsive="cards"]) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--omni-space-3);
    padding: var(--omni-space-2) 0;
    border: 0;
    border-block-end: 1px solid var(--omni-color-border);
  }

  :where(.omni-table[data-responsive="cards"]) tbody td:last-child {
    border-block-end: 0;
  }

  :where(.omni-table[data-responsive="cards"]) tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: var(--omni-font-semibold);
    color: var(--omni-color-text-muted);
    font-size: var(--omni-text-sm);
  }

  :where(.omni-table[data-responsive="cards"]) tbody td:not([data-label])::before {
    content: none;
  }

  /* Reset striped styling in card mode */
  :where(.omni-table[data-responsive="cards"][data-striped="true"]) tbody tr:nth-of-type(odd) {
    background-color: var(--omni-color-surface);
  }

  /* Footer in card mode */
  :where(.omni-table[data-responsive="cards"]) tfoot {
    display: block;
    margin-block-start: var(--omni-space-4);
  }

  :where(.omni-table[data-responsive="cards"]) tfoot tr {
    display: block;
    padding: var(--omni-space-4);
    background-color: var(--omni-color-surface-alt);
    border: 1px solid var(--omni-color-border);
    border-radius: var(--omni-radius);
  }

  :where(.omni-table[data-responsive="cards"]) tfoot td,
  :where(.omni-table[data-responsive="cards"]) tfoot th {
    display: flex;
    justify-content: space-between;
    padding: var(--omni-space-2) 0;
    border: 0;
  }
}

/* ============================================================================
 * SORTABLE COLUMNS (Tier 2 - JS adds sorting, CSS provides visual states)
 * ============================================================================ */

/* Sortable column header - indicate clickable */
:where(.omni-table) th[data-sortable] {
  cursor: pointer;
  user-select: none;
  transition: var(--omni-transition);
}

:where(.omni-table) th[data-sortable]:hover {
  background-color: var(--omni-color-surface-alt);
}

:where(.omni-table) th[data-sortable]:focus-visible {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: -2px;
}

/* Sort direction indicators - stacked arrows for consistent width */
:where(.omni-table) th[data-sortable] {
  position: relative;
}

:where(.omni-table) th[data-sortable]::after {
  content: '▲\A▼';
  white-space: pre;
  position: absolute;
  inset-inline-end: var(--omni-space-2);
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 0.5em;
  line-height: 1;
  opacity: 0.3;
}

:where(.omni-table) th[data-sortable] {
  padding-inline-end: calc(var(--omni-space-4) + 1em);
}

:where(.omni-table) th[aria-sort="ascending"]::after {
  /* Highlight up arrow only */
  opacity: 1;
  background: linear-gradient(to bottom, var(--omni-color-primary) 50%, var(--omni-color-text-muted) 50%);
  background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

:where(.omni-table) th[aria-sort="descending"]::after {
  content: '▲\A▼';
  opacity: 1;
  /* Highlight down arrow only */
  background: linear-gradient(to top, var(--omni-color-primary) 50%, var(--omni-color-text-muted) 50%);
  background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Active sort column styling */
:where(.omni-table) th[aria-sort="ascending"],
:where(.omni-table) th[aria-sort="descending"] {
  color: var(--omni-color-primary);
}

/* ============================================================================
 * ACCESSIBILITY
 * ============================================================================ */

/* High contrast support */
@media (prefers-contrast: high) {
  :where(.omni-table) th,
  :where(.omni-table) td {
    border-width: 2px;
  }
}

/* Ensure card borders are visible in high contrast */
@media (prefers-contrast: high) and (max-width: 768px) {
  :where(.omni-table[data-responsive="cards"]) tbody tr {
    border-width: 2px;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TAG - LEAN & REMOVABLE
 * Works by default, enhances with data attributes
 * ============================================================================= */

/* Base tag with sensible defaults */
:where(.omni-tag) {
  display: inline-flex;
  gap: var(--omni-variant-gap, var(--omni-space-2));
  align-items: center;
  max-inline-size: 100%;
  padding: var(--omni-variant-padding-y, var(--omni-space-1)) var(--omni-variant-padding-x, var(--omni-space-3));
  font-size: var(--omni-variant-font-size, var(--omni-text-sm));
  font-weight: var(--omni-font-medium);
  color: var(--omni-variant-style-text, var(--omni-color-text-inverse));
  background: var(--omni-variant-style-bg, var(--omni-color-text-muted));
  border: 1px solid var(--omni-variant-style-border, var(--omni-color-text-muted));
  border-radius: var(--omni-radius-full);
  transition: all var(--omni-transition);
}

/* Tag text with truncation */
:where(.omni-tag-text) {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Close button styling */
:where(.omni-tag .omni-close) {
  border-radius: 50%;
}

:where(.omni-tag .omni-close:hover) {
  color: var(--omni-color-danger);
}

/* Style variants handled by global variant system */

/* Default variant colors (when no data-variant specified) */
:where(.omni-tag):not([data-variant]) {
  --omni-variant-style-bg: var(--omni-color-text-muted);
  --omni-variant-style-text: var(--omni-color-text-inverse);
  --omni-variant-style-border: var(--omni-color-text-muted);
}

/* 
 * USAGE:
 * <span class="omni-tag" data-variant="primary" data-size="sm">
 *   <span class="omni-tag-text">React</span>
 *   <button class="omni-close omni-close-sm" aria-label="Remove tag"></button>
 * </span>
 * 
 * <span class="omni-tag" data-variant="success" data-variant-style="soft">
 *   <span class="omni-tag-text">Completed</span>
 * </span>
 * 
 * <span class="omni-tag" data-variant="danger" data-variant-style="outline">
 *   <span class="omni-tag-text">Error</span>
 * </span>
 * 
 * Variants: data-variant (primary, success, warning, danger, etc.)
 * Styles: data-variant-style (solid, soft, outline, ghost)
 * Sizes: data-size (sm, md, lg)
 */
}
@layer omniui.components{
/* Temporal inputs use variant system */
:where(
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
) {
  display: block;
  width: var(--omni-variant-width);
  height: var(--omni-variant-height);
  padding: var(--omni-variant-padding-y) var(--omni-variant-padding-x);
  font-family: inherit;
  font-size: var(--omni-variant-font-size);
  line-height: 1.5;
  color: var(--omni-color-text);
  appearance: none;
  cursor: pointer;
  background: var(--omni-color-surface);
  border: var(--omni-input-border);
  border-radius: var(--omni-input-radius);
  transition: var(--omni-transition);
}

:where(
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
)::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

:where(
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
):focus {
  border: var(--omni-input-focus-border);
  box-shadow: 0 0 0 3px color-mix(in sRGB, var(--omni-color-primary) 20%, transparent);
}


/* Date/time range container */
:where(.omni-temporal-range) {
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
}

:where(.omni-temporal-range) input {
  flex: 1;
  min-width: 0; /* Prevent flex item overflow */
}

:where(.omni-temporal-range) span {
  flex-shrink: 0; /* Prevent separator from shrinking */
  color: var(--omni-color-text-muted);
  user-select: none;
}

/*
 * NUCLEAR USAGE - NO CLASSES REQUIRED:
 * <input type="date" data-size="md" aria-label="Select date">
 * <input type="time" data-size="sm" aria-label="Select time">
 * <input type="datetime-local" data-variant="error" aria-label="Select date and time">
 * 
 * Range:
 * <div class="omni-temporal-range">
 *   <input type="time" data-size="md" aria-label="Start time">
 *   <span>to</span>
 *   <input type="time" data-size="md" aria-label="End time">
 * </div>
 * 
 * Direct input type styling with variant system. No extra classes needed.
 */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TEXT INPUT
 * =============================================================================
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Inputs MUST be associated with labels for screen reader users.
 *
 *   <label for="email">Email</label>
 *   <input type="email" id="email" class="omni-text-input" data-size="md">
 *
 * Icon-only input (use aria-label):
 *   <input type="search" class="omni-text-input" aria-label="Search">
 *
 * Required field:
 *   <label for="name">Name <span aria-hidden="true">*</span></label>
 *   <input id="name" class="omni-text-input" required aria-required="true">
 *
 * Error state (styling via interaction-states.css):
 *   <input id="email" class="omni-text-input"
 *          aria-invalid="true" aria-describedby="email-error">
 *   <span id="email-error" role="alert">Please enter a valid email</span>
 *
 * ============================================================================= */

:where(.omni-text-input) {
  display: block;
  width: var(--omni-variant-width);
  height: var(--omni-variant-height);
  padding: var(--omni-variant-padding-y) var(--omni-variant-padding-x);
  font-family: inherit;
  font-size: var(--omni-variant-font-size);
  line-height: 1.5;
  color: var(--omni-color-text);
  appearance: none;
  background: var(--omni-color-surface);
  border: var(--omni-input-border);
  border-radius: var(--omni-input-radius);
  transition: var(--omni-transition);
  
  /* ONE default to prevent total breakage - minimal default styling */
  --omni-variant-width: 100%;
  --omni-variant-height: auto;
  --omni-variant-padding-y: var(--omni-space-1);
  --omni-variant-padding-x: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-xs);
}

.omni-text-input::placeholder {
  color: var(--omni-color-text-muted);
  opacity: 1;
}

.omni-text-input:focus {
  border: var(--omni-input-focus-border);
  outline: 3px solid color-mix(in sRGB, var(--omni-color-primary) 20%, transparent);
  outline-offset: 0;
}

/* SIZE VARIANTS - Use data-size or get ugly defaults */
:where(.omni-text-input[data-size="sm"]) {
  --omni-variant-padding-y: var(--omni-space-1);
  --omni-variant-padding-x: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-height: auto;
}

:where(.omni-text-input[data-size="md"]) {
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-height: auto;
}

:where(.omni-text-input[data-size="lg"]) {
  --omni-variant-padding-y: var(--omni-space-3);
  --omni-variant-padding-x: var(--omni-space-4);
  --omni-variant-font-size: var(--omni-text-lg);
  --omni-variant-height: auto;
}

/* WIDTH VARIANTS */
:where(.omni-text-input[data-width="sm"]) {
  --omni-variant-width: 200px;
}

:where(.omni-text-input[data-width="md"]) {
  --omni-variant-width: 300px;
}

:where(.omni-text-input[data-width="lg"]) {
  --omni-variant-width: 400px;
}

:where(.omni-text-input[data-width="full"]) {
  --omni-variant-width: 100%;
}

/* Prevent autofill yellow background */
:where(.omni-text-input:-webkit-autofill) {
  -webkit-text-fill-color: var(--omni-color-text);
  box-shadow: 0 0 0 100px var(--omni-color-surface) inset;
  transition: background-color 50000s ease-in-out 0s;
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TEXTAREA
 * =============================================================================
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Textareas MUST be associated with labels for screen reader users.
 *
 *   <label for="message">Message</label>
 *   <textarea id="message" class="omni-textarea" data-size="md"></textarea>
 *
 * Required field:
 *   <label for="bio">Bio <span aria-hidden="true">*</span></label>
 *   <textarea id="bio" class="omni-textarea" required aria-required="true"></textarea>
 *
 * Error state (styling via interaction-states.css):
 *   <textarea id="message" class="omni-textarea"
 *             aria-invalid="true" aria-describedby="message-error"></textarea>
 *   <span id="message-error" role="alert">Message is required</span>
 *
 * ============================================================================= */

:where(.omni-textarea) {
  display: block;
  width: var(--omni-variant-width);
  min-height: var(--omni-variant-height);
  padding: var(--omni-variant-padding-y) var(--omni-variant-padding-x);
  font-family: inherit;
  font-size: var(--omni-variant-font-size);
  line-height: 1.5;
  color: var(--omni-color-text);
  appearance: none;
  resize: vertical;
  background: var(--omni-color-surface);
  border: var(--omni-input-border);
  border-radius: var(--omni-input-radius);
  transition: var(--omni-transition);
  
  /* ONE default to prevent total breakage - minimal default styling */
  --omni-variant-width: 100%;
  --omni-variant-height: 60px;
  --omni-variant-padding-y: var(--omni-space-1);
  --omni-variant-padding-x: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-xs);
}

:where(.omni-textarea:focus) {
  border: var(--omni-input-focus-border);
  outline: 3px solid color-mix(in sRGB, var(--omni-color-primary) 20%, transparent);
  outline-offset: 0;
}

/* SIZE VARIANTS - Use data-size or get ugly defaults */
:where(.omni-textarea[data-size="sm"]) {
  --omni-variant-padding-y: var(--omni-space-1);
  --omni-variant-padding-x: var(--omni-space-2);
  --omni-variant-font-size: var(--omni-text-sm);
  --omni-variant-height: 60px;
}

:where(.omni-textarea[data-size="md"]) {
  --omni-variant-padding-y: var(--omni-space-2);
  --omni-variant-padding-x: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-height: 80px;
}

:where(.omni-textarea[data-size="lg"]) {
  --omni-variant-padding-y: var(--omni-space-3);
  --omni-variant-padding-x: var(--omni-space-4);
  --omni-variant-font-size: var(--omni-text-lg);
  --omni-variant-height: 120px;
}

/* ROWS VARIANTS */
:where(.omni-textarea[data-rows="3"]) {
  --omni-variant-height: 60px;
}

:where(.omni-textarea[data-rows="5"]) {
  --omni-variant-height: 100px;
}

:where(.omni-textarea[data-rows="8"]) {
  --omni-variant-height: 160px;
}

/* WIDTH VARIANTS */
:where(.omni-textarea[data-width="sm"]) {
  --omni-variant-width: 300px;
}

:where(.omni-textarea[data-width="md"]) {
  --omni-variant-width: 400px;
}

:where(.omni-textarea[data-width="lg"]) {
  --omni-variant-width: 500px;
}

:where(.omni-textarea[data-width="full"]) {
  --omni-variant-width: 100%;
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TOGGLE SWITCH
 * =============================================================================
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Toggle switches MUST have associated labels for screen reader users.
 *
 *   <label class="omni-toggle-label">
 *     <span class="omni-toggle">
 *       <input type="checkbox" name="notifications">
 *       <span class="omni-toggle-track"></span>
 *     </span>
 *     <span>Enable notifications</span>
 *   </label>
 *
 * With explicit labeling:
 *   <label for="darkmode">Dark mode</label>
 *   <span class="omni-toggle">
 *     <input type="checkbox" id="darkmode" name="darkmode">
 *     <span class="omni-toggle-track"></span>
 *   </span>
 *
 * Note: Uses native checkbox which is fully accessible. Screen readers
 * announce as "checkbox" which is functionally correct for a binary toggle.
 *
 * ============================================================================= */

/* Base toggle wrapper */
:where(.omni-toggle) {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Hidden checkbox - fully suppress browser default styling */
:where(.omni-toggle) input[type="checkbox"] {
  position: absolute;
  z-index: 1;
  width: var(--omni-space-12);
  height: calc(var(--omni-space-6) + var(--omni-space-1));
  margin: 0;
  cursor: pointer;
  opacity: 0;
  appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Track (background) */
:where(.omni-toggle) input[type="checkbox"] + .omni-toggle-track {
  position: relative;
  display: block;
  width: var(--omni-space-12);
  height: calc(var(--omni-space-6) + var(--omni-space-1));
  background: var(--omni-color-border);
  border-radius: var(--omni-radius-full);
  transition: background var(--omni-transition);
}

/* Thumb (slider) */
:where(.omni-toggle) input[type="checkbox"] + .omni-toggle-track::after {
  position: absolute;
  top: var(--omni-space-half);
  left: var(--omni-space-half);
  width: var(--omni-space-6);
  height: var(--omni-space-6);
  content: '';
  background: var(--omni-color-surface);
  border-radius: var(--omni-radius-full);
  transition: transform var(--omni-transition);
}

/* Checked state */
:where(.omni-toggle) input[type="checkbox"]:checked + .omni-toggle-track {
  background: var(--omni-variant-bg);
}

:where(.omni-toggle) input[type="checkbox"]:checked + .omni-toggle-track::after {
  transform: translateX(var(--omni-space-5));
}

/* Size variants - Small */
:where(.omni-toggle[data-size="sm"]) input[type="checkbox"] {
  width: var(--omni-space-10);
  height: var(--omni-space-6);
}

:where(.omni-toggle[data-size="sm"]) input[type="checkbox"] + .omni-toggle-track {
  width: var(--omni-space-10);
  height: var(--omni-space-6);
}

:where(.omni-toggle[data-size="sm"]) input[type="checkbox"] + .omni-toggle-track::after {
  width: var(--omni-space-5);
  height: var(--omni-space-5);
}

:where(.omni-toggle[data-size="sm"]) input[type="checkbox"]:checked + .omni-toggle-track::after {
  transform: translateX(var(--omni-space-4));
}

/* Size variants - Large */
:where(.omni-toggle[data-size="lg"]) input[type="checkbox"] {
  width: var(--omni-space-16);
  height: calc(var(--omni-space-8) + var(--omni-space-1));
}

:where(.omni-toggle[data-size="lg"]) input[type="checkbox"] + .omni-toggle-track {
  width: var(--omni-space-16);
  height: calc(var(--omni-space-8) + var(--omni-space-1));
}

:where(.omni-toggle[data-size="lg"]) input[type="checkbox"] + .omni-toggle-track::after {
  width: var(--omni-space-8);
  height: var(--omni-space-8);
}

:where(.omni-toggle[data-size="lg"]) input[type="checkbox"]:checked + .omni-toggle-track::after {
  transform: translateX(calc(var(--omni-space-16) - var(--omni-space-8) - var(--omni-space-1)));
}

/* Default color when no variant specified */
:where(.omni-toggle):not([data-variant]) {
  --omni-variant-bg: var(--omni-color-primary);
}

/* Red/Green toggle variant */
:where(.omni-toggle[data-variant="red-green"]) input[type="checkbox"] + .omni-toggle-track {
  background: var(--omni-color-danger);
}

:where(.omni-toggle[data-variant="red-green"]) input[type="checkbox"]:checked + .omni-toggle-track {
  background: var(--omni-color-success);
}

/* Label wrapper */
:where(.omni-toggle-label) {
  display: inline-flex;
  gap: var(--omni-space-2);
  align-items: center;
  cursor: pointer;
  user-select: none;
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TOOLTIP - CSS-ONLY HOVER HINT
 * Quick tooltips using pseudo-elements. No JS required.
 * =============================================================================
 *
 * ACCESSIBILITY LIMITATIONS (CSS-only):
 * This is a visual hover hint, NOT a fully accessible tooltip.
 *
 * ✅ Works: Mouse hover on any element
 * ✅ Works: Keyboard focus on focusable elements (buttons, links, inputs)
 * ❌ Fails: Keyboard access on non-focusable elements (span, div)
 * ❌ Fails: Screen readers (pseudo-elements can't have ARIA)
 * ❌ Fails: Escape key dismissal
 *
 * USE WHEN:
 * - Tooltip is on a focusable element (button, link)
 * - Content is supplementary, not critical
 * - Quick implementation without JS is acceptable
 *
 * FOR FULL ACCESSIBILITY:
 * Use the Tier 3 JS tooltip which creates real DOM elements with:
 * - role="tooltip" and aria-describedby
 * - Keyboard support for all elements
 * - Escape key dismissal
 *
 * See: OmniUI.enhanceTooltip() or examples/tier3-interactive/tooltip.html
 *
 * BASIC USAGE:
 *   <button data-omni-tooltip="Delete this item">Delete</button>
 *   <a href="#" data-omni-tooltip="Opens in new tab">Link</a>
 *
 * ============================================================================= */

/* Base tooltip trigger */
:where([data-omni-tooltip]) {
  position: relative;
}

/* Tooltip content */
:where([data-omni-tooltip])::before {
  position: absolute;
  
  /* Default position: top */
  inset-block-end: calc(100% + var(--omni-space-2));
  inset-inline-start: 50%;
  z-index: var(--omni-z-popover);
  visibility: hidden;
  max-width: var(--omni-space-64);
  
  /* Layout using design tokens */
  padding: var(--omni-space-2) var(--omni-space-3);
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
  line-height: 1.2;
  color: var(--omni-variant-style-text);
  white-space: nowrap;
  content: attr(data-omni-tooltip);
  
  /* Colors from variant system */
  background: var(--omni-variant-style-bg);
  border-radius: var(--omni-radius-sm);
  box-shadow: var(--omni-shadow-md);
  
  /* Hidden by default */
  opacity: 0;
  transform: translateX(-50%) translateY(var(--omni-space-half));
  
  /* Animation using design tokens */
  transition: opacity var(--omni-transition), visibility var(--omni-transition), transform var(--omni-transition);
}

/* Tooltip arrow */
:where([data-omni-tooltip])::after {
  position: absolute;
  
  /* Default: top tooltip, arrow points down */
  inset-block-end: 100%;
  inset-inline-start: 50%;
  visibility: hidden;
  content: '';
  
  /* Arrow shape using design tokens */
  border: var(--omni-space-1) solid transparent;
  border-top-color: var(--omni-variant-style-bg);
  
  /* Hidden by default */
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--omni-transition), visibility var(--omni-transition);
}

/* Show on hover and focus */
:where([data-omni-tooltip]):hover::before,
:where([data-omni-tooltip]):hover::after,
:where([data-omni-tooltip]):focus-visible::before,
:where([data-omni-tooltip]):focus-visible::after {
  visibility: visible;
  opacity: 1;
}

:where([data-omni-tooltip]):hover::before,
:where([data-omni-tooltip]):focus-visible::before {
  transform: translateX(-50%) translateY(0);
}

/* Position variants */
:where([data-omni-tooltip][data-position="bottom"])::before {
  inset-block-start: calc(100% + var(--omni-space-2));
  inset-block-end: auto;
  transform: translateX(-50%) translateY(calc(var(--omni-space-half) * -1));
}

:where([data-omni-tooltip][data-position="bottom"])::after {
  inset-block-start: 100%;
  inset-block-end: auto;
  border-top-color: transparent;
  border-bottom-color: var(--omni-variant-style-bg);
}

:where([data-omni-tooltip][data-position="left"])::before {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--omni-space-2));
  transform: translateY(-50%) translateX(var(--omni-space-half));
}

:where([data-omni-tooltip][data-position="left"])::after {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: 100%;
  border-color: transparent;
  border-left-color: var(--omni-variant-style-bg);
  transform: translateY(-50%);
}

:where([data-omni-tooltip][data-position="right"])::before {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: calc(100% + var(--omni-space-2));
  inset-inline-end: auto;
  transform: translateY(-50%) translateX(calc(var(--omni-space-half) * -1));
}

:where([data-omni-tooltip][data-position="right"])::after {
  inset-block-start: 50%;
  inset-block-end: auto;
  inset-inline-start: 100%;
  inset-inline-end: auto;
  border-color: transparent;
  border-right-color: var(--omni-variant-style-bg);
  transform: translateY(-50%);
}

/* Show animations for positioned tooltips */
:where([data-omni-tooltip][data-position="bottom"]):hover::before,
:where([data-omni-tooltip][data-position="bottom"]):focus-visible::before {
  transform: translateX(-50%) translateY(0);
}

:where([data-omni-tooltip][data-position="left"]):hover::before,
:where([data-omni-tooltip][data-position="left"]):focus-visible::before {
  transform: translateY(-50%) translateX(0);
}

:where([data-omni-tooltip][data-position="right"]):hover::before,
:where([data-omni-tooltip][data-position="right"]):focus-visible::before {
  transform: translateY(-50%) translateX(0);
}

/* Style variants */
:where([data-omni-tooltip][data-style="multiline"])::before {
  max-width: var(--omni-space-80);
  text-align: left;
  overflow-wrap: break-word;
  white-space: normal;
}

:where([data-omni-tooltip][data-style="no-arrow"])::after {
  display: none;
}

/* Default variant */
:where([data-omni-tooltip]):not([data-variant]) {
  --omni-variant-bg: var(--omni-color-text);
  --omni-variant-text: var(--omni-color-text-inverse);
  --omni-variant-style-bg: var(--omni-variant-bg);
  --omni-variant-style-text: var(--omni-variant-text);
}

/* Mobile support */
@media (hover: none) {
  :where([data-omni-tooltip]):active::before,
  :where([data-omni-tooltip]):active::after {
    visibility: visible;
    opacity: 1;
  }
}

/* Hide CSS tooltip when JS-enhanced (Tier 3 takes over) */
:where([data-omni-tooltip][data-tooltip-enhanced])::before,
:where([data-omni-tooltip][data-tooltip-enhanced])::after {
  display: none;
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI DASHBOARD WIDGET - NUCLEAR DATA VARIANT EDITION
 * Draggable/Resizable Container. Uses data-state, data-size, data-variant
 * ============================================================================= */

/* Base widget container */
:where(.omni-widget) {
  /* Size variant defaults - uniform compact padding */
  --omni-widget-header-padding: var(--omni-space-2) var(--omni-space-3);
  --omni-widget-content-padding: var(--omni-space-2) var(--omni-space-3);
  --omni-widget-title-size: var(--omni-text-sm);
  --omni-widget-footer-padding: var(--omni-space-2) var(--omni-space-3);
  --omni-widget-footer-font-size: var(--omni-text-xs);
  --omni-widget-actions-gap: var(--omni-space-2);
  --omni-widget-resize-size: 20px;

  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-lg);
  box-shadow: var(--omni-shadow-sm);

  /* Container query support - widget content responds to widget size */
  container-type: inline-size;
  container-name: widget;

  /* Performance optimizations for drag/resize */
  backface-visibility: hidden;
  transition: box-shadow var(--omni-transition), transform var(--omni-transition);
  will-change: transform;
}

/* =============================================================================
 * SIZE VARIANTS
 * ============================================================================= */

:where(.omni-widget[data-size="sm"]) {
  --omni-widget-header-padding: var(--omni-space-1) var(--omni-space-2);
  --omni-widget-content-padding: var(--omni-space-1) var(--omni-space-2);
  --omni-widget-title-size: var(--omni-text-xs);
  --omni-widget-footer-padding: var(--omni-space-1) var(--omni-space-2);
  --omni-widget-footer-font-size: var(--omni-text-xs);
  --omni-widget-resize-size: 16px;
}

:where(.omni-widget[data-size="lg"]) {
  --omni-widget-header-padding: var(--omni-space-3) var(--omni-space-4);
  --omni-widget-content-padding: var(--omni-space-3) var(--omni-space-4);
  --omni-widget-title-size: var(--omni-text-base);
  --omni-widget-footer-padding: var(--omni-space-3) var(--omni-space-4);
  --omni-widget-footer-font-size: var(--omni-text-sm);
  --omni-widget-resize-size: 24px;
}

:where(.omni-widget:hover:not([data-state="dragging"], [data-state="resizing"])) {
  box-shadow: var(--omni-shadow-md);
  transform: translateY(-1px);
}

:where(.omni-widget:focus-within) {
  z-index: 10;
}

/* Widget structure */
:where(.omni-widget-header) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--omni-widget-header-padding);
  user-select: none;
  background: var(--omni-color-surface);
  border-block-end: 1px solid var(--omni-color-border);
}

.omni-widget-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--omni-widget-title-size);
  font-weight: var(--omni-font-medium);
  line-height: 1;
  color: var(--omni-color-text);
  white-space: nowrap;
}

:where(.omni-widget-actions) {
  display: flex;
  gap: var(--omni-widget-actions-gap);
  align-items: center;
}

:where(.omni-widget-content) {
  flex: 1;
  min-block-size: 0;
  padding: var(--omni-widget-content-padding);
  overflow: auto;
}

:where(.omni-widget-footer) {
  padding: var(--omni-widget-footer-padding);
  font-size: var(--omni-widget-footer-font-size);
  color: var(--omni-color-text-muted);
  background: var(--omni-color-surface-alt);
  border-block-start: 1px solid var(--omni-color-border);
}

/* State variations */
:where(.omni-widget[data-state="dragging"]) {
  z-index: 1000;
  cursor: grabbing;
  border-color: var(--omni-color-primary);
  box-shadow: var(--omni-shadow-xl);
  opacity: 0.9;
  will-change: transform, left, top;
}

/* Disable pointer events on children during drag */
:where(.omni-widget[data-state="dragging"] *) {
  pointer-events: none;
}

:where(.omni-widget[data-state="resizing"]) {
  z-index: 999;
  border-color: var(--omni-color-primary);
  will-change: width, height;
}

:where(.omni-widget[data-state="loading"] .omni-widget-content) {
  pointer-events: none;
  opacity: 0.6;
}

:where(.omni-widget[data-state="error"]) {
  border-color: var(--omni-color-danger);
}

/* Grid positioning helpers */
:where(.omni-widget[data-state="placeholder"]) {
  border: 2px dashed var(--omni-color-primary);
  box-shadow: none;
}

:where(.omni-widget[data-state="collision"]) {
  border-color: var(--omni-color-warning);
}

/* Responsive adjustments */
@media (width <= 48rem) {
  :where(.omni-widget) {
    --omni-widget-header-padding: var(--omni-space-2) var(--omni-space-3);
    --omni-widget-content-padding: var(--omni-space-3);
    --omni-widget-title-size: var(--omni-text-sm);
  }
}

/* Interaction handles */

/* Drag handle (in header area) */
:where(.omni-widget-handle) {
  position: absolute;
  inset: 0;
  cursor: grab;
  opacity: 0;
  transition: opacity var(--omni-transition);
}

:where(.omni-widget-handle:active) {
  cursor: grabbing;
}

/* Show handle in edit mode */
:where([data-dashboard-mode="editing"] .omni-widget:hover .omni-widget-handle) {
  opacity: 1;
}

/* Resize handle (bottom-right corner) */
:where(.omni-widget-resize) {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: var(--omni-widget-resize-size);
  block-size: var(--omni-widget-resize-size);
  cursor: nw-resize;
  background: var(--omni-color-primary);
  border-start-start-radius: var(--omni-radius-sm);
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: var(--omni-radius-lg);
  opacity: 0;
  transition: opacity var(--omni-transition);
}

:where(.omni-widget-resize::before) {
  position: absolute;
  inset: 4px;
  content: '';
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1px,
    var(--omni-color-surface) 1px,
    var(--omni-color-surface) 2px
  );
}

/* Show resize handle in edit mode */
:where([data-dashboard-mode="editing"] .omni-widget:hover .omni-widget-resize) {
  opacity: 0.8;
}

/* =============================================================================
 * TOUCH SUPPORT - Edit mode only
 * Prevents browser scroll/zoom interference during drag operations
 * ============================================================================= */

/* Disable browser touch behaviors on drag handles when editing */
:where([data-dashboard-mode="editing"] .omni-widget-header) {
  touch-action: none;
}

:where([data-dashboard-mode="editing"] .omni-widget-handle) {
  touch-action: none;
}

:where([data-dashboard-mode="editing"] .omni-widget-resize) {
  touch-action: none;
}

/* Visual feedback during touch hold phase (before drag activates) */
:where(.omni-widget[data-state="drag-hold"]) {
  transform: scale(1.02);
  box-shadow: var(--omni-shadow-lg);
  opacity: 0.95;
  border-color: var(--omni-color-primary);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Ensure drag-hold doesn't trigger hover transforms */
:where(.omni-widget[data-state="drag-hold"]:hover) {
  transform: scale(1.02);
}

/* HTML5 Drag & Drop Support */

/* Draggable widgets get move cursor */
:where(.omni-widget[draggable="true"]) {
  cursor: move;
}

:where(.omni-widget[draggable="true"]:active) {
  cursor: grabbing;
}

/* Ghost image for drag preview */
:where(.omni-widget.dragging-ghost) {
  opacity: 0.5;
  pointer-events: none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-widget) {
    transition: none;
  }

  :where(.omni-widget:hover:not([data-state="dragging"], [data-state="resizing"])) {
    transform: none;
  }

  :where(.omni-widget[data-state="drag-hold"]) {
    transform: none;
    transition: none;
  }

  :where(.omni-widget-handle),
  :where(.omni-widget-resize) {
    transition: none;
  }
}

/* =============================================================================
 * CONTAINER QUERY RESPONSIVE CONTENT
 * Widget content adapts to widget size, not viewport
 * ============================================================================= */

/* Small widget - compact layout */
@container widget (max-width: 300px) {
  :where(.omni-widget-header) {
    flex-wrap: wrap;
    gap: var(--omni-space-1);
  }

  :where(.omni-widget-title) {
    font-size: var(--omni-text-xs);
  }

  :where(.omni-widget-content) {
    padding: var(--omni-space-1) var(--omni-space-2);
  }

  :where(.omni-widget-footer) {
    padding: var(--omni-space-1) var(--omni-space-2);
  }
}

/* Large widget - spacious layout */
@container widget (min-width: 500px) {
  :where(.omni-widget-title) {
    font-size: var(--omni-text-base);
  }

  :where(.omni-widget-content) {
    padding: var(--omni-space-3) var(--omni-space-4);
  }
}

/*
 * USAGE:
 * <div class="omni-widget" data-size="md" data-state="normal">
 *   <div class="omni-widget-header">
 *     <h3 class="omni-widget-title">Sales Overview</h3>
 *     <div class="omni-widget-actions">
 *       <button class="omni-close" aria-label="Close widget"></button>
 *     </div>
 *     <div class="omni-widget-handle" aria-label="Drag widget"></div>
 *   </div>
 *   <div class="omni-widget-content">
 *     Content here...
 *   </div>
 *   <div class="omni-widget-resize" aria-label="Resize widget"></div>
 * </div>
 * 
 * States: data-state (normal/dragging/resizing/loading/error/placeholder/collision)
 * Sizes: data-size (sm/md/lg)
 * Dashboard mode: data-dashboard-mode="editing" (on parent container)
 * 
 * JavaScript handles:
 * - Drag and drop
 * - Resize operations
 * - Grid positioning
 * - State management
 */
}
/* TIER 3: JAVASCRIPT-REQUIRED COMPONENTS (alphabetical) */
@layer omniui.components{

/* =============================================================================
 * OMNIUI BOTTOM DRAWER - TIER 3 COMPONENT
 * A sheet that slides up from the bottom. Requires JS for accessibility.
 * =============================================================================
 *
 * ACCESSIBILITY (WCAG 2.1):
 * Bottom drawers are dialog patterns and require JavaScript for:
 * - Focus management (trap focus when modal)
 * - Keyboard support (Escape to close)
 * - Screen reader announcements
 * - Body scroll lock when open
 *
 * When modal (has backdrop blocking interaction):
 *   <div class="omni-bottom-drawer" data-open="true"
 *        role="dialog" aria-modal="true" aria-labelledby="drawer-title">
 *     <div class="omni-bottom-drawer-header">
 *       <h2 id="drawer-title" class="omni-bottom-drawer-title">Options</h2>
 *       <button class="omni-close" aria-label="Close drawer"></button>
 *     </div>
 *     <div class="omni-bottom-drawer-content">...</div>
 *   </div>
 *
 * NOTES:
 * - Use OmniUI.bottomDrawer() for proper accessibility
 * - CSS provides styling only; JS handles behavior
 * - Supports expandable states via data-size
 *
 * ============================================================================= */

/* Base drawer */
:where(.omni-bottom-drawer) {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--omni-z-modal);
  display: flex;
  flex-direction: column;
  height: var(--omni-drawer-height, 60vh);
  max-height: var(--omni-drawer-height, 60vh);
  background: var(--omni-color-surface);
  border-top: 1px solid var(--omni-color-border);
  border-start-start-radius: var(--omni-radius-lg);
  border-start-end-radius: var(--omni-radius-lg);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  box-shadow: var(--omni-shadow-lg);
  transform: translateY(100%);
  transition: transform var(--omni-transition-slow), height var(--omni-transition-slow);
}

/* Open state */
:where(.omni-bottom-drawer[data-open="true"]) {
  transform: translateY(0);
}

/* Drag handle - visual indicator for swipe */
:where(.omni-bottom-drawer-handle) {
  display: flex;
  justify-content: center;
  padding: var(--omni-space-2) 0;
  cursor: grab;
}

:where(.omni-bottom-drawer-handle):active {
  cursor: grabbing;
}

:where(.omni-bottom-drawer-handle)::before {
  display: block;
  width: var(--omni-space-10);
  height: var(--omni-space-1);
  content: '';
  background: var(--omni-color-border);
  border-radius: var(--omni-radius-full);
}

/* Header */
:where(.omni-bottom-drawer-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--omni-space-3) var(--omni-space-4);
  border-bottom: 1px solid var(--omni-color-border);
}

/* Title */
:where(.omni-bottom-drawer-title) {
  margin: 0;
  font-size: var(--omni-text-lg);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
}

/* Content area */
:where(.omni-bottom-drawer-content) {
  flex: 1;
  min-height: 0;
  padding: var(--omni-space-4);
  padding-bottom: calc(var(--omni-space-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Backdrop */
:where(.omni-bottom-drawer-backdrop) {
  position: fixed;
  inset: 0;
  z-index: calc(var(--omni-z-modal) - 1);
  visibility: hidden;
  background: var(--omni-color-overlay);
  opacity: 0;
  transition: opacity var(--omni-transition-slow), visibility var(--omni-transition-slow);
}

:where(.omni-bottom-drawer-backdrop[data-visible="true"]) {
  visibility: visible;
  opacity: 1;
}

/* =============================================================================
 * SIZE VARIANTS
 * ============================================================================= */

:where(.omni-bottom-drawer[data-size="sm"]) {
  --omni-drawer-height: 40vh;
}

:where(.omni-bottom-drawer[data-size="md"]),
:where(.omni-bottom-drawer):not([data-size]) {
  --omni-drawer-height: 60vh;
}

:where(.omni-bottom-drawer[data-size="lg"]) {
  --omni-drawer-height: 80vh;
}

:where(.omni-bottom-drawer[data-size="full"]) {
  --omni-drawer-height: 95vh;
  border-radius: 0;
}

/* =============================================================================
 * REDUCED MOTION
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.omni-bottom-drawer),
  :where(.omni-bottom-drawer-backdrop) {
    transition: none;
  }
}

/* =============================================================================
 * HIGH CONTRAST
 * ============================================================================= */

@media (prefers-contrast: high) {
  :where(.omni-bottom-drawer) {
    border-top-width: 2px;
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI COMBOBOX - TIER 3 COMPONENT
   JavaScript required for filtering, selection, and keyboard navigation
   =============================================================================

   USAGE:
   <div class="omni-combobox">
     <div class="omni-combobox__control">
       <input class="omni-combobox__input" role="combobox"
              aria-expanded="false" aria-haspopup="listbox"
              aria-controls="listbox-id" placeholder="Select...">
       <button class="omni-combobox__trigger" aria-label="Toggle options">
         <svg>...</svg>
       </button>
     </div>
     <div class="omni-combobox__listbox" id="listbox-id" role="listbox" hidden>
       <div class="omni-combobox__option" role="option">Option 1</div>
       <div class="omni-combobox__option" role="option" aria-selected="true">Option 2</div>
     </div>
   </div>

   MULTI-SELECT:
   <div class="omni-combobox" data-multiple="true">
     <div class="omni-combobox__control">
       <div class="omni-combobox__tags">
         <span class="omni-combobox__tag">
           Selected Item
           <button class="omni-combobox__tag-remove" aria-label="Remove">×</button>
         </span>
       </div>
       <input class="omni-combobox__input" ...>
     </div>
     <div class="omni-combobox__listbox" role="listbox" aria-multiselectable="true" hidden>
       ...
     </div>
   </div>

   DATA ATTRIBUTES:
   - data-multiple: Enable multi-select with tags
   - data-filter: Enable type-to-filter
   - data-create: Allow creating new options
   - data-size: "sm", "md" (default), "lg"
   ============================================================================= */

/* Base container */
:where(.omni-combobox) {
  position: relative;
  display: block;
  inline-size: 100%;
}

/* =============================================================================
   CONTROL (input wrapper)
   ============================================================================= */

:where(.omni-combobox__control) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--omni-space-1);
  min-block-size: 2.5rem;
  padding-block: var(--omni-space-1);
  padding-inline: var(--omni-space-3);
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
  cursor: text;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

:where(.omni-combobox__control):hover {
  border-color: var(--omni-color-border-focus);
}

:where(.omni-combobox__control):focus-within {
  border-color: var(--omni-color-primary);
}

:where(.omni-combobox[aria-disabled="true"]) :where(.omni-combobox__control) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =============================================================================
   INPUT
   ============================================================================= */

:where(.omni-combobox__input) {
  flex: 1 1 auto;
  min-inline-size: 4rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--omni-color-text);
  font-family: inherit;
  font-size: var(--omni-text-sm);
}

/* Kill all browser focus indicators - parent control handles focus state */
:where(.omni-combobox__input):focus {
  outline: none;
  box-shadow: none;
}

:where(.omni-combobox__input)::placeholder {
  color: var(--omni-color-text-muted);
}

:where(.omni-combobox__input):disabled {
  cursor: not-allowed;
}

/* =============================================================================
   TRIGGER BUTTON (chevron)
   ============================================================================= */

:where(.omni-combobox__trigger) {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: var(--omni-space-1);
  background: transparent;
  border: none;
  color: var(--omni-color-text-muted);
  cursor: pointer;
  transition: transform 150ms ease;
}

:where(.omni-combobox__trigger):hover {
  color: var(--omni-color-text);
}

:where(.omni-combobox[aria-expanded="true"]) :where(.omni-combobox__trigger) {
  transform: rotate(180deg);
}

:where(.omni-combobox__trigger-icon) {
  inline-size: 1rem;
  block-size: 1rem;
}

/* =============================================================================
   LISTBOX (dropdown)
   ============================================================================= */

:where(.omni-combobox__listbox) {
  position: absolute;
  z-index: 1000;
  inset-inline: 0;
  inset-block-start: 100%;
  max-block-size: 15rem;
  margin-block-start: var(--omni-space-1);
  overflow-y: auto;
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
  box-shadow: var(--omni-shadow-lg);
}

:where(.omni-combobox__listbox[hidden]) {
  display: none;
}

/* =============================================================================
   OPTIONS
   ============================================================================= */

:where(.omni-combobox__option) {
  display: flex;
  align-items: center;
  gap: var(--omni-space-2);
  padding-block: var(--omni-space-2);
  padding-inline: var(--omni-space-3);
  color: var(--omni-color-text);
  font-size: var(--omni-text-sm);
  cursor: pointer;
  transition: background-color 100ms ease;
}

:where(.omni-combobox__option):hover,
:where(.omni-combobox__option[data-highlighted="true"]) {
  background: var(--omni-color-surface-alt);
}

:where(.omni-combobox__option[aria-selected="true"]) {
  font-weight: var(--omni-font-medium);
}

:where(.omni-combobox__option[aria-selected="true"])::before {
  content: "✓";
  margin-inline-end: var(--omni-space-1);
  color: var(--omni-color-primary);
}

:where(.omni-combobox__option[aria-disabled="true"]) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Option checkbox for multi-select */
:where(.omni-combobox__option-checkbox) {
  inline-size: 1rem;
  block-size: 1rem;
  flex-shrink: 0;
  pointer-events: none;
}

/* =============================================================================
   TAGS (multi-select)
   ============================================================================= */

:where(.omni-combobox__tags) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--omni-space-1);
}

:where(.omni-combobox__tag) {
  display: inline-flex;
  align-items: center;
  gap: var(--omni-space-1);
  padding-block: 0.125rem;
  padding-inline: var(--omni-space-2);
  background: var(--omni-color-surface-alt);
  border-radius: var(--omni-radius-sm);
  color: var(--omni-color-text);
  font-size: var(--omni-text-xs);
}

:where(.omni-combobox__tag-remove) {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1rem;
  block-size: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--omni-radius-sm);
  color: var(--omni-color-text-muted);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
}

:where(.omni-combobox__tag-remove):hover {
  background: var(--omni-color-danger);
  color: white;
}

/* =============================================================================
   EMPTY & LOADING STATES
   ============================================================================= */

:where(.omni-combobox__empty) {
  padding: var(--omni-space-3);
  color: var(--omni-color-text-muted);
  font-size: var(--omni-text-sm);
  font-style: italic;
  text-align: center;
}

:where(.omni-combobox__loading) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--omni-space-2);
  padding: var(--omni-space-3);
  color: var(--omni-color-text-muted);
  font-size: var(--omni-text-sm);
}

/* Create option prompt */
:where(.omni-combobox__create) {
  padding-block: var(--omni-space-2);
  padding-inline: var(--omni-space-3);
  color: var(--omni-color-primary);
  font-size: var(--omni-text-sm);
  cursor: pointer;
}

:where(.omni-combobox__create):hover {
  background: var(--omni-color-surface-alt);
}

/* =============================================================================
   GROUP LABELS
   ============================================================================= */

:where(.omni-combobox__group-label) {
  padding-block: var(--omni-space-1);
  padding-inline: var(--omni-space-3);
  color: var(--omni-color-text-muted);
  font-size: var(--omni-text-xs);
  font-weight: var(--omni-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =============================================================================
   SIZE VARIANTS
   ============================================================================= */

:where(.omni-combobox[data-size="sm"]) :where(.omni-combobox__control) {
  min-block-size: 2rem;
  padding-inline: var(--omni-space-2);
}

:where(.omni-combobox[data-size="sm"]) :where(.omni-combobox__input) {
  font-size: var(--omni-text-xs);
}

:where(.omni-combobox[data-size="sm"]) :where(.omni-combobox__option) {
  padding-block: var(--omni-space-1);
  padding-inline: var(--omni-space-2);
  font-size: var(--omni-text-xs);
}

:where(.omni-combobox[data-size="lg"]) :where(.omni-combobox__control) {
  min-block-size: 3rem;
  padding-inline: var(--omni-space-4);
}

:where(.omni-combobox[data-size="lg"]) :where(.omni-combobox__input) {
  font-size: var(--omni-text-base);
}

:where(.omni-combobox[data-size="lg"]) :where(.omni-combobox__option) {
  padding-block: var(--omni-space-3);
  padding-inline: var(--omni-space-4);
  font-size: var(--omni-text-base);
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.omni-combobox__control),
  :where(.omni-combobox__trigger),
  :where(.omni-combobox__option),
  :where(.omni-combobox__tag-remove) {
    transition: none;
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI COPY BUTTON UTILITY
   Universal copy button for code blocks, inputs, URLs, tokens, etc.
   ============================================================================= */

:where(.omni-copy) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--omni-color-text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--omni-radius-sm);
  transition: all 150ms ease;
}

:where(.omni-copy)::before {
  font-size: 1rem;
  line-height: 1;
  content: '📋';
}

:where(.omni-copy):hover:not(:disabled) {
  color: var(--omni-color-text);
  background: var(--omni-color-surface-alt);
}

/* Success state (briefly shown after copy) */
:where(.omni-copy-success) {
  color: var(--omni-color-success);
}

:where(.omni-copy-success)::before {
  content: '✓';
}

/* Focus and disabled states handled by global utilities */

/* Size variants */
:where(.omni-copy-sm) {
  width: 1.5rem;
  height: 1.5rem;
}

:where(.omni-copy-sm)::before {
  font-size: 0.875rem;
}

:where(.omni-copy-lg) {
  width: 2.5rem;
  height: 2.5rem;
}

:where(.omni-copy-lg)::before {
  font-size: 1.25rem;
}

/* Position variants for absolute positioning */
:where(.omni-copy-absolute) {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
}

:where(.omni-copy-top-right) {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* CSS-only visual feedback (no JS required) */
:where(.omni-copy):active {
  color: var(--omni-color-success);
  transform: scale(0.95);
}

/*
 * USAGE:
 * 
 * Basic copy button:
 * <button class="omni-copy" aria-label="Copy to clipboard"></button>
 * 
 * In code block header:
 * <button class="omni-copy omni-copy-sm" aria-label="Copy code"></button>
 * 
 * Positioned copy button:
 * <button class="omni-copy omni-copy-top-right" aria-label="Copy content"></button>
 * 
 * With JavaScript success state:
 * <button class="omni-copy omni-copy-success" aria-label="Copied!"></button>
 * 
 * Use aria-label for accessibility. Add JS for clipboard functionality.
 * Visual feedback available through :active state and .omni-copy-success class.
 */
}
@layer omniui.components{

/* =============================================================================
   OMNIUI DROPDOWN MENU - TIER 3 COMPONENT
   JavaScript required for open/close, keyboard navigation, and focus management
   =============================================================================

   USAGE:
   <div class="omni-dropdown">
     <button class="omni-dropdown__trigger" aria-haspopup="menu" aria-expanded="false">
       Options
       <svg class="omni-dropdown__icon">...</svg>
     </button>
     <div class="omni-dropdown__menu" role="menu" hidden>
       <button class="omni-dropdown__item" role="menuitem">Edit</button>
       <button class="omni-dropdown__item" role="menuitem">Duplicate</button>
       <div class="omni-dropdown__divider" role="separator"></div>
       <button class="omni-dropdown__item" role="menuitem" data-variant="danger">Delete</button>
     </div>
   </div>

   <script>
     OmniUI.dropdown(document.querySelector('.omni-dropdown'));
   </script>

   DATA ATTRIBUTES:
   - data-align: "start" (default), "end", "center"
   - data-direction: "down" (default), "up"
   - data-size: "sm", "md" (default), "lg"
   ============================================================================= */

/* Base container - positioning context */
:where(.omni-dropdown) {
  position: relative;
  display: inline-block;
}

/* =============================================================================
   TRIGGER BUTTON
   ============================================================================= */

:where(.omni-dropdown__trigger) {
  display: inline-flex;
  align-items: center;
  gap: var(--omni-space-2);
  padding-block: var(--omni-space-2);
  padding-inline: var(--omni-space-3);
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
  color: var(--omni-color-text);
  font-family: inherit;
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

:where(.omni-dropdown__trigger):hover {
  border-color: var(--omni-color-border-focus);
}

:where(.omni-dropdown__trigger):focus-visible {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: 2px;
}

:where(.omni-dropdown__trigger[aria-expanded="true"]) {
  border-color: var(--omni-color-primary);
}

:where(.omni-dropdown__trigger):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dropdown icon/chevron */
:where(.omni-dropdown__icon) {
  inline-size: 1em;
  block-size: 1em;
  transition: transform 150ms ease;
}

:where(.omni-dropdown__trigger[aria-expanded="true"]) :where(.omni-dropdown__icon) {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  :where(.omni-dropdown__trigger),
  :where(.omni-dropdown__icon) {
    transition: none;
  }
}

/* =============================================================================
   MENU
   ============================================================================= */

:where(.omni-dropdown__menu) {
  position: absolute;
  z-index: 1000;
  min-inline-size: 10rem;
  padding-block: var(--omni-space-1);
  margin-block-start: var(--omni-space-1);
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
  box-shadow: var(--omni-shadow-lg);
  list-style: none;
}

:where(.omni-dropdown__menu[hidden]) {
  display: none;
}

/* Alignment */
:where(.omni-dropdown[data-align="start"]) :where(.omni-dropdown__menu),
:where(.omni-dropdown):not([data-align]) :where(.omni-dropdown__menu) {
  inset-inline-start: 0;
}

:where(.omni-dropdown[data-align="end"]) :where(.omni-dropdown__menu) {
  inset-inline-end: 0;
}

:where(.omni-dropdown[data-align="center"]) :where(.omni-dropdown__menu) {
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* Direction: up */
:where(.omni-dropdown[data-direction="up"]) :where(.omni-dropdown__menu) {
  inset-block-end: 100%;
  inset-block-start: auto;
  margin-block-start: 0;
  margin-block-end: var(--omni-space-1);
}

:where(.omni-dropdown[data-direction="up"]) :where(.omni-dropdown__icon) {
  transform: rotate(180deg);
}

:where(.omni-dropdown[data-direction="up"]) :where(.omni-dropdown__trigger[aria-expanded="true"]) :where(.omni-dropdown__icon) {
  transform: rotate(0deg);
}

/* =============================================================================
   MENU ITEMS
   ============================================================================= */

:where(.omni-dropdown__item) {
  display: flex;
  align-items: center;
  gap: var(--omni-space-2);
  inline-size: 100%;
  padding-block: var(--omni-space-2);
  padding-inline: var(--omni-space-3);
  background: transparent;
  border: none;
  color: var(--omni-color-text);
  font-family: inherit;
  font-size: var(--omni-text-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms ease;
}

:where(.omni-dropdown__item):hover,
:where(.omni-dropdown__item):focus {
  background: var(--omni-color-surface-alt);
  outline: none;
}

:where(.omni-dropdown__item):focus-visible {
  background: var(--omni-color-surface-alt);
  outline: 2px solid var(--omni-color-primary);
  outline-offset: -2px;
}

:where(.omni-dropdown__item):disabled,
:where(.omni-dropdown__item[aria-disabled="true"]) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Item variants */
:where(.omni-dropdown__item[data-variant="danger"]) {
  color: var(--omni-color-danger);
}

:where(.omni-dropdown__item[data-variant="danger"]):hover,
:where(.omni-dropdown__item[data-variant="danger"]):focus {
  background: color-mix(in srgb, var(--omni-color-danger) 10%, transparent);
}

/* Item icon */
:where(.omni-dropdown__item-icon) {
  inline-size: 1rem;
  block-size: 1rem;
  flex-shrink: 0;
}

/* =============================================================================
   DIVIDER
   ============================================================================= */

:where(.omni-dropdown__divider) {
  block-size: 1px;
  margin-block: var(--omni-space-1);
  background: var(--omni-color-border);
}

/* =============================================================================
   SIZE VARIANTS
   ============================================================================= */

:where(.omni-dropdown[data-size="sm"]) :where(.omni-dropdown__trigger) {
  padding-block: var(--omni-space-1);
  padding-inline: var(--omni-space-2);
  font-size: var(--omni-text-xs);
}

:where(.omni-dropdown[data-size="sm"]) :where(.omni-dropdown__item) {
  padding-block: var(--omni-space-1);
  padding-inline: var(--omni-space-2);
  font-size: var(--omni-text-xs);
}

:where(.omni-dropdown[data-size="lg"]) :where(.omni-dropdown__trigger) {
  padding-block: var(--omni-space-3);
  padding-inline: var(--omni-space-4);
  font-size: var(--omni-text-base);
}

:where(.omni-dropdown[data-size="lg"]) :where(.omni-dropdown__item) {
  padding-block: var(--omni-space-3);
  padding-inline: var(--omni-space-4);
  font-size: var(--omni-text-base);
}

/* =============================================================================
   GROUPS (optional)
   ============================================================================= */

:where(.omni-dropdown__group-label) {
  padding-block: var(--omni-space-1);
  padding-inline: var(--omni-space-3);
  color: var(--omni-color-text-muted);
  font-size: var(--omni-text-xs);
  font-weight: var(--omni-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  :where(.omni-dropdown__item) {
    transition: none;
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI MODAL - TIER 2 COMPONENT
   Native HTML dialog with progressive JS enhancement.
   Works without JS (use showModal()), JS adds animations, focus trap, etc.
   =============================================================================

   USAGE:
   <dialog class="omni-modal" data-size="lg">
     <div class="omni-modal-content">
       <header class="omni-modal-header">
         <h2 class="omni-modal-title">Modal Title</h2>
         <button class="omni-close" aria-label="Close"></button>
       </header>
       <main class="omni-modal-body">Content</main>
       <footer class="omni-modal-footer">
         <button class="omni-button" data-variant="secondary">Cancel</button>
         <button class="omni-button" data-variant="primary">Save</button>
       </footer>
     </div>
   </dialog>

   DATA ATTRIBUTES:
   - data-size: "sm", "md" (default), "lg", "xl", "fullscreen"
   - data-enhance: Auto-enhance with JS when present
   ============================================================================= */

/* =============================================================================
   BASE MODAL (native dialog)
   ============================================================================= */

:where(dialog.omni-modal) {
  box-sizing: border-box;
  inline-size: min(var(--omni-variant-width, 32rem), calc(100vi - 2rem));
  max-width: none;
  min-block-size: 0;
  max-height: none;
  padding: 0;
  margin: auto;
  color: inherit;
  background: transparent;
  border: none;

  &[open] {
    display: flex;
    flex-direction: column;
  }
}

/* Backdrop (native ::backdrop pseudo-element) */
:where(dialog.omni-modal::backdrop) {
  background: var(--omni-color-overlay);
  backdrop-filter: blur(4px);
}

/* =============================================================================
   MODAL CONTENT
   ============================================================================= */

:where(.omni-modal-content) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  max-block-size: calc(100vh - 2rem);
  overflow: hidden;
  color: var(--omni-color-text);
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-lg);
  box-shadow: var(--omni-shadow-xl);
}

:where(.omni-modal-header) {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  min-inline-size: 0;
  padding: var(--omni-space-4);
  background: var(--omni-color-surface-alt);
  border-block-end: 1px solid var(--omni-color-border);
}

:where(.omni-modal-title) {
  min-inline-size: 0;
  margin: 0;
  font-size: var(--omni-text-lg);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
  overflow-wrap: break-word;
}

:where(.omni-modal-body) {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--omni-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: break-word;
}

:where(.omni-modal-footer) {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  gap: var(--omni-space-3);
  justify-content: flex-end;
  min-inline-size: 0;
  padding: var(--omni-space-4);
  background: var(--omni-color-surface-alt);
  border-block-start: 1px solid var(--omni-color-border);
}

/* =============================================================================
   SIZE VARIANTS
   ============================================================================= */

:where(.omni-modal[data-size="sm"]) {
  --omni-variant-width: 24rem;
}

:where(.omni-modal[data-size="md"]) {
  --omni-variant-width: 32rem;
}

:where(.omni-modal[data-size="lg"]) {
  --omni-variant-width: 48rem;
}

:where(.omni-modal[data-size="xl"]) {
  --omni-variant-width: 64rem;
}

:where(.omni-modal[data-size="fullscreen"]) {
  --omni-variant-width: 100vi;
  block-size: 100vh;
}

:where(.omni-modal[data-size="fullscreen"] .omni-modal-content) {
  block-size: 100vh;
  max-block-size: none;
  border: none;
  border-radius: 0;
}

/* =============================================================================
   JS ENHANCEMENT: ANIMATIONS
   ============================================================================= */

:where(.omni-modal-animate) {
  transition: opacity 200ms ease, transform 200ms ease;
}

:where(.omni-modal-animate:not(.omni-modal-show)) {
  opacity: 0;
  transform: scale(0.95);
}

:where(.omni-modal-animate.omni-modal-show) {
  opacity: 1;
  transform: scale(1);
}

:where(.omni-modal-animate)::backdrop {
  transition: opacity 200ms ease;
  opacity: 0;
}

:where(.omni-modal-animate.omni-modal-show)::backdrop {
  opacity: 1;
}

/* =============================================================================
   SCREEN READER LIVE REGION
   ============================================================================= */

:where(.omni-modal-live) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* Mobile: Stack buttons, full width */
@media (width <= 640px) {
  :where(dialog.omni-modal) {
    inline-size: calc(100vi - 1rem);
  }

  :where(.omni-modal-content) {
    max-block-size: calc(100vh - 1rem);
    border-radius: var(--omni-radius);
  }

  :where(.omni-modal-footer) {
    flex-direction: column-reverse;
  }

  :where(.omni-modal-footer .omni-button) {
    inline-size: 100%;
  }
}

/* Tablet and desktop */
@media (width >= 641px) {
  :where(dialog.omni-modal) {
    inline-size: min(var(--omni-variant-width, 32rem), calc(100vi - 4rem));
  }

  :where(.omni-modal-content) {
    max-block-size: calc(100vh - 4rem);
  }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.omni-modal-animate),
  :where(.omni-modal-animate)::backdrop {
    transition: none;
  }

  :where(.omni-modal-animate:not(.omni-modal-show)) {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: high) {
  :where(.omni-modal-content) {
    border-width: 2px;
  }
}
}
@layer omniui.components{

/* =============================================================================
   OMNIUI TABS - TIER 3 COMPONENT
   JavaScript required for tab switching, ARIA, and keyboard navigation
   =============================================================================

   USAGE:
   <div class="omni-tabs">
     <div role="tablist" class="omni-tabs-list">
       <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
       <button role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
     </div>
     <div role="tabpanel" id="panel-1" class="omni-tabs-panel">Content 1</div>
     <div role="tabpanel" id="panel-2" class="omni-tabs-panel" hidden>Content 2</div>
   </div>

   <script type="module">
     import { enhanceTabs } from 'omniui';
     enhanceTabs(document.querySelector('.omni-tabs'));
   </script>

   DATA ATTRIBUTES:
   - data-style: "underline" (default), "boxed", "pills"
   - data-size: "sm", "md" (default), "lg"
   - data-orientation: "horizontal" (default), "vertical"
   - data-fill: stretch tabs to fill width
   ============================================================================= */

/* Base container */
:where(.omni-tabs) {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tablist wrapper */
:where(.omni-tabs-list) {
  display: flex;
  gap: var(--omni-space-1);
  border-block-end: 1px solid var(--omni-color-border);
}

/* Tab button styling */
:where(.omni-tabs-list) :where(button, [role="tab"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--omni-space-2);
  padding-block: var(--omni-space-2);
  padding-inline: var(--omni-space-4);
  margin-block-end: -1px;
  background: transparent;
  border: none;
  border-block-end: 2px solid transparent;
  color: var(--omni-color-text-muted);
  font-family: inherit;
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  :where(.omni-tabs-list) :where(button, [role="tab"]) {
    transition: none;
  }
}

/* Hover state */
:where(.omni-tabs-list) :where(button, [role="tab"]):hover {
  color: var(--omni-color-text);
  border-block-end-color: var(--omni-color-border);
}

/* Focus state */
:where(.omni-tabs-list) :where(button, [role="tab"]):focus-visible {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: -2px;
  border-radius: var(--omni-radius-sm);
}

/* Active/selected state */
:where(.omni-tabs-list) :where([aria-selected="true"]) {
  color: var(--omni-color-primary);
  border-block-end-color: var(--omni-color-primary);
}

/* Disabled state */
:where(.omni-tabs-list) :where(button, [role="tab"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================================
   PANELS
   ============================================================================= */

:where(.omni-tabs-panel) {
  padding-block: var(--omni-space-4);
  padding-inline: var(--omni-space-1);
}

/* Hidden panels */
:where(.omni-tabs-panel[hidden]) {
  display: none;
}

/* =============================================================================
   STYLE VARIANTS
   ============================================================================= */

/* Boxed style */
:where(.omni-tabs[data-style="boxed"]) :where(.omni-tabs-list) {
  background: var(--omni-color-surface-alt);
  padding: var(--omni-space-1);
  border-radius: var(--omni-radius-md);
  border-block-end: none;
  gap: var(--omni-space-1);
}

:where(.omni-tabs[data-style="boxed"]) :where(.omni-tabs-list) :where(button, [role="tab"]) {
  border-block-end: none;
  border-radius: var(--omni-radius-sm);
  margin-block-end: 0;
}

:where(.omni-tabs[data-style="boxed"]) :where(.omni-tabs-list) :where([aria-selected="true"]) {
  background: var(--omni-color-surface);
  color: var(--omni-color-text);
  box-shadow: var(--omni-shadow-sm);
}

/* Pills style */
:where(.omni-tabs[data-style="pills"]) :where(.omni-tabs-list) {
  border-block-end: none;
  gap: var(--omni-space-2);
}

:where(.omni-tabs[data-style="pills"]) :where(.omni-tabs-list) :where(button, [role="tab"]) {
  border-block-end: none;
  border-radius: var(--omni-radius-full);
  margin-block-end: 0;
}

:where(.omni-tabs[data-style="pills"]) :where(.omni-tabs-list) :where([aria-selected="true"]) {
  background: var(--omni-color-primary);
  color: var(--omni-color-primary-text);
}

/* =============================================================================
   SIZE VARIANTS
   ============================================================================= */

:where(.omni-tabs[data-size="sm"]) :where(.omni-tabs-list) :where(button, [role="tab"]) {
  padding-block: var(--omni-space-1);
  padding-inline: var(--omni-space-3);
  font-size: var(--omni-text-xs);
}

:where(.omni-tabs[data-size="lg"]) :where(.omni-tabs-list) :where(button, [role="tab"]) {
  padding-block: var(--omni-space-3);
  padding-inline: var(--omni-space-5);
  font-size: var(--omni-text-base);
}

/* =============================================================================
   ORIENTATION VARIANTS
   ============================================================================= */

:where(.omni-tabs[data-orientation="vertical"]) {
  flex-direction: row;
}

:where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-list) {
  flex-direction: column;
  border-block-end: none;
  border-inline-end: 1px solid var(--omni-color-border);
}

:where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-list) :where(button, [role="tab"]) {
  margin-block-end: 0;
  margin-inline-end: -1px;
  border-block-end: none;
  border-inline-end: 2px solid transparent;
  text-align: start;
  justify-content: flex-start;
}

:where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-list) :where([aria-selected="true"]) {
  border-inline-end-color: var(--omni-color-primary);
}

:where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-panel) {
  flex: 1;
  padding-inline-start: var(--omni-space-4);
}

/* =============================================================================
   FILL VARIANT
   ============================================================================= */

:where(.omni-tabs[data-fill]) :where(.omni-tabs-list) {
  inline-size: 100%;
}

:where(.omni-tabs[data-fill]) :where(.omni-tabs-list) :where(button, [role="tab"]) {
  flex: 1;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (width <= 48rem) {
  /* Stack vertical tabs on mobile */
  :where(.omni-tabs[data-orientation="vertical"]) {
    flex-direction: column;
  }

  :where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-list) {
    flex-direction: row;
    border-inline-end: none;
    border-block-end: 1px solid var(--omni-color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  :where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-list) :where(button, [role="tab"]) {
    margin-inline-end: 0;
    margin-block-end: -1px;
    border-inline-end: none;
    border-block-end: 2px solid transparent;
  }

  :where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-list) :where([aria-selected="true"]) {
    border-block-end-color: var(--omni-color-primary);
    border-inline-end-color: transparent;
  }

  :where(.omni-tabs[data-orientation="vertical"]) :where(.omni-tabs-panel) {
    padding-inline-start: var(--omni-space-1);
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TOAST - TIER 3 COMPONENT
 * JavaScript-required notification system.
 *
 * ACCESSIBILITY:
 * - role="alert" for urgent messages (error, warning, danger)
 * - role="status" for advisory messages (success, info, default)
 * - Persistent by default (WCAG 2.2.3 compliant)
 * - Pause on hover/focus when auto-dismiss enabled
 * =============================================================================
 *
 * USAGE:
 * toast('Message');                           // Persistent info
 * toast.success('Saved!');                    // Persistent success
 * toast.error('Failed', { duration: 5000 }); // Auto-dismiss with pause
 * ============================================================================= */

/* Toast container (positioned by JS) */
:where(.omni-toast-container) {
  position: fixed;
  z-index: var(--omni-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--omni-space-2);
  pointer-events: none;
}

/* Base toast */
:where(.omni-toast) {
  display: flex;
  gap: var(--omni-space-3);
  align-items: center;
  min-inline-size: 16rem;
  max-inline-size: 28rem;
  padding: var(--omni-space-4);
  color: var(--omni-color-text);
  pointer-events: auto;
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-lg);
  box-shadow: var(--omni-shadow-lg);

  /* Animation states */
  opacity: 0;
  transform: translateX(100%);
  transition: var(--omni-transition-transform), var(--omni-transition-opacity);
}

:where(.omni-toast.omni-show) {
  opacity: 1;
  transform: translateX(0);
}

:where(.omni-toast.omni-hiding) {
  opacity: 0;
  transform: translateX(100%);
}

/* Content wrapper - grows to push close button right */
:where(.omni-toast__content) {
  flex: 1 1 auto;
}

/* Close button */
:where(.omni-toast .omni-close) {
  flex-shrink: 0;
}

/* Semantic variants using data attributes */
:where(.omni-toast[data-variant]) {
  border-inline-start: 4px solid var(--omni-variant-bg);
}

/* Position variants (for different slide directions) */
:where(.omni-toast-from-left) {
  transform: translateX(-100%);
}

:where(.omni-toast-from-top) {
  transform: translateY(-100%);
}

:where(.omni-toast-from-bottom) {
  transform: translateY(100%);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (width <= 640px) {
  :where(.omni-toast) {
    inline-size: calc(100vw - 2rem);
    min-inline-size: auto;
    max-inline-size: none;
  }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(.omni-toast) {
    transition: none;
  }

  :where(.omni-toast.omni-show) {
    transform: none;
  }

  :where(.omni-toast.omni-hiding) {
    transform: none;
  }

  :where(.omni-toast-from-left),
  :where(.omni-toast-from-top),
  :where(.omni-toast-from-bottom) {
    transform: none;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TOOLTIP - TIER 3 ACCESSIBLE
 * Styles for JS-created tooltip elements with proper ARIA.
 * Requires JS - see OmniUI.enhanceTooltip()
 * ============================================================================= */

:where(.omni-tooltip-content) {
  position: absolute;
  z-index: var(--omni-z-popover);
  max-width: var(--omni-space-64);
  padding: var(--omni-space-2) var(--omni-space-3);
  font-size: var(--omni-text-sm);
  font-weight: var(--omni-font-medium);
  line-height: 1.2;
  color: var(--omni-color-text-inverse);
  white-space: nowrap;
  pointer-events: none;
  background: var(--omni-color-text);
  border-radius: var(--omni-radius-sm);
  box-shadow: var(--omni-shadow-md);
  opacity: 0;
  transition: opacity var(--omni-transition);
}

:where(.omni-tooltip-content.omni-tooltip-visible) {
  opacity: 1;
}

:where(.omni-tooltip-content[data-style="multiline"]) {
  max-width: var(--omni-space-80);
  white-space: normal;
  text-align: left;
}

/* Arrow */
:where(.omni-tooltip-content)::after {
  position: absolute;
  content: '';
  border: var(--omni-space-1) solid transparent;
}

/* Arrow - Top position (arrow points down) */
:where(.omni-tooltip-content[data-position="top"])::after,
:where(.omni-tooltip-content):not([data-position])::after {
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border-top-color: var(--omni-color-text);
}

/* Arrow - Bottom position (arrow points up) */
:where(.omni-tooltip-content[data-position="bottom"])::after {
  inset-block-end: 100%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--omni-color-text);
}

/* Arrow - Left position (arrow points right) */
:where(.omni-tooltip-content[data-position="left"])::after {
  inset-inline-start: 100%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  border-left-color: var(--omni-color-text);
}

/* Arrow - Right position (arrow points left) */
:where(.omni-tooltip-content[data-position="right"])::after {
  inset-inline-end: 100%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  border-right-color: var(--omni-color-text);
}
}
@layer omniui.components{
/* Container - responsive layout with data attributes */
:where(.omni-transfer-list) {
  display: flex;
  flex-direction: row;
  gap: var(--omni-variant-gap, var(--omni-space-4));
  align-items: stretch;
  width: 100%;
  min-height: var(--omni-variant-min-height, 300px);
  
  /* Default variant values */
  --omni-variant-gap: var(--omni-space-3);
  --omni-variant-padding: var(--omni-space-3);
  --omni-variant-font-size: var(--omni-text-base);
  --omni-variant-item-direction: row;
  --omni-variant-item-wrap: wrap;
  --omni-variant-item-gap: var(--omni-space-2);
  --omni-variant-item-padding-y: var(--omni-space-1);
  --omni-variant-item-padding-x: var(--omni-space-2);
  --omni-variant-item-radius: var(--omni-radius);
  --omni-variant-empty-height: 100px;
}

/* Vertical layout */
:where(.omni-transfer-list[data-layout="vertical"]) {
  flex-direction: column;
}

:where(.omni-transfer-list[data-layout="vertical"]) .omni-transfer-controls {
  flex-direction: row;
  padding: var(--omni-space-2) 0;
}

/* Individual list panel */
:where(.omni-transfer-panel) {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--omni-color-surface);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-radius-md);
}

/* Panel header */
:where(.omni-transfer-header) {
  display: flex;
  gap: var(--omni-space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--omni-variant-padding);
  border-bottom: 1px solid var(--omni-color-border);
}

:where(.omni-transfer-header) h3,
:where(.omni-transfer-header) h4 {
  margin: 0;
  font-size: var(--omni-variant-font-size);
  font-weight: var(--omni-font-medium);
}

/* Count badge */
:where(.omni-transfer-count) {
  padding: var(--omni-space-1) var(--omni-space-2);
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
  background: var(--omni-color-surface-alt);
  border-radius: var(--omni-radius-full);
}

/* List container */
:where(.omni-transfer-items) {
  display: flex;
  flex: 1;
  flex-direction: var(--omni-variant-item-direction);
  flex-wrap: var(--omni-variant-item-wrap);
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--omni-variant-item-gap);
  padding: var(--omni-variant-padding);
  margin: 0;
  overflow-y: auto;
}

/* List items - adapt to data attributes */
:where(.omni-transfer-item) {
  display: inline-flex;
  align-self: flex-start;
  gap: var(--omni-space-1);
  align-items: center;
  padding: var(--omni-variant-item-padding-y) var(--omni-variant-item-padding-x);
  font-size: var(--omni-variant-font-size);
  white-space: nowrap;
  cursor: pointer;
  background: var(--omni-color-background);
  border: 1px solid var(--omni-color-border);
  border-radius: var(--omni-variant-item-radius);
  transition: all var(--omni-transition);
}

:where(.omni-transfer-item):hover:not(:disabled) {
  background: var(--omni-color-surface-alt);
  border-color: var(--omni-color-primary);
}

/* List style variant */
:where(.omni-transfer-list[data-style="list"]) .omni-transfer-items {
  --omni-variant-item-direction: column;
  --omni-variant-item-wrap: nowrap;
  --omni-variant-item-gap: 0;
}

:where(.omni-transfer-list[data-style="list"]) .omni-transfer-item {
  --omni-variant-item-radius: 0;

  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

:where(.omni-transfer-list[data-style="list"]) .omni-transfer-item:last-child {
  border-bottom: 0;
}

/* Selected state */
:where(.omni-transfer-item[data-selected="true"]) {
  color: var(--omni-color-primary-text);
  background: var(--omni-color-primary);
  border-color: var(--omni-color-primary);
}

/* Control buttons between lists */
:where(.omni-transfer-controls) {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--omni-variant-gap, var(--omni-space-3));
  align-items: center;
  justify-content: center;
  padding: 0 var(--omni-space-2);
}

/* Empty state */
:where(.omni-transfer-empty) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--omni-variant-empty-height);
  font-style: italic;
  color: var(--omni-color-text-muted);
}

/* RESPONSIVE */
@media (width <= 480px) {
  :where(.omni-transfer-list:not([data-layout])) {
    flex-direction: column;
  }
  
  :where(.omni-transfer-list:not([data-layout])) .omni-transfer-controls {
    flex-direction: row;
    padding: var(--omni-space-2) 0;
  }
}

/*
 * USAGE:
 * <div class="omni-transfer-list" data-size="lg" data-style="chips">
 *   <div class="omni-transfer-panel">...</div>
 *   <div class="omni-transfer-controls">...</div>
 *   <div class="omni-transfer-panel">...</div>
 * </div>
 * 
 * Variants:
 * - data-size: sm, md (default), lg
 * - data-layout: horizontal (default), vertical
 * - data-style: chips (default), list
 */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI TREE VIEW - TIER 3 (JS REQUIRED)
 * Hierarchical tree structure with expand/collapse and selection
 *
 * Follows W3C ARIA TreeView pattern:
 * https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 *
 * REQUIRES: tree-view.js for keyboard navigation and ARIA management
 * =============================================================================
 *
 * HTML Structure:
 * <div class="omni-tree" role="tree" aria-label="Label">
 *   <ul role="group">
 *     <li role="none">
 *       <div class="omni-tree-item" role="treeitem" aria-expanded="false" tabindex="0">
 *         <button class="omni-tree-toggle" tabindex="-1" aria-hidden="true">
 *           <svg>...</svg>
 *         </button>
 *         <span class="omni-tree-content">Item text</span>
 *       </div>
 *       <ul role="group" hidden>
 *         <!-- children -->
 *       </ul>
 *     </li>
 *   </ul>
 * </div>
 *
 * Selection modes (data-selection):
 * - none: Navigation only (default)
 * - single: One item selected at a time
 * - multi: Multiple items with checkboxes
 *
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * CSS Custom Properties
 * ----------------------------------------------------------------------------- */
:where(.omni-tree) {
  /* Indentation */
  --omni-tree-indent-size: var(--omni-space-6);
  --omni-tree-indent-guide-width: 0;
  --omni-tree-indent-guide-color: var(--omni-color-border);
  --omni-tree-indent-guide-style: solid;
  --omni-tree-indent-guide-offset: 0.5rem;

  /* Item styling */
  --omni-tree-item-height: 2.25rem;
  --omni-tree-item-padding-x: var(--omni-space-2);
  --omni-tree-item-radius: var(--omni-radius-sm);
  --omni-tree-item-gap: var(--omni-space-2);

  /* Toggle button */
  --omni-tree-toggle-size: 1.25rem;

  /* Colors */
  --omni-tree-item-bg: transparent;
  --omni-tree-item-bg-hover: var(--omni-color-surface-alt);
  --omni-tree-item-bg-selected: color-mix(in sRGB, var(--omni-color-primary) 10%, transparent);
  --omni-tree-item-bg-active: color-mix(in sRGB, var(--omni-color-primary) 15%, transparent);

  /* Transition */
  --omni-tree-transition: 150ms ease;
}

/* -----------------------------------------------------------------------------
 * Tree Container
 * ----------------------------------------------------------------------------- */
:where(.omni-tree) {
  font-size: var(--omni-text-sm);
  line-height: 1.5;
  color: var(--omni-color-text);
}

/* Reset list styles */
:where(.omni-tree ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nested groups (children) - add indent */
:where(.omni-tree ul ul) {
  padding-inline-start: var(--omni-tree-indent-size);
}

/* Group container - hidden by default for parent nodes */
:where(.omni-tree [role="group"][hidden]) {
  display: none;
}

/* -----------------------------------------------------------------------------
 * Tree Item (treeitem row)
 * ----------------------------------------------------------------------------- */
:where(.omni-tree-item) {
  display: flex;
  align-items: center;
  gap: var(--omni-tree-item-gap);
  min-height: var(--omni-tree-item-height);
  padding-inline: var(--omni-tree-item-padding-x);
  border-radius: var(--omni-tree-item-radius);
  background: var(--omni-tree-item-bg);
  cursor: pointer;
  transition: background var(--omni-tree-transition);
  user-select: none;
}

:where(.omni-tree-item:hover) {
  background: var(--omni-tree-item-bg-hover);
}

/* Selected state */
:where(.omni-tree-item[aria-selected="true"]) {
  background: var(--omni-tree-item-bg-selected);
}

:where(.omni-tree-item[aria-selected="true"]:hover) {
  background: var(--omni-tree-item-bg-active);
}

/* Focus styles - visible focus ring */
:where(.omni-tree-item:focus) {
  outline: none;
}

:where(.omni-tree-item:focus-visible) {
  outline: 2px solid var(--omni-color-primary);
  outline-offset: -2px;
}

/* Disabled state */
:where(.omni-tree-item[aria-disabled="true"]) {
  opacity: var(--omni-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
 * Toggle Button (expand/collapse)
 * ----------------------------------------------------------------------------- */
:where(.omni-tree-toggle) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--omni-tree-toggle-size);
  height: var(--omni-tree-toggle-size);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--omni-color-text-muted);
  cursor: pointer;
  border-radius: var(--omni-radius-sm);
  transition: transform var(--omni-tree-transition), color var(--omni-tree-transition);
}

:where(.omni-tree-toggle:hover) {
  color: var(--omni-color-text);
}

/* Toggle icon - chevron pointing right when collapsed */
:where(.omni-tree-toggle svg) {
  width: 1em;
  height: 1em;
  transition: transform var(--omni-tree-transition);
}

/* Rotate chevron when expanded */
:where(.omni-tree-item[aria-expanded="true"]) .omni-tree-toggle svg {
  transform: rotate(90deg);
}

/* Hide toggle for leaf nodes (no aria-expanded = leaf) */
:where(.omni-tree-item:not([aria-expanded])) .omni-tree-toggle {
  visibility: hidden;
}

/* -----------------------------------------------------------------------------
 * Content Area
 * ----------------------------------------------------------------------------- */
:where(.omni-tree-content) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Leading visual (icon before text) */
:where(.omni-tree-icon) {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--omni-color-text-muted);
}

/* Trailing visual (status badge, action button, etc.) */
:where(.omni-tree-trailing) {
  flex-shrink: 0;
  margin-inline-start: auto;
}

/* -----------------------------------------------------------------------------
 * Checkbox Selection Mode (data-selection="multi")
 * ----------------------------------------------------------------------------- */
:where(.omni-tree[data-selection="multi"]) .omni-tree-checkbox {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--omni-color-primary);
}

/* Use OmniUI checkbox styling if available */
:where(.omni-tree[data-selection="multi"]) .omni-tree-item .omni-checkbox {
  gap: 0;
}

:where(.omni-tree[data-selection="multi"]) .omni-tree-item .omni-checkbox input {
  width: 1rem;
  height: 1rem;
}

/* -----------------------------------------------------------------------------
 * Indent Guides (optional visual connectors)
 * ----------------------------------------------------------------------------- */
:where(.omni-tree[data-guides="true"]) {
  --omni-tree-indent-guide-width: 1px;
}

:where(.omni-tree[data-guides="true"] ul ul) {
  position: relative;
}

:where(.omni-tree[data-guides="true"] ul ul)::before {
  content: "";
  position: absolute;
  inset-block-start: var(--omni-tree-indent-guide-offset);
  inset-block-end: var(--omni-tree-indent-guide-offset);
  inset-inline-start: calc(var(--omni-tree-indent-size) / 2);
  width: var(--omni-tree-indent-guide-width);
  background: var(--omni-tree-indent-guide-color);
}

/* Dotted guide style */
:where(.omni-tree[data-guides="dotted"]) {
  --omni-tree-indent-guide-width: 1px;
  --omni-tree-indent-guide-style: dotted;
}

:where(.omni-tree[data-guides="dotted"] ul ul)::before {
  background: none;
  border-inline-start: var(--omni-tree-indent-guide-width) var(--omni-tree-indent-guide-style) var(--omni-tree-indent-guide-color);
}

/* -----------------------------------------------------------------------------
 * Size Variants
 * ----------------------------------------------------------------------------- */
:where(.omni-tree[data-size="sm"]) {
  --omni-tree-item-height: 1.75rem;
  --omni-tree-indent-size: var(--omni-space-4);
  --omni-tree-toggle-size: 1rem;
  font-size: var(--omni-text-xs);
}

:where(.omni-tree[data-size="lg"]) {
  --omni-tree-item-height: 2.75rem;
  --omni-tree-indent-size: var(--omni-space-8);
  --omni-tree-toggle-size: 1.5rem;
  font-size: var(--omni-text-base);
}

/* -----------------------------------------------------------------------------
 * Dense Variant (compact for sidebars/navigation)
 * Note: Dense reduces touch targets below 44px - use for mouse-primary interfaces
 * ----------------------------------------------------------------------------- */
:where(.omni-tree[data-dense="true"]) {
  --omni-tree-item-height: 1.5rem;
  --omni-tree-item-padding-x: var(--omni-space-1);
  --omni-tree-item-gap: var(--omni-space-1);
  --omni-tree-indent-size: var(--omni-space-4);
  --omni-tree-toggle-size: 1rem;
  font-size: var(--omni-text-xs);
}

/* -----------------------------------------------------------------------------
 * Touch-Friendly Variant (WCAG AAA 44x44px targets)
 * ----------------------------------------------------------------------------- */
:where(.omni-tree[data-touch="true"]) {
  --omni-tree-item-height: 2.75rem; /* 44px */
  --omni-tree-toggle-size: 2.75rem;
}

/* -----------------------------------------------------------------------------
 * High Contrast Mode
 * ----------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
  :where(.omni-tree-item:focus-visible) {
    outline-width: 3px;
  }

  :where(.omni-tree-item[aria-selected="true"]) {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  :where(.omni-tree[data-guides="true"] ul ul)::before,
  :where(.omni-tree[data-guides="dotted"] ul ul)::before {
    background: currentColor;
    border-color: currentColor;
  }
}

/* -----------------------------------------------------------------------------
 * Reduced Motion
 * ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :where(.omni-tree) {
    --omni-tree-transition: 0ms;
  }

  :where(.omni-tree-toggle svg) {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
 * Print Styles - Expand all and show hierarchy
 * ----------------------------------------------------------------------------- */
@media print {
  :where(.omni-tree [role="group"][hidden]) {
    display: block !important;
  }

  :where(.omni-tree-toggle) {
    display: none;
  }

  :where(.omni-tree-item) {
    background: none !important;
  }
}
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI VOTE - LEAN VOTING SYSTEM
 * Upvote/downvote with defaults, enhances with data attributes
 * ============================================================================= */

:where(.omni-vote) {
  display: inline-flex;
  flex-direction: column;
  gap: var(--omni-variant-gap, var(--omni-space-1));
  align-items: center;
  user-select: none;
}

/* Default variant values */
:where(.omni-vote):not([data-size]) {
  --omni-variant-gap: var(--omni-space-1);
  --omni-variant-button-size: 2rem;
  --omni-variant-radius: var(--omni-radius-sm);
  --omni-variant-score-padding: var(--omni-space-1);
  --omni-variant-font-size: var(--omni-font-sm);
}

/* Vote buttons with defaults */
:where(.omni-vote-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--omni-variant-button-size, 2rem);
  block-size: var(--omni-variant-button-size, 2rem);
  padding: 0;
  color: var(--omni-color-text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--omni-variant-radius, var(--omni-radius-sm));
  transition: color var(--omni-transition), background var(--omni-transition);
}

/* Default arrow content */
:where(.omni-vote-button[data-action="upvote"]:empty)::before {
  content: "▲";
}

:where(.omni-vote-button[data-action="downvote"]:empty)::before {
  content: "▼";
}

:where(.omni-vote-button:hover:not(:disabled)) {
  color: var(--omni-color-text);
  background: var(--omni-color-surface-alt);
}

:where(.omni-vote-button:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Active states */
:where(.omni-vote-button[aria-pressed="true"][data-action="upvote"]) {
  color: var(--omni-color-success);
}

:where(.omni-vote-button[aria-pressed="true"][data-action="downvote"]) {
  color: var(--omni-color-danger);
}

/* Vote score */
:where(.omni-vote-score) {
  min-inline-size: 2ch;
  padding-inline: var(--omni-variant-score-padding);
  font-size: var(--omni-variant-font-size);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
  text-align: center;
}

/* Horizontal layout */
:where(.omni-vote[data-layout="horizontal"]) {
  flex-direction: row;
}

:where(.omni-vote[data-layout="horizontal"]) .omni-vote-score {
  order: 0;
}

:where(.omni-vote[data-layout="horizontal"]) .omni-vote-button[data-action="upvote"] {
  order: -1;
}

:where(.omni-vote[data-layout="horizontal"]) .omni-vote-button[data-action="downvote"] {
  order: 1;
}

/*
 * USAGE:
 * <!-- Vertical layout (default) - arrows auto-generated via CSS -->
 * <div class="omni-vote" data-size="md">
 *   <button class="omni-vote-button" data-action="upvote" aria-pressed="false"></button>
 *   <div class="omni-vote-score">42</div>
 *   <button class="omni-vote-button" data-action="downvote" aria-pressed="false"></button>
 * </div>
 * 
 * <!-- Horizontal layout with custom content -->
 * <div class="omni-vote" data-layout="horizontal" data-size="sm">
 *   <button class="omni-vote-button" data-action="upvote" aria-pressed="true">
 *     <svg>...</svg>
 *   </button>
 *   <div class="omni-vote-score">43</div>
 *   <button class="omni-vote-button" data-action="downvote" aria-pressed="false">
 *     <svg>...</svg>
 *   </button>
 * </div>
 * 
 * Default arrows: ▲/▼ (auto-generated if button is empty)
 * Custom content: Add SVG, icons, or alternative Unicode: ▴/▾, △/▽, ⌃/⌄
 * 
 * Layout: data-layout (vertical [default], horizontal)
 * Sizes: data-size (sm, md, lg)
 * Actions: data-action="upvote|downvote" on buttons
 * State: aria-pressed="true|false" for voted state
 */
}
@layer omniui.components{

/* =============================================================================
 * OMNIUI FORM WIZARD - TIER 3 (JS REQUIRED)
 * Multi-step form with sequential navigation
 *
 * COMPOSES: stepper.css (Tier 1) for step indicators
 * REQUIRES: form-wizard.js for panel management and navigation
 * =============================================================================
 *
 * HTML Structure:
 * <form class="omni-wizard">
 *   <!-- Uses existing stepper component for indicators -->
 *   <nav aria-label="Form steps">
 *     <ol class="omni-stepper">
 *       <li class="omni-step" data-state="active">...</li>
 *       <li class="omni-step">...</li>
 *     </ol>
 *   </nav>
 *
 *   <!-- Step panels (wizard-specific) -->
 *   <div class="omni-wizard-content">
 *     <section class="omni-wizard-panel">...</section>
 *   </div>
 *
 *   <!-- Navigation buttons (wizard-specific) -->
 *   <div class="omni-wizard-actions">
 *     <button type="button" data-wizard="back">Back</button>
 *     <button type="button" data-wizard="next">Next</button>
 *     <button type="submit" data-wizard="submit" hidden>Submit</button>
 *   </div>
 * </form>
 *
 * DATA ATTRIBUTES:
 * - data-linear: "true" - Prevent skipping ahead (passed to stepper)
 * - data-animate: "true" - Enable panel transitions
 *
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * CSS Custom Properties
 * ----------------------------------------------------------------------------- */
:where(.omni-wizard) {
  --omni-wizard-gap: var(--omni-space-6);
  --omni-wizard-transition: 200ms ease;
}

/* -----------------------------------------------------------------------------
 * Wizard Container
 * ----------------------------------------------------------------------------- */
:where(.omni-wizard) {
  display: flex;
  flex-direction: column;
  gap: var(--omni-wizard-gap);
}

/* Stepper inside wizard gets bottom margin */
:where(.omni-wizard) :where(.omni-stepper) {
  margin-block-end: var(--omni-space-2);
}

/* -----------------------------------------------------------------------------
 * Step Content Panels
 * ----------------------------------------------------------------------------- */
:where(.omni-wizard-content) {
  min-height: 0;
}

:where(.omni-wizard-panel) {
  /* Visible panel */
}

:where(.omni-wizard-panel[hidden]) {
  display: none;
}

/* Panel header */
:where(.omni-wizard-panel-header) {
  margin-block-end: var(--omni-space-4);
}

:where(.omni-wizard-panel-title) {
  margin: 0;
  font-size: var(--omni-text-lg);
  font-weight: var(--omni-font-semibold);
  color: var(--omni-color-text);
}

:where(.omni-wizard-panel-description) {
  margin-block-start: var(--omni-space-1);
  font-size: var(--omni-text-sm);
  color: var(--omni-color-text-muted);
}

/* Animation option */
:where(.omni-wizard[data-animate="true"]) :where(.omni-wizard-panel:not([hidden])) {
  animation: omni-wizard-slide-in var(--omni-wizard-transition) ease-out;
}

@keyframes omni-wizard-slide-in {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.omni-wizard[data-animate="true"]) :where(.omni-wizard-panel) {
    animation: none;
  }
}

/* -----------------------------------------------------------------------------
 * Action Buttons
 * ----------------------------------------------------------------------------- */
:where(.omni-wizard-actions) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--omni-space-3);
  padding-block-start: var(--omni-space-4);
  border-block-start: 1px solid var(--omni-color-border);
}

/* When back is hidden, push buttons to end */
:where(.omni-wizard-actions:has([data-wizard="back"][hidden])) {
  justify-content: flex-end;
}

/* Hidden buttons */
:where(.omni-wizard-actions) [hidden] {
  display: none;
}

/* Button group on the right */
:where(.omni-wizard-actions-end) {
  display: flex;
  gap: var(--omni-space-3);
}

/* -----------------------------------------------------------------------------
 * Error Message (panel-level)
 * ----------------------------------------------------------------------------- */
:where(.omni-wizard-error) {
  display: flex;
  align-items: flex-start;
  gap: var(--omni-space-2);
  padding: var(--omni-space-3);
  margin-block-end: var(--omni-space-4);
  background: color-mix(in sRGB, var(--omni-color-danger) 10%, transparent);
  border: 1px solid var(--omni-color-danger);
  border-radius: var(--omni-radius-md);
  color: var(--omni-color-danger);
  font-size: var(--omni-text-sm);
}

:where(.omni-wizard-error[hidden]) {
  display: none;
}

:where(.omni-wizard-error-icon) {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/* -----------------------------------------------------------------------------
 * Loading State (while validating async)
 * ----------------------------------------------------------------------------- */
:where(.omni-wizard[data-loading="true"]) {
  pointer-events: none;
}

:where(.omni-wizard[data-loading="true"]) :where([data-wizard="next"]),
:where(.omni-wizard[data-loading="true"]) :where([data-wizard="submit"]) {
  opacity: 0.7;
  cursor: wait;
}

/* -----------------------------------------------------------------------------
 * High Contrast Mode
 * ----------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
  :where(.omni-wizard-error) {
    border-width: 2px;
  }

  :where(.omni-wizard-actions) {
    border-block-start-width: 2px;
  }
}

/* -----------------------------------------------------------------------------
 * Print - Show all panels
 * ----------------------------------------------------------------------------- */
@media print {
  :where(.omni-wizard-panel[hidden]) {
    display: block !important;
    page-break-inside: avoid;
    border-block-end: 1px solid var(--omni-color-border);
    padding-block-end: var(--omni-space-4);
    margin-block-end: var(--omni-space-4);
  }

  :where(.omni-wizard-actions) {
    display: none;
  }
}
}