/*
 * Fixmanager Application Styles
 * Component-based CSS architecture using CSS custom properties
 *
 * This is the main manifest file that imports all styles in the correct order.
 * We use CSS custom properties (variables) defined in base/_tokens.css for
 * consistent design tokens across all components.
 *
 * Import order:
 * 1. Base (reset, tokens, typography) - foundational styles
 * 2. Layout (containers, grid) - structural patterns
 * 3. Components (buttons, cards, etc.) - reusable UI components
 * 4. Utilities (display, spacing, text) - single-purpose classes
 * 5. Pages (print, mobile) - page-specific styles
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Modern CSS reset */

/* Modern CSS Reset */

/* Based on Josh Comeau's CSS Reset with additions for forms */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Remove list styles on ul, ol elements */

ul,
ol {
  list-style: none;
  padding: 0;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Remove default button styles */

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Remove all animations and transitions for people that prefer not to see them */

@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;
  }
}

/* Table reset */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default fieldset styles */

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Remove default legend padding */

legend {
  padding: 0;
}

/* Design tokens - colors, spacing, typography, shadows, etc. */

/* Design Tokens - CSS Custom Properties */

:root {
  /* Brand Colors */
  --color-primary: #1269b2;
  --color-primary-hover: #0f5a96;
  --color-primary-light: #dbeafe;
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-500: #3b82f6;
  --color-primary-600: #1269b2;
  --color-primary-700: #0f5a96;
  --color-primary-800: #1e40af;

  /* Success Colors */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;

  /* Warning Colors */
  --color-warning: #ea580c;
  --color-warning-light: #ffedd5;
  --color-warning-50: #fff7ed;
  --color-warning-100: #ffedd5;
  --color-warning-500: #f97316;
  --color-warning-600: #ea580c;
  --color-warning-700: #c2410c;
  --color-warning-800: #9a3412;

  /* Danger Colors */
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-rgb: 220, 38, 38;

  /* Info Colors */
  --color-info: #0284c7;
  --color-info-light: #e0f2fe;
  --color-info-50: #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-800: #075985;
  --color-info-rgb: 2, 132, 199;

  /* RGB Values for rgba() usage */
  --color-success-rgb: 22, 163, 74;
  --color-warning-rgb: 234, 88, 12;
  --color-primary-rgb: 18, 105, 178;

  /* Neutral/Gray Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;

  /* White/Black */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Background Colors */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);

  /* Border Colors */
  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-100);
  --color-border-dark: var(--color-gray-300);
  --color-border-input: #bdc3c7;

  /* Text Colors */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-muted: var(--color-gray-400);
  --color-text-inverse: var(--color-white);

  /* Spacing Scale */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-11: 2.75rem;    /* 44px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-28: 7rem;       /* 112px */
  --space-32: 8rem;       /* 128px */

  /* Spacing Aliases (for component compatibility) */
  --spacing-0: var(--space-0);
  --spacing-px: var(--space-px);
  --spacing-0-5: var(--space-0-5);
  --spacing-1: var(--space-1);
  --spacing-1-5: var(--space-1-5);
  --spacing-2: var(--space-2);
  --spacing-2-5: var(--space-2-5);
  --spacing-3: var(--space-3);
  --spacing-3-5: var(--space-3-5);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);
  --spacing-7: var(--space-7);
  --spacing-8: var(--space-8);
  --spacing-9: var(--space-9);
  --spacing-10: var(--space-10);
  --spacing-11: var(--space-11);
  --spacing-12: var(--space-12);
  --spacing-14: var(--space-14);
  --spacing-16: var(--space-16);
  --spacing-20: var(--space-20);
  --spacing-24: var(--space-24);
  --spacing-28: var(--space-28);
  --spacing-32: var(--space-32);

  /* Typography - Font Families */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Typography - Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  /* Font Size Aliases (for component compatibility) */
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-size-5xl: var(--text-5xl);
  --font-size-6xl: var(--text-6xl);

  /* Typography - Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Typography - Font Weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Font Weight Aliases (for component compatibility) */
  --font-weight-thin: var(--font-thin);
  --font-weight-extralight: var(--font-extralight);
  --font-weight-light: var(--font-light);
  --font-weight-normal: var(--font-normal);
  --font-weight-medium: var(--font-medium);
  --font-weight-semibold: var(--font-semibold);
  --font-weight-bold: var(--font-bold);
  --font-weight-extrabold: var(--font-extrabold);
  --font-weight-black: var(--font-black);

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;  /* 2px */
  --radius-default: 0.25rem; /* 4px */
  --radius-base: 0.25rem; /* 4px - alias for default */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* Box Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* Z-Index Scale */
  --z-negative: -1;
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* Container/Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Breakpoints (for reference in media queries) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Opacity */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
}

/* Dark mode tokens (optional, for future use) */

@media (prefers-color-scheme: dark) {
  :root.dark-mode {
    --color-bg-primary: var(--color-gray-900);
    --color-bg-secondary: var(--color-gray-800);
    --color-bg-tertiary: var(--color-gray-700);
    --color-text-primary: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-300);
    --color-border: var(--color-gray-700);
  }
}

/* Base typography styles */

/* Base Typography Styles */

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

body {
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

h6 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

/* Paragraphs */

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* Links */

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Strong/Bold */

strong, b {
  font-weight: var(--font-semibold);
}

/* Emphasis/Italic */

em, i {
  font-style: italic;
}

/* Small text */

small {
  font-size: var(--text-sm);
}

/* Code */

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-gray-100);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-gray-800);
  color: var(--color-gray-100);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* Blockquote */

blockquote {
  border-left: 4px solid var(--color-gray-300);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Lists with default styling */

.prose ul,
.prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-bottom: var(--space-2);
}

/* Horizontal rule */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Selection */

::-moz-selection {
  background-color: var(--color-primary-light);
  color: var(--color-primary-800);
}

::selection {
  background-color: var(--color-primary-light);
  color: var(--color-primary-800);
}

/* Text size utilities */

.text-xs { font-size: var(--text-xs); }

.text-sm { font-size: var(--text-sm); }

.text-base { font-size: var(--text-base); }

.text-lg { font-size: var(--text-lg); }

.text-xl { font-size: var(--text-xl); }

.text-2xl { font-size: var(--text-2xl); }

.text-3xl { font-size: var(--text-3xl); }

.text-4xl { font-size: var(--text-4xl); }

/* Text weight utilities */

.font-normal { font-weight: var(--font-normal); }

.font-medium { font-weight: var(--font-medium); }

.font-semibold { font-weight: var(--font-semibold); }

.font-bold { font-weight: var(--font-bold); }

/* Text color utilities */

.text-primary { color: var(--color-text-primary); }

.text-secondary { color: var(--color-text-secondary); }

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

.text-success { color: var(--color-success); }

.text-danger { color: var(--color-danger); }

.text-warning { color: var(--color-warning); }

.text-info { color: var(--color-info); }

.text-white { color: var(--color-white); }

/* Gray scale text colors matching Tailwind */

.text-gray-50 { color: var(--color-gray-50); }

.text-gray-100 { color: var(--color-gray-100); }

.text-gray-200 { color: var(--color-gray-200); }

.text-gray-300 { color: var(--color-gray-300); }

.text-gray-400 { color: var(--color-gray-400); }

.text-gray-500 { color: var(--color-gray-500); }

.text-gray-600 { color: var(--color-gray-600); }

.text-gray-700 { color: var(--color-gray-700); }

.text-gray-800 { color: var(--color-gray-800); }

.text-gray-900 { color: var(--color-gray-900); }

/* ==========================================================================
   Layout
   ========================================================================== */

/* Container and page layout patterns */

/* Container and Layout Styles */

/* Body base styles */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray-50);
  font-family: var(--font-sans);
}

/* Main content area */

main {
  flex: 1;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Skip link for accessibility */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: var(--z-tooltip);
  background-color: var(--color-primary-600);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: 0 0 var(--radius-md) 0;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Container */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: var(--container-2xl);
  }
}

/* Container variations */

.container-sm {
  max-width: var(--container-sm);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-md {
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-lg {
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-xl {
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Full width container with max-width */

.container-fluid {
  width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container-fluid {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Section spacing */

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section-sm {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section-lg {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Content wrapper for centered content */

.content-wrapper {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

/* Page layouts */

.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-layout__header {
  flex-shrink: 0;
}

.page-layout__main {
  flex: 1 0 auto;
}

.page-layout__footer {
  flex-shrink: 0;
}

/* Sidebar layout */

.layout-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .layout-sidebar {
    flex-direction: row;
  }

  .layout-sidebar__main {
    flex: 1;
    min-width: 0;
  }

  .layout-sidebar__aside {
    flex-shrink: 0;
    width: 300px;
  }

  .layout-sidebar--left .layout-sidebar__aside {
    order: -1;
  }
}

/* Card grid layout */

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Centered content box */

.centered-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-4);
}

/* Width utilities */

.w-full { width: 100%; }

.w-auto { width: auto; }

.w-screen { width: 100vw; }

.max-w-none { max-width: none; }

.max-w-xs { max-width: 20rem; }

.max-w-sm { max-width: 24rem; }

.max-w-md { max-width: 28rem; }

.max-w-lg { max-width: 32rem; }

.max-w-xl { max-width: 36rem; }

.max-w-2xl { max-width: 42rem; }

.max-w-3xl { max-width: 48rem; }

.max-w-4xl { max-width: 56rem; }

.max-w-5xl { max-width: 64rem; }

.max-w-6xl { max-width: 72rem; }

.max-w-7xl { max-width: 80rem; }

.max-w-full { max-width: 100%; }

/* Height utilities */

.h-full { height: 100%; }

.h-screen { height: 100vh; }

.h-auto { height: auto; }

.min-h-screen { min-height: 100vh; }

.min-h-full { min-height: 100%; }

/* Overflow */

.overflow-auto { overflow: auto; }

.overflow-hidden { overflow: hidden; }

.overflow-visible { overflow: visible; }

.overflow-scroll { overflow: scroll; }

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

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

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

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

/* Grid and flexbox utilities */

/* Grid System */

/* Flexbox utilities */

.flex { display: flex; }

.inline-flex { display: inline-flex; }

/* Flex direction */

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

.flex-row-reverse { flex-direction: row-reverse; }

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

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

/* Flex wrap */

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

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

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

/* Flex grow/shrink */

.flex-1 { flex: 1 1 0%; }

.flex-auto { flex: 1 1 auto; }

.flex-initial { flex: 0 1 auto; }

.flex-none { flex: none; }

.grow { flex-grow: 1; }

.grow-0 { flex-grow: 0; }

.shrink { flex-shrink: 1; }

.shrink-0 { flex-shrink: 0; }

/* Justify content */

.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; }

/* Align items */

.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; }

/* Align self */

.self-auto { align-self: auto; }

.self-start { align-self: flex-start; }

.self-end { align-self: flex-end; }

.self-center { align-self: center; }

.self-stretch { align-self: stretch; }

/* Align content */

.content-start { align-content: flex-start; }

.content-end { align-content: flex-end; }

.content-center { align-content: center; }

.content-between { align-content: space-between; }

.content-around { align-content: space-around; }

/* CSS Grid */

.grid { display: grid; }

.inline-grid { display: inline-grid; }

/* Grid template columns */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid-cols-none { grid-template-columns: none; }

/* Grid template rows */

.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }

.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }

.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }

.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }

.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }

.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

.grid-rows-none { grid-template-rows: none; }

/* Grid column span */

.col-auto { grid-column: auto; }

.col-span-1 { grid-column: span 1 / span 1; }

.col-span-2 { grid-column: span 2 / span 2; }

.col-span-3 { grid-column: span 3 / span 3; }

.col-span-4 { grid-column: span 4 / span 4; }

.col-span-5 { grid-column: span 5 / span 5; }

.col-span-6 { grid-column: span 6 / span 6; }

.col-span-full { grid-column: 1 / -1; }

/* Grid row span */

.row-auto { grid-row: auto; }

.row-span-1 { grid-row: span 1 / span 1; }

.row-span-2 { grid-row: span 2 / span 2; }

.row-span-3 { grid-row: span 3 / span 3; }

.row-span-4 { grid-row: span 4 / span 4; }

.row-span-full { grid-row: 1 / -1; }

/* Gap utilities */

.gap-0 { gap: 0; }

.gap-1 { gap: var(--space-1); }

.gap-2 { gap: var(--space-2); }

.gap-3 { gap: var(--space-3); }

.gap-4 { gap: var(--space-4); }

.gap-5 { gap: var(--space-5); }

.gap-6 { gap: var(--space-6); }

.gap-8 { gap: var(--space-8); }

.gap-10 { gap: var(--space-10); }

.gap-12 { gap: var(--space-12); }

.gap-x-0 { -moz-column-gap: 0; column-gap: 0; }

.gap-x-1 { -moz-column-gap: var(--space-1); column-gap: var(--space-1); }

.gap-x-2 { -moz-column-gap: var(--space-2); column-gap: var(--space-2); }

.gap-x-3 { -moz-column-gap: var(--space-3); column-gap: var(--space-3); }

.gap-x-4 { -moz-column-gap: var(--space-4); column-gap: var(--space-4); }

.gap-x-6 { -moz-column-gap: var(--space-6); column-gap: var(--space-6); }

.gap-x-8 { -moz-column-gap: var(--space-8); column-gap: var(--space-8); }

.gap-y-0 { row-gap: 0; }

.gap-y-1 { row-gap: var(--space-1); }

.gap-y-2 { row-gap: var(--space-2); }

.gap-y-3 { row-gap: var(--space-3); }

.gap-y-4 { row-gap: var(--space-4); }

.gap-y-6 { row-gap: var(--space-6); }

.gap-y-8 { row-gap: var(--space-8); }

/* Place items */

.place-items-start { place-items: start; }

.place-items-end { place-items: end; }

.place-items-center { place-items: center; }

.place-items-stretch { place-items: stretch; }

/* Place content */

.place-content-start { place-content: start; }

.place-content-end { place-content: end; }

.place-content-center { place-content: center; }

.place-content-between { place-content: space-between; }

.place-content-around { place-content: space-around; }

.place-content-stretch { place-content: stretch; }

/* Responsive grid utilities */

@media (min-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:flex { display: flex; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
}

@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:flex { display: flex; }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:flex { display: flex; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Buttons */

/* Button Component Styles */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(18, 105, 178, 0.2);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button variants */

.btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-700);
}

.btn--primary:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.btn--secondary {
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-gray-300);
}

.btn--secondary:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray-500);
}

.btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
}

.btn--success:hover:not(:disabled) {
  background-color: var(--color-success-700);
}

.btn--success:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-success-500);
}

.btn--danger {
  background-color: var(--color-danger-600);
  color: var(--color-white);
}

.btn--danger:hover:not(:disabled) {
  background-color: var(--color-danger-700);
}

.btn--danger:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-danger-500);
}

.btn--warning {
  background-color: var(--color-warning-600);
  color: var(--color-white);
}

.btn--warning:hover:not(:disabled) {
  background-color: var(--color-warning-700);
}

.btn--warning:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-warning-500);
}

.btn--info {
  background-color: var(--color-info-600);
  color: var(--color-white);
}

.btn--info:hover:not(:disabled) {
  background-color: var(--color-info-700);
}

.btn--info:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-info-500);
}

.btn--light {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.btn--light:hover:not(:disabled) {
  background-color: var(--color-gray-50);
}

.btn--light:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

/* Ghost/outline variants */

.btn--outline-primary {
  background-color: transparent;
  color: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.btn--outline-primary:hover:not(:disabled) {
  background-color: var(--color-primary-50);
}

.btn--outline-secondary {
  background-color: transparent;
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.btn--outline-secondary:hover:not(:disabled) {
  background-color: var(--color-gray-50);
}

.btn--outline-danger {
  background-color: transparent;
  color: var(--color-danger-600);
  border-color: var(--color-danger-600);
}

.btn--outline-danger:hover:not(:disabled) {
  background-color: var(--color-danger-50);
}

/* Button sizes */

.btn--xs {
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-xs);
  min-height: 32px;
}

.btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  min-height: 36px;
}

.btn--base {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  min-height: 44px;
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg);
  min-height: 48px;
}

.btn--xl {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-xl);
  min-height: 52px;
}

/* Full width button */

.btn--full {
  width: 100%;
}

/* Icon button */

.btn--icon {
  padding: var(--space-2);
  min-width: 40px;
  min-height: 40px;
}

.btn--icon.btn--sm {
  padding: var(--space-1-5);
  min-width: 32px;
  min-height: 32px;
}

.btn--icon.btn--lg {
  padding: var(--space-3);
  min-width: 48px;
  min-height: 48px;
}

/* Loading state */

.btn--loading {
  cursor: wait;
  position: relative;
}

.btn--loading .btn__text {
  opacity: 0;
}

.btn--loading .btn__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btn__spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* Button group */

.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
  margin-left: -1px;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  margin-left: 0;
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.btn-group .btn:hover,
.btn-group .btn:focus {
  z-index: 1;
}

/* Cards */

/* Card Component Styles */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}

.card--hover:hover {
  box-shadow: var(--shadow-md);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

.card--elevated:hover {
  box-shadow: var(--shadow-lg);
}

/* Card sections */

.card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-input);
}

.card__header--compact {
  padding: var(--space-3) var(--space-4);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
  margin: 0;
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
}

.card__body {
  padding: var(--space-6);
}

.card__body--compact {
  padding: var(--space-4);
}

.card__body--none {
  padding: 0;
}

.card__footer {
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-gray-50);
  border-top: 1px solid var(--color-border-input);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* Card with header actions */

.card__header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__actions {
  display: flex;
  gap: var(--space-2);
}

/* Card variants */

.card--borderless {
  border: none;
}

.card--flat {
  box-shadow: none;
}

/* Clickable card */

.card--clickable {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card--clickable:active {
  transform: translateY(0);
}

/* Photo card */

.photo-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.photo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.photo-card img {
  transition: transform var(--transition-fast);
}

.photo-card:hover img {
  transform: scale(1.05);
}

/* Dashboard stat card */

.stat-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.stat-card__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
}

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
}

.stat-card__change {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.stat-card__change--positive {
  color: var(--color-success);
}

.stat-card__change--negative {
  color: var(--color-danger);
}

/* Badges and tags */

/* Badge and Tag Component Styles */

.badge {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-medium);
  line-height: 1;
}

/* Badge sizes */

.badge--sm {
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
}

.badge--base {
  padding: var(--space-0-5) var(--space-2-5);
  font-size: var(--text-sm);
}

.badge--lg {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-base);
}

/* Badge shapes */

.badge--rounded {
  border-radius: var(--radius-default);
}

.badge--pill {
  border-radius: var(--radius-full);
}

/* Badge variants */

.badge--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.badge--secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

.badge--success {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.badge--danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-800);
}

.badge--warning {
  background-color: var(--color-warning-100);
  color: var(--color-warning-800);
}

.badge--info {
  background-color: var(--color-info-100);
  color: var(--color-info-800);
}

.badge--gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Tag component (similar to badge but for metadata) */

.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

.tag--primary {
  background-color: rgba(18, 105, 178, 0.1);
  color: var(--color-primary);
}

.tag--success {
  background-color: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
}

.tag--warning {
  background-color: rgba(239, 108, 0, 0.1);
  color: #ef6c00;
}

.tag--danger {
  background-color: rgba(198, 40, 40, 0.1);
  color: #c62828;
}

.tag--info {
  background-color: rgba(30, 136, 229, 0.1);
  color: #1e88e5;
}

/* Status badges (for work orders, etc.) */

.status-badge {
  font-size: var(--text-xs);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-default);
  font-weight: var(--font-medium);
}

/* Status colors */

.status--draft {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.status--pending {
  background-color: #fffbeb;
  color: #92400e;
}

.status--in-progress {
  background-color: #eff6ff;
  color: #1e40af;
}

.status--completed {
  background-color: #f0fdf4;
  color: #166534;
}

.status--cancelled {
  background-color: #fef2f2;
  color: #991b1b;
}

/* Priority badges */

.priority-badge {
  font-size: var(--text-xs);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-default);
  font-weight: var(--font-medium);
}

.priority--urgent {
  background-color: #fef2f2;
  color: #991b1b;
}

.priority--high {
  background-color: #fff7ed;
  color: #9a3412;
}

.priority--normal {
  background-color: #eff6ff;
  color: #1e40af;
}

.priority--low {
  background-color: #f0fdf4;
  color: #166534;
}

/* Badge with icon */

.badge__icon {
  margin-right: var(--space-1);
  width: 1em;
  height: 1em;
}

/* Badge with dismiss button */

.badge--dismissible {
  padding-right: var(--space-1);
}

.badge__dismiss {
  margin-left: var(--space-1);
  padding: var(--space-0-5);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.badge__dismiss:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Badge group */

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Navigation (navbar, dropdown, tabs, pagination) */

/* Navigation Component Styles */

/* Navbar */

.navbar {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  height: 56px;
}

@media (min-width: 768px) {
  .navbar__container {
    padding: 0 var(--space-6);
  }
}

.navbar__brand {
  display: flex;
  align-items: center;
  color: var(--color-white);
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.navbar__brand:hover {
  color: var(--color-white);
  text-decoration: none;
}

.navbar__brand-logo {
  height: 32px;
  width: auto;
  margin-right: var(--space-2);
}

/* Navbar items */

.navbar__nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 768px) {
  .navbar__nav {
    display: flex;
  }
}

.navbar__item {
  color: rgba(255, 255, 255, 0.9);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-default);
  transition: all var(--transition-fast);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.navbar__item:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.navbar__item.is-active {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
}

/* Navbar burger (mobile menu toggle) */

.navbar__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-white);
  background: transparent;
  border: none;
  border-radius: var(--radius-default);
  cursor: pointer;
}

.navbar__burger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .navbar__burger {
    display: none;
  }
}

/* Mobile menu */

.navbar__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-primary);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
}

.navbar__mobile-menu.is-open {
  display: block;
}

@media (min-width: 768px) {
  .navbar__mobile-menu {
    display: none !important;
  }
}

.navbar__mobile-menu .navbar__item {
  display: block;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-1);
}

/* Dropdown */

.dropdown {
  position: relative;
}

.dropdown__trigger {
  cursor: pointer;
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
}

.dropdown__menu.is-open,
.dropdown.is-open .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__item {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.dropdown__item:hover {
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
  text-decoration: none;
}

.dropdown__item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.dropdown__item:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.dropdown__divider {
  height: 0;
  margin: var(--space-2) 0;
  border-top: 1px solid var(--color-gray-200);
}

/* Dropdown transitions with animation (from Tailwind styles) */

.dropdown .dropdown-menu {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform-origin: top;
}

.dropdown .dropdown-menu.hidden {
  opacity: 0;
  transform: translateY(-5px) scaleY(0.95);
  pointer-events: none;
}

.dropdown .dropdown-menu:not(.hidden) {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

/* Mobile menu transitions */

.md\:hidden.dropdown-menu {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform-origin: top;
}

.md\:hidden.dropdown-menu.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.md\:hidden.dropdown-menu.block {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Breadcrumbs */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.breadcrumbs__item {
  color: var(--color-gray-500);
  text-decoration: none;
}

.breadcrumbs__item:hover {
  color: var(--color-primary);
}

.breadcrumbs__item.is-active {
  color: var(--color-gray-900);
  font-weight: var(--font-medium);
}

.breadcrumbs__separator {
  color: var(--color-gray-400);
}

/* Tabs */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-gray-200);
}

.tabs__item {
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-500);
  font-weight: var(--font-medium);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}

.tabs__item:hover {
  color: var(--color-gray-700);
  text-decoration: none;
}

.tabs__item.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Pagination */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.pagination__item:hover {
  background-color: var(--color-gray-100);
  text-decoration: none;
}

.pagination__item.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination__item.is-disabled {
  color: var(--color-gray-400);
  pointer-events: none;
}

/* Tables */

/* Table Component Styles */

.table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
}

.table th {
  background-color: var(--color-gray-50);
  color: var(--color-gray-700);
  font-weight: var(--font-semibold);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-input);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-900);
}

.table tbody tr:hover {
  background-color: var(--color-gray-50);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Table variants */

.table--striped tbody tr:nth-child(odd) {
  background-color: var(--color-gray-50);
}

.table--striped tbody tr:nth-child(odd):hover {
  background-color: var(--color-gray-100);
}

.table--bordered {
  border: 1px solid var(--color-gray-200);
}

.table--bordered th,
.table--bordered td {
  border: 1px solid var(--color-gray-200);
}

.table--compact th,
.table--compact td {
  padding: var(--space-2) var(--space-3);
}

.table--relaxed th,
.table--relaxed td {
  padding: var(--space-4) var(--space-6);
}

/* Table wrapper for responsiveness */

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
}

.table-wrapper .table {
  margin-bottom: 0;
}

.table-wrapper .table th:first-child,
.table-wrapper .table td:first-child {
  border-left: none;
}

.table-wrapper .table th:last-child,
.table-wrapper .table td:last-child {
  border-right: none;
}

/* Table with card styling */

.table-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.table-card .table {
  margin-bottom: 0;
}

.table-card .table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.table-card .table thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

/* Table actions column */

.table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Table cell alignment */

.table .text-right {
  text-align: right;
}

.table .text-center {
  text-align: center;
}

/* Table sorting indicators */

.table__sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.table__sortable:hover {
  background-color: var(--color-gray-100);
}

.table__sort-icon {
  margin-left: var(--space-1);
  opacity: 0.5;
}

.table__sortable.is-sorted .table__sort-icon {
  opacity: 1;
}

/* Table empty state */

.table__empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-gray-500);
}

.table__empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--color-gray-400);
}

/* Table loading state */

.table__loading {
  position: relative;
}

.table__loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Data table specific styles */

.data-table {
  font-size: var(--text-sm);
}

.data-table th {
  white-space: nowrap;
}

.data-table td {
  vertical-align: middle;
}

/* Sticky header */

.table--sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.table--sticky-header th {
  background-color: var(--color-white);
  box-shadow: 0 1px 0 var(--color-gray-200);
}

/* Modals and dialogs */

/* Modal Component Styles */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity var(--transition-base);
}

.modal__container {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  max-width: 42rem;
  width: 100%;
  max-height: calc(100vh - 4rem);
  overflow: hidden;
  margin: 0 auto;
}

/* Modal sizes */

.modal__container--sm {
  max-width: 24rem;
}

.modal__container--lg {
  max-width: 56rem;
}

.modal__container--xl {
  max-width: 72rem;
}

.modal__container--full {
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
}

/* Modal sections */

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-gray-400);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal__close:hover {
  color: var(--color-gray-600);
  background-color: var(--color-gray-100);
}

.modal__body {
  padding: var(--space-6);
  overflow-y: auto;
  max-height: calc(100vh - 12rem);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
}

.modal__footer--left {
  justify-content: flex-start;
}

.modal__footer--between {
  justify-content: space-between;
}

/* Modal animations */

.modal.is-entering .modal__backdrop,
.modal.is-leaving .modal__backdrop {
  opacity: 0;
}

.modal.is-entering .modal__container,
.modal.is-leaving .modal__container {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
}

.modal.is-open .modal__backdrop {
  opacity: 1;
}

.modal.is-open .modal__container {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Notification/Alert modal */

.modal--alert .modal__container {
  max-width: 28rem;
}

.modal--alert .modal__body {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.modal--alert .modal__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
}

.modal--alert .modal__icon--success {
  color: var(--color-success);
}

.modal--alert .modal__icon--warning {
  color: var(--color-warning);
}

.modal--alert .modal__icon--danger {
  color: var(--color-danger);
}

.modal--alert .modal__icon--info {
  color: var(--color-info);
}

/* Loading overlay (from Tailwind) */

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  z-index: 1000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Notifications and alerts */

/* Notification/Alert Component Styles */

.notification {
  display: flex;
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  border-left-width: 4px;
  position: relative;
}

.notification__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: var(--space-3);
}

.notification__content {
  flex: 1;
}

.notification__title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.notification__message {
  font-size: var(--text-sm);
}

.notification__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
}

.notification__close:hover {
  opacity: 1;
}

/* Notification variants */

.notification--success {
  background-color: var(--color-success-50);
  border-color: var(--color-success-200);
  border-left-color: var(--color-success-600);
  color: var(--color-success-800);
}

.notification--success .notification__icon {
  color: var(--color-success-600);
}

.notification--danger,
.notification--error {
  background-color: var(--color-danger-50);
  border-color: var(--color-danger-200);
  border-left-color: var(--color-danger-600);
  color: var(--color-danger-800);
}

.notification--danger .notification__icon,
.notification--error .notification__icon {
  color: var(--color-danger-600);
}

.notification--warning {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-200);
  border-left-color: var(--color-warning-600);
  color: var(--color-warning-800);
}

.notification--warning .notification__icon {
  color: var(--color-warning-600);
}

.notification--info {
  background-color: var(--color-info-50);
  border-color: var(--color-info-200);
  border-left-color: var(--color-info-600);
  color: var(--color-info-800);
}

.notification--info .notification__icon {
  color: var(--color-info-600);
}

/* Fixed/Toast notifications */

.notification--fixed {
  position: fixed;
  top: 3.5rem;
  right: var(--space-4);
  z-index: var(--z-tooltip);
  min-width: 320px;
  box-shadow: var(--shadow-lg);
}

/* Toast animations */

