/**
 * Neo ERP Design System
 * A warm, editorial-inspired design system with distinctive typography and refined interactions.
 * Inspired by Linear, Notion, Stripe, and premium SaaS applications.
 */

/* =============================================================================
   CSS Variables - Design Tokens
   ============================================================================= */

:root {
  /* Primary Colors - Rich Indigo with warm undertones */
  --color-primary-50: #f0f1ff;
  --color-primary-100: #e4e6ff;
  --color-primary-200: #cdcffe;
  --color-primary-300: #a8abfc;
  --color-primary-400: #7c7ff7;
  --color-primary-500: #5856eb;
  --color-primary-600: #4a3ddf;
  --color-primary-700: #3f2fc5;
  --color-primary-800: #3528a0;
  --color-primary-900: #2e267f;
  --color-primary-950: #1b1650;

  /* Neutral Colors - Warmer slate tones */
  --color-gray-50: #fafaf9;
  --color-gray-100: #f5f4f2;
  --color-gray-200: #e8e6e3;
  --color-gray-300: #d6d3cf;
  --color-gray-400: #a8a29e;
  --color-gray-500: #78716c;
  --color-gray-600: #57534e;
  --color-gray-700: #44403c;
  --color-gray-800: #292524;
  --color-gray-900: #1c1917;
  --color-gray-950: #0c0a09;

  /* Accent Colors for visual interest */
  --color-amber: #f59e0b;
  --color-amber-soft: #fef3c7;
  --color-teal: #14b8a6;
  --color-teal-soft: #ccfbf1;
  --color-rose: #f43f5e;
  --color-rose-soft: #ffe4e6;

  /* Semantic Colors */
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;

  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;

  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;

  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-500: #3b82f6;
  --color-info-600: #2563eb;

  /* Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Typography - Distinctive Font Pairing */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* Shadows - Softer, more refined with optional color tints */
  --shadow-xs: 0 1px 2px 0 rgb(28 25 23 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(28 25 23 / 0.06), 0 1px 2px -1px rgb(28 25 23 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(28 25 23 / 0.08), 0 2px 4px -2px rgb(28 25 23 / 0.04);
  --shadow-lg: 0 12px 24px -4px rgb(28 25 23 / 0.1), 0 4px 8px -2px rgb(28 25 23 / 0.04);
  --shadow-xl: 0 24px 48px -12px rgb(28 25 23 / 0.18);
  --shadow-2xl: 0 32px 64px -16px rgb(28 25 23 / 0.24);
  --shadow-inner: inset 0 2px 4px 0 rgb(28 25 23 / 0.04);

  /* Colored shadows for emphasis */
  --shadow-primary: 0 4px 16px -4px rgb(88 86 235 / 0.35);
  --shadow-success: 0 4px 16px -4px rgb(16 185 129 / 0.35);
  --shadow-warning: 0 4px 16px -4px rgb(245 158 11 / 0.35);
  --shadow-error: 0 4px 16px -4px rgb(239 68 68 / 0.35);

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  /* The scale is four steps: chip, control, card, dialog. Anything else
     makes two cards on the same page look like two products. */
  --radius-card: 0.625rem;   /* 10px */
  --radius-dialog: 0.875rem; /* 14px */
  --radius-full: 9999px;

  /* Transitions - Smooth, natural easing */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;
  --content-max-width: 1400px;
}

/* Dark Mode Variables */
.dark {
  --color-gray-50: #18181b;
  --color-gray-100: #27272a;
  --color-gray-200: #3f3f46;
  --color-gray-300: #52525b;
  --color-gray-400: #71717a;
  --color-gray-500: #a1a1aa;
  --color-gray-600: #d4d4d8;
  --color-gray-700: #e4e4e7;
  --color-gray-800: #f4f4f5;
  --color-gray-900: #fafafa;
  --color-gray-950: #ffffff;
}

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

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-gray-900);
  background-color: var(--color-gray-50);
}

[dir="rtl"] body {
  font-family: var(--font-arabic), var(--font-sans);
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background-color: var(--color-primary-100);
  color: var(--color-primary-900);
}

/* =============================================================================
   Typography Utilities
   ============================================================================= */

/* Display headings - Use serif display font for editorial feel */
.text-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

/* Page titles - Serif for important headings */
.text-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-gray-900);
}

/* Section headers - Sans-serif for UI elements */
.text-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

/* Gradient text effect */
.text-gradient {
  background: var(--color-primary-600);
}

/* Dark mode typography */
.dark .text-display,
.dark .text-title,
.dark .text-title-sm {
  color: var(--color-gray-50);
}

