/*
=================================================================================
                              SLON DESIGN SYSTEM
=================================================================================

1. CSS Variables & Design Tokens
   ├── Layout variables (--line1, --line2, etc.)
   ├── Shadcn UI Color System (полная палитра)
   ├── Semantic Colors (--text-primary, --surface-primary, etc.)
   ├── Legacy aliases (для обратной совместимости)
   └── Shadow, Radius, Spacing tokens

2. Reset & Base Styles
   ├── HTML/Body базовые стили
   ├── Респонсивная типографика
   ├── Базовые стили ссылок
   ├── Selection & Scrollbar стили
   └── Main layout элементы

3. Typography System
   ├── Heading стили (.text-h1, .text-h2, etc.)
   ├── Size система (.text-size1, .text-size2, etc.)
   └── Typography utilities (.text-bold, .text-align-center)

4. Layout System
   ├── Size classes (.full, .full-height, .full-width)
   ├── Line width system (.line1, .line2, etc.)
   ├── Flexbox system (все .flex-* классы)
   └── Position utilities (.position-relative, .z-index-*)

5. Component Styles
   ├── Table styles (thead, tbody, th, td)
   ├── Button Component (все варианты кнопок)
   ├── Form Controls (input, select, textarea)
   ├── Form Layout (.form_read, .form_edit)
   └── Badge Component (все варианты badges)

6. Utility Classes
   ├── Color utilities (.cl-*, .back-*)
   ├── Gradient utilities
   ├── Spacing utilities (.mg-*, .pg-*)
   ├── Gap utilities (.gap-*)
   └── Miscellaneous utilities

7. Media Queries & Responsive
   ├── Responsive line widths
   ├── Mobile adaptations
   └── Legacy layout components

СИСТЕМА РАЗМЕРОВ:
- size1: Самый большой (заголовки, крупные элементы)
- size2: Средний размер (по умолчанию)  
- size3: Малый размер (вспомогательные элементы)

ЦВЕТОВАЯ СИСТЕМА:
- Основана на Shadcn UI палитре
- Семантические переменные для консистентности
- Legacy aliases для обратной совместимости

=================================================================================
*/


/* =================================================================================
   1. CSS VARIABLES & DESIGN TOKENS
   ================================================================================= */
