/* Auto-generated - DO NOT EDIT */
/* Generated: 2026-02-07T16:51:10.179Z */
/* Git: cbd5203 */
/* Source: 39 files from frontend/public/css/admin/ */

/* === tokens.css === */
/**
 * Component/Feature: Design Tokens
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * CSS Custom Properties for the admin console.
 * All design values should be defined here and referenced by other CSS files.
 *
 * Token Categories:
 * - Colors (primary, background, text, status, border)
 * - Spacing (base unit, scale)
 * - Border Radius
 * - Shadows
 * - Z-Index layers
 * - Transitions
 * - Typography
 * - Layout
 * - Modal-specific
 * - Dark Mode overrides
 */

:root {
  /* ==========================================================================
     Color Tokens - Primary / Brand
     ========================================================================== */
  --color-primary: #667eea;
  --color-primary-hover: #5a67d8;
  --color-primary-light: #f5f7ff;
  --color-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --color-accent: #764ba2;

  /* Indigo variants (used throughout admin) */
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-light: #cbd5f5;

  /* ==========================================================================
     Color Tokens - Background
     ========================================================================== */
  --color-bg-base: #ffffff;
  --color-bg-elevated: #f9fafb;
  --color-bg-muted: #f3f4f6;
  --color-bg-hover: #f5f5f5;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  --color-bg-overlay-dark: rgba(0, 0, 0, 0.7);

  /* Slate/Gray background scale */
  --color-bg-slate-50: #f8fafc;
  --color-bg-slate-100: #f1f5f9;
  --color-bg-slate-200: #e2e8f0;

  /* ==========================================================================
     Color Tokens - Text
     ========================================================================== */
  --color-text-primary: #333333;
  --color-text-secondary: #6b7280;
  --color-text-muted: #666666;
  --color-text-disabled: #9e9e9e;
  --color-text-inverse: #ffffff;
  --color-text-link: #667eea;
  --color-text-heading: #374151;

  /* Slate/Gray text scale */
  --color-text-slate-400: #9ca3af;
  --color-text-slate-500: #64748b;
  --color-text-slate-600: #475569;
  --color-text-slate-700: #334155;
  --color-text-slate-800: #1e293b;
  --color-text-slate-900: #111827;
  --color-text-slate-950: #0f172a;

  /* ==========================================================================
     Color Tokens - Border
     ========================================================================== */
  --color-border-default: #e5e7eb;
  --color-border-light: #e0e0e0;
  --color-border-hover: #d1d5db;
  --color-border-focus: #667eea;

  /* Slate border scale */
  --color-border-slate-200: #e2e8f0;

  /* ==========================================================================
     Color Tokens - Status: Success
     ========================================================================== */
  --color-success: #10b981;
  --color-success-bg: #d1fae5;
  --color-success-bg-light: #ecfdf5;
  --color-success-text: #065f46;

  /* ==========================================================================
     Color Tokens - Status: Error
     ========================================================================== */
  --color-error: #ef4444;
  --color-error-bg: #fee2e2;
  --color-error-bg-light: #fef2f2;
  --color-error-text: #991b1b;
  --color-error-hover: #dc2626;
  --color-error-dark: #b91c1c;
  --color-error-light: #f87171;

  /* ==========================================================================
     Color Tokens - Status: Warning
     ========================================================================== */
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #78350f;

  /* ==========================================================================
     Color Tokens - Status: Info
     ========================================================================== */
  --color-info: #3b82f6;
  --color-info-bg: #dbeafe;
  --color-info-bg-light: #eff6ff;
  --color-info-text: #1e40af;

  /* ==========================================================================
     Color Tokens - Interactive States
     ========================================================================== */
  --color-focus-ring: rgba(102, 126, 234, 0.3);
  --color-focus-ring-indigo: rgba(99, 102, 241, 0.1);
  --color-focus-ring-indigo-strong: rgba(99, 102, 241, 0.15);
  --color-selection: rgba(102, 126, 234, 0.1);

  /* ==========================================================================
     Color Tokens - Badge
     ========================================================================== */
  --color-badge-warning-bg: #fbbf24;
  --color-badge-warning-text: #78350f;
  --color-badge-info-bg: #60a5fa;
  --color-badge-info-text: #1e3a8a;

  /* ==========================================================================
     Color Tokens - Dark Mode
     Referenced via [data-theme="dark"] selectors
     ========================================================================== */
  --color-bg-base-dark: #1a1a2e;
  --color-bg-elevated-dark: #25253d;
  --color-bg-muted-dark: #2a2a2a;
  --color-bg-hover-dark: #333333;
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-dark: #aaaaaa;
  --color-text-muted-dark: rgba(255, 255, 255, 0.7);
  --color-border-default-dark: #444444;
  --color-border-light-dark: #3a3a3a;
  --color-surface-dark: #2a2a2a;

  /* ==========================================================================
     Spacing Tokens
     ========================================================================== */
  /* Base unit (4px grid) */
  --spacing-base: 4px;

  /* Spacing scale */
  --spacing-xs: 4px;    /* 1 unit */
  --spacing-sm: 8px;    /* 2 units */
  --spacing-md: 16px;   /* 4 units */
  --spacing-lg: 24px;   /* 6 units */
  --spacing-xl: 32px;   /* 8 units */
  --spacing-2xl: 48px;  /* 12 units */

  /* Component-specific spacing */
  --spacing-input-padding: 12px 16px;
  --spacing-btn-padding: 12px 24px;
  --spacing-card-padding: 40px;
  --spacing-gap-sm: 8px;
  --spacing-gap-md: 12px;
  --spacing-gap-lg: 16px;

  /* ==========================================================================
     Border Radius Tokens
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Legacy/specific values */
  --radius-10: 10px;
  --radius-14: 14px;
  --radius-34: 34px;
  --radius-999: 999px;

  /* ==========================================================================
     Shadow Tokens
     ========================================================================== */
  /* Scale shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-sm-dark: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* Specific/semantic shadows */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.2);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-dropdown-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-modal-heavy: 0 12px 32px rgba(0, 0, 0, 0.3);
  --shadow-button-primary: 0 2px 8px rgba(102, 126, 234, 0.3);
  --shadow-button-primary-hover: 0 4px 12px rgba(102, 126, 234, 0.4);
  --shadow-button-primary-light: 0 4px 12px rgba(102, 126, 234, 0.2);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.15);
  --shadow-focus-light: 0 0 0 3px rgba(99, 102, 241, 0.1);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-sticky: 0 -2px 8px rgba(0, 0, 0, 0.1);

  /* Slate-tinted shadows */
  --shadow-slate-sm: 0 4px 10px rgba(15, 23, 42, 0.15);
  --shadow-slate-md: 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-slate-lg: 0 6px 18px rgba(15, 23, 42, 0.25);

  /* Blue-tinted shadows */
  --shadow-blue-glow: 0 6px 18px rgba(37, 99, 235, 0.25);

  /* ==========================================================================
     Z-Index Tokens
     ========================================================================== */
  --z-base: 1;
  --z-above: 2;
  --z-raised: 5;
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-header: 200;
  --z-sidebar: 300;
  --z-modal-backdrop: 1000;
  --z-modal: 1001;
  --z-toast: 9999;
  --z-tooltip: 10000;
  --z-max: 10001;

  /* ==========================================================================
     Transition Tokens
     ========================================================================== */
  /* Duration */
  --transition-fast: 0.15s;
  --transition-normal: 0.2s;
  --transition-slow: 0.3s;

  /* Easing */
  --ease-default: ease;
  --ease-in-out: ease-in-out;
  --ease-material: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Common transitions */
  --transition-color: color 0.2s ease;
  --transition-bg: background-color 0.2s ease;
  --transition-border: border-color 0.2s ease;
  --transition-transform: transform 0.2s ease;
  --transition-opacity: opacity 0.2s ease;
  --transition-all: all 0.2s ease;
  --transition-all-fast: all 0.15s ease;
  --transition-all-slow: all 0.3s ease;

  /* Animation-specific */
  --transition-modal-enter: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
  --transition-modal-scale: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;

  /* ==========================================================================
     Typography Tokens
     ========================================================================== */
  /* Font families */
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-base: var(--font-family-system);

  /* Font sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==========================================================================
     Layout Tokens
     ========================================================================== */
  /* Container widths */
  --container-max-width: 1200px;
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 60px;

  /* Breakpoints (for reference - use media queries) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* ==========================================================================
     Modal Tokens (Admin-specific)
     ========================================================================== */
  /* Modal spacing (8/16/24/32px scale) */
  --modal-spacing-xs: 8px;
  --modal-spacing-sm: 16px;
  --modal-spacing-md: 24px;
  --modal-spacing-lg: 32px;

  /* Modal dimensions */
  --modal-header-height: 56px;
  --modal-header-height-mobile: 48px;
  --modal-max-width: 500px;
  --modal-max-width-lg: 800px;

  /* Modal colors */
  --modal-separator-color: rgba(0, 0, 0, 0.12);
  --modal-backdrop-color: rgba(0, 0, 0, 0.5);
}

/* === base.css === */
/**
 * Component/Feature: Base
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Resets, typography, and element defaults.
 * This file contains ONLY element selectors - no feature classes.
 */

/* ==========================================================================
   Variables (rare - prefer tokens.css)
   ========================================================================== */

/* ==========================================================================
   Base - Resets
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   Base - Body Defaults
   ========================================================================== */

body {
  font-family: var(--font-family-base);
  background: var(--color-primary-gradient);
  min-height: 100vh;
}

/* ==========================================================================
   Base - Login Page Centering
   TODO: Move to features/login.css in Story 1.6+ when login styles are extracted
   ========================================================================== */

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ==========================================================================
   States (.is-*, .has-*)
   ========================================================================== */

/* No base-level states - feature-specific states in respective files */

/* === layout.css === */
/**
 * Component/Feature: Layout
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Admin shell, sidebar, grids, and containers.
 * Includes dark theme and responsive overrides.
 */

/* ==========================================================================
   Variables (rare - prefer tokens.css)
   ========================================================================== */

/* ==========================================================================
   Base - Container
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
}

/* ==========================================================================
   Base - Admin Console Shell
   ========================================================================== */

.admin-console {
  background: var(--color-bg-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.admin-console.show {
  display: flex;
}

/* ==========================================================================
   Base - Admin Header
   ========================================================================== */

.admin-header {
  background: var(--color-primary-gradient);
  color: var(--color-text-inverse);
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-header h1 {
  font-size: var(--font-size-2xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-md);
}

/* ==========================================================================
   Base - Admin Main Content Wrapper
   ========================================================================== */

.admin-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ==========================================================================
   Base - Admin Sidebar Navigation
   ========================================================================== */

.admin-sidebar {
  width: var(--sidebar-width);
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border-default);
  display: flex;
  flex-direction: column;
  transition: width var(--transition-slow) var(--ease-default);
  overflow: hidden;
  flex-shrink: 0;
}

.admin-sidebar.collapsed {
  width: 70px;
}

.sidebar-toggle {
  padding: var(--spacing-md);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: var(--transition-all-slow);
}

.sidebar-toggle:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary);
}

.sidebar-toggle .material-icons {
  font-size: 24px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) 0;
  overflow-y: auto;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 14px 20px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-all);
  text-align: left;
  white-space: nowrap;
}

.sidebar-item:hover {
  background: var(--color-bg-muted);
  color: var(--color-primary);
}

.sidebar-item.active {
  background: var(--color-info-bg-light);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}

.sidebar-item .material-icons {
  font-size: 22px;
  flex-shrink: 0;
}

.sidebar-label {
  transition: opacity var(--transition-slow) var(--ease-default);
}

.admin-sidebar.collapsed .sidebar-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.admin-sidebar.collapsed .sidebar-item {
  padding: 14px;
  justify-content: center;
}

/* ==========================================================================
   Base - RTL Support for Sidebar
   ========================================================================== */

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

[dir="rtl"] .sidebar-nav {
  direction: rtl;
}

[dir="rtl"] .sidebar-item {
  flex-direction: row-reverse;
  text-align: right;
  border-left: none;
  border-right: 3px solid transparent;
}

[dir="rtl"] .sidebar-item.active {
  border-right-color: var(--color-primary);
}

/* ==========================================================================
   Base - Admin Body Content Area
   ========================================================================== */

.admin-body {
  flex: 1;
  padding: var(--spacing-xl);
  overflow-y: auto;
}

/* ==========================================================================
   States (.is-*, .has-*)
   ========================================================================== */

/* Hide navigation bars when fullscreen modal is open */
body.modal-fullscreen-open .mobile-bottom-nav,
body.modal-fullscreen-open .admin-sidebar,
body.modal-fullscreen-open #mobileBottomNav,
body.modal-fullscreen-open #adminSidebar {
  display: none !important;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

body.dark-theme {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.dark-theme .admin-console {
  background: #1e293b;
}

.dark-theme .admin-body {
  background: #1e293b;
  color: #e2e8f0;
}

.dark-theme .admin-sidebar {
  background: #0f172a;
  border-right-color: #334155;
}

/* Dark theme RTL sidebar border */
.dark-theme [dir="rtl"] .admin-sidebar {
  border-left-color: #334155;
}

.dark-theme .sidebar-item {
  color: #94a3b8;
}

.dark-theme .sidebar-item:hover {
  background: #1e293b;
  color: #e2e8f0;
}

.dark-theme .sidebar-item.active {
  background: rgba(102, 126, 234, 0.15);
  color: #a5b4fc;
}

/* ==========================================================================
   Responsive - Tablet/Desktop (768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Prevent horizontal scrolling */
  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .admin-console, .container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .admin-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  /* Body and Container Mobile */
  body {
    padding: 10px;
    align-items: flex-start;
    padding-top: 20px;
  }

  .container {
    max-width: 100%;
  }

  /* Admin Console Mobile */
  .admin-console {
    border-radius: 8px;
    margin: 0;
  }

  .admin-header {
    padding: 16px 20px;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .admin-header h1 {
    font-size: 20px;
    width: 100%;
    text-align: center;
  }

  .admin-body {
    padding: 20px;
  }

  /* Hide Sidebar on Mobile */
  .admin-sidebar {
    display: none;
  }

  /* ==========================================================================
     Mobile Bottom Navigation (Viewport Width)
     Duplicates touch-device styles for browser dev tools mobile emulation
     ========================================================================== */

  /* Mobile Bottom Navigation */
  .mobile-bottom-nav {
    display: none; /* Hidden by default (login screen) */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999 !important;
    padding: 8px 0;
    justify-content: space-around;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Show mobile nav only when admin console is visible */
  .admin-console.show ~ .mobile-bottom-nav {
    display: flex;
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 8px 12px;
    transition: all 0.2s;
    flex: 1;
    max-width: 80px;
  }

  .mobile-nav-item .material-icons {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .mobile-nav-label {
    font-size: 11px;
    font-weight: 500;
  }

  .mobile-nav-item.active {
    color: #667eea;
  }

  /* Add padding to admin-body to account for bottom nav */
  .admin-body {
    padding-bottom: 80px;
  }

  /* Hide desktop tabs on mobile */
  .tabs {
    display: none !important;
  }

  /* Mobile Menu Overlay */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    transition: opacity 0.3s ease;
  }

  .mobile-menu-overlay.hidden {
    display: none;
  }

  .mobile-menu-content {
    background: white;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
  }

  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
  }

  .mobile-menu-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }

  .mobile-menu-overlay .btn-close {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
  }

  .mobile-menu-items {
    padding: 12px 0;
  }

  .mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    color: #374151;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
  }

  .mobile-menu-item:active {
    background: #f3f4f6;
  }

  .mobile-menu-item .material-icons {
    font-size: 24px;
    color: #6b7280;
  }
}

/* ==========================================================================
   Responsive - Small Mobile (480px)
   ========================================================================== */

@media (max-width: 480px) {
  body {
    padding: 5px;
    padding-top: 15px;
  }

  .admin-header {
    padding: 12px 16px;
  }

  .admin-header h1 {
    font-size: 18px;
  }

  .admin-body {
    padding: 16px;
  }
}

/* ==========================================================================
   Responsive - Landscape Mobile
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
  body {
    padding: 5px;
    padding-top: 10px;
  }

  .admin-header {
    padding: 12px 16px;
    flex-direction: row;
    justify-content: space-between;
  }

  .admin-header h1 {
    font-size: 18px;
  }

  .admin-body {
    padding: 16px;
  }
}

/* ==========================================================================
   Responsive - Touch Devices (Mobile Bottom Navigation)
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  .btn:hover {
    transform: none;
    box-shadow: none;
  }

  .tab:hover {
    color: inherit;
  }

  .tab.active:hover {
    color: #667eea;
  }

  /* Increase touch targets */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .tab {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-secondary:hover {
    background: white;
  }

  .btn-danger:hover {
    background: #ef4444;
  }

  /* Mobile Bottom Navigation */
  .mobile-bottom-nav {
    display: none; /* Hidden by default (login screen) */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999 !important;
    padding: 8px 0;
    justify-content: space-around;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Show mobile nav only when admin console is visible */
  .admin-console.show ~ .mobile-bottom-nav {
    display: flex;
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 8px 12px;
    transition: all 0.2s;
    flex: 1;
    max-width: 80px;
  }

  .mobile-nav-item .material-icons {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .mobile-nav-label {
    font-size: 11px;
    font-weight: 500;
  }

  .mobile-nav-item.active {
    color: #667eea;
  }

  /* Add padding to admin-body to account for bottom nav */
  .admin-body {
    padding-bottom: 80px;
  }

  /* Hide desktop tabs on mobile */
  .tabs {
    display: none !important;
  }

  /* Mobile Menu Overlay */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* Above bottom nav (z-index 9999) so menu fully covers it */
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    transition: opacity 0.3s ease;
  }

  .mobile-menu-overlay.hidden {
    display: none;
  }

  .mobile-menu-content {
    background: white;
    border-radius: 16px 16px 0 0;
    width: 100%;
    /* Leave room for safe area / nav; body is fully covered by overlay */
    max-height: 85vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
  }

  .mobile-menu-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
  }

  .mobile-menu-overlay .btn-close {
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
  }

  .mobile-menu-items {
    padding: 12px 0;
  }

  .mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    color: #374151;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
  }

  .mobile-menu-item:active {
    background: #f3f4f6;
  }

  .mobile-menu-item .material-icons {
    font-size: 24px;
    color: #6b7280;
  }
}

/* ==========================================================================
   Responsive - Hide Mobile Navigation on Desktop
   ========================================================================== */

@media (min-width: 769px) {
  .mobile-bottom-nav,
  .mobile-menu-overlay {
    display: none !important;
  }
}

/* === components/admin-cards.css === */
/**
 * Component: Admin Cards
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Admin card system for mobile entity display (products, categories).
 * Includes grid layout, card structure, and responsive styles.
 */

/* ==========================================================================
   Base - Admin Card Grid
   ========================================================================== */

.admin-card-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
}

/* ==========================================================================
   Base - Admin Card
   ========================================================================== */

.admin-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-all);
}

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

/* ==========================================================================
   Base - Admin Card Header
   ========================================================================== */

.admin-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border-default);
}

.admin-card-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ==========================================================================
   Base - Admin Card Icons
   ========================================================================== */

.admin-card-icon-large {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.admin-card-icon-display {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.admin-card-icon-display .material-icons {
  font-size: 24px;
}

/* ==========================================================================
   Base - Admin Card Body
   ========================================================================== */

.admin-card-body {
  padding: var(--spacing-lg);
}

.admin-card-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs) 0;
  line-height: 1.3;
}

.admin-card-name-secondary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-md) 0;
  direction: rtl;
  text-align: right;
}

/* ==========================================================================
   Base - Admin Card Info
   ========================================================================== */

.admin-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.admin-card-info-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.admin-card-info-item .material-icons {
  font-size: 16px;
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   Base - Admin Card Actions
   ========================================================================== */

.admin-card-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border-default);
}

.admin-card-actions .btn {
  flex: 1;
  justify-content: center;
}

/* ==========================================================================
   Base - Admin Status Badge
   ========================================================================== */

.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.admin-status-badge.active {
  background: var(--color-success-bg-light);
  color: var(--color-success);
}

.admin-status-badge.inactive {
  background: var(--color-bg-muted);
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .admin-card {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .admin-card-header {
  background: #0f172a;
  border-bottom-color: #334155;
}

.dark-theme .admin-card-icon-display {
  background: #334155;
  color: #94a3b8;
}

.dark-theme .admin-card-name {
  color: #e2e8f0;
}

.dark-theme .admin-card-name-secondary {
  color: #94a3b8;
}

.dark-theme .admin-card-info-item {
  color: #94a3b8;
}

.dark-theme .admin-card-info-item .material-icons {
  color: #64748b;
}

.dark-theme .admin-card-actions {
  background: #0f172a;
  border-top-color: #334155;
}

.dark-theme .admin-status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.dark-theme .admin-status-badge.inactive {
  background: #334155;
  color: #64748b;
}

/* ==========================================================================
   Responsive - Mobile (768px)
   ========================================================================== */

@media (max-width: 768px) {
  .admin-card-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-card-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .admin-card-body {
    padding: var(--spacing-md);
  }

  .admin-card-actions {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-wrap: wrap;
  }

  .admin-card-actions .btn {
    min-width: calc(50% - var(--spacing-xs));
  }
}

/* ==========================================================================
   Responsive - Small Mobile (480px)
   ========================================================================== */

@media (max-width: 480px) {
  .admin-card-grid {
    padding: var(--spacing-sm);
    gap: var(--spacing-md);
  }

  .admin-card-icon-large,
  .admin-card-icon-display {
    width: 40px;
    height: 40px;
  }

  .admin-card-icon-display .material-icons {
    font-size: 20px;
  }

  .admin-card-name {
    font-size: var(--font-size-base);
  }
}

/* === components/badges.css === */
/**
 * Component: Badges
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Badge system for status indicators, labels, and tags.
 * Includes color variants and size modifiers.
 */

/* ==========================================================================
   Base - Badge
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge .material-icons {
  font-size: 14px;
}

/* ==========================================================================
   Variants - Color
   ========================================================================== */

.badge-primary {
  background: var(--color-info-bg-light);
  color: var(--color-primary);
}

.badge-secondary {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.badge-success {
  background: var(--color-success-bg-light);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-bg-light);
  color: var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-bg-light);
  color: var(--color-danger);
}

.badge-info {
  background: var(--color-info-bg-light);
  color: var(--color-info);
}

/* ==========================================================================
   Base - Status Badge
   ========================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.active,
.status-badge.online,
.status-badge.success {
  background: var(--color-success-bg-light);
  color: var(--color-success);
}

.status-badge.inactive,
.status-badge.offline {
  background: var(--color-bg-muted);
  color: var(--color-text-tertiary);
}

.status-badge.pending,
.status-badge.warning {
  background: var(--color-warning-bg-light);
  color: var(--color-warning);
}

.status-badge.error,
.status-badge.danger {
  background: var(--color-danger-bg-light);
  color: var(--color-danger);
}

/* ==========================================================================
   Modifiers - Size
   ========================================================================== */

.badge-sm {
  padding: 2px 6px;
  font-size: 10px;
}

.badge-lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Modifiers - Outline
   ========================================================================== */

.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}

.badge-outline.badge-primary {
  color: var(--color-primary);
}

.badge-outline.badge-success {
  color: var(--color-success);
}

.badge-outline.badge-warning {
  color: var(--color-warning);
}