.dark .text-heading,
.dark .text-subheading {
  color: var(--color-gray-100);
}

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

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

/* =============================================================================
   Button Styles - Enhanced with micro-interactions
   ============================================================================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  white-space: nowrap;
  user-select: none;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-sm {
  padding: 0.375rem var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
}

/* Primary Button - Rich gradient with glow */
.btn-primary {
  background: var(--color-primary-500);
  color: white;
  box-shadow: var(--shadow-sm),
              inset 0 1px 0 rgb(255 255 255 / 0.15),
              0 2px 8px -2px rgb(88 86 235 / 0.3);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-400);
  box-shadow: var(--shadow-md),
              inset 0 1px 0 rgb(255 255 255 / 0.2),
              0 8px 20px -4px rgb(88 86 235 / 0.4);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-xs),
              inset 0 2px 4px rgb(0 0 0 / 0.1);
}

/* Secondary Button - Clean with subtle border */
.btn-secondary {
  background: white;
  color: var(--color-gray-700);
  border-color: var(--color-gray-200);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
  background: var(--color-gray-100);
}

.dark .btn-secondary {
  background: var(--color-gray-800);
  color: var(--color-gray-200);
  border-color: var(--color-gray-700);
}

.dark .btn-secondary:hover:not(:disabled) {
  background: var(--color-gray-700);
  border-color: var(--color-gray-600);
}

/* Ghost Button - Minimal */
.btn-ghost {
  background: transparent;
  color: var(--color-gray-600);
}

.dark .btn-ghost {
  color: var(--color-gray-400);
}

.dark .btn-ghost:hover:not(:disabled) {
  background: var(--color-gray-800);
  color: var(--color-gray-100);
}

/* Danger Button - With warning glow */
.btn-danger {
  background: var(--color-error-500);
  color: white;
  box-shadow: var(--shadow-sm), 0 2px 8px -2px rgb(239 68 68 / 0.3);
}

/* Success Button - With positive glow */
.btn-success {
  background: var(--color-success-500);
  color: white;
  box-shadow: var(--shadow-sm), 0 2px 8px -2px rgb(16 185 129 / 0.3);
}

.btn-success:hover:not(:disabled) {
  box-shadow: var(--shadow-md), 0 8px 20px -4px rgb(16 185 129 / 0.4);
}

.btn-success:active:not(:disabled) {
  transform: translateY(0);
}

/* Warning/Amber Button */
.btn-warning {
  background: var(--color-warning-500);
  color: white;
  box-shadow: var(--shadow-sm), 0 2px 8px -2px rgb(245 158 11 / 0.3);
}

.btn-warning:hover:not(:disabled) {
  box-shadow: var(--shadow-md), 0 8px 20px -4px rgb(245 158 11 / 0.4);
}

/* Icon Button */
.btn-icon {
  padding: var(--space-2);
  aspect-ratio: 1;
}

.btn-icon.btn-sm {
  padding: 0.375rem;
}

/* Icon hover animation */
.btn-icon:hover:not(:disabled) svg {
  transition: transform var(--transition-fast);
}

/* Loading state for buttons */
.btn-loading {
  pointer-events: none;
  opacity: 0.8;
}

/* =============================================================================
   Card Styles - Refined with subtle depth
   ============================================================================= */

.card {
  background: white;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.dark .card {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark .card-header {
  border-color: var(--color-gray-700);
}

.dark .card-header-title {
  color: var(--color-gray-100);
}

.dark .card-footer {
  border-color: var(--color-gray-700);
  background: var(--color-gray-900);
}

/* Elevated Card - Premium floating look */
.card-elevated {
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-lg);
}

.dark .card-elevated {
  border-color: var(--color-gray-700);
  box-shadow: 0 12px 24px -4px rgb(0 0 0 / 0.3);
}

/* Interactive Card - Lift on hover */
.card-interactive {
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.dark .card-interactive:hover {
  border-color: var(--color-primary-700);
  box-shadow: 0 16px 32px -8px rgb(0 0 0 / 0.4);
}

/* Card with accent border */
.card-accent {
  border-left: 3px solid var(--color-primary-500);
}

/* Glass card effect */
.card-glass {
  background: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.3);
}

.dark .card-glass {
  background: rgb(41 37 36 / 0.8);
  border: 1px solid rgb(255 255 255 / 0.1);
}

/* Card with gradient border */
.card-gradient-border {
  position: relative;
  background: white;
  border: none;
}

/* =============================================================================
   Form Styles - Refined with better focus states
   ============================================================================= */

.form-group {
  margin-bottom: var(--space-5);
}

.dark .form-label {
  color: var(--color-gray-300);
}

.dark .form-input,
.dark .form-select,
.dark .form-textarea {
  background: var(--color-gray-800);
  border-color: var(--color-gray-600);
  color: var(--color-gray-100);
}

.dark .form-input::placeholder {
  color: var(--color-gray-500);
}

.dark .form-input:hover:not(:disabled):not(:focus) {
  border-color: var(--color-gray-500);
}

.dark .form-input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgb(88 86 235 / 0.2);
}