:root {
  --line1: 340px;
  --line2: 552px;
  --line3: 840px;
  --line4: 1128px;
  --line5: 244px;
  --padding_base: 24px;

    /* Breakpoint tokens */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* Enhanced Custom Properties with Fallbacks */
  --font-size-xs: max(0.75rem, calc(var(--font-size-base, 1rem) * 0.75));
  --font-size-sm: max(0.875rem, calc(var(--font-size-base, 1rem) * 0.875));
  --font-size-base: 1rem;
  --font-size-lg: max(1.125rem, calc(var(--font-size-base, 1rem) * 1.125));
  --font-size-xl: max(1.25rem, calc(var(--font-size-base, 1rem) * 1.25));
  --font-size-2xl: max(1.5rem, calc(var(--font-size-base, 1rem) * 1.5));

  /* Shadcn UI Complete Color Palette - 19 Colors */
  
  /* Semantic Colors - Based on Zinc palette for consistency */
  --text-primary: #0a0a0a;
  --text-secondary: #737373;
  --text-tertiary: var(--neutral-300);
  --text-muted: var(--neutral-300);

  --text-color: var(--text-primary);
  --text-sub-color: var(--text-secondary);
  
  --surface-primary: #ffffff;
  --surface-secondary: var(--neutral-100);
  --surface-tertiary: var(--neutral-200);
  --surface-hover: rgba(0, 0, 0, 0.05);

  /* #f4f4f4 */
  
  --border-light: var(--neutral-200);
  --border-medium: var(--neutral-300);
  --border-dark: var(--neutral-400);
  
  --accent-primary: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: rgba(59, 130, 246, 0.1);
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-xll: 1.25rem;
  --radius-xxl: 1.5rem;

  /* Shadcn UI Color System */

  /* Gray */
  --gray-50: hsla(0, 0%, 98%, 1);
  --gray-100: hsla(0, 0%, 95%, 1);
  --gray-200: hsla(0, 0%, 92%, 1);
  --gray-300: hsla(0, 0%, 90%, 1);
  --gray-400: hsla(0, 0%, 92%, 1);
  --gray-500: hsla(0, 0%, 79%, 1);
  --gray-600: hsla(0, 0%, 66%, 1);
  --gray-700: hsla(0, 0%, 56%, 1);
  --gray-800: hsla(0, 0%, 49%, 1);
  --gray-900: hsla(0, 0%, 40%, 1);
  --gray-950: hsla(0, 0%, 9%, 1);

  /* Neutral */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  /* Red */
  --red-50: #fef2f2;   /* Very light red tint */
  --red-100: #fee2e2;  /* Light red tint */
  --red-200: #fecaca;  /* Lighter red */
  --red-300: #fca5a5;  /* Light red */
  --red-400: #f87171;  /* Medium light red */
  --red-500: #ff0000;  /* Pure red - base color */
  --red-600: #dc2626;  /* Strong red */
  --red-700: #b91c1c;  /* Dark red */
  --red-800: #991b1b;  /* Darker red */
  --red-900: #7f1d1d;  /* Very dark red */
  --red-950: #450a0a;  /* Deepest red */

  /* Amber */
  --amber-50: #fffbeb;   /* Very light amber tint */
  --amber-100: #fef3c7;  /* Light amber tint */
  --amber-200: #fde68a;  /* Lighter amber */
  --amber-300: #fcd34d;  /* Light amber */
  --amber-400: #fbbf24;  /* Medium light amber */
  --amber-500: #ffa500;  /* Pure orange - base color */
  --amber-600: #d97706;  /* Strong amber */
  --amber-700: #b45309;  /* Dark amber */
  --amber-800: #92400e;  /* Darker amber */
  --amber-900: #78350f;  /* Very dark amber */
  --amber-950: #451a03;  /* Deepest amber */

  /* Yellow */
  --yellow-50: #fefce8;   /* Very light yellow tint */
  --yellow-100: #fef3c7;  /* Light yellow tint */
  --yellow-200: #fde68a;  /* Lighter yellow */
  --yellow-300: #fcd34d;  /* Light yellow */
  --yellow-400: #fbbf24;  /* Medium light yellow */
  --yellow-500: #ffff00;  /* Pure yellow - base color */
  --yellow-600: #d97706;  /* Strong yellow */
  --yellow-700: #b45309;  /* Dark yellow */
  --yellow-800: #92400e;  /* Darker yellow */
  --yellow-900: #78350f;  /* Very dark yellow */
  --yellow-950: #451a03;  /* Deepest yellow */

  /* Lime */
  --lime-50: #f7fee7;
  --lime-100: #ecfccb;
  --lime-200: #d9f99d;
  --lime-300: #bef264;
  --lime-400: #a3e635;
  --lime-500: #84cc16;
  --lime-600: #65a30d;
  --lime-700: #4d7c0f;
  --lime-800: #3f6212;
  --lime-900: #365314;
  --lime-950: #1a2e05;

  /* Green */
  --green-50: #f0fdf4;   /* Very light green tint */
  --green-100: #dcfce7;  /* Light green tint */
  --green-200: #bbf7d0;  /* Lighter green */
  --green-300: #86efac;  /* Light green */
  --green-400: #4ade80;  /* Medium light green */
  --green-500: #008000;  /* Pure green - base color */
  --green-600: #16a34a;  /* Strong green */
  --green-700: #15803d;  /* Dark green */
  --green-800: #166534;  /* Darker green */
  --green-900: #14532d;  /* Very dark green */
  --green-950: #052e16;  /* Deepest green */

  /* Emerald */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  --emerald-950: #022c22;

  /* Teal */
  --teal-50: #f0fdfa;
  --teal-100: hsla(169, 70%, 96%, 1);
  --teal-200: hsla(167, 70%, 94%, 1);
  --teal-300: hsla(168, 70%, 90%, 1);
  --teal-400: hsla(170, 70%, 85%, 1);
  --teal-500: hsla(170, 70%, 72%, 1);
  --teal-600: hsla(170, 70%, 57%, 1);
  --teal-700: hsla(173, 80%, 36%, 1);
  --teal-800: hsla(173, 83%, 30%, 1);
  --teal-900: hsla(174, 91%, 25%, 1);
  --teal-950: hsla(171, 80%, 13%, 1);

  /* Cyan */
  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
  --cyan-950: #083344;

  /* Sky */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;

  /* Blue */
  --blue-50: #eff6ff;   /* Very light blue tint */
  --blue-100: #dbeafe;  /* Light blue tint */
  --blue-200: #bfdbfe;  /* Lighter blue */
  --blue-300: #93c5fd;  /* Light blue */
  --blue-400: #60a5fa;  /* Medium light blue */
  --blue-500: #0000ff;  /* Pure blue - base color */
  --blue-600: #2563eb;  /* Strong blue */
  --blue-700: #1d4ed8;  /* Dark blue */
  --blue-800: #1e40af;  /* Darker blue */
  --blue-900: #1e3a8a;  /* Very dark blue */
  --blue-950: #172554;  /* Deepest blue */

  /* Indigo */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;

  /* Violet */
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;

  /* Purple */
  --purple-50: #faf5ff;
  --purple-100: hsla(276, 100%, 97%, 1);
  --purple-200: hsla(277, 87%, 97%, 1);
  --purple-300: hsla(274, 78%, 95%, 1);
  --purple-400: hsla(276, 71%, 92%, 1);
  --purple-500: hsla(274, 70%, 82%, 1);
  --purple-600: hsla(273, 72%, 73%, 1);
  --purple-700: hsla(272, 51%, 54%, 1);
  --purple-800: hsla(272, 47%, 45%, 1);
  --purple-900: hsla(274, 71%, 43%, 1);
  --purple-950: hsla(276, 100%, 15%, 1);

  /* Fuchsia */
  --fuchsia-50: #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f5d0fe;
  --fuchsia-300: #f0abfc;
  --fuchsia-400: #e879f9;
  --fuchsia-500: #d946ef;
  --fuchsia-600: #c026d3;
  --fuchsia-700: #a21caf;
  --fuchsia-800: #86198f;
  --fuchsia-900: #701a75;
  --fuchsia-950: #4a044e;

  /* Pink */
  --pink-50: #fdf2f8;
  --pink-100: hsla(330, 100%, 96%, 1);
  --pink-200: hsla(340, 90%, 96%, 1);
  --pink-300: hsla(340, 82%, 94%, 1);
  --pink-400: hsla(341, 76%, 91%, 1);
  --pink-500: hsla(340, 75%, 84%, 1);
  --pink-600: hsla(341, 75%, 73%, 1);
  --pink-700: hsla(336, 80%, 58%, 1);
  --pink-800: hsla(336, 74%, 51%, 1);
  --pink-900: hsla(336, 65%, 45%, 1);
  --pink-950: hsla(333, 74%, 15%, 1);

  /* Rose */
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #fecdd3;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;
  --rose-800: #9f1239;
  --rose-900: #881337;
  --rose-950: #4c0519;

  /* Orange - Premium Palette */
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --orange-950: #431407;
  
  /* Legacy colors for compatibility */
  --white: #ffffff;
  --black: var(--neutral-950);
  --gray: var(--gray-500);
  --neutral: var(--neutral-500);
  --red: var(--red-500);
  --amber: var(--amber-500);
  --orange: var(--orange-500);  
  --yellow: var(--yellow-500);
  --lime: var(--lime-500);
  --green: var(--green-500);
  --teal: var(--teal-500);
  --blue: var(--blue-500);
  --indigo: var(--indigo-500);
  --violet: var(--violet-500);
  --purple: var(--purple-500);
  --fuchsia: var(--fuchsia-500);
  --pink: var(--pink-500);
  --rose: var(--rose-500);
  --cyan: var(--cyan-500);
  --sky: var(--sky-500);
}