.badge-outline.badge-danger {
  color: var(--color-danger);
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .badge-primary {
  background: rgba(102, 126, 234, 0.15);
  color: #a5b4fc;
}

.dark-theme .badge-secondary {
  background: #334155;
  color: #94a3b8;
}

.dark-theme .badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.dark-theme .badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.dark-theme .badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.dark-theme .badge-info {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.dark-theme .status-badge.active,
.dark-theme .status-badge.online,
.dark-theme .status-badge.success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.dark-theme .status-badge.inactive,
.dark-theme .status-badge.offline {
  background: #334155;
  color: #64748b;
}

.dark-theme .status-badge.pending,
.dark-theme .status-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.dark-theme .status-badge.error,
.dark-theme .status-badge.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* === components/buttons.css === */
/**
 * Component/Feature: Buttons
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Button base styles, variants, and icon buttons.
 * Includes responsive and dark theme overrides.
 */

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

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   Variants - Color
   ========================================================================== */

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #f5f7ff;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}

/* ==========================================================================
   Variants - Size
   ========================================================================== */

.btn-sm {
  padding: 8px 16px;
  font-size: 12px;
}

.btn-small {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-small .material-icons {
  font-size: 16px;
}

/* ==========================================================================
   Variants - Icon Button
   ========================================================================== */

.btn-icon {
  border: none;
  background: #f1f5f9;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
}

.btn-icon:hover {
  background: #e2e8f0;
}

.btn-icon .material-icons {
  font-size: 20px;
}

.btn-icon.danger {
  color: #dc2626;
}

.btn-icon.danger:hover {
  background: #fee2e2;
}

/* ==========================================================================
   Variants - Order Button
   ========================================================================== */

.btn-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-order:hover {
  background: #059669;
}

.btn-order:active {
  background: #047857;
}

.btn-order .material-icons {
  font-size: 16px;
}

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

.btn-loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.dark-theme .btn {
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .btn-secondary {
  background: #334155;
  color: #a5b4fc;
  border-color: #4f46e5;
}

.dark-theme .btn-secondary:hover {
  background: #3f4f6b;
}

.dark-theme .btn-icon {
  background: #334155;
  color: #94a3b8;
}

.dark-theme .btn-icon:hover {
  background: #475569;
}

.dark-theme .btn-icon.danger {
  color: #f87171;
}

.dark-theme .btn-icon.danger:hover {
  background: #450a0a;
}

/* ==========================================================================
   Responsive - Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .btn {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 6px;
    min-height: 44px; /* Touch target size */
  }

  .btn-sm {
    padding: 8px 12px;
    font-size: 12px;
    min-height: 36px;
  }

  .btn-spinner {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* === components/cards.css === */
/**
 * Component/Feature: Cards
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Card base styles, grid layout, and stat cards.
 * Includes responsive and dark theme overrides.
 */

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

.card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.card h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 12px;
}

/* ==========================================================================
   Variants - Grid Layout
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.dark-theme .card,
.dark-theme .stat-card {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

.dark-theme .card h3,
.dark-theme .stat-card .label {
  color: #f1f5f9;
}

/* ==========================================================================
   Responsive - Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .card h3 {
    font-size: 16px;
  }
}

/* === components/forms.css === */
/**
 * Component/Feature: Forms
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Form groups, inputs, selects, textareas, and action containers.
 * Includes responsive and dark theme overrides.
 */

/* ==========================================================================
   Base - Form Groups
   ========================================================================== */

.form-group {
  margin-bottom: var(--modal-spacing-sm, 16px);
}

.form-group label {
  display: block;
  margin-bottom: var(--modal-spacing-xs, 8px);
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.form-group label .material-icons {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
  background: white;
}

.form-group select:focus {
  outline: none;
  border-color: #667eea;
}

.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
  resize: vertical;
  min-height: 100px;
}

.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.form-group small,
.form-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

/* ==========================================================================
   Base - Input With Action
   ========================================================================== */

.input-with-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-with-action input {
  flex: 1;
}

/* ==========================================================================
   Base - Form Actions
   ========================================================================== */

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #e5e7eb;
}

.form-actions > .btn {
  flex: 1;
}

/* ==========================================================================
   Variants - Form Sections
   ========================================================================== */

.form-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ==========================================================================
   Variants - Form Grid
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.input-error {
  border-color: #ef4444 !important;
}

.input-success {
  border-color: #10b981 !important;
}

.form-error {
  display: block;
  font-size: 12px;
  color: var(--error-color, #ef4444);
  margin-top: 4px;
  min-height: 16px;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  margin-top: 4px;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.dark-theme .form-group label {
  color: #e2e8f0;
}

.dark-theme .form-group input,
.dark-theme .form-group select,
.dark-theme .form-group textarea {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
  font-family: inherit;
}

.dark-theme .form-group input:focus,
.dark-theme .form-group select:focus,
.dark-theme .form-group textarea:focus {
  border-color: #667eea;
  background: #3f4f66;
}

body.dark-theme .form-hint {
  color: #94a3b8;
}

body.dark-theme .form-error {
  color: #f87171;
}

/* ==========================================================================
   Responsive - Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-sections {
    gap: 16px;
  }

  .form-group {
    margin-bottom: var(--modal-spacing-sm, 16px);
  }

  .form-group label {
    font-size: 14px;
    margin-bottom: var(--modal-spacing-xs, 8px);
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    font-family: inherit;
    border-radius: 6px;
  }
}

@media (max-width: 480px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px;
    font-size: 16px;
    font-family: inherit;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .btn {
    width: 100%;
  }
}

/* === components/mobile.css === */
/**
 * Component: Mobile
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Mobile-specific utilities, visibility classes, and touch interactions.
 * Includes pull-to-refresh and touch feedback styles.
 */

/* ==========================================================================
   Base - Visibility Classes
   ========================================================================== */

.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

.hidden {
  display: none !important;
}

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

/* ==========================================================================
   Base - Mobile Close Button
   ========================================================================== */

.mobile-close-button {
  display: none;
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 44px;
  height: 44px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  box-shadow: var(--shadow-card);
  transition: var(--transition-all);
}

.mobile-close-button:hover {
  background: var(--color-bg-muted);
}

.mobile-close-button .material-icons {
  font-size: 24px;
  color: var(--color-text-primary);
}

/* ==========================================================================
   Base - Pull to Refresh
   ========================================================================== */

.pull-to-refresh-container {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pull-to-refresh-indicator {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--color-bg-base);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast), top var(--transition-fast);
}

.pull-to-refresh-indicator .material-icons {
  font-size: 24px;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.pull-to-refresh-active .pull-to-refresh-indicator {
  top: 10px;
  opacity: 1;
}

.pull-to-refresh-active .pull-to-refresh-indicator .material-icons {
  animation: spin 1s linear infinite;
}

/* ==========================================================================
   Base - Touch Feedback
   ========================================================================== */

.touch-feedback-button {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.touch-feedback-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.touch-feedback-button:active::after {
  transform: translate(-50%, -50%) scale(2);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

.touch-feedback-input {
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.touch-feedback-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-info-bg-light);
}

/* ==========================================================================
   Base - Swipe Actions
   ========================================================================== */

.swipe-container {
  position: relative;
  overflow: hidden;
}

.swipe-content {
  position: relative;
  background: var(--color-bg-base);
  transition: transform var(--transition-fast);
}

.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
}

.swipe-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-lg);
  color: white;
  min-width: 80px;
}

.swipe-action.delete {
  background: var(--color-danger);
}

.swipe-action.edit {
  background: var(--color-primary);
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .mobile-close-button {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .mobile-close-button:hover {
  background: #334155;
}

.dark-theme .mobile-close-button .material-icons {
  color: #e2e8f0;
}

.dark-theme .pull-to-refresh-indicator {
  background: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .pull-to-refresh-indicator .material-icons {
  color: #a5b4fc;
}

.dark-theme .touch-feedback-button::after {
  background: rgba(255, 255, 255, 0.1);
}

.dark-theme .touch-feedback-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.dark-theme .swipe-content {
  background: #1e293b;
}

/* ==========================================================================
   Responsive - Mobile (768px)
   ========================================================================== */

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-close-button {
    display: flex;
  }

  /* Inline elements should use inline-block */
  span.mobile-only,
  a.mobile-only {
    display: inline-block !important;
  }

  /* Flex containers should use flex */
  .mobile-only.flex,
  .mobile-only[class*="flex"] {
    display: flex !important;
  }
}

/* ==========================================================================
   Responsive - Touch Devices
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Disable hover effects */
  .touch-feedback-button:hover::after {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* === components/modal.css === */
/**
 * Component/Feature: Modal
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Modal backdrop, container, header, body, actions, and variants.
 * Includes responsive and dark theme overrides.
 */

/* ==========================================================================
   Base - Backdrop / Overlay
   ========================================================================== */

.modal-backdrop,
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  backdrop-filter: blur(2px);
  opacity: 0;
  animation: backdropFadeIn 0.2s forwards;
}

/* Fallback for browsers not supporting inset */
@supports not (inset: 0) {
  .modal-backdrop,
  .modal-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@keyframes backdropFadeIn {
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Base - Container
   ========================================================================== */

.modal-container,
.modal-overlay > .modal-card {
  position: relative;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  margin: auto;
  transform: scale(0.95);
  opacity: 0;
  animation: modalPopIn 0.2s 0.1s forwards cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes modalPopIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================================================
   Variants - Size Modifiers
   ========================================================================== */

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

.modal-container.modal-md {
  max-width: 500px;
}

.modal-container.modal-lg {
  max-width: 800px;
}

.modal-container.modal-xl {
  max-width: 1100px;
}

.modal-container.modal-full {
  max-width: 95vw;
  height: 90vh;
}

/* Wrapper for raw content */
.modal-body-wrapper {
  padding: var(--modal-spacing-md);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

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

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  touch-action: none !important;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.dark-theme .modal-content-regular {
  background: #1e293b;
  color: #e2e8f0;
}

.dark-theme .modal-content-regular h3 {
  color: #f1f5f9;
}

/* ==========================================================================
   Responsive - Desktop (≥769px)
   ========================================================================== */

@media (min-width: 769px) {
  .modal-card {
    width: 100%;
    height: auto;
    max-width: none;
    border-radius: inherit;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal-overlay > .modal-card {
    max-width: 600px;
  }

  .modal-overlay > .modal-card.modal-card-medium {
    max-width: 500px;
  }

  .modal-overlay > .modal-card.modal-card-large {
    max-width: 800px;
  }

  .modal-overlay > .modal-card.modal-card-xl {
    max-width: 1100px;
  }

  .modal-overlay > .modal-card.modal-card-full {
    max-width: 95vw;
    height: 90vh;
  }

  .modal-card > .modal-header {
    flex-shrink: 0;
    height: var(--modal-header-height);
    min-height: var(--modal-header-height);
    padding: 0 var(--modal-spacing-md);
    border-bottom: 1px solid var(--separator-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-color);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .modal-card > .modal-header h3,
  .modal-card > .modal-header .modal-title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modal-card > .modal-header .btn-icon .material-icons,
  .modal-card > .modal-header [data-action="close-modal"] .material-icons {
    font-size: 24px;
    font-weight: 400;
  }

  .modal-card > .modal-body {
    flex: 1;
    padding: var(--modal-spacing-md);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal-card > .modal-actions,
  .modal-card > .form-actions {
    flex-shrink: 0;
    padding: var(--modal-spacing-sm) var(--modal-spacing-md);
    border-top: 1px solid var(--separator-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--modal-spacing-sm);
    background: var(--surface-color);
    position: sticky;
    bottom: 0;
    z-index: 10;
  }
}

/* ==========================================================================
   Responsive - Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .modal-content-regular > .modal-header,
  .modal-content-regular > header,
  .modal-content-regular > h3:first-child,
  .modal-content-regular > h2:first-child,
  .modal-content-regular form > h3:first-child,
  .modal-content-regular form > h2:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--surface-color) !important;
    border-bottom: 1px solid var(--separator-color) !important;
    height: var(--modal-header-height) !important;
    min-height: var(--modal-header-height) !important;
    padding: 0 var(--modal-spacing-md) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .modal-content-regular > .modal-header h3,
  .modal-content-regular h3:first-child {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .modal-content-regular > .modal-header .material-icons,
  .modal-content-regular > .modal-header [data-action="close-modal"] .material-icons {
    font-size: 24px !important;
    font-weight: 400 !important;
  }

  .modal-content-regular > .modal-body,
  .modal-content-regular > .form-sections,
  .modal-content-regular > form:not(.inline-edit-form),
  .modal-content-regular form:not(.inline-edit-form),
  .modal-content-regular > div:not(.modal-header):not(.modal-actions):not(header):not(footer):not(.modal-tabs):not(.modal-tab-content):not(.form-actions) {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: var(--modal-spacing-md) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    min-height: 0 !important;
  }

  .modal-content-regular > .modal-tabs,
  .modal-content-regular form > .modal-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 9 !important;
    background: white !important;
    border-bottom: 1px solid var(--separator-color) !important;
    margin: 0 !important;
    padding: 0 var(--modal-spacing-md) !important;
    flex-shrink: 0 !important;
  }

  .modal-content-regular > .modal-tab-content,
  .modal-content-regular form > .modal-tab-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: var(--modal-spacing-md) !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }

  .modal-content-regular > .modal-actions,
  .modal-content-regular > .form-actions,
  .modal-content-regular > footer,
  .modal-content-regular > .btn-group:last-child,
  .modal-content-regular form > .form-actions:last-child,
  .modal-content-regular form > div:last-child:has(button[type="submit"]),
  .modal-content-regular form > div:last-child:has(button.btn-primary) {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: var(--surface-color) !important;
    border-top: 1px solid var(--separator-color) !important;
    padding: var(--modal-spacing-sm) var(--modal-spacing-md) !important;
    padding-bottom: calc(var(--modal-spacing-sm) + env(safe-area-inset-bottom, 0)) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  .modal-content-regular form {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .modal-content-regular form .modal-tab-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }

  .modal-overlay-fullscreen {
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .user-edit-modal,
  .modal-overlay-fullscreen > div {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .modal-actions .btn,
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Base - Modal Content
   ========================================================================== */

.modal-content {
  background: white;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}

.modal-content-regular {
  background: white;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ==========================================================================
   Base - Modal Error Region
   ========================================================================== */

.modal-error-region {
  padding: 0 var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.modal-error-region:empty {
  display: none;
}

.modal-error-region .alert {
  margin-bottom: 0;
}

/* ==========================================================================
   States - Hide Navigation
   ========================================================================== */

.modal-nav-hidden .mobile-bottom-nav,
.modal-nav-hidden .admin-sidebar {
  display: none !important;
}

/* ==========================================================================
   Base - Close Button
   ========================================================================== */

.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: var(--transition-all);
}

.btn-close:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.btn-close .material-icons {
  font-size: 24px;
}

/* ==========================================================================
   Base - Inline Edit Form
   ========================================================================== */

.inline-edit-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.inline-edit-form input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.inline-edit-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-info-bg-light);
}

.inline-edit-form .btn {
  flex-shrink: 0;
}

/* ==========================================================================
   Base - Image Upload Form
   ========================================================================== */

.image-upload-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.image-upload-form .upload-area {
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-all);
}

.image-upload-form .upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-info-bg-light);
}

.image-upload-form .upload-area.dragging {
  border-color: var(--color-primary);
  background: var(--color-info-bg-light);
}

.image-upload-form .upload-area .material-icons {
  font-size: 48px;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-md);
}

.image-upload-form .upload-area p {
  color: var(--color-text-secondary);
  margin: 0;
}

.image-upload-form .upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.image-upload-form .upload-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
}

/* ==========================================================================
   Dark Theme - Modal Extras
   ========================================================================== */

.dark-theme .modal-content {
  background: #1e293b;
  color: #e2e8f0;
}

.dark-theme .btn-close {
  color: #94a3b8;
}

.dark-theme .btn-close:hover {
  background: #334155;
  color: #e2e8f0;
}

.dark-theme .inline-edit-form input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.dark-theme .inline-edit-form input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.dark-theme .image-upload-form .upload-area {
  border-color: #334155;
  background: #0f172a;
}

.dark-theme .image-upload-form .upload-area:hover,
.dark-theme .image-upload-form .upload-area.dragging {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}

.dark-theme .image-upload-form .upload-area .material-icons {
  color: #64748b;
}

.dark-theme .image-upload-form .upload-area p {
  color: #94a3b8;
}

.dark-theme .image-upload-form .upload-preview img {
  border-color: #334155;
}

/* ==========================================================================
   Responsive - Modal Extras Mobile
   ========================================================================== */

@media (max-width: 768px) {
  .modal-content,
  .modal-content-regular {
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .inline-edit-form {
    flex-wrap: wrap;
  }

  .inline-edit-form input {
    width: 100%;
    flex: none;
  }

  .inline-edit-form .btn {
    flex: 1;
  }
}

/* === components/skeleton.css === */
/**
 * Component: Skeleton Loading
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Skeleton loading placeholders with shimmer animation.
 * Includes table, card, and stat skeletons.
 */

/* ==========================================================================
   Base - Skeleton Animation
   ========================================================================== */

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

/* ==========================================================================
   Base - Skeleton Elements
   ========================================================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-text.short {
  width: 40%;
}

.skeleton-text.medium {
  width: 70%;
}

.skeleton-text.long {
  width: 100%;
}

.skeleton-image {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ==========================================================================
   Base - Skeleton Table
   ========================================================================== */

.skeleton-table {
  width: 100%;
  border-collapse: collapse;
}

.skeleton-row {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-default);
}

.skeleton-cell {
  flex: 1;
  height: 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-cell:first-child {
  flex: 0 0 48px;
  height: 48px;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Base - Skeleton Cards
   ========================================================================== */

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.skeleton-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.skeleton-card .skeleton-image {
  height: 120px;
  width: 100%;
}

.skeleton-card .skeleton-text {
  height: 14px;
}

/* ==========================================================================
   Base - Skeleton Stats
   ========================================================================== */

.skeleton-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.skeleton-stat-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.skeleton-value {
  height: 32px;
  width: 60%;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-label {
  height: 14px;
  width: 80%;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-bg-muted) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-muted) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ==========================================================================
   Base - Loading Spinner
   ========================================================================== */

.loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.loading .material-icons {
  animation: spin 1s linear infinite;
}

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

.spin {
  animation: spin 1s linear infinite;
}

/* Loading overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .skeleton,
.dark-theme .skeleton-text,
.dark-theme .skeleton-image,
.dark-theme .skeleton-cell,
.dark-theme .skeleton-value,
.dark-theme .skeleton-label {
  background: linear-gradient(
    90deg,
    #334155 25%,
    #475569 50%,
    #334155 75%
  );
  background-size: 200% 100%;
}

.dark-theme .skeleton-card,
.dark-theme .skeleton-stat-card {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .skeleton-row {
  border-bottom-color: #334155;
}

.dark-theme .loading-overlay {
  background: rgba(15, 23, 42, 0.8);
}

/* ==========================================================================
   Responsive - Mobile (768px)
   ========================================================================== */

@media (max-width: 768px) {
  .skeleton-cards {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 480px) {
  .skeleton-stats {
    grid-template-columns: 1fr;
  }
}

/* === components/states.css === */
/**
 * Component: States
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Empty states, error states, and no-results displays.
 * Includes icons, messages, and action prompts.
 */

/* ==========================================================================
   Base - Empty State
   ========================================================================== */

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

.empty-state-enhanced {
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-border-default);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.empty-state-icon .material-icons {
  font-size: 40px;
  color: var(--color-text-tertiary);
}

.empty-state-icon img,
.empty-state-icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.empty-state-message {
  max-width: 400px;
}

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

.empty-state-message p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-lg) 0;
  line-height: 1.5;
}

.empty-state .btn {
  margin-top: var(--spacing-md);
}

/* Compact Empty State */
.empty-state-compact {
  padding: var(--spacing-xl) var(--spacing-lg);
}

.empty-state-compact .empty-state-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--spacing-md);
}

.empty-state-compact .empty-state-icon .material-icons {
  font-size: 28px;
}

.empty-state-compact .empty-state-message h3 {
  font-size: var(--font-size-base);
}

.empty-state-compact .empty-state-message p {
  font-size: var(--font-size-xs);
}

/* ==========================================================================
   Base - Error State
   ========================================================================== */

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  background: var(--color-danger-bg-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-danger-border);
}

.error-state .empty-state-icon {
  background: var(--color-danger-bg-light);
  border: 2px solid var(--color-danger-border);
}

.error-state .empty-state-icon .material-icons {
  color: var(--color-danger);
}

.error-state .empty-state-message h3 {
  color: var(--color-danger);
}

.error-state .empty-state-message p {
  color: var(--color-danger);
  opacity: 0.8;
}

/* ==========================================================================
   Base - No Results
   ========================================================================== */

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-xl);
  color: var(--color-text-secondary);
}

.no-results .material-icons {
  font-size: 48px;
  color: var(--color-text-tertiary);
  margin-bottom: var(--spacing-md);
}

.no-results h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.no-results p {
  font-size: var(--font-size-sm);
  margin: 0;
}

/* ==========================================================================
   States - Loading Failed
   ========================================================================== */

.loading-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl);
  text-align: center;
}

.loading-failed .material-icons {
  font-size: 48px;
  color: var(--color-warning);
  margin-bottom: var(--spacing-md);
}

.loading-failed p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .empty-state {
  color: #94a3b8;
}