.toast {
  animation: slideInRight 0.3s ease-out, fadeOut 0.3s ease-in 4.7s forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Flash messages (Rails specific) */

.flash {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border-left-width: 4px;
  border-left-style: solid;
}

.flash--notice,
.flash--success {
  background-color: var(--color-success-50);
  border-left-color: var(--color-success-600);
  color: var(--color-success-800);
}

.flash--alert,
.flash--error {
  background-color: var(--color-danger-50);
  border-left-color: var(--color-danger-600);
  color: var(--color-danger-800);
}

.flash--warning {
  background-color: var(--color-warning-50);
  border-left-color: var(--color-warning-600);
  color: var(--color-warning-800);
}

/* Inline alert */

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.alert--success {
  background-color: var(--color-success-50);
  color: var(--color-success-800);
}

.alert--danger {
  background-color: var(--color-danger-50);
  color: var(--color-danger-800);
}

.alert--warning {
  background-color: var(--color-warning-50);
  color: var(--color-warning-800);
}

.alert--info {
  background-color: var(--color-info-50);
  color: var(--color-info-800);
}

/* Validation alerts with animation (from workflow editor) */

.validation-alert {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Workflow editor */

/* Workflow Editor Styles */

.workflow-editor-container {
  max-width: 100%;
  margin: 0 auto;
}

.workflow-canvas {
  position: relative;
  min-height: 700px;
  background: linear-gradient(45deg, #f8fafc 25%, transparent 25%),
              linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
              linear-gradient(45deg, transparent 75%, #f8fafc 75%),
              linear-gradient(-45deg, transparent 75%, #f8fafc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.status-node {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.2s ease;
}

.status-node:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.status-node.selected-for-connection {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.6));
}

.status-node.selected-for-connection .status-card {
  border-color: #3b82f6 !important;
  border-width: 3px !important;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.status-card {
  transition: all 0.2s ease;
  cursor: pointer;
}

.workflow-canvas[data-mode="move"] .status-card {
  cursor: move;
}

.workflow-canvas[data-mode="connect"] .status-card {
  cursor: crosshair;
}

.status-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Mode Toggle Styles */

.mode-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #f8fafc;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
}

.mode-toggle input[type="radio"] {
  display: none;
}

.mode-toggle label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  background: transparent;
  color: #64748b;
  font-weight: 500;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.mode-toggle label:hover {
  background: #e2e8f0;
  color: #475569;
}

.mode-toggle input[type="radio"]:checked + label {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #3b82f6;
  color: #1e40af;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.mode-toggle .radio-dot {
  width: 16px;
  height: 16px;
  border: 2px solid #6b7280;
  border-radius: 50%;
  margin-right: 0.5rem;
  transition: all 0.2s ease;
  background: white;
}

.mode-toggle input[type="radio"]:checked + label .radio-dot {
  border-color: #3b82f6;
  background: #3b82f6;
  box-shadow: 0 0 0 2px white inset;
}

/* Transition Arrows */

.transition-arrow {
  transition: all 0.2s ease;
  cursor: pointer;
  stroke-width: 3;
}

.transition-arrow:hover {
  stroke-width: 4;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Invisible wider click area for easier clicking */

.transition-click-area {
  stroke-width: 12;
  stroke: transparent;
  fill: none;
  cursor: pointer;
  pointer-events: all;
}

/* Workflow Statistics */

.workflow-statistics {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.workflow-statistics .stat-card {
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
  background: white;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.workflow-statistics .stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Safeguards and Suggestions */

.safeguards-section,
.suggestions-section {
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.safeguards-section {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
}

.suggestions-section {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #f59e0b;
}

/* Responsive Design */

@media (max-width: 768px) {
  .workflow-canvas {
    min-height: 500px;
  }

  .status-card {
    width: 8rem;
    font-size: 0.875rem;
  }

  .mode-toggle {
    flex-direction: column;
    gap: 0.5rem;
  }

  .workflow-statistics {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Disabled States */

.status-node[data-enabled="false"] {
  opacity: 0.6;
}

.status-node[data-enabled="false"] .status-card {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #6b7280;
}

.transition-arrow[data-enabled="false"] {
  opacity: 0.4;
  stroke-dasharray: 4,4;
}

/* Focus States for Accessibility */

.status-node:focus-within {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.mode-toggle input[type="radio"]:focus + label {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Save Button States */

.save-button {
  transition: all 0.2s ease;
}

.save-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Reports - Common Styles */

/* Common Reports Styles - Shared across all report pages */

/* Base Report Container */

.report-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--spacing-4) var(--spacing-6);
}

@media (max-width: 768px) {
  .report-container {
    padding: var(--spacing-3);
  }
}

/* Page Header */

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
  padding-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}

.report-header h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.report-header__subtitle {
  margin-top: var(--spacing-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.report-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

/* Period Selector - Improved */

.period-selector {
  display: inline-flex;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-1);
  gap: var(--spacing-1);
}

.period-selector .btn {
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  padding: var(--spacing-2) var(--spacing-3);
}

.period-selector .btn--secondary {
  background: transparent;
  border-color: transparent;
}

.period-selector .btn--secondary:hover {
  background: var(--color-bg-primary);
}

/* Report Sections */

.report-section {
  margin-bottom: var(--spacing-6);
}

.report-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.report-section__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

/* Report Cards Grid */

.report-grid {
  display: grid;
  gap: var(--spacing-4);
}

.report-grid--2 {
  grid-template-columns: repeat(1, 1fr);
}

.report-grid--3 {
  grid-template-columns: repeat(1, 1fr);
}

.report-grid--4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .report-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .report-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .report-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Report Card */

.report-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  transition: box-shadow 0.2s ease;
}

.report-card:hover {
  box-shadow: var(--shadow-sm);
}

.report-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-3);
}

.report-card__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.report-card__body {
  color: var(--color-text-secondary);
}

/* Stat Cards */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}

@media (min-width: 640px) {
  .stat-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .stat-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .stat-cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card--clickable {
  cursor: pointer;
}

.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-2);
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

.stat-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.stat-card__label {
  margin-top: var(--spacing-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.stat-card__change {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
  font-size: var(--text-xs);
}

.stat-card__change--up {
  color: var(--color-success);
}

.stat-card__change--down {
  color: var(--color-danger);
}

/* Stat Card Colors */

.stat-card--success .stat-card__value,
.stat-card--success .stat-card__icon { color: var(--color-success); }

.stat-card--success .stat-card__icon { background: rgba(var(--color-success-rgb), 0.1); }

.stat-card--warning .stat-card__value,
.stat-card--warning .stat-card__icon { color: var(--color-warning); }

.stat-card--warning .stat-card__icon { background: rgba(var(--color-warning-rgb), 0.1); }

.stat-card--danger .stat-card__value,
.stat-card--danger .stat-card__icon { color: var(--color-danger); }

.stat-card--danger .stat-card__icon { background: rgba(var(--color-danger-rgb), 0.1); }

.stat-card--info .stat-card__value,
.stat-card--info .stat-card__icon { color: var(--color-info); }

.stat-card--info .stat-card__icon { background: rgba(var(--color-info-rgb), 0.1); }

.stat-card--primary .stat-card__value,
.stat-card--primary .stat-card__icon { color: var(--color-primary); }

.stat-card--primary .stat-card__icon { background: rgba(var(--color-primary-rgb), 0.1); }

/* Data Tables in Reports */

.report-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.report-table thead {
  background: var(--color-bg-secondary);
}

.report-table th {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.report-table td {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
}

.report-table tbody tr:hover {
  background: var(--color-bg-secondary);
}

.report-table tbody tr:last-child td {
  border-bottom: none;
}

/* Empty State */

.report-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-4);
  text-align: center;
  color: var(--color-text-secondary);
}

.report-empty__icon {
  font-size: var(--text-4xl);
  margin-bottom: var(--spacing-4);
  opacity: 0.5;
}

.report-empty__title {
  margin: 0 0 var(--spacing-2);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.report-empty__message {
  margin: 0;
  font-size: var(--text-sm);
}

/* Loading State */

.report-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
}

.report-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Alerts/Notifications in Reports */

.report-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-4);
}

.report-alert--info {
  background: rgba(var(--color-info-rgb), 0.1);
  border: 1px solid var(--color-info);
}

.report-alert--warning {
  background: rgba(var(--color-warning-rgb), 0.1);
  border: 1px solid var(--color-warning);
}

.report-alert--danger {
  background: rgba(var(--color-danger-rgb), 0.1);
  border: 1px solid var(--color-danger);
}

.report-alert--success {
  background: rgba(var(--color-success-rgb), 0.1);
  border: 1px solid var(--color-success);
}

.report-alert__icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
}

.report-alert--info .report-alert__icon { color: var(--color-info); }

.report-alert--warning .report-alert__icon { color: var(--color-warning); }

.report-alert--danger .report-alert__icon { color: var(--color-danger); }

.report-alert--success .report-alert__icon { color: var(--color-success); }

.report-alert__content {
  flex: 1;
}

.report-alert__title {
  margin: 0 0 var(--spacing-1);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.report-alert__message {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Chart Container */

.chart-wrapper {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.chart-wrapper__title {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.chart-wrapper__canvas {
  width: 100%;
  min-height: 200px;
  max-height: 300px;
}

/* Responsive Adjustments */

@media (max-width: 640px) {
  .report-header {
    flex-direction: column;
    align-items: stretch;
  }

  .report-header__actions {
    justify-content: flex-start;
  }

  .period-selector {
    width: 100%;
    justify-content: center;
  }

  .stat-card__value {
    font-size: var(--text-xl);
  }

  .stat-card {
    padding: var(--spacing-3);
  }
}

/* Operational Dashboard */

/* Operational Dashboard Styles */

.operational-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

.operational-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.operational-dashboard__header h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

.operational-dashboard__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* KPI Cards Grid */

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-3);
}

@media (min-width: 768px) {
  .kpi-cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1200px) {
  .kpi-cards {
    grid-template-columns: repeat(10, 1fr);
  }
}

/* Individual KPI Card */

.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
}

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.kpi-card[data-controller="kpi-card"] {
  cursor: pointer;
}

.kpi-card__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-2);
  opacity: 0.7;
}

.kpi-card__icon .icon {
  width: 100%;
  height: 100%;
}

.kpi-card__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
}

.kpi-card__label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

.kpi-card__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.kpi-card__action {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  padding: var(--spacing-1);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.kpi-card:hover .kpi-card__action {
  opacity: 0.6;
}

.kpi-card__action:hover {
  opacity: 1 !important;
}

/* KPI Card Colors */

.kpi-card--success .kpi-card__value { color: var(--color-success); }

.kpi-card--success .kpi-card__icon { color: var(--color-success); }

.kpi-card--warning .kpi-card__value { color: var(--color-warning); }

.kpi-card--warning .kpi-card__icon { color: var(--color-warning); }

.kpi-card--danger .kpi-card__value { color: var(--color-danger); }

.kpi-card--danger .kpi-card__icon { color: var(--color-danger); }

.kpi-card--primary .kpi-card__value { color: var(--color-primary); }

.kpi-card--primary .kpi-card__icon { color: var(--color-primary); }

.kpi-card--info .kpi-card__value { color: var(--color-info); }

.kpi-card--info .kpi-card__icon { color: var(--color-info); }

/* Middle Section */

.operational-dashboard__middle {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 1024px) {
  .operational-dashboard__middle {
    grid-template-columns: 1fr 1fr;
  }
}

.operational-dashboard__chart {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.operational-dashboard__chart h3 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* Status Funnel */

.status-funnel__bars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.status-funnel__bar {
  position: relative;
  height: 36px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.status-funnel__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bar-width, 0);
  background: var(--bar-color, var(--color-primary));
  opacity: 0.2;
  transition: width 0.3s ease;
}

.status-funnel__bar-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-3);
  gap: var(--spacing-2);
}

.status-funnel__status-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.status-funnel__count {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.status-funnel__aged,
.status-funnel__aged-severe {
  font-size: var(--text-xs);
}

/* Bottom Section */

.operational-dashboard__bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 1024px) {
  .operational-dashboard__bottom {
    grid-template-columns: 1fr 1fr;
  }
}

.operational-dashboard__list {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  max-height: 400px;
  overflow-y: auto;
}

.operational-dashboard__list h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* Overdue List */

.overdue-list__row--severe {
  background-color: rgba(var(--color-danger-rgb), 0.1);
}

.overdue-list__footer {
  margin-top: var(--spacing-3);
  text-align: center;
}

/* Workload Chart */

.workload-chart__row--warning td:first-child {
  border-left: 3px solid var(--color-warning);
}

.workload-chart__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.workload-chart__count {
  font-weight: var(--font-semibold);
}

/* Turnaround Trend */

.turnaround-trend canvas {
  width: 100%;
  height: 200px;
}

.turnaround-trend__legend {
  display: flex;
  justify-content: space-around;
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

.turnaround-trend__week {
  text-align: center;
}

.turnaround-trend__week-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.turnaround-trend__week-value {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* Dashboard Settings */

.dashboard-settings {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-4);
}

.dashboard-settings .card {
  margin-bottom: var(--spacing-4);
}

.kpi-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-2);
}

/* Period Selector */

.period-selector {
  display: flex;
  gap: var(--spacing-1);
}

/* Empty State */

.empty-state--sm {
  padding: var(--spacing-6);
  text-align: center;
}

.empty-state--sm .icon {
  margin-bottom: var(--spacing-2);
}

.empty-state--sm p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Work Order Search */

/* Work Order Search Styles */

.work-order-search {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
}

/* Search Panel */

.search-panel {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.search-panel__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.search-panel__row:last-child {
  margin-bottom: 0;
}

.search-panel__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.search-panel__field--wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .search-panel__field--wide {
    grid-column: span 1;
  }
}

.search-panel__field--checkboxes {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  align-items: center;
}

.search-panel__field label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.search-panel__actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

/* Mini KPIs */

.mini-kpis {
  display: flex;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.mini-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 100px;
}

.mini-kpi__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
}

.mini-kpi__label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

.mini-kpi--success .mini-kpi__value {
  color: var(--color-success);
}

.mini-kpi--warning .mini-kpi__value {
  color: var(--color-warning);
}

.mini-kpi--danger .mini-kpi__value {
  color: var(--color-danger);
}

/* Search Results */

.search-results {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.search-results .table {
  margin: 0;
}

.search-results .table__row--warning {
  background-color: rgba(var(--color-warning-rgb), 0.1);
}

/* Cell Stack - for multi-line cells */

.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cell-stack__primary {
  font-weight: var(--font-medium);
}

.cell-stack__secondary {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Empty State */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
  text-align: center;
}

.empty-state i {
  margin-bottom: var(--spacing-4);
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 var(--spacing-2);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

.empty-state p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Pagination */

.pagination-wrapper {
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
}

/* Form Check Inline */

.form-check--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

/* Executive Dashboard */

/* Executive Dashboard Styles */

.executive-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

.executive-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.executive-dashboard__header h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

.executive-dashboard__controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

/* Executive KPI Cards */

.executive-kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-4);
}

@media (min-width: 1200px) {
  .executive-kpi-cards {
    grid-template-columns: repeat(6, 1fr);
  }
}

.executive-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.2s, transform 0.2s;
}

.executive-kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.executive-kpi-card--danger {
  border-left: 4px solid var(--color-danger);
}

.executive-kpi-card--success {
  border-left: 4px solid var(--color-success);
}

.executive-kpi-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  font-size: var(--text-xl);
}

.executive-kpi-card--danger .executive-kpi-card__icon {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
}

.executive-kpi-card--success .executive-kpi-card__icon {
  background: rgba(var(--color-success-rgb), 0.1);
  color: var(--color-success);
}

.executive-kpi-card__content {
  flex: 1;
  min-width: 0;
}

.executive-kpi-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--color-text-primary);
}

.executive-kpi-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

.executive-kpi-card__change {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-sm);
  margin-top: var(--spacing-2);
}

.executive-kpi-card__change--up {
  color: var(--color-success);
}

.executive-kpi-card__change--down {
  color: var(--color-danger);
}

.executive-kpi-card__change--neutral {
  color: var(--color-text-muted);
}

.executive-kpi-card__period {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Alerts Section */

.executive-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.executive-alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
}

.executive-alert--critical {
  background: rgba(var(--color-danger-rgb), 0.1);
  border-color: var(--color-danger);
}

.executive-alert--warning {
  background: rgba(var(--color-warning-rgb), 0.1);
  border-color: var(--color-warning);
}

.executive-alert--info {
  background: rgba(var(--color-info-rgb), 0.1);
  border-color: var(--color-info);
}

.executive-alert__icon {
  font-size: var(--text-xl);
}

.executive-alert--critical .executive-alert__icon {
  color: var(--color-danger);
}

.executive-alert--warning .executive-alert__icon {
  color: var(--color-warning);
}

.executive-alert--info .executive-alert__icon {
  color: var(--color-info);
}

.executive-alert__content {
  flex: 1;
}

.executive-alert__title {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.executive-alert__message {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Charts Section */

.executive-dashboard__charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 1024px) {
  .executive-dashboard__charts {
    grid-template-columns: 1fr 1fr;
  }
}

.executive-dashboard__chart {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.executive-dashboard__chart h3 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.chart-container {
  width: 100%;
  height: 200px;
}

.chart-container canvas {
  width: 100%;
  height: 100%;
}

/* Summary Section */

.executive-dashboard__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

.summary-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.summary-card h3 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.summary-stats {
  display: flex;
  gap: var(--spacing-6);
  flex-wrap: wrap;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}

.summary-stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.summary-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

/* Technician Performance */

/* Technician Performance Styles */

.technician-performance,
.technician-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

/* Team Summary */

.team-summary h2 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.team-summary__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-3);
}

.summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.summary-card--danger {
  border-left: 4px solid var(--color-danger);
}

.summary-card--success {
  border-left: 4px solid var(--color-success);
}

.summary-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.summary-card--danger .summary-card__value {
  color: var(--color-danger);
}

.summary-card--success .summary-card__value {
  color: var(--color-success);
}

.summary-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

/* Leaderboard */

.leaderboard {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.leaderboard h2 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
}

.rank-badge--1 {
  background: linear-gradient(135deg, #ffd700, #ffb800);
  color: #000;
}

.rank-badge--2 {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  color: #000;
}

.rank-badge--3 {
  background: linear-gradient(135deg, #cd7f32, #b87333);
  color: #fff;
}

.technician-name {
  display: flex;
  flex-direction: column;
}

.metric-value {
  font-weight: var(--font-semibold);
}

/* Performance Cards (Detail View) */

.performance-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-4);
}

.perf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.perf-card--danger {
  border-left: 4px solid var(--color-danger);
}

.perf-card--success {
  border-left: 4px solid var(--color-success);
}

.perf-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.perf-card--danger .perf-card__value {
  color: var(--color-danger);
}

.perf-card--success .perf-card__value {
  color: var(--color-success);
}

.perf-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

.perf-card__comparison {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  margin-top: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

.perf-card__comparison--positive {
  color: var(--color-success);
  background: rgba(var(--color-success-rgb), 0.1);
}

.perf-card__comparison--negative {
  color: var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.1);
}

/* Trend Section */

.trend-section,
.recent-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.trend-section h2,
.recent-section h2 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* Page Header with back button */

.page-header__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.page-header__title h1 {
  margin: 0;
}

/* Customer Analytics */

/* Customer Analytics Styles */

.customer-analytics,
.customer-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

/* Segment Overview */

.segment-overview h2 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.segment-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-3);
}

.segment-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.segment-card--vip { border-left-color: #ffd700; }

.segment-card--regular { border-left-color: var(--color-success); }

.segment-card--occasional { border-left-color: var(--color-info); }

.segment-card--new { border-left-color: var(--color-primary); }

.segment-card--churned { border-left-color: var(--color-danger); }

.segment-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.segment-card__icon {
  font-size: var(--text-lg);
}

.segment-card--vip .segment-card__icon { color: #ffd700; }

.segment-card--regular .segment-card__icon { color: var(--color-success); }

.segment-card--occasional .segment-card__icon { color: var(--color-info); }

.segment-card--new .segment-card__icon { color: var(--color-primary); }

.segment-card--churned .segment-card__icon { color: var(--color-danger); }

.segment-card__name {
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.segment-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.segment-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.segment-total {
  margin-top: var(--spacing-4);
  padding: var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-text-secondary);
}

/* Analytics Grid */

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 1024px) {
  .analytics-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Analytics Section */

.analytics-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.analytics-section--warning {
  border-left: 4px solid var(--color-warning);
}

.analytics-section h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

/* Customer Info */

.customer-info {
  display: flex;
  flex-direction: column;
}

.customer-info .text-muted {
  font-size: var(--text-xs);
}

/* Segment Badge */

.segment-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}

.segment-badge--vip { background: rgba(255, 215, 0, 0.2); color: #b8860b; }

.segment-badge--regular { background: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); }

.segment-badge--occasional { background: rgba(var(--color-info-rgb), 0.1); color: var(--color-info); }

.segment-badge--new { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); }

.segment-badge--churned { background: rgba(var(--color-danger-rgb), 0.1); color: var(--color-danger); }

.segment-badge--lg {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--text-sm);
}

/* Risk Badge */

.risk-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
}

.risk-badge--low { background: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); }

.risk-badge--medium { background: rgba(var(--color-warning-rgb), 0.1); color: var(--color-warning); }

.risk-badge--high { background: rgba(255, 165, 0, 0.2); color: #ff8c00; }

.risk-badge--critical { background: rgba(var(--color-danger-rgb), 0.1); color: var(--color-danger); }

/* Customer Metrics */

.customer-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-4);
}

.metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.metric-card--warning { border-left: 4px solid var(--color-warning); }

.metric-card--success { border-left: 4px solid var(--color-success); }

.metric-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.metric-card--warning .metric-card__value { color: var(--color-warning); }

.metric-card--success .metric-card__value { color: var(--color-success); }

.metric-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
}

/* Customer Timeline */

.customer-timeline {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.customer-timeline h2 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.timeline-stats {
  display: flex;
  gap: var(--spacing-6);
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* Operational Reports */

/* Operational Reports Styles */

.operational-report,
.service-partner-report {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

/* Report Header */

.report-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.report-title h1 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.report-title h1 i {
  color: var(--color-primary);
}

.report-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* Summary Cards */

.report-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-4);
}

.summary-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.summary-card--success { border-left-color: var(--color-success); }

.summary-card--info { border-left-color: var(--color-info); }

.summary-card--warning { border-left-color: var(--color-warning); }

.summary-card--danger { border-left-color: var(--color-danger); }

.summary-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  font-size: var(--text-xl);
  color: var(--color-primary);
}

.summary-card--success .summary-card__icon { color: var(--color-success); }

.summary-card--info .summary-card__icon { color: var(--color-info); }

.summary-card--warning .summary-card__icon { color: var(--color-warning); }

.summary-card--danger .summary-card__icon { color: var(--color-danger); }

.summary-card__content {
  display: flex;
  flex-direction: column;
}

.summary-card__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.summary-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Report Section */

.report-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.report-section h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.report-section h2 i {
  color: var(--color-primary);
}

/* Report Grid */

.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 768px) {
  .report-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Breakdown List */

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.breakdown-item__label {
  font-weight: var(--font-medium);
}

.breakdown-item__value {
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.breakdown-item__stats {
  display: flex;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
}

/* Age Breakdown */

.age-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-3);
}

.age-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
}

.age-item--today { border-left: 3px solid var(--color-success); }

.age-item--week { border-left: 3px solid var(--color-info); }

.age-item--month { border-left: 3px solid var(--color-warning); }

.age-item--older { border-left: 3px solid var(--color-danger); }

.age-item__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.age-item__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

/* Age Badge */

.age-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}

.age-badge--warning {
  background: rgba(var(--color-warning-rgb), 0.1);
  color: var(--color-warning);
}

.age-badge--danger {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
}

/* Row Highlighting */

.row--warning {
  background: rgba(var(--color-warning-rgb), 0.05);
}

.row--danger {
  background: rgba(var(--color-danger-rgb), 0.05);
}

/* Comparison Banner */

.comparison-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.comparison-banner__label {
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.comparison-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
}

.comparison-badge--positive {
  background: rgba(var(--color-success-rgb), 0.1);
  color: var(--color-success);
}

.comparison-badge--negative {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
}

/* Report Actions */

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

/* Chart Container */

.chart-container {
  position: relative;
  height: 300px;
}

/* Empty State */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  text-align: center;
  color: var(--color-text-muted);
}

.empty-state i {
  font-size: var(--text-4xl);
  margin-bottom: var(--spacing-3);
  color: var(--color-success);
}

.empty-state h3 {
  margin: 0 0 var(--spacing-2);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Service Partner Styles */

/* Status Badge */

.status-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
}

.status-badge--accepted {
  background: rgba(var(--color-success-rgb), 0.1);
  color: var(--color-success);
}

.status-badge--pending {
  background: rgba(var(--color-warning-rgb), 0.1);
  color: var(--color-warning);
}

.status-badge--rejected,
.status-badge--revoked {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
}

/* Partner Cards */

.partner-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-4);
}

.partner-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.partner-card__header {
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.partner-card__name {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
}

.partner-card__name i {
  color: var(--color-primary);
}

.partner-card__account {
  font-size: var(--text-sm);
  margin-top: var(--spacing-1);
}

.partner-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}

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

.partner-metric__value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.partner-metric__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.partner-card__stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
}

.partner-stat {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.partner-stat__label {
  color: var(--color-text-secondary);
}

.partner-stat__value {
  font-weight: var(--font-semibold);
}

.partner-card__performance {
  padding: var(--spacing-3);
  border-top: 1px solid var(--color-border);
}

.performance-bar {
  height: 8px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.performance-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-success), var(--color-primary));
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

/* Forecasting */

/* Forecasting Reports Styles */

.forecasting-report {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

/* Period Selector */

.period-selector {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

/* Forecast Summary */

.forecast-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.forecast-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.forecast-stat__label {
  color: var(--color-text-secondary);
}

.forecast-stat__value {
  font-weight: var(--font-semibold);
}

/* Trend Badge */

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
}

.trend-badge--up {
  background: rgba(var(--color-success-rgb), 0.1);
  color: var(--color-success);
}

.trend-badge--down {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
}

.trend-badge--flat {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

/* Forecast Value */

.forecast-value {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

/* Confidence Badge */

.confidence-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-sm);
}

.confidence-badge--high {
  background: rgba(var(--color-success-rgb), 0.1);
  color: var(--color-success);
}

.confidence-badge--medium {
  background: rgba(var(--color-warning-rgb), 0.1);
  color: var(--color-warning);
}

.confidence-badge--low {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
}

/* Forecast Meta */

.forecast-meta {
  display: flex;
  gap: var(--spacing-4);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Forecast Disclaimer */

.forecast-disclaimer {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: rgba(var(--color-info-rgb), 0.1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-info);
}

/* Large Chart Container */

.chart-container--large {
  height: 400px;
}

/* Day Pattern Grid */

.day-pattern-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-2);
}

@media (max-width: 768px) {
  .day-pattern-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.day-pattern-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
  position: relative;
}

.day-pattern-card--peak {
  background: rgba(var(--color-success-rgb), 0.1);
  border: 1px solid var(--color-success);
}

.day-pattern-card--low {
  background: rgba(var(--color-warning-rgb), 0.1);
  border: 1px solid var(--color-warning);
}

.day-pattern-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--spacing-2);
}

.day-pattern-card__bar {
  width: 24px;
  height: 60px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.day-pattern-bar {
  width: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: height 0.3s ease;
}

.day-pattern-card--peak .day-pattern-bar {
  background: var(--color-success);
}

.day-pattern-card--low .day-pattern-bar {
  background: var(--color-warning);
}

.day-pattern-card__value {
  margin-top: var(--spacing-2);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.day-pattern-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: var(--spacing-0-5) var(--spacing-1);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-sm);
}

.day-pattern-badge--peak {
  background: var(--color-success);
  color: white;
}

.day-pattern-badge--low {
  background: var(--color-warning);
  color: white;
}

/* Hourly Insight */

.hourly-insight {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
  background: rgba(var(--color-info-rgb), 0.1);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.hourly-insight i {
  color: var(--color-info);
  margin-right: var(--spacing-2);
}

/* Recommendations Section */

.recommendations-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.recommendations-section h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.recommendation-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.recommendation-card {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-warning);
}

.recommendation-card--high {
  border-left-color: var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.05);
}

.recommendation-card--medium {
  border-left-color: var(--color-warning);
}

.recommendation-card__icon {
  font-size: var(--text-xl);
  color: var(--color-warning);
}

.recommendation-card--high .recommendation-card__icon {
  color: var(--color-danger);
}

.recommendation-card__message {
  font-weight: var(--font-medium);
  margin-bottom: var(--spacing-1);
}

.recommendation-card__data {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Recommendation List */

.recommendation-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.recommendation-item {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-info);
}

.recommendation-item--high {
  border-left-color: var(--color-danger);
  background: rgba(var(--color-danger-rgb), 0.05);
}

.recommendation-item--medium {
  border-left-color: var(--color-warning);
}

.recommendation-item__icon {
  font-size: var(--text-xl);
}

.recommendation-item--high .recommendation-item__icon {
  color: var(--color-danger);
}

.recommendation-item--medium .recommendation-item__icon {
  color: var(--color-warning);
}

.recommendation-item__message {
  font-weight: var(--font-medium);
  margin-bottom: var(--spacing-2);
}

.recommendation-item__data {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  font-size: var(--text-sm);
}

.recommendation-data {
  color: var(--color-text-secondary);
}

/* Backlog Projection */

.backlog-projection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.projection-metric {
  text-align: center;
}

.projection-metric__value {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.projection-metric__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.projection-bar__track {
  height: 16px;
  background: linear-gradient(90deg, var(--color-success) 0%, var(--color-success) 33%, var(--color-warning) 33%, var(--color-warning) 66%, var(--color-danger) 66%);
  border-radius: var(--radius-full);
  position: relative;
}

.projection-bar__fill {
  position: absolute;
  left: 0;
  top: -4px;
  width: 4px;
  height: 24px;
  background: var(--color-text-primary);
  border-radius: var(--radius-sm);
}

.projection-bar__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Capacity Balance */

.capacity-balance {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.capacity-balance__header {
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.capacity-balance__header h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.capacity-balance__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  flex-wrap: wrap;
}

.capacity-balance__in,
.capacity-balance__out {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.capacity-balance__in i { color: var(--color-info); }

.capacity-balance__out i { color: var(--color-success); }

.capacity-balance__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

.capacity-balance__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.capacity-balance__vs {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.capacity-balance__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
}

.capacity-balance__result--positive {
  background: rgba(var(--color-success-rgb), 0.1);
}

.capacity-balance__result--negative {
  background: rgba(var(--color-danger-rgb), 0.1);
}

.capacity-balance__net {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

.capacity-balance__result--positive .capacity-balance__net {
  color: var(--color-success);
}

.capacity-balance__result--negative .capacity-balance__net {
  color: var(--color-danger);
}

/* Backlog Gauge */

.backlog-gauge {
  padding: var(--spacing-4);
}

.backlog-gauge__track {
  position: relative;
  height: 24px;
  border-radius: var(--radius-full);
  overflow: visible;
}

.backlog-gauge__zones {
  display: flex;
  height: 100%;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.backlog-gauge__zone {
  height: 100%;
}

.backlog-gauge__zone--good { background: var(--color-success); }

.backlog-gauge__zone--warning { background: var(--color-warning); }

.backlog-gauge__zone--danger { background: var(--color-danger); }

.backlog-gauge__marker {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
}

.backlog-gauge__marker::before {
  content: '';
  display: block;
  width: 4px;
  height: 40px;
  background: var(--color-text-primary);
  border-radius: var(--radius-sm);
}

.backlog-gauge__marker-label {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  background: var(--color-bg-primary);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.backlog-gauge__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Empty State Success */

.empty-state--success {
  background: rgba(var(--color-success-rgb), 0.05);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
}

.empty-state--success i {
  color: var(--color-success);
}

/* Automation (Schedules & Alerts) */

/* Automation (Schedules & Alert Rules) Styles */

.automation-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

/* Page Header */

.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4);
}

.page-header__title h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.page-header__title h1 i {
  color: var(--color-primary);
}

.page-header__actions {
  display: flex;
  gap: var(--spacing-2);
}

/* Status Badge */

.status-badge--success {
  background: rgba(var(--color-success-rgb), 0.1);
  color: var(--color-success);
}

.status-badge--muted {
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}

/* Severity Badge */

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.severity-badge--info {
  background: rgba(var(--color-info-rgb), 0.1);
  color: var(--color-info);
}

.severity-badge--warning {
  background: rgba(var(--color-warning-rgb), 0.1);
  color: var(--color-warning);
}

.severity-badge--critical {
  background: rgba(var(--color-danger-rgb), 0.1);
  color: var(--color-danger);
}

/* Recent Triggers */

.recent-triggers {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.recent-triggers h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-3);
  font-size: var(--text-lg);
  color: var(--color-warning);
}

.trigger-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.trigger-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-info);
}

.trigger-item--warning { border-left-color: var(--color-warning); }

.trigger-item--critical { border-left-color: var(--color-danger); }

.trigger-item__icon {
  font-size: var(--text-lg);
}

.trigger-item--info .trigger-item__icon { color: var(--color-info); }

.trigger-item--warning .trigger-item__icon { color: var(--color-warning); }

.trigger-item--critical .trigger-item__icon { color: var(--color-danger); }

.trigger-item__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex: 1;
}

.trigger-item__time {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Detail Grid */

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-4);
}

.detail-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.detail-card h3 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  padding-bottom: var(--spacing-2);
  border-bottom: 1px solid var(--color-border);
}

/* Detail List */

.detail-list {
  display: grid;
  gap: var(--spacing-2);
}

.detail-list dt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.detail-list dd {
  margin: 0 0 var(--spacing-2);
  font-weight: var(--font-medium);
}

/* Recipient List */

.recipient-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.recipient-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.recipient-list li i {
  color: var(--color-text-muted);
}

/* Form Styles */

.form-section {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.form-section h3 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-4);
}

.form-hint {
  display: block;
  margin-top: var(--spacing-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Severity Options */

.severity-options {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

.severity-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
}

.severity-option:hover {
  border-color: var(--color-primary);
}

.severity-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.severity-option input[type="radio"]:checked + .severity-option__icon {
  transform: scale(1.2);
}

.severity-option:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.05);
}

.severity-option__icon {
  font-size: var(--text-2xl);
  transition: transform 0.2s;
}

.severity-option--info .severity-option__icon { color: var(--color-info); }

.severity-option--warning .severity-option__icon { color: var(--color-warning); }

.severity-option--critical .severity-option__icon { color: var(--color-danger); }

.severity-option__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* Condition Display */

.condition-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
}

.condition-display__metric {
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

.condition-display__operator {
  color: var(--color-text-secondary);
}

.condition-display__threshold {
  font-weight: var(--font-bold);
}

/* Stat Grid */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.stat-item {
  text-align: center;
  padding: var(--spacing-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.stat-item__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.stat-item__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* Page Actions */

.page-actions {
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

/* Checkbox Label */

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  font-weight: var(--font-medium);
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* Button Group */

.btn-group {
  display: flex;
  gap: var(--spacing-1);
}

/* Custom Reports */

/* Custom Reports Builder Styles */

.custom-reports-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-4);
}

/* Reports Grid */

.reports-section {
  margin-bottom: var(--spacing-6);
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-4);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.section-title i {
  color: var(--color-primary);
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-4);
}

/* Report Card */

.report-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.report-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.report-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.report-card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.report-card__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.report-card__title a:hover {
  color: var(--color-primary);
}

.report-card__description {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.report-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.report-card__meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

.report-card__stats {
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-2) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.report-card__stats .stat {
  display: flex;
  flex-direction: column;
}

.report-card__stats .stat__value {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.report-card__stats .stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.report-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.report-card__author,
.report-card__date {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.report-card__actions {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

/* Empty State */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  text-align: center;
}

.empty-state i {
  font-size: var(--text-5xl);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-4);
}

.empty-state h3 {
  margin: 0 0 var(--spacing-2);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
}

.empty-state p {
  margin: 0 0 var(--spacing-4);
  color: var(--color-text-secondary);
}

/* Report Info Bar */

.report-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.report-info-bar .info-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-text-secondary);
}

.report-info-bar .info-item i {
  color: var(--color-primary);
}

/* Report Builder Form */

.report-builder-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Column Grid */

.column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-2);
}

.column-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.column-option:hover {
  border-color: var(--color-primary);
}

.column-option:has(input:checked) {
  background: rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
}

.column-option input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.column-option__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex: 1;
  font-size: var(--text-sm);
}

.column-option__label i {
  color: var(--color-text-muted);
}

.column-option__type {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Filters Grid */

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-4);
}

/* Grouping Options */

.grouping-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.grouping-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.grouping-option:hover {
  border-color: var(--color-primary);
}

.grouping-option:has(input:checked) {
  background: rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
}

.grouping-option input[type="radio"] {
  display: none;
}

.grouping-option__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.grouping-option__label i {
  color: var(--color-primary);
}

/* Form Actions */

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border);
}

/* Report Results */

.report-results {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Grouped Results */

.grouped-results {
  display: flex;
  flex-direction: column;
}

.result-group {
  border-bottom: 1px solid var(--color-border);
}

.result-group:last-child {
  border-bottom: none;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
}

.group-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.group-stats {
  display: flex;
  gap: var(--spacing-4);
}

.group-stats .stat {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.group-stats .stat strong {
  color: var(--color-text-primary);
}

/* Empty Results */

.empty-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  text-align: center;
}

.empty-results i {
  font-size: var(--text-4xl);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2);
}

.empty-results p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Results Notice */

.results-notice {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: rgba(var(--color-info-rgb), 0.1);
  color: var(--color-info);
  font-size: var(--text-sm);
}

/* Breadcrumb */

.breadcrumb {
  margin-bottom: var(--spacing-2);
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

/* Responsive */

@media (max-width: 768px) {
  .reports-grid {
    grid-template-columns: 1fr;
  }

  .column-grid {
    grid-template-columns: 1fr;
  }

  .grouping-options {
    flex-direction: column;
  }

  .grouping-option {
    width: 100%;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }

  .report-info-bar {
    flex-direction: column;
    gap: var(--spacing-2);
  }

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

/* ==========================================================================
   ViewComponent Sidecar Styles
   ========================================================================== */

/* UI Components */

/* UI::ButtonComponent Sidecar Styles */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: var(--leading-normal);
}

.ui-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variants */

.ui-btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
}

.ui-btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-700);
}

.ui-btn--primary:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.ui-btn--secondary {
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);
}

.ui-btn--secondary:hover:not(:disabled) {
  background-color: var(--color-gray-300);
}

.ui-btn--secondary:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray-500);
}

.ui-btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
}

.ui-btn--success:hover:not(:disabled) {
  background-color: var(--color-success-700);
}

.ui-btn--success:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-success-500);
}

.ui-btn--danger {
  background-color: var(--color-danger-600);
  color: var(--color-white);
}

.ui-btn--danger:hover:not(:disabled) {
  background-color: var(--color-danger-700);
}

.ui-btn--danger:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-danger-500);
}

.ui-btn--warning {
  background-color: var(--color-warning-600);
  color: var(--color-white);
}

.ui-btn--warning:hover:not(:disabled) {
  background-color: var(--color-warning-700);
}

.ui-btn--warning:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-warning-500);
}

.ui-btn--info {
  background-color: var(--color-info-600);
  color: var(--color-white);
}

.ui-btn--info:hover:not(:disabled) {
  background-color: var(--color-info-700);
}

.ui-btn--info:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-info-500);
}

.ui-btn--light {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.ui-btn--light:hover:not(:disabled) {
  background-color: var(--color-gray-50);
}

.ui-btn--light:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

/* Sizes */

.ui-btn--xs {
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-xs);
  min-height: 32px;
}

.ui-btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  min-height: 36px;
}

.ui-btn--base {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  min-height: 44px;
}

.ui-btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-lg);
  min-height: 48px;
}

.ui-btn--xl {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-xl);
  min-height: 52px;
}

/* Full width */

.ui-btn--full {
  width: 100%;
}

/* Loading state */

.ui-btn--loading {
  cursor: wait;
  position: relative;
}

.ui-btn__spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-btn-spin 0.75s linear infinite;
}

@keyframes ui-btn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ui-btn__spinner + .ui-btn__text {
  margin-left: var(--space-2);
}

/* UI::BadgeComponent Sidecar Styles */

.ui-badge {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-medium);
  line-height: 1;
}

/* Sizes */

.ui-badge--sm {
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
}

.ui-badge--base {
  padding: var(--space-0-5) var(--space-2-5);
  font-size: var(--text-sm);
}