/* Input Sizes */
.form-input-sm {
  padding: 0.375rem var(--space-2);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
}

/* Input States */
.form-input-error {
  border-color: var(--color-error-400);
  background: rgb(254 242 242 / 0.5);
}

.dark .form-input-error {
  background: rgb(254 242 242 / 0.05);
}

/* Help Text */
.form-help {
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
}

/* Input with Icon */
.input-group {
  position: relative;
}

/* Floating label variant */
.form-floating {
  position: relative;
}

/* Checkbox & Radio refined */
.form-checkbox,
.form-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-gray-300);
  background: white;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  flex-shrink: 0;
}

.dark .form-checkbox,
.dark .form-radio {
  background: var(--color-gray-700);
  border-color: var(--color-gray-500);
}

/* =============================================================================
   Table Styles - Clean, refined with hover effects
   ============================================================================= */

.table-container {
  overflow-x: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-gray-200);
  background: white;
}

.dark .table-container {
  border-color: var(--color-gray-700);
  background: var(--color-gray-800);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  padding: 0.875rem var(--space-4);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  white-space: nowrap;
}

[dir="rtl"] .table th {
  text-align: right;
}

.dark .table th {
  background: var(--color-gray-900);
  color: var(--color-gray-400);
  border-color: var(--color-gray-700);
}

.table td {
  padding: 0.875rem var(--space-4);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
  vertical-align: middle;
}

.dark .table td {
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
}

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

.table tbody tr {
  transition: background var(--transition-fast);
}

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

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

/* Table row clickable */
.table tbody tr.clickable {
  cursor: pointer;
}

.table tbody tr.clickable:hover {
  background: rgb(88 86 235 / 0.04);
}

.dark .table tbody tr.clickable:hover {
  background: rgb(88 86 235 / 0.1);
}

/* Selected row */
.table tbody tr.selected {
  background: rgb(88 86 235 / 0.06);
}

.dark .table tbody tr.selected {
  background: rgb(88 86 235 / 0.15);
}

/* Sortable Headers */
.table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.table th.sortable:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}

.dark .table th.sortable:hover {
  background: var(--color-gray-800);
  color: var(--color-gray-300);
}

.table th.sorted {
  color: var(--color-primary-600);
}

/* Sticky Header */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 var(--color-gray-200);
}

.dark .table-sticky thead th {
  box-shadow: 0 1px 0 var(--color-gray-700);
}

/* Numeric Columns */
.table td.numeric,
.table th.numeric {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Amount Columns */
.amount {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Primary cell content */
.table td.primary {
  font-weight: 500;
  color: var(--color-gray-900);
}

.dark .table td.primary {
  color: var(--color-gray-100);
}

/* Secondary/muted cell content */
.table td.secondary {
  color: var(--color-gray-500);
  font-size: 0.8125rem;
}

/* Compact table variant */
.table-compact th,
.table-compact td {
  padding: 0.625rem var(--space-3);
}

/* Striped table */
.table-striped tbody tr:nth-child(even) {
  background: var(--color-gray-50);
}

.dark .table-striped tbody tr:nth-child(even) {
  background: var(--color-gray-900);
}

/* Borderless variant */
.table-borderless td {
  border-bottom: none;
}

/* Table with row dividers only */
.table-divided th {
  background: transparent;
  border-bottom: 2px solid var(--color-gray-200);
}

/* =============================================================================
   Badge Styles - Refined with subtle animations
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Dark mode badges */
.dark .badge-gray {
  background: var(--color-gray-700);
  color: var(--color-gray-300);
}

.dark .badge-primary {
  background: rgb(88 86 235 / 0.2);
  color: var(--color-primary-400);
}

.dark .badge-success {
  background: rgb(16 185 129 / 0.2);
  color: var(--color-success-400);
}

.dark .badge-warning {
  background: rgb(245 158 11 / 0.2);
  color: var(--color-warning-400);
}

.dark .badge-error {
  background: rgb(239 68 68 / 0.2);
  color: var(--color-error-400);
}

/* Outlined badge variant */
.badge-outlined {
  background: transparent;
  border: 1px solid currentColor;
}

/* Dot Badge with pulse animation for active states */
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2); opacity: 0; }