.dark-theme .empty-state-enhanced {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .empty-state-icon {
  background: #334155;
}

.dark-theme .empty-state-icon .material-icons {
  color: #64748b;
}

.dark-theme .empty-state-message h3 {
  color: #e2e8f0;
}

.dark-theme .empty-state-message p {
  color: #94a3b8;
}

.dark-theme .error-state {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.dark-theme .error-state .empty-state-icon {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.dark-theme .error-state .empty-state-icon .material-icons {
  color: #f87171;
}

.dark-theme .error-state .empty-state-message h3 {
  color: #fca5a5;
}

.dark-theme .error-state .empty-state-message p {
  color: #fca5a5;
}

.dark-theme .no-results {
  color: #94a3b8;
}

.dark-theme .no-results .material-icons {
  color: #64748b;
}

.dark-theme .no-results h4 {
  color: #e2e8f0;
}

.dark-theme .loading-failed .material-icons {
  color: #fbbf24;
}

.dark-theme .loading-failed p {
  color: #94a3b8;
}

/* ==========================================================================
   Responsive - Mobile (768px)
   ========================================================================== */

@media (max-width: 768px) {
  .empty-state {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .empty-state-icon {
    width: 64px;
    height: 64px;
  }

  .empty-state-icon .material-icons {
    font-size: 32px;
  }

  .empty-state-message h3 {
    font-size: var(--font-size-base);
  }

  .error-state {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }
}

@media (max-width: 480px) {
  .empty-state {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .empty-state-compact {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .empty-state-message {
    max-width: 100%;
  }
}

/* === components/tables.css === */
/**
 * Component/Feature: Tables
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Table base styles, wrappers, and responsive card layout.
 * Includes dark theme overrides.
 */

/* ==========================================================================
   Base - Wrappers
   ========================================================================== */

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

.table-container {
  overflow: visible;
  border-radius: 6px;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.dark-theme table th {
  background: #1e293b;
  color: #cbd5e1;
}

.dark-theme table td {
  color: #94a3b8;
  border-bottom-color: #334155;
}

.dark-theme table tr:hover {
  background: #2d3d52;
}

/* ==========================================================================
   Responsive - Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .table-container {
    overflow: visible;
    border-radius: 6px;
  }

  /* Hide table headers on mobile */
  table thead {
    display: none;
  }

  /* Convert table rows to cards on mobile */
  table tbody tr {
    display: block;
    margin-bottom: 16px;
    padding: 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Stack table cells vertically */
  table tbody td {
    display: block;
    padding: 8px 0;
    border: none;
    white-space: normal;
    word-wrap: break-word;
  }

  /* Add labels for each cell */
  table tbody td:before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: #374151;
    display: inline-block;
    min-width: 120px;
    margin-right: 8px;
  }

  /* Special handling for action buttons */
  table tbody td:last-child:before {
    content: "";
    display: none;
  }

  table tbody td:last-child {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
  }

  /* Adjust button sizes for mobile */
  table tbody td:last-child .btn {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 32px;
  }

  /* Hide checkbox column label on mobile */
  table tbody td[data-label="Select"]:before {
    display: none !important;
  }

  /* Fixed checkbox positioning - top-left */
  table tbody td[data-label="Select"] {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5;
  }

  table tbody td[data-label="Select"] input[type="checkbox"] {
    width: 28px !important;
    height: 28px !important;
    cursor: pointer;
    accent-color: #667eea;
  }

  /* Adjust card padding for checkbox on left side */
  table tbody tr {
    position: relative;
    padding-left: 52px !important;
    padding-top: 8px !important;
  }

  .table-force-visible {
    display: block !important;
  }

  .table-content-container {
    padding: 16px;
  }

  .table-container-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === components/tabs.css === */
/**
 * Component/Feature: Tabs
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Tab navigation and content containers.
 * Includes responsive and dark theme overrides.
 */

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

.tabs {
  display: none;
}

.tab {
  display: none;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ==========================================================================
   Variants - Modal Tabs
   ========================================================================== */

.modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  background: white;
}

.modal-tab {
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.modal-tab:hover {
  color: #667eea;
  background: #f9fafb;
}

.modal-tab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.modal-tab .material-icons {
  font-size: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

.modal-tab-content {
  display: none;
  padding: 16px;
}

.modal-tab-content.active {
  display: block;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.dark-theme .tabs {
  border-bottom-color: #334155;
}

.dark-theme .tab {
  color: #94a3b8;
}

.dark-theme .tab:hover {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.1);
}

.dark-theme .tab.active {
  color: #a5b4fc;
  border-bottom-color: #6366f1;
}

.dark-theme .modal-tabs {
  background: #1e293b;
  border-bottom-color: #334155;
}

.dark-theme .modal-tab {
  color: #94a3b8;
}

.dark-theme .modal-tab:hover {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.1);
}

.dark-theme .modal-tab.active {
  color: #a5b4fc;
  border-bottom-color: #6366f1;
}

/* ==========================================================================
   Responsive - Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 8px;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    padding: 12px 16px;
    font-size: 13px;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    min-width: 80px;
    border-radius: 6px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
  }

  .tab.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
    font-weight: 600;
  }

  .modal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-tab {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0 8px;
    margin-bottom: 16px;
  }

  .tab {
    padding: 10px 14px;
    font-size: 12px;
    min-width: 70px;
  }

  .tab:hover {
    background: rgba(102, 126, 234, 0.1);
  }

  .tab.active:hover {
    background: transparent;
  }

  /* Modal tabs vertical layout on small screens */
  .modal-tabs {
    flex-direction: column;
    gap: 0;
    border-bottom: none;
  }

  .modal-tab {
    border-bottom: 1px solid #e5e7eb;
    border-left: 3px solid transparent;
    padding: 12px 16px;
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 0;
  }

  .modal-tab.active {
    background: #eff6ff;
    border-left-color: #667eea;
    border-bottom-color: #e5e7eb;
  }

  .modal-tab .material-icons {
    margin-right: 8px;
  }
}

/* === components/toasts.css === */
/**
 * Component/Feature: Toasts
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Toast notifications for success, error, and warning messages.
 * Uses CSS custom properties for theming.
 */

/* ==========================================================================
   Base - Container
   ========================================================================== */

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
   Base - Toast
   ========================================================================== */

.toast {
  background: white;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 400px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ==========================================================================
   Variants - Types
   ========================================================================== */

.toast-success {
  border-left: 4px solid #10b981;
}

.toast-error {
  border-left: 4px solid #ef4444;
}

.toast-warning {
  border-left: 4px solid #f59e0b;
}

/* ==========================================================================
   Base - Icons
   ========================================================================== */

.toast .material-icons {
  font-size: 24px;
}

.toast-success .material-icons {
  color: #10b981;
}

.toast-error .material-icons {
  color: #ef4444;
}

.toast-warning .material-icons {
  color: #f59e0b;
}

/* ==========================================================================
   Base - Content
   ========================================================================== */

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #111827;
}

.toast-message {
  font-size: 14px;
  color: #6b7280;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

.dark-theme .toast {
  background: #1e293b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-theme .toast-title {
  color: #f1f5f9;
}

.dark-theme .toast-message {
  color: #94a3b8;
}

/* ==========================================================================
   Responsive - Mobile (≤768px)
   ========================================================================== */

@media (max-width: 768px) {
  .toast-container {
    top: auto;
    bottom: 20px;
    left: 16px;
    right: 16px;
  }

  .toast {
    min-width: auto;
    max-width: none;
    width: 100%;
    margin: 8px;
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 6px;
  }
}

/* === components/utilities.css === */
/**
 * Component: Utilities
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Miscellaneous utility styles including material icons, dev banner,
 * dark mode toggle, drag handles, sort indicators, and profile fields.
 */

/* ==========================================================================
   Base - Material Icons
   ========================================================================== */

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.material-icons.sm {
  font-size: 18px;
}

.material-icons.lg {
  font-size: 32px;
}

.material-icons.xl {
  font-size: 48px;
}

/* ==========================================================================
   Base - Dev Banner
   ========================================================================== */

.dev-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: white;
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  z-index: 99999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dev-banner.visible {
  display: block;
}

.dev-banner a {
  color: white;
  text-decoration: underline;
}

/* Adjust body when dev banner is present */
body.has-dev-banner {
  padding-top: 32px;
}

/* ==========================================================================
   Base - Dark Mode Toggle
   ========================================================================== */

.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  transition: var(--transition-all);
}

.dark-mode-toggle:hover {
  background: var(--color-bg-muted);
}

.dark-mode-toggle .material-icons {
  font-size: 20px;
  color: var(--color-text-secondary);
}

.dark-mode-toggle span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Base - Drag Handle
   ========================================================================== */

.drag-handle-cell {
  width: 40px;
  text-align: center;
  cursor: grab;
  color: var(--color-text-tertiary);
  transition: color var(--transition-fast);
}

.drag-handle-cell:hover {
  color: var(--color-text-secondary);
}

.drag-handle-cell:active {
  cursor: grabbing;
}

.drag-handle-cell .material-icons {
  font-size: 20px;
}

/* Dragging state */
.dragging {
  opacity: 0.5;
  background: var(--color-info-bg-light) !important;
}

.drag-over {
  border-top: 2px solid var(--color-primary) !important;
}

/* ==========================================================================
   Base - Sort Indicator
   ========================================================================== */

.sort-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-xs);
  color: var(--color-text-tertiary);
}

.sort-indicator .material-icons {
  font-size: 16px;
  transition: transform var(--transition-fast);
}

.sort-indicator.asc .material-icons {
  transform: rotate(180deg);
}

.sortable {
  cursor: pointer;
  user-select: none;
}

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

.sortable:hover .sort-indicator {
  color: var(--color-primary);
}

/* ==========================================================================
   Base - Restaurant Selector
   ========================================================================== */

.restaurant-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.restaurant-selector label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.restaurant-selector select {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-base);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.restaurant-selector select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-info-bg-light);
}

/* ==========================================================================
   Base - Password Display
   ========================================================================== */

.password-hidden {
  font-family: monospace;
  letter-spacing: 2px;
}

.password-visible {
  font-family: inherit;
  letter-spacing: normal;
}

.modal-password-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  font-family: monospace;
}

.modal-password-display .password-text {
  flex: 1;
  word-break: break-all;
}

.modal-password-display .btn-icon {
  flex-shrink: 0;
}

/* ==========================================================================
   Base - Profile Fields
   ========================================================================== */

.profile-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

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

.profile-field .value {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.profile-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Base - Account Settings
   ========================================================================== */

.account-settings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.account-settings .setting-group {
  padding: var(--spacing-lg);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.account-settings .setting-group h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.account-settings .setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border-default);
}

.account-settings .setting-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account-settings .setting-label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.account-settings .setting-label span {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.account-settings .setting-label small {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   Base - Truncate
   ========================================================================== */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .dev-banner {
  background: linear-gradient(90deg, #d97706, #dc2626);
}

.dark-theme .dark-mode-toggle:hover {
  background: #334155;
}

.dark-theme .dark-mode-toggle .material-icons,
.dark-theme .dark-mode-toggle span {
  color: #94a3b8;
}

.dark-theme .drag-handle-cell {
  color: #64748b;
}

.dark-theme .drag-handle-cell:hover {
  color: #94a3b8;
}

.dark-theme .dragging {
  background: rgba(102, 126, 234, 0.15) !important;
}

.dark-theme .drag-over {
  border-top-color: #667eea !important;
}

.dark-theme .sort-indicator {
  color: #64748b;
}

.dark-theme .sortable:hover,
.dark-theme .sortable:hover .sort-indicator {
  color: #a5b4fc;
}

.dark-theme .restaurant-selector {
  background: #0f172a;
}

.dark-theme .restaurant-selector select {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

.dark-theme .restaurant-selector select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.dark-theme .modal-password-display {
  background: #0f172a;
}

.dark-theme .profile-field .value {
  color: #e2e8f0;
}

.dark-theme .profile-info {
  background: #0f172a;
}

.dark-theme .account-settings .setting-group {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .account-settings .setting-group h4 {
  color: #e2e8f0;
}

.dark-theme .account-settings .setting-row {
  border-bottom-color: #334155;
}

.dark-theme .account-settings .setting-label span {
  color: #e2e8f0;
}

.dark-theme .account-settings .setting-label small {
  color: #64748b;
}

/* ==========================================================================
   Responsive - Mobile (768px)
   ========================================================================== */

@media (max-width: 768px) {
  .dev-banner {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .restaurant-selector {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .profile-info {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
  }

  .account-settings .setting-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* === features/audit.css === */
/**
 * Feature: Audit
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for audit log filters, table, badges, pagination, and summary.
 * History entry styles are in audit-history.css.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Audit Filters Grid
   ========================================================================== */

.audit-filters-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}

.audit-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.audit-filter span {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  font-size: var(--font-size-sm);
}

.audit-filter input,
.audit-filter select {
  padding: 10px 12px;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.audit-filter input:hover,
.audit-filter select:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-base);
}

.audit-filter input:focus,
.audit-filter select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-focus);
}

.audit-filter input::placeholder {
  color: var(--color-text-slate-400);
}

/* ==========================================================================
   Audit Summary
   ========================================================================== */

.audit-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.audit-count {
  color: var(--color-text-heading);
  font-size: 16px;
}

.audit-pagination-info {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
   Audit Loading/Empty States
   ========================================================================== */

.audit-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: 15px;
  padding: 18px 0;
}

.audit-loading.hidden {
  display: none !important;
}

.audit-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-secondary);
}

.audit-empty.hidden {
  display: none !important;
}

.audit-empty .material-icons {
  font-size: 40px;
  display: block;
  margin: 0 auto 12px;
  color: var(--color-text-slate-400);
}

/* ==========================================================================
   Audit Table
   ========================================================================== */

.audit-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-base);
  table-layout: fixed;
}

.audit-table thead {
  background: var(--color-bg-elevated);
}

.audit-table th {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border-default);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  white-space: nowrap;
  vertical-align: middle;
}

.audit-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: top;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.audit-table tbody tr {
  transition: background-color var(--transition-fast) var(--ease-default);
}

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

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

/* Initial loading state inside tbody */
.audit-table .audit-table-loading {
  text-align: center;
  padding: 24px;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Audit Table Column Sizing
   ========================================================================== */

.audit-table .col-time {
  width: 12%;
  min-width: 100px;
}

.audit-table .col-user {
  width: 15%;
  min-width: 120px;
}

.audit-table .col-action {
  width: 10%;
  min-width: 90px;
}

.audit-table .col-resource {
  width: 15%;
  min-width: 120px;
}

.audit-table .col-details {
  width: 33%;
  min-width: 200px;
}

.audit-table .col-restaurant {
  width: 15%;
  min-width: 120px;
}

/* ==========================================================================
   Audit Action Badges
   ========================================================================== */

.audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.audit-badge.create {
  background: #d1fae5;
  color: #065f46;
}

.audit-badge.update {
  background: #fef3c7;
  color: #78350f;
}

.audit-badge.delete {
  background: #fee2e2;
  color: #991b1b;
}

.audit-badge.bulk {
  background: #e0e7ff;
  color: #3730a3;
}

.audit-badge.unknown {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Audit Resource Cell
   ========================================================================== */

.audit-resource-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   Audit Details Cell
   ========================================================================== */

.audit-change-item {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 2px;
}

.audit-change-item:last-child {
  margin-bottom: 0;
}

.audit-changes-summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-slate-400);
  font-style: italic;
  margin-top: 2px;
}

/* ==========================================================================
   Audit Value Styling (replaces inline styles)
   ========================================================================== */

.audit-value-empty {
  color: var(--color-text-slate-400);
}

.audit-value-true {
  color: #047857;
}

.audit-value-false {
  color: #b91c1c;
}

/* ==========================================================================
   Audit Pagination
   ========================================================================== */

.audit-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.audit-pagination .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.audit-page-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

body.dark-theme .audit-filter span {
  color: #f1f5f9;
}

body.dark-theme .audit-filter input,
body.dark-theme .audit-filter select {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
  color: #e2e8f0;
}

body.dark-theme .audit-filter input:hover,
body.dark-theme .audit-filter select:hover {
  border-color: var(--color-border-hover-dark);
  background: var(--color-surface-dark);
}

body.dark-theme .audit-filter input:focus,
body.dark-theme .audit-filter select:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-dark);
}

body.dark-theme .audit-filter input::placeholder {
  color: #64748b;
}

body.dark-theme .audit-count {
  color: #f1f5f9;
}

body.dark-theme .audit-pagination-info {
  color: #94a3b8;
}

body.dark-theme .audit-loading {
  color: #94a3b8;
}

body.dark-theme .audit-empty {
  color: #94a3b8;
}

body.dark-theme .audit-empty .material-icons {
  color: #475569;
}

body.dark-theme .audit-table {
  background: var(--color-surface-dark);
}

body.dark-theme .audit-table thead {
  background: var(--color-bg-muted-dark);
}

body.dark-theme .audit-table th {
  color: #cbd5e1;
  border-bottom-color: var(--color-border-default-dark);
}

body.dark-theme .audit-table td {
  color: #94a3b8;
  border-bottom-color: var(--color-border-light-dark);
}

body.dark-theme .audit-table tbody tr:hover {
  background: var(--color-bg-hover-dark);
}

body.dark-theme .audit-table .audit-table-loading {
  color: #94a3b8;
}

body.dark-theme .audit-badge.create {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

body.dark-theme .audit-badge.update {
  background: rgba(254, 243, 199, 0.15);
  color: #fbbf24;
}

body.dark-theme .audit-badge.delete {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

body.dark-theme .audit-badge.bulk {
  background: rgba(224, 231, 255, 0.15);
  color: #818cf8;
}

body.dark-theme .audit-badge.unknown {
  background: rgba(107, 114, 128, 0.15);
  color: #94a3b8;
}

body.dark-theme .audit-resource-meta {
  color: #64748b;
}

body.dark-theme .audit-change-item {
  color: #94a3b8;
}

body.dark-theme .audit-changes-summary {
  color: #64748b;
}

body.dark-theme .audit-value-empty {
  color: #64748b;
}

body.dark-theme .audit-value-true {
  color: #4ade80;
}

body.dark-theme .audit-value-false {
  color: #f87171;
}

body.dark-theme .audit-page-status {
  color: #f1f5f9;
}

/* ==========================================================================
   Responsive - Mobile (<=768px)
   ========================================================================== */

@media (max-width: 768px) {
  .audit-filters-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .audit-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .audit-pagination {
    flex-direction: column;
    gap: 8px;
  }

  /* Stack table for mobile readability */
  .audit-table,
  .audit-table thead,
  .audit-table tbody,
  .audit-table th,
  .audit-table td,
  .audit-table tr {
    display: block;
  }

  .audit-table thead {
    display: none;
  }

  .audit-table tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--color-bg-base);
  }

  .audit-table td {
    border-bottom: none;
    padding: 4px 0;
    text-align: left;
    position: relative;
    padding-left: 40%;
    min-height: 28px;
  }

  .audit-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 38%;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
    font-size: var(--font-size-xs);
  }

  /* Reset column widths for mobile */
  .audit-table .col-time,
  .audit-table .col-user,
  .audit-table .col-action,
  .audit-table .col-resource,
  .audit-table .col-details,
  .audit-table .col-restaurant {
    width: auto;
    min-width: 0;
  }
}

/* === features/audit-history.css === */
/**
 * Feature: Audit History
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for history entries, actions, field changes,
 * and related displays in audit logs and modals.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   History Entry Base Styles
   ========================================================================== */

.history-entry {
  display: flex;
  align-items: flex-start;
  padding: var(--modal-spacing-sm, 16px);
  border-bottom: 1px solid var(--separator-color, rgba(0, 0, 0, 0.12));
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, border-left-color 0.15s ease;
}

.history-entry:last-child {
  border-bottom: none;
}

.history-entry:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.history-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
}

.history-entry-content {
  flex: 1;
  min-width: 0;
}