.ui-badge--lg {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-base);
}

/* Shapes */

.ui-badge--rounded {
  border-radius: var(--radius-default);
}

.ui-badge--pill {
  border-radius: var(--radius-full);
}

/* Variants */

.ui-badge--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.ui-badge--secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

.ui-badge--success {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.ui-badge--danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-800);
}

.ui-badge--warning {
  background-color: var(--color-warning-100);
  color: var(--color-warning-800);
}

.ui-badge--info {
  background-color: var(--color-info-100);
  color: var(--color-info-800);
}

.ui-badge--gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Badge with icon */

.ui-badge__icon {
  margin-right: var(--space-1);
  width: 1em;
  height: 1em;
}

/* Dismissible badge */

.ui-badge--dismissible {
  padding-right: var(--space-1);
}

.ui-badge__dismiss {
  margin-left: var(--space-1);
  padding: var(--space-0-5);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  background: none;
  border: none;
  line-height: 1;
}

.ui-badge__dismiss:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* UI::CardComponent Sidecar Styles */

.ui-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
}

.ui-card--padded {
  padding: var(--space-6);
}

.ui-card--shadow {
  box-shadow: var(--shadow-default);
}

.ui-card--hover:hover {
  box-shadow: var(--shadow-lg);
}

.ui-card--hover {
  transition: box-shadow var(--transition-fast);
}

/* Card header */

.ui-card__header {
  margin-bottom: var(--space-4);
}

.ui-card__header--standalone {
  padding: var(--space-6);
  padding-bottom: var(--space-4);
}

/* Card content when no padding */

.ui-card__content--padded {
  padding: var(--space-6);
}

/* Card footer */

.ui-card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}

.ui-card__footer--standalone {
  padding: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}

/* Root-level Components */

/* CardComponent Sidecar Styles */

.app-card {
  background-color: var(--color-white);
}

.app-card--shadow {
  box-shadow: var(--shadow-default);
}

.app-card--rounded {
  border-radius: var(--radius-lg);
}

.app-card--padded {
  padding: var(--space-6);
}

/* Card header */

.app-card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.app-card__header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
  margin: 0;
}

.app-card__actions {
  display: flex;
  gap: var(--space-2);
}

/* Card body */

.app-card__body {
  padding: var(--space-6);
}

.app-card__body--no-padding {
  padding: 0;
}

/* FormFieldComponent Sidecar Styles */

.form-field {
  margin-bottom: var(--space-4);
}

.form-field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.form-field__input-wrapper {
  position: relative;
}

.form-field__input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.form-field__input::-moz-placeholder {
  color: var(--color-gray-400);
}

.form-field__input::placeholder {
  color: var(--color-gray-400);
}

.form-field__input--with-icon {
  padding-left: var(--space-10);
}

.form-field__input--error {
  border-color: var(--color-danger-300);
}

.form-field__input--error:focus {
  border-color: var(--color-danger-500);
  box-shadow: 0 0 0 1px var(--color-danger-500);
}

.form-field__icon {
  position: absolute;
  inset-block: 0;
  left: 0;
  padding-left: var(--space-3);
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--color-gray-400);
}

.form-field__error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-danger-600);
}

.form-field__help {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* PageHeaderComponent Sidecar Styles */

.page-header {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .page-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.page-header__content {
  flex: 1;
}

.page-header__content--with-actions {
  flex: 1;
}

.page-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.page-header__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.page-header__actions {
  margin-top: var(--space-4);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .page-header__actions {
    margin-top: 0;
  }
}

/* Breadcrumbs */

.page-header__breadcrumbs {
  display: flex;
  margin-bottom: var(--space-6);
}

.page-header__breadcrumbs-list {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .page-header__breadcrumbs-list {
    gap: var(--space-3);
  }
}

.page-header__breadcrumbs-item {
  display: inline-flex;
  align-items: center;
}

.page-header__breadcrumbs-link {
  color: var(--color-gray-500);
  text-decoration: none;
}

.page-header__breadcrumbs-link:hover {
  color: var(--color-gray-700);
  text-decoration: none;
}

.page-header__breadcrumbs-separator {
  color: var(--color-gray-400);
  margin: 0 var(--space-2);
}

.page-header__breadcrumbs-current {
  color: var(--color-gray-700);
}

.page-header__breadcrumbs-text {
  color: var(--color-gray-500);
}

/* StatusBadgeComponent Sidecar Styles */

.status-badge {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
}

/* Sizes */

.status-badge--xs {
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
}

.status-badge--sm {
  padding: var(--space-0-5) var(--space-2-5);
  font-size: var(--text-xs);
}

.status-badge--md {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.status-badge--lg {
  padding: var(--space-1-5) var(--space-4);
  font-size: var(--text-base);
}

/* Colors */

.status-badge--success {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.status-badge--warning {
  background-color: #fef3c7; /* yellow-100 */
  color: #92400e; /* yellow-800 */
}

.status-badge--error,
.status-badge--danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-800);
}

.status-badge--info,
.status-badge--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.status-badge--secondary,
.status-badge--default {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

/* NotificationComponent Sidecar Styles */

.notification {
  display: block;
  padding: var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.notification__content {
  display: flex;
}

.notification__icon {
  flex-shrink: 0;
}

.notification__message {
  margin-left: var(--space-3);
  font-size: var(--text-sm);
}

.notification__dismiss-wrapper {
  margin-left: auto;
  padding-left: var(--space-3);
}

.notification__dismiss {
  display: inline-flex;
  background: transparent;
  border-radius: var(--radius-md);
  padding: var(--space-1-5);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.notification__dismiss:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.notification__dismiss:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-gray-500);
}

/* Type variants */

.notification--info {
  background-color: var(--color-info-50);
  border-color: #bae6fd; /* blue-200 */
}

.notification--info .notification__icon {
  color: #60a5fa; /* blue-400 */
}

.notification--info .notification__message {
  color: var(--color-info-800);
}

.notification--info .notification__dismiss {
  color: var(--color-info-800);
}

.notification--warning {
  background-color: #fefce8; /* yellow-50 */
  border-color: #fde68a; /* yellow-200 */
}

.notification--warning .notification__icon {
  color: #facc15; /* yellow-400 */
}

.notification--warning .notification__message {
  color: #854d0e; /* yellow-800 */
}

.notification--warning .notification__dismiss {
  color: #854d0e;
}

.notification--error {
  background-color: var(--color-danger-50);
  border-color: #fecaca; /* red-200 */
}

.notification--error .notification__icon {
  color: #f87171; /* red-400 */
}

.notification--error .notification__message {
  color: var(--color-danger-800);
}

.notification--error .notification__dismiss {
  color: var(--color-danger-800);
}

.notification--success {
  background-color: var(--color-success-50);
  border-color: #bbf7d0; /* green-200 */
}

.notification--success .notification__icon {
  color: #4ade80; /* green-400 */
}

.notification--success .notification__message {
  color: var(--color-success-800);
}

.notification--success .notification__dismiss {
  color: var(--color-success-800);
}

/* Dashboard Header Component */

.dash-header {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-gray-200);
}

.dash-header__container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

@media (min-width: 640px) {
  .dash-header__container {
    padding: 0 var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .dash-header__container {
    padding: 0 var(--spacing-8);
  }
}

.dash-header__content {
  padding: var(--spacing-6) 0;
}

.dash-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-header__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

/* Logo */

.dash-header__logo {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-header__logo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Text */

.dash-header__text {
  flex: 1;
}

.dash-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.dash-header__subtitle {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Data Table Component */

.data-table {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
}

.data-table--responsive {
  overflow-x: auto;
}

.data-table__table {
  min-width: 100%;
  border-collapse: collapse;
}

/* Header */

.data-table__header {
  background-color: var(--color-gray-50);
}

.data-table__header-cell {
  padding: var(--spacing-3) var(--spacing-6);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body */

.data-table__body {
  background-color: var(--color-white);
}

.data-table__row {
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color var(--transition-base);
}

.data-table__row:last-child {
  border-bottom: none;
}

.data-table__row:hover {
  background-color: var(--color-gray-50);
}

.data-table__cell {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  white-space: nowrap;
}

.data-table__cell--wrap {
  white-space: normal;
}

/* Empty State */

.data-table__empty {
  text-align: center;
  padding: var(--spacing-12);
}

.data-table__empty-icon {
  color: var(--color-gray-300);
  margin-bottom: var(--spacing-4);
}

.data-table__empty-icon i {
  font-size: 2.5rem;
}

.data-table__empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.data-table__empty-message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Sortable */

.data-table__header-cell--sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.data-table__header-cell--sortable:hover {
  background-color: var(--color-gray-100);
}

.data-table__sort-icon {
  margin-left: var(--spacing-1);
  opacity: 0.5;
}

.data-table__header-cell--sorted .data-table__sort-icon {
  opacity: 1;
  color: var(--color-primary-600);
}

/* Striped */

.data-table--striped .data-table__row:nth-child(even) {
  background-color: var(--color-gray-50);
}

.data-table--striped .data-table__row:nth-child(even):hover {
  background-color: var(--color-gray-100);
}

/* Compact */

.data-table--compact .data-table__header-cell {
  padding: var(--spacing-2) var(--spacing-4);
}

.data-table--compact .data-table__cell {
  padding: var(--spacing-2) var(--spacing-4);
}

/* Quick Template Card Component */

.quick-template-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.quick-template-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-300);
}

.quick-template-card--more {
  background-color: var(--color-gray-50);
  border-style: dashed;
}

.quick-template-card--more:hover {
  background-color: var(--color-gray-100);
}

.quick-template-card__content {
  padding: var(--spacing-4);
}

.quick-template-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Icon */

.quick-template-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-3);
}

.quick-template-card__icon--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.quick-template-card__icon--success {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.quick-template-card__icon--warning {
  background-color: var(--color-warning-100);
  color: var(--color-warning-600);
}

.quick-template-card__icon--danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-600);
}

.quick-template-card__icon--gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

.quick-template-card__icon img {
  width: 2rem;
  height: 2rem;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Title */

.quick-template-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  line-height: 1.4;
}

.quick-template-card--more .quick-template-card__title {
  color: var(--color-gray-600);
}

/* Count */

.quick-template-card__count {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

/* Scope Switcher Component */

.scope-switcher {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.scope-switcher__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.scope-switcher__buttons {
  display: flex;
  gap: var(--spacing-1);
}

.scope-switcher__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1-5) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.scope-switcher__btn i {
  margin-right: var(--spacing-2);
}

.scope-switcher__btn--active {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
  border-color: var(--color-primary-200);
}

.scope-switcher__btn--inactive {
  background-color: var(--color-white);
  color: var(--color-gray-600);
  border-color: var(--color-gray-300);
}

.scope-switcher__btn--inactive:hover {
  background-color: var(--color-gray-50);
  color: var(--color-gray-900);
}

/* Mobile Variant */

.scope-switcher--mobile {
  flex-direction: column;
  gap: var(--spacing-2);
}

.scope-switcher--mobile .scope-switcher__buttons {
  width: 100%;
}

.scope-switcher--mobile .scope-switcher__btn {
  flex: 1;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
}

/* Pill Variant */

.scope-switcher--pill .scope-switcher__buttons {
  background-color: var(--color-gray-100);
  border-radius: 9999px;
  padding: var(--spacing-1);
}

.scope-switcher--pill .scope-switcher__btn {
  border-radius: 9999px;
  border: none;
}

.scope-switcher--pill .scope-switcher__btn--active {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.scope-switcher--pill .scope-switcher__btn--inactive {
  background-color: transparent;
}

.scope-switcher--pill .scope-switcher__btn--inactive:hover {
  background-color: var(--color-gray-200);
}

/* Navigation Components */

/* Navigation Language Switcher Component */

.nav-language-switcher {
  position: relative;
}

/* Language Button */

.nav-language-switcher__btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1-5) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.nav-language-switcher__btn:hover {
  background-color: var(--color-gray-100);
}

.nav-language-switcher__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

.nav-language-switcher__flag {
  font-size: var(--font-size-base);
}

.nav-language-switcher__name {
  display: none;
}

@media (min-width: 1024px) {
  .nav-language-switcher__name {
    display: inline;
  }
}

.nav-language-switcher__chevron {
  width: 1rem;
  height: 1rem;
}

/* Dropdown Panel */

.nav-language-switcher__panel {
  position: absolute;
  right: 0;
  margin-top: var(--spacing-2);
  width: 10rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: var(--z-dropdown);
}

.nav-language-switcher__panel.hidden {
  display: none;
}

.nav-language-switcher__options {
  padding: var(--spacing-1) 0;
}

.nav-language-switcher__option {
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.nav-language-switcher__option:hover {
  background-color: var(--color-gray-100);
}

.nav-language-switcher__option--active {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}

.nav-language-switcher__option-flag {
  margin-right: var(--spacing-2);
}

/* Navigation Notification Bell Component */

.nav-notification-bell {
  position: relative;
}

/* Bell Button */

.nav-notification-bell__btn {
  position: relative;
  padding: var(--spacing-2);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.nav-notification-bell__btn:hover {
  color: var(--color-gray-900);
  background-color: var(--color-gray-100);
}

.nav-notification-bell__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

/* Badge */

.nav-notification-bell__badge {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-danger-600);
  border-radius: 9999px;
  transform: translate(25%, -25%);
}

/* Mobile Backdrop */

.nav-notification-bell__backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-dropdown) - 10);
}

@media (min-width: 640px) {
  .nav-notification-bell__backdrop {
    display: none;
  }
}

.nav-notification-bell__backdrop.hidden {
  display: none;
}

/* Panel */

.nav-notification-bell__panel {
  position: fixed;
  inset: 0 0 4rem 0;
  background-color: var(--color-white);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .nav-notification-bell__panel {
    position: absolute;
    inset: auto;
    right: 0;
    top: auto;
    margin-top: var(--spacing-2);
    width: 28rem;
    bottom: auto;
    border-radius: var(--radius-lg);
  }
}

@media (min-width: 1024px) {
  .nav-notification-bell__panel {
    width: 36rem;
  }
}

.nav-notification-bell__panel.hidden {
  display: none;
}

/* Header */

.nav-notification-bell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
  flex-shrink: 0;
}

.nav-notification-bell__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.nav-notification-bell__header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.nav-notification-bell__mark-read {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-600);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

.nav-notification-bell__mark-read:hover {
  color: var(--color-primary-700);
}

.nav-notification-bell__close {
  display: block;
  padding: var(--spacing-1);
  color: var(--color-gray-500);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

@media (min-width: 640px) {
  .nav-notification-bell__close {
    display: none;
  }
}

.nav-notification-bell__close:hover {
  color: var(--color-gray-700);
}

.nav-notification-bell__close svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Category Tabs */

.nav-notification-bell__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-gray-200);
  padding: 0 var(--spacing-4);
  overflow-x: auto;
  flex-shrink: 0;
}

.nav-notification-bell__tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-base);
}

.nav-notification-bell__tab:hover {
  color: var(--color-gray-700);
  border-bottom-color: var(--color-gray-300);
}

.nav-notification-bell__tab--active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-600);
}

/* Notification List */

.nav-notification-bell__list {
  flex: 1;
  overflow-y: auto;
}

@media (min-width: 640px) {
  .nav-notification-bell__list {
    max-height: 24rem;
  }
}

/* Loading State */

.nav-notification-bell__loading {
  padding: var(--spacing-8);
  text-align: center;
  color: var(--color-gray-500);
}

.nav-notification-bell__spinner {
  margin: 0 auto;
  width: 2rem;
  height: 2rem;
  color: var(--color-gray-400);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.nav-notification-bell__loading-text {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
}

/* Notification Item */

.nav-notification-bell__item {
  display: flex;
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-100);
  transition: background-color var(--transition-base);
}

.nav-notification-bell__item:hover {
  background-color: var(--color-gray-50);
}

.nav-notification-bell__item--unread {
  background-color: var(--color-primary-50);
}

.nav-notification-bell__item-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.nav-notification-bell__item-icon--info {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.nav-notification-bell__item-icon--success {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.nav-notification-bell__item-icon--warning {
  background-color: var(--color-warning-100);
  color: var(--color-warning-600);
}

.nav-notification-bell__item-content {
  flex: 1;
  min-width: 0;
}

.nav-notification-bell__item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
}

.nav-notification-bell__item-message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  line-height: 1.4;
  /* Allow 2 lines before truncating */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nav-notification-bell__item-time {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

/* Empty State */

.nav-notification-bell__empty {
  padding: var(--spacing-8);
  text-align: center;
}

.nav-notification-bell__empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--spacing-3);
  color: var(--color-gray-400);
}

.nav-notification-bell__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Footer */

.nav-notification-bell__footer {
  padding: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
  background-color: var(--color-gray-50);
  flex-shrink: 0;
}

.nav-notification-bell__view-all {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-base);
}

.nav-notification-bell__view-all:hover {
  color: var(--color-primary-700);
}

/* Panel width overrides - ensure proper width on desktop */

.notification-bell-panel {
  width: 100%;
}

@media (min-width: 640px) {
  .notification-bell-panel {
    width: 28rem !important;
    min-width: 28rem;
  }
}

@media (min-width: 1024px) {
  .notification-bell-panel {
    width: 36rem !important;
    min-width: 36rem;
  }
}

/* Navigation Top Bar Component */

.nav-top-bar {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
}

.nav-top-bar__container {
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

@media (min-width: 640px) {
  .nav-top-bar__container {
    padding: 0 var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .nav-top-bar__container {
    padding: 0 var(--spacing-8);
  }
}

.nav-top-bar__content {
  display: flex;
  align-items: center;
  height: 4rem;
}

/* Logo & Brand */

.nav-top-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-shrink: 0;
}

.nav-top-bar__logo-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
}

.nav-top-bar__logo {
  height: 2rem;
  width: 2rem;
  border-radius: var(--radius-base);
}

.nav-top-bar__brand-name {
  display: none;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

@media (min-width: 640px) {
  .nav-top-bar__brand-name {
    display: block;
  }
}

/* Center Section */

.nav-top-bar__center {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Right Actions */

.nav-top-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .nav-top-bar__actions {
    gap: var(--spacing-4);
  }
}

/* Account Switcher */

.nav-top-bar__account-switcher {
  position: relative;
  display: none;
}

@media (min-width: 768px) {
  .nav-top-bar__account-switcher {
    display: block;
  }
}

.nav-top-bar__switcher-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.nav-top-bar__switcher-btn:hover {
  color: var(--color-gray-900);
  background-color: var(--color-gray-100);
}

.nav-top-bar__switcher-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-500);
}

.nav-top-bar__switcher-chevron {
  width: 1rem;
  height: 1rem;
}

.nav-top-bar__switcher-dropdown {
  position: absolute;
  right: 0;
  margin-top: var(--spacing-2);
  width: 14rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: var(--z-dropdown);
}

.nav-top-bar__switcher-dropdown.hidden {
  display: none;
}

.nav-top-bar__switcher-content {
  padding: var(--spacing-1) 0;
}

.nav-top-bar__switcher-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.nav-top-bar__switcher-item:hover {
  background-color: var(--color-gray-100);
}

.nav-top-bar__switcher-item--active {
  background-color: var(--color-gray-50);
  font-weight: var(--font-weight-medium);
}

.nav-top-bar__switcher-item svg {
  margin-right: var(--spacing-3);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-400);
}

.nav-top-bar__switcher-divider {
  border-top: 1px solid var(--color-gray-100);
  margin: var(--spacing-1) 0;
}

/* Orphaned Messages Bell */

.nav-top-bar__orphaned-link {
  position: relative;
  padding: var(--spacing-2);
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.nav-top-bar__orphaned-link:hover {
  color: var(--color-gray-900);
  background-color: var(--color-gray-100);
}

.nav-top-bar__orphaned-link svg {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-top-bar__orphaned-badge {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-white);
  background-color: var(--color-danger-600);
  border-radius: 9999px;
  transform: translate(50%, -50%);
}

/* Language Switcher Container */

.nav-top-bar__language {
  display: none;
}

@media (min-width: 768px) {
  .nav-top-bar__language {
    display: block;
  }
}

/* Mobile Menu Toggle */

.nav-top-bar__mobile-toggle {
  display: block;
  padding: var(--spacing-2);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

@media (min-width: 768px) {
  .nav-top-bar__mobile-toggle {
    display: none;
  }
}

.nav-top-bar__mobile-toggle:hover {
  color: var(--color-gray-900);
  background-color: var(--color-gray-100);
}

.nav-top-bar__mobile-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

.nav-top-bar__mobile-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile Overlay */

.nav-top-bar__mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-sticky) - 10);
}

.nav-top-bar__mobile-overlay.hidden {
  display: none;
}

/* Spacer */

.nav-top-bar__spacer {
  height: 4rem;
}

/* Navigation User Menu Component */

.nav-user-menu {
  position: relative;
}

/* Menu Button */

.nav-user-menu__btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.nav-user-menu__btn:hover {
  background-color: var(--color-gray-100);
}

.nav-user-menu__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

.nav-user-menu__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-600);
}

.nav-user-menu__avatar {
  display: none;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: var(--color-primary-600);
  color: var(--color-white);
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 640px) {
  .nav-user-menu__avatar {
    display: flex;
  }
}

.nav-user-menu__chevron {
  display: none;
  width: 1rem;
  height: 1rem;
  color: var(--color-gray-500);
}

@media (min-width: 640px) {
  .nav-user-menu__chevron {
    display: block;
  }
}

/* Dropdown Panel */

.nav-user-menu__panel {
  position: absolute;
  right: 0;
  margin-top: var(--spacing-2);
  width: 18rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: var(--z-dropdown);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding-bottom: var(--spacing-4);
}

@media (min-width: 640px) {
  .nav-user-menu__panel {
    width: 20rem;
  }
}

/* Account for mobile bottom navigation bar (60px) */

@media (max-width: 768px) {
  .nav-user-menu__panel {
    max-height: calc(100vh - 8rem - 60px);
    padding-bottom: 1rem;
  }
}

.nav-user-menu__panel.hidden {
  display: none;
}

/* User Info Header */

.nav-user-menu__header {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.nav-user-menu__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-menu__email {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-menu__role {
  display: inline-flex;
  align-items: center;
  margin-top: var(--spacing-2);
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

/* Menu Items */

.nav-user-menu__items {
  padding: var(--spacing-1) 0;
}

.nav-user-menu__link {
  display: flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.nav-user-menu__link:hover {
  background-color: var(--color-gray-100);
}

.nav-user-menu__link svg {
  margin-right: var(--spacing-3);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gray-400);
}

/* Section Divider */

.nav-user-menu__divider {
  border-top: 1px solid var(--color-gray-100);
  margin: var(--spacing-1) 0;
}

/* Section Label */

.nav-user-menu__section-label {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sign Out */

.nav-user-menu__signout {
  padding: var(--spacing-1) 0;
  border-top: 1px solid var(--color-gray-200);
}

.nav-user-menu__signout-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-danger-600);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.nav-user-menu__signout-btn:hover {
  background-color: var(--color-danger-50);
}

.nav-user-menu__signout-btn svg {
  margin-right: var(--spacing-3);
  width: 1.25rem;
  height: 1.25rem;
}

/* Dashboard Components */

/* Dashboard Activity Item Component */

.dash-activity-item {
  position: relative;
  padding-bottom: var(--spacing-6);
}

.dash-activity-item:last-child {
  padding-bottom: 0;
}

/* Timeline line */

.dash-activity-item__line {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  margin-left: -1px;
  height: 100%;
  width: 2px;
  background-color: var(--color-gray-200);
}

.dash-activity-item:last-child .dash-activity-item__line {
  display: none;
}

/* Activity content */

.dash-activity-item__content {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

/* Icon */

.dash-activity-item__icon {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px var(--color-white);
  flex-shrink: 0;
}

.dash-activity-item__icon--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.dash-activity-item__icon--success {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.dash-activity-item__icon--warning {
  background-color: var(--color-warning-100);
  color: var(--color-warning-600);
}

.dash-activity-item__icon--danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-600);
}

.dash-activity-item__icon--info {
  background-color: #e0e7ff; /* indigo-100 */
  color: #4f46e5; /* indigo-600 */
}

.dash-activity-item__icon--gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

.dash-activity-item__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Text content */

.dash-activity-item__text {
  min-width: 0;
  flex: 1;
}

.dash-activity-item__message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

.dash-activity-item__meta {
  margin-top: var(--spacing-0-5);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Dashboard Stats Card Component */

.dash-stats-card {
  display: block;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-6);
  border-left: 4px solid;
  transition: all var(--transition-base);
}

.dash-stats-card:hover {
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}

.dash-stats-card--primary {
  border-left-color: var(--color-primary-500);
}

.dash-stats-card--success {
  border-left-color: var(--color-success-500);
}

.dash-stats-card--warning {
  border-left-color: var(--color-warning-500);
}

.dash-stats-card--danger {
  border-left-color: var(--color-danger-500);
}

.dash-stats-card--info {
  border-left-color: #6366f1; /* indigo-500 */
}

.dash-stats-card--gray {
  border-left-color: var(--color-gray-500);
}

.dash-stats-card__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-stats-card__info {
  flex: 1;
}

.dash-stats-card__count {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.dash-stats-card__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.dash-stats-card__icon {
  margin-left: var(--spacing-4);
}

.dash-stats-card__icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-stats-card__icon-circle--primary {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.dash-stats-card__icon-circle--success {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.dash-stats-card__icon-circle--warning {
  background-color: var(--color-warning-100);
  color: var(--color-warning-600);
}

.dash-stats-card__icon-circle--danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-600);
}

.dash-stats-card__icon-circle--info {
  background-color: #e0e7ff; /* indigo-100 */
  color: #4f46e5; /* indigo-600 */
}

.dash-stats-card__icon-circle--gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

.dash-stats-card__icon-circle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Dashboard Work Order Card Component */

.dash-wo-card {
  display: block;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
  border: 1px solid var(--color-gray-100);
  text-decoration: none;
  transition: all var(--transition-base);
}

.dash-wo-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-300);
}

.dash-wo-card__content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}

/* Status Dot */

.dash-wo-card__status-dot {
  flex-shrink: 0;
  margin-top: var(--spacing-1);
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}

.dash-wo-card__status-dot--pending {
  background-color: var(--color-warning-500);
}

.dash-wo-card__status-dot--in-progress {
  background-color: var(--color-primary-500);
}

.dash-wo-card__status-dot--completed {
  background-color: var(--color-success-500);
}

.dash-wo-card__status-dot--cancelled {
  background-color: var(--color-danger-500);
}

/* Main content */

.dash-wo-card__main {
  flex: 1;
  min-width: 0;
}

.dash-wo-card__order-number {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-wo-card__device {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: var(--spacing-0-5);
}

.dash-wo-card__description {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta info */

.dash-wo-card__meta {
  margin-top: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.dash-wo-card__meta-item {
  display: flex;
  align-items: center;
}

.dash-wo-card__meta-item svg {
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--spacing-1);
}

/* Arrow icon */

.dash-wo-card__arrow {
  display: none;
  flex-shrink: 0;
  color: var(--color-gray-400);
}

@media (min-width: 640px) {
  .dash-wo-card__arrow {
    display: block;
  }
}

.dash-wo-card__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Shared Components */

/* Shared Form Errors Component */

.form-errors {
  background-color: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.form-errors__content {
  display: flex;
}

.form-errors__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-danger-400);
}

.form-errors__body {
  margin-left: var(--spacing-3);
}

.form-errors__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-800);
}

.form-errors__list-wrapper {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-danger-700);
}

.form-errors__list {
  list-style: disc;
  padding-left: 1.25rem;
}

.form-errors__list li {
  margin-bottom: var(--spacing-1);
}

.form-errors__list li:last-child {
  margin-bottom: 0;
}

/* Shared Pagination Component */

.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-gray-200);
  background-color: var(--color-white);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

@media (min-width: 640px) {
  .pagination-nav {
    padding: var(--spacing-3) var(--spacing-6);
  }
}

/* Mobile Pagination */

.pagination-nav__mobile {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .pagination-nav__mobile {
    display: none;
  }
}

.pagination-nav__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.pagination-nav__btn--enabled {
  background-color: var(--color-white);
  color: var(--color-gray-700);
}

.pagination-nav__btn--enabled:hover {
  background-color: var(--color-gray-50);
}

.pagination-nav__btn--disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.pagination-nav__btn--next {
  margin-left: var(--spacing-3);
}

/* Desktop Pagination */

.pagination-nav__desktop {
  display: none;
}

@media (min-width: 640px) {
  .pagination-nav__desktop {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
  }
}

.pagination-nav__info {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.pagination-nav__info-highlight {
  font-weight: var(--font-weight-medium);
}

/* Page Numbers */

.pagination-nav__pages {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

.pagination-nav__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all var(--transition-base);
}

.pagination-nav__page:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.pagination-nav__page:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.pagination-nav__page--current {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
  z-index: 10;
}

.pagination-nav__page--enabled {
  background-color: var(--color-white);
  color: var(--color-gray-700);
}

.pagination-nav__page--enabled:hover {
  background-color: var(--color-gray-50);
}

.pagination-nav__page--disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-400);
  cursor: not-allowed;
}

.pagination-nav__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  color: var(--color-gray-500);
}

/* Templates Components */

/* Templates Mobile Workflow Editor Component */

.mobile-workflow-editor {
  max-width: 28rem;
  margin: 0 auto;
  background-color: var(--color-gray-50);
  min-height: 100vh;
}

/* Touch-friendly sizing */

.mobile-workflow-editor--touch {
  font-size: 16px;
}

/* Header */

.mobile-workflow-editor__header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-3) var(--spacing-4);
}

.mobile-workflow-editor__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-workflow-editor__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.mobile-workflow-editor__help-btn {
  padding: var(--spacing-2);
  color: var(--color-gray-500);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

.mobile-workflow-editor__help-btn:hover {
  color: var(--color-gray-700);
}

.mobile-workflow-editor__help-btn i {
  font-size: var(--font-size-xl);
}

/* Workflow Preview */

.mobile-workflow-editor__preview {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
}

.mobile-workflow-editor__preview-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-1);
}

.mobile-workflow-editor__preview-flow {
  font-size: var(--font-size-sm);
  color: var(--color-gray-800);
  font-family: monospace;
}

/* Validation Banner */

.mobile-workflow-editor__validation-banner {
  background-color: var(--color-danger-50);
  border-left: 4px solid var(--color-danger-400);
  padding: var(--spacing-4);
  margin: var(--spacing-4);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.mobile-workflow-editor__validation-content {
  display: flex;
  align-items: center;
}

.mobile-workflow-editor__validation-icon {
  color: var(--color-danger-400);
  margin-right: var(--spacing-3);
}

.mobile-workflow-editor__validation-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger-800);
}

.mobile-workflow-editor__validation-message {
  font-size: var(--font-size-xs);
  color: var(--color-danger-700);
  margin-top: var(--spacing-1);
}

/* Main Content */

.mobile-workflow-editor__content {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Section */

.mobile-workflow-editor__section {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-4);
}

.mobile-workflow-editor__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: center;
}

.mobile-workflow-editor__section-title i {
  margin-right: var(--spacing-3);
}

.mobile-workflow-editor__section-title i.fa-magic {
  color: var(--color-primary-600);
}

.mobile-workflow-editor__section-title i.fa-list-ul {
  color: var(--color-success-600);
}

.mobile-workflow-editor__section-title i.fa-share-alt {
  color: #9333ea; /* purple-600 */
}

.mobile-workflow-editor__section-count {
  margin-left: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

/* Quick Setup Button */

.mobile-workflow-editor__quick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-base);
  margin-bottom: var(--spacing-3);
}

.mobile-workflow-editor__quick-btn:last-child {
  margin-bottom: 0;
}

.mobile-workflow-editor__quick-btn:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.mobile-workflow-editor__quick-icon {
  font-size: var(--font-size-2xl);
  margin-right: var(--spacing-4);
}

.mobile-workflow-editor__quick-info {
  flex: 1;
}

.mobile-workflow-editor__quick-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.mobile-workflow-editor__quick-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.mobile-workflow-editor__quick-arrow {
  color: var(--color-gray-400);
}

/* Status Card */

.mobile-workflow-editor__status-card {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
  border: 1px solid var(--color-gray-200);
}

.mobile-workflow-editor__status-card:last-child {
  margin-bottom: 0;
}

.mobile-workflow-editor__status-card--enabled {
  background-color: var(--color-white);
}

.mobile-workflow-editor__status-card--disabled {
  background-color: var(--color-gray-50);
  opacity: 0.7;
}

.mobile-workflow-editor__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-workflow-editor__status-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.mobile-workflow-editor__status-icon {
  font-size: var(--font-size-xl);
  margin-right: var(--spacing-3);
}

.mobile-workflow-editor__status-details {
  flex: 1;
  min-width: 0;
}

.mobile-workflow-editor__status-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-workflow-editor__status-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-workflow-editor__status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  margin-top: var(--spacing-1);
}

.mobile-workflow-editor__badge {
  display: inline-block;
  padding: var(--spacing-0-5) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-base);
}

.mobile-workflow-editor__badge--initial {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.mobile-workflow-editor__badge--terminal {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.mobile-workflow-editor__badge--mandatory {
  background-color: #f3e8ff; /* purple-100 */
  color: #6b21a8; /* purple-800 */
}

/* Toggle Switch */

.mobile-workflow-editor__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: var(--spacing-4);
}

.mobile-workflow-editor__toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mobile-workflow-editor__toggle-track {
  width: 3.5rem;
  height: 2rem;
  background-color: var(--color-gray-200);
  border-radius: 9999px;
  position: relative;
  transition: background-color var(--transition-base);
}

.mobile-workflow-editor__toggle input:checked + .mobile-workflow-editor__toggle-track {
  background-color: var(--color-primary-600);
}

.mobile-workflow-editor__toggle-track::after {
  content: '';
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-white);
  border-radius: 9999px;
  transition: transform var(--transition-base);
}

.mobile-workflow-editor__toggle input:checked + .mobile-workflow-editor__toggle-track::after {
  transform: translateX(1.5rem);
}

/* Lock Warning */

.mobile-workflow-editor__lock-warning {
  margin-top: var(--spacing-3);
  padding: var(--spacing-2);
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  border-radius: var(--radius-lg);
}

.mobile-workflow-editor__lock-text {
  font-size: var(--font-size-xs);
  color: var(--color-warning-800);
}

.mobile-workflow-editor__lock-text i {
  margin-right: var(--spacing-1);
}

/* Connection Group */

.mobile-workflow-editor__connection-group {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--spacing-4);
}

.mobile-workflow-editor__connection-group:last-child {
  margin-bottom: 0;
}

.mobile-workflow-editor__connection-header {
  background-color: var(--color-gray-50);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
}

.mobile-workflow-editor__connection-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  margin-right: var(--spacing-3);
}

.mobile-workflow-editor__connection-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.mobile-workflow-editor__connection-count {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Connection Item */

.mobile-workflow-editor__connection-item {
  padding: var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-gray-200);
}