/* =============================================================================
   Avatar Styles
   ============================================================================= */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: 600;
  text-transform: uppercase;
  background: var(--color-primary-400);
  color: white;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

/* =============================================================================
   Stat Card Styles - Refined with visual hierarchy
   ============================================================================= */

.stat-card {
  position: relative;
  background: white;
  border-radius: var(--radius-card);
  padding: var(--space-5);
  border: 1px solid var(--color-gray-100);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  overflow: hidden;
}

.dark .stat-card {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark .stat-card:hover {
  border-color: var(--color-gray-600);
}

/* Icon background variants */
.stat-card-icon-primary {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

.dark .stat-card-icon-primary {
  background: rgb(88 86 235 / 0.2);
  color: var(--color-primary-400);
}

.dark .stat-card-icon-success {
  background: rgb(16 185 129 / 0.2);
  color: var(--color-success-400);
}

.dark .stat-card-label {
  color: var(--color-gray-400);
}

.dark .stat-card-value {
  color: var(--color-gray-50);
}

.dark .stat-card-change-positive {
  color: var(--color-success-400);
  background: rgb(16 185 129 / 0.15);
}

.dark .stat-card-change-negative {
  color: var(--color-error-400);
  background: rgb(239 68 68 / 0.15);
}

/* Compact stat variant */
.stat-card-compact {
  padding: var(--space-4);
}

/* Horizontal stat layout */
.stat-card-horizontal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Mini sparkline area */
.stat-card-sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  opacity: 0.15;
}

/* =============================================================================
   Empty State
   ============================================================================= */

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

.dark .empty-state-title {
  color: var(--color-gray-100);
}

/* =============================================================================
   Loading States
   ============================================================================= */

.skeleton {
  background: var(--color-gray-200) 50%, var(--color-gray-200);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* HTMX Loading */
.htmx-request .htmx-indicator {
  display: inline-flex;
}

.htmx-indicator {
  display: none;
}

/* =============================================================================
   Dropdown Menu
   ============================================================================= */

.dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 200px;
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
}

.dark .dropdown-menu {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark .dropdown-item {
  color: var(--color-gray-300);
}

.dark .dropdown-item:hover {
  background: var(--color-gray-700);
}

.dark .dropdown-divider {
  background: var(--color-gray-700);
}

/* =============================================================================
   Modal Styles
   ============================================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
}

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

.modal-content {
  background: white;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - var(--space-8));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dark .modal-content {
  background: var(--color-gray-800);
}

.modal-sm .modal-content {
  max-width: 400px;
}

.modal-lg .modal-content {
  max-width: 700px;
}

.modal-xl .modal-content {
  max-width: 900px;
}

.modal-fullscreen .modal-content {
  max-width: none;
  max-height: none;
  height: 100%;
  border-radius: 0;
}

.dark .modal-header {
  border-color: var(--color-gray-700);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-gray-900);
}

.dark .modal-title {
  color: var(--color-gray-100);
}

.dark .modal-footer {
  border-color: var(--color-gray-700);
  background: var(--color-gray-900);
}

/* =============================================================================
   Toast Notifications
   ============================================================================= */

.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-gray-200);
  min-width: 320px;
  max-width: 420px;
}