.history-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.history-action-label {
  font-weight: 500;
  color: var(--text-primary, #111827);
}

/* ==========================================================================
   History Entry Attribution
   ========================================================================== */

.history-entry-attribution {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  margin-top: 2px;
  margin-bottom: 4px;
}

/* ==========================================================================
   History Entry Timestamp
   ========================================================================== */

.history-entry-timestamp {
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  margin-top: 2px;
  margin-bottom: 8px;
}

/* ==========================================================================
   History Action Type Variants
   ========================================================================== */

/* Create */
.history-action--create {
  color: var(--color-success, #10b981);
  border-left-color: var(--color-success, #10b981);
}

.history-action--create .history-action-icon {
  background: rgba(16, 185, 129, 0.1);
}

.history-action--create .history-action-label {
  color: var(--color-success, #10b981);
}

/* Update */
.history-action--update {
  color: var(--color-warning, #f59e0b);
  border-left-color: var(--color-warning, #f59e0b);
}

.history-action--update .history-action-icon {
  background: rgba(245, 158, 11, 0.1);
}

.history-action--update .history-action-label {
  color: var(--color-warning, #f59e0b);
}

/* Delete */
.history-action--delete {
  color: var(--color-error, #ef4444);
  border-left-color: var(--color-error, #ef4444);
}

.history-action--delete .history-action-icon {
  background: rgba(239, 68, 68, 0.1);
}

.history-action--delete .history-action-label {
  color: var(--color-error, #ef4444);
}

/* Bulk */
.history-action--bulk {
  color: var(--color-info, #3b82f6);
  border-left-color: var(--color-info, #3b82f6);
}

.history-action--bulk .history-action-icon {
  background: rgba(59, 130, 246, 0.1);
}

.history-action--bulk .history-action-label {
  color: var(--color-info, #3b82f6);
}

/* Default */
.history-action--default {
  color: var(--text-secondary, #6b7280);
  border-left-color: var(--text-tertiary, #9ca3af);
}

.history-action--default .history-action-icon {
  background: rgba(107, 114, 128, 0.1);
}

.history-action--default .history-action-label {
  color: var(--text-secondary, #6b7280);
}

/* ==========================================================================
   Field Changes Display
   ========================================================================== */

.history-changes {
  margin-top: 8px;
  padding: 12px;
  background: var(--surface-secondary, #f9fafb);
  border-radius: 8px;
  font-size: 13px;
}

.history-change-item {
  margin-bottom: 6px;
  line-height: 1.5;
}

.history-change-item:last-child {
  margin-bottom: 0;
}

.history-change-field {
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.history-change-text {
  color: var(--text-secondary, #6b7280);
  margin: 0 4px;
}

.history-change-old {
  color: var(--color-error, #ef4444);
  text-decoration: line-through;
}

.history-change-arrow {
  margin: 0 4px;
  color: var(--text-secondary, #6b7280);
}

.history-change-new {
  color: var(--color-success, #10b981);
}

/* ==========================================================================
   Text Field Snippets
   ========================================================================== */

.history-change-snippet {
  font-style: italic;
  color: var(--text-secondary, #6b7280);
  margin-left: 4px;
  max-width: 300px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.history-change-lang {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  margin-left: 4px;
}

/* ==========================================================================
   History Empty/Loading/Error States
   ========================================================================== */

.history-empty-state,
.history-loading-state,
.history-error-state {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary, #9ca3af);
}

.history-empty-state .material-icons,
.history-loading-state .material-icons,
.history-error-state .material-icons {
  font-size: 48px;
  margin-bottom: 12px;
  display: block;
}

.history-error-state {
  color: var(--color-error, #ef4444);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

body.dark-theme .history-entry {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.dark-theme .history-entry:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

body.dark-theme .history-action-label {
  color: var(--text-primary-dark, #f3f4f6);
}

body.dark-theme .history-entry-attribution {
  color: var(--text-secondary-dark, #9ca3af);
}

body.dark-theme .history-entry-timestamp {
  color: var(--text-tertiary-dark, #6b7280);
}

body.dark-theme .history-action--create .history-action-icon {
  background: rgba(16, 185, 129, 0.2);
}

body.dark-theme .history-action--update .history-action-icon {
  background: rgba(245, 158, 11, 0.2);
}

body.dark-theme .history-action--delete .history-action-icon {
  background: rgba(239, 68, 68, 0.2);
}

body.dark-theme .history-action--bulk .history-action-icon {
  background: rgba(59, 130, 246, 0.2);
}

body.dark-theme .history-action--default .history-action-icon {
  background: rgba(107, 114, 128, 0.2);
}

body.dark-theme .history-changes {
  background: rgba(255, 255, 255, 0.05);
}

body.dark-theme .history-change-field {
  color: var(--text-primary-dark, #f3f4f6);
}

body.dark-theme .history-change-text {
  color: var(--text-secondary-dark, #9ca3af);
}

body.dark-theme .history-change-arrow {
  color: var(--text-secondary-dark, #9ca3af);
}

body.dark-theme .history-change-snippet {
  color: var(--text-secondary-dark, #9ca3af);
}

body.dark-theme .history-change-lang {
  color: var(--text-muted-dark, #6b7280);
}

body.dark-theme .history-empty-state,
body.dark-theme .history-loading-state {
  color: var(--text-tertiary, #6b7280);
}

body.dark-theme .history-error-state {
  color: var(--color-error, #f87171);
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .history-action-icon {
  margin-right: 0;
  margin-left: 12px;
}

[dir="rtl"] .history-entry {
  border-left: none;
  border-right: 3px solid transparent;
  flex-direction: row-reverse;
}

[dir="rtl"] .history-action--create {
  border-right-color: var(--color-success, #10b981);
}

[dir="rtl"] .history-action--update {
  border-right-color: var(--color-warning, #f59e0b);
}

[dir="rtl"] .history-action--delete {
  border-right-color: var(--color-error, #ef4444);
}

[dir="rtl"] .history-action--bulk {
  border-right-color: var(--color-info, #3b82f6);
}

[dir="rtl"] .history-action--default {
  border-right-color: var(--text-tertiary, #9ca3af);
}

[dir="rtl"] .history-entry-attribution {
  text-align: right;
}

[dir="rtl"] .history-entry-timestamp {
  text-align: right;
}

[dir="rtl"] .history-entry-content {
  text-align: right;
}

[dir="rtl"] .history-entry-header {
  text-align: right;
}

[dir="rtl"] .history-change-item {
  text-align: right;
}

[dir="rtl"] .history-change-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .history-change-text {
  margin: 0 4px;
}

[dir="rtl"] .history-change-snippet {
  margin-left: 0;
  margin-right: 4px;
}

[dir="rtl"] .history-change-lang {
  margin-left: 0;
  margin-right: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  /* Touch-friendly history entries */
  .history-entry {
    min-height: 44px;
    padding: var(--modal-spacing-sm, 16px);
  }

  .history-action-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .history-action-label {
    font-size: 15px;
  }

  .history-entry-attribution,
  .history-entry-timestamp {
    font-size: 14px;
  }

  .history-changes {
    font-size: 14px;
    padding: 12px;
    margin-top: 12px;
  }

  .history-change-item {
    font-size: 14px;
    line-height: 1.5;
  }

  .history-change-snippet {
    max-width: none;
    white-space: normal;
    display: block;
    margin-top: 4px;
  }
}

/* === features/auth.css === */
/**
 * Feature: Auth
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for login forms, email verification, password reset,
 * and authentication-related UI elements.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Login Card
   ========================================================================== */

.login-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  padding: 40px;
  max-width: 400px;
  margin: 0 auto;
}

.login-card h1 {
  text-align: center;
  color: #333;
  margin-bottom: 10px;
  font-size: 28px;
}

.login-card .subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
  font-size: 14px;
}

/* ==========================================================================
   Paste Button
   ========================================================================== */

.paste-btn {
  padding: 8px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  background: var(--surface-color, #fff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paste-btn:hover {
  background: var(--hover-color, #f5f5f5);
}

.paste-btn:focus-visible {
  outline: 2px solid var(--primary-color, #6750A4);
  outline-offset: 2px;
}

.paste-btn .material-icons {
  font-size: 20px;
  color: var(--text-secondary, #666);
}

/* ==========================================================================
   Error Message
   ========================================================================== */

.error-message {
  background: #fee;
  color: #c33;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  display: none;
}

.error-message.show {
  display: block;
}

/* Resend button in error state */
.error-message .btn-link {
  background: none;
  border: none;
  color: var(--primary-color, #6d28d9);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  display: block;
}

.error-message .btn-link:hover {
  text-decoration: none;
}

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

/* Error message success state (for resend confirmation) */
.error-message.success {
  display: block;
  background: #d1fae5;
  color: #065f46;
  border-color: #065f46;
}

/* ==========================================================================
   Password Rules
   ========================================================================== */

.password-rules-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  font-size: 12px;
}

.password-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: var(--text-secondary, #6b7280);
}

.password-rule.passed {
  color: var(--success-color, #10b981);
}

.password-rule.passed .rule-icon {
  color: var(--success-color, #10b981);
}

.password-rule.failed {
  color: var(--error-color, #ef4444);
}

.password-rule.failed .rule-icon {
  color: var(--error-color, #ef4444);
}

.rule-icon {
  font-family: system-ui;
  font-weight: bold;
  width: 16px;
  text-align: center;
}

/* ==========================================================================
   Message Region
   ========================================================================== */

.message-region {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 14px;
}

.message-region.message-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.message-region.message-success .material-icons {
  color: #10b981;
}

.message-region.message-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.message-region.message-error .material-icons {
  color: #ef4444;
}

/* ==========================================================================
   Resend Hint/Link
   ========================================================================== */

.resend-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  margin-top: 20px;
}

.resend-link {
  color: var(--primary-color, #667eea);
  text-decoration: none;
  font-weight: 500;
}

.resend-link:hover:not(.disabled) {
  text-decoration: underline;
}

.resend-link.disabled {
  color: var(--text-tertiary, #9ca3af);
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Use Code Toggle (Password Reset)
   ========================================================================== */

.use-code-toggle {
  text-align: center;
  margin-bottom: 1rem;
}

.use-code-toggle a {
  color: var(--primary-color, #6d28d9);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.875rem;
}

.use-code-toggle a:hover {
  text-decoration: none;
}

/* ==========================================================================
   Forgot Password Link
   ========================================================================== */

.form-group-helper {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  text-align: right;
}

.forgot-password-link {
  font-size: 0.875rem;
  color: var(--primary-color, #6d28d9);
  text-decoration: none;
}

.forgot-password-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Success Banner
   ========================================================================== */

.success-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #d1fae5;
  color: #065f46;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.success-banner .material-icons {
  font-size: 1.25rem;
}

/* ==========================================================================
   Spinning Animation
   ========================================================================== */

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

.spinning {
  animation: spin 1s linear infinite;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

body.dark-theme .paste-btn {
  border-color: var(--border-color-dark, #444);
  background: var(--surface-color-dark, #2a2a2a);
}

body.dark-theme .paste-btn:hover {
  background: var(--hover-color-dark, #333);
}

body.dark-theme .paste-btn .material-icons {
  color: var(--text-secondary-dark, #aaa);
}

body.dark-theme .password-rule {
  color: var(--text-secondary, #9ca3af);
}

body.dark-theme .password-rule.passed {
  color: var(--success-color, #34d399);
}

body.dark-theme .password-rule.failed {
  color: var(--error-color, #f87171);
}

body.dark-theme .form-hint {
  color: var(--text-secondary, #9ca3af);
}

body.dark-theme .form-error {
  color: var(--error-color, #f87171);
}

body.dark-theme .message-region.message-success {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}

body.dark-theme .message-region.message-error {
  background: #7f1d1d;
  color: #fecaca;
  border-color: #991b1b;
}

body.dark-theme .resend-hint {
  color: var(--text-secondary, #9ca3af);
}

body.dark-theme .resend-link {
  color: var(--primary-color, #818cf8);
}

body.dark-theme .resend-link.disabled {
  color: var(--text-tertiary, #6b7280);
}

body.dark-theme .use-code-toggle a {
  color: var(--primary-color, #818cf8);
}

body.dark-theme .success-banner {
  background: #064e3b;
  color: #a7f3d0;
}

body.dark-theme .error-message.success {
  background: #064e3b;
  color: #a7f3d0;
  border-color: #065f46;
}

@media (prefers-color-scheme: dark) {
  .success-banner {
    background: #064e3b;
    color: #a7f3d0;
  }
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .form-group-helper {
  text-align: left;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .login-card {
    padding: 24px 20px;
    margin: 0;
    border-radius: 8px;
  }

  .login-card h1 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: 20px 16px;
  }

  .login-card h1 {
    font-size: 22px;
  }
}

/* === features/categories.css === */
/**
 * Feature: Categories
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Category management styles including list, table, cards, drag-drop,
 * search panel, and action buttons.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Search & Filter Panel
   ========================================================================== */

.category-search-panel {
  background: var(--color-bg-base);
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

.category-search-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.category-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-slate-400);
  font-size: 20px;
  pointer-events: none;
}

.category-search-input {
  width: 100%;
  padding: 10px 14px 10px 42px;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.category-search-input:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-base);
}

.category-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-focus);
}

.category-search-input::placeholder {
  color: var(--color-text-slate-400);
}

.category-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   Filter Summary
   ========================================================================== */

.category-filter-summary {
  margin: 16px 0;
  padding: 12px 16px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: var(--radius-xs);
}

.category-filter-summary p {
  margin: 0;
  color: #1e40af;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.category-filter-summary .material-icons {
  font-size: 18px;
  vertical-align: middle;
}

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

.category-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-secondary);
}

.category-empty-state .material-icons {
  font-size: 64px;
  color: #ddd;
}

.category-empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* ==========================================================================
   Categories Table (Desktop)
   ========================================================================== */

.categories-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.categories-table thead {
  background: var(--color-bg-elevated);
}

.categories-table th {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border-default);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  white-space: nowrap;
  vertical-align: middle;
}

.categories-table th.sortable {
  position: relative;
  padding-right: 24px;
}

.categories-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.categories-table tbody tr {
  transition: background-color var(--transition-fast) var(--ease-default);
}

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

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

/* ==========================================================================
   Categories Table Column Sizing
   ========================================================================== */

.categories-table .col-drag {
  width: 40px;
}

.categories-table .col-icon {
  width: 60px;
  text-align: center;
}

.categories-table .col-products {
  width: 90px;
  text-align: center;
}

.categories-table .col-status {
  width: 100px;
}

/* ==========================================================================
   Categories Table Cell Styling
   ========================================================================== */

.categories-table .cell-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-slate-900);
}

.categories-table .cell-name-hebrew {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  display: block;
  margin-top: 2px;
}

.categories-table .cell-icon {
  font-size: 24px;
  text-align: center;
}

.categories-table .cell-icon .material-icons {
  color: var(--color-text-slate-400);
}

.categories-table .drag-handle-cell {
  cursor: move;
}

.categories-table .drag-handle-cell .material-icons {
  color: #9ca3af;
  font-size: 20px;
}

/* ==========================================================================
   Categories Table Action Buttons
   ========================================================================== */

.categories-table .actions-cell {
  white-space: nowrap;
}

.categories-table .actions-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.categories-table .btn-action {
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--font-size-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-all-fast);
  line-height: 1;
}

.categories-table .btn-action .material-icons {
  font-size: 18px;
}

.categories-table .btn-action-edit {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.categories-table .btn-action-edit:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.categories-table .btn-action-delete {
  background: var(--color-error-bg-light);
  color: var(--color-error);
}

.categories-table .btn-action-delete:hover {
  background: var(--color-error);
  color: var(--color-text-inverse);
}

/* ==========================================================================
   Category Card Header
   ========================================================================== */

.category-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* ==========================================================================
   Category Status Badge
   ========================================================================== */

.category-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.category-status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.category-status-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

.category-status-badge .material-icons {
  font-size: 14px;
}

/* ==========================================================================
   Category Drag-Drop States
   ========================================================================== */

.category-card[draggable="true"],
.category-row[draggable="true"] {
  cursor: move;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.category-card.dragging,
.admin-card.category-card.dragging,
.category-row.dragging {
  opacity: 0.8;
  transform: scale(0.85);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease, box-shadow 0.15s ease;
  z-index: 1000;
  position: relative;
}

.category-card[draggable="true"],
.admin-card.category-card[draggable="true"],
.category-row[draggable="true"] {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.category-card[draggable="true"]:active,
.admin-card.category-card[draggable="true"]:active,
.category-row[draggable="true"]:active {
  transform: scale(0.92);
  transition: transform 0.1s ease;
}

.category-card.drag-over-top,
.admin-card.category-card.drag-over-top,
.category-row.drag-over-top {
  border-top: 3px solid #667eea;
  padding-top: 16px;
  transition: border-top 0.2s ease, padding-top 0.2s ease;
}

.category-card.drag-over-bottom,
.admin-card.category-card.drag-over-bottom,
.category-row.drag-over-bottom {
  border-bottom: 3px solid #667eea;
  padding-bottom: 16px;
  transition: border-bottom 0.2s ease, padding-bottom 0.2s ease;
}

.category-card.drag-over,
.admin-card.category-card.drag-over,
.category-row.drag-over {
  background-color: #f0f4ff;
  transition: background-color 0.2s ease;
}

/* ==========================================================================
   Category Drag Handle
   ========================================================================== */

.category-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: move;
  color: #9ca3af;
  transition: background-color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.category-drag-handle:hover {
  background-color: #f3f4f6;
  color: #667eea;
}

.category-drag-handle .material-icons {
  font-size: 20px;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ==========================================================================
   Category Edit Form
   ========================================================================== */

.category-edit-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

.category-edit-form > h3 {
  flex-shrink: 0;
  padding: 20px 20px 16px;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
  background: white;
}

/* Scrollable form content wrapper */
.category-edit-form-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

.category-edit-form .form-group {
  margin-bottom: 16px;
}

.category-edit-form .category-form-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding: 16px 20px !important;
  border-top: 2px solid #e5e7eb !important;
  background: white !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
}

.category-edit-form .category-form-actions button {
  flex: 1 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.category-edit-form .category-form-actions button.btn-secondary {
  background: #6c757d !important;
  color: white !important;
  border: none !important;
}

.category-edit-form .category-form-actions button .material-icons {
  font-size: 18px !important;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

body.dark-theme .category-search-panel {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .category-search-input {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
  color: #e2e8f0;
}

body.dark-theme .category-search-input:hover {
  border-color: var(--color-border-hover-dark);
  background: var(--color-surface-dark);
}

body.dark-theme .category-search-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-dark);
}

body.dark-theme .category-search-input::placeholder {
  color: #64748b;
}

body.dark-theme .category-filter-summary {
  background: rgba(59, 130, 246, 0.15);
  border-left-color: #60a5fa;
}

body.dark-theme .category-filter-summary p {
  color: #93c5fd;
}

body.dark-theme .category-empty-state .material-icons {
  color: #475569;
}

body.dark-theme .category-empty-state p {
  color: #94a3b8;
}

body.dark-theme .categories-table {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .categories-table thead {
  background: var(--color-bg-muted-dark);
}

body.dark-theme .categories-table th {
  color: #cbd5e1;
  border-bottom-color: var(--color-border-default-dark);
}

body.dark-theme .categories-table td {
  color: #94a3b8;
  border-bottom-color: var(--color-border-light-dark);
}

body.dark-theme .categories-table tbody tr:hover {
  background: var(--color-bg-hover-dark);
}

body.dark-theme .categories-table .cell-name {
  color: #f1f5f9;
}

body.dark-theme .categories-table .cell-name-hebrew {
  color: #94a3b8;
}

body.dark-theme .categories-table .cell-icon .material-icons {
  color: #64748b;
}

body.dark-theme .categories-table .btn-action-edit {
  background: var(--color-bg-muted-dark);
  color: #94a3b8;
  border-color: var(--color-border-default-dark);
}

body.dark-theme .categories-table .btn-action-edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

body.dark-theme .categories-table .btn-action-delete {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

body.dark-theme .categories-table .btn-action-delete:hover {
  background: var(--color-error);
  color: white;
}

/* ==========================================================================
   Responsive - Mobile (<=768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Hide table on mobile, show cards */
  .categories-table,
  #categoriesContent table {
    display: none;
  }

  .category-search-panel {
    padding: 16px;
  }

  /* Category form actions mobile adjustment */
  .category-edit-form .category-form-actions {
    padding: 12px 16px !important;
  }
}

/* ==========================================================================
   Responsive (Small Mobile)
   ========================================================================== */

@media (max-width: 480px) {
  /* Small mobile overrides - inherits from 768px rules */
  /* No category-specific 480px rules needed at this time */
}

/* === features/dashboard.css === */
/**
 * Feature: Dashboard
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Dashboard statistics, stat cards, and alert system.
 * Includes grid layout, card styling, and trend indicators.
 */

/* ==========================================================================
   Base - Stats Grid
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   Base - Stat Card
   ========================================================================== */

.stat-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: var(--transition-all);
}

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

.stat-card .value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.stat-card .label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card .trend {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

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

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

.stat-card .trend .material-icons {
  font-size: 16px;
}

/* Stat Card Icon */
.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
}

.stat-card-icon .material-icons {
  font-size: 24px;
}

.stat-card-icon.primary {
  background: var(--color-info-bg-light);
  color: var(--color-primary);
}

.stat-card-icon.success {
  background: var(--color-success-bg-light);
  color: var(--color-success);
}

.stat-card-icon.warning {
  background: var(--color-warning-bg-light);
  color: var(--color-warning);
}

.stat-card-icon.danger {
  background: var(--color-danger-bg-light);
  color: var(--color-danger);
}

/* ==========================================================================
   Base - Alert System
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  border: 1px solid transparent;
}

.alert .material-icons {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.alert-message {
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* Alert Variants */
.alert-info {
  background: var(--color-info-bg-light);
  border-color: var(--color-info-border);
  color: var(--color-info);
}

.alert-success {
  background: var(--color-success-bg-light);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.alert-warning {
  background: var(--color-warning-bg-light);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.alert-danger,
.alert-error {
  background: var(--color-danger-bg-light);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

/* Dismissible Alert */
.alert-dismissible {
  position: relative;
  padding-right: 48px;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.alert-dismissible .btn-close:hover {
  opacity: 1;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

.dark-theme .stat-card {
  background: #1e293b;
  border-color: #334155;
}

.dark-theme .stat-card .value {
  color: #e2e8f0;
}

.dark-theme .stat-card .label {
  color: #94a3b8;
}

.dark-theme .stat-card-icon.primary {
  background: rgba(102, 126, 234, 0.15);
  color: #a5b4fc;
}

.dark-theme .stat-card-icon.success {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.dark-theme .stat-card-icon.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.dark-theme .stat-card-icon.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.dark-theme .alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

.dark-theme .alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.dark-theme .alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fcd34d;
}

.dark-theme .alert-danger,
.dark-theme .alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* ==========================================================================
   Responsive - Tablet (768px)
   ========================================================================== */

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

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

  .stat-card .value {
    font-size: var(--font-size-2xl);
  }
}

/* ==========================================================================
   Responsive - Mobile (480px)
   ========================================================================== */

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

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

  .stat-card-icon {
    width: 40px;
    height: 40px;
  }

  .stat-card-icon .material-icons {
    font-size: 20px;
  }

  .alert {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* === features/keyboard-shortcuts.css === */
/**
 * Feature: Keyboard Shortcuts
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for keyboard shortcuts help modal, key styling,
 * and shortcut hint displays.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Shortcuts Help Modal
   ========================================================================== */

.shortcuts-help-modal {
  max-width: 600px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.shortcuts-help-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 2px solid #e5e7eb;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.shortcuts-help-modal .modal-header h2 {
  font-size: 20px;
  font-weight: 600;
}

.shortcuts-help-modal .btn-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.shortcuts-help-modal .btn-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.shortcuts-help-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

/* ==========================================================================
   Shortcuts Help Section
   ========================================================================== */

.shortcuts-help-section {
  margin-bottom: 24px;
}

.shortcuts-help-section:last-child {
  margin-bottom: 0;
}

.shortcuts-help-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   Shortcuts Help Item
   ========================================================================== */

.shortcuts-help-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.shortcuts-help-item:last-child {
  border-bottom: none;
}

.shortcuts-help-item span {
  color: #374151;
  font-size: 14px;
}

/* ==========================================================================
   Keyboard Key Styling
   ========================================================================== */

kbd {
  background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid #d1d5db;
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-block;
  min-width: 28px;
  text-align: center;
}

/* ==========================================================================
   Shortcut Hints on Buttons
   ========================================================================== */

.shortcut-hint {
  margin-left: 8px;
  opacity: 0.6;
  font-size: 0.75em;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

body.dark-theme .shortcuts-help-modal {
  background: var(--surface-dark, #1e293b);
}

body.dark-theme .shortcuts-help-section h3 {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .shortcuts-help-item {
  border-bottom-color: var(--border-color-dark, #475569);
}

body.dark-theme .shortcuts-help-item span {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme kbd {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: #475569;
  color: var(--text-primary-dark, #f1f5f9);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  /* Hide shortcuts on mobile devices */
  .shortcut-hint {
    display: none !important;
  }

  .shortcuts-help-modal {
    display: none !important;
  }
}

/* === features/modifiers.css === */
/**
 * Feature: Modifiers
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for the modifier groups list, group cards,
 * modifier item rows, and action buttons.
 * Dark theme uses CSS variables from tokens.css.
 */

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

.modifiers-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.modifiers-header h2 {
  margin: 0;
}

/* ==========================================================================
   Search & Filter Panel
   ========================================================================== */

.modifier-search-panel {
  background: var(--color-bg-base);
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

.modifier-search-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.modifier-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-slate-400);
  font-size: 20px;
  pointer-events: none;
}

.modifier-search-input {
  width: 100%;
  padding: 10px 14px 10px 42px;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.modifier-search-input:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-base);
}

.modifier-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-focus);
}

.modifier-search-input::placeholder {
  color: var(--color-text-slate-400);
}

.modifier-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.modifier-filter-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.modifier-filter-row .form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.modifier-filter-select {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.modifier-filter-select:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-base);
}

.modifier-filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   Filter Summary
   ========================================================================== */

.modifier-filter-summary {
  margin: 16px 0;
  padding: 12px 16px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: var(--radius-xs);
}

.modifier-filter-summary p {
  margin: 0;
  color: #1e40af;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.modifier-filter-summary .material-icons {
  font-size: 18px;
  vertical-align: middle;
}

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

.modifier-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-secondary);
}

.modifier-empty-state .material-icons {
  font-size: 64px;
  color: #ddd;
}

.modifier-empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* ==========================================================================
   Modifier Group Card
   ========================================================================== */

.modifier-group-card {
  margin-bottom: 20px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}

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

.modifier-group-header {
  padding: 20px;
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.modifier-group-info h3 {
  margin: 0 0 8px 0;
  color: var(--color-text-slate-900);
}

.modifier-group-hebrew {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: var(--font-size-sm);
}

.modifier-group-badges {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Badge variants for modifier groups */
.modifier-badge-type {
  background: #fef3c7;
  color: #78350f;
}

.modifier-badge-type .material-icons {
  font-size: 14px;
  vertical-align: middle;
}

.modifier-badge-required {
  background: #fef3c7;
  color: #78350f;
}

.modifier-badge-selection {
  background: #e0e7ff;
  color: #3730a3;
}

/* ==========================================================================
   Group Action Buttons
   ========================================================================== */

.modifier-group-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.modifier-group-actions .btn-action {
  padding: 8px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all-fast);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
}

.modifier-group-actions .btn-action:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.modifier-group-actions .btn-action-delete {
  background: var(--color-error-bg-light);
  color: var(--color-error);
  border-color: var(--color-error-bg-light);
}

.modifier-group-actions .btn-action-delete:hover {
  background: var(--color-error);
  color: var(--color-text-inverse);
  border-color: var(--color-error);
}

.modifier-group-actions .btn-action .material-icons {
  font-size: 20px;
}

/* ==========================================================================
   Modifiers Section (inside card)
   ========================================================================== */

.modifier-items-section {
  padding: 20px;
}

.modifier-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modifier-items-header h4 {
  margin: 0;
  color: var(--color-text-heading);
}

.modifier-btn-add {
  font-size: var(--font-size-sm);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.modifier-btn-add .material-icons {
  font-size: 16px;
}

.modifier-items-empty {
  color: var(--color-text-secondary);
  text-align: center;
  padding: 20px;
}

.modifier-items-list {
  display: grid;
  gap: 8px;
}

/* ==========================================================================
   Individual Modifier Row
   ========================================================================== */

.modifier-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.modifier-item-row:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-xs);
}

.modifier-item-info {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.modifier-item-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-slate-900);
}

.modifier-item-hebrew {
  color: var(--color-text-secondary);
  margin-left: 8px;
}

.modifier-item-price {
  margin-left: 12px;
  font-weight: var(--font-weight-semibold);
}

.modifier-item-price.price-free {
  color: var(--color-text-secondary);
}

.modifier-item-price.price-positive {
  color: #15803d;
}

.modifier-item-price.price-negative {
  color: #dc2626;
}

.modifier-badge-default {
  background: #dcfce7;
  color: #14532d;
  margin-left: 8px;
}

/* ==========================================================================
   Modifier Item Actions
   ========================================================================== */

.modifier-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.modifier-item-actions .btn-action {
  padding: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: var(--transition-all-fast);
  background: transparent;
  color: var(--color-text-slate-400);
}

.modifier-item-actions .btn-action-delete {
  color: var(--color-error);
}

.modifier-item-actions .btn-action:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
  border-color: var(--color-border-default);
}

.modifier-item-actions .btn-action-delete:hover {
  background: var(--color-error-bg-light);
  color: var(--color-error);
  border-color: transparent;
}

.modifier-item-actions .btn-action .material-icons {
  font-size: 18px;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

body.dark-theme .modifier-search-panel {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .modifier-search-input {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
  color: #e2e8f0;
}

body.dark-theme .modifier-search-input:hover {
  border-color: var(--color-border-hover-dark);
  background: var(--color-surface-dark);
}

body.dark-theme .modifier-search-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-dark);
}

body.dark-theme .modifier-search-input::placeholder {
  color: #64748b;
}

body.dark-theme .modifier-filter-select {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
  color: #e2e8f0;
}

body.dark-theme .modifier-filter-select:hover {
  border-color: var(--color-border-hover-dark);
  background: var(--color-surface-dark);
}

body.dark-theme .modifier-filter-select:focus {
  border-color: var(--color-primary);
  background: var(--color-surface-dark);
}

body.dark-theme .modifier-filter-summary {
  background: rgba(59, 130, 246, 0.15);
  border-left-color: #60a5fa;
}

body.dark-theme .modifier-filter-summary p {
  color: #93c5fd;
}

body.dark-theme .modifier-empty-state .material-icons {
  color: #475569;
}

body.dark-theme .modifier-empty-state p {
  color: #94a3b8;
}

body.dark-theme .modifier-group-card {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .modifier-group-header {
  border-bottom-color: var(--color-border-default-dark);
}

body.dark-theme .modifier-group-info h3 {
  color: #f1f5f9;
}

body.dark-theme .modifier-group-hebrew {
  color: #94a3b8;
}

body.dark-theme .modifier-badge-type {
  background: rgba(254, 243, 199, 0.15);
  color: #fbbf24;
}

body.dark-theme .modifier-badge-required {
  background: rgba(254, 243, 199, 0.15);
  color: #fbbf24;
}

body.dark-theme .modifier-badge-selection {
  background: rgba(224, 231, 255, 0.15);
  color: #818cf8;
}

body.dark-theme .modifier-badge-default {
  background: rgba(220, 252, 231, 0.15);
  color: #4ade80;
}

body.dark-theme .modifier-group-actions .btn-action {
  background: var(--color-bg-muted-dark);
  color: #94a3b8;
  border-color: var(--color-border-default-dark);
}

body.dark-theme .modifier-group-actions .btn-action:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

body.dark-theme .modifier-group-actions .btn-action-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: #f87171;
}

body.dark-theme .modifier-items-header h4 {
  color: #cbd5e1;
}

body.dark-theme .modifier-items-empty {
  color: #94a3b8;
}

body.dark-theme .modifier-item-row {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .modifier-item-row:hover {
  border-color: var(--color-border-hover-dark);
}

body.dark-theme .modifier-item-name {
  color: #f1f5f9;
}

body.dark-theme .modifier-item-hebrew {
  color: #94a3b8;
}

body.dark-theme .modifier-item-price.price-positive {
  color: #4ade80;
}

body.dark-theme .modifier-item-price.price-negative {
  color: #f87171;
}

body.dark-theme .modifier-item-price.price-free {
  color: #94a3b8;
}

body.dark-theme .modifier-item-actions .btn-action {
  color: #64748b;
}

body.dark-theme .modifier-item-actions .btn-action:hover {
  background: var(--color-bg-hover-dark);
  color: var(--color-primary);
}

body.dark-theme .modifier-item-actions .btn-action-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ==========================================================================
   Responsive - Mobile (<=768px)
   ========================================================================== */

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

  .modifiers-header .btn {
    width: 100%;
    justify-content: center;
  }

  .modifier-search-panel {
    padding: 16px;
  }

  .modifier-filter-row {
    flex-direction: column;
    gap: 12px;
  }

  .modifier-filter-row .form-group {
    min-width: 0;
  }

  .modifier-group-header {
    flex-direction: column;
    gap: 12px;
  }

  .modifier-group-actions {
    align-self: flex-end;
  }

  .modifier-group-badges {
    gap: 6px;
  }

  .modifier-item-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .modifier-item-actions {
    align-self: flex-end;
  }

  .modifier-items-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .modifier-btn-add {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
  }
}

/* === features/products.css === */
/**
 * Feature: Products
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Product management styles including list, cards, modals, and forms.
 * Dark theme inherited from shared components (cards, forms, buttons).
 */

/* ==========================================================================
   Filter UI (Products Filter Tabs)
   ========================================================================== */

.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-tab:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #374151;
}

.filter-tab.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.filter-tab.active:hover {
  background: #5a67d8;
  border-color: #5a67d8;
}

.filter-tab .material-icons {
  font-size: 18px;
}

/* ==========================================================================
   Search Filters Container
   ========================================================================== */

.search-filters-container {
  position: relative;
}

.search-filters-header {
  display: none;
}

.search-filters-content {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ==========================================================================
   Product Card Styles
   ========================================================================== */

.product-card .admin-card-header {
  position: relative;
}

.product-featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #fef3c7;
  color: #78350f;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.product-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.product-status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.product-status-badge.inactive {
  background: #fee2e2;
  color: #991b1b;
}

/* ==========================================================================
   Product Drag-Drop States
   ========================================================================== */

.product-card[draggable="true"],
.admin-card.product-card[draggable="true"],
.product-row[draggable="true"] {
  cursor: move;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.product-card.dragging,
.admin-card.product-card.dragging,
.product-row.dragging {
  opacity: 0.8;
  transform: scale(0.85);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease, box-shadow 0.15s ease;
  z-index: 1000;
  position: relative;
}

.product-card[draggable="true"]:active,
.admin-card.product-card[draggable="true"]:active,
.product-row[draggable="true"]:active {
  transform: scale(0.92);
  transition: transform 0.1s ease;
}

.product-card.drag-over-top,
.admin-card.product-card.drag-over-top,
.product-row.drag-over-top {
  border-top: 3px solid #667eea;
  padding-top: 16px;
  transition: border-top 0.2s ease, padding-top 0.2s ease;
}

.product-card.drag-over-bottom,
.admin-card.product-card.drag-over-bottom,
.product-row.drag-over-bottom {
  border-bottom: 3px solid #667eea;
  padding-bottom: 16px;
  transition: border-bottom 0.2s ease, padding-bottom 0.2s ease;
}

.product-card.drag-over,
.admin-card.product-card.drag-over,
.product-row.drag-over {
  background-color: #f0f4ff;
  transition: background-color 0.2s ease;
}

.product-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: move;
  color: #9ca3af;
  transition: background-color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.product-drag-handle:hover {
  background-color: #f3f4f6;
  color: #667eea;
}

.product-drag-handle .material-icons {
  font-size: 20px;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ==========================================================================
   Product Image Styles
   ========================================================================== */

.product-image-responsive {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: #6c757d;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

/* ==========================================================================
   Product Inline Edit
   ========================================================================== */

.product-inline-edit {
  animation: slideDown 0.3s ease-out;
}

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

/* ==========================================================================
   Product Edit Form
   ========================================================================== */

.product-edit-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

.product-edit-form > h3 {
  flex-shrink: 0;
  padding: 20px 20px 16px;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
  background: white;
}

.product-edit-form .modal-tabs {
  flex-shrink: 0;
  padding: 0 20px;
  background: white;
}

.product-edit-form .modal-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}

.product-edit-form .product-edit-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 0;
  padding: 16px 20px;
  border-top: 2px solid #e5e7eb;
  background: white;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.product-edit-form .product-edit-form-actions button {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-weight: 600;
}

.product-edit-form .product-edit-form-actions button.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
}

.product-edit-form .product-edit-form-actions button .material-icons {
  font-size: 18px;
}

/* ==========================================================================
   Products Table (Desktop)
   ========================================================================== */

.products-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.products-table thead {
  background: var(--color-bg-elevated);
}

.products-table th {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border-default);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  white-space: nowrap;
  vertical-align: middle;
}

.products-table th.sortable {
  position: relative;
  padding-right: 24px;
}

.products-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.products-table tbody tr {
  transition: background-color var(--transition-fast) var(--ease-default);
}

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

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

.products-table tbody tr.selected {
  background-color: #e3f2fd;
  border-left: 4px solid #667eea;
}

/* ==========================================================================
   Products Table Column Sizing
   ========================================================================== */

.products-table .col-drag {
  width: 40px;
}

.products-table .col-select {
  width: 50px;
  text-align: center;
}

.products-table .col-image {
  width: 80px;
}

/* ==========================================================================
   Products Table Cell Styling
   ========================================================================== */

.products-table .cell-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.products-table .cell-select-td {
  text-align: center;
}

.products-table .cell-image-td {
  text-align: center;
  padding: 8px;
}

.products-table .cell-image-wrapper {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--color-border-default);
  margin: 0 auto;
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}

.products-table .cell-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.products-table .cell-image-placeholder .material-icons {
  font-size: 24px;
}

.products-table .cell-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-slate-900);
}

.products-table .cell-dietary {
  margin-left: 8px;
}

.products-table .drag-handle-cell {
  cursor: move;
}

.products-table .drag-handle-cell .material-icons {
  color: #9ca3af;
  font-size: 20px;
}

/* ==========================================================================
   Products Table Action Buttons
   ========================================================================== */

.products-table .actions-cell {
  white-space: nowrap;
}

.products-table .actions-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.products-table .btn-action {
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--font-size-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-all-fast);
  line-height: 1;
}

.products-table .btn-action .material-icons {
  font-size: 18px;
}

.products-table .btn-action-edit {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.products-table .btn-action-edit:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.products-table .btn-action-delete {
  background: var(--color-error-bg-light);
  color: var(--color-error);
}

.products-table .btn-action-delete:hover {
  background: var(--color-error);
  color: var(--color-text-inverse);
}

/* ==========================================================================
   Search & Filter Panel
   ========================================================================== */

.product-search-panel {
  background: var(--color-bg-base);
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

.product-search-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  margin-bottom: 16px;
}

.product-search-wrapper {
  position: relative;
}

.product-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-slate-400);
  font-size: 20px;
  pointer-events: none;
}

.product-search-input {
  width: 100%;
  padding: 10px 14px 10px 42px;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.product-search-input:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-base);
}

.product-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-focus);
}

.product-search-input::placeholder {
  color: var(--color-text-slate-400);
}

.product-category-select {
  padding: 10px 14px;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.product-category-select:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-base);
}

.product-category-select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-base);
  box-shadow: var(--shadow-focus);
}

.product-dietary-filters {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  border: 1px solid var(--color-border-default);
}

.product-dietary-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  font-size: var(--font-size-sm);
}

.product-dietary-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  transition: background 0.15s;
}

.product-dietary-option:hover {
  background: var(--color-bg-hover);
}

.product-dietary-option input[type="checkbox"] {
  accent-color: var(--color-primary);
}

.product-results-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

.product-results-count {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.product-active-badge {
  background: var(--color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-left: 8px;
}

/* ==========================================================================
   Bulk Actions Toolbar
   ========================================================================== */

.product-bulk-toolbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.product-bulk-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-bulk-info .material-icons {
  font-size: 24px;
}

.product-bulk-count {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.product-bulk-actions {
  display: flex;
  gap: 10px;
}

.product-bulk-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
}

.product-bulk-btn-clear {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.product-bulk-btn-danger {
  background: rgba(220, 38, 38, 0.9);
  border: 1px solid rgba(220, 38, 38, 1);
  color: white;
}

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

.product-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-secondary);
}

.product-empty-state .material-icons {
  font-size: 64px;
  color: #ddd;
}

.product-empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* ==========================================================================
   Mobile Select All
   ========================================================================== */

.product-mobile-select-all {
  margin-bottom: 16px;
}

.product-mobile-select-all .btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ==========================================================================
   Mobile Card Overrides
   ========================================================================== */

.product-card.selected {
  border: 2px solid #667eea;
  background: #f0f4ff;
}

.product-card .card-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.product-card .card-checkbox {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* ==========================================================================
   Dark Theme (Products Table & Search)
   ========================================================================== */

body.dark-theme .products-table {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .products-table thead {
  background: var(--color-bg-muted-dark);
}

body.dark-theme .products-table th {
  color: #cbd5e1;
  border-bottom-color: var(--color-border-default-dark);
}

body.dark-theme .products-table td {
  color: #94a3b8;
  border-bottom-color: var(--color-border-light-dark);
}

body.dark-theme .products-table tbody tr:hover {
  background: var(--color-bg-hover-dark);
}

body.dark-theme .products-table tbody tr.selected {
  background-color: rgba(102, 126, 234, 0.15);
  border-left-color: #667eea;
}

body.dark-theme .products-table .cell-name {
  color: #f1f5f9;
}

body.dark-theme .products-table .cell-image-wrapper {
  border-color: var(--color-border-default-dark);
  background: var(--color-bg-muted-dark);
}

body.dark-theme .products-table .btn-action-edit {
  background: var(--color-bg-muted-dark);
  color: #94a3b8;
  border-color: var(--color-border-default-dark);
}

body.dark-theme .products-table .btn-action-edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

body.dark-theme .products-table .btn-action-delete {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

body.dark-theme .products-table .btn-action-delete:hover {
  background: var(--color-error);
  color: white;
}

body.dark-theme .product-search-panel {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
  box-shadow: none;
}

body.dark-theme .product-search-input {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
  color: #e2e8f0;
}

body.dark-theme .product-search-input:hover {
  border-color: #555;
  background: var(--color-bg-hover-dark);
}

body.dark-theme .product-search-input:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-hover-dark);
}

body.dark-theme .product-search-input::placeholder {
  color: #64748b;
}

body.dark-theme .product-category-select {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
  color: #e2e8f0;
}

body.dark-theme .product-category-select:hover {
  border-color: #555;
  background: var(--color-bg-hover-dark);
}

body.dark-theme .product-category-select:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-hover-dark);
}

body.dark-theme .product-dietary-filters {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .product-dietary-label {
  color: #cbd5e1;
}

body.dark-theme .product-dietary-option {
  color: #94a3b8;
}

body.dark-theme .product-dietary-option:hover {
  background: var(--color-bg-hover-dark);
}

body.dark-theme .product-results-count {
  color: #94a3b8;
}

body.dark-theme .product-empty-state {
  color: #94a3b8;
}

body.dark-theme .product-empty-state .material-icons {
  color: #475569;
}

/* ==========================================================================
   Responsive (Mobile)
   ========================================================================== */

@media (max-width: 768px) {
  /* Search Filters Mobile */
  .search-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .search-filters-header:hover {
    background: #f9fafb;
  }

  .search-filters-header-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 15px;
  }

  .search-filters-header-icon {
    transition: transform 0.3s ease;
    color: #667eea;
  }

  .search-filters-header-icon.expanded {
    transform: rotate(180deg);
  }

  .search-filters-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, border 0.3s ease;
    padding: 0 20px !important;
    margin: 0 !important;
    background: white;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
  }

  .search-filters-content.expanded {
    max-height: 500px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-top: 1px solid #e0e0e0 !important;
  }

  .search-filters-content.collapsed {
    max-height: 0 !important;
    padding: 0 20px !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Product Edit Content Mobile */
  .product-edit-content {
    padding: 16px !important;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .product-edit-form-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .product-edit-form-grid > div {
    margin-bottom: 16px !important;
  }

  .product-edit-content h4 {
    font-size: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #007bff !important;
  }

  .product-edit-content .form-group {
    margin-bottom: 16px !important;
  }

  .product-edit-content label {
    font-size: 14px !important;
    margin-bottom: var(--modal-spacing-xs) !important;
    font-weight: 500 !important;
    color: #374151 !important;
  }

  .product-edit-content input,
  .product-edit-content select,
  .product-edit-content textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background: white !important;
  }

  .product-edit-content input:focus,
  .product-edit-content select:focus,
  .product-edit-content textarea:focus {
    border-color: #007bff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
  }

  .product-edit-content textarea {
    min-height: 80px !important;
    resize: vertical !important;
  }

  .product-edit-content .btn {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .product-edit-content .btn-secondary {
    background: #6c757d !important;
    color: white !important;
    border: none !important;
  }

  .product-edit-content .btn-group {
    display: flex !important;
    gap: 12px !important;
    flex-direction: column !important;
  }

  .product-edit-content .btn-group .btn {
    flex: 1 !important;
  }

  .product-edit-content input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
  }

  .product-edit-content label[for*="editProductActive"] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #374151 !important;
  }

  /* Image Management Section Mobile */
  .product-edit-form-grid > div:last-child {
    background: white !important;
    padding: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    margin: 0 !important;
  }

  .product-edit-form-grid > div:last-child h4 {
    font-size: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #28a745 !important;
  }

  .product-edit-form-grid > div:last-child .form-group {
    margin-bottom: 16px !important;
  }

  .product-edit-form-grid > div:last-child label {
    font-size: 14px !important;
    margin-bottom: var(--modal-spacing-xs) !important;
    font-weight: 500 !important;
    color: #374151 !important;
  }

  .product-edit-form-grid > div:last-child input,
  .product-edit-form-grid > div:last-child select {
    width: 100% !important;
    padding: 12px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    background: white !important;
  }

  .product-edit-form-grid > div:last-child input:focus,
  .product-edit-form-grid > div:last-child select:focus {
    border-color: #28a745 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;
  }

  .product-edit-form-grid > div:last-child .btn {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .product-edit-form-grid > div:last-child .btn-success {
    background: #28a745 !important;
    color: white !important;
    border: none !important;
  }

  .product-edit-form-grid > div:last-child .btn-danger {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
  }

  /* Product Inline Edit Mobile */
  .product-inline-edit td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Hide table on mobile, show cards */
  #productsContent table,
  .products-table {
    display: none;
  }

  /* Search grid stacks on mobile */
  .product-search-grid {
    grid-template-columns: 1fr;
  }

  /* Bulk toolbar stacks on mobile */
  .product-bulk-toolbar {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .product-bulk-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ==========================================================================
   Responsive (Small Mobile)
   ========================================================================== */

@media (max-width: 480px) {
  /* Small mobile overrides - inherits from 768px rules */
  /* No product-specific 480px rules needed at this time */
}

/* === features/restaurants.css === */
/**
 * Feature: Restaurants
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for the restaurants list table, sortable headers,
 * action buttons, and the restaurant edit modal.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Restaurants Table
   ========================================================================== */

.restaurants-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.restaurants-table thead {
  background: var(--color-bg-elevated);
}

.restaurants-table th {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border-default);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  white-space: nowrap;
  vertical-align: middle;
}

.restaurants-table th.sortable {
  position: relative;
  padding-right: 24px;
}

.restaurants-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.restaurants-table tbody tr {
  transition: background-color var(--transition-fast) var(--ease-default);
}

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

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

/* ==========================================================================
   Cell Content Styling
   ========================================================================== */

.restaurants-table .cell-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-slate-900);
}

.restaurants-table .cell-slug {
  font-family: 'Courier New', Courier, monospace;
  background: var(--color-bg-elevated);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-slate-600);
  border: 1px solid var(--color-border-default);
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restaurants-table .cell-code {
  font-family: 'Courier New', Courier, monospace;
  background: var(--color-bg-muted);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-info);
  display: inline-block;
}

.restaurants-table .cell-description {
  color: var(--color-text-secondary);
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restaurants-table .cell-contact {
  color: var(--color-text-secondary);
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.restaurants-table .actions-cell {
  white-space: nowrap;
}

.restaurants-table .actions-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.restaurants-table .btn-action {
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--font-size-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-all-fast);
  line-height: 1;
}

.restaurants-table .btn-action .material-icons {
  font-size: 18px;
}

.restaurants-table .btn-action-view {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.restaurants-table .btn-action-view:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-button-primary);
}

.restaurants-table .btn-action-edit {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.restaurants-table .btn-action-edit:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.restaurants-table .btn-action-delete {
  background: var(--color-error-bg-light);
  color: var(--color-error);
}

.restaurants-table .btn-action-delete:hover {
  background: var(--color-error);
  color: var(--color-text-inverse);
}

/* Unassign ordering small icon button */
.restaurants-table .btn-unassign {
  margin-left: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-xs);
  transition: var(--transition-all-fast);
}

.restaurants-table .btn-unassign:hover {
  background: var(--color-error-bg);
}

.restaurants-table .btn-unassign .material-icons {
  font-size: 16px;
  color: var(--color-error-hover);
}

/* ==========================================================================
   Restaurant Edit Modal
   ========================================================================== */

.restaurant-edit-modal {
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  position: relative;
  display: flex;
  flex-direction: column;
}

.restaurant-edit-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

body.dark-theme .restaurants-table {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .restaurants-table thead {
  background: var(--color-bg-muted-dark);
}

body.dark-theme .restaurants-table th {
  color: #cbd5e1;
  border-bottom-color: var(--color-border-default-dark);
}

body.dark-theme .restaurants-table td {
  color: #94a3b8;
  border-bottom-color: var(--color-border-light-dark);
}

body.dark-theme .restaurants-table tbody tr:hover {
  background: var(--color-bg-hover-dark);
}

body.dark-theme .restaurants-table .cell-name {
  color: #f1f5f9;
}

body.dark-theme .restaurants-table .cell-slug {
  background: var(--color-bg-muted-dark);
  color: #94a3b8;
  border-color: var(--color-border-default-dark);
}

body.dark-theme .restaurants-table .cell-code {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

body.dark-theme .restaurants-table .btn-action-edit {
  background: var(--color-bg-muted-dark);
  color: #94a3b8;
  border-color: var(--color-border-default-dark);
}

body.dark-theme .restaurants-table .btn-action-edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

body.dark-theme .restaurants-table .btn-action-delete {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

body.dark-theme .restaurants-table .btn-action-delete:hover {
  background: var(--color-error);
  color: white;
}

body.dark-theme .restaurant-edit-modal {
  background: var(--color-surface-dark);
}

/* ==========================================================================
   Responsive - Mobile (<=768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Override global checkbox padding since restaurants table has no checkboxes */
  .restaurants-table tbody tr {
    padding-left: 16px !important;
    padding-top: 16px !important;
  }

  .restaurants-table .cell-description,
  .restaurants-table .cell-contact,
  .restaurants-table .cell-slug {
    max-width: none;
    white-space: normal;
  }

  .restaurants-table .actions-group {
    gap: 8px;
  }

  .restaurants-table .btn-action {
    padding: 8px 14px;
    min-height: 36px;
  }

  .restaurant-edit-modal {
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* === features/settings.css === */
/**
 * Feature: Settings
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for theme picker, toggle switches, profile info,
 * and dark mode toggle elements.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Theme Picker Container
   ========================================================================== */

.theme-picker {
  width: 100%;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

/* ==========================================================================
   Theme Option Card
   ========================================================================== */

.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-option:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.theme-option.active {
  border-color: #667eea;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* ==========================================================================
   Theme Color Swatches
   ========================================================================== */

.theme-colors {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-colors .material-icons {
  font-size: 32px;
  color: #667eea;
}

/* ==========================================================================
   Theme Label
   ========================================================================== */

.theme-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-align: center;
}

/* ==========================================================================
   Active Theme Check Icon
   ========================================================================== */

.theme-option .check {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  color: #667eea;
}

/* ==========================================================================
   Toggle Switch (Dark Mode Toggle)
   ========================================================================== */

.toggle-switch {
  display: inline-block;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-slider {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  background-color: #e5e7eb;
  border-radius: 34px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked + label .toggle-slider {
  background-color: #667eea;
}

.toggle-switch input[type="checkbox"]:checked + label .toggle-slider::before {
  transform: translateX(24px);
}

.toggle-label {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

/* ==========================================================================
   Profile Info Rows
   ========================================================================== */

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row strong {
  font-weight: 500;
  color: var(--text-primary);
  min-width: 160px;
}

.info-row span {
  color: var(--text-secondary);
  text-align: right;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

/* Stat Card dark mode */
.dark-theme .stat-card {
  background: #334155;
  border-color: #475569;
  color: #e2e8f0;
}

.dark-theme .stat-card .label {
  color: #f1f5f9;
}

/* Badge dark mode overrides */
.dark-theme .badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.dark-theme .badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.dark-theme .badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Theme picker dark mode */
.dark-theme .theme-option {
  background: #334155;
  border-color: #475569;
}

.dark-theme .theme-option:hover {
  border-color: #64748b;
  background: #3f4f66;
}

.dark-theme .theme-option.active {
  border-color: #818cf8;
  background: rgba(129, 140, 248, 0.15);
}

.dark-theme .theme-label {
  color: #e2e8f0;
}

.dark-theme .toggle-label {
  color: #e2e8f0;
}

.dark-theme .section-header h2 {
  color: #f1f5f9;
}

/* Activity item dark mode */
.dark-theme .activity-item {
  background: #334155;
  border-color: #475569;
}

.dark-theme .activity-item:hover {
  background: #3f4f66;
}

.dark-theme .activity-title {
  color: #e2e8f0;
}

/* States dark mode */
.dark-theme .empty-state,
.dark-theme .error-state,
.dark-theme .loading {
  color: #94a3b8;
}

/* Info row dark mode */
.dark-theme .info-row {
  border-bottom-color: var(--border-color-dark, #475569);
}

.dark-theme .info-row strong {
  color: var(--text-primary-dark, #f1f5f9);
}

.dark-theme .info-row span {
  color: var(--text-secondary-dark, #94a3b8);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .theme-options {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }

  .theme-option {
    padding: 16px 12px;
    gap: 8px;
  }

  .theme-colors {
    min-height: 36px;
  }

  .color-swatch {
    width: 24px;
    height: 24px;
  }

  .theme-colors .material-icons {
    font-size: 24px;
  }

  .theme-label {
    font-size: 12px;
  }

  .toggle-slider {
    width: 44px;
    height: 24px;
  }

  .toggle-slider::before {
    height: 18px;
    width: 18px;
  }

  .toggle-switch input[type="checkbox"]:checked + label .toggle-slider::before {
    transform: translateX(20px);
  }

  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .info-row strong {
    min-width: unset;
  }

  .info-row span {
    text-align: left;
  }
}

/* === features/tms.css === */
/**
 * Feature: TMS (Table Management System)
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * TMS base styles, admin views, area/table management.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Meta & Summary
   ========================================================================== */

.tms-meta {
  margin-bottom: 24px;
}

.tms-refreshing {
  position: relative;
}

.tms-refreshing::after {
  content: 'Updating…';
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.8);
  color: var(--color-text-inverse);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.tms-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.tms-summary-card {
  border: 1px solid var(--color-border-slate-200);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--color-bg-base);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tms-summary-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-slate-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tms-summary-label .material-icons {
  font-size: 18px;
}

.tms-summary-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-slate-900);
}

.tms-meta-bar {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: var(--color-text-slate-600);
  align-items: center;
}

.tms-meta-top {
  border: 1px solid var(--color-border-slate-200);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--color-bg-base);
  margin-bottom: 16px;
}

/* ==========================================================================
   Stream Status
   ========================================================================== */

.tms-stream-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid #cbd5f5;
  background: #eef2ff;
  color: #4338ca;
}

.tms-stream-pill[data-status="open"] {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.tms-stream-pill[data-status="connecting"],
.tms-stream-pill[data-status="reconnecting"] {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.tms-stream-pill[data-status="error"],
.tms-stream-pill[data-status="timeout"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.tms-stream-pill .tms-stream-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
  animation: pulse 1.2s infinite;
}

.tms-stream-pill[data-status="open"] .tms-stream-dot {
  animation: pulse-green 1.2s infinite;
}

.tms-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.tms-columns {
  display: grid;
  grid-template-columns: 3fr 1.2fr;
  gap: 20px;
}

.tms-floor-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================================
   Admin Content
   ========================================================================== */

.tms-admin-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tms-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tms-admin-toolbar-spacer {
  flex: 1 1 auto;
}

.tms-admin-bulk-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.08);
}

.tms-admin-bulk-bar.visible {
  display: flex;
}

.tms-admin-bulk-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}

.tms-admin-bulk-info span {
  font-size: 18px;
}

.tms-admin-bulk-info .btn {
  padding: 4px 8px;
}

.tms-admin-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Admin Summary
   ========================================================================== */

.tms-admin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.tms-admin-summary-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  background: var(--card-background);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tms-admin-summary-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tms-admin-summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ==========================================================================
   Admin Area Cards
   ========================================================================== */

.tms-admin-area-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tms-admin-area-card {
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.tms-admin-area-card.collapsed .tms-admin-area-body {
  display: none;
}

.tms-admin-area-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.tms-admin-area-header h3 {
  margin: 0;
  font-size: 20px;
}

.tms-admin-area-header p {
  margin: 2px 0 0;
  color: var(--text-secondary);
}

.tms-admin-area-actions {
  display: flex;
  gap: 8px;
}

.tms-admin-area-body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tms-admin-area-meta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

.tms-admin-area-meta .meta-icon {
  font-size: 20px;
  color: var(--text-tertiary);
}

/* ==========================================================================
   Admin Sections
   ========================================================================== */

.tms-admin-section-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-1);
}

.tms-admin-section-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tms-admin-section-card li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.tms-admin-section-card li:last-child {
  border-bottom: none;
}

.tms-admin-section-header {
  display: flex;
  gap: 6px;
  align-items: center;
  font-weight: 600;
  margin-bottom: 8px;
}

.tms-admin-section-tables {
  color: var(--text-secondary);
  font-size: 13px;
}

.tms-admin-section-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ==========================================================================
   Admin Table List
   ========================================================================== */

.tms-admin-table-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tms-admin-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--surface-1);
  gap: 16px;
}

.tms-admin-table-row.selected {
  border-color: var(--accent-color);
  background: rgba(59, 130, 246, 0.08);
}

.tms-admin-table-select {
  display: flex;
  align-items: center;
}

.tms-admin-table-select input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.tms-admin-table-actions {
  display: inline-flex;
  gap: 6px;
}

.tms-position-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: 12px;
}

.tms-admin-table-name {
  font-weight: 600;
  font-size: 16px;
}

.tms-admin-table-meta {
  color: var(--text-secondary);
  font-size: 13px;
}

.tms-admin-table-status {
  text-align: right;
}

.tms-table-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.tms-table-actions .btn {
  padding: 6px 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tms-table-actions .material-icons {
  font-size: 16px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .tms-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tms-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

/* === features/tms-floor.css === */
/**
 * Feature: TMS Floor Editor
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Floor editor modal, canvas, and draggable nodes.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Floor Editor Modal
   ========================================================================== */

/* Floor editor modal wrapper - makes the modal wider to accommodate the editor */
.tms-floor-editor-modal-wrapper {
  width: 95vw !important;
  max-width: 1400px !important;
  max-height: 90vh !important;
}

/* Override modal-content-regular width for floor editor */
.modal-content-regular:has(.tms-floor-editor-modal-wrapper) {
  max-width: 95vw !important;
  width: 95vw !important;
}

.tms-floor-editor-modal-wrapper .modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: var(--color-bg-base);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.tms-floor-editor-modal-wrapper .modal-actions .btn {
  flex: 1 1 0;
  justify-content: center;
}

.tms-floor-editor-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tms-floor-editor-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 14px;
}

.tms-floor-editor-details {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}

.tms-floor-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tms-floor-editor-toolbar .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tms-floor-editor-toolbar-spacer {
  flex: 1 1 auto;
}

.tms-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.tms-switch input {
  accent-color: var(--accent-color);
}

.tms-floor-editor-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ==========================================================================
   Floor Editor Canvas
   ========================================================================== */

.tms-floor-editor-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  background-color: var(--color-bg-slate-50);
  background-image:
    linear-gradient(0deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.08) 1px, transparent 1px);
  background-size: 2.5% 2.5%;
  overflow: hidden;
  touch-action: none;
}

/* ==========================================================================
   Floor Editor Nodes
   ========================================================================== */

.tms-floor-node {
  position: absolute;
  min-width: 80px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(59, 130, 246, 0.4);
  background: var(--color-bg-base);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: grab;
  user-select: none;
  font-size: 13px;
  text-align: center;
}

.tms-floor-node.selected {
  border-color: var(--accent-color);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}

.tms-floor-node strong {
  font-size: 14px;
  color: var(--text-primary);
}

.tms-floor-node span {
  color: var(--text-secondary);
  font-size: 12px;
}

.tms-floor-node.dragging {
  cursor: grabbing;
  border-color: var(--accent-color);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}

.tms-floor-node-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.tms-floor-node.dirty::after {
  content: '●';
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 16px;
  color: #f59e0b;
  background: var(--color-bg-base);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Floor Inspector Panel
   ========================================================================== */

.tms-floor-inspector {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 12px;
  background: var(--card-background);
  min-height: 360px;
}

.tms-floor-inspector-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.tms-floor-inspector-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.tms-floor-inspector-table {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 13px;
  background: var(--color-bg-base);
  cursor: pointer;
}

.tms-floor-inspector-table.active {
  border-color: var(--accent-color);
  background: rgba(37, 99, 235, 0.08);
}

.tms-floor-inspector-controls {
  border-top: 1px dashed var(--border-color);
  padding-top: 12px;
}

.tms-floor-inspector-form-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.tms-floor-inspector-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.tms-floor-inspector-field input {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
}

.tms-floor-inspector-empty {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 12px 0;
  text-align: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .tms-floor-editor-modal-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }

  .modal-content-regular:has(.tms-floor-editor-modal-wrapper) {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .tms-floor-editor-layout {
    gap: 12px;
  }

  .tms-floor-editor-canvas {
    aspect-ratio: 1 / 1;
  }

  .tms-floor-inspector {
    min-height: 200px;
  }
}

/* === features/tms-floor-public.css === */
/**
 * Feature: TMS Public Floor View
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Public floor canvas, table nodes, reservation badges, pressure panel.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Public Floor Map
   ========================================================================== */

.tms-floor-map {
  margin-bottom: 16px;
}

.tms-floor-map .empty-state {
  margin-bottom: 0;
}

/* ==========================================================================
   Decision Bar
   ========================================================================== */

.tms-decision-bar {
  margin-bottom: 20px;
  border: 1px solid var(--color-border-slate-200);
  border-radius: 12px;
  padding: 16px;
  background: var(--color-bg-base);
}

.tms-decision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.tms-decision-card {
  border: 1px solid var(--color-border-slate-200);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-bg-slate-50);
}

.tms-decision-card span {
  font-size: 12px;
  color: var(--color-text-slate-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tms-decision-card strong {
  font-size: 20px;
  color: var(--color-text-slate-950);
}

/* ==========================================================================
   Pacing Display
   ========================================================================== */

.tms-pacing {
  border-width: 2px;
}

.tms-pacing-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tms-pacing-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tms-pacing.pacing-normal {
  border-color: #10b981;
  background: #ecfdf5;
}

.tms-pacing.pacing-busy {
  border-color: #f59e0b;
  background: #fffbeb;
}

.tms-pacing.pacing-critical {
  border-color: #f87171;
  background: #fef2f2;
}

/* ==========================================================================
   Filter Row
   ========================================================================== */

.tms-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tms-filter-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tms-filter-select label {
  font-size: 12px;
  color: var(--color-text-slate-600);
}

.tms-filter-select select {
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--color-indigo-light);
  background: var(--color-bg-base);
}

.tms-filter-search {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.tms-filter-search label {
  font-size: 12px;
  color: var(--color-text-slate-600);
}

.tms-filter-search input {
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid var(--color-indigo-light);
  background: var(--color-bg-base);
}

.tms-filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tms-filter-chip {
  border: 1px solid var(--color-indigo-light);
  border-radius: 9999px;
  padding: 6px 14px;
  background: var(--color-bg-base);
  color: var(--color-text-slate-950);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tms-filter-chip:hover {
  border-color: #64748b;
}

.tms-filter-chip.active {
  background: var(--color-indigo-500);
  color: var(--color-text-inverse);
  border-color: var(--color-indigo-600);
}

/* ==========================================================================
   Public Floor Canvas
   ========================================================================== */

.tms-floor-canvas {
  position: relative;
  width: 100%;
  border: 1px solid var(--color-border-slate-200);
  border-radius: 12px;
  background: var(--color-bg-slate-50);
  overflow: hidden;
}

.tms-floor-canvas::before {
  content: '';
  display: block;
  padding-top: var(--tms-floor-ratio, 70%);
}

.tms-floor-inner {
  position: absolute;
  inset: 0;
  padding: 12px;
}

/* ==========================================================================
   Table Nodes (Public Floor)
   ========================================================================== */

.tms-table-node {
  position: absolute;
  border-radius: 14px;
  border: 1px solid var(--color-indigo-light);
  background: var(--color-bg-base);
  color: var(--color-text-slate-950);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 28px;
  min-height: 28px;
  pointer-events: auto;
  touch-action: manipulation;
  font-size: 12px;
  text-align: center;
}

.tms-table-node:focus-visible {
  outline: 2px solid var(--color-indigo-500);
  outline-offset: 2px;
}

.tms-table-node:hover {
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.14);
}

.tms-table-label {
  font-weight: 600;
  font-size: 12px;
}

.tms-table-meta {
  font-size: 10px;
  color: var(--color-text-slate-600);
}

.tms-table-server {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 9999px;
  background: #e0e7ff;
  color: #312e81;
}

.tms-status-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 14px;
  color: var(--color-text-slate-600);
}

/* ==========================================================================
   Table Node Status States
   ========================================================================== */

.tms-table-node.status-open {
  border-color: #10b981;
  background: #ecfdf5;
}

.tms-table-node.status-seated {
  border-color: #2563eb;
  background: #eff6ff;
}

.tms-table-node.status-reserved {
  border-color: #c084fc;
  background: #f5f3ff;
}

.tms-table-node.status-dirty {
  border-color: #f97316;
  background: #fff7ed;
}

.tms-table-node.status-held {
  border-color: #f59e0b;
  background: #fffbeb;
}

.tms-table-node.status-closing {
  border-color: #f87171;
  background: #fef2f2;
}

.tms-table-node.has-reservation {
  border-width: 2px;
}

.tms-table-node.has-conflict {
  border-color: #f97316;
  box-shadow: 0 12px 20px rgba(249, 115, 22, 0.3);
}

.tms-table-node.is-dimmed {
  opacity: 0.3;
}

.tms-table-node.is-highlighted {
  box-shadow: 0 14px 22px rgba(99, 102, 241, 0.45);
  border-color: var(--color-indigo-500);
  z-index: 2;
}

/* ==========================================================================
   Reservation Badges
   ========================================================================== */

.tms-res-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  justify-content: center;
}

.tms-res-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: #ede9fe;
  color: #4c1d95;
  border: 1px solid #c4b5fd;
}

.tms-res-badge.is-warning {
  background: #fef9c3;
  color: #92400e;
  border-color: #facc15;
}

.tms-res-conflict {
  margin-top: 4px;
  font-size: 9px;
  color: #b45309;
  font-weight: 600;
}

/* ==========================================================================
   Pressure Panel
   ========================================================================== */

.tms-pressure-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tms-pressure-card {
  flex: 1 1 160px;
  border: 1px dashed #facc15;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fffbeb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.tms-pressure-card span {
  font-size: 12px;
  color: #92400e;
}

.tms-pressure-card strong {
  font-size: 18px;
  color: #b45309;
}

/* ==========================================================================
   Clickable Items
   ========================================================================== */

.tms-clickable-item {
  cursor: pointer;
}

.tms-clickable-item:focus-visible {
  outline: 2px solid var(--color-indigo-500);
  outline-offset: 2px;
}

/* === features/tms-status.css === */
/**
 * Feature: TMS Status & Side Panels
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * TMS server/shift management, status badges, table chips, side columns.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Server & Shift Management
   ========================================================================== */

.tms-admin-server-card {
  margin-top: 24px;
}

.tms-server-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tms-server-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.tms-server-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tms-server-meta {
  font-size: 13px;
  color: var(--text-secondary);
}

.tms-server-actions {
  display: inline-flex;
  gap: 6px;
}

.tms-shift-card {
  margin-top: 24px;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tms-shift-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.tms-shift-header h3 {
  margin: 0;
}

.tms-shift-header small {
  color: var(--text-secondary);
}

.tms-shift-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tms-shift-controls label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--text-secondary);
  gap: 4px;
}

.tms-shift-controls input[type="date"] {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 160px;
}

.tms-shift-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tms-shift-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--surface-1);
}

.tms-shift-meta {
  font-size: 13px;
  color: var(--text-secondary);
}

.tms-shift-actions {
  display: inline-flex;
  gap: 6px;
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.tms-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tms-status-badge.status-available {
  background: #dcfce7;
  color: #15803d;
}

.tms-status-badge.status-held {
  background: #fef9c3;
  color: #854d0e;
}

.tms-status-badge.status-reserved {
  background: #e0e7ff;
  color: #4338ca;
}

.tms-status-badge.status-seated {
  background: #dbeafe;
  color: #1d4ed8;
}

.tms-status-badge.status-dirty {
  background: #ffedd5;
  color: #9a3412;
}

.tms-status-badge.status-clean {
  background: var(--color-bg-slate-100);
  color: var(--color-text-slate-600);
}

.tms-status-badge.status-locked,
.tms-status-badge.status-closing {
  background: #fee2e2;
  color: #b91c1c;
}

@keyframes pulse {
  0% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.4; transform: scale(0.9); }
}

@keyframes pulse-green {
  0% { opacity: 0.6; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(0.8); }
}

/* ==========================================================================
   Area/Table Chips (Public View)
   ========================================================================== */

.tms-area-card {
  padding: 18px;
}

.tms-area-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.tms-area-header h3 {
  font-size: 18px;
  margin-bottom: 4px;
  color: var(--color-text-slate-900);
}

.tms-area-header p {
  font-size: 13px;
  color: var(--color-text-slate-500);
}

.tms-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.tms-table-chip {
  border: 1px solid var(--color-border-slate-200);
  border-radius: 12px;
  padding: 12px;
  background: var(--color-bg-slate-50);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.tms-table-chip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--color-text-slate-900);
}

.tms-table-name {
  font-size: 14px;
}

.tms-table-chip .status-icon {
  font-size: 18px;
  color: var(--color-text-slate-600);
}

.tms-table-chip-body {
  font-size: 13px;
  color: var(--color-text-slate-900);
}

.tms-table-subtext {
  font-size: 12px;
  color: var(--color-text-slate-500);
}

.tms-table-footer {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-slate-600);
}

.tms-table-chip.status-open {
  border-color: #10b981;
  background: #ecfdf5;
}

.tms-table-chip.status-seated {
  border-color: #2563eb;
  background: #eff6ff;
}

.tms-table-chip.status-reserved {
  border-color: #c084fc;
  background: #f5f3ff;
}

.tms-table-chip.status-dirty {
  border-color: #f97316;
  background: #fff7ed;
}

.tms-table-chip.status-held {
  border-color: #facc15;
  background: #fefce8;
}

.tms-table-chip.status-closing {
  border-color: #f87171;
  background: #fef2f2;
}

.tms-empty-row {
  padding: 16px;
  border: 1px dashed #cbd5f5;
  border-radius: 12px;
  font-size: 13px;
  color: var(--color-text-slate-400);
  text-align: center;
}

/* ==========================================================================
   Side Columns
   ========================================================================== */

.tms-side-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tms-side-card {
  padding: 16px;
}

.tms-side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tms-side-header-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tms-side-actions-header {
  display: flex;
  gap: 8px;
}

.tms-side-header h3 {
  font-size: 16px;
  color: var(--color-text-slate-900);
}

.tms-count {
  background: var(--color-bg-slate-200);
  color: var(--color-text-slate-600);
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 13px;
}

.tms-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tms-side-item {
  border-bottom: 1px solid var(--color-border-slate-200);
  padding-bottom: 12px;
}

.tms-side-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tms-side-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--color-text-slate-900);
  margin-bottom: 4px;
}

.tms-side-meta {
  font-size: 13px;
  color: var(--color-text-slate-500);
}

.tms-side-empty {
  font-size: 14px;
  color: var(--color-text-slate-400);
}

.tms-side-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tms-inline-alert {
  padding: 10px 12px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ==========================================================================
   State Badges
   ========================================================================== */

.tms-state-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--color-bg-slate-200);
  color: var(--color-text-slate-600);
}

.tms-state-badge.state-waiting {
  background: #fef3c7;
  color: #92400e;
}

.tms-state-badge.state-paged {
  background: #e0f2fe;
  color: #0369a1;
}

.tms-state-badge.state-seated,
.tms-state-badge.state-confirmed {
  background: #dbeafe;
  color: #1d4ed8;
}

.tms-state-badge.state-reserved,
.tms-state-badge.state-pending {
  background: #ede9fe;
  color: #6d28d9;
}

.tms-state-badge.state-no_show,
.tms-state-badge.state-canceled {
  background: #fee2e2;
  color: #b91c1c;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.tms-tag-row {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tms-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #e0e7ff;
  color: #3730a3;
}

/* ==========================================================================
   Utility Styles
   ========================================================================== */

.inline-code {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--color-bg-slate-100);
  color: #0f172a;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
}

.empty-state.small {
  padding: 28px;
}

.empty-state.small h3 {
  font-size: 18px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .tms-side-column {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .tms-side-card {
    flex: 1 1 320px;
  }
}

@media (max-width: 640px) {
  .tms-table-grid {
    grid-template-columns: 1fr;
  }
}

/* === features/transactions.css === */
/**
 * Feature: Transactions - List View
 * Owner: @sukardaddy
 * Phase: MVP
 * Uses c-txn- namespace. Detail modal in transactions-detail.css.
 */

/* ========== Container & Header ========== */
.c-txn-container {
  padding: 0;
}

.c-txn-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.c-txn-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.c-txn-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

.c-txn-title .material-icons {
  font-size: 28px;
  color: #6366f1;
}

.c-txn-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Refresh button rotation animation */
.c-txn-header-right .rotating {
  animation: txn-spin 1s linear;
}

@keyframes txn-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========== Transaction Table ========== */

.c-txn-list {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.c-txn-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.c-txn-header {
  text-align: start;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 13px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.c-txn-header--date { width: 15%; }
.c-txn-header--order { width: 12%; }
.c-txn-header--amount { width: 15%; }
.c-txn-header--status { width: 14%; }
.c-txn-header--card { width: 24%; }
.c-txn-header--actions { width: 10%; text-align: center; }

.c-txn-row { transition: background-color 0.15s ease; cursor: pointer; }
.c-txn-row:hover { background-color: #f3f4f6; }
.c-txn-row:focus { outline: none; background-color: #eef2ff; box-shadow: inset 0 0 0 2px #6366f1; }
.c-txn-row:not(:last-child) { border-bottom: 1px solid #e5e7eb; }

.c-txn-cell { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.c-txn-cell--actions { text-align: center; }

/* ========== Date/Time Display ========== */

.c-txn-date {
  font-weight: 500;
  color: #111827;
}

.c-txn-time {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* ========== Order ID ========== */

.c-txn-order-id {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  font-size: 13px;
  color: #6366f1;
  font-weight: 500;
}

.c-txn-no-order {
  color: #9ca3af;
}

/* ========== Amount ========== */

.c-txn-amount {
  font-weight: 600;
  font-size: 15px;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

/* ========== Status Badges ========== */

.c-txn-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.c-txn-status--success {
  background: #dcfce7;
  color: #15803d;
}

.c-txn-status--info {
  background: #dbeafe;
  color: #1d4ed8;
}

.c-txn-status--warning {
  background: #fef3c7;
  color: #b45309;
}

.c-txn-status--error {
  background: #fee2e2;
  color: #b91c1c;
}

.c-txn-status--neutral {
  background: #f3f4f6;
  color: #4b5563;
}

/* ========== Card Display ========== */

.c-txn-card {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  font-size: 13px;
  color: #374151;
}

/* ========== Action Buttons ========== */

.c-txn-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.c-txn-action-btn:hover {
  background: #eef2ff;
  color: #6366f1;
}

.c-txn-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px #6366f1;
}

.c-txn-action-btn .material-icons {
  font-size: 20px;
}

/* ========== Pagination Info & Load More ========== */

.c-txn-pagination-info {
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.c-txn-showing {
  font-size: 13px;
  color: #6b7280;
}

.c-txn-load-more {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
}

.c-txn-load-more .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.c-txn-empty {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.c-txn-empty-icon {
  font-size: 56px;
  color: #d1d5db;
  margin-bottom: 16px;
}

.c-txn-empty-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.c-txn-empty-message {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

/* ========== Loading State ========== */

.c-txn-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 64px 24px;
  color: #6b7280;
}

.c-txn-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: txn-loading-spin 0.8s linear infinite;
}

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

/* Skeleton rows */
.c-txn-row--skeleton {
  cursor: default;
  pointer-events: none;
}

.c-txn-row--skeleton:hover {
  background: transparent;
}

.c-txn-row--skeleton .skeleton-text {
  height: 16px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

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

/* ========== Error State ========== */

.c-txn-error {
  text-align: center;
  padding: 64px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.c-txn-error-icon {
  font-size: 56px;
  color: #ef4444;
  margin-bottom: 16px;
}

.c-txn-error-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.c-txn-error-message {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: #6b7280;
}

/* ========== Access Denied State ========== */

.c-txn-access-denied {
  text-align: center;
  padding: 80px 24px;
}

.c-txn-access-denied .material-icons {
  font-size: 64px;
  color: #d1d5db;
  margin-bottom: 24px;
}

.c-txn-access-denied h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  color: #374151;
}

.c-txn-access-denied p {
  margin: 0 0 8px 0;
  color: #6b7280;
  font-size: 15px;
}

/* ========== Dark Mode ========== */

body.dark-theme .c-txn-title {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-title .material-icons {
  color: #818cf8;
}

body.dark-theme .c-txn-list {
  background: var(--surface-dark, #1e293b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-theme .c-txn-header {
  background: var(--surface-elevated-dark, #0f172a);
  color: var(--text-secondary-dark, #94a3b8);
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-txn-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .c-txn-row:focus {
  background-color: rgba(99, 102, 241, 0.15);
  box-shadow: inset 0 0 0 2px #818cf8;
}

body.dark-theme .c-txn-row:not(:last-child) {
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-txn-cell {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-date {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-time {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-order-id {
  color: #a5b4fc;
}

body.dark-theme .c-txn-amount {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-card {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-action-btn {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-action-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

body.dark-theme .c-txn-pagination-info {
  background: var(--surface-elevated-dark, #0f172a);
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-txn-showing {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-load-more {
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-txn-empty,
body.dark-theme .c-txn-error {
  background: var(--surface-dark, #1e293b);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-theme .c-txn-empty-title,
body.dark-theme .c-txn-error-title {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-empty-message,
body.dark-theme .c-txn-error-message {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-access-denied h2 {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-access-denied p {
  color: var(--text-secondary-dark, #94a3b8);
}

/* Status badges in dark mode */
body.dark-theme .c-txn-status--success {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

body.dark-theme .c-txn-status--info {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

body.dark-theme .c-txn-status--warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

body.dark-theme .c-txn-status--error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

body.dark-theme .c-txn-status--neutral {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

body.dark-theme .skeleton-text {
  background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
  background-size: 200% 100%;
}

/* ========== Responsive ========== */

@media (max-width: 1024px) {
  .c-txn-header--card { width: 20%; }
}

@media (max-width: 768px) {
  .c-txn-header-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .c-txn-table {
    display: block;
  }

  .c-txn-table thead {
    display: none;
  }

  .c-txn-table tbody {
    display: block;
  }

  .c-txn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
  }

  .c-txn-cell {
    padding: 0;
  }

  .c-txn-cell--date {
    grid-column: 1;
  }

  .c-txn-cell--amount {
    grid-column: 2;
    text-align: end;
  }

  .c-txn-cell--order {
    grid-column: 1;
  }

  .c-txn-cell--status {
    grid-column: 2;
    text-align: end;
  }

  .c-txn-cell--card {
    grid-column: 1 / -1;
  }

  .c-txn-cell--actions {
    grid-column: 1 / -1;
    text-align: start;
    margin-top: 8px;
  }
}

/* ========== RTL Support ========== */

[dir="rtl"] .c-txn-header-left {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-txn-title {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-txn-header {
  text-align: end;
}

[dir="rtl"] .c-txn-header--actions {
  text-align: center;
}

[dir="rtl"] .c-txn-cell {
  text-align: end;
}

[dir="rtl"] .c-txn-cell--actions {
  text-align: center;
}

[dir="rtl"] .c-txn-load-more .btn {
  flex-direction: row-reverse;
}

/* === features/transactions-detail.css === */
/**
 * Feature: Transactions - Detail Modal
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for transaction detail modal view (Story 5.4, 5.5).
 * Uses c-txn- namespace per project-context.md.
 * Split from transactions.css per AD-003 (max 600 lines).
 */

/* ==========================================================================
   Detail Modal (Story 5.4)
   ========================================================================== */

.c-txn-detail {
  max-width: 600px;
}

.c-txn-detail-content {
  padding: 0;
}

.c-txn-detail-section {
  padding: 16px 0;
  border-bottom: 1px solid #e5e7eb;
}

.c-txn-detail-section:last-child {
  border-bottom: none;
}

.c-txn-detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 12px 0;
}

.c-txn-detail-section-title .material-icons {
  font-size: 18px;
}

/* Header Section */
.c-txn-detail-header-section {
  text-align: center;
  padding-bottom: 24px;
}

.c-txn-detail-amount {
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

/* Grid Layout */
.c-txn-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.c-txn-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c-txn-detail-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.c-txn-detail-value {
  font-size: 14px;
  color: #374151;
  word-break: break-word;
}

.c-txn-detail-value--mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  font-size: 13px;
}

.c-txn-detail-value--pending {
  color: #b45309;
  font-style: italic;
}

/* Timeline */
.c-txn-timeline {
  position: relative;
  padding-left: 24px;
}

.c-txn-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}

.c-txn-timeline-event {
  position: relative;
  padding-bottom: 16px;
}

.c-txn-timeline-event--last {
  padding-bottom: 0;
}

.c-txn-timeline-event--last::after {
  display: none;
}

.c-txn-timeline-dot {
  position: absolute;
  left: -24px;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 2px solid #6366f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-txn-timeline-dot .material-icons {
  font-size: 14px;
  color: #6366f1;
}

.c-txn-timeline-content {
  padding-left: 8px;
}

.c-txn-timeline-title {
  font-weight: 500;
  font-size: 14px;
  color: #111827;
}

.c-txn-timeline-detail {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.c-txn-timeline-time {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Delivery Status */
.c-txn-detail-delivery {
  display: flex;
  gap: 24px;
  margin: 12px 0;
}

.c-txn-delivery-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #374151;
}

.c-txn-delivery-item .material-icons {
  font-size: 18px;
  color: #6b7280;
}

.c-txn-delivery-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.c-txn-delivery-status--success {
  background: #dcfce7;
  color: #15803d;
}

.c-txn-delivery-status--warning {
  background: #fef3c7;
  color: #b45309;
}

.c-txn-delivery-status--error {
  background: #fee2e2;
  color: #b91c1c;
}

.c-txn-delivery-status--neutral {
  background: #f3f4f6;
  color: #4b5563;
}

/* Invoice Actions */
.c-txn-detail-invoice-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* AC7: Action button wrapper with inline disabled reason */
.c-txn-action-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-txn-action-disabled-reason {
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

/* AC8: Refund action wrapper with permission notice */
.c-txn-refund-action-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.c-txn-refund-permission-notice {
  font-size: 11px;
  color: #ef4444;
  font-style: italic;
}

.c-txn-detail-actions-notice {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
  margin: 8px 0 0 0;
}

/* M2: Empty timeline message */
.c-txn-detail-empty-timeline {
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
  margin: 0;
  padding: 12px 0;
}

/* PII Notice */
.c-txn-detail-pii-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  background: #f9fafb;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 12px 0 0 0;
}

.c-txn-detail-pii-notice .material-icons {
  font-size: 16px;
  color: #9ca3af;
}

/* ITA Section (Story 5.5) */
.c-txn-detail-ita {
  margin-top: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 4px;
}

.c-txn-detail-ita-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.c-txn-ita-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.c-txn-ita-input {
  flex: 1;
  min-width: 150px;
  max-width: 200px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  text-transform: uppercase;
}

.c-txn-ita-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #b45309;
}

.c-txn-ita-notice .material-icons {
  font-size: 16px;
  flex-shrink: 0;
}

/* Spinner animation for buttons */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Error State */
.c-txn-detail-error {
  text-align: center;
  padding: 48px 24px;
  color: #6b7280;
}

.c-txn-detail-error .material-icons {
  font-size: 48px;
  color: #ef4444;
  margin-bottom: 16px;
  display: block;
}

.c-txn-detail-error p {
  margin: 0;
  font-size: 14px;
}

/* Skeleton */
.c-txn-detail-skeleton {
  padding: 16px 0;
}

.c-txn-detail-skeleton .skeleton-text {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.c-txn-detail-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.c-txn-detail-timeline-skeleton {
  margin-top: 24px;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

body.dark-theme .c-txn-detail-section {
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-txn-detail-section-title {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-detail-amount {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-detail-label {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-detail-value {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-detail-value--pending {
  color: #fbbf24;
}

body.dark-theme .c-txn-timeline::before {
  background: var(--border-color-dark, #334155);
}

body.dark-theme .c-txn-timeline-dot {
  background: var(--surface-dark, #1e293b);
  border-color: #818cf8;
}

body.dark-theme .c-txn-timeline-dot .material-icons {
  color: #818cf8;
}

body.dark-theme .c-txn-timeline-title {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-timeline-detail {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-timeline-time {
  color: var(--text-tertiary-dark, #64748b);
}

body.dark-theme .c-txn-delivery-item {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-delivery-item .material-icons {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-delivery-status--success {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

body.dark-theme .c-txn-delivery-status--warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

body.dark-theme .c-txn-delivery-status--error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

body.dark-theme .c-txn-delivery-status--neutral {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

body.dark-theme .c-txn-detail-actions-notice {
  color: var(--text-tertiary-dark, #64748b);
}

body.dark-theme .c-txn-action-disabled-reason {
  color: var(--text-tertiary-dark, #64748b);
}

body.dark-theme .c-txn-detail-empty-timeline {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-detail-pii-notice {
  background: var(--surface-elevated-dark, #0f172a);
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-detail-pii-notice .material-icons {
  color: var(--text-tertiary-dark, #64748b);
}

body.dark-theme .c-txn-detail-ita {
  background: var(--surface-elevated-dark, #0f172a);
}

body.dark-theme .c-txn-ita-input {
  background: var(--surface-dark, #1e293b);
  border-color: var(--border-color-dark, #334155);
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-txn-ita-notice {
  color: #fbbf24;
}

body.dark-theme .c-txn-detail-error {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-txn-detail-skeleton .skeleton-text {
  background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
  background-size: 200% 100%;
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .c-txn-detail-section-title {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-txn-timeline {
  padding-left: 0;
  padding-right: 24px;
}

[dir="rtl"] .c-txn-timeline::before {
  left: auto;
  right: 11px;
}

[dir="rtl"] .c-txn-timeline-dot {
  left: auto;
  right: -24px;
}

[dir="rtl"] .c-txn-timeline-content {
  padding-left: 0;
  padding-right: 8px;
}

[dir="rtl"] .c-txn-delivery-item {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-txn-detail-pii-notice {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-txn-detail-ita {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-txn-ita-input {
  text-align: right;
}

[dir="rtl"] .c-txn-ita-notice {
  flex-direction: row-reverse;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .c-txn-detail {
    max-width: none;
  }

  .c-txn-detail-grid {
    grid-template-columns: 1fr;
  }

  .c-txn-detail-delivery {
    flex-direction: column;
    gap: 12px;
  }

  .c-txn-detail-invoice-actions {
    flex-direction: column;
  }

  .c-txn-detail-invoice-actions .btn {
    width: 100%;
  }

  .c-txn-detail-amount {
    font-size: 28px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .c-txn-detail-skeleton .skeleton-text {
    animation: none;
    opacity: 0.7;
  }
}

/* === features/transactions-refund.css === */
/**
 * Feature: Transactions - Refund Modal
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for refund modal (Story 6.5).
 * Uses c-refund- namespace per project-context.md.
 */

/* ==========================================================================
   Refund Modal Layout
   ========================================================================== */

.c-refund-modal {
  max-width: 480px;
}

.c-refund-icon {
  color: #ef4444;
  margin-right: 8px;
  vertical-align: middle;
}

.c-refund-icon--success {
  color: #22c55e;
}

.c-refund-icon--error {
  color: #ef4444;
}

/* ==========================================================================
   Transaction Summary Card
   ========================================================================== */

.c-refund-summary {
  background: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.c-refund-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.c-refund-card-info .material-icons {
  font-size: 24px;
  color: #6b7280;
}

.c-refund-card-number {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  font-size: 14px;
  color: #374151;
}

.c-refund-amounts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-refund-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-refund-amount-row--refunded .c-refund-value {
  color: #ef4444;
}

.c-refund-amount-row--remaining {
  padding-top: 8px;
  border-top: 1px dashed #d1d5db;
  margin-top: 4px;
}

.c-refund-label {
  font-size: 13px;
  color: #6b7280;
}

.c-refund-value {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

.c-refund-value--highlight {
  font-size: 16px;
  font-weight: 600;
  color: #6366f1;
}

.c-refund-customer-name {
  margin-left: auto;
  font-size: 13px;
  color: #6b7280;
}

/* ==========================================================================
   Previous Refunds History (AC3)
   ========================================================================== */

.c-refund-history {
  background: #fef3c7;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.c-refund-history-title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.c-refund-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-refund-history-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(146, 64, 14, 0.2);
  font-size: 13px;
}

.c-refund-history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.c-refund-history-amount {
  font-weight: 600;
  color: #92400e;
  font-variant-numeric: tabular-nums;
}

.c-refund-history-date {
  color: #b45309;
}

.c-refund-history-reason {
  color: #78350f;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.c-refund-history-status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.c-refund-history-item--completed .c-refund-history-status {
  background: #dcfce7;
  color: #166534;
}

.c-refund-history-item--pending .c-refund-history-status,
.c-refund-history-item--processing .c-refund-history-status {
  background: #fef9c3;
  color: #854d0e;
}

.c-refund-history-item--failed .c-refund-history-status {
  background: #fee2e2;
  color: #991b1b;
}

/* ==========================================================================
   Custom Reason Input (AC5)
   ========================================================================== */

.c-refund-custom-reason {
  margin-top: 12px;
}

/* ==========================================================================
   Refund Form
   ========================================================================== */

.c-refund-form-section {
  margin-bottom: 20px;
}

/* Type Selector (Radio buttons) */
.c-refund-type-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.c-refund-type-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.c-refund-type-option:hover {
  border-color: #d1d5db;
  background-color: #f9fafb;
}

.c-refund-type-option:has(input:checked) {
  border-color: #6366f1;
  background-color: #eef2ff;
}

.c-refund-type-option input[type="radio"] {
  margin-top: 2px;
  accent-color: #6366f1;
}

.c-refund-type-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c-refund-type-title {
  font-weight: 500;
  color: #111827;
}

.c-refund-type-desc {
  font-size: 13px;
  color: #6b7280;
}

/* Partial Amount Input */
.c-refund-partial-input {
  margin-bottom: 16px;
}

.c-refund-amount-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-refund-currency {
  font-weight: 500;
  color: #6b7280;
  min-width: 40px;
}

.c-refund-amount-input {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
  font-size: 18px;
  font-weight: 500;
  text-align: right;
}

.c-refund-max-notice {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

/* Reason Input */
.c-refund-reason-input {
  margin-bottom: 16px;
}

.c-refund-required {
  color: #ef4444;
}

/* Warning Notice */
.c-refund-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fef3c7;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
}

.c-refund-warning .material-icons {
  font-size: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   Confirmation Step
   ========================================================================== */

.c-refund-confirm {
  text-align: center;
  padding: 20px 0;
}

.c-refund-confirm-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: #fee2e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-refund-confirm-icon .material-icons {
  font-size: 32px;
  color: #ef4444;
}

.c-refund-confirm-amount {
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 20px;
}

.c-refund-confirm-details {
  text-align: left;
  background: #f9fafb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.c-refund-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.c-refund-confirm-row:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.c-refund-confirm-label {
  font-size: 13px;
  color: #6b7280;
}

.c-refund-confirm-value {
  font-size: 14px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}

.c-refund-confirm-value .material-icons {
  font-size: 18px;
  color: #6b7280;
}

.c-refund-confirm-warning {
  font-size: 14px;
  color: #b91c1c;
  margin: 0;
}

/* ==========================================================================
   Processing State
   ========================================================================== */

.c-refund-processing {
  text-align: center;
  padding: 48px 24px;
}

.c-refund-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 4px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: refund-spin 0.8s linear infinite;
}

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

.c-refund-processing-text {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  margin: 0 0 8px 0;
}

.c-refund-processing-subtext {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* ==========================================================================
   Success State
   ========================================================================== */

.c-refund-success {
  text-align: center;
  padding: 32px 24px;
}

.c-refund-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-refund-success-icon .material-icons {
  font-size: 32px;
  color: #22c55e;
}

.c-refund-success-amount {
  font-size: 28px;
  font-weight: 700;
  color: #22c55e;
  margin: 0 0 12px 0;
}

.c-refund-success-text {
  font-size: 15px;
  color: #374151;
  margin: 0 0 8px 0;
}

.c-refund-success-subtext {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* ==========================================================================
   Error State
   ========================================================================== */

.c-refund-error {
  text-align: center;
  padding: 32px 24px;
}

.c-refund-error-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: #fee2e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-refund-error-icon .material-icons {
  font-size: 32px;
  color: #ef4444;
}

.c-refund-error-text {
  font-size: 15px;
  color: #374151;
  margin: 0;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

body.dark-theme .c-refund-customer-name {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-history {
  background: rgba(245, 158, 11, 0.15);
}

body.dark-theme .c-refund-history-title {
  color: #fbbf24;
}

body.dark-theme .c-refund-history-item {
  border-color: rgba(251, 191, 36, 0.2);
}

body.dark-theme .c-refund-history-amount {
  color: #fbbf24;
}

body.dark-theme .c-refund-history-date {
  color: #f59e0b;
}

body.dark-theme .c-refund-history-reason {
  color: #fcd34d;
}

body.dark-theme .c-refund-history-item--completed .c-refund-history-status {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

body.dark-theme .c-refund-history-item--pending .c-refund-history-status,
body.dark-theme .c-refund-history-item--processing .c-refund-history-status {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

body.dark-theme .c-refund-history-item--failed .c-refund-history-status {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

body.dark-theme .c-refund-icon {
  color: #f87171;
}

body.dark-theme .c-refund-icon--success {
  color: #4ade80;
}

body.dark-theme .c-refund-summary {
  background: var(--surface-elevated-dark, #0f172a);
}

body.dark-theme .c-refund-card-info {
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-refund-card-info .material-icons {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-card-number {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-amount-row--remaining {
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-refund-label {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-value {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-value--highlight {
  color: #a5b4fc;
}

body.dark-theme .c-refund-type-option {
  border-color: var(--border-color-dark, #334155);
  background: transparent;
}

body.dark-theme .c-refund-type-option:hover {
  border-color: #475569;
  background: var(--surface-elevated-dark, #0f172a);
}

body.dark-theme .c-refund-type-option:has(input:checked) {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.15);
}

body.dark-theme .c-refund-type-title {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-type-desc {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-currency {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-amount-input {
  background: var(--surface-dark, #1e293b);
  border-color: var(--border-color-dark, #334155);
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-max-notice {
  color: var(--text-tertiary-dark, #64748b);
}

body.dark-theme .c-refund-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

body.dark-theme .c-refund-confirm-icon {
  background: rgba(239, 68, 68, 0.2);
}

body.dark-theme .c-refund-confirm-icon .material-icons {
  color: #f87171;
}

body.dark-theme .c-refund-confirm-amount {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-confirm-details {
  background: var(--surface-elevated-dark, #0f172a);
}

body.dark-theme .c-refund-confirm-row:not(:last-child) {
  border-color: var(--border-color-dark, #334155);
}

body.dark-theme .c-refund-confirm-label {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-confirm-value {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-confirm-value .material-icons {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-confirm-warning {
  color: #f87171;
}

body.dark-theme .c-refund-spinner {
  border-color: var(--border-color-dark, #334155);
  border-top-color: #818cf8;
}

body.dark-theme .c-refund-processing-text {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-processing-subtext {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-success-icon {
  background: rgba(34, 197, 94, 0.2);
}

body.dark-theme .c-refund-success-icon .material-icons {
  color: #4ade80;
}

body.dark-theme .c-refund-success-amount {
  color: #4ade80;
}

body.dark-theme .c-refund-success-text {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .c-refund-success-subtext {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .c-refund-error-icon {
  background: rgba(239, 68, 68, 0.2);
}

body.dark-theme .c-refund-error-icon .material-icons {
  color: #f87171;
}

body.dark-theme .c-refund-error-text {
  color: var(--text-primary-dark, #f1f5f9);
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .c-refund-icon {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .c-refund-customer-name {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .c-refund-history-title {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-refund-history-item {
  direction: rtl;
}

[dir="rtl"] .c-refund-card-info {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-refund-amount-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-refund-type-option {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-refund-type-label {
  text-align: right;
}

[dir="rtl"] .c-refund-amount-input-wrapper {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-refund-amount-input {
  text-align: left;
}

[dir="rtl"] .c-refund-warning {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .c-refund-confirm-details {
  text-align: right;
}

[dir="rtl"] .c-refund-confirm-row {
  flex-direction: row-reverse;
}

[dir="rtl"] .c-refund-confirm-value {
  flex-direction: row-reverse;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 480px) {
  .c-refund-modal {
    max-width: none;
  }

  .c-refund-confirm-amount {
    font-size: 28px;
  }

  .c-refund-success-amount {
    font-size: 24px;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .c-refund-spinner {
    animation: none;
    opacity: 0.7;
  }
}

/* === features/transactions-search.css === */
/**
 * Component/Feature: Transactions Search
 * Owner: @sukardaddy
 * Phase: GROWTH
 *
 * Story 8.3: Search UI Integration
 * Styles for transaction search input, type indicators, and results
 */

/* ========== Variables ========== */
/* Uses tokens from tokens.css */

/* ========== Search Bar Container ========== */
.c-txn-search {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 280px;
  max-width: 400px;
  flex: 1;
}

.c-txn-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* ========== Search Input ========== */
.c-txn-search-input {
  width: 100%;
  padding: 0.5rem 2.5rem;
  padding-inline-start: 2.5rem;
  padding-inline-end: 5rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  background: var(--color-bg-input, #fff);
  color: var(--color-text, #333);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.c-txn-search-input:focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.c-txn-search-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-bg-disabled, #f5f5f5);
}

.c-txn-search-input::placeholder {
  color: var(--color-text-muted, #888);
}

/* ========== Search Icon ========== */
.c-txn-search-icon {
  position: absolute;
  inset-inline-start: 0.75rem;
  color: var(--color-text-muted, #888);
  font-size: 1.25rem;
  pointer-events: none;
  transition: color 0.15s;
}

.c-txn-search-input:focus ~ .c-txn-search-icon,
.c-txn-search-input-wrap:hover .c-txn-search-icon {
  color: var(--color-primary, #3b82f6);
}

/* ========== Type Indicator Badge ========== */
.c-txn-search-type {
  position: absolute;
  inset-inline-end: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
}

.c-txn-search-type .material-icons {
  font-size: 1rem;
}

.c-txn-search-type--phone {
  opacity: 1;
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success, #10b981);
}

.c-txn-search-type--order {
  opacity: 1;
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-info, #3b82f6);
}

.c-txn-search-type--payment {
  opacity: 1;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.c-txn-search-type--ref {
  opacity: 1;
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

/* ========== Clear Button ========== */
.c-txn-search-clear {
  position: absolute;
  inset-inline-end: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}

.c-txn-search-clear:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text, #333);
}

.c-txn-search-clear .material-icons {
  font-size: 1rem;
}

/* ========== Search Hint ========== */
.c-txn-search-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  min-height: 1rem;
  padding-inline-start: 0.25rem;
}

.c-txn-search-hint--error {
  color: var(--color-error, #ef4444);
}

/* ========== Search Summary Bar ========== */
.c-txn-search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--color-bg-muted, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  margin-bottom: 1rem;
}

.c-txn-search-summary-text {
  font-size: 0.875rem;
  color: var(--color-text, #374151);
}

.c-txn-search-summary-clear {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}

.c-txn-search-summary-clear:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text, #374151);
}

.c-txn-search-summary-clear .material-icons {
  font-size: 0.875rem;
}

/* ========== Empty Search State ========== */
.c-txn-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.c-txn-search-empty-icon {
  font-size: 3rem;
  color: var(--color-text-muted, #9ca3af);
  margin-bottom: 1rem;
}

.c-txn-search-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text, #374151);
  margin: 0 0 0.5rem 0;
}

.c-txn-search-empty-message {
  font-size: 0.875rem;
  color: var(--color-text-muted, #6b7280);
  margin: 0;
  max-width: 300px;
}

/* ========== Search Error State ========== */
.c-txn-search-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.c-txn-search-error-icon {
  font-size: 3rem;
  color: var(--color-error, #ef4444);
  margin-bottom: 1rem;
}

.c-txn-search-error-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text, #374151);
  margin: 0 0 0.5rem 0;
}

.c-txn-search-error-message {
  font-size: 0.875rem;
  color: var(--color-text-muted, #6b7280);
  margin: 0 0 1rem 0;
  max-width: 300px;
}

/* ========== Header Center (for search bar placement) ========== */
.c-txn-header-center {
  display: flex;
  justify-content: center;
  flex: 1;
  max-width: 500px;
}

/* ========== States ========== */
/* Loading state - input disabled */
.c-txn-search-input:disabled + .c-txn-search-icon {
  opacity: 0.5;
}

/* ========== Dark Mode ========== */
body.dark-theme .c-txn-search-input {
  background: var(--color-bg-dark-input, #374151);
  border-color: var(--color-border-dark, #4b5563);
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-search-input:focus {
  border-color: var(--color-primary, #60a5fa);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-theme .c-txn-search-input:disabled {
  background: var(--color-bg-dark-disabled, #1f2937);
}

body.dark-theme .c-txn-search-icon,
body.dark-theme .c-txn-search-hint,
body.dark-theme .c-txn-search-clear {
  color: var(--color-text-dark-muted, #9ca3af);
}

body.dark-theme .c-txn-search-clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-search-summary {
  background: var(--color-bg-dark-muted, #1f2937);
  border-color: var(--color-border-dark, #374151);
}

body.dark-theme .c-txn-search-summary-text {
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-search-summary-clear {
  color: var(--color-text-dark-muted, #9ca3af);
}

body.dark-theme .c-txn-search-summary-clear:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-search-empty-title,
body.dark-theme .c-txn-search-error-title {
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-search-empty-message,
body.dark-theme .c-txn-search-error-message {
  color: var(--color-text-dark-muted, #9ca3af);
}

/* ========== RTL Support ========== */
/* Using logical properties throughout, but add explicit RTL overrides if needed */
[dir="rtl"] .c-txn-search-input {
  text-align: right;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .c-txn-search {
    min-width: 200px;
    max-width: 100%;
  }

  .c-txn-header-center {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin-top: 0.75rem;
  }

  .c-txn-header-bar {
    flex-wrap: wrap;
  }

  .c-txn-search-summary {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .c-txn-search-summary-clear {
    align-self: flex-end;
  }
}

/* === features/transactions-datepicker.css === */
/**
 * Component/Feature: Transactions Date Picker
 * Owner: @sukardaddy
 * Phase: GROWTH
 *
 * Story 8.4: Date Picker Component
 * Styles for date range picker, calendar dropdown, presets, and filter pills
 */

/* ========== Variables ========== */
/* Uses tokens from tokens.css */

/* ========== Date Range Container ========== */
.c-txn-date-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.c-txn-date-range-label {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
}

/* ========== Date Input Wrapper ========== */
.c-txn-date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.c-txn-date-input {
  width: 130px;
  padding: 0.5rem 0.75rem;
  padding-inline-end: 2.25rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  background: var(--color-bg-input, #fff);
  color: var(--color-text, #333);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.c-txn-date-input:focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.c-txn-date-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-bg-disabled, #f5f5f5);
}

.c-txn-date-input::placeholder {
  color: var(--color-text-muted, #888);
}

.c-txn-date-input.is-invalid {
  border-color: var(--color-error, #ef4444);
}

/* ========== Calendar Icon Button ========== */
.c-txn-date-icon {
  position: absolute;
  inset-inline-end: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}

.c-txn-date-icon:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-primary, #3b82f6);
}

.c-txn-date-icon .material-icons {
  font-size: 1.125rem;
}

/* ========== Date Separator ========== */
.c-txn-date-separator {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.875rem;
}

/* ========== Presets Dropdown Button ========== */
.c-txn-date-presets-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 6px;
  background: var(--color-bg-input, #fff);
  color: var(--color-text, #333);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.c-txn-date-presets-btn:hover {
  border-color: var(--color-primary, #3b82f6);
}

.c-txn-date-presets-btn:focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.c-txn-date-presets-btn .material-icons {
  font-size: 1rem;
  transition: transform 0.15s;
}

.c-txn-date-presets-btn[aria-expanded="true"] .material-icons {
  transform: rotate(180deg);
}

/* ========== Calendar Dropdown Container ========== */
.c-txn-date-calendar {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  z-index: 100;
  min-width: 280px;
  padding: 1rem;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.c-txn-date-calendar[hidden] {
  display: none;
}

/* ========== Calendar Header (Month/Year Navigation) ========== */
.c-txn-date-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.c-txn-date-calendar-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text, #374151);
}

.c-txn-date-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}

.c-txn-date-nav-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text, #374151);
}

.c-txn-date-nav-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.c-txn-date-nav-btn .material-icons {
  font-size: 1.25rem;
}

/* ========== Weekday Headers Row ========== */
.c-txn-date-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.5rem;
}

.c-txn-date-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
}

/* ========== Days Grid ========== */
.c-txn-date-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.c-txn-date-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text, #374151);
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}

.c-txn-date-day:hover:not(.is-disabled):not(.is-outside) {
  background: rgba(59, 130, 246, 0.1);
}

.c-txn-date-day:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
  z-index: 1;
}

/* Day States */
.c-txn-date-day.is-today {
  font-weight: 600;
  position: relative;
}

.c-txn-date-day.is-today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--color-primary, #3b82f6);
  border-radius: 50%;
}

[dir="rtl"] .c-txn-date-day.is-today::after {
  transform: translateX(50%);
}

.c-txn-date-day.is-selected {
  background: var(--color-primary, #3b82f6);
  color: #fff;
}

.c-txn-date-day.is-selected::after {
  background: #fff;
}

.c-txn-date-day.is-in-range {
  background: rgba(59, 130, 246, 0.15);
  border-radius: 0;
}

.c-txn-date-day.is-range-start {
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
}

.c-txn-date-day.is-range-end {
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
}

.c-txn-date-day.is-outside {
  color: var(--color-text-muted, #9ca3af);
  opacity: 0.5;
}

.c-txn-date-day.is-disabled {
  color: var(--color-text-muted, #9ca3af);
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========== Presets Dropdown ========== */
.c-txn-date-presets {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 100;
  min-width: 180px;
  padding: 0.5rem 0;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.c-txn-date-presets[hidden] {
  display: none;
}

.c-txn-date-preset-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--color-text, #374151);
  font-size: 0.875rem;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s;
}

.c-txn-date-preset-item:hover {
  background: rgba(59, 130, 246, 0.1);
}

.c-txn-date-preset-item:focus {
  outline: none;
  background: rgba(59, 130, 246, 0.1);
}

.c-txn-date-preset-item.is-active {
  background: rgba(59, 130, 246, 0.15);
  font-weight: 500;
}

/* ========== Validation Error ========== */
.c-txn-date-error {
  font-size: 0.75rem;
  color: var(--color-error, #ef4444);
  margin-top: 0.25rem;
}

/* ========== Apply Button ========== */
.c-txn-date-apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.5rem 1rem;
  margin-top: 0.75rem;
  border: none;
  border-radius: 6px;
  background: var(--color-primary, #3b82f6);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
}

.c-txn-date-apply-btn:hover:not(:disabled) {
  background: var(--color-primary-dark, #2563eb);
}

.c-txn-date-apply-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.c-txn-date-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== Filter Pills ========== */
.c-txn-date-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.c-txn-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  padding-inline-end: 0.25rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 9999px;
  font-size: 0.75rem;
  color: var(--color-primary-dark, #1d4ed8);
}

.c-txn-date-pill-text {
  white-space: nowrap;
}

.c-txn-date-pill-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-primary, #3b82f6);
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s, color 0.15s;
}

.c-txn-date-pill-clear:hover {
  background: rgba(59, 130, 246, 0.2);
  color: var(--color-primary-dark, #1d4ed8);
}

.c-txn-date-pill-clear .material-icons {
  font-size: 0.875rem;
}

/* ========== States ========== */
/* Container with calendar open */
.c-txn-date-input-wrap.is-open .c-txn-date-input {
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========== Dark Mode ========== */
/* Dark mode styles moved to transactions-datepicker-dark.css */

/* ========== RTL Support ========== */
/* Using CSS logical properties throughout for RTL */
/* Calendar navigation arrows flip direction */
[dir="rtl"] .c-txn-date-nav-btn.is-prev .material-icons {
  transform: rotate(180deg);
}

[dir="rtl"] .c-txn-date-nav-btn.is-next .material-icons {
  transform: rotate(180deg);
}

[dir="rtl"] .c-txn-date-input {
  text-align: right;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .c-txn-date-range {
    flex-wrap: wrap;
  }

  .c-txn-date-input {
    width: 100%;
    min-width: 0;
  }

  .c-txn-date-input-wrap {
    flex: 1;
    min-width: 120px;
  }

  /* Calendar as modal on small screens */
  .c-txn-date-calendar {
    position: fixed;
    top: 50%;
    left: 50%;
    inset-inline-start: auto;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  /* Backdrop for calendar modal */
  .c-txn-date-calendar::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }

  .c-txn-date-presets {
    position: fixed;
    top: 50%;
    left: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  .c-txn-date-presets::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }

  .c-txn-date-pills {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .c-txn-date-range {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .c-txn-date-separator {
    display: none;
  }

  .c-txn-date-presets-btn {
    width: 100%;
    justify-content: center;
  }
}

/* === features/transactions-datepicker-dark.css === */
/**
 * Component/Feature: Transactions Date Picker - Dark Mode
 * Owner: @sukardaddy
 * Phase: GROWTH
 *
 * Story 8.4: Date Picker Component - Dark Mode Styles
 * Split from transactions-datepicker.css to comply with 600-line limit
 */

/* ========== Dark Mode ========== */
body.dark-theme .c-txn-date-input {
  background: var(--color-bg-dark-input, #374151);
  border-color: var(--color-border-dark, #4b5563);
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-date-input:focus {
  border-color: var(--color-primary, #60a5fa);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-theme .c-txn-date-input:disabled {
  background: var(--color-bg-dark-disabled, #1f2937);
}

body.dark-theme .c-txn-date-input.is-invalid {
  border-color: var(--color-error, #f87171);
}

body.dark-theme .c-txn-date-icon,
body.dark-theme .c-txn-date-separator,
body.dark-theme .c-txn-date-range-label {
  color: var(--color-text-dark-muted, #9ca3af);
}

body.dark-theme .c-txn-date-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary, #60a5fa);
}

body.dark-theme .c-txn-date-presets-btn {
  background: var(--color-bg-dark-input, #374151);
  border-color: var(--color-border-dark, #4b5563);
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-date-presets-btn:hover {
  border-color: var(--color-primary, #60a5fa);
}

body.dark-theme .c-txn-date-calendar,
body.dark-theme .c-txn-date-presets {
  background: var(--color-bg-dark-card, #1f2937);
  border-color: var(--color-border-dark, #374151);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-theme .c-txn-date-calendar-title {
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-date-nav-btn {
  color: var(--color-text-dark-muted, #9ca3af);
}

body.dark-theme .c-txn-date-nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-date-weekday {
  color: var(--color-text-dark-muted, #9ca3af);
}

body.dark-theme .c-txn-date-day {
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-date-day:hover:not(.is-disabled):not(.is-outside) {
  background: rgba(96, 165, 250, 0.2);
}

body.dark-theme .c-txn-date-day.is-today::after {
  background: var(--color-primary, #60a5fa);
}

body.dark-theme .c-txn-date-day.is-selected {
  background: var(--color-primary, #3b82f6);
}

body.dark-theme .c-txn-date-day.is-in-range {
  background: rgba(96, 165, 250, 0.2);
}

body.dark-theme .c-txn-date-day.is-outside,
body.dark-theme .c-txn-date-day.is-disabled {
  color: var(--color-text-dark-muted, #6b7280);
}

body.dark-theme .c-txn-date-preset-item {
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-date-preset-item:hover,
body.dark-theme .c-txn-date-preset-item:focus {
  background: rgba(96, 165, 250, 0.2);
}

body.dark-theme .c-txn-date-preset-item.is-active {
  background: rgba(96, 165, 250, 0.25);
}

body.dark-theme .c-txn-date-error {
  color: var(--color-error, #f87171);
}

body.dark-theme .c-txn-date-apply-btn {
  background: var(--color-primary, #3b82f6);
}

body.dark-theme .c-txn-date-apply-btn:hover:not(:disabled) {
  background: var(--color-primary-dark, #2563eb);
}

body.dark-theme .c-txn-date-pill {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.3);
  color: var(--color-primary, #60a5fa);
}

body.dark-theme .c-txn-date-pill-clear {
  color: var(--color-primary, #60a5fa);
}

body.dark-theme .c-txn-date-pill-clear:hover {
  background: rgba(96, 165, 250, 0.3);
}

/* === features/transactions-status-filter.css === */
/**
 * Component/Feature: Transactions Status Filter
 * Owner: @sukardaddy
 * Phase: GROWTH
 *
 * Story 8.5: Status Filter Component
 * Styles for status filter dropdown, checkboxes, quick actions, and status pills
 */

/* ========== Variables ========== */
/* Status colors matching render.js getStatusClass() */
:root {
  --c-status-success: #22c55e;
  --c-status-error: #ef4444;
  --c-status-info: #3b82f6;
}

/* ========== Status Filter Button ========== */
.c-txn-status-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 6px;
  background: var(--color-bg-input, #fff);
  color: var(--color-text, #333);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.c-txn-status-filter-btn:hover {
  border-color: var(--color-primary, #3b82f6);
}

.c-txn-status-filter-btn:focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.c-txn-status-filter-btn .material-icons {
  font-size: 1rem;
  transition: transform 0.15s;
}

.c-txn-status-filter-btn[aria-expanded="true"] .material-icons {
  transform: rotate(180deg);
}

.c-txn-status-filter-btn-text {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button with active filter indicator */
.c-txn-status-filter-btn.is-active {
  border-color: var(--color-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
}

/* ========== Status Filter Wrapper ========== */
.c-txn-status-filter-wrap {
  position: relative;
}

/* ========== Status Filter Dropdown ========== */
.c-txn-status-filter-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 100;
  min-width: 200px;
  padding: 0.5rem 0;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.c-txn-status-filter-dropdown[hidden] {
  display: none;
}

/* ========== Status Checkbox Items ========== */
.c-txn-status-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-txn-status-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.c-txn-status-filter-item:hover {
  background: rgba(59, 130, 246, 0.1);
}

.c-txn-status-filter-item:focus-within {
  background: rgba(59, 130, 246, 0.1);
}

/* Custom checkbox styling */
.c-txn-status-filter-checkbox {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.c-txn-status-filter-checkbox input[type="checkbox"] {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.c-txn-status-filter-checkbox-custom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border, #d1d5db);
  border-radius: 3px;
  background: var(--color-bg-input, #fff);
  pointer-events: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.c-txn-status-filter-checkbox input:checked + .c-txn-status-filter-checkbox-custom {
  border-color: var(--color-primary, #3b82f6);
  background: var(--color-primary, #3b82f6);
}

.c-txn-status-filter-checkbox-custom::after {
  content: '';
  display: none;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

.c-txn-status-filter-checkbox input:checked + .c-txn-status-filter-checkbox-custom::after {
  display: block;
}

.c-txn-status-filter-checkbox input:focus + .c-txn-status-filter-checkbox-custom {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Status color indicator */
.c-txn-status-filter-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.c-txn-status-filter-indicator--success {
  background-color: var(--c-status-success);
}

.c-txn-status-filter-indicator--error {
  background-color: var(--c-status-error);
}

.c-txn-status-filter-indicator--info {
  background-color: var(--c-status-info);
}

/* Status label */
.c-txn-status-filter-label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--color-text, #374151);
}

/* Status count badge */
.c-txn-status-filter-count {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  margin-inline-start: auto;
}

/* ========== Quick Actions Footer ========== */
.c-txn-status-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}

.c-txn-status-filter-action-btn {
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-primary, #3b82f6);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
}

.c-txn-status-filter-action-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

.c-txn-status-filter-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* ========== Status Filter Pills ========== */
.c-txn-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.c-txn-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  padding-inline-end: 0.25rem;
  border-radius: 9999px;
  font-size: 0.75rem;
}

/* Status-specific pill colors */
.c-txn-status-pill--success {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #166534;
}

.c-txn-status-pill--error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}

.c-txn-status-pill--info {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #1d4ed8;
}

.c-txn-status-pill-text {
  white-space: nowrap;
}

.c-txn-status-pill-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s;
}

.c-txn-status-pill--success .c-txn-status-pill-clear {
  color: #166534;
}

.c-txn-status-pill--success .c-txn-status-pill-clear:hover {
  background: rgba(34, 197, 94, 0.3);
}

.c-txn-status-pill--error .c-txn-status-pill-clear {
  color: #991b1b;
}

.c-txn-status-pill--error .c-txn-status-pill-clear:hover {
  background: rgba(239, 68, 68, 0.3);
}

.c-txn-status-pill--info .c-txn-status-pill-clear {
  color: #1d4ed8;
}

.c-txn-status-pill--info .c-txn-status-pill-clear:hover {
  background: rgba(59, 130, 246, 0.3);
}

.c-txn-status-pill-clear .material-icons {
  font-size: 0.875rem;
}

/* ========== Combined Filter Pills Container ========== */
.c-txn-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ========== Dark Mode ========== */
body.dark-theme .c-txn-status-filter-btn {
  background: var(--color-bg-dark-input, #374151);
  border-color: var(--color-border-dark, #4b5563);
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-status-filter-btn:hover {
  border-color: var(--color-primary, #60a5fa);
}

body.dark-theme .c-txn-status-filter-btn:focus {
  border-color: var(--color-primary, #60a5fa);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-theme .c-txn-status-filter-btn.is-active {
  border-color: var(--color-primary, #60a5fa);
  background: rgba(96, 165, 250, 0.1);
}

body.dark-theme .c-txn-status-filter-dropdown {
  background: var(--color-bg-dark-card, #1f2937);
  border-color: var(--color-border-dark, #374151);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-theme .c-txn-status-filter-item:hover,
body.dark-theme .c-txn-status-filter-item:focus-within {
  background: rgba(96, 165, 250, 0.2);
}

body.dark-theme .c-txn-status-filter-checkbox-custom {
  background: var(--color-bg-dark-input, #374151);
  border-color: var(--color-border-dark, #4b5563);
}

body.dark-theme .c-txn-status-filter-checkbox input:checked + .c-txn-status-filter-checkbox-custom {
  border-color: var(--color-primary, #3b82f6);
  background: var(--color-primary, #3b82f6);
}

body.dark-theme .c-txn-status-filter-label {
  color: var(--color-text-dark, #f9fafb);
}

body.dark-theme .c-txn-status-filter-count {
  color: var(--color-text-dark-muted, #9ca3af);
}

body.dark-theme .c-txn-status-filter-actions {
  border-color: var(--color-border-dark, #374151);
}

body.dark-theme .c-txn-status-filter-action-btn {
  color: var(--color-primary, #60a5fa);
}

body.dark-theme .c-txn-status-filter-action-btn:hover {
  background: rgba(96, 165, 250, 0.2);
}

/* Dark mode pill colors */
body.dark-theme .c-txn-status-pill--success {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}

body.dark-theme .c-txn-status-pill--success .c-txn-status-pill-clear {
  color: #86efac;
}

body.dark-theme .c-txn-status-pill--error {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

body.dark-theme .c-txn-status-pill--error .c-txn-status-pill-clear {
  color: #fca5a5;
}

body.dark-theme .c-txn-status-pill--info {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(96, 165, 250, 0.4);
  color: #93c5fd;
}

body.dark-theme .c-txn-status-pill--info .c-txn-status-pill-clear {
  color: #93c5fd;
}

/* ========== RTL Support ========== */
/* Using CSS logical properties throughout */
[dir="rtl"] .c-txn-status-filter-dropdown {
  text-align: right;
}

[dir="rtl"] .c-txn-status-filter-item {
  flex-direction: row;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .c-txn-status-filter-wrap {
    width: 100%;
  }

  .c-txn-status-filter-btn {
    width: 100%;
    justify-content: space-between;
  }

  /* Dropdown as modal on small screens */
  .c-txn-status-filter-dropdown {
    position: fixed;
    top: 50%;
    left: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    min-width: 280px;
  }

  /* Backdrop for dropdown modal */
  .c-txn-status-filter-dropdown::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }

  .c-txn-filter-pills {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .c-txn-status-filter-btn-text {
    max-width: none;
  }
}

/* === features/transactions-export.css === */
/**
 * Transaction Export Button Styles
 * Story 8.6: CSV Export
 *
 * Provides styling for the export button in transactions header.
 */

/* ============================================================================
 * Export Button
 * ============================================================================ */

.c-txn-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #333);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.c-txn-export-btn:hover:not(:disabled) {
  background: var(--bg-hover, #f5f5f5);
  border-color: var(--border-color-hover, #ccc);
}

.c-txn-export-btn:focus-visible {
  outline: 2px solid var(--focus-ring, #2196f3);
  outline-offset: 2px;
}

.c-txn-export-btn:disabled,
.c-txn-export-btn.is-loading,
.c-txn-export-btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* AC8: Specific styling for disabled (empty) state */
.c-txn-export-btn.is-disabled {
  opacity: 0.5;
}

.c-txn-export-btn .material-icons {
  font-size: 18px;
}

/* ============================================================================
 * Export Spinner
 * ============================================================================ */

.c-txn-export-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #ddd);
  border-top-color: var(--primary-color, #2196f3);
  border-radius: 50%;
  animation: txn-export-spin 0.8s linear infinite;
}

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

/* ============================================================================
 * Button Text (Responsive)
 * ============================================================================ */

.c-txn-export-btn-text {
  /* Show on larger screens */
}

/* Hide text on smaller screens */
@media (max-width: 768px) {
  .c-txn-export-btn-text {
    display: none;
  }

  .c-txn-export-btn {
    padding: 8px;
  }
}

/* ============================================================================
 * RTL Support
 * ============================================================================ */

[dir="rtl"] .c-txn-export-btn {
  flex-direction: row-reverse;
}

/* ============================================================================
 * Dark Mode Support
 * ============================================================================ */

@media (prefers-color-scheme: dark) {
  .c-txn-export-btn {
    background: var(--bg-primary-dark, #2a2a2a);
    border-color: var(--border-color-dark, #444);
    color: var(--text-primary-dark, #e0e0e0);
  }

  .c-txn-export-btn:hover:not(:disabled) {
    background: var(--bg-hover-dark, #333);
    border-color: var(--border-color-hover-dark, #555);
  }

  .c-txn-export-spinner {
    border-color: var(--border-color-dark, #444);
    border-top-color: var(--primary-color, #64b5f6);
  }
}

/* === features/users.css === */
/**
 * Feature: Users
 * Owner: @sukardaddy
 * Phase: MVP
 *
 * Styles for user management table, badges, password display,
 * action buttons, user edit modal, and restaurant assignments.
 * Dark theme uses CSS variables from tokens.css.
 */

/* ==========================================================================
   Users Table
   ========================================================================== */

.users-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.users-table thead {
  background: var(--color-bg-elevated);
}

.users-table th {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--color-border-default);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-heading);
  white-space: nowrap;
  vertical-align: middle;
}

.users-table th.sortable {
  position: relative;
  padding-right: 24px;
  cursor: pointer;
}

.users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: middle;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.users-table tbody tr {
  transition: background-color var(--transition-fast) var(--ease-default);
}

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

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

/* ==========================================================================
   Users Table Cell Styling
   ========================================================================== */

.users-table .cell-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-slate-900);
}

/* ==========================================================================
   Users Role Badge
   ========================================================================== */

.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.user-role-badge.role-superadmin {
  background: #fef3c7;
  color: #78350f;
}

.user-role-badge.role-user {
  background: #d1fae5;
  color: #065f46;
}

/* ==========================================================================
   Users Status Cell
   ========================================================================== */

.user-status-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.user-status-badge.status-active {
  background: #d1fae5;
  color: #065f46;
}

.user-status-badge.status-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.user-status-badge.status-verified {
  background: #d1fae5;
  color: #065f46;
}

.user-status-badge.status-pending {
  background: #fef3c7;
  color: #78350f;
}

.user-status-badge .material-icons {
  font-size: 12px;
}

/* ==========================================================================
   Users Password Cell
   ========================================================================== */

.user-password-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-password-mask {
  font-family: monospace;
  font-size: 12px;
  background: var(--color-bg-elevated);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  min-width: 80px;
  text-align: center;
}

.user-password-toggle {
  padding: 4px 8px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  transition: var(--transition-all-fast);
}

.user-password-toggle:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.user-password-toggle .material-icons {
  font-size: 14px;
}

/* ==========================================================================
   Users Action Buttons
   ========================================================================== */

.user-actions-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.users-table .btn-action {
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--font-size-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition-all-fast);
  line-height: 1;
}

.users-table .btn-action .material-icons {
  font-size: 18px;
}

.users-table .btn-action-edit {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.users-table .btn-action-edit:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.users-table .btn-action-unlock {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.users-table .btn-action-unlock:hover {
  background: var(--color-bg-hover);
  color: #d97706;
  border-color: #d97706;
}

.users-table .btn-action-delete {
  background: var(--color-error-bg-light);
  color: var(--color-error);
}

.users-table .btn-action-delete:hover {
  background: var(--color-error);
  color: var(--color-text-inverse);
}

/* ==========================================================================
   Form Required Asterisk
   ========================================================================== */

.form-required {
  color: var(--color-error);
}

/* ==========================================================================
   Restaurant Assignment Notice
   ========================================================================== */

.restaurant-notice {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  margin-top: 4px;
  display: block;
}

/* ==========================================================================
   User Info
   ========================================================================== */

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.user-email {
  margin: 4px 0 0;
  opacity: 0.9;
  font-size: 14px;
}

/* ==========================================================================
   User Badge
   ========================================================================== */

.user-badge {
  background: rgba(255,255,255,0.2);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.user-badge.superadmin {
  background: #fbbf24;
  color: #78350f;
}

.user-badge.admin {
  background: #60a5fa;
  color: #1e3a8a;
}

/* ==========================================================================
   User Avatar
   ========================================================================== */

.user-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.user-avatar .material-icons {
  font-size: 24px;
  color: white;
}

/* ==========================================================================
   User Edit Modal
   ========================================================================== */

.user-edit-modal {
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  margin: 0;
  overflow: hidden;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 90vh;
}

.user-edit-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Form Sections (User Edit Modal)
   ========================================================================== */

.form-sections {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.form-section {
  margin-bottom: 32px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f3f4f6;
  min-width: 0;
}

.section-header .material-icons {
  color: #6366f1;
  font-size: 20px;
  flex-shrink: 0;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-badge {
  margin-left: auto;
  background: #e0e7ff;
  color: #3730a3;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
}

/* ==========================================================================
   Restaurant Assignments (User Edit Modal)
   ========================================================================== */

.restaurant-assignments-container {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.restaurant-assignments-header {
  margin-bottom: 16px;
}

.restaurant-assignments-header p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.restaurant-assignments {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.restaurant-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.restaurant-item:hover {
  border-color: #d1d5db;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.restaurant-item.assigned {
  border-color: #10b981;
  background: #f0fdf4;
}

.restaurant-checkbox {
  position: relative;
}

.restaurant-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

.restaurant-checkbox label {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
}

.restaurant-info {
  flex: 1;
}

.restaurant-name {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}

.restaurant-slug {
  color: #6b7280;
  font-size: 12px;
  margin-top: 2px;
}

.restaurant-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #dbeafe;
  color: #1e40af;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.restaurant-badge .material-icons {
  font-size: 14px;
}

/* ==========================================================================
   Permission Notice
   ========================================================================== */

.permission-notice {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 4px;
}

.permission-notice h3 {
  color: #1e40af;
  margin-bottom: 8px;
  font-size: 16px;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */

body.dark-theme .users-table {
  background: var(--color-surface-dark);
  border-color: var(--color-border-default-dark);
}

body.dark-theme .users-table thead {
  background: var(--color-bg-muted-dark);
}

body.dark-theme .users-table th {
  color: #cbd5e1;
  border-bottom-color: var(--color-border-default-dark);
}

body.dark-theme .users-table td {
  color: #94a3b8;
  border-bottom-color: var(--color-border-light-dark);
}

body.dark-theme .users-table tbody tr:hover {
  background: var(--color-bg-hover-dark);
}

body.dark-theme .users-table .cell-name {
  color: #f1f5f9;
}

body.dark-theme .user-role-badge.role-superadmin {
  background: rgba(254, 243, 199, 0.15);
  color: #fbbf24;
}

body.dark-theme .user-role-badge.role-user {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

body.dark-theme .user-status-badge.status-active {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

body.dark-theme .user-status-badge.status-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

body.dark-theme .user-status-badge.status-verified {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

body.dark-theme .user-status-badge.status-pending {
  background: rgba(254, 243, 199, 0.15);
  color: #fbbf24;
}

body.dark-theme .user-password-mask {
  background: var(--color-bg-muted-dark);
  border-color: var(--color-border-default-dark);
  color: #94a3b8;
}

body.dark-theme .user-password-toggle {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

body.dark-theme .user-password-toggle:hover {
  background: var(--color-primary);
  color: white;
}

body.dark-theme .users-table .btn-action-edit {
  background: var(--color-bg-muted-dark);
  color: #94a3b8;
  border-color: var(--color-border-default-dark);
}

body.dark-theme .users-table .btn-action-edit:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

body.dark-theme .users-table .btn-action-unlock {
  background: var(--color-bg-muted-dark);
  color: #94a3b8;
  border-color: var(--color-border-default-dark);
}

body.dark-theme .users-table .btn-action-unlock:hover {
  color: #fbbf24;
  border-color: #fbbf24;
}

body.dark-theme .users-table .btn-action-delete {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

body.dark-theme .users-table .btn-action-delete:hover {
  background: var(--color-error);
  color: white;
}

body.dark-theme .user-edit-modal {
  background: var(--surface-dark, #1e293b);
}

body.dark-theme .section-header {
  border-bottom-color: var(--border-color-dark, #334155);
}

body.dark-theme .section-header h4 {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .section-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

body.dark-theme .restaurant-assignments-container {
  background: var(--surface-secondary-dark, #334155);
  border-color: var(--border-color-dark, #475569);
}

body.dark-theme .restaurant-assignments-header p {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .restaurant-item {
  background: var(--surface-dark, #1e293b);
  border-color: var(--border-color-dark, #475569);
}

body.dark-theme .restaurant-item:hover {
  border-color: var(--border-hover-dark, #64748b);
}

body.dark-theme .restaurant-item.assigned {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
}

body.dark-theme .restaurant-name {
  color: var(--text-primary-dark, #f1f5f9);
}

body.dark-theme .restaurant-slug {
  color: var(--text-secondary-dark, #94a3b8);
}

body.dark-theme .restaurant-notice {
  color: #64748b;
}

body.dark-theme .permission-notice {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #60a5fa;
}

body.dark-theme .permission-notice h3 {
  color: #93c5fd;
}

/* ==========================================================================
   Responsive - Mobile (<=768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Stack table for mobile */
  .users-table,
  .users-table thead,
  .users-table tbody,
  .users-table th,
  .users-table td,
  .users-table tr {
    display: block;
  }

  .users-table thead {
    display: none;
  }

  .users-table tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--color-bg-base);
  }

  .users-table td {
    border-bottom: none;
    padding: 6px 0;
    text-align: left;
    position: relative;
    padding-left: 40%;
    min-height: 28px;
  }

  .users-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 38%;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
    font-size: var(--font-size-xs);
  }

  .user-actions-group {
    justify-content: flex-end;
  }

  .user-info {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
  }

  .user-info .user-badge {
    font-size: 12px;
    padding: 4px 8px;
    margin-top: 4px;
  }

  .user-info button {
    font-size: 14px;
    padding: 8px 12px;
    min-height: 36px;
    margin-top: 8px;
  }

  .user-edit-modal {
    width: 100%;
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .user-edit-modal .modal-header,
  .modal-container .user-edit-modal .modal-header,
  .modal-overlay .user-edit-modal .modal-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-radius: 0 !important;
  }

  .user-edit-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-sections {
    padding: 16px;
  }

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

  .section-badge {
    order: 3;
    width: 100%;
    text-align: center;
    margin-top: 8px;
    margin-left: 0;
  }

  #restaurant-assignments input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }
}