/* =================================================================================
   2. RESET & BASE STYLES
   ================================================================================= */

html {
  position: relative;
  height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  block-size: 100vh;
  inline-size: 100%;
  display: flex;
  font-size: 15px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-primary);
  background: #f5f5f5;
  background-image: none;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base Link Styles */
a {
  color: var(--black);
  text-decoration: none;
  text-underline-offset: 4px;
}

  a:hover {
    color: var(--black);
    text-decoration: underline;
  }

/* Selection & Scrollbar Styles */
::selection {
  color: var(--white);
  background: var(--violet-600);
}

::-webkit-scrollbar {
  width: 22px;
}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--gray-200);
  border: 1px solid var(--gray-400);
}

::-webkit-scrollbar-track {
  border-bottom-right-radius: 22px;
}

/* Base Layout Elements */
main {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 0;
}

/* =================================================================================
   3. TYPOGRAPHY SYSTEM 
   ================================================================================= */

/* Heading System */

.text-h1 {
  display: block;
  font-size: 2em;
  /* margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
  font-weight: bold;
}

.text-h2 {
  display: block;
  font-size: 1.5em;
  /* margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
  font-weight: bold;
}

.text-h3 {
  display: block;
  font-size: 1.17em;
  /* margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
  font-weight: bold;
}

.text-h4 {
  display: block;
  font-size: 1em;
  /* margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
  font-weight: bold;
}

.text-h5 {
  display: block;
  font-size: 0.83em;
  /* margin-block-start: 1.67em;
  margin-block-end: 1.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
  font-weight: bold;
}

.text-h6 {
  display: block;
  font-size: 0.75em;
  /* margin-block-start: 2.33em;
  margin-block-end: 2.33em;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
  font-weight: bold;
}

/* Text Size System - Система размеров текста */

/* Modern Text Size System */
.text-2xl { font-size: 1.5rem; line-height: 2rem; font-weight: 400; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; }
.text-lg { font-size: 1.125rem; line-height: 1.625rem; font-weight: 400; }
.text-base { font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.text-sm-bold { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.text-xs { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.text-xs-bold { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }

/* Legacy Support - Обратная совместимость */
.text-size1 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 400; }
.text-size2 { font-size: 1rem; line-height: 1.5rem; font-weight: 400; }
.text-size3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.text-size3-bold { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.text-size4 { font-size: 0.75rem; line-height: 1rem; font-weight: 500; }
.text-size4-bold { font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.text-size_h3 { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; }

/* Typography Utilities */
.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-bold { font-weight: 600; }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Text Decoration */
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* Responsive Typography */
@media (max-width: 768px) {
  .text-2xl { font-size: 1.375rem; line-height: 1.75rem; }
  .text-xl { font-size: 1.125rem; line-height: 1.625rem; }
  .text-lg { font-size: 1rem; line-height: 1.5rem; }
  .text-base { font-size: 0.875rem; line-height: 1.25rem; }
  .text-h1 { font-size: 1.75em; }
  .text-h2 { font-size: 1.25em; }
  .text-h3 { font-size: 1.1em; }
}

@media (max-width: 480px) {
  .text-2xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text-xl { font-size: 1rem; line-height: 1.5rem; }
  .text-lg { font-size: 0.875rem; line-height: 1.25rem; }
  .text-base { font-size: 0.75rem; line-height: 1.125rem; }
  .text-h1 { font-size: 1.5em; }
  .text-h2 { font-size: 1.15em; }
}

/* =================================================================================
   4. LAYOUT SYSTEM
   ================================================================================= */

/* Size Classes */
.full { height: 100%; width: 100%; }
.full-height { height: 100%; }
.full-width { width: 100%; }

/* Line Width System */
.line1 { width: var(--line1); }
.line2 { width: var(--line2); }
.line3 { width: var(--line3); }
.line4 { width: var(--line4); }

/* Flexbox System */
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-start {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.flex-row-end {
  display: flex;
  flex-direction: row;
  align-items: end;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-row-center-just {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-row.wrap {
  flex-wrap: wrap;
}

/* Flex Justification */
.flex-row.just-end,
.flex-row-start.just-end,
.flex-row-center.just-end,
.flex-row-end.just-end {
  justify-content: end;
}

.flex-row.just-center,
.flex-row-start.just-center,
.flex-row-center.just-center,
.flex-row-end.just-center {
  justify-content: center;
}

.flex-row.just-between,
.flex-row-start.just-between,
.flex-row-center.just-between,
.flex-row-end.just-between {
  justify-content: space-between;
}

/* Column Flexbox */
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-column-center-just {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-column-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flex-column-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.flex-column.just-center,
.flex-column-start.just-center,
.flex-column-center.just-center,
.flex-column-end.just-center {
  align-items: center;
}

/* Flex Utilities */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* =================================================================================
   5. COMPONENT STYLES
   ================================================================================= */

/* Table Styles */
table {
  border-collapse: separate;
  text-indent: initial;
  border-spacing: 0px;
  font-size: 0.875rem;
  background: var(--surface-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
  /* border: 1px solid var(--border-light); */
  width: 100%;
  min-width: 800px;
  table-layout: auto;
}

thead {
  color: var(--text-secondary);
  background: var(--surface-secondary);
  /* font-weight: 600; */
}

thead th {
  text-align: start;
  height: 46px;
  font-weight:500;
  border-bottom: 1px solid var(--border-dark);
}

th:first-child {
  padding-left: 24px;
}

/* 
thead th,
tbody td {
  min-height: 46px;
} */



thead th,
tbody td {
  padding: 6px 10px;
  
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  min-height: 46px;
}

tbody td {
  border-bottom: 1px solid var(--border-light);
}

tbody td.group {
  background: var(--surface-secondary);
}

tbody tr:hover {
  background-color: var(--surface-hover);
  transition: background-color 0.15s ease;
}

/* th:first-child,
td:first-child {
  padding-left: 24px;
}

th:last-child,
td:last-child {
  padding-right: 24px;
} */

/* Button Component */
button,
a.button,
input[type="submit"] {
  gap: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* color: white; */
  /* background-color: var(--accent-primary); */
  /* border: 1px solid var(--accent-primary); */
  cursor: pointer;
  border-radius: var(--radius-md);
  /* font-size: 0.875rem; */
  font-weight: 500;
  line-height: 1.25rem;
  padding: 10px 16px;
  width: max-content;
  height: min-content;
  transition: all 0.15s ease;
  text-decoration: none;
  outline: none;
  position: relative;
  overflow: hidden;

  color: var(--text-primary);
  border: 1px solid var(--border-light);
  background-color: var(--surface-primary);

  font-size: var(--font-size-sm);
  font-weight: 600;
}

button:hover,
a.button:hover,
input[type="submit"]:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-dark);
  /* background-color: var(--accent-hover); */
  /* border-color: var(--accent-hover); */
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

button:focus,
a.button:focus,
input[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-md);
}

/* Button variants */
button.secondary,
a.button.secondary,
input[type="submit"].secondary {
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  background-color: var(--surface-primary);
}

button.secondary:hover,
a.button.secondary:hover,
input[type="submit"].secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-dark);
}

/* Button sizes */
button.size-sm,
a.button.size-sm,
input[type="submit"].size-sm {
  gap: 6px;
  font-size: 0.75rem;
  padding: 6px 12px;
}

button.size-lg,
a.button.size-lg,
input[type="submit"].size-lg {
  gap: 12px;
  font-size: 1rem;
  padding: 12px 20px;
}

/* Button states */
button.main,
a.button.main,
input[type="submit"].main {
  color: white;
  background-color: var(--neutral-950);
  border-color: var(--neutral-950);
}

button.main:hover,
a.button.main:hover,
input[type="submit"].main:hover {
  background-color: var(--neutral-700);
  border-color: var(--neutral-700);
}

button.danger,
a.button.danger,
input[type="submit"].danger {
  color: white;
  background-color: var(--red-700);
  border-color: var(--red-700);
}

button.danger:hover,
a.button.danger:hover,
input[type="submit"].danger:hover {
  background-color: var(--red-700);
  border-color: var(--red-700);
}

button.success,
a.button.success,
input[type="submit"].success {
  color: white;
  background-color: var(--green-700);
  border-color: var(--green-700);
}

button.success:hover,
a.button.success:hover,
input[type="submit"].success:hover {
  background-color: var(--green-700);
  border-color: var(--green-700);
}

button.warning,
a.button.warning,
input[type="submit"].warning {
  color: white;
  background-color: var(--yellow-500);
  border-color: var(--yellow-500);
}

button.warning:hover,
a.button.warning:hover,
input[type="submit"].warning:hover {
  background-color: var(--yellow-700);
  border-color: var(--yellow-700);
}

button:disabled,
a.button:disabled,
input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--gray-400);
  border-color: var(--gray-400);
  color: var(--gray-100);
}

button:disabled:hover,
a.button:disabled:hover,
input[type="submit"]:disabled:hover {
  transform: none;
  box-shadow: none;
  background-color: var(--gray-400);
  border-color: var(--gray-400);
}

button.three,
a.button.three ,
input[type="submit"].three  {
  border: none;
}

button.three.gray,
a.button.three.gray ,
input[type="submit"].three.gray  {
  color: var(--neutral-800);
}

button.three.red,
a.button.three.red ,
input[type="submit"].three.red  {
  /* color: var(--red-600); */
  color: red;
}

button img, 
a.button img, 
input[type="submit"] img, 
button svg, 
a.button svg, 
input[type="submit"] svg {
    height: 20px;
    width: 20px;
}

/* Form Controls */
div.form_edit label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 2px;
  margin-left: 12px;
}

div.form_read label {
  display: block;
  color: var(--text-secondary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  box-sizing: border-box;
  color: var(--text-primary);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-medium);
  cursor: text;
  border-radius: var(--radius-md);
  width: 100%;
  min-width: var(--line1);
  height: min-content;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 10px 16px;
  appearance: none;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  resize: none;
  transition: all 0.15s ease;
  font-family: inherit;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
  background-color: var(--surface-primary);
  border-color: var(--accent-primary);
  /* box-shadow: 0 0 0 3px var(--accent-light); */
}

  select > option[value=""],
  select > option[value="0"] {
    font-style: italic;
    color: var(--text-secondary);
  }

  select option {
    font-size: var(--font-size-sm);
  }

input:disabled,
input:read-only,
textarea:disabled,
textarea:read-only,
select:disabled {
  cursor: not-allowed;
  background-color: var(--surface-tertiary);
  border-color: var(--border-light);
  opacity: 0.7;
}

/* Input sizes */
input[type="text"].size-sm,
input[type="email"].size-sm,
input[type="password"].size-sm,
input[type="number"].size-sm,
input[type="tel"].size-sm,
input[type="url"].size-sm,
input[type="search"].size-sm,
input[type="date"].size-sm,
input[type="time"].size-sm,
input[type="datetime-local"].size-sm,
input[type="month"].size-sm,
input[type="week"].size-sm,
textarea.size-sm,
select.size-sm {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 6px 12px;
}

input[type="text"].size-lg,
input[type="email"].size-lg,
input[type="password"].size-lg,
input[type="number"].size-lg,
input[type="tel"].size-lg,
input[type="url"].size-lg,
input[type="search"].size-lg,
input[type="date"].size-lg,
input[type="time"].size-lg,
input[type="datetime-local"].size-lg,
input[type="month"].size-lg,
input[type="week"].size-lg,
textarea.size-lg,
select.size-lg {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 12px 20px;
}

input[type="date"]:invalid,
input[type="date"][value=""] {
  color: var(--text-muted);
}

select {
  background-image: url('/css/icons/chevron_down2.svg');
  background-repeat: no-repeat, repeat;
  background-position: right 1em top 50%, 0 0;
  background-size: 1em auto, 100%;
}

select:focus {
  background-image: url('/css/icons/chevron_down1.svg');
  outline: none;
  box-shadow: none;
}

/* Form Layout */
form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form_edit {
  width: var(--line2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form_read {
  width: var(--line1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form_read > div.readonly > span {
  font-weight: 500;
}

/* .form_read > div,
.form_edit > div {
  margin-bottom: 20px;
} */

.form_read > div:last-child,
.form_edit > div:last-child {
  margin-bottom: 0;
}

.field-validation-error {
  font-size: 0.75rem;
  color: var(--red);
}

/* Badge Component */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  padding: 4px 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
  width: max-content;
  border: 1px solid transparent;
}

/* Badge sizes */
.badge.size-sm {
  font-size: 0.625rem;
  padding: 2px 6px;
}

.badge.size-lg {
  font-size: 0.875rem;
  padding: 6px 12px;
}

/* Badge variants */
.badge.default {
  background-color: var(--surface-tertiary);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.badge.primary {
  background-color: var(--accent-primary);
  color: var(--white);
  border-color: var(--accent-primary);
}

.badge.success {
  background-color: var(--green_50);
  color: var(--green_600);
  border-color: var(--green_200);
}

.badge.destructive {
  background-color: var(--red_50);
  color: var(--red_600);
  border-color: var(--red_200);
}

.badge.warning {
  background-color: var(--yellow_50);
  color: var(--yellow_600);
  border-color: var(--yellow_200);
}

.badge.outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* Additional Badge Color Variants */
.badge.red {
  background-color: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-200);
}

.badge.blue {
  background-color: var(--blue-50);
  color: var(--blue-600);
  border-color: var(--blue-200);
}

.badge.green {
  background-color: var(--green-50);
  color: var(--green-600);
  border-color: var(--green-200);
}

.badge.yellow {
  background-color: var(--yellow-50);
  color: var(--yellow-600);
  border-color: var(--yellow-200);
}

.badge.orange {
  background-color: var(--orange-50);
  color: var(--orange-600);
  border-color: var(--orange-200);
}

.badge.purple {
  background-color: var(--purple-50);
  color: var(--purple-600);
  border-color: var(--purple-600);
}

.badge.gray {
  background-color: var(--gray-50);
  color: var(--gray-600);
  border-color: var(--gray-200);
}

.badge.black {
  background-color: var(--neutral-950);
  color: var(--white);
  border-color: var(--neutral-950);
}

.badge.carnation {
  background-color: var(--pink-50);
  color: var(--pink-700);
  border-color: var(--pink-200);
}

/* New Badge Variants */
.badge.emerald {
  background-color: var(--emerald-50);
  color: var(--emerald-600);
  border-color: var(--emerald-200);
}

.badge.teal {
  background-color: var(--teal-50);
  color: var(--teal-600);
  border-color: var(--teal-200);
}

.badge.cyan {
  background-color: var(--cyan-50);
  color: var(--cyan-600);
  border-color: var(--cyan-200);
}

.badge.sky {
  background-color: var(--sky-50);
  color: var(--sky-600);
  border-color: var(--sky-200);
}

.badge.indigo {
  background-color: var(--indigo-50);
  color: var(--indigo-600);
  border-color: var(--indigo-200);
}

.badge.violet {
  background-color: var(--violet-50);
  color: var(--violet-600);
  border-color: var(--violet-200);
}

.badge.fuchsia {
  background-color: var(--fuchsia-50);
  color: var(--fuchsia-600);
  border-color: var(--fuchsia-200);
}

.badge.pink {
  background-color: var(--pink-50);
  color: var(--pink-600);
  border-color: var(--pink-200);
}

.badge.rose {
  background-color: var(--rose-50);
  color: var(--rose-600);
  border-color: var(--rose-200);
}

.badge.lime {
  background-color: var(--lime-50);
  color: var(--lime-600);
  border-color: var(--lime-200);
}

.badge.amber {
  background-color: var(--amber-50);
  color: var(--amber-600);
  border-color: var(--amber-200);
}

/* Alias for backward compatibility */
.badge.secondary {
  background-color: var(--gray-50);
  color: var(--gray-700);
  border-color: var(--gray-200);
}

/* Dark Badge Variants */
.badge.dark {
  background-color: var(--gray-800);
  color: var(--white);
  border-color: var(--gray-800);
}

.badge.dark.red {
  background-color: var(--red-600);
  color: var(--white);
  border-color: var(--red-600);
}

.badge.dark.blue {
  background-color: var(--blue-600);
  color: var(--white);
  border-color: var(--blue-600);
}

.badge.dark.green {
  background-color: var(--green-600);
  color: var(--white);
  border-color: var(--green-600);
}

.badge.dark.yellow {
  background-color: var(--yellow-600);
  color: var(--white);
  border-color: var(--yellow-600);
}

.badge.dark.orange {
  background-color: var(--orange-600);
  color: var(--white);
  border-color: var(--orange-600);
}

.badge.dark.purple {
  background-color: var(--purple-600);
  color: var(--white);
  border-color: var(--purple-600);
}

.badge.dark.gray {
  background-color: var(--gray-600);
  color: var(--white);
  border-color: var(--gray-600);
}

.badge.dark.black {
  background-color: var(--neutral-800);
  color: var(--white);
  border-color: var(--neutral-800);
}

.badge.dark.carnation {
  background-color: var(--pink-700);
  color: var(--white);
  border-color: var(--pink-700);
}

/* New Dark Badge Variants */
.badge.dark.emerald {
  background-color: var(--emerald-600);
  color: var(--white);
  border-color: var(--emerald-600);
}

.badge.dark.teal {
  background-color: var(--teal-600);
  color: var(--white);
  border-color: var(--teal-600);
}

.badge.dark.cyan {
  background-color: var(--cyan-600);
  color: var(--white);
  border-color: var(--cyan-600);
}

.badge.dark.sky {
  background-color: var(--sky-600);
  color: var(--white);
  border-color: var(--sky-600);
}

.badge.dark.indigo {
  background-color: var(--indigo-600);
  color: var(--white);
  border-color: var(--indigo-600);
}

.badge.dark.violet {
  background-color: var(--violet-600);
  color: var(--white);
  border-color: var(--violet-600);
}

.badge.dark.fuchsia {
  background-color: var(--fuchsia-600);
  color: var(--white);
  border-color: var(--fuchsia-600);
}

.badge.dark.pink {
  background-color: var(--pink-600);
  color: var(--white);
  border-color: var(--pink-600);
}

.badge.dark.rose {
  background-color: var(--rose-600);
  color: var(--white);
  border-color: var(--rose-600);
}

.badge.dark.lime {
  background-color: var(--lime-600);
  color: var(--white);
  border-color: var(--lime-600);
}

.badge.dark.amber {
  background-color: var(--amber-600);
  color: var(--white);
  border-color: var(--amber-600);
}

/* =================================================================================
   6. UTILITY CLASSES
   ================================================================================= */

/* Color Utilities */
.cl-text { color: var(--text-primary); }
.cl-text-secondary { color: var(--text-secondary); }
.cl-text-tertiary { color: var(--text-tertiary); }

.cl-text-muted { color: var(--text-muted); }

/* Legacy Color Utilities */
.cl-white { color: var(--white); }
.cl-black { color: var(--black); }
.cl-gray { color: var(--gray); }
.cl-neutral { color: var(--neutral); }
.cl-red { color: var(--red); }
.cl-amber { color: var(--amber); }
.cl-yellow { color: var(--yellow); }
.cl-lime { color: var(--lime); }
.cl-green { color: var(--green); }
.cl-cyan { color: var(--cyan); }
.cl-sky { color: var(--sky); }
.cl-teal { color: var(--teal); }
.cl-emerald { color: var(--emerald); }
.cl-blue { color: var(--blue); }
.cl-indigo { color: var(--indigo); }
.cl-violet { color: var(--violet); }
.cl-purple { color: var(--purple); }
.cl-fuchsia { color: var(--fuchsia); }
.cl-pink { color: var(--pink); }
.cl-rose { color: var(--rose); }
.cl-orange { color: var(--orange); }

/* Color Old Classes (for backward compatibility) */
.cl-gray-600 { color: var(--gray); }
.cl-red-600 { color: var(--red); }
.cl-blue-600 { color: var(--blue); }
.cl-green-600 { color: var(--green); }
.cl-yellow-600 { color: var(--yellow); }
.cl-orange-600 { color: var(--orange); }
.cl-purpur-600 { color: var(--purple); }
.cl-lime-600 { color: var(--lime); }
.cl-emerald-600 { color: var(--emerald); }
.cl-teal-600 { color: var(--teal); }
.cl-cyan-600 { color: var(--cyan); }
.cl-sky-600 { color: var(--sky); }
.cl-indigo-600 { color: var(--indigo); }
.cl-violet-600 { color: var(--violet); }
.cl-fuchsia-600 { color: var(--fuchsia); }
.cl-pink-600 { color: var(--pink); }
.cl-rose-600 { color: var(--rose); }

/* Background Utilities */
.bg-white { background-color:  var(--white); }
.bg-primary { background-color: var(--surface-primary); }
.bg-secondary { background-color: var(--surface-secondary); }
.bg-tertiary { background-color: var(--surface-tertiary); }
.bg-hover { background-color: var(--surface-hover); }
.bg-red { background-color: var(--red-50); }
.bg-blue { background-color: var(--blue-50); }
.bg-green { background-color: var(--green-50); }
.bg-yellow { background-color: var(--yellow-50); }
.bg-orange { background-color: var(--orange-50); }
.bg-emerald { background-color: var(--emerald-50); }
.bg-teal { background-color: var(--teal-50); }
.bg-cyan { background-color: var(--cyan-50); }
.bg-sky { background-color: var(--sky-50); }
.bg-indigo { background-color: var(--indigo-50); }
.bg-violet { background-color: var(--violet-50); }
.bg-purple { background-color: var(--purple-50); }
.bg-fuchsia { background-color: var(--fuchsia-50); }
.bg-pink { background-color: var(--pink-50); }
.bg-rose { background-color: var(--rose-50); }

/* Spacing Utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-auto { margin: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-auto { margin-right: auto; }

.my-0 { margin-block: 0; }
.my-1 { margin-block: 0.25rem; }
.my-2 { margin-block: 0.5rem; }
.my-3 { margin-block: 0.75rem; }
.my-4 { margin-block: 1rem; }
.my-6 { margin-block: 1.5rem; }
.my-8 { margin-block: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* Padding Utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

/* Gap Utilities */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }    /* 4 */
.gap-2 { gap: 0.5rem; }     /* 8 */
.gap-3 { gap: 0.75rem; }    /* 12 */
.gap-4 { gap: 1rem; }       /* 16 */
.gap-5 { gap: 1.25rem; }    /* 20 */
.gap-6 { gap: 1.5rem; }     /* 24 */
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }



/* Border Utilities */
.border { border: 1px solid var(--border-light); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--border-light); }
.border-b { border-bottom: 1px solid var(--border-light); }
.border-l { border-left: 1px solid var(--border-light); }
.border-r { border-right: 1px solid var(--border-light); }

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 9999px; }

/* Shadow Utilities */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Position Utilities */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

/* Position Utilities */
.position-relative {
  position: relative;
}

.z-10 {
  z-index: 1;
}

.z-50 {
  z-index: 10;
}

.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Z-index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Overflow Utilities */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }

.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-scroll { overflow-y: scroll; }

/* Width & Height Utilities */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-fit { width: fit-content; }
.w-min { width: min-content; }
.w-max { width: max-content; }

.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-fit { height: fit-content; }
.h-min { height: min-content; }
.h-max { height: max-content; }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Alert Components */
.alert {
    padding: 1rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid;
    margin-bottom: 1rem;
}

.alert-success {
    background: var(--green-50, #f0fdf4);
    color: var(--green-700, #15803d);
    border-color: var(--green-200, #bbf7d0);
}

.alert-warning {
    background: var(--yellow-50, #fefce8);
    color: var(--yellow-700, #a16207);
    border-color: var(--yellow-200, #fef3c7);
}

.alert-error,
.alert-danger {
    background: var(--red-50, #fef2f2);
    color: var(--red-700, #b91c1c);
    border-color: var(--red-200, #fecaca);
}

.alert-info {
    background: var(--blue-50, #eff6ff);
    color: var(--blue-700, #1d4ed8);
    border-color: var(--blue-200, #bfdbfe);
}

/* Card Component */
.card {
    background: var(--surface-primary, #ffffff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    transition: box-shadow 0.15s ease;
    padding: 1.25rem;
}

.card:hover {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}


/* =================================================================================
   7. MEDIA QUERIES & RESPONSIVE
   ================================================================================= */

/* Container Queries Support */
.container {
  container-type: inline-size;
  width: 100%;
}

/* Responsive line widths */
@media (max-width: 856px) {
  .line3 {
    width: var(--line2);
  }
}

@media (max-width: 568px) {
  .line1,
  .line2,
  .line3 {
    width: 100%;
  }
}

/* Responsive Typography */
@media (max-width: 768px) {
  .text-2xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text-xl { font-size: 1.125rem; line-height: 1.75rem; }
  .text-lg { font-size: 1rem; line-height: 1.5rem; }
}

/* Responsive Spacing - Mobile first approach */
@media (min-width: 640px) {
  .sm\:m-0 { margin: 0; }
  .sm\:m-1 { margin: 0.25rem; }
  .sm\:m-2 { margin: 0.5rem; }
  .sm\:m-4 { margin: 1rem; }
  .sm\:m-6 { margin: 1.5rem; }
  .sm\:m-8 { margin: 2rem; }
  
  .sm\:p-0 { padding: 0; }
  .sm\:p-1 { padding: 0.25rem; }
  .sm\:p-2 { padding: 0.5rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:p-8 { padding: 2rem; }
  
  .sm\:gap-1 { gap: 0.25rem; }
  .sm\:gap-2 { gap: 0.5rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:gap-8 { gap: 2rem; }
}

@media (min-width: 768px) {
  .md\:m-0 { margin: 0; }
  .md\:m-2 { margin: 0.5rem; }
  .md\:m-4 { margin: 1rem; }
  .md\:m-6 { margin: 1.5rem; }
  .md\:m-8 { margin: 2rem; }
  .md\:m-12 { margin: 3rem; }
  
  .md\:p-0 { padding: 0; }
  .md\:p-2 { padding: 0.5rem; }
  .md\:p-4 { padding: 1rem; }
  .md\:p-6 { padding: 1.5rem; }
  .md\:p-8 { padding: 2rem; }
  .md\:p-12 { padding: 3rem; }
  
  .md\:gap-2 { gap: 0.5rem; }
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:gap-8 { gap: 2rem; }
  .md\:gap-12 { gap: 3rem; }
}

@media (min-width: 1024px) {
  .lg\:m-0 { margin: 0; }
  .lg\:m-4 { margin: 1rem; }
  .lg\:m-6 { margin: 1.5rem; }
  .lg\:m-8 { margin: 2rem; }
  .lg\:m-12 { margin: 3rem; }
  .lg\:m-16 { margin: 4rem; }
  
  .lg\:p-0 { padding: 0; }
  .lg\:p-4 { padding: 1rem; }
  .lg\:p-6 { padding: 1.5rem; }
  .lg\:p-8 { padding: 2rem; }
  .lg\:p-12 { padding: 3rem; }
  .lg\:p-16 { padding: 4rem; }
  
  .lg\:gap-4 { gap: 1rem; }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:gap-8 { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-16 { gap: 4rem; }
}

/* Responsive Display */
@media (max-width: 639px) {
  .sm\:hidden { display: none; }
}

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
  .sm\:hidden { display: none; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
  .md\:hidden { display: none; }
}

@media (min-width: 1024px) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
  .lg\:hidden { display: none; }
}

/* Responsive Flex */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:items-center { align-items: center; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:justify-center { justify-content: center; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:justify-between { justify-content: space-between; }
}

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:items-end { align-items: flex-end; }
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:justify-between { justify-content: space-between; }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-center { align-items: center; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-end { justify-content: flex-end; }
  .lg\:justify-between { justify-content: space-between; }
}

/* Responsive Text */
@media (min-width: 640px) {
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
  .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}

@media (min-width: 768px) {
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}

@media (min-width: 1024px) {
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
  .lg\:text-base { font-size: 1rem; line-height: 1.5rem; }

  .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* Responsive Width & Height */
@media (min-width: 640px) {
  .sm\:w-auto { width: auto; }
  .sm\:w-full { width: 100%; }
  .sm\:w-1\/2 { width: 50%; }
  .sm\:w-1\/3 { width: 33.333333%; }
  .sm\:w-2\/3 { width: 66.666667%; }
  .sm\:w-1\/4 { width: 25%; }
  .sm\:w-3\/4 { width: 75%; }
  
  .sm\:h-auto { height: auto; }
  .sm\:h-full { height: 100%; }
  .sm\:h-screen { height: 100vh; }
}

@media (min-width: 768px) {
  .md\:w-auto { width: auto; }
  .md\:w-full { width: 100%; }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:w-2\/3 { width: 66.666667%; }
  .md\:w-1\/4 { width: 25%; }
  .md\:w-3\/4 { width: 75%; }
  
  .md\:h-auto { height: auto; }
  .md\:h-full { height: 100%; }
  .md\:h-screen { height: 100vh; }
}

@media (min-width: 1024px) {
  .lg\:w-auto { width: auto; }
  .lg\:w-full { width: 100%; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-2\/3 { width: 66.666667%; }
  .lg\:w-1\/4 { width: 25%; }
  .lg\:w-3\/4 { width: 75%; }
  
  .lg\:h-auto { height: auto; }
  .lg\:h-full { height: 100%; }
  .lg\:h-screen { height: 100vh; }
}

/* Container Queries for Components */
@container (min-width: 400px) {
  .container-sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .container-sm\:p-4 { padding: 1rem; }
  .container-sm\:gap-4 { gap: 1rem; }
}

@container (min-width: 600px) {
  .container-md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .container-md\:p-6 { padding: 1.5rem; }
  .container-md\:gap-6 { gap: 1.5rem; }
}

@container (min-width: 800px) {
  .container-lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .container-lg\:p-8 { padding: 2rem; }
  .container-lg\:gap-8 { gap: 2rem; }
}

/* Print Styles */
@media print {
  .print\:hidden { display: none; }
  .print\:block { display: block; }
  .print\:text-black { color: black; }
  .print\:bg-white { background-color: white; }
  
  /* Optimize for print */
  .print\:break-inside-avoid { break-inside: avoid; }
  .print\:break-before-page { break-before: page; }
  .print\:break-after-page { break-after: page; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --border-light: #000000;
    --border-medium: #000000;
    --border-dark: #000000;
    --text-muted: #000000;
    --surface-hover: rgba(0, 0, 0, 0.1);
  }
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 { background-color: var(--gray-900); }
  .dark\:text-white { color: var(--white); }
  .dark\:border-gray-700 { border-color: var(--gray-700); }
}