.mobile-workflow-editor__connection-item:last-child {
  border-bottom: none;
}

.mobile-workflow-editor__connection-target {
  display: flex;
  align-items: center;
  flex: 1;
}

.mobile-workflow-editor__connection-arrow {
  color: var(--color-gray-400);
  margin-right: var(--spacing-3);
}

.mobile-workflow-editor__connection-target-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  margin-right: var(--spacing-3);
}

.mobile-workflow-editor__connection-target-name {
  color: var(--color-gray-900);
}

.mobile-workflow-editor__connection-critical {
  margin-left: var(--spacing-2);
  display: inline-block;
  padding: var(--spacing-0-5) var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-danger-100);
  color: var(--color-danger-800);
  border-radius: var(--radius-base);
}

/* Connection Controls */

.mobile-workflow-editor__connection-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.mobile-workflow-editor__critical-btn {
  padding: var(--spacing-2);
  color: var(--color-gray-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

.mobile-workflow-editor__critical-btn:hover {
  color: var(--color-danger-600);
}

.mobile-workflow-editor__critical-btn--active {
  color: var(--color-danger-600);
}

/* Add Connection */

.mobile-workflow-editor__add-connection {
  background-color: var(--color-gray-50);
  padding: var(--spacing-3) var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.mobile-workflow-editor__add-btn {
  width: 100%;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-primary-600);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--transition-base);
}

.mobile-workflow-editor__add-btn:hover {
  color: var(--color-primary-800);
}

.mobile-workflow-editor__add-btn i {
  margin-right: var(--spacing-2);
}

/* Validation Section */

.mobile-workflow-editor__validation-box {
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
}

.mobile-workflow-editor__validation-box--valid {
  background-color: var(--color-success-50);
  border: 1px solid var(--color-success-200);
}

.mobile-workflow-editor__validation-box--errors {
  background-color: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
}

.mobile-workflow-editor__validation-box--warnings {
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

.mobile-workflow-editor__validation-status {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-2);
}

.mobile-workflow-editor__validation-box--valid .mobile-workflow-editor__validation-status {
  color: var(--color-success-800);
}

.mobile-workflow-editor__validation-list {
  font-size: var(--font-size-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-workflow-editor__validation-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-1);
}

.mobile-workflow-editor__validation-list li:last-child {
  margin-bottom: 0;
}

.mobile-workflow-editor__validation-list li i {
  margin-right: var(--spacing-2);
  margin-top: var(--spacing-0-5);
}

/* Statistics */

.mobile-workflow-editor__stats {
  margin-top: var(--spacing-4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

.mobile-workflow-editor__stat {
  text-align: center;
  padding: var(--spacing-3);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.mobile-workflow-editor__stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.mobile-workflow-editor__stat-value--primary {
  color: var(--color-primary-600);
}

.mobile-workflow-editor__stat-value--success {
  color: var(--color-success-600);
}

.mobile-workflow-editor__stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Sticky Actions */

.mobile-workflow-editor__actions {
  position: sticky;
  bottom: 0;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.mobile-workflow-editor__action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.mobile-workflow-editor__action-btn i {
  margin-right: var(--spacing-3);
}

.mobile-workflow-editor__action-btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
}

.mobile-workflow-editor__action-btn--success:hover {
  background-color: var(--color-success-700);
}

.mobile-workflow-editor__action-btn--secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.mobile-workflow-editor__action-btn--secondary:hover {
  background-color: var(--color-gray-200);
}

/* Templates Workflow Editor Component */

.workflow-editor-container {
  /* Container wrapper */
}

/* Validation Alert */

.workflow-editor__alert {
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
}

.workflow-editor__alert--valid {
  background-color: var(--color-success-50);
  border: 1px solid var(--color-success-200);
}

.workflow-editor__alert--invalid {
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

.workflow-editor__alert-content {
  display: flex;
}

.workflow-editor__alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.workflow-editor__alert-body {
  margin-left: var(--spacing-3);
}

.workflow-editor__alert-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.workflow-editor__alert-list {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.workflow-editor__alert-list ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: var(--spacing-1);
}

.workflow-editor__alert-list li {
  margin-bottom: var(--spacing-1);
}

/* Statistics */

.workflow-editor__stats {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.workflow-editor__stats-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-4);
}

.workflow-editor__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .workflow-editor__stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.workflow-editor__stat {
  text-align: center;
}

.workflow-editor__stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.workflow-editor__stat-value--primary {
  color: var(--color-primary-600);
}

.workflow-editor__stat-value--success {
  color: var(--color-success-600);
}

.workflow-editor__stat-value--purple {
  color: #9333ea; /* purple-600 */
}

.workflow-editor__stat-value--warning {
  color: var(--color-warning-600);
}

.workflow-editor__stat-label {
  color: var(--color-gray-600);
}

/* Canvas */

.workflow-editor {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.workflow-editor__header {
  margin-bottom: var(--spacing-4);
}

.workflow-editor__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-2);
}

.workflow-editor__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.workflow-editor__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Mode Toggle */

.workflow-editor__mode-toggle {
  display: flex;
  gap: var(--spacing-4);
}

.workflow-editor__mode-toggle input[type="radio"] {
  display: none;
}

.workflow-editor__mode-toggle label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.workflow-editor__mode-toggle label:hover {
  background-color: var(--color-gray-100);
}

.workflow-editor__mode-toggle input[type="radio"]:checked + label {
  background-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

.workflow-editor__mode-help {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

/* Canvas Area */

.workflow-canvas {
  position: relative;
  min-height: 56rem;
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-base);
  border: 2px dashed var(--color-gray-300);
  overflow: hidden;
}

/* Status Node */

.status-node {
  position: absolute;
  z-index: 100;
  cursor: move;
}

.status-node__card {
  width: 14rem;
  padding: var(--spacing-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 2px solid;
}

.status-node__card--enabled {
  background-color: var(--color-white);
  border-color: var(--color-gray-200);
}

.status-node__card--disabled {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
  opacity: 0.7;
}

.status-node__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

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

.status-node__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: var(--spacing-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background-color: var(--color-primary-600);
  border-radius: 9999px;
}

.status-node__icon {
  margin-right: var(--spacing-2);
  font-size: var(--font-size-lg);
}

.status-node__name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status-node__badges {
  display: flex;
  gap: var(--spacing-1);
}

.status-node__badge {
  padding: 0 var(--spacing-1);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-base);
}

.status-node__badge--initial {
  background-color: var(--color-success-100);
  color: var(--color-success-800);
}

.status-node__badge--terminal {
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.status-node__badge--required {
  background-color: #f3e8ff; /* purple-100 */
  color: #6b21a8; /* purple-800 */
}

.status-node__description {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.status-node__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Toggle Switch */

.status-node__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.status-node__toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.status-node__toggle-track {
  width: 2.25rem;
  height: 1.25rem;
  background-color: var(--color-gray-200);
  border-radius: 9999px;
  position: relative;
  transition: background-color var(--transition-base);
}

.status-node__toggle input:checked + .status-node__toggle-track {
  background-color: var(--color-primary-600);
}

.status-node__toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-white);
  border-radius: 9999px;
  transition: transform var(--transition-base);
}

.status-node__toggle input:checked + .status-node__toggle-track::after {
  transform: translateX(100%);
}

.status-node__toggle-text {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-left: var(--spacing-2);
}

/* Legend */

.workflow-editor__legend {
  margin-top: var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.workflow-editor__legend-items {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.workflow-editor__legend-item {
  display: flex;
  align-items: center;
}

.workflow-editor__legend-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  margin-right: var(--spacing-2);
}

.workflow-editor__legend-dot--initial {
  background-color: var(--color-success-500);
}

.workflow-editor__legend-dot--terminal {
  background-color: var(--color-primary-500);
}

.workflow-editor__legend-dot--required {
  background-color: #9333ea; /* purple-500 */
}

.workflow-editor__legend-dot--disabled {
  background-color: var(--color-gray-300);
}

.workflow-editor__legend-actions {
  display: flex;
  gap: var(--spacing-3);
}

.workflow-editor__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
  border: none;
}

.workflow-editor__btn i {
  margin-right: var(--spacing-2);
}

.workflow-editor__btn--warning {
  background-color: var(--color-warning-600);
  color: var(--color-white);
}

.workflow-editor__btn--warning:hover {
  background-color: var(--color-warning-700);
}

.workflow-editor__btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
}

.workflow-editor__btn--success:hover {
  background-color: var(--color-success-700);
}

.workflow-editor__btn:disabled {
  background-color: var(--color-gray-400);
  cursor: not-allowed;
}

/* Info Boxes */

.workflow-editor__info-box {
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.workflow-editor__info-box--blue {
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
}

.workflow-editor__info-box--yellow {
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

.workflow-editor__info-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
}

.workflow-editor__info-title i {
  margin-right: var(--spacing-2);
}

.workflow-editor__info-box--blue .workflow-editor__info-title {
  color: var(--color-primary-800);
}

.workflow-editor__info-box--yellow .workflow-editor__info-title {
  color: var(--color-warning-800);
}

.workflow-editor__info-list {
  font-size: var(--font-size-sm);
}

.workflow-editor__info-box--blue .workflow-editor__info-list {
  color: var(--color-primary-700);
}

.workflow-editor__info-box--yellow .workflow-editor__info-list {
  color: var(--color-warning-700);
}

.workflow-editor__info-list li {
  margin-bottom: var(--spacing-1);
}

/* Mobile Switch */

.workflow-editor__mobile-switch {
  margin-top: var(--spacing-6);
  padding: var(--spacing-4);
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-lg);
}

.workflow-editor__mobile-switch-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.workflow-editor__mobile-switch-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-900);
}

.workflow-editor__mobile-switch-desc {
  font-size: var(--font-size-sm);
  color: var(--color-primary-700);
  margin-top: var(--spacing-1);
}

.workflow-editor__mobile-switch-btn {
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-primary-600);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.workflow-editor__mobile-switch-btn:hover {
  background-color: var(--color-primary-700);
}

/* Customers Components */

/* Customers Mobile Card Component */

.customer-mobile-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
}

@media (min-width: 768px) {
  .customer-mobile-card {
    display: none;
  }
}

/* Header */

.customer-mobile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.customer-mobile-card__header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.customer-mobile-card__avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.customer-mobile-card__avatar i {
  color: var(--color-primary-600);
}

.customer-mobile-card__info {
  flex: 1;
  min-width: 0;
}

.customer-mobile-card__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-mobile-card__company {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-mobile-card__language {
  flex-shrink: 0;
  margin-left: var(--spacing-2);
  font-size: var(--font-size-2xl);
}

/* Contact Info */

.customer-mobile-card__contact {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.customer-mobile-card__contact-row {
  display: flex;
  align-items: center;
}

.customer-mobile-card__contact-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.customer-mobile-card__contact-icon i {
  color: var(--color-gray-400);
}

.customer-mobile-card__contact-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stats */

.customer-mobile-card__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.customer-mobile-card__stat {
  display: flex;
  align-items: center;
}

.customer-mobile-card__stat-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-2);
}

.customer-mobile-card__stat-icon i {
  color: var(--color-gray-400);
}

.customer-mobile-card__stat-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.customer-mobile-card__stat-value {
  font-weight: var(--font-weight-medium);
}

/* Permissions */

.customer-mobile-card__permissions {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.customer-mobile-card__permission {
  font-size: var(--font-size-lg);
}

.customer-mobile-card__permission--active {
  color: var(--color-success-600);
}

.customer-mobile-card__permission--inactive {
  color: var(--color-gray-300);
}

.customer-mobile-card__permission--whatsapp.customer-mobile-card__permission--active {
  color: #25d366; /* WhatsApp green */
}

/* Actions */

.customer-mobile-card__actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.customer-mobile-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.customer-mobile-card__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.customer-mobile-card__btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.customer-mobile-card__btn--primary:hover {
  background-color: var(--color-primary-700);
}

.customer-mobile-card__btn--secondary {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.customer-mobile-card__btn--secondary:hover {
  background-color: var(--color-gray-50);
}

/* Estimates Components */

/* Estimates Mobile Card Component */

.estimate-mobile-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
}

@media (min-width: 768px) {
  .estimate-mobile-card {
    display: none;
  }
}

/* Header */

.estimate-mobile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.estimate-mobile-card__header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.estimate-mobile-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-success-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.estimate-mobile-card__icon i {
  color: var(--color-success-600);
}

.estimate-mobile-card__info {
  flex: 1;
  min-width: 0;
}

.estimate-mobile-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.estimate-mobile-card__number {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.estimate-mobile-card__status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2-5);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-left: var(--spacing-2);
}

/* Details */

.estimate-mobile-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.estimate-mobile-card__detail-row {
  display: flex;
  align-items: center;
}

.estimate-mobile-card__detail-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.estimate-mobile-card__detail-icon i {
  color: var(--color-gray-400);
}

.estimate-mobile-card__detail-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.estimate-mobile-card__detail-link {
  color: var(--color-primary-600);
  text-decoration: none;
}

.estimate-mobile-card__detail-link:hover {
  color: var(--color-primary-900);
}

/* Footer */

.estimate-mobile-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.estimate-mobile-card__amount-wrapper {
  display: flex;
  align-items: center;
}

.estimate-mobile-card__amount-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-2);
}

.estimate-mobile-card__amount-icon i {
  color: var(--color-gray-400);
}

.estimate-mobile-card__amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.estimate-mobile-card__sent {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.estimate-mobile-card__sent i {
  color: var(--color-gray-400);
  margin-right: var(--spacing-1);
}

.estimate-mobile-card__not-sent {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
}

/* Actions */

.estimate-mobile-card__actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.estimate-mobile-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.estimate-mobile-card__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.estimate-mobile-card__btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.estimate-mobile-card__btn--primary:hover {
  background-color: var(--color-primary-700);
}

.estimate-mobile-card__btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.estimate-mobile-card__btn--success:hover {
  background-color: var(--color-success-700);
}

/* Users Components */

/* Users Mobile Card Component */

.user-mobile-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
}

@media (min-width: 768px) {
  .user-mobile-card {
    display: none;
  }
}

/* Header */

.user-mobile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.user-mobile-card__header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.user-mobile-card__avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f3e8ff; /* purple-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.user-mobile-card__avatar i {
  color: #9333ea; /* purple-600 */
}

.user-mobile-card__info {
  flex: 1;
  min-width: 0;
}

.user-mobile-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-mobile-card__username {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-mobile-card__role {
  flex-shrink: 0;
  margin-left: var(--spacing-2);
}

/* Details */

.user-mobile-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.user-mobile-card__detail-row {
  display: flex;
  align-items: center;
}

.user-mobile-card__detail-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.user-mobile-card__detail-icon i {
  color: var(--color-gray-400);
}

.user-mobile-card__detail-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-mobile-card__detail-text--muted {
  color: var(--color-gray-600);
}

/* Footer */

.user-mobile-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.user-mobile-card__status {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.user-mobile-card__language {
  font-size: var(--font-size-2xl);
}

.user-mobile-card__last-login {
  text-align: right;
}

.user-mobile-card__last-login-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.user-mobile-card__last-login-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

/* Actions */

.user-mobile-card__actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.user-mobile-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.user-mobile-card__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.user-mobile-card__btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.user-mobile-card__btn--primary:hover {
  background-color: var(--color-primary-700);
}

.user-mobile-card__btn--secondary {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.user-mobile-card__btn--secondary:hover {
  background-color: var(--color-gray-50);
}

/* Photo Analytics Components */

/* Photo Analytics Activity Component */

.photo-activity {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 1024px) {
  .photo-activity {
    grid-template-columns: repeat(2, 1fr);
  }
}

.photo-activity__section {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
}

.photo-activity__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.photo-activity__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

/* Activity Item */

.photo-activity__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.photo-activity__item:last-child {
  border-bottom: none;
}

.photo-activity__item-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.photo-activity__item-icon {
  flex-shrink: 0;
}

.photo-activity__item-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.photo-activity__item-icon--success {
  color: var(--color-success-500);
}

.photo-activity__item-icon--error {
  color: var(--color-danger-500);
}

.photo-activity__item-content {
  flex: 1;
  min-width: 0;
}

.photo-activity__item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.photo-activity__item-time {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.photo-activity__item-error {
  font-size: var(--font-size-sm);
  color: var(--color-danger-600);
  margin-top: var(--spacing-1);
}

.photo-activity__item-size {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  flex-shrink: 0;
}

/* Empty State */

.photo-activity__empty {
  text-align: center;
  padding: var(--spacing-4);
  color: var(--color-gray-500);
}

/* Photo Analytics Alerts Component */

.photo-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.photo-alerts__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.photo-alerts__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

/* Alert Item */

.photo-alerts__item {
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
}

.photo-alerts__item--info {
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
}

.photo-alerts__item--warning {
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

.photo-alerts__item--error {
  background-color: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
}

.photo-alerts__item--success {
  background-color: var(--color-success-50);
  border: 1px solid var(--color-success-200);
}

.photo-alerts__item-content {
  display: flex;
}

.photo-alerts__item-body {
  margin-left: var(--spacing-3);
}

.photo-alerts__item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.photo-alerts__item--info .photo-alerts__item-title {
  color: var(--color-primary-800);
}

.photo-alerts__item--warning .photo-alerts__item-title {
  color: var(--color-warning-800);
}

.photo-alerts__item--error .photo-alerts__item-title {
  color: var(--color-danger-800);
}

.photo-alerts__item--success .photo-alerts__item-title {
  color: var(--color-success-800);
}

.photo-alerts__item-message {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.photo-alerts__item--info .photo-alerts__item-message {
  color: var(--color-primary-700);
}

.photo-alerts__item--warning .photo-alerts__item-message {
  color: var(--color-warning-700);
}

.photo-alerts__item--error .photo-alerts__item-message {
  color: var(--color-danger-700);
}

.photo-alerts__item--success .photo-alerts__item-message {
  color: var(--color-success-700);
}

/* Photo Analytics Charts Component */

.photo-charts {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
}

.photo-charts__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-6);
}

.photo-charts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 1024px) {
  .photo-charts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.photo-charts__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.photo-charts__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.photo-charts__container {
  position: relative;
}

.photo-charts__canvas {
  width: 100%;
  height: 16rem;
}

/* Photo Analytics Export Component */

.photo-export {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
}

.photo-export__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-6);
}

.photo-export__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 768px) {
  .photo-export__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.photo-export__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.photo-export__btn:hover {
  background-color: var(--color-gray-50);
}

.photo-export__btn-icon {
  font-size: var(--font-size-xl);
}

.photo-export__btn-text {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

/* Photo Analytics Filters Component */

.photo-filters {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
}

.photo-filters__form {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.photo-filters__select {
  display: block;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
}

.photo-filters__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.photo-filters__submit {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  background-color: var(--color-primary-600);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.photo-filters__submit:hover {
  background-color: var(--color-primary-700);
}

/* Photo Analytics Health Component */

.photo-health {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
}

.photo-health__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-6);
}

.photo-health__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 768px) {
  .photo-health__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Status Banner */

.photo-health__status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
}

.photo-health__status--good {
  background-color: var(--color-success-50);
  border: 1px solid var(--color-success-200);
}

.photo-health__status--warning {
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
}

.photo-health__status--critical {
  background-color: var(--color-danger-50);
  border: 1px solid var(--color-danger-200);
}

.photo-health__status-icon {
  font-size: var(--font-size-2xl);
}

.photo-health__status-text {
  flex: 1;
}

.photo-health__status-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.photo-health__status--good .photo-health__status-title {
  color: var(--color-success-800);
}

.photo-health__status--warning .photo-health__status-title {
  color: var(--color-warning-800);
}

.photo-health__status--critical .photo-health__status-title {
  color: var(--color-danger-800);
}

.photo-health__status-subtitle {
  font-size: var(--font-size-sm);
}

.photo-health__status--good .photo-health__status-subtitle {
  color: var(--color-success-700);
}

.photo-health__status--warning .photo-health__status-subtitle {
  color: var(--color-warning-700);
}

.photo-health__status--critical .photo-health__status-subtitle {
  color: var(--color-danger-700);
}

/* Metric Card */

.photo-health__metric {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.photo-health__metric-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.photo-health__metric-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

/* Photo Analytics Metrics Component */

.photo-metrics {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
}

.photo-metrics__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-6);
}

.photo-metrics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 768px) {
  .photo-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .photo-metrics__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.photo-metrics__card {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.photo-metrics__card-content {
  display: flex;
  align-items: center;
}

.photo-metrics__icon {
  font-size: var(--font-size-2xl);
  margin-right: var(--spacing-3);
}

.photo-metrics__info {
  flex: 1;
}

.photo-metrics__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.photo-metrics__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

/* Service Partnerships Components */

/* Service Partnerships Card Component */

.partnership-card__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.partnership-card__main {
  flex: 1;
  min-width: 0;
}

.partnership-card__header {
  margin-bottom: var(--spacing-3);
}

.partnership-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.partnership-card__subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

.partnership-card__status-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-1);
}

.partnership-card__status-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Specialties */

.partnership-card__specialties {
  margin-bottom: var(--spacing-3);
}

.partnership-card__specialties-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}

/* Dates */

.partnership-card__dates {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Actions */

.partnership-card__actions {
  flex-shrink: 0;
  margin-left: var(--spacing-4);
}

.partnership-card__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

@media (min-width: 640px) {
  .partnership-card__buttons {
    flex-direction: row;
  }
}

.partnership-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.partnership-card__btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
}

.partnership-card__btn--primary:hover {
  background-color: var(--color-primary-700);
}

.partnership-card__btn--secondary {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.partnership-card__btn--secondary:hover {
  background-color: var(--color-gray-50);
}

.partnership-card__btn--danger {
  background-color: var(--color-danger-600);
  color: var(--color-white);
}

.partnership-card__btn--danger:hover {
  background-color: var(--color-danger-700);
}

.partnership-card__btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
}

.partnership-card__btn--success:hover {
  background-color: var(--color-success-700);
}

/* Work Order Statuses Components */

/* Work Order Statuses Mobile Card Component */

.status-mobile-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
}

@media (min-width: 768px) {
  .status-mobile-card {
    display: none;
  }
}

/* Header */

.status-mobile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.status-mobile-card__header-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.status-mobile-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
  border: 2px solid;
}

.status-mobile-card__icon i {
  color: var(--color-white);
}

.status-mobile-card__info {
  flex: 1;
  min-width: 0;
}

.status-mobile-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Details */

.status-mobile-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.status-mobile-card__detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-mobile-card__detail-left {
  display: flex;
  align-items: center;
}

.status-mobile-card__detail-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.status-mobile-card__detail-icon i {
  color: var(--color-gray-400);
}

.status-mobile-card__detail-label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.status-mobile-card__detail-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.status-mobile-card__color-preview {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.status-mobile-card__color-swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-base);
  border: 2px solid var(--color-gray-200);
}

.status-mobile-card__color-hex {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-family: monospace;
}

/* Attributes */

.status-mobile-card__attributes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-100);
}

.status-mobile-card__attribute {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

/* Notification Indicators */

.status-mobile-card__notifications {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: var(--spacing-3);
  margin: 0 calc(-1 * var(--spacing-4));
  background-color: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-100);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

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

.status-mobile-card__notification-icon {
  font-size: var(--font-size-xl);
}

.status-mobile-card__notification-icon--active {
  color: var(--color-success-500);
}

.status-mobile-card__notification-icon--inactive {
  color: var(--color-gray-300);
}

.status-mobile-card__notification-icon--recommendation {
  color: var(--color-warning-500);
}

.status-mobile-card__notification-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

/* Actions */

.status-mobile-card__actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
}

.status-mobile-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.status-mobile-card__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.status-mobile-card__btn--secondary {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.status-mobile-card__btn--secondary:hover {
  background-color: var(--color-gray-50);
}

.status-mobile-card__btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.status-mobile-card__btn--success:hover {
  background-color: var(--color-success-700);
}

.status-mobile-card__btn--warning {
  background-color: var(--color-warning-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.status-mobile-card__btn--warning:hover {
  background-color: var(--color-warning-700);
}

.status-mobile-card__delete {
  margin-top: var(--spacing-2);
}

.status-mobile-card__btn--danger {
  width: 100%;
  background-color: var(--color-danger-600);
  color: var(--color-white);
  border: 1px solid transparent;
}

.status-mobile-card__btn--danger:hover {
  background-color: var(--color-danger-700);
}

/* Work Orders Components */

/* Work Orders Additional Filters Component */

.wo-filters {
  /* Base container - classes applied dynamically */
}

/* Mobile Search */

.wo-filters__mobile-search {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
}

.wo-filters__mobile-form {
  display: flex;
}

.wo-filters__search-input {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-4);
  border: none;
  background: transparent;
  font-size: var(--font-size-sm);
  border-radius: 9999px 0 0 9999px;
}

.wo-filters__search-input:focus {
  outline: none;
}

.wo-filters__search-input::-moz-placeholder {
  color: var(--color-gray-400);
}

.wo-filters__search-input::placeholder {
  color: var(--color-gray-400);
}

.wo-filters__search-btn {
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-primary-600);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: 0 9999px 9999px 0;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-filters__search-btn:hover {
  background-color: var(--color-primary-700);
}

/* Desktop Filters */

.wo-filters__desktop {
  padding: var(--spacing-6);
}

.wo-filters__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 768px) {
  .wo-filters__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wo-filters__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.wo-filters__input {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
}

.wo-filters__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-filters__select-wrapper {
  position: relative;
}

.wo-filters__select {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.wo-filters__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-filters__select-icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-3);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
}

.wo-filters__actions {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-3);
}

.wo-filters__submit-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  background-color: var(--color-primary-600);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-filters__submit-btn:hover {
  background-color: var(--color-primary-700);
}

.wo-filters__submit-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.wo-filters__clear-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.wo-filters__clear-btn:hover {
  background-color: var(--color-gray-50);
}

/* Archive checkbox */

.wo-filters__archive-section {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.wo-filters__checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.wo-filters__checkbox {
  border-radius: var(--radius-base);
  border-color: var(--color-gray-300);
  color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

.wo-filters__checkbox:focus {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.wo-filters__checkbox-text {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.wo-filters__checkbox-text i {
  margin-right: var(--spacing-1);
  color: var(--color-gray-400);
}

/* Work Orders Basic Info Component */

.wo-basic-info {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-basic-info__content {
  padding: var(--spacing-6);
}

.wo-basic-info__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-basic-info__icon-wrapper {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-gray-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-basic-info__icon {
  color: var(--color-gray-600);
}

.wo-basic-info__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-basic-info__textarea {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.wo-basic-info__textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Internal Notes Section */

.wo-internal-notes {
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-6);
}

.wo-internal-notes__content {
  padding: var(--spacing-6);
}

.wo-internal-notes__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.wo-internal-notes__icon {
  color: var(--color-warning-600);
  margin-right: var(--spacing-2);
}

.wo-internal-notes__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.wo-internal-notes__help {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.wo-internal-notes__textarea {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
}

.wo-internal-notes__textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Work Orders Company Assignment Component */

.wo-company-assignment {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}

.wo-company-assignment__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-company-assignment__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-success-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-company-assignment__icon i {
  color: var(--color-success-600);
}

.wo-company-assignment__title-group {
  margin-left: var(--spacing-3);
}

.wo-company-assignment__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-company-assignment__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-company-assignment__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.wo-company-assignment__field-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.wo-company-assignment__select-wrapper {
  position: relative;
}

.wo-company-assignment__select {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.wo-company-assignment__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-company-assignment__select-icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-3);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
}

.wo-company-assignment__help {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Work Orders Company Info Component */

.wo-company-info {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-company-info__content {
  padding: var(--spacing-6);
}

.wo-company-info__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-company-info__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-company-info__icon--creator {
  background-color: var(--color-primary-100);
}

.wo-company-info__icon--creator i {
  color: var(--color-primary-600);
}

.wo-company-info__icon--assigned {
  background-color: var(--color-success-100);
}

.wo-company-info__icon--assigned i {
  color: var(--color-success-600);
}

.wo-company-info__icon--empty {
  background-color: var(--color-gray-200);
}

.wo-company-info__icon--empty i {
  color: var(--color-gray-500);
}

.wo-company-info__title-group {
  margin-left: var(--spacing-3);
}

.wo-company-info__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-company-info__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.wo-company-info__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.wo-company-info__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-company-info__contact-row {
  display: flex;
  align-items: center;
  color: var(--color-gray-700);
}

.wo-company-info__contact-row--start {
  align-items: flex-start;
}

.wo-company-info__contact-icon {
  width: 1rem;
  margin-right: var(--spacing-3);
  color: var(--color-gray-400);
}

.wo-company-info__contact-icon--top {
  margin-top: 0.125rem;
}

.wo-company-info__email {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-base);
}

.wo-company-info__email:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.wo-company-info__address {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Service info box */

.wo-company-info__service-box {
  margin-top: var(--spacing-4);
  padding: var(--spacing-3);
  border-radius: var(--radius-lg);
  border: 1px solid;
}

.wo-company-info__service-box--blue {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-200);
}

.wo-company-info__service-box--green {
  background-color: var(--color-success-50);
  border-color: var(--color-success-200);
}

.wo-company-info__service-text {
  font-size: var(--font-size-sm);
}

.wo-company-info__service-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.wo-company-info__service-value {
  color: var(--color-gray-900);
}

/* Footer */

.wo-company-info__footer {
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
}

.wo-company-info__link-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background-color: #0891b2; /* cyan-600 */
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.wo-company-info__link-btn:hover {
  background-color: #0e7490; /* cyan-700 */
}

.wo-company-info__link-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #06b6d4; /* cyan-500 */
}

/* Empty state card */

.wo-company-info--empty {
  background-color: var(--color-gray-50);
}

.wo-company-info__empty-content {
  display: flex;
  align-items: center;
}

.wo-company-info__empty-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-company-info__empty-subtext {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

/* Spacing for second card */

.wo-company-info--mt {
  margin-top: var(--spacing-6);
}

/* Work Orders Context Aware Transitions Component */

.wo-transitions {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-transitions__content {
  padding: var(--spacing-6);
}

/* Header */

.wo-transitions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
}

.wo-transitions__header-left {
  display: flex;
  align-items: center;
}

.wo-transitions__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e0e7ff; /* indigo-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-transitions__icon i {
  color: #4f46e5; /* indigo-600 */
}

.wo-transitions__title-group {
  margin-left: var(--spacing-3);
}

.wo-transitions__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-transitions__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Current Status */

.wo-transitions__current-status {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.wo-transitions__status-content {
  display: flex;
  align-items: center;
}

.wo-transitions__status-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.wo-transitions__status-icon i {
  font-size: var(--font-size-sm);
}

.wo-transitions__status-details {
  margin-left: var(--spacing-3);
  flex: 1;
}

.wo-transitions__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wo-transitions__status-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-transitions__status-name {
  font-weight: var(--font-weight-semibold);
}

.wo-transitions__status-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.wo-transitions__suggested-action {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2-5);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.wo-transitions__suggested-action i {
  margin-right: var(--spacing-1);
}

/* Available Transitions */

.wo-transitions__available {
  margin-bottom: var(--spacing-4);
}

.wo-transitions__available-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-3);
}

.wo-transitions__available-title i {
  margin-right: var(--spacing-2);
  color: var(--color-gray-400);
}

.wo-transitions__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-3);
}

@media (min-width: 768px) {
  .wo-transitions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Transition Button */

.wo-transitions__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.wo-transitions__btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
}

.wo-transitions__btn--primary:hover {
  background-color: var(--color-primary-700);
}

.wo-transitions__btn--success {
  background-color: var(--color-success-600);
  color: var(--color-white);
}

.wo-transitions__btn--success:hover {
  background-color: var(--color-success-700);
}

.wo-transitions__btn--warning {
  background-color: var(--color-warning-600);
  color: var(--color-white);
}

.wo-transitions__btn--warning:hover {
  background-color: var(--color-warning-700);
}

.wo-transitions__btn--danger {
  background-color: var(--color-danger-600);
  color: var(--color-white);
}

.wo-transitions__btn--danger:hover {
  background-color: var(--color-danger-700);
}

.wo-transitions__btn--secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.wo-transitions__btn--secondary:hover {
  background-color: var(--color-gray-200);
}

.wo-transitions__btn-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.wo-transitions__btn-icon {
  margin-right: var(--spacing-3);
  flex-shrink: 0;
}

.wo-transitions__btn-text {
  flex: 1;
  text-align: left;
}

.wo-transitions__btn-title {
  font-weight: var(--font-weight-medium);
}

.wo-transitions__btn-desc {
  font-size: var(--font-size-xs);
  opacity: 0.75;
  margin-top: var(--spacing-1);
}

.wo-transitions__btn-arrow {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-xs);
  opacity: 0.5;
}

/* No Transitions */

.wo-transitions__empty {
  text-align: center;
  padding: var(--spacing-6) 0;
}

.wo-transitions__empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--spacing-4);
  background-color: var(--color-gray-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-transitions__empty-icon i {
  color: var(--color-gray-400);
  font-size: var(--font-size-lg);
}

.wo-transitions__empty-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.wo-transitions__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Workflow Help */

.wo-transitions__help {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.wo-transitions__help-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  transition: color var(--transition-base);
}

.wo-transitions__help-summary:hover {
  color: var(--color-gray-900);
}

.wo-transitions__help-summary i {
  color: var(--color-gray-400);
}

.wo-transitions__help-summary i:first-child {
  margin-right: var(--spacing-2);
}

.wo-transitions__help details[open] .wo-transitions__help-chevron {
  transform: rotate(180deg);
}

.wo-transitions__help-chevron {
  transition: transform var(--transition-base);
}

.wo-transitions__help-content {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-transitions__help-list {
  list-style: disc;
  list-style-position: inside;
  margin-top: var(--spacing-2);
}

.wo-transitions__help-list li {
  margin-bottom: var(--spacing-1);
}

/* Work Orders Custom Fields Component */

.wo-custom-fields {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-custom-fields__content {
  padding: var(--spacing-6);
}

.wo-custom-fields__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-6);
}

.wo-custom-fields__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-warning-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-custom-fields__icon i {
  color: var(--color-warning-600);
}

.wo-custom-fields__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-custom-fields__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 768px) {
  .wo-custom-fields__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wo-custom-fields__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.wo-custom-fields__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
}

.wo-custom-fields__required {
  color: var(--color-danger-500);
}

.wo-custom-fields__value {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

.wo-custom-fields__empty {
  color: var(--color-gray-400);
  font-style: italic;
}

/* Work Orders Customer Info Component */

.wo-customer-info {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-customer-info__content {
  padding: var(--spacing-6);
}

.wo-customer-info__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-customer-info__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-customer-info__icon i {
  color: var(--color-primary-600);
}

.wo-customer-info__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-customer-info__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.wo-customer-info__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-customer-info__contact-row {
  display: flex;
  align-items: center;
  color: var(--color-gray-700);
}

.wo-customer-info__contact-row--start {
  align-items: flex-start;
}

.wo-customer-info__contact-icon {
  width: 1rem;
  margin-right: var(--spacing-3);
  color: var(--color-gray-400);
}

.wo-customer-info__contact-icon--top {
  margin-top: 0.125rem;
}

.wo-customer-info__email {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-base);
}

.wo-customer-info__email:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.wo-customer-info__address {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-customer-info__footer {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-100);
}

.wo-customer-info__link-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background-color: var(--color-primary-600);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.wo-customer-info__link-btn:hover {
  background-color: var(--color-primary-700);
}

.wo-customer-info__link-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.wo-customer-info__link-btn i {
  margin-right: var(--spacing-2);
}

/* Work Orders Customer Selection Component */

.wo-customer-selection {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-customer-selection__content {
  padding: var(--spacing-6);
}

.wo-customer-selection__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-customer-selection__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-customer-selection__icon i {
  color: var(--color-primary-600);
}

.wo-customer-selection__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-customer-selection__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* Select */

.wo-customer-selection__select {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
}

.wo-customer-selection__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

/* Inline form */

.wo-customer-selection__inline-form {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.wo-customer-selection__inline-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.wo-customer-selection__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
  .wo-customer-selection__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wo-customer-selection__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-1);
}

.wo-customer-selection__input {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
}

.wo-customer-selection__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-customer-selection__input-wrapper {
  position: relative;
}

.wo-customer-selection__input--with-icon {
  padding-left: 2.5rem;
}

.wo-customer-selection__input-icon {
  position: absolute;
  top: 50%;
  left: var(--spacing-3);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
  font-size: var(--font-size-sm);
}

.wo-customer-selection__help {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-top: var(--spacing-1);
}

/* Checkbox */

.wo-customer-selection__checkbox-wrapper {
  margin-bottom: var(--spacing-4);
}

.wo-customer-selection__checkbox-label {
  display: flex;
  align-items: center;
}

.wo-customer-selection__checkbox {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary-600);
  border-radius: var(--radius-base);
  border-color: var(--color-gray-300);
}

.wo-customer-selection__checkbox:focus {
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

.wo-customer-selection__checkbox-text {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

.wo-customer-selection__checkbox-help {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-left: 1.5rem;
  margin-top: var(--spacing-1);
}

/* Cancel button */

.wo-customer-selection__cancel-btn {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-customer-selection__cancel-btn:hover {
  background-color: var(--color-gray-50);
}

.wo-customer-selection__cancel-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

/* Customer preview */

.wo-customer-selection__preview {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.wo-customer-selection__preview-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.wo-customer-selection__preview-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-customer-selection__preview-contact {
  display: flex;
  align-items: center;
  color: var(--color-gray-700);
}

.wo-customer-selection__preview-contact--start {
  align-items: flex-start;
}

.wo-customer-selection__preview-contact-icon {
  width: 1rem;
  margin-right: var(--spacing-2);
  color: var(--color-gray-400);
}

.wo-customer-selection__preview-contact-icon--top {
  margin-top: 0.125rem;
}

.wo-customer-selection__preview-email {
  color: var(--color-primary-600);
  text-decoration: none;
}

.wo-customer-selection__preview-email:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.wo-customer-selection__preview-address {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-customer-selection__preview-footer {
  margin-top: var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
}

.wo-customer-selection__view-link {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1-5) var(--spacing-3);
  border: 1px solid transparent;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-base);
  color: var(--color-primary-600);
  background-color: var(--color-primary-100);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.wo-customer-selection__view-link:hover {
  background-color: var(--color-primary-200);
}

.wo-customer-selection__view-link i {
  margin-right: var(--spacing-1);
}

/* Work Orders Details Component */

.wo-details {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-details__content {
  padding: var(--spacing-6);
}

.wo-details__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 768px) {
  .wo-details__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wo-details__field-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.wo-details__field-value {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

/* Section dividers */

.wo-details__section {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-gray-200);
}

/* Service Partnership Assignment */

.wo-details__service-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-details__service-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-details__service-icon i {
  color: var(--color-primary-600);
}

.wo-details__service-title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-details__service-box {
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.wo-details__service-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.wo-details__service-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

.wo-details__service-value {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

/* Internal Notes Box */

.wo-details__internal-notes {
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.wo-details__internal-notes-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.wo-details__internal-notes-icon {
  color: var(--color-warning-600);
  margin-right: var(--spacing-2);
}

.wo-details__internal-notes-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}

.wo-details__internal-notes-help {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-2);
}

.wo-details__internal-notes-content {
  color: var(--color-gray-900);
  white-space: pre-wrap;
}

/* Work Orders Edit Header Component */

.wo-edit-header {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

/* Breadcrumb */

.wo-edit-header__breadcrumb {
  display: flex;
  margin-bottom: var(--spacing-4);
}

.wo-edit-header__breadcrumb-list {
  display: inline-flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--spacing-1);
}

@media (min-width: 768px) {
  .wo-edit-header__breadcrumb-list {
    gap: var(--spacing-2);
  }
}

.wo-edit-header__breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.wo-edit-header__breadcrumb-separator {
  width: 1rem;
  height: 1rem;
  color: var(--color-gray-400);
  margin: 0 var(--spacing-1);
}

.wo-edit-header__breadcrumb-link {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-decoration: none;
  transition: color var(--transition-base);
}

.wo-edit-header__breadcrumb-link:hover {
  color: var(--color-gray-700);
}

.wo-edit-header__breadcrumb-current {
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  font-weight: var(--font-weight-medium);
}

/* Main content */

.wo-edit-header__content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

/* Template Logo */

.wo-edit-header__logo {
  flex-shrink: 0;
}

.wo-edit-header__logo-wrapper {
  width: 4rem;
  height: 4rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wo-edit-header__logo-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.wo-edit-header__info {
  flex: 1;
}

.wo-edit-header__order-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
}

.wo-edit-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Work Orders Email Confirmation Modal Component */

.wo-email-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(75, 85, 99, 0.5);
  overflow-y: auto;
  height: 100%;
  width: 100%;
  z-index: var(--z-modal);
}

.wo-email-modal.hidden {
  display: none;
}

.wo-email-modal__container {
  position: relative;
  top: 5rem;
  margin: 0 auto;
  padding: var(--spacing-5);
  border: 1px solid var(--color-gray-200);
  width: 24rem;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.wo-email-modal__content {
  margin-top: var(--spacing-3);
}

/* Header Icon */

.wo-email-modal__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-email-modal__icon-wrapper {
  margin: 0 auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: var(--color-primary-100);
}

.wo-email-modal__icon-wrapper i {
  color: var(--color-primary-600);
  font-size: var(--font-size-xl);
}

/* Title */

.wo-email-modal__title {
  font-size: var(--font-size-lg);
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  text-align: center;
  margin-bottom: var(--spacing-2);
}

/* Message */

.wo-email-modal__message-wrapper {
  margin-top: var(--spacing-2);
  padding: var(--spacing-3) 1.75rem;
}

.wo-email-modal__message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-align: center;
  margin-bottom: var(--spacing-4);
}

/* Info Boxes */

.wo-email-modal__info-box {
  margin-top: var(--spacing-4);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
}

.wo-email-modal__info-box--blue {
  background-color: var(--color-primary-50);
}

.wo-email-modal__info-box--gray {
  background-color: var(--color-gray-50);
}

.wo-email-modal__info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-1) 0;
  font-size: var(--font-size-sm);
}

.wo-email-modal__info-label {
  color: var(--color-gray-600);
}

.wo-email-modal__info-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-email-modal__info-value--blue {
  color: var(--color-primary-900);
}

/* Notification Options */

.wo-email-modal__options {
  margin-top: var(--spacing-4);
}

.wo-email-modal__options-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-3);
}

.wo-email-modal__option-box {
  margin-bottom: var(--spacing-3);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
  border: 1px solid;
}

.wo-email-modal__option-box--email {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary-200);
}

.wo-email-modal__option-box--whatsapp {
  background-color: var(--color-success-50);
  border-color: var(--color-success-200);
}

.wo-email-modal__option-box--whatsapp.hidden {
  display: none;
}

.wo-email-modal__checkbox-wrapper {
  display: flex;
  align-items: flex-start;
}

.wo-email-modal__checkbox {
  margin-top: var(--spacing-1);
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-base);
  border-color: var(--color-gray-300);
}