.dark .toast {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark .toast-title {
  color: var(--color-gray-100);
}

/* =============================================================================
   Module cards (home page)
   -----------------------------------------------------------------------------
   This block used to lay the card out itself -- flex-column, centred, 24px
   padding -- and silently won against the utilities in the template, so the
   home page kept rendering icon-above-centred no matter what the markup said.
   It also carried fifteen per-module colour ramps (.module-card-icon.accounting
   and friends), each with its own shadow, for a brand whose whole argument is
   that modules are told apart by glyph and never by colour. Nothing referenced
   those classes any more.

   The card is laid out in the template now. What is left here is the one thing
   worth stating centrally: the hover, which moves colour and nothing else.
   ============================================================================= */

.module-card:hover {
  background: var(--surface, #F4F4F1);
  border-color: var(--line-strong, #C9CAC6);
}

.dark .module-card:hover {
  background: var(--dark-card, #1A1C21);
  border-color: var(--dark-line, #2A2D33);
}

/* =============================================================================
   Sidebar Styles
   ============================================================================= */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: white;
  border-right: 1px solid var(--color-gray-200);
  z-index: var(--z-fixed);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-base);
}

[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--color-gray-200);
}

.dark .sidebar {
  background: var(--color-gray-900);
  border-color: var(--color-gray-800);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.dark .sidebar-header {
  border-color: var(--color-gray-800);
}

.dark .sidebar-logo {
  color: white;
}

.dark .sidebar-item {
  color: var(--color-gray-400);
}

.dark .sidebar-item:hover {
  background: var(--color-gray-800);
  color: white;
}

.sidebar-item.active {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.dark .sidebar-item.active {
  background: var(--color-primary-900);
  color: var(--color-primary-400);
}

/* =============================================================================
   Header Styles
   ============================================================================= */

.header {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-width);
  height: var(--header-height);
  background: white;
  border-bottom: 1px solid var(--color-gray-200);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  transition: left var(--transition-base);
}

[dir="rtl"] .header {
  left: 0;
  right: var(--sidebar-width);
}

.dark .header {
  background: var(--color-gray-900);
  border-color: var(--color-gray-800);
}

.header.sidebar-collapsed {
  left: var(--sidebar-collapsed-width);
}

[dir="rtl"] .header.sidebar-collapsed {
  left: 0;
  right: var(--sidebar-collapsed-width);
}

/* =============================================================================
   Main Content Area
   ============================================================================= */

.main-content {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  padding: var(--space-6);
  min-height: calc(100vh - var(--header-height));
  transition: margin-left var(--transition-base);
}

[dir="rtl"] .main-content {
  margin-left: 0;
  margin-right: var(--sidebar-width);
}

.main-content.sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

[dir="rtl"] .main-content.sidebar-collapsed {
  margin-left: 0;
  margin-right: var(--sidebar-collapsed-width);
}

/* =============================================================================
   Page Header
   ============================================================================= */

.page-header {
  margin-bottom: var(--space-6);
}

.dark .page-title {
  color: white;
}

/* =============================================================================
   Breadcrumbs
   ============================================================================= */

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

.dark .breadcrumb-current {
  color: var(--color-gray-300);
}

/* =============================================================================
   Enhanced Animations & Micro-interactions
   ============================================================================= */

/* Fade-in animation for cards and content */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Staggered fade-in for lists */
.animate-stagger > * {
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

/* Slide-in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }

/* Scale pulse for notifications and badges */
@keyframes scalePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }

/* Enhanced button press effect */
.btn-press {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Card lift effect on hover */
.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Row hover, focus and input states.
 *
 * These were accent-tinted glows, which the brand does not use: hover tints a
 * secondary surface, focus is a 2px carbon ring offset by 2px, and an input
 * sharpens its border rather than blooming. Class names are kept so the ~200
 * call sites do not have to change.
 */
.table-glow tbody tr {
  transition: background-color 140ms ease-out;
}

.dark .table-glow tbody tr:hover {
  background: var(--dark-line);
}

/* :focus-visible so a pointer click does not draw a ring, only keyboard focus. */
.focus-ring:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* Shimmer loading effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: var(--color-gray-200) 50%,
    var(--color-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.dark .shimmer {
  background: var(--color-gray-700) 50%,
    var(--color-gray-700) 75%
  );
  background-size: 200% 100%;
}

/* Badge bounce on update */
@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.15); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }

/* Subtle hover effect for clickable rows */
.row-clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.dark .row-clickable:hover {
  background: var(--color-gray-800);
}

/* Icon button hover scale */
.icon-hover {
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Gradient border effect */
.gradient-border {
  position: relative;
  background: white;
  border-radius: var(--radius-card);
}

/* Smooth number transitions for counters */
.number-transition {
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

/* Tooltip arrow animation */
@keyframes tooltipFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }

/* =============================================================================
   Utilities
   -----------------------------------------------------------------------------
   What used to live here was a second copy of forty Tailwind utility names --
   .flex, .items-center, .gap-2, .hidden, .text-right and the rest. Two
   definitions of the same utility makes "which one applies" a question about
   stylesheet order rather than about the markup, and .gap-2 resolved to a
   different value here than it does in Tailwind. Only the app-specific ones are
   left.
   ============================================================================= */

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

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .header {
    left: 0;
  }

  [dir="rtl"] .header {
    right: 0;
  }

  .main-content {
    margin-left: 0;
  }

  [dir="rtl"] .main-content {
    margin-right: 0;
  }

  .hide-mobile { display: none; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none; }
}