.wo-email-modal__checkbox--email {
  color: var(--color-primary-600);
}

.wo-email-modal__checkbox--email:focus {
  box-shadow: 0 0 0 2px var(--color-primary-500);
}

.wo-email-modal__checkbox--whatsapp {
  color: var(--color-success-600);
}

.wo-email-modal__checkbox--whatsapp:focus {
  box-shadow: 0 0 0 2px var(--color-success-500);
}

.wo-email-modal__checkbox-label {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-sm);
  flex: 1;
}

.wo-email-modal__checkbox-title {
  display: flex;
  align-items: center;
}

.wo-email-modal__checkbox-title i {
  margin-right: var(--spacing-1);
}

.wo-email-modal__checkbox-title--email i {
  color: var(--color-primary-600);
}

.wo-email-modal__checkbox-title--whatsapp i {
  color: var(--color-success-600);
}

.wo-email-modal__checkbox-title span {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-email-modal__checkbox-desc {
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

/* Buttons */

.wo-email-modal__buttons {
  padding: var(--spacing-3) var(--spacing-4);
}

.wo-email-modal__button-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.wo-email-modal__btn {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
  border: none;
}

.wo-email-modal__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px currentColor;
}

.wo-email-modal__btn i {
  margin-right: var(--spacing-2);
}

.wo-email-modal__btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-white);
}

.wo-email-modal__btn--primary:hover {
  background-color: var(--color-primary-700);
}

.wo-email-modal__btn--secondary {
  background-color: var(--color-gray-600);
  color: var(--color-white);
}

.wo-email-modal__btn--secondary:hover {
  background-color: var(--color-gray-700);
}

.wo-email-modal__btn--cancel {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.wo-email-modal__btn--cancel:hover {
  background-color: var(--color-gray-50);
}

/* Work Orders Estimates Section Component */

.wo-estimates {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-estimates__content {
  padding: var(--spacing-6);
}

.wo-estimates__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-estimates__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-success-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-estimates__icon i {
  color: var(--color-success-600);
}

.wo-estimates__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

/* Has estimate */

.wo-estimates__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.wo-estimates__number-link {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-base);
}

.wo-estimates__number-link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.wo-estimates__amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wo-estimates__amount {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

.wo-estimates__status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2-5);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Empty state */

.wo-estimates__empty {
  text-align: center;
  padding: var(--spacing-4) 0;
}

.wo-estimates__empty-icon {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-2);
}

.wo-estimates__empty-icon i {
  font-size: var(--font-size-2xl);
}

.wo-estimates__empty-text {
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-4);
}

.wo-estimates__new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background-color: var(--color-success-600);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.wo-estimates__new-btn:hover {
  background-color: var(--color-success-700);
}

.wo-estimates__new-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-success-500);
}

.wo-estimates__new-btn i {
  margin-right: var(--spacing-2);
}

/* Work Orders Header Component */

.wo-header {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

@media (min-width: 640px) {
  .wo-header {
    padding: var(--spacing-6);
  }
}

.wo-header__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.wo-header__main {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  flex: 1;
  min-width: 0;
}

/* Template Logo */

.wo-header__logo {
  flex-shrink: 0;
  display: none;
}

@media (min-width: 640px) {
  .wo-header__logo {
    display: block;
  }
}

.wo-header__logo-wrapper {
  width: 4rem;
  height: 4rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wo-header__logo-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Title area */

.wo-header__info {
  flex: 1;
  min-width: 0;
}

.wo-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .wo-header__title {
    font-size: var(--font-size-3xl);
  }
}

.wo-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-header__status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2-5);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-primary-100);
  color: var(--color-primary-800);
}

.wo-header__priority-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2-5);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

.wo-header__assignee {
  display: none;
  align-items: center;
  color: var(--color-gray-600);
}

@media (min-width: 640px) {
  .wo-header__assignee {
    display: inline-flex;
  }
}

.wo-header__assignee i {
  margin-right: var(--spacing-1);
}

/* Mobile Menu Button */

.wo-header__mobile-menu {
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .wo-header__mobile-menu {
    display: none;
  }
}

.wo-header__mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--color-primary-600);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-header__mobile-menu-btn:hover {
  background-color: var(--color-primary-700);
}

.wo-header__mobile-menu-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

/* Dropdown panel */

.wo-header__dropdown {
  position: absolute;
  right: 0;
  margin-top: var(--spacing-2);
  width: 14rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-1) 0;
  z-index: var(--z-dropdown);
}

.wo-header__dropdown.hidden {
  display: none;
}

.wo-header__dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  background: transparent;
  border: none;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-header__dropdown-item:hover {
  background-color: var(--color-gray-50);
}

.wo-header__dropdown-item i {
  width: 1.25rem;
  color: var(--color-gray-400);
  margin-right: var(--spacing-3);
}

.wo-header__dropdown-divider {
  border-top: 1px solid var(--color-gray-100);
  margin: var(--spacing-1) 0;
}

/* Desktop Actions */

.wo-header__desktop-actions {
  display: none;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

@media (min-width: 640px) {
  .wo-header__desktop-actions {
    display: flex;
  }
}

/* Action Buttons */

.wo-header__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-header__action-btn:hover {
  background-color: var(--color-gray-50);
}

.wo-header__action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.wo-header__action-btn i {
  margin-right: var(--spacing-2);
}

.wo-header__action-btn--primary {
  background-color: var(--color-primary-600);
  border-color: transparent;
  color: var(--color-white);
}

.wo-header__action-btn--primary:hover {
  background-color: var(--color-primary-700);
}

.wo-header__action-btn--success {
  background-color: var(--color-success-600);
  border-color: transparent;
  color: var(--color-white);
}

.wo-header__action-btn--success:hover {
  background-color: var(--color-success-700);
}

.wo-header__action-btn--danger {
  background-color: var(--color-danger-600);
  border-color: transparent;
  color: var(--color-white);
}

.wo-header__action-btn--danger:hover {
  background-color: var(--color-danger-700);
}

/* Print dropdown */

.wo-header__print-dropdown {
  position: absolute;
  right: 0;
  margin-top: var(--spacing-2);
  width: 12rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-1) 0;
  z-index: var(--z-dropdown);
}

.wo-header__print-dropdown.hidden {
  display: none;
}

.wo-header__print-item {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-header__print-item:hover {
  background-color: var(--color-gray-100);
}

.wo-header__print-divider {
  border-top: 1px solid var(--color-gray-100);
  margin: var(--spacing-1) 0;
}

/* Work Orders Image Gallery Component */

.wo-image-gallery {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}

.wo-image-gallery__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-image-gallery__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e0e7ff; /* indigo-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-image-gallery__icon i {
  color: #4f46e5; /* indigo-600 */
}

.wo-image-gallery__title-group {
  margin-left: var(--spacing-3);
}

.wo-image-gallery__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-image-gallery__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

/* Grid */

.wo-image-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  width: 100%;
}

@media (min-width: 768px) {
  .wo-image-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wo-image-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Image Thumbnail */

.wo-image-gallery__thumbnail {
  position: relative;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  width: 100%;
  border: none;
  padding: 0;
}

.wo-image-gallery__thumbnail:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.wo-image-gallery__thumbnail-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Overlay */

.wo-image-gallery__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  transition: background-color var(--transition-base);
}

.wo-image-gallery__thumbnail:hover .wo-image-gallery__overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.wo-image-gallery__info {
  opacity: 0;
  padding: var(--spacing-3);
  width: 100%;
  transition: opacity var(--transition-base);
}

.wo-image-gallery__thumbnail:hover .wo-image-gallery__info {
  opacity: 1;
}

.wo-image-gallery__info-filename {
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wo-image-gallery__info-size {
  color: var(--color-white);
  font-size: var(--font-size-xs);
}

/* Expand icon */

.wo-image-gallery__expand-icon {
  position: absolute;
  top: var(--spacing-2);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.wo-image-gallery__expand-icon--left {
  left: var(--spacing-2);
}

.wo-image-gallery__expand-icon--right {
  right: var(--spacing-2);
}

.wo-image-gallery__thumbnail:hover .wo-image-gallery__expand-icon {
  opacity: 1;
}

.wo-image-gallery__expand-btn {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 9999px;
  padding: var(--spacing-1);
}

.wo-image-gallery__expand-btn i {
  color: var(--color-white);
  font-size: var(--font-size-xs);
}

/* Delete button */

.wo-image-gallery__delete-btn {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-danger-500);
  color: var(--color-white);
  border-radius: 9999px;
  opacity: 0;
  transition: opacity var(--transition-base), background-color var(--transition-base);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-image-gallery__thumbnail:hover .wo-image-gallery__delete-btn {
  opacity: 1;
}

.wo-image-gallery__delete-btn:hover {
  background-color: var(--color-danger-600);
}

.wo-image-gallery__delete-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-danger-500);
}

.wo-image-gallery__delete-btn i {
  font-size: var(--font-size-xs);
}

/* Modal */

.wo-image-gallery__modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-image-gallery__modal.hidden {
  display: none;
}

.wo-image-gallery__modal-content {
  position: relative;
  max-width: 80rem;
  max-height: 100%;
  padding: var(--spacing-4);
  width: 100%;
}

.wo-image-gallery__modal-close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  color: var(--color-white);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: color var(--transition-base);
}

.wo-image-gallery__modal-close:hover {
  color: var(--color-gray-300);
}

.wo-image-gallery__modal-close i {
  font-size: var(--font-size-2xl);
}

.wo-image-gallery__modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-white);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: color var(--transition-base);
}

.wo-image-gallery__modal-nav:hover {
  color: var(--color-gray-300);
}

.wo-image-gallery__modal-nav--prev {
  left: var(--spacing-4);
}

.wo-image-gallery__modal-nav--next {
  right: var(--spacing-4);
}

.wo-image-gallery__modal-nav i {
  font-size: var(--font-size-2xl);
}

.wo-image-gallery__modal-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.wo-image-gallery__modal-caption {
  position: absolute;
  bottom: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  text-align: center;
}

.wo-image-gallery__modal-filename {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-1);
}

.wo-image-gallery__modal-counter {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
}

.wo-image-gallery__modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Empty state */

.wo-image-gallery__empty {
  text-align: center;
  padding: var(--spacing-12) 0;
}

.wo-image-gallery__empty-icon {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-4);
}

.wo-image-gallery__empty-icon i {
  font-size: 2.5rem;
}

.wo-image-gallery__empty-text {
  color: var(--color-gray-500);
}

.wo-image-gallery__empty-help {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin-top: var(--spacing-1);
}

/* Work Orders Images Component */

.wo-images {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}

.wo-images__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-images__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e0e7ff; /* indigo-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-images__icon i {
  color: #4f46e5; /* indigo-600 */
}

.wo-images__title-group {
  margin-left: var(--spacing-3);
}

.wo-images__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-images__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

/* File Upload */

.wo-images__upload {
  margin-bottom: var(--spacing-6);
}

.wo-images__file-input {
  display: block;
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.wo-images__file-input::file-selector-button {
  margin-right: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: #e0e7ff; /* indigo-50 */
  color: #4338ca; /* indigo-700 */
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-images__file-input::file-selector-button:hover {
  background-color: #c7d2fe; /* indigo-100 */
}

.wo-images__help {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Gallery container */

.wo-images__gallery {
  margin: calc(var(--spacing-6) * -1);
  margin-top: 0;
}

/* Work Orders Index Header Component */

.wo-index-header {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.wo-index-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .wo-index-header__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.wo-index-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.wo-index-header__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .wo-index-header__actions {
    flex-direction: row;
    align-items: center;
  }
}

/* Scope Selector (tab-style buttons) */

.wo-scope-selector {
  display: flex;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--spacing-1);
}

.wo-scope-selector__btn {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  color: var(--color-gray-600);
  text-decoration: none;
}

.wo-scope-selector__btn:hover {
  color: var(--color-gray-900);
}

.wo-scope-selector__btn--active {
  background-color: var(--color-white);
  color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

/* New Work Order Button */

.wo-index-header__new-btn {
  display: none;
}

@media (min-width: 640px) {
  .wo-index-header__new-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    color: var(--color-white);
    background-color: var(--color-primary-600);
    transition: background-color var(--transition-base);
    text-decoration: none;
  }

  .wo-index-header__new-btn:hover {
    background-color: var(--color-primary-700);
  }

  .wo-index-header__new-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
  }

  .wo-index-header__new-btn i {
    margin-right: var(--spacing-2);
  }
}

/* Work Orders Messages Section Component */

.wo-messages {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-messages__content {
  padding: var(--spacing-6);
}

/* Header */

.wo-messages__header {
  margin-bottom: var(--spacing-6);
}

.wo-messages__header-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

@media (min-width: 640px) {
  .wo-messages__header-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.wo-messages__title-group {
  display: flex;
  align-items: center;
}

.wo-messages__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-messages__icon i {
  color: var(--color-primary-600);
}

.wo-messages__title-text {
  margin-left: var(--spacing-3);
}

.wo-messages__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-messages__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.wo-messages__result-count {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
}

/* Filter tabs */

.wo-messages__filter-tabs {
  display: flex;
  gap: var(--spacing-1);
  background-color: var(--color-gray-100);
  padding: var(--spacing-1);
  border-radius: var(--radius-lg);
}

.wo-messages__filter-tab {
  padding: var(--spacing-1-5) var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-base);
}

.wo-messages__filter-tab--active {
  background-color: var(--color-white);
  color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

.wo-messages__filter-tab--inactive {
  color: var(--color-gray-600);
}

.wo-messages__filter-tab--inactive:hover {
  color: var(--color-gray-900);
}

.wo-messages__filter-count {
  margin-left: var(--spacing-1);
  font-size: var(--font-size-xs);
  background-color: var(--color-gray-200);
  color: var(--color-gray-600);
  padding: var(--spacing-0-5) var(--spacing-1-5);
  border-radius: 9999px;
}

/* Search and filter */

.wo-messages__search-box {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.wo-messages__search-input-wrapper {
  position: relative;
}

.wo-messages__search-icon {
  position: absolute;
  top: 50%;
  left: var(--spacing-3);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
}

.wo-messages__search-input {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  padding-left: 2.5rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
}

.wo-messages__search-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-messages__search-input::-moz-placeholder {
  color: var(--color-gray-500);
}

.wo-messages__search-input::placeholder {
  color: var(--color-gray-500);
}

/* Timeline */

.wo-messages__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-height: 600px;
  overflow-y: auto;
  padding-right: var(--spacing-2);
}

.wo-messages__timeline-item {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  transition: box-shadow var(--transition-base);
}

.wo-messages__timeline-item:hover {
  box-shadow: var(--shadow-md);
}

.wo-messages__timeline-item--requires-response {
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.2); /* orange ring */
}

/* Empty state */

.wo-messages__empty {
  text-align: center;
  padding: var(--spacing-12) 0;
}

.wo-messages__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: var(--color-gray-100);
  border-radius: 9999px;
  margin-bottom: var(--spacing-4);
}

.wo-messages__empty-icon i {
  font-size: 1.5rem;
  color: var(--color-gray-400);
}

.wo-messages__empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.wo-messages__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* New message form */

.wo-messages__new-form {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-gray-200);
}

.wo-messages__new-form-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

.wo-messages__new-form-title i {
  margin-right: var(--spacing-2);
  color: var(--color-primary-600);
}

/* Work Orders Mobile Bulk Actions Component */

.wo-bulk-actions {
  display: none;
}

.wo-bulk-actions--visible {
  display: block;
}

.wo-bulk-actions__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.wo-bulk-actions__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Selection Info */

.wo-bulk-actions__selection {
  display: flex;
  align-items: center;
}

.wo-bulk-actions__checkbox-label {
  display: flex;
  align-items: center;
}

.wo-bulk-actions__checkbox {
  border-radius: var(--radius-base);
  border-color: var(--color-gray-300);
  color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

.wo-bulk-actions__checkbox:focus {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.wo-bulk-actions__count-text {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

/* Actions Dropdown */

.wo-bulk-actions__dropdown-wrapper {
  position: relative;
}

.wo-bulk-actions__dropdown-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background-color: var(--color-primary-600);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-bulk-actions__dropdown-btn:hover {
  background-color: var(--color-primary-700);
}

.wo-bulk-actions__dropdown-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.wo-bulk-actions__dropdown-btn i {
  margin-left: var(--spacing-2);
}

/* Dropdown Menu */

.wo-bulk-actions__dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: var(--spacing-2);
  width: 14rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: var(--z-dropdown);
}

.wo-bulk-actions__dropdown-menu.hidden {
  display: none;
}

.wo-bulk-actions__dropdown-content {
  padding: var(--spacing-1) 0;
}

.wo-bulk-actions__dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.wo-bulk-actions__dropdown-item:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}

.wo-bulk-actions__dropdown-item--danger {
  color: var(--color-danger-700);
}

.wo-bulk-actions__dropdown-item--danger:hover {
  background-color: var(--color-danger-50);
  color: var(--color-danger-900);
}

.wo-bulk-actions__divider {
  margin: var(--spacing-1) 0;
  border-top: 1px solid var(--color-gray-200);
}

/* Assignment Section */

.wo-bulk-actions__assign-section {
  padding: var(--spacing-2) var(--spacing-4);
}

.wo-bulk-actions__assign-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
  margin-bottom: var(--spacing-2);
}

.wo-bulk-actions__select {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
}

.wo-bulk-actions__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-bulk-actions__select--mb {
  margin-bottom: var(--spacing-2);
}

.wo-bulk-actions__assign-btn {
  margin-top: var(--spacing-2);
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background-color: var(--color-success-600);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-bulk-actions__assign-btn:hover {
  background-color: var(--color-success-700);
}

/* Work Orders Mobile Card Component */

.wo-mobile-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
}

@media (min-width: 640px) {
  .wo-mobile-card {
    display: none;
  }
}

/* Selection checkbox (shown in selection mode) */

.wo-mobile-card__checkbox {
  display: none;
}

.wo-mobile-card__checkbox.visible {
  display: block;
}

.wo-mobile-card__checkbox-label {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-3);
}

.wo-mobile-card__checkbox-input {
  border-radius: var(--radius-base);
  border-color: var(--color-gray-300);
  color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

.wo-mobile-card__checkbox-input:focus {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.wo-mobile-card__checkbox-text {
  margin-left: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Header section */

.wo-mobile-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.wo-mobile-card__header-left {
  display: flex;
  align-items: center;
}

.wo-mobile-card__icon-wrapper {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
}

.wo-mobile-card__icon {
  color: var(--color-primary-600);
}

.wo-mobile-card__order-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wo-mobile-card__order-number {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-mobile-card__template-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: 1px solid;
  margin-top: var(--spacing-1);
}

.wo-mobile-card__status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2-5);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Info rows */

.wo-mobile-card__info-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-3);
}

.wo-mobile-card__info-row:last-child {
  margin-bottom: 0;
}

.wo-mobile-card__info-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
  color: var(--color-gray-400);
}

.wo-mobile-card__info-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.wo-mobile-card__info-text--muted {
  color: var(--color-gray-600);
}

.wo-mobile-card__info-text--danger {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-medium);
}

/* Work Orders Mobile Swipe Instructions Component */

.wo-swipe-instructions {
  display: block;
  margin-bottom: var(--spacing-4);
}

@media (min-width: 640px) {
  .wo-swipe-instructions {
    display: none;
  }
}

.wo-swipe-instructions__card {
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  position: relative;
}

.wo-swipe-instructions__dismiss {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  color: var(--color-primary-400);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

.wo-swipe-instructions__dismiss:hover {
  color: var(--color-primary-600);
}

.wo-swipe-instructions__content {
  padding-right: var(--spacing-8);
}

.wo-swipe-instructions__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.wo-swipe-instructions__header i {
  color: var(--color-primary-600);
  margin-right: var(--spacing-2);
}

.wo-swipe-instructions__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-900);
}

.wo-swipe-instructions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-primary-800);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.wo-swipe-instructions__item {
  display: flex;
  align-items: flex-start;
}

.wo-swipe-instructions__bullet {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--color-primary-400);
  border-radius: 9999px;
  margin-top: 0.5rem;
  margin-right: var(--spacing-2);
  flex-shrink: 0;
}

/* Work Orders New Header Component */

.wo-new-header {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.wo-new-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .wo-new-header__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.wo-new-header__left {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
}

/* Template Logo */

.wo-new-header__logo {
  flex-shrink: 0;
}

.wo-new-header__logo-wrapper {
  width: 4rem;
  height: 4rem;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wo-new-header__logo-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.wo-new-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
}

/* Cancel button */

.wo-new-header__cancel {
  display: none;
}

@media (min-width: 640px) {
  .wo-new-header__cancel {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-gray-300);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    background-color: var(--color-white);
    text-decoration: none;
    transition: background-color var(--transition-base);
  }

  .wo-new-header__cancel:hover {
    background-color: var(--color-gray-50);
  }

  .wo-new-header__cancel:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
  }
}

/* Work Orders Photo Gallery Component */

.wo-photo-gallery {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-photo-gallery__content {
  padding: var(--spacing-6);
}

/* Header */

.wo-photo-gallery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-6);
}

.wo-photo-gallery__header-left {
  display: flex;
  align-items: center;
}

.wo-photo-gallery__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e0e7ff; /* indigo-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-photo-gallery__icon i {
  color: #4f46e5; /* indigo-600 */
}

.wo-photo-gallery__title-group {
  margin-left: var(--spacing-3);
}

.wo-photo-gallery__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-photo-gallery__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

/* Manage Button */

.wo-photo-gallery__manage-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background-color: #4f46e5; /* indigo-600 */
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-photo-gallery__manage-btn:hover {
  background-color: #4338ca; /* indigo-700 */
}

.wo-photo-gallery__manage-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #6366f1;
}

.wo-photo-gallery__manage-btn i {
  margin-right: var(--spacing-2);
}

/* Photos Grid */

.wo-photo-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .wo-photo-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .wo-photo-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Photo Card */

.wo-photo-gallery__card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.wo-photo-gallery__card:hover {
  box-shadow: var(--shadow-lg);
}

.wo-photo-gallery__card-image {
  position: relative;
  aspect-ratio: 1;
}

.wo-photo-gallery__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wo-photo-gallery__placeholder {
  text-align: center;
  padding: var(--spacing-4);
  background-color: var(--color-gray-100);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wo-photo-gallery__placeholder i {
  font-size: var(--font-size-2xl);
  color: var(--color-gray-400);
}

.wo-photo-gallery__placeholder-text {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-2);
  color: var(--color-gray-600);
}

/* Photo Info */

.wo-photo-gallery__card-body {
  padding: var(--spacing-2);
}

.wo-photo-gallery__category {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-photo-gallery__file-size {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.wo-photo-gallery__date {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.wo-photo-gallery__date i {
  margin-right: var(--spacing-1);
}

/* Empty State */

.wo-photo-gallery__empty {
  text-align: center;
  color: var(--color-gray-500);
  padding: var(--spacing-6);
}

.wo-photo-gallery__empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-3);
  color: var(--color-gray-400);
}

.wo-photo-gallery__empty-title {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-2);
}

.wo-photo-gallery__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Work Orders Photo Management Component */

.wo-photo-mgmt {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-photo-mgmt__content {
  padding: var(--spacing-6);
}

/* Header */

.wo-photo-mgmt__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-6);
}

.wo-photo-mgmt__header-left {
  display: flex;
  align-items: center;
}

.wo-photo-mgmt__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e0e7ff; /* indigo-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-photo-mgmt__icon i {
  color: #4f46e5; /* indigo-600 */
}

.wo-photo-mgmt__title-group {
  margin-left: var(--spacing-3);
}

.wo-photo-mgmt__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-photo-mgmt__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}

/* Mobile Add Button */

.wo-photo-mgmt__mobile-add {
  display: block;
}

@media (min-width: 640px) {
  .wo-photo-mgmt__mobile-add {
    display: none;
  }
}

.wo-photo-mgmt__dropdown {
  position: relative;
}

.wo-photo-mgmt__dropdown-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-white);
  background-color: #4f46e5; /* indigo-600 */
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-photo-mgmt__dropdown-btn:hover {
  background-color: #4338ca; /* indigo-700 */
}

.wo-photo-mgmt__dropdown-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #6366f1;
}

.wo-photo-mgmt__dropdown-btn i:first-child {
  margin-right: var(--spacing-1);
}

.wo-photo-mgmt__dropdown-btn i:last-child {
  margin-left: var(--spacing-1);
}

.wo-photo-mgmt__dropdown-menu {
  position: absolute;
  right: 0;
  margin-top: var(--spacing-2);
  width: 14rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: var(--z-dropdown);
}

.wo-photo-mgmt__dropdown-menu.hidden {
  display: none;
}

.wo-photo-mgmt__dropdown-content {
  padding: var(--spacing-1) 0;
}

.wo-photo-mgmt__dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-photo-mgmt__dropdown-item:hover {
  background-color: var(--color-gray-100);
}

.wo-photo-mgmt__dropdown-item i {
  margin-right: var(--spacing-3);
  color: var(--color-gray-400);
}

/* Desktop Action Buttons */

.wo-photo-mgmt__desktop-actions {
  display: none;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

@media (min-width: 640px) {
  .wo-photo-mgmt__desktop-actions {
    display: flex;
  }
}

.wo-photo-mgmt__action-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid var(--color-gray-300);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-photo-mgmt__action-btn:hover {
  background-color: var(--color-gray-50);
}

.wo-photo-mgmt__action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #6366f1;
}

.wo-photo-mgmt__action-btn i {
  margin-right: var(--spacing-2);
}

/* Traditional File Input (New Work Orders) */

.wo-photo-mgmt__file-input-wrapper {
  margin-bottom: var(--spacing-6);
}

.wo-photo-mgmt__file-input {
  display: block;
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.wo-photo-mgmt__file-input::file-selector-button {
  margin-right: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background-color: #eef2ff; /* indigo-50 */
  color: #4338ca; /* indigo-700 */
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-photo-mgmt__file-input::file-selector-button:hover {
  background-color: #e0e7ff; /* indigo-100 */
}

.wo-photo-mgmt__file-help {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Category Selection */

.wo-photo-mgmt__category-field {
  margin-bottom: var(--spacing-4);
}

.wo-photo-mgmt__category-field.hidden {
  display: none;
}

.wo-photo-mgmt__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.wo-photo-mgmt__select {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
}

.wo-photo-mgmt__select:focus {
  outline: none;
  border-color: #6366f1; /* indigo-500 */
  box-shadow: 0 0 0 1px #6366f1;
}

.wo-photo-mgmt__category-help {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Preview Grid */

.wo-photo-mgmt__preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}

.wo-photo-mgmt__preview.hidden {
  display: none;
}

@media (min-width: 768px) {
  .wo-photo-mgmt__preview {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wo-photo-mgmt__preview {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Existing Photos Grid */

.wo-photo-mgmt__photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
}

@media (min-width: 768px) {
  .wo-photo-mgmt__photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wo-photo-mgmt__photos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Photo Item */

.wo-photo-mgmt__photo {
  position: relative;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
}

.wo-photo-mgmt__photo-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wo-photo-mgmt__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-gray-400);
}

.wo-photo-mgmt__photo-placeholder i {
  font-size: var(--font-size-2xl);
}

/* Photo Overlay */

.wo-photo-mgmt__photo-overlay {
  position: absolute;
  inset: 0;
  background-color: transparent;
  display: flex;
  align-items: flex-end;
  transition: background-color var(--transition-base);
}

.wo-photo-mgmt__photo:hover .wo-photo-mgmt__photo-overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

.wo-photo-mgmt__photo-info {
  opacity: 0;
  padding: var(--spacing-3);
  width: 100%;
  transition: opacity var(--transition-base);
}

.wo-photo-mgmt__photo:hover .wo-photo-mgmt__photo-info {
  opacity: 1;
}

.wo-photo-mgmt__photo-category {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

.wo-photo-mgmt__photo-size {
  font-size: var(--font-size-xs);
  color: var(--color-white);
}

/* Delete Button */

.wo-photo-mgmt__delete-btn {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-danger-500);
  color: var(--color-white);
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-base), background-color var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-photo-mgmt__photo:hover .wo-photo-mgmt__delete-btn {
  opacity: 1;
}

.wo-photo-mgmt__delete-btn:hover {
  background-color: var(--color-danger-600);
}

.wo-photo-mgmt__delete-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-danger-500);
}

.wo-photo-mgmt__delete-btn i {
  font-size: var(--font-size-xs);
}

/* Empty State */

.wo-photo-mgmt__empty {
  text-align: center;
  padding: var(--spacing-12) 0;
}

.wo-photo-mgmt__empty-icon {
  color: var(--color-gray-400);
  margin-bottom: var(--spacing-4);
}

.wo-photo-mgmt__empty-icon i {
  font-size: 2.5rem;
}

.wo-photo-mgmt__empty-text {
  color: var(--color-gray-500);
}

.wo-photo-mgmt__empty-help {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
  margin-top: var(--spacing-1);
}

/* Work Orders Pricing Schedule Component */

.wo-pricing {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}

.wo-pricing__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-pricing__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-warning-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-pricing__icon i {
  color: var(--color-warning-600);
}

.wo-pricing__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-6);
}

@media (min-width: 768px) {
  .wo-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wo-pricing__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.wo-pricing__input-wrapper {
  position: relative;
}

.wo-pricing__input {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
}

.wo-pricing__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-pricing__input--with-icon {
  padding-left: 2.5rem;
}

.wo-pricing__input-icon {
  position: absolute;
  top: 50%;
  left: var(--spacing-3);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
}

.wo-pricing__help {
  margin-top: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Work Orders Properties Component */

.wo-properties {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}

.wo-properties__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-6);
}

.wo-properties__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f3e8ff; /* purple-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-properties__icon i {
  color: #9333ea; /* purple-600 */
}

.wo-properties__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-properties__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.wo-properties__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.wo-properties__select-wrapper {
  position: relative;
}

.wo-properties__select {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.wo-properties__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-properties__select-icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-3);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
}

.wo-properties__input {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
}

.wo-properties__input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

/* Work Orders Quick Actions Component */

.wo-quick-actions {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-quick-actions__content {
  padding: var(--spacing-6);
}

.wo-quick-actions__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-quick-actions__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f3e8ff; /* purple-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-quick-actions__icon i {
  color: #9333ea; /* purple-600 */
}

.wo-quick-actions__title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

/* Action buttons */

.wo-quick-actions__btn-group {
  margin-bottom: var(--spacing-4);
}

.wo-quick-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.wo-quick-actions__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

.wo-quick-actions__btn i {
  margin-right: var(--spacing-2);
}

/* Primary (blue) variant */

.wo-quick-actions__btn--primary {
  border-color: var(--color-primary-600);
  color: var(--color-primary-600);
  background-color: var(--color-white);
}

.wo-quick-actions__btn--primary:hover {
  background-color: var(--color-primary-50);
}

/* Warning (orange) variant */

.wo-quick-actions__btn--warning {
  border-color: #ea580c; /* orange-600 */
  color: #ea580c;
  background-color: var(--color-white);
}

.wo-quick-actions__btn--warning:hover {
  background-color: #fff7ed; /* orange-50 */
}

.wo-quick-actions__btn--warning:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px #f97316; /* orange-500 */
}

/* Work Orders Sidebar Info Component */

.wo-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.wo-sidebar__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}

.wo-sidebar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
}

/* Company info */

.wo-sidebar__company-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.wo-sidebar__company-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-sidebar__contact-item {
  display: flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-sidebar__contact-item--start {
  align-items: flex-start;
}

.wo-sidebar__contact-icon {
  margin-right: var(--spacing-2);
  color: var(--color-gray-400);
}

.wo-sidebar__contact-icon--top {
  margin-top: 0.125rem;
}

.wo-sidebar__address {
  line-height: 1.625;
}

.wo-sidebar__divider {
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--color-gray-200);
}

.wo-sidebar__link-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  color: var(--color-primary-700);
  background-color: var(--color-primary-100);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.wo-sidebar__link-btn:hover {
  background-color: var(--color-primary-200);
}

.wo-sidebar__link-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-500);
}

/* Empty state */

.wo-sidebar__empty {
  text-align: center;
  padding: var(--spacing-6) 0;
}

.wo-sidebar__empty-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--color-gray-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-3);
}

.wo-sidebar__empty-icon i {
  color: var(--color-gray-400);
}

.wo-sidebar__empty-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-sidebar__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

/* Help section */

.wo-sidebar__help-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-sidebar__help-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-sidebar__help-icon i {
  color: var(--color-primary-600);
}

.wo-sidebar__help-title {
  margin-left: var(--spacing-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-sidebar__help-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.wo-sidebar__help-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-sidebar__help-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.wo-sidebar__help-item {
  display: flex;
  align-items: flex-start;
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.wo-sidebar__help-bullet {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--color-primary-400);
  border-radius: 9999px;
  margin-top: 0.5rem;
  margin-right: var(--spacing-3);
  flex-shrink: 0;
}

/* Work Orders Status Filters Component */

/* Mobile Filter */

.wo-status-filters--mobile {
  display: block;
  margin-bottom: var(--spacing-6);
}

@media (min-width: 640px) {
  .wo-status-filters--mobile {
    display: none;
  }
}

.wo-status-filters__mobile-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-4);
}

.wo-status-filters__select-wrapper {
  position: relative;
}

.wo-status-filters__select {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  background-color: var(--color-white);
  color: var(--color-gray-900);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.wo-status-filters__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}

.wo-status-filters__select-icon {
  position: absolute;
  top: 50%;
  right: var(--spacing-3);
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-400);
}

/* Desktop Filter Tabs */

.wo-status-filters--desktop {
  display: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-6);
}

@media (min-width: 640px) {
  .wo-status-filters--desktop {
    display: block;
  }
}

.wo-status-filters__tabs-wrapper {
  border-bottom: 1px solid var(--color-gray-200);
}

.wo-status-filters__tabs {
  display: flex;
  gap: var(--spacing-8);
  padding: 0 var(--spacing-6);
}

.wo-status-filters__tab {
  padding: var(--spacing-4) var(--spacing-1);
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all var(--transition-base);
}

.wo-status-filters__tab--active {
  border-bottom-color: var(--color-primary-500);
  color: var(--color-primary-600);
}

.wo-status-filters__tab--inactive {
  border-bottom-color: transparent;
  color: var(--color-gray-500);
}

.wo-status-filters__tab--inactive:hover {
  color: var(--color-gray-700);
  border-bottom-color: var(--color-gray-300);
}

/* Work Orders Table Component */

.wo-table {
  display: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-6);
}

@media (min-width: 640px) {
  .wo-table {
    display: block;
  }
}

.wo-table__wrapper {
  overflow: hidden;
}

.wo-table__scroll {
  overflow-x: auto;
}

.wo-table__table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.wo-table__thead {
  background-color: var(--color-gray-50);
}

.wo-table__th {
  padding: var(--spacing-3) var(--spacing-6);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wo-table__tbody {
  background-color: var(--color-white);
}

.wo-table__tr {
  border-top: 1px solid var(--color-gray-200);
}

.wo-table__tr:first-child {
  border-top: none;
}

.wo-table__tr--clickable {
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.wo-table__tr--clickable:hover {
  background-color: var(--color-gray-50);
}

.wo-table__td {
  padding: var(--spacing-4) var(--spacing-6);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
}

/* Order number cell */

.wo-table__order-cell {
  display: flex;
  flex-direction: column;
}

.wo-table__order-link {
  color: var(--color-primary-600);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.wo-table__order-link:hover {
  color: var(--color-primary-800);
}

.wo-table__template-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border: 1px solid;
  margin-top: var(--spacing-1);
  width: -moz-fit-content;
  width: fit-content;
}

/* Status badge */

.wo-table__status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2-5);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Due date styles */

.wo-table__due-date--overdue {
  color: var(--color-danger-600);
  font-weight: var(--font-weight-medium);
}

.wo-table__due-date--empty {
  color: var(--color-gray-400);
}

/* Actions cell */

.wo-table__actions {
  display: flex;
  gap: var(--spacing-2);
}

.wo-table__action-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Work Orders WhatsApp Confirmation Modal Component */

.wo-whatsapp-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(75, 85, 99, 0.5);
  overflow-y: auto;
  height: 100%;
  width: 100%;
  z-index: var(--z-modal);
}

.wo-whatsapp-modal.hidden {
  display: none;
}

.wo-whatsapp-modal__container {
  position: relative;
  top: 5rem;
  margin: 0 auto;
  padding: var(--spacing-5);
  border: 1px solid var(--color-gray-200);
  width: 24rem;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.wo-whatsapp-modal__content {
  margin-top: var(--spacing-3);
}

/* Header Icon */

.wo-whatsapp-modal__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-whatsapp-modal__icon-wrapper {
  margin: 0 auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: var(--color-success-100);
}

.wo-whatsapp-modal__icon-wrapper i {
  color: var(--color-success-600);
  font-size: var(--font-size-xl);
}

/* Title */

.wo-whatsapp-modal__title {
  font-size: var(--font-size-lg);
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  text-align: center;
  margin-bottom: var(--spacing-2);
}

/* Message */

.wo-whatsapp-modal__message-wrapper {
  margin-top: var(--spacing-2);
  padding: var(--spacing-3) 1.75rem;
}

.wo-whatsapp-modal__message {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-align: center;
}

/* Info Box */

.wo-whatsapp-modal__info-box {
  margin-top: var(--spacing-4);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
}

.wo-whatsapp-modal__info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-1) 0;
  font-size: var(--font-size-sm);
}

.wo-whatsapp-modal__info-label {
  color: var(--color-gray-600);
}

.wo-whatsapp-modal__info-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

/* Window Warning */

.wo-whatsapp-modal__warning {
  margin-top: var(--spacing-4);
  background-color: var(--color-warning-50);
  border: 1px solid var(--color-warning-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
}

.wo-whatsapp-modal__warning.hidden {
  display: none;
}

.wo-whatsapp-modal__warning-content {
  display: flex;
  align-items: flex-start;
}

.wo-whatsapp-modal__warning-icon {
  color: var(--color-warning-600);
  margin-top: 0.125rem;
  margin-right: var(--spacing-2);
}

.wo-whatsapp-modal__warning-text {
  font-size: var(--font-size-sm);
}

.wo-whatsapp-modal__warning-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-warning-900);
}

.wo-whatsapp-modal__warning-message {
  color: var(--color-warning-700);
  margin-top: var(--spacing-1);
}

/* Message Preview */

.wo-whatsapp-modal__preview {
  margin-top: var(--spacing-4);
  background-color: var(--color-success-50);
  border: 1px solid var(--color-success-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3);
}

.wo-whatsapp-modal__preview-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-1);
}

.wo-whatsapp-modal__preview-content {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  white-space: pre-wrap;
  max-height: 8rem;
  overflow-y: auto;
}

/* Buttons */

.wo-whatsapp-modal__buttons {
  padding: var(--spacing-3) var(--spacing-4);
}

.wo-whatsapp-modal__button-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.wo-whatsapp-modal__btn {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base);
  border: none;
}

.wo-whatsapp-modal__btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px currentColor;
}

.wo-whatsapp-modal__btn i {
  margin-right: var(--spacing-2);
}

.wo-whatsapp-modal__btn--send {
  background-color: var(--color-success-600);
  color: var(--color-white);
}

.wo-whatsapp-modal__btn--send:hover {
  background-color: var(--color-success-700);
}

.wo-whatsapp-modal__btn--send:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-success-500);
}

.wo-whatsapp-modal__btn--cancel {
  background-color: var(--color-white);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.wo-whatsapp-modal__btn--cancel:hover {
  background-color: var(--color-gray-50);
}

.wo-whatsapp-modal__btn--cancel:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-gray-500);
}

/* Work Orders Workflow Pipeline Component */

.wo-workflow-pipeline {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.wo-workflow-pipeline__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-4);
}

.wo-workflow-pipeline__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-workflow-pipeline__icon i {
  color: var(--color-primary-600);
}

.wo-workflow-pipeline__title-group {
  margin-left: var(--spacing-3);
}

.wo-workflow-pipeline__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-workflow-pipeline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Main workflow path */

.wo-workflow-pipeline__main-path {
  position: relative;
}

.wo-workflow-pipeline__steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  overflow-x: auto;
  padding-bottom: var(--spacing-4);
}

.wo-workflow-pipeline__step-container {
  position: relative;
  flex-shrink: 0;
}

/* Step styles */

.wo-workflow-pipeline__step {
  display: block;
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 2px solid;
  min-width: 7rem;
  text-decoration: none;
  transition: all var(--transition-base);
}

.wo-workflow-pipeline__step--current {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-500);
}

.wo-workflow-pipeline__step--completed {
  background-color: var(--color-success-100);
  border-color: var(--color-success-500);
}

.wo-workflow-pipeline__step--available {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-400);
  cursor: pointer;
}

.wo-workflow-pipeline__step--available:hover {
  background-color: var(--color-warning-100);
  border-color: var(--color-warning-500);
}

.wo-workflow-pipeline__step--future {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.wo-workflow-pipeline__step-content {
  text-align: center;
  min-width: 0;
}

.wo-workflow-pipeline__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--spacing-2);
}

.wo-workflow-pipeline__step-icon i {
  font-size: var(--font-size-lg);
}

.wo-workflow-pipeline__step-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 6rem;
}

.wo-workflow-pipeline__step-desc {
  font-size: var(--font-size-xs);
  opacity: 0.75;
  margin-top: var(--spacing-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 6rem;
}

/* Connector arrow */

.wo-workflow-pipeline__connector {
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
}

.wo-workflow-pipeline__connector--active {
  color: var(--color-primary-500);
}

.wo-workflow-pipeline__connector--completed {
  color: var(--color-success-500);
}

.wo-workflow-pipeline__connector--inactive {
  color: var(--color-gray-300);
}

.wo-workflow-pipeline__connector i {
  font-size: var(--font-size-sm);
  margin-left: var(--spacing-2);
}

/* Branch split */

.wo-workflow-pipeline__branch {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--spacing-4);
}

.wo-workflow-pipeline__branch-line {
  display: flex;
  align-items: center;
}

.wo-workflow-pipeline__branch-connector {
  width: 1px;
  height: 2rem;
  background-color: var(--color-gray-300);
}

.wo-workflow-pipeline__branch-step {
  margin-top: var(--spacing-2);
  transform: scale(0.9);
}

/* Legend */

.wo-workflow-pipeline__legend {
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-gray-200);
}

.wo-workflow-pipeline__legend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .wo-workflow-pipeline__legend-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wo-workflow-pipeline__legend-item {
  display: flex;
  align-items: center;
}

.wo-workflow-pipeline__legend-box {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-base);
  border: 2px solid;
  margin-right: var(--spacing-2);
}

.wo-workflow-pipeline__legend-box--current {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-500);
}

.wo-workflow-pipeline__legend-box--completed {
  background-color: var(--color-success-100);
  border-color: var(--color-success-500);
}

.wo-workflow-pipeline__legend-box--available {
  background-color: var(--color-warning-50);
  border-color: var(--color-warning-400);
}

.wo-workflow-pipeline__legend-box--future {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-300);
}

.wo-workflow-pipeline__legend-text {
  color: var(--color-gray-700);
}

/* Work Orders Workflow Status Buttons Component */

.wo-workflow-status-buttons {
  /* Container - inherits from parent */
}

/* Current Status Display */

.wo-workflow-status-buttons__current {
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-gray-200);
  background-color: var(--color-gray-50);
}

.wo-workflow-status-buttons__current-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wo-workflow-status-buttons__current-info {
  display: flex;
  align-items: center;
}

.wo-workflow-status-buttons__current-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  margin-right: var(--spacing-2);
}

.wo-workflow-status-buttons__current-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-workflow-status-buttons__workflow-key {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.wo-workflow-status-buttons__current-desc {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

/* Transitions List */

.wo-workflow-status-buttons__transitions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.wo-workflow-status-buttons__edit-header {
  margin-bottom: var(--spacing-3);
}

.wo-workflow-status-buttons__edit-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-2);
}

.wo-workflow-status-buttons__edit-help {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--spacing-3);
}

/* Transition Button */

.wo-workflow-status-buttons__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  text-decoration: none;
}

.wo-workflow-status-buttons__btn-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wo-workflow-status-buttons__btn-text {
  display: flex;
  align-items: center;
}

.wo-workflow-status-buttons__btn-text i {
  margin-right: var(--spacing-2);
  opacity: 0.75;
}

.wo-workflow-status-buttons__btn-icon {
  margin-left: var(--spacing-2);
  opacity: 0.75;
}

/* No Transitions State */

.wo-workflow-status-buttons__empty {
  text-align: center;
  padding: var(--spacing-4) 0;
  color: var(--color-gray-500);
}

.wo-workflow-status-buttons__empty-icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-2);
}

.wo-workflow-status-buttons__empty-text {
  font-size: var(--font-size-sm);
}

.wo-workflow-status-buttons__empty-subtext {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-1);
}

/* Work Orders Workflow Timeline Component */

.wo-timeline {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.wo-timeline__content {
  padding: var(--spacing-6);
}

/* Header */

.wo-timeline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-6);
}

.wo-timeline__header-left {
  display: flex;
  align-items: center;
}

.wo-timeline__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f3e8ff; /* purple-100 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-timeline__icon i {
  color: #9333ea; /* purple-600 */
}

.wo-timeline__title-group {
  margin-left: var(--spacing-3);
}

.wo-timeline__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}

.wo-timeline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* Toggle Button */

.wo-timeline__toggle-btn {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-base);
}

.wo-timeline__toggle-btn:hover {
  color: var(--color-gray-700);
}

.wo-timeline__toggle-btn:focus {
  outline: none;
}

.wo-timeline__toggle-btn i {
  margin-right: var(--spacing-1);
}

/* Timeline List */

.wo-timeline__list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: calc(var(--spacing-8) * -1);
}

.wo-timeline__entry {
  position: relative;
  padding-bottom: var(--spacing-8);
}

/* Connector Line */

.wo-timeline__connector {
  position: absolute;
  top: 1rem;
  left: 1rem;
  margin-left: -1px;
  height: 100%;
  width: 2px;
  background-color: var(--color-gray-200);
}

/* Entry Content */

.wo-timeline__entry-content {
  position: relative;
  display: flex;
  gap: var(--spacing-3);
}

/* Entry Icon */

.wo-timeline__entry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.wo-timeline__entry-icon--status {
  background-color: var(--color-primary-100);
  color: var(--color-primary-600);
}

.wo-timeline__entry-icon--message {
  background-color: var(--color-success-100);
  color: var(--color-success-600);
}

.wo-timeline__entry-icon--system {
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Entry Details */

.wo-timeline__entry-details {
  flex: 1;
  min-width: 0;
}

.wo-timeline__entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wo-timeline__entry-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.wo-timeline__entry-time {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  flex-shrink: 0;
  margin-left: var(--spacing-4);
}

.wo-timeline__entry-desc {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-top: var(--spacing-1);
}

.wo-timeline__entry-meta {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-2);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.wo-timeline__entry-meta i {
  margin-right: var(--spacing-1);
}

/* Entry Expandable Details */

.wo-timeline__entry-expanded {
  margin-top: var(--spacing-3);
  padding: var(--spacing-3);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.wo-timeline__entry-expanded.hidden {
  display: none;
}

.wo-timeline__entry-expanded-text {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.wo-timeline__entry-badge {
  margin-top: var(--spacing-1);
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-danger-100);
  color: var(--color-danger-800);
}

.wo-timeline__entry-badge i {
  margin-right: var(--spacing-1);
}

/* Show More Link */

.wo-timeline__show-more {
  margin-top: var(--spacing-6);
  text-align: center;
}

.wo-timeline__show-more-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-600);
  text-decoration: none;
}

.wo-timeline__show-more-link:hover {
  color: var(--color-primary-500);
}

.wo-timeline__show-more-link i {
  margin-right: var(--spacing-2);
}

/* Empty State */

.wo-timeline__empty {
  text-align: center;
  padding: var(--spacing-8) 0;
}

.wo-timeline__empty-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--spacing-4);
  background-color: var(--color-gray-100);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wo-timeline__empty-icon i {
  color: var(--color-gray-400);
  font-size: var(--font-size-lg);
}

.wo-timeline__empty-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-2);
}

.wo-timeline__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Display, position, visibility */

/* Display Utilities */

.block { display: block; }

.inline-block { display: inline-block; }

.inline { display: inline; }

.hidden { display: none; }

.invisible { visibility: hidden; }

.visible { visibility: visible; }

/* Position */

.static { position: static; }

.fixed { position: fixed; }

.absolute { position: absolute; }

.relative { position: relative; }

.sticky { position: sticky; }

/* Position values */

.inset-0 { inset: 0; }

.inset-x-0 { left: 0; right: 0; }

.inset-y-0 { top: 0; bottom: 0; }

.top-0 { top: 0; }

.right-0 { right: 0; }

.bottom-0 { bottom: 0; }

.left-0 { left: 0; }

.top-4 { top: var(--space-4); }

.right-4 { right: var(--space-4); }

.top-14 { top: 3.5rem; }

.-top-1 { top: calc(var(--space-1) * -1); }

.-right-1 { right: calc(var(--space-1) * -1); }

/* Z-index */

.z-0 { z-index: var(--z-0); }

.z-10 { z-index: var(--z-10); }

.z-20 { z-index: var(--z-20); }

.z-30 { z-index: var(--z-30); }

.z-40 { z-index: var(--z-40); }

.z-50 { z-index: var(--z-50); }

/* Float */

.float-left { float: left; }

.float-right { float: right; }

.float-none { float: none; }

.clear-both { clear: both; }

.clear-left { clear: left; }

.clear-right { clear: right; }

/* Object fit */

.object-contain { -o-object-fit: contain; object-fit: contain; }

.object-cover { -o-object-fit: cover; object-fit: cover; }

.object-fill { -o-object-fit: fill; object-fit: fill; }

.object-none { -o-object-fit: none; object-fit: none; }

.object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; }

/* Object position */

.object-center { -o-object-position: center; object-position: center; }

.object-top { -o-object-position: top; object-position: top; }

.object-bottom { -o-object-position: bottom; object-position: bottom; }

.object-left { -o-object-position: left; object-position: left; }

.object-right { -o-object-position: right; object-position: right; }

/* Screen reader only */

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

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus variants for sr-only */

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Cursor */

.cursor-auto { cursor: auto; }

.cursor-default { cursor: default; }

.cursor-pointer { cursor: pointer; }

.cursor-wait { cursor: wait; }

.cursor-text { cursor: text; }

.cursor-move { cursor: move; }

.cursor-not-allowed { cursor: not-allowed; }

.cursor-grab { cursor: grab; }

.cursor-grabbing { cursor: grabbing; }

/* Pointer events */

.pointer-events-none { pointer-events: none; }

.pointer-events-auto { pointer-events: auto; }

/* User select */

.select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.select-text { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

.select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; }

.select-auto { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }

/* Responsive display utilities */

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

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

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

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

/* Margin and padding */

/* Spacing Utilities - Margin and Padding */

/* Margin - All sides */

.m-0 { margin: 0; }

.m-1 { margin: var(--space-1); }

.m-2 { margin: var(--space-2); }

.m-3 { margin: var(--space-3); }

.m-4 { margin: var(--space-4); }

.m-5 { margin: var(--space-5); }

.m-6 { margin: var(--space-6); }

.m-8 { margin: var(--space-8); }

.m-auto { margin: auto; }

/* Margin - Horizontal (mx) */

.mx-0 { margin-left: 0; margin-right: 0; }

.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }

.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }

.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }

.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }

.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin - Vertical (my) */

.my-0 { margin-top: 0; margin-bottom: 0; }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }

.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }

.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }

.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }

.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

.my-auto { margin-top: auto; margin-bottom: auto; }

/* Margin - Top */

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: var(--space-1); }

.mt-2 { margin-top: var(--space-2); }

.mt-3 { margin-top: var(--space-3); }

.mt-4 { margin-top: var(--space-4); }

.mt-5 { margin-top: var(--space-5); }

.mt-6 { margin-top: var(--space-6); }

.mt-8 { margin-top: var(--space-8); }

.mt-10 { margin-top: var(--space-10); }

.mt-12 { margin-top: var(--space-12); }

.mt-auto { margin-top: auto; }

.-mt-1 { margin-top: calc(var(--space-1) * -1); }

.-mt-2 { margin-top: calc(var(--space-2) * -1); }

/* Margin - Right */

.mr-0 { margin-right: 0; }

.mr-1 { margin-right: var(--space-1); }

.mr-2 { margin-right: var(--space-2); }

.mr-3 { margin-right: var(--space-3); }

.mr-4 { margin-right: var(--space-4); }

.mr-6 { margin-right: var(--space-6); }

.mr-auto { margin-right: auto; }

/* Margin - Bottom */

.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: var(--space-1); }

.mb-2 { margin-bottom: var(--space-2); }

.mb-3 { margin-bottom: var(--space-3); }

.mb-4 { margin-bottom: var(--space-4); }

.mb-5 { margin-bottom: var(--space-5); }

.mb-6 { margin-bottom: var(--space-6); }

.mb-8 { margin-bottom: var(--space-8); }

.mb-10 { margin-bottom: var(--space-10); }

.mb-12 { margin-bottom: var(--space-12); }

.mb-auto { margin-bottom: auto; }

/* Margin - Left */

.ml-0 { margin-left: 0; }

.ml-1 { margin-left: var(--space-1); }

.ml-2 { margin-left: var(--space-2); }

.ml-3 { margin-left: var(--space-3); }

.ml-4 { margin-left: var(--space-4); }

.ml-6 { margin-left: var(--space-6); }

.ml-auto { margin-left: auto; }

/* Padding - All sides */

.p-0 { padding: 0; }

.p-1 { padding: var(--space-1); }

.p-2 { padding: var(--space-2); }

.p-3 { padding: var(--space-3); }

.p-4 { padding: var(--space-4); }

.p-5 { padding: var(--space-5); }

.p-6 { padding: var(--space-6); }

.p-8 { padding: var(--space-8); }

.p-10 { padding: var(--space-10); }

.p-12 { padding: var(--space-12); }

/* Padding - Horizontal (px) */

.px-0 { padding-left: 0; padding-right: 0; }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }

.px-2\.5 { padding-left: var(--space-2-5); padding-right: var(--space-2-5); }

.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }

.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

/* Padding - Vertical (py) */

.py-0 { padding-top: 0; padding-bottom: 0; }

.py-0\.5 { padding-top: var(--space-0-5); padding-bottom: var(--space-0-5); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }

.py-1\.5 { padding-top: var(--space-1-5); padding-bottom: var(--space-1-5); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }

.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }

.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Padding - Top */

.pt-0 { padding-top: 0; }

.pt-1 { padding-top: var(--space-1); }

.pt-2 { padding-top: var(--space-2); }

.pt-3 { padding-top: var(--space-3); }

.pt-4 { padding-top: var(--space-4); }

.pt-6 { padding-top: var(--space-6); }

.pt-8 { padding-top: var(--space-8); }

/* Padding - Right */

.pr-0 { padding-right: 0; }

.pr-1 { padding-right: var(--space-1); }

.pr-2 { padding-right: var(--space-2); }

.pr-3 { padding-right: var(--space-3); }

.pr-4 { padding-right: var(--space-4); }

.pr-6 { padding-right: var(--space-6); }

.pr-8 { padding-right: var(--space-8); }

/* Padding - Bottom */

.pb-0 { padding-bottom: 0; }

.pb-1 { padding-bottom: var(--space-1); }

.pb-2 { padding-bottom: var(--space-2); }

.pb-3 { padding-bottom: var(--space-3); }

.pb-4 { padding-bottom: var(--space-4); }

.pb-6 { padding-bottom: var(--space-6); }

.pb-8 { padding-bottom: var(--space-8); }

/* Padding - Left */

.pl-0 { padding-left: 0; }

.pl-1 { padding-left: var(--space-1); }

.pl-2 { padding-left: var(--space-2); }

.pl-3 { padding-left: var(--space-3); }

.pl-4 { padding-left: var(--space-4); }

.pl-6 { padding-left: var(--space-6); }

.pl-8 { padding-left: var(--space-8); }

/* Space between children (space-x, space-y) */

.space-x-1 > * + * { margin-left: var(--space-1); }

.space-x-2 > * + * { margin-left: var(--space-2); }

.space-x-3 > * + * { margin-left: var(--space-3); }

.space-x-4 > * + * { margin-left: var(--space-4); }

.space-x-6 > * + * { margin-left: var(--space-6); }

.space-x-8 > * + * { margin-left: var(--space-8); }

.space-y-1 > * + * { margin-top: var(--space-1); }

.space-y-2 > * + * { margin-top: var(--space-2); }

.space-y-3 > * + * { margin-top: var(--space-3); }

.space-y-4 > * + * { margin-top: var(--space-4); }

.space-y-6 > * + * { margin-top: var(--space-6); }

.space-y-8 > * + * { margin-top: var(--space-8); }

/* Responsive spacing */

@media (min-width: 640px) {
  .sm\:p-4 { padding: var(--space-4); }
  .sm\:p-6 { padding: var(--space-6); }
  .sm\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
  .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .sm\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .sm\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .sm\:mt-0 { margin-top: 0; }
  .sm\:ml-4 { margin-left: var(--space-4); }
}

@media (min-width: 768px) {
  .md\:p-6 { padding: var(--space-6); }
  .md\:p-8 { padding: var(--space-8); }
  .md\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .md\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  .md\:mt-0 { margin-top: 0; }
  .md\:ml-6 { margin-left: var(--space-6); }
}

@media (min-width: 1024px) {
  .lg\:p-8 { padding: var(--space-8); }
  .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* Text alignment, decoration, wrapping */

/* Text Utilities */

/* Text alignment */

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

/* Text decoration */

.underline { text-decoration: underline; }

.line-through { text-decoration: line-through; }

.no-underline { text-decoration: none; }

/* Text transform */

.uppercase { text-transform: uppercase; }

.lowercase { text-transform: lowercase; }

.capitalize { text-transform: capitalize; }

.normal-case { text-transform: none; }

/* Whitespace */

.whitespace-normal { white-space: normal; }

.whitespace-nowrap { white-space: nowrap; }

.whitespace-pre { white-space: pre; }

.whitespace-pre-line { white-space: pre-line; }

.whitespace-pre-wrap { white-space: pre-wrap; }

/* Word break */

.break-normal { word-break: normal; overflow-wrap: normal; }

.break-words { overflow-wrap: break-word; }

.break-all { word-break: break-all; }

/* Text overflow */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis { text-overflow: ellipsis; }

.text-clip { text-overflow: clip; }

/* Line clamp */

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Vertical alignment */

.align-baseline { vertical-align: baseline; }

.align-top { vertical-align: top; }

.align-middle { vertical-align: middle; }

.align-bottom { vertical-align: bottom; }

.align-text-top { vertical-align: text-top; }

.align-text-bottom { vertical-align: text-bottom; }

/* Line height */

.leading-none { line-height: 1; }

.leading-tight { line-height: 1.25; }

.leading-snug { line-height: 1.375; }

.leading-normal { line-height: 1.5; }

.leading-relaxed { line-height: 1.625; }

.leading-loose { line-height: 2; }

/* Letter spacing */

.tracking-tighter { letter-spacing: -0.05em; }

.tracking-tight { letter-spacing: -0.025em; }

.tracking-normal { letter-spacing: 0; }

.tracking-wide { letter-spacing: 0.025em; }

.tracking-wider { letter-spacing: 0.05em; }

.tracking-widest { letter-spacing: 0.1em; }

/* Font style */

.italic { font-style: italic; }

.not-italic { font-style: normal; }

/* List style */

.list-none { list-style-type: none; }

.list-disc { list-style-type: disc; }

.list-decimal { list-style-type: decimal; }

.list-inside { list-style-position: inside; }

.list-outside { list-style-position: outside; }

/* Responsive text alignment */

@media (min-width: 640px) {
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
}

@media (min-width: 768px) {
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
}

@media (min-width: 1024px) {
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
}

/* Background colors */

/* Background Utilities */

/* Background colors */

.bg-white { background-color: var(--color-white); }

.bg-black { background-color: var(--color-black); }

.bg-transparent { background-color: transparent; }

/* Gray backgrounds */

.bg-gray-50 { background-color: var(--color-gray-50); }

.bg-gray-100 { background-color: var(--color-gray-100); }

.bg-gray-200 { background-color: var(--color-gray-200); }

.bg-gray-300 { background-color: var(--color-gray-300); }

.bg-gray-400 { background-color: var(--color-gray-400); }

.bg-gray-500 { background-color: var(--color-gray-500); }

.bg-gray-600 { background-color: var(--color-gray-600); }

.bg-gray-700 { background-color: var(--color-gray-700); }

.bg-gray-800 { background-color: var(--color-gray-800); }

.bg-gray-900 { background-color: var(--color-gray-900); }

/* Primary backgrounds */

.bg-primary-50 { background-color: var(--color-primary-50); }

.bg-primary-100 { background-color: var(--color-primary-100); }

.bg-primary-200 { background-color: var(--color-primary-200); }

.bg-primary-500 { background-color: var(--color-primary-500); }

.bg-primary-600 { background-color: var(--color-primary-600); }

.bg-primary-700 { background-color: var(--color-primary-700); }

/* Alias for Tailwind blue */

.bg-blue-50 { background-color: var(--color-primary-50); }

.bg-blue-100 { background-color: var(--color-primary-100); }

.bg-blue-500 { background-color: var(--color-primary-500); }

.bg-blue-600 { background-color: var(--color-primary-600); }

.bg-blue-700 { background-color: var(--color-primary-700); }

/* Success backgrounds */

.bg-success-50 { background-color: var(--color-success-50); }

.bg-success-100 { background-color: var(--color-success-100); }

.bg-success-500 { background-color: var(--color-success-500); }

.bg-success-600 { background-color: var(--color-success-600); }

.bg-success-700 { background-color: var(--color-success-700); }

/* Alias for Tailwind green */

.bg-green-50 { background-color: var(--color-success-50); }

.bg-green-100 { background-color: var(--color-success-100); }

.bg-green-500 { background-color: var(--color-success-500); }

.bg-green-600 { background-color: var(--color-success-600); }

.bg-green-700 { background-color: var(--color-success-700); }

/* Warning backgrounds */

.bg-warning-50 { background-color: var(--color-warning-50); }

.bg-warning-100 { background-color: var(--color-warning-100); }

.bg-warning-500 { background-color: var(--color-warning-500); }

.bg-warning-600 { background-color: var(--color-warning-600); }

/* Alias for Tailwind orange/yellow */

.bg-orange-50 { background-color: var(--color-warning-50); }

.bg-orange-100 { background-color: var(--color-warning-100); }

.bg-orange-500 { background-color: var(--color-warning-500); }

.bg-orange-600 { background-color: var(--color-warning-600); }

.bg-yellow-50 { background-color: #fffbeb; }

.bg-yellow-100 { background-color: #fef3c7; }

.bg-yellow-500 { background-color: #eab308; }

/* Danger backgrounds */

.bg-danger-50 { background-color: var(--color-danger-50); }

.bg-danger-100 { background-color: var(--color-danger-100); }

.bg-danger-500 { background-color: var(--color-danger-500); }

.bg-danger-600 { background-color: var(--color-danger-600); }

/* Alias for Tailwind red */

.bg-red-50 { background-color: var(--color-danger-50); }

.bg-red-100 { background-color: var(--color-danger-100); }

.bg-red-500 { background-color: var(--color-danger-500); }

.bg-red-600 { background-color: var(--color-danger-600); }

/* Info backgrounds */

.bg-info-50 { background-color: var(--color-info-50); }

.bg-info-100 { background-color: var(--color-info-100); }

.bg-info-500 { background-color: var(--color-info-500); }

.bg-info-600 { background-color: var(--color-info-600); }

/* Alias for Tailwind cyan/sky */

.bg-cyan-50 { background-color: var(--color-info-50); }

.bg-cyan-100 { background-color: var(--color-info-100); }

.bg-sky-50 { background-color: var(--color-info-50); }

.bg-sky-100 { background-color: var(--color-info-100); }

/* Purple backgrounds */

.bg-purple-50 { background-color: #faf5ff; }

.bg-purple-100 { background-color: #f3e8ff; }

.bg-purple-500 { background-color: #a855f7; }

.bg-purple-600 { background-color: #9333ea; }

/* Indigo backgrounds */

.bg-indigo-50 { background-color: #eef2ff; }

.bg-indigo-100 { background-color: #e0e7ff; }

.bg-indigo-500 { background-color: #6366f1; }

.bg-indigo-600 { background-color: #4f46e5; }

/* Background opacity */

.bg-opacity-0 { --bg-opacity: 0; }

.bg-opacity-5 { --bg-opacity: 0.05; }

.bg-opacity-10 { --bg-opacity: 0.1; }

.bg-opacity-20 { --bg-opacity: 0.2; }

.bg-opacity-25 { --bg-opacity: 0.25; }

.bg-opacity-50 { --bg-opacity: 0.5; }

.bg-opacity-75 { --bg-opacity: 0.75; }

.bg-opacity-100 { --bg-opacity: 1; }

/* Hover states */

.hover\:bg-gray-50:hover { background-color: var(--color-gray-50); }

.hover\:bg-gray-100:hover { background-color: var(--color-gray-100); }

.hover\:bg-gray-200:hover { background-color: var(--color-gray-200); }

.hover\:bg-gray-300:hover { background-color: var(--color-gray-300); }

.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }

.hover\:bg-blue-700:hover { background-color: var(--color-primary-700); }

.hover\:bg-success-700:hover { background-color: var(--color-success-700); }

.hover\:bg-green-700:hover { background-color: var(--color-success-700); }

.hover\:bg-danger-700:hover { background-color: var(--color-danger-700); }

.hover\:bg-red-700:hover { background-color: var(--color-danger-700); }

/* Borders and border-radius */

/* Border Utilities */

/* Border width */

.border-0 { border-width: 0; }

.border { border-width: 1px; }

.border-2 { border-width: 2px; }

.border-4 { border-width: 4px; }

.border-8 { border-width: 8px; }

.border-t-0 { border-top-width: 0; }

.border-t { border-top-width: 1px; }

.border-t-2 { border-top-width: 2px; }

.border-t-4 { border-top-width: 4px; }

.border-r-0 { border-right-width: 0; }

.border-r { border-right-width: 1px; }

.border-r-2 { border-right-width: 2px; }

.border-r-4 { border-right-width: 4px; }

.border-b-0 { border-bottom-width: 0; }

.border-b { border-bottom-width: 1px; }

.border-b-2 { border-bottom-width: 2px; }

.border-b-4 { border-bottom-width: 4px; }

.border-l-0 { border-left-width: 0; }

.border-l { border-left-width: 1px; }

.border-l-2 { border-left-width: 2px; }

.border-l-4 { border-left-width: 4px; }

/* Border style */

.border-solid { border-style: solid; }

.border-dashed { border-style: dashed; }

.border-dotted { border-style: dotted; }

.border-double { border-style: double; }

.border-none { border-style: none; }

/* Border colors */

.border-transparent { border-color: transparent; }

.border-current { border-color: currentColor; }

.border-white { border-color: var(--color-white); }

.border-black { border-color: var(--color-black); }

.border-gray-100 { border-color: var(--color-gray-100); }

.border-gray-200 { border-color: var(--color-gray-200); }

.border-gray-300 { border-color: var(--color-gray-300); }

.border-gray-400 { border-color: var(--color-gray-400); }

.border-gray-500 { border-color: var(--color-gray-500); }

.border-gray-600 { border-color: var(--color-gray-600); }

.border-primary { border-color: var(--color-primary); }

.border-primary-200 { border-color: var(--color-primary-200); }

.border-primary-500 { border-color: var(--color-primary-500); }

.border-primary-600 { border-color: var(--color-primary-600); }

.border-blue-200 { border-color: var(--color-primary-200); }

.border-blue-500 { border-color: var(--color-primary-500); }

.border-blue-600 { border-color: var(--color-primary-600); }

.border-success { border-color: var(--color-success); }

.border-success-200 { border-color: #bbf7d0; }

.border-success-500 { border-color: var(--color-success-500); }

.border-success-600 { border-color: var(--color-success-600); }

.border-green-200 { border-color: #bbf7d0; }

.border-green-500 { border-color: var(--color-success-500); }

.border-green-600 { border-color: var(--color-success-600); }

.border-warning { border-color: var(--color-warning); }

.border-warning-200 { border-color: #fed7aa; }

.border-warning-500 { border-color: var(--color-warning-500); }

.border-orange-200 { border-color: #fed7aa; }

.border-orange-500 { border-color: var(--color-warning-500); }

.border-yellow-200 { border-color: #fde68a; }

.border-yellow-500 { border-color: #eab308; }

.border-danger { border-color: var(--color-danger); }

.border-danger-200 { border-color: #fecaca; }

.border-danger-500 { border-color: var(--color-danger-500); }

.border-danger-600 { border-color: var(--color-danger-600); }

.border-red-200 { border-color: #fecaca; }

.border-red-500 { border-color: var(--color-danger-500); }

.border-red-600 { border-color: var(--color-danger-600); }

.border-info { border-color: var(--color-info); }

.border-info-200 { border-color: #bae6fd; }

.border-cyan-200 { border-color: #a5f3fc; }

.border-sky-200 { border-color: #bae6fd; }

/* Border radius */

.rounded-none { border-radius: 0; }

.rounded-sm { border-radius: var(--radius-sm); }

.rounded { border-radius: var(--radius-default); }

.rounded-md { border-radius: var(--radius-md); }

.rounded-lg { border-radius: var(--radius-lg); }

.rounded-xl { border-radius: var(--radius-xl); }

.rounded-2xl { border-radius: var(--radius-2xl); }

.rounded-3xl { border-radius: var(--radius-3xl); }

.rounded-full { border-radius: var(--radius-full); }

.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }

.rounded-t-md { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }

.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }

.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

.rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.rounded-b-md { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

.rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }

.rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }

/* Divide (border between children) */

.divide-x > * + * { border-left-width: 1px; }

.divide-y > * + * { border-top-width: 1px; }

.divide-gray-200 > * + * { border-color: var(--color-gray-200); }

.divide-gray-300 > * + * { border-color: var(--color-gray-300); }

/* Ring (focus ring) */

.ring-0 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); }

.ring-1 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); }

.ring-2 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); }

.ring-4 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, currentColor); }

.ring-primary-500 { --tw-ring-color: var(--color-primary-500); }

.ring-blue-500 { --tw-ring-color: var(--color-primary-500); }

.ring-offset-2 { --tw-ring-offset-width: 2px; }

/* Focus states */

.focus\:border-primary-500:focus { border-color: var(--color-primary-500); }

.focus\:border-blue-500:focus { border-color: var(--color-primary-500); }

.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, var(--color-primary-500)); }

.focus\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500); }

.focus\:ring-blue-500:focus { --tw-ring-color: var(--color-primary-500); }

.focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; }

/* Hover border colors */

.hover\:border-gray-300:hover { border-color: var(--color-gray-300); }

.hover\:border-gray-400:hover { border-color: var(--color-gray-400); }

.hover\:border-primary-500:hover { border-color: var(--color-primary-500); }

/* Shadows, opacity, transitions, transforms */

/* Effects Utilities - Shadows, Opacity, Transitions */

/* Box Shadow */

.shadow-none { box-shadow: var(--shadow-none); }

.shadow-sm { box-shadow: var(--shadow-sm); }

.shadow { box-shadow: var(--shadow-default); }

.shadow-md { box-shadow: var(--shadow-md); }

.shadow-lg { box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: var(--shadow-xl); }

.shadow-2xl { box-shadow: var(--shadow-2xl); }

.shadow-inner { box-shadow: var(--shadow-inner); }

/* Hover shadows */

.hover\:shadow:hover { box-shadow: var(--shadow-default); }

.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }

.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }

/* Opacity */

.opacity-0 { opacity: 0; }

.opacity-5 { opacity: 0.05; }

.opacity-10 { opacity: 0.1; }

.opacity-20 { opacity: 0.2; }

.opacity-25 { opacity: 0.25; }

.opacity-30 { opacity: 0.3; }

.opacity-40 { opacity: 0.4; }

.opacity-50 { opacity: 0.5; }

.opacity-60 { opacity: 0.6; }

.opacity-70 { opacity: 0.7; }

.opacity-75 { opacity: 0.75; }

.opacity-80 { opacity: 0.8; }

.opacity-90 { opacity: 0.9; }

.opacity-95 { opacity: 0.95; }

.opacity-100 { opacity: 1; }

/* Hover opacity */

.hover\:opacity-75:hover { opacity: 0.75; }

.hover\:opacity-100:hover { opacity: 1; }

/* Transitions */

.transition-none { transition-property: none; }

.transition-all { transition-property: all; transition-duration: var(--transition-base); }

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: var(--transition-base);
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: var(--transition-base);
}

.transition-opacity { transition-property: opacity; transition-duration: var(--transition-base); }

.transition-shadow { transition-property: box-shadow; transition-duration: var(--transition-base); }

.transition-transform { transition-property: transform; transition-duration: var(--transition-base); }

/* Duration */

.duration-75 { transition-duration: 75ms; }

.duration-100 { transition-duration: 100ms; }

.duration-150 { transition-duration: 150ms; }

.duration-200 { transition-duration: 200ms; }

.duration-300 { transition-duration: 300ms; }

.duration-500 { transition-duration: 500ms; }

.duration-700 { transition-duration: 700ms; }

.duration-1000 { transition-duration: 1000ms; }

/* Timing function */

.ease-linear { transition-timing-function: linear; }

.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }

.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Delay */

.delay-75 { transition-delay: 75ms; }

.delay-100 { transition-delay: 100ms; }

.delay-150 { transition-delay: 150ms; }

.delay-200 { transition-delay: 200ms; }

.delay-300 { transition-delay: 300ms; }

.delay-500 { transition-delay: 500ms; }

/* Transform */

.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }

.transform-none { transform: none; }

/* Scale */

.scale-0 { transform: scale(0); }

.scale-50 { transform: scale(0.5); }

.scale-75 { transform: scale(0.75); }

.scale-90 { transform: scale(0.9); }

.scale-95 { transform: scale(0.95); }

.scale-100 { transform: scale(1); }

.scale-105 { transform: scale(1.05); }

.scale-110 { transform: scale(1.1); }

.scale-125 { transform: scale(1.25); }

.scale-150 { transform: scale(1.5); }

.hover\:scale-105:hover { transform: scale(1.05); }

.hover\:scale-110:hover { transform: scale(1.1); }

/* Rotate */

.rotate-0 { transform: rotate(0deg); }

.rotate-1 { transform: rotate(1deg); }

.rotate-2 { transform: rotate(2deg); }

.rotate-3 { transform: rotate(3deg); }

.rotate-6 { transform: rotate(6deg); }

.rotate-12 { transform: rotate(12deg); }

.rotate-45 { transform: rotate(45deg); }

.rotate-90 { transform: rotate(90deg); }

.rotate-180 { transform: rotate(180deg); }

.-rotate-1 { transform: rotate(-1deg); }

.-rotate-2 { transform: rotate(-2deg); }

.-rotate-3 { transform: rotate(-3deg); }

.-rotate-6 { transform: rotate(-6deg); }

.-rotate-12 { transform: rotate(-12deg); }

.-rotate-45 { transform: rotate(-45deg); }

.-rotate-90 { transform: rotate(-90deg); }

.-rotate-180 { transform: rotate(-180deg); }

/* Translate */

.translate-x-0 { transform: translateX(0); }

.translate-x-1 { transform: translateX(var(--space-1)); }

.translate-x-2 { transform: translateX(var(--space-2)); }

.translate-x-4 { transform: translateX(var(--space-4)); }

.translate-x-full { transform: translateX(100%); }

.-translate-x-1 { transform: translateX(calc(var(--space-1) * -1)); }

.-translate-x-2 { transform: translateX(calc(var(--space-2) * -1)); }

.-translate-x-4 { transform: translateX(calc(var(--space-4) * -1)); }

.-translate-x-full { transform: translateX(-100%); }

.translate-y-0 { transform: translateY(0); }

.translate-y-1 { transform: translateY(var(--space-1)); }

.translate-y-2 { transform: translateY(var(--space-2)); }

.translate-y-4 { transform: translateY(var(--space-4)); }

.-translate-y-1 { transform: translateY(calc(var(--space-1) * -1)); }

.-translate-y-2 { transform: translateY(calc(var(--space-2) * -1)); }

.-translate-y-4 { transform: translateY(calc(var(--space-4) * -1)); }

.hover\:-translate-y-1:hover { transform: translateY(calc(var(--space-1) * -1)); }

.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }

/* Transform origin */

.origin-center { transform-origin: center; }

.origin-top { transform-origin: top; }

.origin-top-right { transform-origin: top right; }

.origin-right { transform-origin: right; }

.origin-bottom-right { transform-origin: bottom right; }

.origin-bottom { transform-origin: bottom; }

.origin-bottom-left { transform-origin: bottom left; }

.origin-left { transform-origin: left; }

.origin-top-left { transform-origin: top left; }

/* Animations */

.animate-none { animation: none; }

.animate-spin { animation: spin 1s linear infinite; }

.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.animate-bounce { animation: bounce 1s infinite; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Filter */

.blur-none { filter: blur(0); }

.blur-sm { filter: blur(4px); }

.blur { filter: blur(8px); }

.blur-md { filter: blur(12px); }

.blur-lg { filter: blur(16px); }

.blur-xl { filter: blur(24px); }

.blur-2xl { filter: blur(40px); }

.blur-3xl { filter: blur(64px); }

/* Backdrop blur */

.backdrop-blur-none { backdrop-filter: blur(0); }

.backdrop-blur-sm { backdrop-filter: blur(4px); }

.backdrop-blur { backdrop-filter: blur(8px); }

.backdrop-blur-md { backdrop-filter: blur(12px); }

.backdrop-blur-lg { backdrop-filter: blur(16px); }

/* Disabled state */

.disabled\:opacity-50:disabled { opacity: 0.5; }

.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Form styles */

/* Form Utilities and Base Styles */

/* Form elements base */

input,
select,
textarea {
  border: 1px solid var(--color-border-input);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* Form field wrapper */

.field {
  margin-bottom: var(--space-4);
}

/* Labels */

.label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

/* Text inputs */

.input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background-color: var(--color-white);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.input::-moz-placeholder {
  color: var(--color-gray-400);
}

.input::placeholder {
  color: var(--color-gray-400);
}

.input:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Input sizes */

.input--sm {
  padding: var(--space-1-5) var(--space-2);
  font-size: var(--text-sm);
}

.input--lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
}

/* Textarea */

.textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}

.textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* Select */

.select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-2) center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.select:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
}

/* Checkbox and Radio base */

.checkbox,
.radio {
  width: var(--space-4);
  height: var(--space-4);
  color: var(--color-primary);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.radio {
  border-radius: var(--radius-full);
}

.checkbox:focus,
.radio:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.checkbox:checked,
.radio:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Form error states */

.input--error,
.select--error,
.textarea--error {
  border-color: var(--color-danger);
}

.input--error:focus,
.select--error:focus,
.textarea--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}

.field-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Form success states */

.input--success {
  border-color: var(--color-success);
}

.input--success:focus {
  box-shadow: 0 0 0 1px var(--color-success);
}

/* Help text */

.help-text {
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}

/* Input groups */

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input {
  border-radius: 0;
}

.input-group .input:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.input-group .input:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.input-group__addon {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-border-input);
  color: var(--color-gray-500);
  white-space: nowrap;
}

.input-group__addon:first-child {
  border-right: none;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.input-group__addon:last-child {
  border-left: none;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Form row for inline forms */

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.form-row > .field {
  flex: 1;
  min-width: 200px;
}

/* ==========================================================================
   Input with Icon
   Usage:
   <div class="input-icon-wrapper">
     <div class="input-icon input-icon--left"><i class="fas fa-user"></i></div>
     <input type="text" class="input input--with-icon-left">
   </div>
   ========================================================================== */

.input-icon-wrapper {
  position: relative;
}

/* Input with left icon */

.input--with-icon-left {
  padding-left: var(--space-10);
}

/* Input with left icon (large) - for barcode scanners etc */

.input--with-icon-left-lg {
  padding-left: var(--space-12);
}

/* Input with right icon */

.input--with-icon-right {
  padding-right: var(--space-10);
}

/* Icon container base */

.input-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--color-gray-400);
}

/* Left positioned icon */

.input-icon--left {
  left: 0;
  padding-left: var(--space-3);
}

/* Left positioned icon (large) */

.input-icon--left-lg {
  left: 0;
  padding-left: var(--space-4);
}

/* Right positioned icon */

.input-icon--right {
  right: 0;
  padding-right: var(--space-3);
}

/* Focus visible for accessibility */

.focus\:outline-none:focus {
  outline: none;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.focus\:ring-offset-2:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-light);
}

/* Tailwind-compatible utilities (for views that still use Tailwind classes) */

/* ==========================================================================
   Tailwind CSS Compatibility Layer
   Provides Tailwind-style utility classes using our design tokens
   ========================================================================== */

/* ==========================================================================
   Background Colors
   ========================================================================== */

.bg-white { background-color: #ffffff; }

.bg-black { background-color: #000000; }

.bg-transparent { background-color: transparent; }

/* Gray */

.bg-gray-50 { background-color: #f9fafb; }

.bg-gray-100 { background-color: #f3f4f6; }

.bg-gray-200 { background-color: #e5e7eb; }

.bg-gray-300 { background-color: #d1d5db; }

.bg-gray-400 { background-color: #9ca3af; }

.bg-gray-500 { background-color: #6b7280; }

.bg-gray-600 { background-color: #4b5563; }

.bg-gray-700 { background-color: #374151; }

.bg-gray-800 { background-color: #1f2937; }

.bg-gray-900 { background-color: #111827; }

/* Blue */

.bg-blue-50 { background-color: #eff6ff; }

.bg-blue-100 { background-color: #dbeafe; }

.bg-blue-200 { background-color: #bfdbfe; }

.bg-blue-300 { background-color: #93c5fd; }

.bg-blue-400 { background-color: #60a5fa; }

.bg-blue-500 { background-color: #3b82f6; }

.bg-blue-600 { background-color: #2563eb; }

.bg-blue-700 { background-color: #1d4ed8; }

.bg-blue-800 { background-color: #1e40af; }

.bg-blue-900 { background-color: #1e3a8a; }

/* Green */

.bg-green-50 { background-color: #f0fdf4; }

.bg-green-100 { background-color: #dcfce7; }

.bg-green-200 { background-color: #bbf7d0; }

.bg-green-300 { background-color: #86efac; }

.bg-green-400 { background-color: #4ade80; }

.bg-green-500 { background-color: #22c55e; }

.bg-green-600 { background-color: #16a34a; }

.bg-green-700 { background-color: #15803d; }

.bg-green-800 { background-color: #166534; }

.bg-green-900 { background-color: #14532d; }

/* Red */

.bg-red-50 { background-color: #fef2f2; }

.bg-red-100 { background-color: #fee2e2; }

.bg-red-200 { background-color: #fecaca; }

.bg-red-300 { background-color: #fca5a5; }

.bg-red-400 { background-color: #f87171; }

.bg-red-500 { background-color: #ef4444; }

.bg-red-600 { background-color: #dc2626; }

.bg-red-700 { background-color: #b91c1c; }

.bg-red-800 { background-color: #991b1b; }

.bg-red-900 { background-color: #7f1d1d; }

/* Yellow */

.bg-yellow-50 { background-color: #fefce8; }

.bg-yellow-100 { background-color: #fef9c3; }

.bg-yellow-200 { background-color: #fef08a; }

.bg-yellow-300 { background-color: #fde047; }

.bg-yellow-400 { background-color: #facc15; }

.bg-yellow-500 { background-color: #eab308; }

.bg-yellow-600 { background-color: #ca8a04; }

.bg-yellow-700 { background-color: #a16207; }

.bg-yellow-800 { background-color: #854d0e; }

.bg-yellow-900 { background-color: #713f12; }

/* Orange */

.bg-orange-50 { background-color: #fff7ed; }

.bg-orange-100 { background-color: #ffedd5; }

.bg-orange-200 { background-color: #fed7aa; }

.bg-orange-300 { background-color: #fdba74; }

.bg-orange-400 { background-color: #fb923c; }

.bg-orange-500 { background-color: #f97316; }

.bg-orange-600 { background-color: #ea580c; }

.bg-orange-700 { background-color: #c2410c; }

.bg-orange-800 { background-color: #9a3412; }

.bg-orange-900 { background-color: #7c2d12; }

/* Purple */

.bg-purple-50 { background-color: #faf5ff; }

.bg-purple-100 { background-color: #f3e8ff; }

.bg-purple-200 { background-color: #e9d5ff; }

.bg-purple-300 { background-color: #d8b4fe; }

.bg-purple-400 { background-color: #c084fc; }

.bg-purple-500 { background-color: #a855f7; }

.bg-purple-600 { background-color: #9333ea; }

.bg-purple-700 { background-color: #7e22ce; }

.bg-purple-800 { background-color: #6b21a8; }

.bg-purple-900 { background-color: #581c87; }

/* Indigo */

.bg-indigo-50 { background-color: #eef2ff; }

.bg-indigo-100 { background-color: #e0e7ff; }

.bg-indigo-500 { background-color: #6366f1; }

.bg-indigo-600 { background-color: #4f46e5; }

/* ==========================================================================
   Text Colors
   ========================================================================== */

.text-white { color: #ffffff; }

.text-black { color: #000000; }

.text-transparent { color: transparent; }

/* Gray */

.text-gray-50 { color: #f9fafb; }

.text-gray-100 { color: #f3f4f6; }

.text-gray-200 { color: #e5e7eb; }

.text-gray-300 { color: #d1d5db; }

.text-gray-400 { color: #9ca3af; }

.text-gray-500 { color: #6b7280; }

.text-gray-600 { color: #4b5563; }

.text-gray-700 { color: #374151; }

.text-gray-800 { color: #1f2937; }

.text-gray-900 { color: #111827; }

/* Blue */

.text-blue-50 { color: #eff6ff; }

.text-blue-100 { color: #dbeafe; }

.text-blue-200 { color: #bfdbfe; }

.text-blue-300 { color: #93c5fd; }

.text-blue-400 { color: #60a5fa; }

.text-blue-500 { color: #3b82f6; }

.text-blue-600 { color: #2563eb; }

.text-blue-700 { color: #1d4ed8; }

.text-blue-800 { color: #1e40af; }

.text-blue-900 { color: #1e3a8a; }

/* Green */

.text-green-50 { color: #f0fdf4; }

.text-green-100 { color: #dcfce7; }

.text-green-200 { color: #bbf7d0; }

.text-green-400 { color: #4ade80; }

.text-green-500 { color: #22c55e; }

.text-green-600 { color: #16a34a; }

.text-green-700 { color: #15803d; }

.text-green-800 { color: #166534; }

/* Red */

.text-red-50 { color: #fef2f2; }

.text-red-400 { color: #f87171; }

.text-red-500 { color: #ef4444; }

.text-red-600 { color: #dc2626; }

.text-red-700 { color: #b91c1c; }

.text-red-800 { color: #991b1b; }

/* Yellow */

.text-yellow-400 { color: #facc15; }

.text-yellow-500 { color: #eab308; }

.text-yellow-600 { color: #ca8a04; }

.text-yellow-700 { color: #a16207; }

.text-yellow-800 { color: #854d0e; }

/* Orange */

.text-orange-500 { color: #f97316; }

.text-orange-600 { color: #ea580c; }

.text-orange-800 { color: #9a3412; }

/* Purple */

.text-purple-600 { color: #9333ea; }

.text-purple-800 { color: #6b21a8; }

/* Indigo */

.text-indigo-600 { color: #4f46e5; }

/* ==========================================================================
   Border Colors
   ========================================================================== */

.border-transparent { border-color: transparent; }

.border-white { border-color: #ffffff; }

.border-black { border-color: #000000; }

/* Gray */

.border-gray-100 { border-color: #f3f4f6; }

.border-gray-200 { border-color: #e5e7eb; }

.border-gray-300 { border-color: #d1d5db; }

.border-gray-400 { border-color: #9ca3af; }

.border-gray-500 { border-color: #6b7280; }

/* Blue */

.border-blue-200 { border-color: #bfdbfe; }

.border-blue-300 { border-color: #93c5fd; }

.border-blue-400 { border-color: #60a5fa; }

.border-blue-500 { border-color: #3b82f6; }

.border-blue-600 { border-color: #2563eb; }

/* Green */

.border-green-200 { border-color: #bbf7d0; }

.border-green-400 { border-color: #4ade80; }

.border-green-500 { border-color: #22c55e; }

.border-green-600 { border-color: #16a34a; }

/* Red */

.border-red-200 { border-color: #fecaca; }

.border-red-400 { border-color: #f87171; }

.border-red-500 { border-color: #ef4444; }

.border-red-600 { border-color: #dc2626; }

/* Yellow */

.border-yellow-200 { border-color: #fef08a; }

.border-yellow-400 { border-color: #facc15; }

.border-yellow-500 { border-color: #eab308; }

/* Orange */

.border-orange-200 { border-color: #fed7aa; }

.border-orange-500 { border-color: #f97316; }

/* ==========================================================================
   Border Width
   ========================================================================== */

.border { border-width: 1px; }

.border-0 { border-width: 0; }

.border-2 { border-width: 2px; }

.border-4 { border-width: 4px; }

.border-8 { border-width: 8px; }

.border-t { border-top-width: 1px; }

.border-t-0 { border-top-width: 0; }

.border-t-2 { border-top-width: 2px; }

.border-t-4 { border-top-width: 4px; }

.border-r { border-right-width: 1px; }

.border-r-0 { border-right-width: 0; }

.border-r-2 { border-right-width: 2px; }

.border-r-4 { border-right-width: 4px; }

.border-b { border-bottom-width: 1px; }

.border-b-0 { border-bottom-width: 0; }

.border-b-2 { border-bottom-width: 2px; }

.border-b-4 { border-bottom-width: 4px; }

.border-l { border-left-width: 1px; }

.border-l-0 { border-left-width: 0; }

.border-l-2 { border-left-width: 2px; }

.border-l-4 { border-left-width: 4px; }

/* Left border colors */

.border-l-green-600 { border-left-color: #16a34a; }

.border-l-red-600 { border-left-color: #dc2626; }

.border-l-blue-600 { border-left-color: #2563eb; }

.border-l-yellow-600 { border-left-color: #ca8a04; }

.border-l-blue-400 { border-left-color: #60a5fa; }

.border-l-red-400 { border-left-color: #f87171; }

.border-l-yellow-400 { border-left-color: #facc15; }

/* ==========================================================================
   Border Radius
   ========================================================================== */

.rounded-none { border-radius: 0; }

.rounded-sm { border-radius: 0.125rem; }

.rounded { border-radius: 0.25rem; }

.rounded-md { border-radius: 0.375rem; }

.rounded-lg { border-radius: 0.5rem; }

.rounded-xl { border-radius: 0.75rem; }

.rounded-2xl { border-radius: 1rem; }

.rounded-3xl { border-radius: 1.5rem; }

.rounded-full { border-radius: 9999px; }

.rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }

.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }

.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }

.rounded-b { border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }

.rounded-b-md { border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }

.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }

.rounded-l { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }

.rounded-l-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }

.rounded-r { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }

.rounded-r-md { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }

/* ==========================================================================
   Spacing (Padding & Margin)
   ========================================================================== */

/* Padding */

.p-0 { padding: 0; }

.p-0\.5 { padding: 0.125rem; }

.p-1 { padding: 0.25rem; }

.p-1\.5 { padding: 0.375rem; }

.p-2 { padding: 0.5rem; }

.p-2\.5 { padding: 0.625rem; }

.p-3 { padding: 0.75rem; }

.p-4 { padding: 1rem; }

.p-5 { padding: 1.25rem; }

.p-6 { padding: 1.5rem; }

.p-8 { padding: 2rem; }

.p-10 { padding: 2.5rem; }

.p-12 { padding: 3rem; }

.p-16 { padding: 4rem; }

.px-0 { padding-left: 0; padding-right: 0; }

.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }

.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }

.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }

.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.pt-0 { padding-top: 0; }

.pt-1 { padding-top: 0.25rem; }

.pt-2 { padding-top: 0.5rem; }

.pt-3 { padding-top: 0.75rem; }

.pt-4 { padding-top: 1rem; }

.pt-6 { padding-top: 1.5rem; }

.pt-8 { padding-top: 2rem; }

.pr-0 { padding-right: 0; }

.pr-1 { padding-right: 0.25rem; }

.pr-2 { padding-right: 0.5rem; }

.pr-3 { padding-right: 0.75rem; }

.pr-4 { padding-right: 1rem; }

.pb-0 { padding-bottom: 0; }

.pb-1 { padding-bottom: 0.25rem; }

.pb-2 { padding-bottom: 0.5rem; }

.pb-3 { padding-bottom: 0.75rem; }

.pb-4 { padding-bottom: 1rem; }

.pb-6 { padding-bottom: 1.5rem; }

.pb-8 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }

.pl-1 { padding-left: 0.25rem; }

.pl-2 { padding-left: 0.5rem; }

.pl-3 { padding-left: 0.75rem; }

.pl-4 { padding-left: 1rem; }

/* Margin */

.m-0 { margin: 0; }

.m-1 { margin: 0.25rem; }

.m-2 { margin: 0.5rem; }

.m-3 { margin: 0.75rem; }

.m-4 { margin: 1rem; }

.m-auto { margin: auto; }

.mx-0 { margin-left: 0; margin-right: 0; }

.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }

.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }

.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }

.mx-4 { margin-left: 1rem; margin-right: 1rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }

.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }

.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }

.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }

.my-4 { margin-top: 1rem; margin-bottom: 1rem; }

.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.my-8 { margin-top: 2rem; margin-bottom: 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-5 { margin-top: 1.25rem; }

.mt-6 { margin-top: 1.5rem; }

.mt-8 { margin-top: 2rem; }

.mt-10 { margin-top: 2.5rem; }

.mt-12 { margin-top: 3rem; }

.mt-auto { margin-top: 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-auto { margin-right: auto; }

.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-5 { margin-bottom: 1.25rem; }

.mb-6 { margin-bottom: 1.5rem; }

.mb-8 { margin-bottom: 2rem; }

.ml-0 { margin-left: 0; }

.ml-1 { margin-left: 0.25rem; }

.ml-2 { margin-left: 0.5rem; }

.ml-3 { margin-left: 0.75rem; }

.ml-4 { margin-left: 1rem; }

.ml-auto { margin-left: auto; }

/* Negative margins */

.-mt-1 { margin-top: -0.25rem; }

.-mt-2 { margin-top: -0.5rem; }

.-ml-px { margin-left: -1px; }

.-mr-1 { margin-right: -0.25rem; }

/* Space between */

.space-x-1 > * + * { margin-left: 0.25rem; }

.space-x-2 > * + * { margin-left: 0.5rem; }

.space-x-3 > * + * { margin-left: 0.75rem; }

.space-x-4 > * + * { margin-left: 1rem; }

.space-x-6 > * + * { margin-left: 1.5rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }

.space-y-3 > * + * { margin-top: 0.75rem; }

.space-y-4 > * + * { margin-top: 1rem; }

.space-y-6 > * + * { margin-top: 1.5rem; }

.space-y-8 > * + * { margin-top: 2rem; }

/* ==========================================================================
   Width & Height
   ========================================================================== */

.w-0 { width: 0; }

.w-0\.5 { width: 0.125rem; }

.w-1 { width: 0.25rem; }

.w-2 { width: 0.5rem; }

.w-3 { width: 0.75rem; }

.w-4 { width: 1rem; }

.w-5 { width: 1.25rem; }

.w-6 { width: 1.5rem; }

.w-7 { width: 1.75rem; }

.w-8 { width: 2rem; }

.w-10 { width: 2.5rem; }

.w-12 { width: 3rem; }

.w-14 { width: 3.5rem; }

.w-16 { width: 4rem; }

.w-20 { width: 5rem; }

.w-24 { width: 6rem; }

.w-32 { width: 8rem; }

.w-40 { width: 10rem; }

.w-48 { width: 12rem; }

.w-56 { width: 14rem; }

.w-64 { width: 16rem; }

.w-80 { width: 20rem; }

.w-96 { width: 24rem; }

.w-auto { width: auto; }

.w-full { width: 100%; }

.w-screen { width: 100vw; }

.w-1\/2 { width: 50%; }

.w-1\/3 { width: 33.333333%; }

.w-2\/3 { width: 66.666667%; }

.w-1\/4 { width: 25%; }

.w-3\/4 { width: 75%; }

.min-w-0 { min-width: 0; }

.min-w-full { min-width: 100%; }

.min-w-80 { min-width: 20rem; }

.max-w-none { max-width: none; }

.max-w-xs { max-width: 20rem; }

.max-w-sm { max-width: 24rem; }

.max-w-md { max-width: 28rem; }

.max-w-lg { max-width: 32rem; }

.max-w-xl { max-width: 36rem; }

.max-w-2xl { max-width: 42rem; }

.max-w-3xl { max-width: 48rem; }

.max-w-4xl { max-width: 56rem; }

.max-w-5xl { max-width: 64rem; }

.max-w-6xl { max-width: 72rem; }

.max-w-7xl { max-width: 80rem; }

.max-w-full { max-width: 100%; }

.max-w-prose { max-width: 65ch; }

.h-0 { height: 0; }

.h-0\.5 { height: 0.125rem; }

.h-1 { height: 0.25rem; }

.h-2 { height: 0.5rem; }

.h-3 { height: 0.75rem; }

.h-4 { height: 1rem; }

.h-5 { height: 1.25rem; }

.h-6 { height: 1.5rem; }

.h-7 { height: 1.75rem; }

.h-8 { height: 2rem; }

.h-10 { height: 2.5rem; }

.h-12 { height: 3rem; }

.h-14 { height: 3.5rem; }

.h-16 { height: 4rem; }

.h-20 { height: 5rem; }

.h-24 { height: 6rem; }

.h-32 { height: 8rem; }

.h-40 { height: 10rem; }

.h-48 { height: 12rem; }

.h-64 { height: 16rem; }

.h-80 { height: 20rem; }

.h-96 { height: 24rem; }

.h-auto { height: auto; }

.h-full { height: 100%; }

.h-screen { height: 100vh; }

.min-h-0 { min-height: 0; }

.min-h-full { min-height: 100%; }

.min-h-screen { min-height: 100vh; }

.max-h-48 { max-height: 12rem; }

.max-h-60 { max-height: 15rem; }

.max-h-64 { max-height: 16rem; }

.max-h-80 { max-height: 20rem; }

.max-h-96 { max-height: 24rem; }

.max-h-full { max-height: 100%; }

.max-h-screen { max-height: 100vh; }

/* ==========================================================================
   Display
   ========================================================================== */

.block { display: block; }

.inline-block { display: inline-block; }

.inline { display: inline; }

.flex { display: flex; }

.inline-flex { display: inline-flex; }

.grid { display: grid; }

.inline-grid { display: inline-grid; }

.table { display: table; }

.table-row { display: table-row; }

.table-cell { display: table-cell; }

.hidden { display: none; }

.contents { display: contents; }

/* ==========================================================================
   Flexbox
   ========================================================================== */

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

.flex-row-reverse { flex-direction: row-reverse; }

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

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

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

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

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

.flex-1 { flex: 1 1 0%; }

.flex-auto { flex: 1 1 auto; }

.flex-initial { flex: 0 1 auto; }

.flex-none { flex: none; }

.flex-grow { flex-grow: 1; }

.flex-grow-0 { flex-grow: 0; }

.grow { flex-grow: 1; }

.grow-0 { flex-grow: 0; }

.flex-shrink { flex-shrink: 1; }

.flex-shrink-0 { flex-shrink: 0; }

.shrink { flex-shrink: 1; }

.shrink-0 { flex-shrink: 0; }

.basis-0 { flex-basis: 0px; }

.basis-1 { flex-basis: 0.25rem; }

.basis-2 { flex-basis: 0.5rem; }

.basis-4 { flex-basis: 1rem; }

.basis-auto { flex-basis: auto; }

.basis-full { flex-basis: 100%; }

.basis-1\/2 { flex-basis: 50%; }

.basis-1\/3 { flex-basis: 33.333333%; }

.basis-2\/3 { flex-basis: 66.666667%; }

.basis-1\/4 { flex-basis: 25%; }

.basis-3\/4 { flex-basis: 75%; }

.items-start { align-items: flex-start; }

.items-center { align-items: center; }

.items-end { align-items: flex-end; }

.items-baseline { align-items: baseline; }

.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }

.justify-end { justify-content: flex-end; }

.justify-between { justify-content: space-between; }

.justify-around { justify-content: space-around; }

.justify-evenly { justify-content: space-evenly; }

.self-auto { align-self: auto; }

.self-start { align-self: flex-start; }

.self-center { align-self: center; }

.self-end { align-self: flex-end; }

.self-stretch { align-self: stretch; }

/* ==========================================================================
   Grid
   ========================================================================== */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }

.col-span-2 { grid-column: span 2 / span 2; }

.col-span-3 { grid-column: span 3 / span 3; }

.col-span-4 { grid-column: span 4 / span 4; }

.col-span-6 { grid-column: span 6 / span 6; }

.col-span-12 { grid-column: span 12 / span 12; }

.col-span-full { grid-column: 1 / -1; }

.row-span-1 { grid-row: span 1 / span 1; }

.row-span-2 { grid-row: span 2 / span 2; }

.gap-0 { gap: 0; }

.gap-1 { gap: 0.25rem; }

.gap-2 { gap: 0.5rem; }

.gap-3 { gap: 0.75rem; }

.gap-4 { gap: 1rem; }

.gap-5 { gap: 1.25rem; }

.gap-6 { gap: 1.5rem; }

.gap-8 { gap: 2rem; }

.gap-10 { gap: 2.5rem; }

.gap-x-2 { -moz-column-gap: 0.5rem; column-gap: 0.5rem; }

.gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; }

.gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; }

.gap-y-2 { row-gap: 0.5rem; }

.gap-y-4 { row-gap: 1rem; }

.gap-y-6 { row-gap: 1.5rem; }

/* ==========================================================================
   Position
   ========================================================================== */

.static { position: static; }

.relative { position: relative; }

.absolute { position: absolute; }

.fixed { position: fixed; }

.sticky { position: sticky; }

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

.inset-y-0 { top: 0; bottom: 0; }

.inset-x-0 { left: 0; right: 0; }

.top-0 { top: 0; }

.top-1 { top: 0.25rem; }

.top-2 { top: 0.5rem; }

.top-4 { top: 1rem; }

.top-14 { top: 3.5rem; }

.top-full { top: 100%; }

.right-0 { right: 0; }

.right-2 { right: 0.5rem; }

.right-4 { right: 1rem; }

.bottom-0 { bottom: 0; }

.bottom-2 { bottom: 0.5rem; }

.bottom-4 { bottom: 1rem; }

.left-0 { left: 0; }

.left-2 { left: 0.5rem; }

.left-4 { left: 1rem; }

/* Z-Index */

.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; }

/* ==========================================================================
   Typography
   ========================================================================== */

.text-xs { font-size: 0.75rem; line-height: 1rem; }

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

.text-base { font-size: 1rem; line-height: 1.5rem; }

.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

.text-2xl { font-size: 1.5rem; line-height: 2rem; }

.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.text-5xl { font-size: 3rem; line-height: 1; }

.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; }

.font-extrabold { font-weight: 800; }

.italic { font-style: italic; }

.not-italic { font-style: normal; }

.leading-none { line-height: 1; }

.leading-tight { line-height: 1.25; }

.leading-snug { line-height: 1.375; }

.leading-normal { line-height: 1.5; }

.leading-relaxed { line-height: 1.625; }

.leading-loose { line-height: 2; }

.leading-3 { line-height: 0.75rem; }

.leading-4 { line-height: 1rem; }

.leading-5 { line-height: 1.25rem; }

.leading-6 { line-height: 1.5rem; }

.tracking-tighter { letter-spacing: -0.05em; }

.tracking-tight { letter-spacing: -0.025em; }

.tracking-normal { letter-spacing: 0; }

.tracking-wide { letter-spacing: 0.025em; }

.tracking-wider { letter-spacing: 0.05em; }

.tracking-widest { letter-spacing: 0.1em; }

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

.underline { text-decoration: underline; }

.line-through { text-decoration: line-through; }

.no-underline { text-decoration: none; }

.uppercase { text-transform: uppercase; }

.lowercase { text-transform: lowercase; }

.capitalize { text-transform: capitalize; }

.normal-case { text-transform: none; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.overflow-ellipsis { text-overflow: ellipsis; }

.whitespace-normal { white-space: normal; }

.whitespace-nowrap { white-space: nowrap; }

.whitespace-pre { white-space: pre; }

.whitespace-pre-line { white-space: pre-line; }

.whitespace-pre-wrap { white-space: pre-wrap; }

.break-words { word-wrap: break-word; overflow-wrap: break-word; }

.break-all { word-break: break-all; }

/* ==========================================================================
   Overflow
   ========================================================================== */

.overflow-auto { overflow: auto; }

.overflow-hidden { overflow: hidden; }

.overflow-visible { overflow: visible; }

.overflow-scroll { overflow: scroll; }

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

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

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

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

/* ==========================================================================
   Shadows
   ========================================================================== */

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }

.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }

.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }

.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }

.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }

.shadow-none { box-shadow: none; }

/* ==========================================================================
   Opacity
   ========================================================================== */

.opacity-0 { opacity: 0; }

.opacity-25 { opacity: 0.25; }

.opacity-50 { opacity: 0.5; }

.opacity-75 { opacity: 0.75; }

.opacity-100 { opacity: 1; }

/* ==========================================================================
   Transitions
   ========================================================================== */

.transition-none { transition-property: none; }

.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.duration-75 { transition-duration: 75ms; }

.duration-100 { transition-duration: 100ms; }

.duration-150 { transition-duration: 150ms; }

.duration-200 { transition-duration: 200ms; }

.duration-300 { transition-duration: 300ms; }

.duration-500 { transition-duration: 500ms; }

.ease-linear { transition-timing-function: linear; }

.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }

.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ==========================================================================
   Transform
   ========================================================================== */

.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }

.transform-none { transform: none; }

.translate-x-0 { transform: translateX(0); }

.translate-y-0 { transform: translateY(0); }

.-translate-y-1 { transform: translateY(-0.25rem); }

.-translate-y-2 { transform: translateY(-0.5rem); }

.scale-95 { transform: scale(0.95); }

.scale-100 { transform: scale(1); }

.scale-105 { transform: scale(1.05); }

.rotate-0 { transform: rotate(0deg); }

.rotate-45 { transform: rotate(45deg); }

.rotate-90 { transform: rotate(90deg); }

.rotate-180 { transform: rotate(180deg); }

/* ==========================================================================
   Cursor
   ========================================================================== */

.cursor-auto { cursor: auto; }

.cursor-default { cursor: default; }

.cursor-pointer { cursor: pointer; }

.cursor-wait { cursor: wait; }

.cursor-text { cursor: text; }

.cursor-move { cursor: move; }

.cursor-not-allowed { cursor: not-allowed; }

.cursor-grab { cursor: grab; }

.cursor-grabbing { cursor: grabbing; }

/* ==========================================================================
   User Select
   ========================================================================== */

.select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.select-text { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

.select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; }

.select-auto { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }

/* ==========================================================================
   Pointer Events
   ========================================================================== */

.pointer-events-none { pointer-events: none; }

.pointer-events-auto { pointer-events: auto; }

/* ==========================================================================
   Visibility
   ========================================================================== */

.visible { visibility: visible; }

.invisible { visibility: hidden; }

.collapse { visibility: collapse; }

/* ==========================================================================
   Screen Reader Only
   ========================================================================== */

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

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================================================
   Object Fit
   ========================================================================== */

.object-contain { -o-object-fit: contain; object-fit: contain; }

.object-cover { -o-object-fit: cover; object-fit: cover; }

.object-fill { -o-object-fit: fill; object-fit: fill; }

.object-none { -o-object-fit: none; object-fit: none; }

.object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; }

/* ==========================================================================
   Ring (Focus Rings)
   ========================================================================== */

.ring-0 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.ring-1 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.ring-2 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.ring-4 { box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.ring-8 { box-shadow: 0 0 0 8px #ffffff; }

.ring-white { --tw-ring-color: #ffffff; }

.ring-blue-300 { --tw-ring-color: #93c5fd; }

.ring-blue-500 { --tw-ring-color: #3b82f6; }

.ring-green-500 { --tw-ring-color: #22c55e; }

.ring-red-500 { --tw-ring-color: #ef4444; }

.ring-inset { --tw-ring-inset: inset; }

.ring-offset-0 { --tw-ring-offset-width: 0px; }

.ring-offset-2 { --tw-ring-offset-width: 2px; }

/* ==========================================================================
   Outline
   ========================================================================== */

.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

.outline { outline-style: solid; }

.outline-dashed { outline-style: dashed; }

.outline-dotted { outline-style: dotted; }

.outline-double { outline-style: double; }

/* ==========================================================================
   List Style
   ========================================================================== */

.list-none { list-style-type: none; }

.list-disc { list-style-type: disc; }

.list-decimal { list-style-type: decimal; }

.list-inside { list-style-position: inside; }

.list-outside { list-style-position: outside; }

/* ==========================================================================
   Divide
   ========================================================================== */

.divide-x > * + * { border-left-width: 1px; }

.divide-y > * + * { border-top-width: 1px; }

.divide-gray-100 > * + * { border-color: #f3f4f6; }

.divide-gray-200 > * + * { border-color: #e5e7eb; }

.divide-gray-300 > * + * { border-color: #d1d5db; }

/* ==========================================================================
   Aspect Ratio
   ========================================================================== */

.aspect-auto { aspect-ratio: auto; }

.aspect-square { aspect-ratio: 1 / 1; }

.aspect-video { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Animation
   ========================================================================== */

.animate-none { animation: none; }

.animate-spin { animation: spin 1s linear infinite; }

.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.animate-bounce { animation: bounce 1s infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* ==========================================================================
   Antialiasing
   ========================================================================== */

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.subpixel-antialiased {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* ==========================================================================
   Appearance
   ========================================================================== */

.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* ==========================================================================
   Vertical Alignment
   ========================================================================== */

.align-baseline { vertical-align: baseline; }

.align-top { vertical-align: top; }

.align-middle { vertical-align: middle; }

.align-bottom { vertical-align: bottom; }

.align-text-top { vertical-align: text-top; }

.align-text-bottom { vertical-align: text-bottom; }

.align-sub { vertical-align: sub; }

.align-super { vertical-align: super; }

/* ==========================================================================
   List Style
   ========================================================================== */

.list-none { list-style-type: none; }

.list-disc { list-style-type: disc; }

.list-decimal { list-style-type: decimal; }

.list-inside { list-style-position: inside; }

.list-outside { list-style-position: outside; }

/* ==========================================================================
   Object Fit
   ========================================================================== */

.object-contain { -o-object-fit: contain; object-fit: contain; }

.object-cover { -o-object-fit: cover; object-fit: cover; }

.object-fill { -o-object-fit: fill; object-fit: fill; }

.object-none { -o-object-fit: none; object-fit: none; }

.object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; }

.object-center { -o-object-position: center; object-position: center; }

.object-top { -o-object-position: top; object-position: top; }

.object-bottom { -o-object-position: bottom; object-position: bottom; }

.object-left { -o-object-position: left; object-position: left; }

.object-right { -o-object-position: right; object-position: right; }

/* ==========================================================================
   Line Clamp
   ========================================================================== */

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-none {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: horizontal;
  overflow: visible;
}

/* ==========================================================================
   Table Utilities
   ========================================================================== */

.table-auto { table-layout: auto; }

.table-fixed { table-layout: fixed; }

.border-collapse { border-collapse: collapse; }

.border-separate { border-collapse: separate; }

.border-spacing-0 { border-spacing: 0; }

.border-spacing-1 { border-spacing: 0.25rem; }

.border-spacing-2 { border-spacing: 0.5rem; }

.caption-top { caption-side: top; }

.caption-bottom { caption-side: bottom; }

/* ==========================================================================
   Isolation
   ========================================================================== */

.isolate { isolation: isolate; }

.isolation-auto { isolation: auto; }

/* ==========================================================================
   Content
   ========================================================================== */

.content-none { content: none; }

.content-center { align-content: center; }

.content-start { align-content: flex-start; }

.content-end { align-content: flex-end; }

.content-between { align-content: space-between; }

.content-around { align-content: space-around; }

.content-evenly { align-content: space-evenly; }

.content-baseline { align-content: baseline; }

.content-stretch { align-content: stretch; }

/* ==========================================================================
   Place Utilities
   ========================================================================== */

.place-content-center { place-content: center; }

.place-content-start { place-content: start; }

.place-content-end { place-content: end; }

.place-content-between { place-content: space-between; }

.place-content-around { place-content: space-around; }

.place-content-evenly { place-content: space-evenly; }

.place-content-stretch { place-content: stretch; }

.place-items-center { place-items: center; }

.place-items-start { place-items: start; }

.place-items-end { place-items: end; }

.place-items-stretch { place-items: stretch; }

.place-self-auto { place-self: auto; }

.place-self-start { place-self: start; }

.place-self-end { place-self: end; }

.place-self-center { place-self: center; }

.place-self-stretch { place-self: stretch; }

/* ==========================================================================
   Tailwind CSS Responsive Utilities
   ========================================================================== */

/* ==========================================================================
   SM Breakpoint (640px)
   ========================================================================== */

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

  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .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; }

  .sm\:w-auto { width: auto; }
  .sm\:w-full { width: 100%; }
  .sm\:w-80 { width: 20rem; }
  .sm\:w-1\/2 { width: 50%; }
  .sm\:w-1\/3 { width: 33.333333%; }

  .sm\:max-w-sm { max-width: 24rem; }
  .sm\:max-w-md { max-width: 28rem; }
  .sm\:max-w-lg { max-width: 32rem; }

  .sm\:px-0 { padding-left: 0; padding-right: 0; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }

  .sm\:py-0 { padding-top: 0; padding-bottom: 0; }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }

  .sm\:p-4 { padding: 1rem; }
  .sm\:p-6 { padding: 1.5rem; }

  .sm\:mt-0 { margin-top: 0; }
  .sm\:ml-0 { margin-left: 0; }
  .sm\:ml-3 { margin-left: 0.75rem; }
  .sm\:ml-4 { margin-left: 1rem; }

  .sm\:space-x-4 > * + * { margin-left: 1rem; }
  .sm\:space-y-0 > * + * { margin-top: 0; }

  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-6 { gap: 1.5rem; }

  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }

  .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\:rounded-lg { border-radius: 0.5rem; }
  .sm\:rounded-md { border-radius: 0.375rem; }

  .sm\:static { position: static; }
  .sm\:relative { position: relative; }
  .sm\:absolute { position: absolute; }

  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:col-span-3 { grid-column: span 3 / span 3; }

  .sm\:h-56 { height: 14rem; }
  .sm\:h-80 { height: 20rem; }

  .sm\:my-8 { margin-top: 2rem; margin-bottom: 2rem; }

  .sm\:flex-1 { flex: 1 1 0%; }
  .sm\:flex-none { flex: none; }

  .sm\:space-x-3 > * + * { margin-left: 0.75rem; }

  .sm\:align-middle { vertical-align: middle; }

  .sm\:pb-4 { padding-bottom: 1rem; }
  .sm\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ==========================================================================
   MD Breakpoint (768px)
   ========================================================================== */

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

  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }

  .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; }

  .md\:w-auto { width: auto; }
  .md\:w-full { width: 100%; }
  .md\:w-48 { width: 12rem; }
  .md\:w-64 { width: 16rem; }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:w-2\/3 { width: 66.666667%; }

  .md\:max-w-md { max-width: 28rem; }
  .md\:max-w-lg { max-width: 32rem; }
  .md\:max-w-xl { max-width: 36rem; }
  .md\:max-w-2xl { max-width: 42rem; }

  .md\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }

  .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .md\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

  .md\:p-6 { padding: 1.5rem; }
  .md\:p-8 { padding: 2rem; }

  .md\:mt-0 { margin-top: 0; }
  .md\:ml-0 { margin-left: 0; }
  .md\:ml-4 { margin-left: 1rem; }

  .md\:space-x-4 > * + * { margin-left: 1rem; }
  .md\:space-x-6 > * + * { margin-left: 1.5rem; }
  .md\:space-y-0 > * + * { margin-top: 0; }

  .md\:gap-4 { gap: 1rem; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:gap-8 { gap: 2rem; }

  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }

  .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; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }

  .md\:rounded-lg { border-radius: 0.5rem; }

  .md\:static { position: static; }
  .md\:relative { position: relative; }
  .md\:absolute { position: absolute; }

  .md\:space-x-3 > * + * { margin-left: 0.75rem; }

  .md\:overflow-visible { overflow: visible; }

  .md\:table-cell { display: table-cell; }
}

/* ==========================================================================
   LG Breakpoint (1024px)
   ========================================================================== */

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

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }

  .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; }

  .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-1\/4 { width: 25%; }
  .lg\:w-2\/3 { width: 66.666667%; }
  .lg\:w-3\/4 { width: 75%; }

  .lg\:max-w-lg { max-width: 32rem; }
  .lg\:max-w-xl { max-width: 36rem; }
  .lg\:max-w-2xl { max-width: 42rem; }
  .lg\:max-w-4xl { max-width: 56rem; }

  .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }

  .lg\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }

  .lg\:p-6 { padding: 1.5rem; }
  .lg\:p-8 { padding: 2rem; }

  .lg\:mt-0 { margin-top: 0; }
  .lg\:ml-0 { margin-left: 0; }
  .lg\:ml-6 { margin-left: 1.5rem; }

  .lg\:space-x-6 > * + * { margin-left: 1.5rem; }
  .lg\:space-x-8 > * + * { margin-left: 2rem; }
  .lg\:space-y-0 > * + * { margin-top: 0; }

  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:gap-8 { gap: 2rem; }

  .lg\:text-left { text-align: left; }
  .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; }

  .lg\:static { position: static; }
  .lg\:relative { position: relative; }

  .lg\:rounded-lg { border-radius: 0.5rem; }
}

/* ==========================================================================
   XL Breakpoint (1280px)
   ========================================================================== */

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

  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .xl\:col-span-2 { grid-column: span 2 / span 2; }
  .xl\:col-span-3 { grid-column: span 3 / span 3; }
  .xl\:col-span-4 { grid-column: span 4 / span 4; }

  .xl\:w-auto { width: auto; }
  .xl\:w-1\/4 { width: 25%; }
  .xl\:w-1\/5 { width: 20%; }

  .xl\:max-w-4xl { max-width: 56rem; }
  .xl\:max-w-5xl { max-width: 64rem; }
  .xl\:max-w-6xl { max-width: 72rem; }

  .xl\:px-8 { padding-left: 2rem; padding-right: 2rem; }

  .xl\:gap-8 { gap: 2rem; }
}

/* ==========================================================================
   2XL Breakpoint (1536px)
   ========================================================================== */

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

  .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .\32xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .\32xl\:max-w-7xl { max-width: 80rem; }
}

/* ==========================================================================
   Tailwind CSS State Utilities (Hover, Focus, Active, etc.)
   ========================================================================== */

/* ==========================================================================
   Hover States
   ========================================================================== */

/* Background hover */

.hover\:bg-gray-50:hover { background-color: #f9fafb; }

.hover\:bg-gray-100:hover { background-color: #f3f4f6; }

.hover\:bg-gray-200:hover { background-color: #e5e7eb; }

.hover\:bg-blue-50:hover { background-color: #eff6ff; }

.hover\:bg-blue-100:hover { background-color: #dbeafe; }

.hover\:bg-blue-600:hover { background-color: #2563eb; }

.hover\:bg-blue-700:hover { background-color: #1d4ed8; }

.hover\:bg-blue-800:hover { background-color: #1e40af; }

.hover\:bg-green-600:hover { background-color: #16a34a; }

.hover\:bg-green-700:hover { background-color: #15803d; }

.hover\:bg-red-600:hover { background-color: #dc2626; }

.hover\:bg-red-700:hover { background-color: #b91c1c; }

.hover\:bg-yellow-600:hover { background-color: #ca8a04; }

.hover\:bg-yellow-700:hover { background-color: #a16207; }

.hover\:bg-orange-600:hover { background-color: #ea580c; }

.hover\:bg-purple-700:hover { background-color: #7e22ce; }

.hover\:bg-indigo-700:hover { background-color: #4338ca; }

/* Text hover */

.hover\:text-gray-500:hover { color: #6b7280; }

.hover\:text-gray-600:hover { color: #4b5563; }

.hover\:text-gray-700:hover { color: #374151; }

.hover\:text-gray-800:hover { color: #1f2937; }

.hover\:text-gray-900:hover { color: #111827; }

.hover\:text-blue-200:hover { color: #bfdbfe; }

.hover\:text-blue-500:hover { color: #3b82f6; }

.hover\:text-blue-600:hover { color: #2563eb; }

.hover\:text-blue-700:hover { color: #1d4ed8; }

.hover\:text-blue-800:hover { color: #1e40af; }

.hover\:text-green-600:hover { color: #16a34a; }

.hover\:text-green-800:hover { color: #166534; }

.hover\:text-red-600:hover { color: #dc2626; }

.hover\:text-red-800:hover { color: #991b1b; }

.hover\:text-yellow-600:hover { color: #ca8a04; }

.hover\:text-white:hover { color: #ffffff; }

/* Border hover */

.hover\:border-gray-300:hover { border-color: #d1d5db; }

.hover\:border-gray-400:hover { border-color: #9ca3af; }

.hover\:border-blue-300:hover { border-color: #93c5fd; }

.hover\:border-blue-400:hover { border-color: #60a5fa; }

.hover\:border-blue-500:hover { border-color: #3b82f6; }

.hover\:border-green-400:hover { border-color: #4ade80; }

.hover\:border-green-500:hover { border-color: #22c55e; }

.hover\:border-transparent:hover { border-color: transparent; }

/* Shadow hover */

.hover\:shadow:hover { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }

.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }

.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* Underline hover */

.hover\:underline:hover { text-decoration: underline; }

.hover\:no-underline:hover { text-decoration: none; }

/* Opacity hover */

.hover\:opacity-75:hover { opacity: 0.75; }

.hover\:opacity-100:hover { opacity: 1; }

/* Scale hover */

.hover\:scale-105:hover { transform: scale(1.05); }

.hover\:scale-110:hover { transform: scale(1.1); }

/* Ring hover */

.hover\:ring-2:hover { box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

/* ==========================================================================
   Focus States
   ========================================================================== */

/* Focus ring */

.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

.focus\:ring-0:focus { box-shadow: 0 0 0 0 transparent; }

.focus\:ring-1:focus { box-shadow: 0 0 0 1px var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.focus\:ring-4:focus { box-shadow: 0 0 0 4px var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.focus\:ring-blue-300:focus { --tw-ring-color: #93c5fd; box-shadow: 0 0 0 3px var(--tw-ring-color); }

.focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; box-shadow: 0 0 0 3px var(--tw-ring-color); }

.focus\:ring-green-500:focus { --tw-ring-color: #22c55e; box-shadow: 0 0 0 3px var(--tw-ring-color); }

.focus\:ring-red-500:focus { --tw-ring-color: #ef4444; box-shadow: 0 0 0 3px var(--tw-ring-color); }

.focus\:ring-yellow-500:focus { --tw-ring-color: #eab308; box-shadow: 0 0 0 3px var(--tw-ring-color); }

.focus\:ring-indigo-500:focus { --tw-ring-color: #6366f1; box-shadow: 0 0 0 3px var(--tw-ring-color); }

.focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; }

.focus\:ring-inset:focus { --tw-ring-inset: inset; }

/* Focus border */

.focus\:border-blue-300:focus { border-color: #93c5fd; }

.focus\:border-blue-500:focus { border-color: #3b82f6; }

.focus\:border-indigo-500:focus { border-color: #6366f1; }

.focus\:border-transparent:focus { border-color: transparent; }

/* Focus background */

.focus\:bg-gray-50:focus { background-color: #f9fafb; }

.focus\:bg-gray-100:focus { background-color: #f3f4f6; }

/* Focus text */

.focus\:text-gray-500:focus { color: #6b7280; }

/* Focus within */

.focus-within\:ring-2:focus-within { box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

.focus-within\:ring-blue-500:focus-within { --tw-ring-color: #3b82f6; box-shadow: 0 0 0 3px var(--tw-ring-color); }

.focus-within\:border-blue-500:focus-within { border-color: #3b82f6; }

/* Focus visible */

.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }

.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

/* Not SR only on focus */

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================================================
   Active States
   ========================================================================== */

.active\:bg-gray-100:active { background-color: #f3f4f6; }

.active\:bg-gray-200:active { background-color: #e5e7eb; }

.active\:bg-blue-700:active { background-color: #1d4ed8; }

.active\:bg-blue-800:active { background-color: #1e40af; }

.active\:scale-95:active { transform: scale(0.95); }

/* ==========================================================================
   Disabled States
   ========================================================================== */

.disabled\:opacity-50:disabled { opacity: 0.5; }

.disabled\:opacity-75:disabled { opacity: 0.75; }

.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

.disabled\:bg-gray-100:disabled { background-color: #f3f4f6; }

.disabled\:bg-gray-300:disabled { background-color: #d1d5db; }

.disabled\:text-gray-400:disabled { color: #9ca3af; }

.disabled\:text-gray-500:disabled { color: #6b7280; }

.disabled\:border-gray-200:disabled { border-color: #e5e7eb; }

/* ==========================================================================
   Group Hover States
   ========================================================================== */

.group:hover .group-hover\:text-gray-500 { color: #6b7280; }

.group:hover .group-hover\:text-gray-600 { color: #4b5563; }

.group:hover .group-hover\:text-gray-900 { color: #111827; }

.group:hover .group-hover\:text-blue-600 { color: #2563eb; }

.group:hover .group-hover\:bg-gray-50 { background-color: #f9fafb; }

.group:hover .group-hover\:bg-gray-100 { background-color: #f3f4f6; }

.group:hover .group-hover\:visible { visibility: visible; }

.group:hover .group-hover\:opacity-100 { opacity: 1; }

.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

/* ==========================================================================
   Peer States
   ========================================================================== */

.peer:checked ~ .peer-checked\:bg-blue-600 { background-color: #2563eb; }

.peer:checked ~ .peer-checked\:border-blue-600 { border-color: #2563eb; }

.peer:checked ~ .peer-checked\:text-white { color: #ffffff; }

.peer:focus ~ .peer-focus\:ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / 0.5)); }

/* ==========================================================================
   Placeholder States
   ========================================================================== */

.placeholder-gray-400::-moz-placeholder { color: #9ca3af; }

.placeholder-gray-400::placeholder { color: #9ca3af; }

.placeholder-gray-500::-moz-placeholder { color: #6b7280; }

.placeholder-gray-500::placeholder { color: #6b7280; }

/* ==========================================================================
   First/Last Child States
   ========================================================================== */

.first\:mt-0:first-child { margin-top: 0; }

.first\:pt-0:first-child { padding-top: 0; }

.first\:border-t-0:first-child { border-top-width: 0; }

.first\:rounded-t-md:first-child { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }

.last\:mb-0:last-child { margin-bottom: 0; }

.last\:pb-0:last-child { padding-bottom: 0; }

.last\:border-b-0:last-child { border-bottom-width: 0; }

.last\:rounded-b-md:last-child { border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }

/* ==========================================================================
   Odd/Even States
   ========================================================================== */

.odd\:bg-white:nth-child(odd) { background-color: #ffffff; }

.odd\:bg-gray-50:nth-child(odd) { background-color: #f9fafb; }

.even\:bg-gray-50:nth-child(even) { background-color: #f9fafb; }

.even\:bg-gray-100:nth-child(even) { background-color: #f3f4f6; }

/* ==========================================================================
   Dark Mode (if needed)
   ========================================================================== */

/* Placeholder for dark mode utilities */

/* @media (prefers-color-scheme: dark) { ... } */

/* ==========================================================================
   Pages
   ========================================================================== */

/* Print styles */

/* Print styles for A6 format positioned top-left */

@media print {
  /* Set page to A6 format */
  @page {
    size: A6 portrait;
    margin: 0;
    padding: 0;
  }

  /* Reset all styles for print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide non-printable elements */
  .no-print,
  .level-right,
  .button,
  .navbar,
  .footer,
  .tabs,
  .pagination,
  .notification,
  .breadcrumb,
  .level .level-right,
  .field.is-grouped,
  nav,
  .mobile-hidden,
  .mobile-only {
    display: none !important;
  }

  /* Body positioning for top-left alignment */
  body {
    margin: 0 !important;
    padding: 10mm !important;
    font-family: Arial, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.2 !important;
    background: white !important;
    color: black !important;
  }

  /* Container positioning */
  .container,
  .section {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Content positioning for top-left */
  .print-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Headers and titles */
  .title,
  h1, h2, h3, h4, h5, h6 {
    font-size: 12pt !important;
    margin: 0 0 5mm 0 !important;
    padding: 0 !important;
    font-weight: bold !important;
    color: black !important;
    page-break-after: avoid !important;
  }

  /* Text content */
  p, div, span {
    font-size: 10pt !important;
    margin: 0 0 2mm 0 !important;
    padding: 0 !important;
    color: black !important;
  }

  /* Tables */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 5mm 0 !important;
    font-size: 9pt !important;
  }

  th, td {
    border: 1px solid #000 !important;
    padding: 1mm !important;
    text-align: left !important;
    font-size: 9pt !important;
  }

  th {
    background-color: #f0f0f0 !important;
    font-weight: bold !important;
  }

  /* Remove styling for print */
  .box,
  .card,
  .notification {
    background: white !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 5mm 0 !important;
  }

  /* Remove columns for print */
  .columns,
  .column {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Work order specific styling */
  .work-order-header {
    margin-bottom: 5mm !important;
  }

  .work-order-details {
    margin-bottom: 3mm !important;
  }

  .work-order-customer {
    border: 1px solid #ccc !important;
    padding: 2mm !important;
    margin: 3mm 0 !important;
  }

  /* Status and priority tags */
  .tag {
    border: 1px solid #000 !important;
    padding: 1mm 2mm !important;
    font-size: 8pt !important;
    display: inline-block !important;
    background: white !important;
    color: black !important;
  }

  /* Force page break */
  .page-break {
    page-break-before: always !important;
  }

  .page-break-avoid {
    page-break-inside: avoid !important;
  }

  /* Links */
  a {
    text-decoration: none !important;
    color: black !important;
  }

  a:after {
    content: " (" attr(href) ")" !important;
    font-size: 8pt !important;
    color: #666 !important;
  }

  /* Images */
  img {
    max-width: 20mm !important;
    max-height: 20mm !important;
    margin: 1mm !important;
  }

  /* Lists */
  ul, ol {
    margin: 0 0 2mm 5mm !important;
    padding: 0 !important;
  }

  li {
    margin: 0 0 1mm 0 !important;
    font-size: 10pt !important;
  }
}

/* ==========================================================================
   Custom Fonts
   ========================================================================== */

@font-face {
  font-family: 'DejaVu Sans';
  src: url("/assets/DejaVuSans-b94c7dae.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DejaVu Sans';
  src: url("/assets/DejaVuSans-Bold-d8e6cb9a.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}