:root {
  /* Colors */
  --color-primary: #772cbb;
  --color-primary-dark: #5c2290;
  --color-primary-light: #9b4ed6;
  --color-bg: #f8fafc;
  --color-sidebar: #1e293b;
  --color-sidebar-hover: #334155;
  --color-text: #1e293b;
  --color-text-light: #64748b;
  --color-border: #e2e8f0;
  --color-white: #ffffff;
  --color-error: #dc2626;
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-info: #6366f1;

  /* Semantic backgrounds (for alerts, badges, etc.) */
  --color-success-bg: #d1fae5;
  --color-success-text: #065f46;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-error-bg: #fee2e2;
  --color-error-text: #991b1b;
  --color-info-bg: #dbeafe;
  --color-info-text: #1e40af;

  /* Spacing (mirrors tokens.js) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 48px;

  /* Typography (mirrors tokens.js) */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.5rem;
  --font-display: 2rem;

  /* Icon sizes (mirrors tokens.js) */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --icon-xxl: 64px;

  /* Radius & Shadow */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Icon component base styles */
.portal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

/* Prevent horizontal overflow/scroll on mobile PWA */
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* Prevent text size adjustment on orientation change */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prevent horizontal touch gestures at document level */
  touch-action: pan-y pinch-zoom;
}

/* Headings - grey by default */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-light);
}

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

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Layout */
.portal-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 280px; /* Increased from 250px for better desktop UX */
  background: var(--color-sidebar);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain; /* Prevent bounce from affecting layout */
}

.sidebar-header {
  padding: 2rem 1.5rem; /* Increased padding for better desktop spacing */
  border-bottom: 1px solid var(--color-sidebar-hover);
}

.sidebar-brand {
  font-size: 1.25rem; /* Increased from 1.125rem */
  font-weight: 600;
  color: var(--color-white);
}

.sidebar-subtitle {
  font-size: 0.8125rem; /* Increased from 0.75rem for better readability */
  color: var(--color-text-light);
  margin-top: 0.25rem;
}

/* Country Switcher (super admin only) */
.country-switcher {
  position: relative;
}

.country-switcher-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  color: inherit;
}

.country-switcher-chevron {
  font-size: 0.625rem;
  color: var(--color-text-light);
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.country-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #1e293b;
  border: 1px solid var(--color-sidebar-hover);
  border-radius: 0.5rem;
  padding: 0.25rem 0;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.country-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.875rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.country-option:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-white);
}

.country-option.current {
  color: var(--color-white);
  font-weight: 500;
}

.country-current-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
  min-height: 0; /* Allow flex shrinking for scroll */
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.875rem; /* Increased from 0.75rem */
  padding: 0.875rem 1.5rem; /* Increased from 0.75rem */
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.15s;
  font-size: 0.9375rem; /* Slightly larger for desktop */
}

.nav-link:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-white);
  text-decoration: none;
  padding-left: 1.75rem; /* Subtle slide effect */
}

.nav-link.active {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 500;
}

/* Nested nav links (indented in collapsible groups) */
.nav-link-nested {
  padding-left: 2.5rem;
  font-size: 0.875rem;
}

/* Disabled nav links (coming soon) */
.nav-link-disabled {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: #64748b;
  opacity: 0.6;
  cursor: not-allowed;
  font-size: 0.875rem;
}

.coming-soon-badge {
  margin-left: auto;
  padding: 0.125rem 0.375rem;
  background: #334155;
  color: #94a3b8;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

/* Footer menu items */
.footer-menu {
  padding: 0.5rem 0;
  border-top: 1px solid #334155;
  margin-bottom: 0.5rem;
}

/* Collapsible Nav Sections */
.nav-section {
  margin-bottom: 0.25rem;
}

.nav-section-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1.5rem; /* Increased from 0.625rem */
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.8125rem; /* Increased from 0.75rem */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s;
}

.nav-section-toggle:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-white);
  padding-left: 1.75rem; /* Subtle slide effect */
}

.nav-section-toggle.open {
  color: #cbd5e1;
}

.nav-section-icon {
  margin-right: 0.5rem;
}

.nav-section-title {
  flex: 1;
  text-align: left;
}

.nav-section-arrow {
  font-size: 0.625rem;
  opacity: 0.6;
  transition: transform 0.2s;
}

.nav-section-items {
  animation: slideDown 0.15s ease-out;
}

/* Subgroups within a nav section (e.g., Email with Customer/Lead/Candidate subsections) */
.nav-subgroup {
  margin-bottom: 0.5rem;
}

.nav-subgroup:last-child {
  margin-bottom: 0;
}

.nav-subgroup-title {
  padding: 0.375rem 1rem 0.25rem 2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  opacity: 0.8;
}

.nav-link-subgrouped {
  padding-left: 2.75rem;
  font-size: 0.8125rem;
}

/* Admin section divider — separates Country Admin from Super Admin items */
.nav-admin-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 2rem 0.25rem;
  margin-top: 0.25rem;
}

.nav-admin-divider::before,
.nav-admin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-sidebar-hover);
}

.nav-admin-divider span {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  white-space: nowrap;
}

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

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-sidebar-hover);
}

/* Pinned sections in sidebar footer */
.pinned-section {
  border-bottom: 1px solid var(--color-sidebar-hover);
}

.pinned-section:last-of-type {
  border-bottom: none;
}

.pinned-section .nav-section {
  margin-bottom: 0;
}

.pinned-section .nav-section-toggle {
  padding: 0.625rem 1rem;
}

.pinned-section .nav-section-items {
  max-height: 200px;
  overflow-y: auto;
}

/* Peace of Sleep section - subtle brand color */
.pinned-section-pos {
  background: rgba(79, 70, 229, 0.08); /* Subtle indigo/sleep color */
  border-left: 3px solid #6366f1; /* Indigo accent */
}

.pinned-section-pos .nav-section-toggle {
  color: #a5b4fc; /* Lighter indigo text */
}

.pinned-section-pos .nav-section-toggle:hover {
  color: #c7d2fe;
}

.pinned-section-pos .nav-link-nested:hover {
  background: rgba(99, 102, 241, 0.15);
}

.pinned-section-pos .nav-link-nested.active {
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
}

/* Admin section - subtle styling */
.pinned-section-admin {
  background: rgba(100, 116, 139, 0.08);
}

/* User menu container in footer */
.sidebar-footer .user-menu-container {
  padding: 1rem 1.5rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.user-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.user-email {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.logout-btn {
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--color-sidebar-hover);
  color: #94a3b8;
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition: all 0.15s;
}

.logout-btn:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-white);
}

/* User Menu Dropdown */
.user-menu-container {
  position: relative;
}

.user-menu-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.user-menu-trigger:hover {
  background: var(--color-sidebar-hover);
  border-color: var(--color-sidebar-hover);
}

.user-menu-info {
  flex: 1;
  min-width: 0;
}

.user-menu-info .user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
}

.user-menu-info .user-email {
  font-size: 0.6875rem;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-arrow {
  font-size: 0.625rem;
  color: #64748b;
}

.user-menu-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: #0f172a;
  border: 1px solid var(--color-sidebar-hover);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #94a3b8;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: all 0.15s;
}

.user-menu-item:hover {
  background: var(--color-sidebar-hover);
  color: var(--color-white);
}

.user-menu-item-disabled {
  opacity: 0.6;
  cursor: default;
}

.user-menu-item-disabled:hover {
  background: transparent;
  color: #94a3b8;
}

.user-menu-signout {
  color: #f87171;
}

.user-menu-signout:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

/* Viewing As styles */
.user-menu-trigger.viewing-as {
  border-color: var(--color-primary);
  background: rgba(119, 44, 187, 0.1);
}

.user-avatar.viewing-as {
  background: var(--color-primary);
  color: white;
}

.viewing-as-name {
  color: var(--color-primary) !important;
}

.viewing-as-label {
  color: var(--color-primary) !important;
  font-weight: 500;
  font-size: 0.625rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-menu-exit-view {
  color: var(--color-primary) !important;
}

.user-menu-exit-view:hover {
  background: rgba(119, 44, 187, 0.15);
  color: var(--color-primary) !important;
}

.user-menu-view-as {
  padding: 0.5rem;
}

.user-menu-view-as .view-as-btn {
  color: #e2e8f0;
  border-color: #475569;
}

.user-menu-view-as .view-as-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* When ViewAsSelector is inside user menu, center dropdown on screen */
.user-menu-view-as .view-as-dropdown {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
  max-height: 400px;
  width: 320px;
  z-index: 1100;
}

.user-menu-divider {
  height: 1px;
  background: var(--color-sidebar-hover);
  margin: 0.5rem 0;
}

.main-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevent flex child from pushing sidebar */
  height: 100vh; /* Lock to viewport height */
  overflow: hidden; /* Prevent main-content scroll, content-area scrolls */
  overscroll-behavior: none; /* Prevent elastic bounce on the container */
}

.top-bar {
  flex-shrink: 0; /* Don't shrink header */
  height: 72px; /* Increased from 64px for better desktop presence */
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem; /* Increased from 2rem */
  z-index: 10; /* Above content */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.page-title {
  font-size: 1.5rem; /* Increased from 1.25rem for better desktop visibility */
  font-weight: 600;
}

/* Desktop Quick Action Buttons */
.desktop-quick-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Increased from 0.5rem */
  margin-left: auto;
  margin-right: 1.5rem;
}

.desktop-action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Increased from 0.375rem */
  padding: 0.625rem 1rem; /* Increased from 0.5rem 0.75rem */
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem; /* Increased from 0.875rem */
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  min-height: 44px; /* Proper touch target */
}

.desktop-action-btn:hover {
  background: var(--color-background);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px); /* Subtle lift effect */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.desktop-action-btn:hover {
  background: var(--color-background);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

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

.desktop-action-btn.desktop-action-disabled:hover {
  background: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-text);
}

.desktop-action-icon {
  font-size: 1rem;
}

.desktop-action-label {
  font-size: 0.8125rem;
}

/* Hide desktop quick actions on mobile, show action bar instead */
@media (max-width: 768px) {
  .desktop-quick-actions {
    display: none;
  }
}

/* ============================================
   MOBILE ACTION BAR
   Fixed bottom bar with quick action buttons
   Only visible on mobile (≤768px)
   ============================================ */
.mobile-action-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-action-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: white;
    border-top: 1px solid var(--color-border);
    z-index: 99;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  }

  .mobile-action-bar .mobile-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    min-width: 72px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: white;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    font-size: 16px;
    flex: 1;
    max-width: 120px;
  }

  .mobile-action-bar .mobile-action-btn:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
  }

  .mobile-action-bar .mobile-action-btn:active {
    transform: scale(0.95);
  }

  .mobile-action-btn-icon {
    font-size: 20px;
  }

  .mobile-action-btn-label {
    font-size: 11px;
    font-weight: 600;
  }

  .main-content {
    padding-bottom: 130px !important;
  }
}

@media (max-width: 480px) {
  .mobile-action-bar {
    padding: 8px 12px;
    gap: 4px;
  }

  .mobile-action-bar .mobile-action-btn {
    min-width: 65px;
    padding: 8px 12px;
    min-height: 48px;
  }

  .mobile-action-btn-icon {
    font-size: 18px;
  }

  .mobile-action-btn-label {
    font-size: 10px;
  }
}

@media (max-width: 375px) {
  .mobile-action-bar {
    padding: 6px 8px;
    gap: 2px;
  }

  .mobile-action-bar .mobile-action-btn {
    min-width: 60px;
    padding: 6px 8px;
    min-height: 48px;
  }

  .mobile-action-btn-label {
    font-size: 9px;
  }
}

/* Quick Actions Card (Dashboard - always visible) */
.quick-actions-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

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

.quick-action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 1.25rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  /* Reset button defaults for consistency with links */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
  box-sizing: border-box;
  min-height: 120px;
}

.quick-action-tile:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(119, 44, 187, 0.15);
  transform: translateY(-2px);
}

.quick-action-tile.quick-action-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quick-action-tile.quick-action-disabled:hover {
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
}

.quick-action-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.quick-action-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.quick-action-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  text-align: center;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Layout switch button - yellow to differentiate from other actions */
.layout-switch-btn {
  padding: 0.5rem 1rem;
  background: #f59e0b;
  border: 2px solid #d97706;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.15s;
}

.layout-switch-btn:hover {
  background: #d97706;
  border-color: #b45309;
}

.content-area {
  flex: 1;
  padding: 2.5rem; /* Increased from 2rem for better desktop spacing */
  overflow-y: auto; /* Vertical scroll for page content */
  overflow-x: auto; /* Horizontal scroll for wide tables */
  min-height: 0; /* Allow flex shrinking for scroll */
  overscroll-behavior: contain; /* Prevent bounce from moving header/sidebar */
  width: 100%; /* Fill available space */
}

/* Pull-to-refresh indicator */
.pull-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  pointer-events: none;
  z-index: 10;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.pull-indicator-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
}

.pull-indicator[data-refreshing="true"] .pull-indicator-spinner {
  animation: pull-spin 0.6s linear infinite;
}

.pull-indicator[data-pulling="true"] .pull-indicator-spinner {
  animation: none;
}

.pull-indicator-text {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

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

/* Hide pull indicator on desktop */
@media (min-width: 769px) {
  .pull-indicator { display: none; }
}

/* Cards */
.card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
  overflow: hidden; /* Contain wide tables */
  max-width: 100%; /* Don't exceed parent width */
}

/* Remove top padding when list-toolbar is first child (DataTable pattern) */
.card > .list-toolbar:first-child {
  margin: -4px -4px 0 -4px;
  padding: 0.75rem;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card-header {
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
}

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

.card-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.15s;
  border: none;
  min-height: 36px; /* Consistent comfortable height for ALL buttons */
}

/* Exceptions for buttons with specific height requirements */
.toolbar-btn-primary,
.toolbar-btn-secondary {
  min-height: 38px; /* Toolbar buttons keep their specific height */
}

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

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

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

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn-outline:hover {
  background: var(--color-bg);
  border-color: var(--color-text-light);
}

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

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

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

.btn-success:hover {
  background: #15803d;
}

.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
  min-height: 32px; /* Smaller but still comfortable for small buttons */
}

.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-base);
}

/* Inline action buttons for table rows - fixed size for consistency */
.btn-action {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  width: 85px;
  height: 32px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition: border-color 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(119, 44, 187, 0.1);
}

.form-input--error {
  border-color: var(--color-danger, #dc3545) !important;
  background-color: rgba(220, 53, 69, 0.05);
}

.form-input--error:focus {
  border-color: var(--color-danger, #dc3545) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.form-error-hint {
  display: block;
  color: var(--color-danger, #dc3545);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.form-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-sm);
  background: var(--color-white);
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(119, 44, 187, 0.1);
}

.form-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-sm);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(119, 44, 187, 0.1);
}

.form-help {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

.form-required {
  color: var(--color-error);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.form-error {
  color: var(--color-error);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.form-hint {
  display: block;
  color: var(--color-text-light);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-checkbox label {
  margin: 0;
  font-weight: normal;
}

/* Collapsible form sections */
.form-details {
  margin-top: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.form-details-summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 500;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  user-select: none;
}

.form-details-summary:hover {
  background: var(--color-surface-hover);
}

.form-details[open] .form-details-summary {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.form-details > div {
  padding: 1rem;
}

/* File drop zone */
.file-drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s;
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
  border-color: var(--color-primary);
  background: var(--color-bg-secondary);
}

.file-drop-zone-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

/* Login page - Mobile-first, app-like */
.login-container {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height — shrinks when keyboard opens */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  padding-top: calc(var(--safe-area-top, 0px) + 1.5rem);
  padding-bottom: calc(var(--safe-area-bottom, 0px) + 1.5rem);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  overflow-y: auto; /* Allow scrolling when keyboard shrinks viewport */
  -webkit-overflow-scrolling: touch;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.login-subtitle {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 500;
}

.login-platform {
  color: var(--color-text-light);
  font-size: 0.75rem;
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Login form inputs - larger for mobile */
.login-card .form-input {
  padding: 0.875rem 1rem;
  font-size: 16px; /* Prevents iOS zoom */
  border-radius: 10px;
  min-height: 50px;
}

.login-card .btn-primary {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  min-height: 50px;
  border-radius: 10px;
}

/* Login footer */
.login-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.6875rem;
  color: var(--color-text-light);
}

/* Install prompt on login */
.login-install-prompt {
  margin-top: 1.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, #772cbb10 0%, #772cbb05 100%);
  border: 1px solid #772cbb30;
  border-radius: 10px;
  text-align: center;
}

.login-install-prompt-text {
  font-size: 0.8125rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.login-install-prompt-btn {
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.login-install-prompt-btn:active {
  transform: scale(0.97);
}

/* Page-level loader (Suspense fallback) — delayed fade-in prevents flash on fast loads */
.page-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px); /* Fill content area below topbar */
  opacity: 0;
  animation: fadeIn 0.3s ease-in 0.15s forwards;
}

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

/* Loading */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.loading-spinner.full-screen {
  min-height: 100vh;
  flex-direction: column;
  background: #f8fafc;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

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

/* Operation Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  gap: 1rem;
}

.loading-overlay .spinner {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.loading-overlay-message {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 0.25rem;
}

/* Placeholder page */
.placeholder-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--color-text-light);
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.placeholder-text {
  font-size: 1.125rem;
}

/* Not found */
.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.not-found h1 {
  font-size: 6rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.not-found p {
  color: var(--color-text-light);
  margin: 1rem 0 2rem;
}

/* Form layout utilities */
.form-flex-row {
  display: flex;
  gap: var(--space-lg);
  align-items: end;
}

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

.form-width-140 {
  width: 140px;
}

.form-width-120 {
  width: 120px;
}

/* Modal utilities */
.modal-footer-left {
  margin-right: auto;
}

/* Table cell utilities */
.table-cell-name {
  font-weight: 500;
}

.table-cell-description {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 0.25rem;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   Mobile: < 640px
   Tablet: 640px - 1024px
   Desktop: > 1024px
   ============================================ */

/* Tablet and below */
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }

  .content-area {
    padding: 1.5rem;
  }

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

/* ============================================
   MOBILE SIDEBAR — Slide-out menu (matches Global)
   ============================================ */

/* Overlay — hidden by default */
.sidebar-overlay {
  display: none;
}

/* Hamburger — hidden on desktop */
.mobile-menu-toggle {
  display: none;
}

/* Close button — hidden on desktop */
.sidebar-close {
  display: none;
}

@media (max-width: 768px) {
  .portal-layout {
    flex-direction: column;
  }

  /* Sidebar: slide-out from left, hidden off-screen by default */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height — accounts for mobile browser chrome */
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 201;
    flex-direction: column;
    overflow: hidden; /* Don't scroll the whole sidebar — only sidebar-nav scrolls */
  }

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

  /* Header: add close button area + safe area top */
  .sidebar-header {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Footer: safe area bottom so it's never clipped by home bar */
  .sidebar-footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* User dropdown opens upward — cap height so it doesn't overflow */
  .user-menu-dropdown {
    max-height: 40vh;
    overflow-y: auto;
  }

  /* Dark overlay behind sidebar */
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 200;
  }

  .sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  /* Close button in sidebar header */
  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .sidebar-close:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
  }

  /* Hamburger button in top-bar */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: var(--color-text, #374151);
    flex-shrink: 0;
    margin-right: 0.5rem;
  }

  .main-content {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding-bottom: 70px; /* Space for action bar */
  }

  .content-area {
    padding: 1rem;
  }

  .top-bar {
    padding: 0 1rem;
  }

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

  .stat-card {
    padding: 1rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  /* Tables become scrollable */
  .card {
    overflow-x: auto;
  }

  /* Modal adjustments */
  .modal-content {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
}

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

  .content-area {
    padding: 1rem;
  }

  .page-title {
    font-size: 1rem;
  }

  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}

/* ============================================
   TABLE RESPONSIVE STYLES
   ============================================ */

/* Responsive table wrapper */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide columns on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hide-tablet {
    display: none !important;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 2rem; }

.text-uppercase { text-transform: uppercase; letter-spacing: 0.025em; }

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

.danger-zone {
  padding: 1rem;
  background: #fef2f2;
  border-radius: 8px;
  border: 1px solid #fecaca;
}

.font-mono { font-family: monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 600; }

/* Spacing - numeric */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* Spacing - semantic */
.mt-xs { margin-top: 0.25rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }

.mb-xs { margin-bottom: 0.25rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }

.py-xs { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-md { padding-top: 1rem; padding-bottom: 1rem; }

.px-xs { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-sm { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-md { padding-left: 1rem; padding-right: 1rem; }

.p-0 { padding: 0; }

.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.border-none { border: none; }

.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 999px; }

.cursor-pointer { cursor: pointer; }

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

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   STATUS BADGES (Following SA Pattern)
   ============================================ */

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-success {
  background: #d4edda;
  color: #155724;
}

.badge-warning {
  background: #fff3cd;
  color: #856404;
}

.badge-error {
  background: #f8d7da;
  color: #721c24;
}

.badge-info {
  background: #dbeafe;
  color: #1e40af;
}

.badge-neutral {
  background: #e2e3e5;
  color: #383d41;
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-primary {
  background: #dbeafe;
  color: #1e40af;
}

/* ============================================
   VIEW AS FEATURE (Super Admin)
   ============================================ */

/* Banner shown when viewing as another user - BRIGHT WARNING */
.view-as-banner {
  flex-shrink: 0; /* Don't shrink when viewing as another user */
  background: linear-gradient(90deg, #ea580c, #dc2626);
  color: white;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  animation: view-as-pulse 2s ease-in-out infinite;
}

.view-as-banner::before {
  content: '⚠️';
  font-size: 1.25rem;
}

@keyframes view-as-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.view-as-exit-btn {
  background: white;
  color: #dc2626;
  border: none;
  padding: 0.375rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.view-as-exit-btn:hover {
  background: #fef2f2;
}

/* View As Selector in top bar */
.view-as-selector {
  position: relative;
}

.view-as-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.view-as-btn:hover {
  background: var(--color-bg-secondary);
}

.view-as-btn.viewing {
  background: #772cbb;
  border-color: #772cbb;
  color: white;
}

.view-as-btn.viewing:hover {
  background: #5a1f8e;
}

.view-as-btn.compact {
  padding: 0.375rem 0.5rem;
  font-size: 1rem;
  min-width: 36px;
  justify-content: center;
}

/* Dropdown */
.view-as-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  max-height: 400px;
  overflow: hidden;
  z-index: 1000;
}

.view-as-search {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  outline: none;
}

.view-as-search:focus {
  background: var(--color-bg-secondary);
}

.view-as-list {
  max-height: 320px;
  overflow-y: auto;
}

.view-as-option {
  width: 100%;
  padding: 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  text-align: left;
}

.view-as-option:hover {
  background: var(--color-bg-secondary);
}

.view-as-name {
  font-weight: 500;
  color: var(--color-text);
}

.view-as-email {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.view-as-loading,
.view-as-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.view-as-option.active {
  background: var(--color-primary-light, #f3e8ff);
  border-left: 3px solid var(--color-primary);
}

.view-as-exit-option {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: #fef3c7;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: #92400e;
  text-align: left;
}

.view-as-exit-option:hover {
  background: #fde68a;
}

/* ============================================
   MOBILE UTILITIES
   Apply these classes to elements for responsive behavior.
   Desktop remains unchanged - only affects screens < 768px.
   ============================================ */

@media (max-width: 768px) {
  /* Stack flex/grid containers vertically */
  .mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;
    /* Also handle grid layouts */
    grid-template-columns: 1fr !important;
  }

  /* Full width elements */
  .mobile-full {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Touch-friendly inputs (44px min, 16px font prevents iOS zoom) */
  .mobile-touch {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Add gap when stacked */
  .mobile-gap {
    gap: 0.75rem !important;
  }

  /* Hide on mobile */
  .mobile-hide {
    display: none !important;
  }

  /* Tables: horizontal scroll wrapper */
  .mobile-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce padding on mobile */
  .mobile-compact {
    padding: 0.75rem !important;
  }

  /* Collapsible filter panel */
  .mobile-filters-panel.collapsed {
    display: none !important;
  }
}

/* ============================================
   Mobile Filters Component
   DEPRECATED: MobileFilters.jsx exists but is never imported.
   This CSS is unused. Consider removing in future cleanup.
   The list-toolbar pattern is preferred instead.
   ============================================ */

.mobile-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.mobile-filters-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.mobile-filters-search {
  flex: 1;
  min-width: 0;
}

.mobile-filters-search input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 16px;
  min-height: 44px;
}

.mobile-filters-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0 0.75rem;
  min-width: 44px;
  min-height: 44px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  cursor: pointer;
}

.mobile-filters-toggle.open {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.mobile-filters-toggle .filter-count {
  font-size: 0.75rem;
  background: var(--color-primary);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.mobile-filters-toggle.open .filter-count {
  display: none;
}

.mobile-filters-actions {
  display: flex;
  gap: 0.5rem;
}

.mobile-filters-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mobile-filters-panel select,
.mobile-filters-panel input {
  flex: 1;
  min-width: 120px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 16px;
  min-height: 44px;
  background: white;
}

/* ============================================
   Dashboard Home Styles
   ============================================ */

.dashboard-home {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Dashboard Section - Unified card style */
.dashboard-section {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.dashboard-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.dashboard-section-icon {
  font-size: 1.125rem;
}

.dashboard-section-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.dashboard-section-link {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.dashboard-section-link:hover {
  text-decoration: underline;
}

.dashboard-section-body {
  padding: 1rem 1.25rem;
}

.dashboard-empty-message {
  color: var(--color-text-light);
  margin: 0;
  padding: 0.5rem 0;
}

/* Dashboard Items - For notifications */
.dashboard-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border-radius: 6px;
}

.dashboard-item-content {
  flex: 1;
  min-width: 0;
}

.dashboard-item-title {
  font-weight: 500;
  font-size: 0.9375rem;
  margin-bottom: 0.125rem;
}

.dashboard-item-subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  line-height: 1.4;
}

.dashboard-item-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.dashboard-item-link:hover {
  text-decoration: underline;
}

.dashboard-item-action {
  flex-shrink: 0;
}

.dismiss-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-light);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}

.dismiss-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.dashboard-view-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-primary);
}

/* Action Group - For workflow items */
.action-group {
  background: var(--color-bg);
  border-radius: 8px;
  padding: 0.875rem;
  border-left: 4px solid;
}

.action-group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.action-group-title {
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.action-group-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: white;
  padding: 0.0625rem 0.375rem;
  border-radius: 8px;
}

.action-group-description {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  font-weight: 400;
  margin-top: 0.25rem;
}

.action-group-more {
  font-size: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
}

.action-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  gap: 0.75rem;
}

.action-item-content {
  flex: 1;
  min-width: 0;
}

.action-item-title {
  font-weight: 500;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-item-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Compact single-line action items */
.action-item-compact {
  padding: 0.5rem 0.75rem;
}

.action-item-content-inline {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
}

.action-item-title-inline {
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 80px;
}

.action-item-separator {
  color: var(--color-text-light);
  flex-shrink: 0;
}

.action-item-subtitle-inline {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action icons (view, edit) */
.action-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  font-size: 0.875rem;
}

.action-icon:hover {
  opacity: 1;
}

.action-item-btn {
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.action-item-btn:hover {
  opacity: 0.9;
}

/* Mobile responsiveness for dashboard */
@media (max-width: 768px) {
  .dashboard-home {
    padding: 0.5rem;
  }

  .dashboard-section {
    margin-bottom: 0.75rem;
  }

  .dashboard-section-header {
    padding: 0.75rem 1rem;
  }

  .dashboard-section-body {
    padding: 0.75rem 1rem;
  }

  .dashboard-section-title {
    font-size: 0.9375rem;
  }

  /* Action group mobile */
  .action-group {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .action-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .action-group-description {
    font-size: 0.75rem;
  }

  /* Compact items: stack on mobile for touch-friendly layout */
  .action-item-compact {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  /* Content stacks vertically on mobile */
  .action-item-content-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }

  .action-item-title-inline {
    font-size: 0.9375rem;
    white-space: normal;
    min-width: unset;
  }

  .action-item-separator {
    display: none;
  }

  .action-item-subtitle-inline {
    font-size: 0.8125rem;
    white-space: normal;
  }

  /* Action buttons row on mobile - full width button */
  .action-item-compact > div:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }

  /* Touch-friendly icon targets (44px minimum) */
  .action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
  }

  /* Fixed size action button on mobile - touch friendly */
  .action-item .btn-action {
    width: 90px;
    height: 40px;
    font-size: 0.875rem;
    flex-shrink: 0;
  }

  .action-item-btn {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.8125rem;
    min-height: 40px;
  }
}

/* ============================================
   Operations Pages - Unified Styles
   Used by: ServiceLogs, Certification
   ============================================ */

/* Page Container */
.ops-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Toolbar Row */
.ops-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ops-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* View Toggle */
.ops-view-toggle {
  display: flex;
  align-items: stretch;
  height: 38px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.ops-view-btn {
  padding: 0.5rem 0.875rem;
  height: 38px;
  background: transparent;
  border: none;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-light);
  transition: all 0.15s;
}

.ops-view-btn:hover {
  background: var(--color-border);
}

.ops-view-btn.active {
  background: var(--color-primary);
  color: white;
}

/* Primary Button */
.ops-primary-btn {
  padding: 0.5rem 1.25rem;
  height: 38px;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.ops-primary-btn:hover {
  opacity: 0.9;
}

.ops-secondary-btn {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.ops-secondary-btn:hover {
  background: var(--color-bg);
}

/* Search Input - Standardized across portal */
.ops-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 320px; /* Standardized width */
  min-width: 200px;
}

.ops-search-icon {
  position: absolute;
  left: 0.75rem;
  font-size: 0.875rem;
  pointer-events: none;
  opacity: 0.5;
}

.ops-search-input {
  width: 100%;
  padding: 0.625rem 2.25rem 0.625rem 2.25rem; /* Standardized padding */
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  background: white;
  min-height: 36px; /* Consistent with button height */
}

.ops-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(119, 44, 187, 0.1);
}

.ops-search-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-light);
  padding: 0.25rem;
}

/* Status Tabs */
.ops-status-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ops-status-tab {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-light);
  transition: all 0.15s;
  position: relative;
  bottom: -2px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ops-status-tab:hover {
  color: var(--color-text);
}

.ops-status-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.ops-tab-count {
  padding: 0.125rem 0.5rem;
  background: var(--color-bg);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

.ops-tab-count.active {
  background: var(--color-primary);
  color: white;
}

/* List Card */
.ops-list-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.ops-results-bar {
  padding: 0.625rem 1rem;
  font-size: 0.75rem;
  color: var(--color-text-light);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.ops-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-light);
}

.ops-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

/* Table */
.ops-table-wrapper {
  overflow-x: auto;
}

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

.ops-th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.ops-th-sortable {
  cursor: pointer;
}

.ops-th-sortable:hover {
  color: var(--color-text);
}

.ops-th-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ops-sort-icon {
  font-size: 0.625rem;
  opacity: 0.5;
}

.ops-th-center {
  text-align: center;
}

.ops-tr {
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s;
}

.ops-tr:hover {
  background: var(--color-bg);
}

.ops-td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.ops-td-center {
  text-align: center;
}

.ops-td-amount {
  font-weight: 500;
}

/* Customer Cell */
.ops-customer-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ops-customer-name {
  font-weight: 500;
}

.ops-customer-email,
.ops-customer-location {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Status Badge */
.ops-status-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.ops-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.ops-payment-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Split Chip */
.ops-split-chip {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--color-primary);
  background: rgba(119, 44, 187, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.ops-split-chip-sm {
  font-family: monospace;
  font-size: 0.625rem;
  color: var(--color-primary);
  background: rgba(119, 44, 187, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-weight: 500;
}

.ops-vat-label {
  font-size: 0.625rem;
  color: var(--color-text-light);
  margin-left: 0.25rem;
}

.ops-invoice-number {
  font-size: 0.6875rem;
  color: var(--color-primary);
  font-family: monospace;
}

/* Actions */
.ops-actions {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
}

.ops-action-btn {
  padding: 0.25rem 0.375rem;
  font-size: 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.ops-action-btn:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
}

.ops-action-approve {
  background: #dcfce7;
  border-color: #16a34a;
}

.ops-action-approve:hover {
  background: #bbf7d0;
}

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

/* Pagination */
.ops-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.ops-pagination-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.15s;
}

.ops-pagination-btn:hover:not(:disabled) {
  background: var(--color-bg);
}

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

.ops-pagination-info {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* ============================================
   Board View (Kanban)
   ============================================ */

.ops-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}

.ops-board-column {
  flex: 0 0 280px;
  min-width: 280px;
  background: var(--color-bg);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 280px);
}

.ops-board-column-header {
  padding: 0.75rem 1rem;
  border-top: 4px solid;
  border-radius: 8px 8px 0 0;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ops-board-column-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.ops-board-column-count {
  background: var(--color-bg);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.ops-board-column-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ops-board-column-sort {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: inherit;
  cursor: pointer;
  min-width: 90px;
}

.ops-board-column-sort option {
  color: var(--color-text);
  background: white;
}

.ops-board-column-sort optgroup {
  color: var(--color-text-light);
  font-weight: 600;
}

.ops-board-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ops-board-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.ops-board-card {
  background: white;
  border-radius: 6px;
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.ops-board-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ops-board-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.375rem;
}

.ops-board-card-customer {
  font-weight: 500;
  font-size: 0.875rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-board-card-amount {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-primary);
  white-space: nowrap;
  margin-left: 0.5rem;
}

.ops-board-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: 0.375rem;
}

.ops-board-card-invoice {
  font-size: 0.6875rem;
  color: var(--color-primary);
  font-family: monospace;
  margin-bottom: 0.5rem;
}

.ops-board-card-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.ops-board-action {
  flex: 1;
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.ops-board-action:hover {
  background: var(--color-border);
}

.ops-board-action-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.ops-board-action-primary:hover {
  opacity: 0.9;
  background: var(--color-primary);
}

.ops-board-more {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-light);
}

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

.ops-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
  overscroll-behavior: contain; /* Prevent scroll-through triggering pull-to-refresh */
}

.ops-modal {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ops-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.ops-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.ops-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.ops-modal-body {
  padding: 1.5rem;
}

.ops-modal-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.ops-modal-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0.75rem;
}

.ops-modal-customer-name {
  font-weight: 500;
}

.ops-modal-customer-detail {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.ops-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.ops-modal-label {
  color: var(--color-text-light);
}

.ops-modal-row-total {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
}

.ops-modal-total-label {
  font-weight: 600;
}

.ops-modal-total-value {
  font-weight: 600;
  font-size: 1.125rem;
}

.ops-modal-vat {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.ops-modal-note-hint {
  font-weight: normal;
  font-size: 0.6875rem;
  color: var(--color-text-light);
  margin-left: 0.5rem;
  text-transform: none;
}

.ops-modal-notes {
  font-size: 0.875rem;
  white-space: pre-wrap;
  color: var(--color-text-light);
}

.ops-modal-items-table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.ops-modal-items-table th {
  text-align: left;
  padding: 0.5rem 0;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}

.ops-modal-items-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.ops-item-code {
  font-size: 0.6875rem;
  color: var(--color-text-light);
  font-family: monospace;
}

.ops-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* ============================================
   Mobile Responsiveness for Ops Pages
   ============================================ */

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

  .ops-page-title-section {
    justify-content: space-between;
  }

  .ops-page-actions {
    justify-content: space-between;
  }

  .ops-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .ops-toolbar-actions {
    justify-content: space-between;
    width: 100%;
  }

  .ops-search-input-wrapper {
    max-width: none;
    width: 100%;
  }

  .ops-search-input {
    font-size: 16px; /* Prevent iOS zoom */
  }

  .ops-status-tabs {
    margin: 0 -1rem;
    padding: 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ops-status-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ops-board {
    margin: 0 -1rem;
    padding: 0 1rem 1rem;
  }

  .ops-board-column {
    flex: 0 0 260px;
    min-width: 260px;
    max-height: calc(100vh - 320px);
  }

  .ops-modal {
    max-height: 95vh;
    margin: 1rem;
  }

  .ops-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .ops-modal {
    border-radius: 12px 12px 0 0;
    max-width: none;
  }
}

/* ============================================
   UNIFIED LIST/TABLE STYLES
   Standardized components for all list pages
   ============================================ */

/* List card container */
.list-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Batch Actions Bar - for multi-select operations */
.batch-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.batch-actions-count {
  font-weight: 600;
  font-size: 0.875rem;
}

.batch-actions-buttons {
  display: flex;
  gap: 0.5rem;
}

.batch-actions-bar .btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.batch-actions-bar .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
}

.batch-actions-bar .btn-primary {
  background: white;
  color: var(--color-primary);
}

.batch-actions-bar .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}

.batch-actions-bar .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.batch-actions-bar .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.batch-actions-select {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  min-width: 140px;
  cursor: pointer;
}

.batch-actions-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
}

.batch-actions-select option {
  background: var(--color-primary);
  color: white;
}

/* Results bar */
.results-bar {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--color-text-light);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Table container */
.table-wrapper {
  overflow-x: auto;
}

/* Table scroll wrapper - applies on ALL screen sizes */
.mobile-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.data-table th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  text-align: left;
}

.data-table th.sortable {
  cursor: pointer;
}

.data-table th.sortable:hover {
  color: var(--color-text);
}

.data-table td {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

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

/* Action icons - UNIFIED */
.table-action-icon {
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table-action-icon:hover {
  background: var(--color-bg);
}

.table-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Table column utilities */
.table-col-checkbox {
  width: 40px;
  text-align: center;
}

.table-col-actions {
  width: 80px;
  text-align: center;
}

.table-row-clickable {
  cursor: pointer;
}

/* Text truncation for table cells */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* Preview table container */
.preview-table-container {
  max-height: 200px;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.preview-table-container .data-table {
  font-size: 0.875rem;
}

/* Pagination - UNIFIED */
.table-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.table-pagination-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.15s;
}

.table-pagination-btn:hover:not(:disabled) {
  background: var(--color-bg);
}

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

.table-pagination-info {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-light);
}

.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-message {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.empty-state-hint {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* Sort indicator */
.sort-indicator {
  font-size: 0.625rem;
  margin-left: 0.25rem;
  opacity: 0.5;
}

.sort-indicator.active {
  opacity: 1;
}

/* Status badges - UNIFIED */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge.success {
  background: #d4edda;
  color: #155724;
}

.status-badge.warning {
  background: #fff3cd;
  color: #856404;
}

.status-badge.danger {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.info {
  background: #dbeafe;
  color: #1e40af;
}

.status-badge.neutral {
  background: #e2e3e5;
  color: #383d41;
}

/* ============================================
   LIST TOOLBAR STYLES
   Consistent header/search/filter patterns
   ============================================ */

/* Toolbar container */
.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  gap: 1rem;
  flex-wrap: wrap;
}

/* Left side: search + filters */
.list-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  flex-wrap: wrap;
}

/* Right side: actions */
.list-toolbar-right {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ============================================
   TOOLBAR ACTIONS - Standardized button group
   Order: [•••] [🔄] [+ Primary]
   ============================================ */

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Icon buttons (refresh, overflow trigger) */
.toolbar-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.toolbar-btn-icon:hover {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.toolbar-btn-icon:active {
  background: var(--color-border);
}

/* Primary action button - fixed width */
.toolbar-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 38px;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s;
}

.toolbar-btn-primary:hover {
  background: var(--color-primary-dark, #5a1f8f);
}

.toolbar-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary action button - outline style */
.toolbar-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 38px;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  background: white;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s;
}

.toolbar-btn-secondary:hover {
  background: var(--color-primary);
  color: white;
}

.toolbar-btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dropdown menu container (used for overflow and sync menus) */
.toolbar-dropdown {
  position: relative;
}

.toolbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
}

.toolbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.toolbar-dropdown-item:hover {
  background: var(--color-bg);
}

.toolbar-dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toolbar-dropdown-icon {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

/* Search wrapper - Standardized */
.list-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 200px;
  max-width: 320px; /* Standardized width */
  flex: 1;
}

.list-search-icon {
  position: absolute;
  left: 0.75rem;
  font-size: 0.875rem;
  pointer-events: none;
  opacity: 0.5;
}

.list-search input {
  width: 100%;
  padding: 0.625rem 2.25rem 0.625rem 2.25rem; /* Standardized padding */
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  min-height: 36px; /* Consistent with button height */
}

.list-search input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(119, 44, 187, 0.1);
}

.list-search-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-text-light);
  padding: 0.25rem;
}

/* Filter select - enhanced styling */
.list-filter {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  min-height: 38px;
}

/* Select All label */
.list-select-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}

/* Desktop: Inline filters (hidden on mobile) */
.list-filters-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Mobile: Filter toggle button (hidden on desktop) */
.list-filter-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  min-height: 44px;
}

.list-filter-toggle:active {
  background: var(--color-bg);
}

.list-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--color-primary);
  color: white;
  border-radius: 9px;
}

.list-filter-arrow {
  font-size: 0.625rem;
  color: var(--color-text-light);
}

/* Mobile: Expandable filters section (hidden by default) */
.list-filters-mobile {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.list-filters-mobile.expanded {
  display: flex;
}

/* Toolbar icon button (info, etc) */
.toolbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text-light);
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.toolbar-icon-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.toolbar-icon-btn:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(119, 44, 187, 0.1);
}

/* Styled info icon */
.toolbar-icon-btn .icon-info,
.header-icon-btn .icon-info {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: inherit;
  line-height: 1;
}

/* Header icon button (for top bar) */
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text-light);
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.header-icon-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.header-icon-btn:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(119, 44, 187, 0.1);
}

/* Page info modal - matches Users page help modal styling */
.page-info-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.page-info-modal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.page-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.page-info-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

.page-info-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.page-info-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.page-info-body {
  padding: 1.5rem;
  max-height: 65vh;
  overflow: auto;
}

.page-info-body p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.page-info-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
}

/* ============================================================================
   HELP CENTRE STYLES
   Enhanced PageInfoModal with search, categories, and article browsing
   ============================================================================ */

/* Help Centre Modal - larger size */
.help-centre-modal {
  max-width: 600px !important;
  max-height: 85vh;
}

/* Help Centre Header */
.help-centre-header {
  gap: 0.75rem;
}

.help-centre-header h3 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.help-back-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.help-back-btn:hover {
  background: var(--color-bg);
}

.help-article-title {
  font-size: 1rem !important;
  margin: 0 !important;
}

/* Help Centre Body */
.help-centre-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow: hidden;
}

/* Search Input */
.help-search-wrapper {
  position: relative;
  padding: 1rem 1.5rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.help-search-input {
  width: 100%;
  max-width: 320px; /* Standardized width */
  padding: 0.625rem 2.25rem 0.625rem 1rem; /* Standardized padding */
  font-size: 0.875rem; /* Standardized font size */
  border: 1px solid var(--color-border);
  border-radius: 6px; /* Standardized border radius */
  background: white;
  transition: border-color 0.2s;
  min-height: 36px; /* Consistent with button height */
}

.help-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(119, 44, 187, 0.1); /* Standardized focus style */
}

.help-search-input::placeholder {
  color: var(--color-text-light);
}

.help-search-clear {
  position: absolute;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: 0.75rem; /* Standardized font size */
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.help-search-clear:hover {
  color: var(--color-text);
}

/* Section Labels */
.help-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.5rem 0.5rem;
}

/* Scrollable content area */
.help-search-results,
.help-contextual-section,
.help-categories-section,
.help-legacy-content,
.help-article-view {
  overflow-y: auto;
  flex: 1;
}

/* Article Lists */
.help-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.help-article-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.help-article-item:hover {
  background: var(--color-bg);
}

.help-article-item-title {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.help-article-item-arrow {
  color: var(--color-text-light);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Contextual suggestions highlighted */
.help-contextual-section {
  background: #faf5ff;
  border-bottom: 1px solid var(--color-border);
  flex: none;
}

.help-contextual-list .help-article-item:hover {
  background: #f3e8ff;
}

/* Category Browser */
.help-categories-section {
  padding-bottom: 1rem;
}

.help-categories-list {
  padding: 0 0.5rem;
}

.help-category-item {
  margin-bottom: 0.25rem;
}

.help-category-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}

.help-category-header:hover {
  background: var(--color-bg);
}

.help-category-header.expanded {
  background: var(--color-bg);
}

.help-category-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.help-category-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
}

.help-category-count {
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

.help-category-chevron {
  color: var(--color-text-light);
  font-size: 0.875rem;
  width: 1rem;
  text-align: center;
}

.help-category-articles {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 2.25rem;
}

.help-category-articles .help-article-item {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
}

/* Article View */
.help-article-view {
  padding: 1.5rem;
}

.help-article-content {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text);
}

.help-article-content h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.help-article-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1.5rem 0 0.75rem;
}

.help-article-content p {
  margin: 0 0 1rem;
}

.help-article-content ul,
.help-article-content ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.help-article-content li {
  margin-bottom: 0.5rem;
}

.help-article-content strong {
  font-weight: 600;
  color: var(--color-text);
}

.help-article-content code {
  background: var(--color-bg);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.875em;
}

.help-article-content pre {
  background: var(--color-bg);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  overflow-x: auto;
  margin: 0 0 1rem;
}

.help-article-content h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1.25rem 0 0.5rem;
}

.help-article-content .help-article-btn {
  display: inline-block;
  background: var(--sentinel-primary, #772cbb);
  color: white;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  margin: 0.5rem 0;
}

.help-article-content .help-article-btn:hover {
  opacity: 0.9;
}

.help-article-content .help-article-muted {
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

.help-article-content .help-article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0.75rem 0;
}

.help-article-content .help-article-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
}

.help-article-content .help-article-table tr:nth-child(odd) {
  background: var(--color-bg);
}

.help-article-content .help-article-table-label {
  font-weight: 600;
  white-space: nowrap;
}

/* Help Tables */
.help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

.help-table th,
.help-table td {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  text-align: left;
}

.help-table th {
  background: var(--color-bg);
  font-weight: 600;
  color: var(--color-text);
}

.help-table tr:nth-child(even) td {
  background: var(--color-bg);
}

/* Help Highlight Box */
.help-highlight {
  background: var(--color-warning-bg, #fef3c7);
  border-left: 4px solid var(--color-warning, #f59e0b);
  padding: 1rem;
  border-radius: 0 6px 6px 0;
  margin: 1rem 0;
  font-size: 0.9375rem;
}

/* Loading State */
.help-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 1rem;
}

.help-loading p {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

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

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

/* No Results */
.help-no-results {
  padding: 2rem 1.5rem;
  text-align: center;
}

.help-no-results p {
  color: var(--color-text-light);
  font-size: 0.9375rem;
}

/* Empty State */
.help-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.help-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.help-empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.help-empty-state p {
  color: var(--color-text-light);
  font-size: 0.9375rem;
  margin: 0;
}

/* Legacy Content Styles (fallback) */
.help-legacy-content {
  padding: 1.5rem;
}

.help-legacy-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.help-legacy-section:last-of-type {
  border-bottom: none;
}

.help-legacy-section-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.help-legacy-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.help-legacy-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.help-legacy-desc {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.help-legacy-details {
  margin: 0;
  padding-left: 2.5rem;
  font-size: 0.8125rem;
  color: var(--color-text);
}

.help-legacy-details li {
  margin-bottom: 0.375rem;
}

.help-legacy-tips {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.help-legacy-tips-title {
  font-weight: 600;
  color: #1e40af;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.help-legacy-tips ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.8125rem;
  color: #1e40af;
}

.help-legacy-tips li {
  margin-bottom: 0.375rem;
}

.help-legacy-simple {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* Help Centre Footer */
.help-centre-footer {
  justify-content: center;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .help-centre-modal {
    max-width: 100%;
    max-height: 90vh;
    margin: 0.5rem;
    border-radius: 12px;
  }

  .help-search-wrapper {
    padding: 0.75rem 1rem;
  }

  .help-search-input {
    padding: 0.625rem 2rem 0.625rem 0.875rem;
    font-size: 1rem; /* Prevent iOS zoom */
  }

  .help-section-label {
    padding: 0.75rem 1rem 0.5rem;
  }

  .help-article-item {
    padding: 0.75rem 1rem;
  }

  .help-category-header {
    padding: 0.625rem 0.75rem;
  }

  .help-category-articles {
    padding-left: 1.75rem;
  }

  .help-article-view,
  .help-legacy-content {
    padding: 1rem;
  }
}

/* Header notifications */
.header-notifications {
  position: relative;
}

.header-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #dc2626;
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-notifications-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
}

.header-notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 0.875rem;
}

.header-notifications-header button {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0;
  line-height: 1;
}

.header-notifications-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.header-notifications-list {
  max-height: 340px;
  overflow-y: auto;
}

.header-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.header-notification-item:last-child {
  border-bottom: none;
}

.header-notification-item.type-info {
  background: #f0f9ff;
}

.header-notification-item.type-warning {
  background: #fffbeb;
}

.header-notification-item.type-success {
  background: #f0fdf4;
}

.header-notification-item.type-error {
  background: #fef2f2;
}

.header-notification-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.header-notification-content {
  flex: 1;
  min-width: 0;
}

.header-notification-title {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.header-notification-message {
  font-size: 0.75rem;
  color: var(--color-text-light);
  line-height: 1.4;
}

.header-notification-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.header-notification-link:hover {
  text-decoration: underline;
}

.header-notification-dismiss {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.header-notification-dismiss:hover {
  color: var(--color-text);
}

/* Notification Poll Styles */
.header-notification-poll {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.poll-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.poll-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.poll-option-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.poll-results {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.poll-result-item {
  font-size: 0.75rem;
}

.poll-result-item.user-vote .poll-result-label {
  font-weight: 600;
}

.poll-result-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.125rem;
}

.poll-result-label .your-vote {
  color: var(--color-primary);
  font-weight: 600;
}

.poll-result-pct {
  margin-left: auto;
  color: var(--color-text-light);
}

.poll-result-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.poll-result-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.poll-total {
  font-size: 0.7rem;
  color: var(--color-text-light);
  margin-top: 0.25rem;
}

/* ============================================
   PAGE TABS
   Tab navigation for multi-tab pages
   ============================================ */
.page-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--color-white);
  z-index: 40;
  /* Mobile: fixed below header */
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0;
  padding: 0 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Add spacing for fixed tabs on pages that have them */
.page-tabs ~ .card:first-of-type,
.page-tabs + * {
  margin-top: 3.5rem !important;
}

/* Desktop: reset to normal flow */
@media (min-width: 768px) {
  .page-tabs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 0 1rem 0;
    padding: 0;
    box-shadow: none;
    z-index: 10;
  }

  .page-tabs ~ .card:first-of-type,
  .page-tabs + * {
    margin-top: 0 !important;
  }
}

.page-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.page-tab:hover {
  color: var(--color-text);
}

.page-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Page-tabs inside a modal need to opt out of the full-page fixed
   positioning (mobile) AND keep their natural height in the modal's
   flex column (desktop). Without flex-shrink: 0 the tabs are
   vertically squeezed and clipped by overflow-y: hidden, which is
   what causes the "half hidden tabs" bug on desktop. */
.modal .page-tabs {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0;
  padding: 0 1rem;
  box-shadow: none;
  z-index: 10;
  flex-shrink: 0;
}

.tab-badge {
  background: var(--color-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
}

.tab-badge.secondary {
  background: var(--color-text-light);
}

/* ============================================
   MODAL STYLES
   Generic modal overlay and content
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  overscroll-behavior: contain; /* Prevent scroll-through triggering pull-to-refresh */
}

.modal {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Forms inside modals need flex layout to properly show footer */
.modal > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* When form IS the modal-body, allow scrolling */
.modal > form.modal-body {
  overflow-y: auto;
}

/* Modal size variants */
.modal.modal-sm {
  max-width: 400px;
}

.modal.modal-md {
  max-width: 600px;
}

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

.modal.modal-xl {
  max-width: 1000px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--color-text);
}

.modal-body {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}

.modal-footer .btn {
  min-width: 100px;
  min-height: 40px;
}

/* Modal tabs */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  padding: 0 1rem;
}

.modal-tab {
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--color-text-light);
  font-weight: 400;
  transition: all 0.2s ease;
}

.modal-tab:hover {
  color: var(--color-text);
}

.modal-tab.active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.modal-tab.active.danger {
  border-bottom-color: #dc2626;
  color: #dc2626;
}

/* View modal sections */
.view-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.view-grid {
  display: grid;
  gap: 0.5rem;
}

.view-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  gap: 1rem;
}

.view-label {
  color: var(--color-text-light);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.view-value {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: right;
}

/* Modal table (for line items, etc.) */
.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.modal-table th,
.modal-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.modal-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-light);
  font-size: 0.75rem;
  text-transform: uppercase;
}

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

/* Form layout helpers */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

/* ============================================
   TABLE UTILITIES
   Count badges, action icons, etc.
   ============================================ */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.5rem;
  border-radius: 12px;
  background: var(--color-bg);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Row actions container - fixed grid layout for consistent alignment */
.row-actions {
  display: grid;
  grid-template-columns: 36px 36px 85px; /* Fixed columns: icon, icon, button - match button height */
  gap: 4px;
  align-items: center;
  justify-items: center;
  min-width: 165px; /* Ensure consistent width */
}

.row-actions .action-icon {
  width: 36px;
  height: 36px; /* Match button height for perfect alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem; /* Slightly smaller emoji */
  padding: 4px; /* Tighter padding */
  border-radius: 4px;
  transition: background 0.15s;
  margin: 0; /* Remove any margins */
}

.row-actions .action-icon:hover {
  background: var(--color-bg);
}

.row-actions .action-icon.hidden {
  visibility: hidden;
}

/* Smaller action buttons for list views - tighter and more premium */
.row-actions .btn-action {
  padding: 0.625rem 1.25rem; /* Same as regular buttons */
  font-size: 0.875rem; /* Same as regular buttons */
  font-weight: 500;
  width: 85px;
  /* min-height: 36px inherited from .btn */
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0; /* Remove margins */
}

.action-icon {
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.15s;
}

.action-icon:hover {
  background: var(--color-bg);
}

/* SVG Action Icons — replaces emoji icons for consistency */
.action-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-icon--danger {
  color: var(--color-error);
}

.action-icon--danger:hover {
  background: var(--color-error-bg, #fee2e2);
}

.action-icon--success {
  color: var(--color-success);
}

.action-icon--disabled {
  opacity: 0.3;
  cursor: not-allowed !important;
  pointer-events: none;
}

.code-chip {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-primary);
  background: #f3e5f5;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.btn-icon {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: border-color 0.15s;
}

.btn-icon:hover {
  border-color: var(--color-primary);
}

/* Mobile responsive - Collapsible filters */
@media (max-width: 768px) {
  /* Toolbar stays in row - search + filter button + actions */
  .list-toolbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .list-toolbar-left {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    flex: 1;
    min-width: 0; /* Allow shrinking */
  }

  /* Search takes available space */
  .list-search {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  /* Mobile tap targets - 44px minimum for touch */
  .list-search input,
  .list-filter {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  /* Show filter toggle button on mobile */
  .list-filter-toggle {
    display: flex;
    flex-shrink: 0;
  }

  /* Hide inline filters on mobile (moved to expandable section) */
  .list-filters-inline {
    display: none;
  }

  /* Hide select all on mobile toolbar (still in table header) */
  .list-select-all {
    display: none;
  }

  /* Hide toolbar action buttons on mobile - replaced by FAB */
  .list-toolbar-right {
    display: none;
  }
}

/* ============================================
   FLOATING ACTION BUTTON (FAB)
   Mobile-only primary action button
   ============================================ */

/* Hidden on desktop - toolbar has the button */
.fab {
  display: none;
}

@media (max-width: 768px) {
  .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(var(--safe-area-bottom, 0px) + 100px); /* Above bottom nav with padding */
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-size: 28px;
    font-weight: 300;
    border: none;
    box-shadow: 0 4px 12px rgba(119, 44, 187, 0.4);
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(119, 44, 187, 0.5);
  }

  .fab:active {
    transform: scale(0.95);
  }

  /* Pulse animation to draw attention (optional) */
  .fab-pulse {
    animation: fab-pulse 2s ease-in-out infinite;
  }

  @keyframes fab-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(119, 44, 187, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(119, 44, 187, 0.6); }
  }
}

/* ============================================
   SPEED DIAL FAB
   Expandable FAB with multiple actions
   ============================================ */

.speed-dial {
  position: fixed;
  bottom: calc(var(--safe-area-bottom, 0px) + 100px);
  right: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.speed-dial--left {
  right: auto;
  left: 16px;
  align-items: flex-start;
}

/* Backdrop when open */
.speed-dial-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}

/* Actions container */
.speed-dial-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.speed-dial--left .speed-dial-actions {
  align-items: flex-start;
}

.speed-dial--open .speed-dial-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Individual action button */
.speed-dial-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: white;
  border: none;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}

.speed-dial--left .speed-dial-action {
  flex-direction: row-reverse;
}

.speed-dial-action:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.speed-dial-action:active {
  transform: scale(0.98);
}

.speed-dial-action-icon {
  font-size: 1.25rem;
}

.speed-dial-action-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

/* Main trigger button */
.speed-dial-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-size: 28px;
  font-weight: 300;
  border: none;
  box-shadow: 0 4px 12px rgba(119, 44, 187, 0.4);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.speed-dial-trigger:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(119, 44, 187, 0.5);
}

.speed-dial-trigger:active {
  transform: scale(0.95);
}

/* Rotate icon when open */
.speed-dial-trigger-icon {
  display: inline-block;
  transition: transform 0.2s;
}

.speed-dial--open .speed-dial-trigger-icon {
  transform: rotate(45deg);
}

.speed-dial--open .speed-dial-trigger {
  background: var(--color-text-light);
}

/* Desktop: position adjustment (no bottom nav) */
@media (min-width: 769px) {
  .speed-dial {
    bottom: 24px;
    right: 24px;
  }

  .speed-dial--left {
    right: auto;
    left: 24px;
  }
}

/* ============================================
   MOBILE PWA ENHANCEMENTS
   Safe areas, tap targets, press states
   ============================================ */

/* 1. Safe Area Insets - iPhone notch/home bar */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Apply safe area to body for standalone PWA */
@media (display-mode: standalone) {
  body {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
  }
}

/* iOS standalone mode */
@media (display-mode: standalone), (display-mode: fullscreen) {
  /* Fixed headers need safe area padding */
  .app-header,
  .mobile-header {
    padding-top: calc(var(--safe-area-top) + 0.5rem);
  }

  /* Fixed bottom elements need safe area padding */
  .action-bar,
  .mobile-action-bar,
  .bottom-nav,
  .menu-footer {
    padding-bottom: calc(var(--safe-area-bottom) + 0.5rem);
  }

  /* Main content needs bottom padding for home bar */
  .main-content,
  .app-content {
    padding-bottom: calc(var(--safe-area-bottom) + 70px);
  }
}

/* 2. Minimum Tap Targets - 44px for touch accessibility */
@media (max-width: 768px) {
  /* Buttons */
  .btn,
  .ops-primary-btn,
  .ops-secondary-btn,
  .ops-action-btn,
  .action-item-btn,
  .table-action-icon,
  .toolbar-icon-btn,
  .header-icon-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Menu items */
  .menu-item,
  .nav-link,
  .user-menu-item {
    min-height: 44px;
  }

  /* Form inputs */
  input,
  select,
  textarea,
  .form-input {
    min-height: 44px;
  }

  /* Action bar buttons */
  .action-button,
  .module-card {
    min-height: 44px;
  }

  /* Tab buttons */
  .page-tab,
  .ops-status-tab,
  .ops-view-btn {
    min-height: 44px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Small screen optimizations (480px and below) */
@media (max-width: 480px) {
  /* Reduce action bar spacing on small screens */
  .action-bar {
    padding: 8px 12px;
    gap: 4px;
  }

  .action-btn {
    min-width: 65px;
    padding: 8px 12px;
    flex: 1;
    min-height: 48px; /* Ensure proper touch targets */
  }

  .action-btn-icon {
    font-size: 18px;
  }

  .action-btn-label {
    font-size: 11px;
  }

  /* Reduce main content padding */
  .app-main {
    padding: 12px;
    padding-top: calc(var(--app-header-height) + 12px);
  }

  /* Smaller header elements */
  .app-header {
    padding: 0 12px;
  }

  .app-logo {
    font-size: 16px;
  }

  .app-page-title {
    font-size: 15px;
  }

  /* Modal improvements for small screens */
  .ops-modal-overlay {
    padding: 8px;
  }

  .ops-modal {
    border-radius: 12px;
    margin: 0;
  }

  .ops-modal-header {
    padding: 16px 20px;
  }

  .ops-modal-body {
    padding: 20px;
  }

  .ops-modal-footer {
    padding: 16px 20px;
    gap: 12px;
  }

  /* Button spacing in modals */
  .ops-modal-footer .btn {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
  }

  /* Form inputs on small screens */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 48px;
  }

  .form-row {
    gap: 16px;
  }
}

/* Extra small screen optimizations (375px and below) */
@media (max-width: 375px) {
  /* Even tighter spacing for iPhone SE and similar */
  .action-bar {
    padding: 6px 8px;
    gap: 2px;
  }

  .action-btn {
    min-width: 60px;
    padding: 6px 8px;
    min-height: 48px; /* Maintain touch targets */
  }

  .action-btn-label {
    font-size: 10px;
  }

  /* Minimal main content padding */
  .app-main {
    padding: 8px;
    padding-top: calc(var(--app-header-height) + 8px);
  }

  /* Compact header */
  .app-header {
    height: var(--app-header-height);
    padding: 0 8px;
  }

  .app-header-actions {
    gap: 4px;
  }

  /* Modal spacing for tiny screens */
  .ops-modal-overlay {
    padding: 4px;
  }

  .ops-modal-header {
    padding: 12px 16px;
  }

  .ops-modal-body {
    padding: 16px;
  }

  .ops-modal-footer {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .ops-modal-footer .btn {
    width: 100%;
    min-height: 48px;
  }

  /* Stack form rows vertically on tiny screens */
  .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .form-row > * {
    width: 100%;
  }

  /* Data table improvements for mobile */
  .data-table th,
  .data-table td {
    padding: 12px 8px;
    font-size: 14px;
  }

  .data-table th {
    font-size: 12px;
  }

  /* Toolbar button spacing */
  .ops-toolbar .btn,
  .ops-toolbar .toolbar-btn {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
  }

  /* Status tabs - better touch targets */
  .ops-status-tab {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
  }
}

/* 3. Press States - Native-like feedback */
/* Active/pressed state for buttons */
.btn:active,
.ops-primary-btn:active,
.ops-secondary-btn:active,
.action-item-btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* Press state for menu items */
.menu-item:active,
.nav-link:active,
.user-menu-item:active {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.98);
}

/* Press state for cards/modules */
.module-card:active,
.action-button:active,
.dashboard-item:active {
  transform: scale(0.98);
  opacity: 0.95;
}

/* Press state for icons/small buttons */
.table-action-icon:active,
.toolbar-icon-btn:active,
.header-icon-btn:active,
.ops-action-btn:active {
  transform: scale(0.9);
  opacity: 0.8;
}

/* Press state for tabs */
.page-tab:active,
.ops-status-tab:active,
.ops-view-btn:active {
  opacity: 0.8;
}

/* Smooth transitions for press feedback */
.btn,
.ops-primary-btn,
.ops-secondary-btn,
.action-item-btn,
.menu-item,
.nav-link,
.user-menu-item,
.module-card,
.action-button,
.dashboard-item,
.table-action-icon,
.toolbar-icon-btn,
.header-icon-btn,
.ops-action-btn,
.page-tab,
.ops-status-tab,
.ops-view-btn {
  transition: transform 0.1s ease, opacity 0.1s ease, background 0.15s ease;
}

/* Disable hover effects on touch devices to prevent sticky states */
@media (hover: none) {
  .btn:hover,
  .nav-link:hover,
  .menu-item:hover {
    background: inherit;
  }
}

/* ============================================
   REPORT SUMMARY CARDS
   KPI cards for DataTable header (reports)
   ============================================ */

.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem 1rem 0;
}

.summary-card {
  background: #f8f9fa;
  padding: 1.25rem;
  border-radius: 8px;
  border-left: 4px solid var(--color-primary);
  position: relative;
  cursor: default;
  transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card--hovered {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Color variants */
.summary-card--primary { border-left-color: var(--color-primary); }
.summary-card--success { border-left-color: #27ae60; }
.summary-card--warning { border-left-color: #f39c12; }
.summary-card--info { border-left-color: #bd982f; }
.summary-card--danger { border-left-color: #e74c3c; }

.summary-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 0.125rem;
}

.summary-card__trend {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #64748b;
}

.summary-card__trend--up { color: #10b981; }
.summary-card__trend--down { color: #ef4444; }

.summary-card__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
  letter-spacing: 0.025em;
}

/* Tooltip */
.summary-card__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: normal;
  width: 200px;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.summary-card__tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1024px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .summary-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .summary-card {
    padding: 1rem;
  }

  .summary-card__value {
    font-size: 1.5rem;
  }
}

/* DataTable Description - Page subtitle/helper text */
.datatable-description {
  padding: 0.75rem 1rem;
  font-size: var(--font-sm);
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* ============================================
   PAGE HEADER
   Standard page header with title and actions
   ============================================ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.page-header-title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.page-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.page-header-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-sm);
  margin: var(--space-xs) 0 0 0;
}

.page-header-badge {
  background: rgba(119, 44, 187, 0.1);
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-md);
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 500;
}

/* ============================================
   STAT CARD VARIANTS
   Colored left border accents
   ============================================ */
.stat-card-accent {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--color-primary);
}

.stat-card-accent--gold { border-left-color: #bd982f; }
.stat-card-accent--green { border-left-color: #10b981; }
.stat-card-accent--amber { border-left-color: #f59e0b; }
.stat-card-accent--blue { border-left-color: #3b82f6; }

/* ============================================
   DATA TABLE
   Standard table styling
   ============================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  font-weight: 600;
  font-size: var(--font-sm);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

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

/* System row styling - pinned/fixed appearance */
.data-table tbody tr.row-system {
  background: linear-gradient(to right, #f5f3ff, #faf5ff);
  border-left: 3px solid #7c3aed;
}
.data-table tbody tr.row-system:hover {
  background: linear-gradient(to right, #ede9fe, #f5f3ff);
}

/* ============================================
   ACTION BUTTONS
   Small icon buttons for table rows
   ============================================ */
.action-btns {
  display: flex;
  gap: var(--space-xs);
}

.action-btn {
  padding: var(--space-xs) var(--space-sm);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: var(--font-sm);
  transition: all 0.2s;
}

.action-btn-view {
  background: #dbeafe;
  color: #3b82f6;
}

.action-btn-view:hover {
  background: #bfdbfe;
}

.action-btn-edit {
  background: #fef3c7;
  color: #92400e;
}

.action-btn-edit:hover {
  background: #fde68a;
}

/* ============================================
   EMPTY STATE
   Placeholder for empty lists
   ============================================ */
.empty-state {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--color-text-light);
}

.empty-state-icon {
  font-size: var(--space-xxl);
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

/* ============================================
   TOAST NOTIFICATIONS
   Fixed position notifications
   ============================================ */
.toast {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius);
  color: white;
  font-weight: 500;
  z-index: 2000;
  animation: slideInRight 0.3s ease;
}

.toast-success {
  background: #10b981;
}

.toast-error {
  background: #ef4444;
}

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

/* ============================================
   FILE DROP ZONE
   Drag and drop file upload area
   ============================================ */
.file-drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.file-drop-zone:hover {
  border-color: var(--color-primary);
  background: rgba(119, 44, 187, 0.02);
}

.file-drop-zone.drag-over {
  border-color: var(--color-primary);
  background: #dbeafe;
}

/* ============================================
   PROPERTY SELECTOR
   Horizontal selector bar
   ============================================ */
.property-selector {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.property-selector-label {
  font-weight: 600;
  color: var(--color-text-light);
}

.property-selector-select {
  flex: 1;
  min-width: 300px;
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-base);
  outline: none;
}

.property-selector-select:focus {
  border-color: var(--color-primary);
}

@media (max-width: 768px) {
  .property-selector {
    flex-direction: column;
    align-items: stretch;
  }

  .property-selector-select {
    min-width: unset;
  }
}

/* ============================================
   STATUS GRID (Kanban-style columns)
   Responsive grid for status-based room views
   ============================================ */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.status-column {
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
}

.status-column-header {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-column-title {
  font-weight: 600;
}

.status-column-count {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-column-body {
  padding: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
}

.status-card {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

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

.status-card-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.status-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

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

  .status-column-body {
    max-height: 250px;
  }
}

/* ============================================
   MOBILE MODAL OPTIMIZATIONS
   Touch-friendly modals for field operators
   ============================================ */

/* Form sections with proper spacing */
.form-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

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

/* Service line item cards - stacks on mobile */
.service-line-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.service-line-item .service-type {
  flex: 2;
  min-width: 0;
}

.service-line-item .service-size {
  flex: 1;
  min-width: 0;
}

.service-line-item .service-qty {
  width: 60px;
  flex-shrink: 0;
}

.service-line-item .service-remove {
  flex-shrink: 0;
  align-self: center;
}

/* Customer search dropdown - touch-friendly */
.customer-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
}

.customer-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.customer-dropdown-item:last-child {
  border-bottom: none;
}

.customer-dropdown-item:hover,
.customer-dropdown-item:active {
  background: var(--color-bg);
}

.customer-dropdown-item .customer-name {
  font-weight: 500;
  margin-bottom: 0.125rem;
}

.customer-dropdown-item .customer-details {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Selected customer card */
.customer-selected {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  font-size: 0.875rem;
}

.customer-selected .customer-name {
  font-weight: 600;
}

.customer-selected .customer-details {
  color: var(--color-text-light);
}

/* Estimate display card */
.estimate-card {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(119, 44, 187, 0.1);
  border-radius: var(--radius);
  text-align: center;
}

.estimate-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: 0.25rem;
}

.estimate-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Operator list for assignment modal */
.operator-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.operator-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}

.operator-item:hover {
  border-color: var(--color-primary);
}

.operator-item.selected {
  background: rgba(119, 44, 187, 0.1);
  border-color: var(--color-primary);
}

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

.operator-item .operator-checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.operator-item .operator-info {
  flex: 1;
  min-width: 0;
}

.operator-item .operator-name {
  font-weight: 500;
}

.operator-item .operator-role {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.operator-item .operator-status {
  flex-shrink: 0;
}

/* Cancel reason options */
.cancel-reason-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cancel-reason-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}

.cancel-reason-option:hover {
  border-color: var(--color-primary);
}

.cancel-reason-option.selected {
  background: rgba(119, 44, 187, 0.1);
  border-color: var(--color-primary);
}

.cancel-reason-option input[type="radio"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

/* Day selector for availability patterns */
.day-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.day-toggle {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  min-width: 60px;
  text-align: center;
}

.day-toggle:hover {
  border-color: var(--color-primary);
}

.day-toggle.selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* Mobile-specific modal adjustments */
@media (max-width: 768px) {
  /* Full-screen modals on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }

  .modal.modal-sm,
  .modal.modal-md,
  .modal.modal-lg,
  .modal.modal-xl {
    max-width: 100%;
  }

  /* Larger modal header for touch */
  .modal-header {
    padding: 1rem;
    min-height: 56px;
  }

  .modal-header h2 {
    font-size: 1rem;
  }

  /* Touch-friendly close button */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
  }

  /* Modal body padding */
  .modal-body {
    padding: 1rem;
  }

  /* Sticky footer with safe area */
  .modal-footer {
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  /* Full-width footer buttons */
  .modal-footer .btn {
    flex: 1;
    min-height: 48px;
  }

  /* Form sections */
  .form-section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }

  /* Larger form inputs for touch */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevents iOS zoom */
    min-height: 48px;
    padding: 0.75rem;
  }

  .form-textarea {
    min-height: 100px;
  }

  /* Stack service line items vertically */
  .service-line-item {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
  }

  .service-line-item .service-type,
  .service-line-item .service-size {
    width: 100%;
    flex: none;
  }

  .service-line-item .service-qty {
    width: 100%;
  }

  .service-line-item .service-remove {
    align-self: flex-end;
    margin-top: 0.5rem;
  }

  /* Customer dropdown larger touch targets */
  .customer-dropdown {
    max-height: 250px;
  }

  .customer-dropdown-item {
    padding: 1rem;
    min-height: 56px;
  }

  /* Operator items touch-friendly */
  .operator-item {
    padding: 1rem;
    min-height: 64px;
  }

  .operator-item .operator-checkbox {
    width: 24px;
    height: 24px;
  }

  /* Cancel reason options */
  .cancel-reason-option {
    padding: 1rem;
    min-height: 56px;
  }

  /* Day selector - wrap for small screens */
  .day-selector {
    justify-content: center;
  }

  .day-toggle {
    min-width: 48px;
    min-height: 44px;
    padding: 0.5rem;
  }

  /* View sections for view modals */
  .view-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .view-value {
    text-align: left;
  }
}

/* Extra small screens (phones) */
@media (max-width: 480px) {
  .modal-header h2 {
    font-size: 0.9375rem;
  }

  /* Even more compact day selector */
  .day-toggle {
    min-width: 42px;
    font-size: 0.75rem;
    padding: 0.5rem 0.375rem;
  }
}

/* ============================================
   TERRITORY DETAIL PAGE
   ============================================ */

.territory-detail {
  max-width: 1200px;
}

.territory-detail .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-light);
  text-decoration: none;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}

.territory-detail .back-link:hover {
  color: var(--color-primary);
}

.territory-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.territory-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

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

/* Card enhancements for detail page */
.territory-detail .card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.territory-detail .card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.territory-detail .card-header h3 {
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.territory-detail .card-icon {
  font-size: 1.25rem;
}

/* Detail rows inside cards */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row .label {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.detail-row .value {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ================================================
   Content Library - Mobile-First Responsive Styles
   ================================================ */

/* Page header with actions */
.content-library-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.content-library-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

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

  .content-library-header-actions {
    justify-content: stretch;
  }

  .content-library-header-actions .btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
}

/* Filter section */
.content-library-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  align-items: end;
}

@media (max-width: 640px) {
  .content-library-filters {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .content-library-filters .form-group:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 400px) {
  .content-library-filters {
    grid-template-columns: 1fr;
  }
}

/* Filter toggle tabs */
.content-library-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.content-library-tabs .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .content-library-tabs {
    margin: 0 -1rem;
    padding: 0 1rem 0.25rem;
  }

  .content-library-tabs .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* Asset grid */
.content-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

@media (max-width: 640px) {
  .content-library-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 400px) {
  .content-library-grid {
    grid-template-columns: 1fr;
  }
}

/* Asset card - Mobile optimised */
.content-library-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.content-library-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (hover: none) {
  .content-library-card:hover {
    transform: none;
    box-shadow: none;
  }

  .content-library-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

.content-library-card-thumb {
  height: 120px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@media (min-width: 640px) {
  .content-library-card-thumb {
    height: 140px;
  }
}

.content-library-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-library-card-thumb .type-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.content-library-card-thumb .video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
}

.content-library-card-thumb .video-overlay span {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.content-library-card-body {
  padding: 0.75rem;
}

.content-library-card-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.content-library-card-meta {
  font-size: 0.6875rem;
  color: var(--color-text-light);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.content-library-card-actions {
  display: flex;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.content-library-card-actions button,
.content-library-card-actions a {
  flex: 1;
  padding: 0.625rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.content-library-card-actions button:not(:first-child),
.content-library-card-actions a:not(:first-child) {
  border-left: 1px solid var(--color-border);
}

.content-library-card-actions button:hover,
.content-library-card-actions a:hover {
  background: var(--color-border);
}

/* Preview modal - Mobile optimised */
.content-library-preview {
  background: #1a1a1a;
  min-height: 200px;
  max-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .content-library-preview {
    min-height: 180px;
    max-height: 40vh;
  }
}

.content-library-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.content-library-preview iframe {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: none;
}

@media (min-width: 640px) {
  .content-library-preview iframe {
    min-height: 360px;
  }
}

/* Metadata grid in preview */
.content-library-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  font-size: 0.8125rem;
}

@media (max-width: 480px) {
  .content-library-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

.content-library-meta-grid .meta-label {
  color: var(--color-text-light);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

/* Submit form - Mobile optimised */
.content-library-submit-card {
  max-width: 640px;
}

@media (max-width: 640px) {
  .content-library-submit-card {
    margin: 0 -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Type selector buttons */
.content-library-type-selector {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.content-library-type-selector button {
  flex: 1;
  min-width: 60px;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.content-library-type-selector button:hover {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.content-library-type-selector button.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.content-library-type-selector button .icon {
  font-size: 1.25rem;
}

@media (max-width: 480px) {
  .content-library-type-selector {
    margin: 0 -0.5rem;
    padding: 0 0.5rem 0.25rem;
  }

  .content-library-type-selector button {
    min-width: 56px;
    padding: 0.5rem 0.25rem;
    font-size: 0.625rem;
  }

  .content-library-type-selector button .icon {
    font-size: 1.125rem;
  }
}

/* File upload dropzone */
.content-library-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  background: var(--color-bg);
  transition: border-color 0.15s, background 0.15s;
}

.content-library-dropzone:hover,
.content-library-dropzone.drag-over {
  border-color: var(--color-primary);
  background: rgba(119, 44, 187, 0.02);
}

@media (max-width: 480px) {
  .content-library-dropzone {
    padding: 1.5rem 1rem;
  }

  .content-library-dropzone .icon {
    font-size: 2rem;
  }
}

/* ============================================
   BOOKING WIZARD STYLES
   3-step booking creation matching public flow
   ============================================ */

/* Required field attention styles */
.form-select--attention {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  animation: pulse-attention 2s ease-in-out infinite;
}

@keyframes pulse-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2); }
}

.required-indicator {
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Compact Wizard Header */
.wizard-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.wizard-close {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 1.5rem;
  color: var(--color-text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.wizard-close:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.wizard-steps-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wizard-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.wizard-step-dot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.wizard-step-dot.done {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.wizard-step-line {
  width: 20px;
  height: 2px;
  background: var(--color-border);
}

.wizard-step-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin-left: auto;
}

/* Wizard Grid Layout */
.wizard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

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

.wizard-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}

/* Date Picker */
.wizard-date-picker {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.date-picker-month {
  font-weight: 600;
  font-size: 1rem;
}

.date-nav-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text);
}

.date-nav-btn:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}

.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.date-btn {
  aspect-ratio: 1;
  border: none;
  background: white;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
}

/* Only hover on desktop - causes sticky state on mobile */
@media (hover: hover) {
  .date-btn:hover:not(:disabled):not(.date-btn--selected) {
    background: rgba(119, 44, 187, 0.1);
  }
}

.date-btn:active:not(:disabled) {
  background: var(--color-primary);
  color: white;
}

.date-btn--empty {
  background: transparent;
  cursor: default;
}

.date-btn--disabled {
  color: var(--color-text-light);
  opacity: 0.4;
  cursor: not-allowed;
}

.date-btn--selected {
  background: var(--color-primary) !important;
  color: white !important;
}

/* Time Slots */
.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 0.5rem;
}

.time-slot-btn {
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--color-border);
  background: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  text-align: center;
}

.time-slot-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.time-slot-btn--selected {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
}

/* Bed Selector */
.bed-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.bed-btn {
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-border);
  background: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  transition: all 0.15s;
}

.bed-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.bed-btn--selected {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
}

.bed-btn--more {
  font-size: 1.25rem;
  color: var(--color-text-light);
}

@media (max-width: 480px) {
  .bed-btn {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
}

/* Duration Estimate */
.duration-estimate {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--color-text-light);
  text-align: center;
}

/* Customer Search Results */
.customer-search-results {
  margin-top: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.customer-result {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  border: none;
  background: white;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
}

.customer-result:last-child {
  border-bottom: none;
}

.customer-result:hover {
  background: var(--color-bg);
}

.customer-result-name {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.customer-result-details {
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

/* Selected Customer Card */
.selected-customer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.selected-customer-info h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.selected-customer-info p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

/* Booking Summary */
.booking-summary {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.booking-summary h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.summary-value {
  font-size: 0.875rem;
  color: var(--color-text);
}

/* Review Options Section */
.review-options {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.review-options .form-group {
  margin-bottom: 1rem;
}

.review-options .form-group:last-child {
  margin-bottom: 0;
}

.operator-status--no_schedule {
  color: var(--color-error);
}

.operator-check {
  color: var(--color-primary);
  font-weight: 600;
}

/* Checkbox Label */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Booking Success View */
.booking-success {
  text-align: center;
  padding: 1.5rem 1rem;
}

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  background: var(--color-success, #22c55e);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
}

.success-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--color-text);
}

.success-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin: 0 0 1.5rem;
}

.success-details {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: left;
}

.success-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.success-row:last-child {
  border-bottom: none;
}

.success-label {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.success-value {
  font-size: 0.875rem;
  color: var(--color-text);
  text-align: right;
}

.success-status {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

.success-status.status-confirmed {
  background: var(--color-success-bg, #dcfce7);
  color: var(--color-success, #22c55e);
}

.success-status.status-pending {
  background: var(--color-warning-bg, #fef9c3);
  color: var(--color-warning, #ca8a04);
}

/* Advanced Options Toggle */
.advanced-toggle {
  display: inline-block;
  margin-top: 1rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-light);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
}

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

.advanced-options {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

/* Sticky Mobile CTA */
.booking-wizard-sticky-cta {
  display: none;
}

/* Booking wizard overlay */
.booking-wizard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: hidden;
}

/* Full height modal on mobile */
@media (max-width: 768px) {
  .booking-wizard-overlay {
    background: white;
  }

  .booking-wizard.modal {
    position: fixed;
    inset: 0;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    /* Safe area insets for notched devices */
    padding-top: env(safe-area-inset-top, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* Sticky header on mobile - stays visible during scroll */
  .booking-wizard .wizard-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
  }

  .booking-wizard .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .booking-wizard-sticky-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1001;
  }

  .booking-wizard-sticky-cta button {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Very narrow screens: stack buttons vertically */
  @media (max-width: 359px) {
    .booking-wizard-sticky-cta {
      flex-direction: column;
    }

    .booking-wizard-sticky-cta button {
      width: 100%;
    }
  }

  /* Hide desktop footer on mobile */
  .booking-wizard .modal-footer {
    display: none;
  }

  /* Smaller wizard grid gap */
  .booking-wizard .wizard-grid {
    gap: 0.75rem;
  }

  /* Compact section headers */
  .booking-wizard .wizard-section h3 {
    margin-bottom: 0.5rem;
  }
}

/* ==============================================
   BOOKING WIZARD - DESKTOP 2-PANEL LAYOUT
   ============================================== */

/* Desktop overlay - centered flex */
.booking-wizard-overlay--desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Desktop modal - larger with max dimensions */
.booking-wizard--desktop {
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 4rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Desktop header - clean and compact */
.booking-wizard--desktop .wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.booking-wizard--desktop .wizard-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.booking-wizard--desktop .wizard-close-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-bg-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.booking-wizard--desktop .wizard-close-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* Desktop 2-column layout */
.wizard-desktop-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left panel - scrollable form */
.wizard-desktop-form {
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Form sections */
.wizard-form-section {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.wizard-form-section h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-text-muted);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wizard-form-section h3 .section-icon {
  font-size: 1rem;
}

/* Schedule section - date/time side by side */
.wizard-schedule-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.wizard-schedule-row .calendar-picker {
  grid-column: span 2;
}

/* Time grid */
.wizard-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.5rem;
}

/* Bed count grid */
.wizard-bed-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wizard-bed-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wizard-bed-btn:hover {
  border-color: var(--color-primary);
}

.wizard-bed-btn.selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* Customer section */
.wizard-customer-search {
  margin-bottom: 1rem;
}

.wizard-customer-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.wizard-customer-form .form-group.full-width {
  grid-column: span 2;
}

/* Right panel - sticky preview */
.wizard-preview-panel {
  background: var(--color-bg-subtle);
  border-left: 1px solid var(--color-border);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.wizard-preview-panel h3 {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem 0;
}

/* Preview content */
.wizard-preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.wizard-preview-row:last-child {
  border-bottom: none;
}

.wizard-preview-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.wizard-preview-value {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: right;
  color: var(--color-text);
  word-break: break-word;
}

.wizard-preview-value.empty {
  color: var(--color-danger, #ef4444);
  font-style: italic;
  font-weight: 400;
}

/* Preview actions */
.wizard-preview-actions {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wizard-preview-actions .btn {
  width: 100%;
  justify-content: center;
}

.wizard-preview-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0.75rem 0 0 0;
}

/* Desktop success view */
.wizard-desktop-success {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 400px;
}

.wizard-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-success-bg, #dcfce7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.wizard-success-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.wizard-success-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

.wizard-success-details {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  width: 100%;
  max-width: 400px;
  margin-bottom: 2rem;
}

.wizard-success-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.wizard-success-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.wizard-success-label {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.wizard-success-value {
  font-weight: 500;
  font-size: 0.875rem;
}

.wizard-success-actions {
  display: flex;
  gap: 1rem;
}

/* Responsive adjustments for smaller desktops */
@media (min-width: 1024px) and (max-width: 1200px) {
  .wizard-desktop-layout {
    grid-template-columns: 1fr 300px;
  }

  .booking-wizard--desktop {
    max-width: 960px;
  }
}

/* Desktop enhancements for better UX */
@media (min-width: 1024px) {
  .btn {
    padding: 0.625rem 1.25rem; /* Keep consistent with base, just ensure min-height */
    /* min-height: 36px already applied globally */
  }

  /* btn-sm min-height already set globally */

  .form-input,
  .form-select {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  .card {
    padding: 8px;
  }

  .card-body,
  .card-footer {
    padding: 1.5rem;
  }
}

/* Training Assessment Styles */
.training-assessment-container {
  max-width: 900px;
  margin: 0 auto;
  background: white;
  min-height: 100vh;
  box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

.training-back-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-primary);
  color: white;
  flex-shrink: 0;
}

.training-back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  color: white;
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.training-back-button:hover {
  background: rgba(255,255,255,0.25);
}

.training-back-title {
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.training-preview-banner {
  background: #ffc107;
  color: #000;
  padding: 10px var(--space-lg);
  text-align: center;
  font-weight: 600;
}

.training-header {
  background: white;
  padding: 25px 30px;
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.training-header-title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.training-loading {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--color-text-light);
}

.training-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-lg);
}

.training-error {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--color-error);
}

.training-error-icon {
  margin-bottom: var(--space-lg);
}

.training-assessment-info {
  background: #f0e7f8;
  padding: var(--space-lg) 30px;
  border-bottom: 1px solid var(--color-border);
}

.training-assessment-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.training-assessment-description {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-bottom: 15px;
}

.training-assessment-meta {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text);
}

.training-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.training-timer {
  position: fixed;
  top: 100px;
  right: var(--space-lg);
  background: white;
  padding: 15px var(--space-lg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 2px solid var(--color-border);
  z-index: 100;
  text-align: center;
}

.training-timer-warning {
  border-color: var(--color-error);
}

.training-timer-label {
  font-size: 12px;
  color: var(--color-text-light);
  margin-bottom: 5px;
}

.training-timer-value {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.training-timer-value-warning {
  color: var(--color-error);
  animation: pulse 1s infinite;
}

.training-content {
  padding: 30px;
}

.training-question-card {
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.training-question-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.training-content-code {
  font-size: 10px;
  color: #999;
  font-weight: 400;
}

.training-question-text {
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.training-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.training-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}

.training-option:hover {
  border-color: var(--color-primary);
  background: rgba(119, 44, 187, 0.05);
}

.training-option.selected {
  border-color: var(--color-primary);
  background: rgba(119, 44, 187, 0.1);
}

.training-option-radio {
  margin-top: 2px;
  flex-shrink: 0;
}

.training-option-text {
  font-size: var(--font-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.training-submit-section {
  background: var(--color-bg);
  padding: var(--space-lg);
  border-radius: var(--radius);
  margin-top: var(--space-lg);
  text-align: center;
}

.training-submit-button {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.training-submit-button:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

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

.training-results-score {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: var(--space-lg) 0;
}

.training-results-summary {
  font-size: var(--font-base);
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.training-results-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.training-result-item {
  background: var(--color-bg);
  padding: var(--space-md);
  border-radius: var(--radius);
  text-align: center;
}

.training-result-label {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.training-result-value {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
}

.training-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

.training-review-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.training-review-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.training-review-item {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border-left: 4px solid var(--color-error);
}

.training-review-question {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.training-review-answer {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.training-review-correct {
  font-size: var(--font-sm);
  color: var(--color-success);
  font-weight: 500;
}

/* Text color utilities */
.text-success {
  color: var(--color-success) !important;
}

.text-error {
  color: var(--color-error) !important;
}

/* Mobile responsiveness for training assessment */
@media (max-width: 768px) {
  .training-assessment-container {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .training-back-nav {
    padding: var(--space-sm) var(--space-md);
  }

  .training-back-button {
    padding: 6px 10px;
    font-size: 12px;
  }

  .training-back-title {
    font-size: 12px;
  }

  .training-header {
    padding: var(--space-lg);
  }

  .training-header-title {
    font-size: var(--font-lg);
  }

  .training-content {
    padding: var(--space-lg);
  }

  .training-question-card {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .training-timer {
    position: static;
    margin-bottom: var(--space-lg);
    width: 100%;
  }

  .training-assessment-meta {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .training-results-details {
    grid-template-columns: 1fr;
  }

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

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

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Training Module Content - List Styling */
.training-module-content {
  font-size: var(--font-base);
  line-height: 1.8;
  color: #333;
}

.training-module-content ul,
.training-module-content ol {
  margin: 1rem 0;
  padding-left: 1.75rem;
}

.training-module-content li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.training-module-content ul li {
  list-style-type: disc;
}

.training-module-content ol li {
  list-style-type: decimal;
}

.training-module-content ul ul,
.training-module-content ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.training-module-content p {
  margin-bottom: 1rem;
}

.training-module-content strong {
  font-weight: 600;
}

/* View Modal Styles - UNIFIED */
.view-modal {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.view-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.view-modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.view-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0.25rem 0.5rem;
}

.view-modal-body {
  padding: 1.5rem;
}

.view-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.view-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0.75rem;
}

.view-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.view-label {
  color: var(--color-text-light);
}

.view-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 0 0 8px 8px;
}

/* Amount display utilities */
.amount-negative {
  font-weight: 600;
  color: var(--color-error);
}

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

/* Splits View Modal Styles */
.splits-view-modal {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.splits-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.splits-view-header h2 {
  margin: 0;
  font-size: 1.125rem;
}

.splits-view-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0.25rem 0.5rem;
}

.splits-view-body {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.splits-view-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.splits-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 0.75rem;
}

.splits-view-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0;
}

.splits-view-label {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.splits-view-value {
  font-size: 0.875rem;
  font-weight: 500;
}

.splits-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 0 0 8px 8px;
}

/* Code chip for split codes */
.code-chip {
  font-family: monospace;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-primary);
  background: #f3e5f5;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Badge styles for splits */
.vat-badge {
  font-size: 0.625rem;
  background: #dbeafe;
  color: #1e40af;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-weight: 500;
}

.vendor-badge {
  font-size: 0.5625rem;
  background: #dcfce7;
  color: #166534;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
}

/* POS Rooms Styles */
.property-selector {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.property-selector-label {
  font-weight: 500;
  color: var(--color-text);
}

.property-selector-select {
  min-width: 250px;
  flex: 0 0 auto;
}

.pos-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.pos-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pos-service-card {
  border-top: 4px solid;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pos-service-header {
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.pos-service-body {
  padding: 1rem;
}

.pos-service-empty {
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.75rem;
  padding: 0.5rem;
}

.pos-board-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.pos-import-section {
  padding: 2rem;
  text-align: center;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  margin-bottom: 2rem;
}

.pos-import-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.pos-import-text {
  color: var(--color-text-light);
}

.pos-import-button {
  margin-bottom: 16px;
}

.pos-error-message {
  color: #dc2626;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.pos-error-description {
  font-size: 0.875rem;
  color: #7f1d1d;
  margin-bottom: 1rem;
}

/* ============================================
   LOADING SKELETONS
   ============================================ */

.loading-skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.skeleton-line {
  height: 1rem;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.skeleton-line:last-child {
  width: 75%;
}

.skeleton-line:nth-child(2) {
  width: 90%;
}

/* Card skeleton */
.skeleton-card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.skeleton-header {
  height: 1.5rem;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  margin-bottom: 1rem;
  width: 60%;
}

.skeleton-content .skeleton-line {
  height: 0.875rem;
}

/* Table skeleton */
.skeleton-table {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.skeleton-table-header {
  display: flex;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.skeleton-table-row {
  display: flex;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.skeleton-table-row:last-child {
  border-bottom: none;
}

.skeleton-table-cell {
  flex: 1;
  height: 1rem;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  margin-right: 1rem;
}

.skeleton-table-cell:last-child {
  margin-right: 0;
}

/* Page skeleton */
.skeleton-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.skeleton-page-header {
  height: 2rem;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  margin-bottom: 2rem;
  width: 40%;
}

.skeleton-page-content {
  display: grid;
  gap: 2rem;
}

.skeleton-section {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.skeleton-title {
  height: 1.25rem;
  background: var(--color-bg-secondary);
  border-radius: 4px;
  margin-bottom: 1rem;
  width: 30%;
}

/* ============================================
   ERROR BOUNDARY
   ============================================ */

.error-boundary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.error-boundary-card {
  background: white;
  border-radius: 12px;
  padding: 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.error-boundary-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: 32px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.error-boundary-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px;
}

.error-boundary-message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px;
  line-height: 1.5;
}

.error-boundary-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.error-boundary-details {
  margin-top: 24px;
  text-align: left;
}

.error-boundary-summary {
  cursor: pointer;
  font-size: 12px;
  color: #6b7280;
}

.error-boundary-error-text {
  font-size: 11px;
  color: #dc2626;
  background: #fef2f2;
  padding: 12px;
  border-radius: 6px;
  overflow: auto;
  max-height: 200px;
  margin-top: 8px;
}

/* ============================================================================
   UTILITY CLASSES FOR INLINE STYLE CONVERSION (Phase 3)
   ============================================================================ */

/* Flex utilities */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }

/* Gap utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Font weight utilities */
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-bold { font-weight: bold; }

/* Font size utilities */
.fs-xs { font-size: var(--font-xs); }
.fs-sm { font-size: var(--font-sm); }
.fs-base { font-size: var(--font-base); }
.fs-lg { font-size: var(--font-lg); }
.fs-xl { font-size: var(--font-xl); }

/* Color utilities */
.text-light { color: var(--color-text-light); }
.text-primary { color: var(--color-primary); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }

/* Margin utilities */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }

.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }

/* Padding utilities */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Border radius utilities */
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }

/* Width/Height utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* Display utilities */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }

/* Font style */
.italic { font-style: italic; }

/* Avatar component */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* Status badge */
.status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.status-badge-lg {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Profile badge */
.profile-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  background: #e0e7ff;
  color: #4338ca;
}

/* Modal utilities */
.modal-content-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Modal section heading — uppercase label used in form modals */
.modal-section-heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

/* Modal grid 3-col */
.modal-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

/* POS tier card selector */
.pos-tier-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--color-white);
  transition: all 0.15s;
}

.pos-tier-card:hover {
  border-color: var(--color-primary);
}

.pos-tier-card.selected {
  border-color: var(--color-primary);
  background: rgba(119, 44, 187, 0.05);
}

.pos-tier-card-name {
  font-weight: 500;
  font-size: 0.9rem;
}

.pos-tier-card-discount {
  font-size: 0.65rem;
  color: var(--color-success, #16a34a);
  margin-top: 2px;
}

/* POS personal note blockquote */
.pos-personal-note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-light);
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-primary);
}

/* Screen reader only (visually hidden but accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Section divider */
.section-divider {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

/* Action button */
.action-button {
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.action-button.success {
  background: #16a34a;
}

/* Text utilities */
.text-xs-gray {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.text-xs-slate {
  font-size: 0.75rem;
  color: #64748b;
}

/* Margin utilities */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mb-1 { margin-bottom: 0.25rem; }

/* Font utilities */
.font-medium { font-weight: 500; }

/* Loading text */
.loading-text {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

/* Flex utilities */
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.justify-between { justify-content: space-between; }

/* Text utilities */
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Navigation */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-light);
  text-decoration: none;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Header styles */
.territory-header {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.territory-header-mobile {
  margin-bottom: 1rem;
  padding: 1rem;
}

/* Title styles */
.territory-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  word-break: break-word;
}

.territory-title-mobile {
  font-size: 1.25rem;
}

/* Header flex layout */
.header-meta {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.header-meta-mobile {
  gap: 0.5rem;
}

.header-meta-desktop {
  gap: 0.75rem;
}

/* Status indicators */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #166534;
}

.status-indicator.inactive {
  color: #92400e;
}

.status-indicator-mobile {
  font-size: 0.75rem;
}

/* Code styling */
.code-badge {
  padding: 0.125rem 0.375rem;
  background: var(--color-bg);
  border-radius: 4px;
  font-size: 0.7rem;
}

/* Card styling */
.card-body {
  padding: 1rem;
}

/* Text styling */
.text-muted {
  color: var(--color-text-light);
}

.text-success {
  color: #166534;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-sm-gray {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.text-xs-gray {
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

/* Margin utilities */
.ml-2 { margin-left: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }

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

/* Justify content */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

/* Align items */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

/* Custom component classes for POSProperties */
.manager-invite-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.access-level-badge {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  padding: 2px 6px;
  background: #e5e7eb;
  border-radius: 4px;
  color: #374151;
}

/* Button utilities */
.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
}

/* Breadcrumb component */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Badge components */
.tier-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* View toggle component */
.view-toggle {
  display: flex;
  gap: 4px;
  padding: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* Error message styling */
.error-message {
  padding: 0.75rem;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Success message styling */
.success-message {
  margin: 0.75rem 0 0;
  padding: 0.5rem;
  background: #dcfce7;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: #166534;
}

/* Disabled message styling */
.disabled-message {
  margin: 0.75rem 0 0;
  padding: 0.5rem;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--color-text-light);
}

/* Warning message styling */
.warning-message {
  margin: 0;
  padding: 0.5rem;
  background: #fef3c7;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: #92400e;
}

/* Info message styling */
.info-message {
  margin: 1rem 0 0;
  padding: 0.75rem;
  background: #f0f9ff;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: #1e40af;
}

/* Text size utilities */
.text-xs-smaller { font-size: 0.8125rem; }

/* Success message styling */
.success-message {
  margin: 0.75rem 0 0;
  padding: 0.5rem;
  background: #dcfce7;
  border-radius: 4px;
  font-size: 0.8125rem;
  color: #166534;
}

/* Setup Wizard Styles */
.setup-wizard {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.setup-header {
  margin-bottom: var(--space-xxl);
}

.setup-header h1 {
  font-size: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.setup-subtitle {
  font-size: var(--font-lg);
  color: var(--color-text-light);
  margin: 0 0 var(--space-xl);
  line-height: 1.5;
}

.setup-docs {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.setup-docs h3 {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.docs-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}

.doc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-sm);
  transition: all 0.2s ease;
}

.doc-link:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.setup-progress {
  margin-top: var(--space-lg);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.progress-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

.setup-controls {
  margin-bottom: var(--space-xl);
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.control-group label {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.country-select {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: var(--font-base);
  min-width: 250px;
}

.env-vars-section {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.env-vars-section h2 {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.env-vars-intro {
  font-size: var(--font-base);
  color: var(--color-text-light);
  margin: 0 0 var(--space-lg);
  line-height: 1.5;
}

.env-vars-intro a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}

.env-vars-intro a:hover {
  text-decoration: underline;
}

.env-vars-quick-ref {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.quick-ref-item h3 {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.quick-ref-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quick-ref-item li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-sm);
}

.quick-ref-item li:last-child {
  border-bottom: none;
}

.quick-ref-item code {
  background: var(--color-white);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.85em;
  color: var(--color-primary);
  font-weight: 500;
}

.env-vars-warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-size: var(--font-sm);
  color: #92400e;
  font-weight: 500;
}

.checklist-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.checklist-category {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.category-title {
  background: var(--color-bg);
  padding: var(--space-lg);
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.checklist-steps {
  padding: var(--space-lg);
}

.checklist-step {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.checklist-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.step-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

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

.status-button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-button:hover {
  transform: scale(1.05);
}

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

.step-content {
  flex: 1;
}

.step-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.step-description {
  font-size: var(--font-base);
  color: var(--color-text-light);
  margin: 0 0 var(--space-md);
  line-height: 1.5;
}

.step-notes {
  background: #f0f9ff;
  border-left: 3px solid #0ea5e9;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-sm);
  color: #0c4a6e;
  margin-top: var(--space-sm);
}

.step-actions {
  margin-top: var(--space-md);
}

.notes-input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  font-family: inherit;
  resize: vertical;
  background: var(--color-white);
}

.notes-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(119, 44, 187, 0.1);
}

.empty-state {
  text-align: center;
  padding: var(--space-xxl);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.empty-state h2 {
  font-size: var(--font-xl);
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}

.empty-state p {
  font-size: var(--font-base);
  color: var(--color-text-light);
  margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .setup-wizard {
    padding: var(--space-md);
  }

  .docs-links {
    grid-template-columns: 1fr;
  }

  .env-vars-quick-ref {
    grid-template-columns: 1fr;
  }

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

  .control-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .country-select {
    min-width: 100%;
  }
}

/* ============================================
   Reusable component utilities
   Added during inline style migration
   ============================================ */

/* Extra-small text (0.7rem) — smaller than .text-xs (0.75rem) */
.text-2xs { font-size: 0.7rem; }

/* Form input base — padding + border + outline reset */
.form-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  outline: none;
}

/* Alert boxes */
.alert-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  padding: 0.75rem;
}
.alert-warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  padding: 0.75rem;
  color: var(--color-warning-text);
}

/* Stat card — centered number + label */
.stat-card {
  padding: 1rem;
  text-align: center;
  border-radius: var(--radius-lg);
}
.stat-card--info { background: #e0e7ff; }
.stat-card--info .stat-card__value { color: #4338ca; }
.stat-card--info .stat-card__label { color: #3730a3; }
.stat-card--success { background: var(--color-success-bg); }
.stat-card--success .stat-card__value { color: var(--color-success); }
.stat-card--success .stat-card__label { color: #065f46; }
.stat-card--error { background: var(--color-error-bg); }
.stat-card--error .stat-card__value { color: var(--color-error); }
.stat-card--error .stat-card__label { color: #991b1b; }
.stat-card__value { font-size: 1.5rem; font-weight: bold; }
.stat-card__value--lg { font-size: 2rem; font-weight: bold; }

/* Modal size variants */
.modal-sm { max-width: 450px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 700px; }
.modal-xl { max-width: 900px; max-height: 90vh; }
.modal-body--scroll { max-height: calc(90vh - 140px); overflow-y: auto; }
.modal-body--scroll-short { max-height: calc(85vh - 140px); overflow-y: auto; }

/* Toolbar vertical divider */
.toolbar-divider {
  width: 1px;
  background: var(--color-border);
  margin: 0 0.25rem;
  align-self: stretch;
}

/* Tab button */
.tab-btn {
  padding: 0.5rem 1rem;
  background: var(--color-bg-secondary);
  color: var(--color-text);
}
.tab-btn--active {
  background: var(--color-primary);
  color: white;
}

/* Toggle button (filter chips) */
.toggle-btn {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}
.toggle-btn--active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.toggle-btn--success {
  background: var(--color-success);
  color: white;
}
.toggle-btn--info {
  background: #0891b2;
  color: white;
}
/* Brand-aware active states for context filters (CMB violet / POS gold / neutral) */
.toggle-btn--pos-active {
  background: #BD982F;
  color: white;
  border-color: #BD982F;
}
.toggle-btn--neutral-active {
  background: var(--color-text-primary, #1a1a2e);
  color: white;
  border-color: var(--color-text-primary, #1a1a2e);
}
.toggle-btn-lg {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Capitalize text */
.text-capitalize { text-transform: capitalize; }

/* Border utilities */
.border-bottom-none { border-bottom: none; }

/* Margin zero */
.mb-0 { margin-bottom: 0; }

/* Subsection background box */
.bg-secondary-box {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
}

/* Scrollable list container */
.scroll-list {
  max-height: 200px;
  overflow: auto;
}
.scroll-list--tall {
  max-height: 250px;
  overflow: auto;
}

/* Clickable link text in tables */
.link-text {
  color: #4338ca;
  cursor: pointer;
  text-decoration: underline;
}

/* Simulate-as-customer purple box */
.highlight-purple {
  padding: 0.75rem;
  background: #f8f5ff;
  border: 1px solid #e9e0f5;
}

/* Content editor area */
.content-editor {
  min-height: 250px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0 0 6px 6px;
  background: white;
  outline: none;
  font-size: 1rem;
  line-height: 1.6;
  font-family: Arial, sans-serif;
  color: #1a1a2e;
}

/* Variables dropdown */
.variables-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  min-width: 240px;
  margin-top: 4px;
}

/* Preview container */
.preview-container {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #f5f5f5;
}

/* List item with bottom border */
.list-item-bordered {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.list-item-bordered-padded {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

/* Table with collapsed borders */
.table-simple {
  border-collapse: collapse;
  font-size: 0.85rem;
}
.table-simple th,
.table-simple td {
  padding: 0.5rem;
}
.table-simple thead tr {
  border-bottom: 2px solid var(--color-border);
}
.table-simple tbody tr {
  border-bottom: 1px solid var(--color-border);
}

/* Centered padding for empty/loading states */
.empty-state { padding: 2rem; text-align: center; }

/* Pagination button small */
.btn-pagination {
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
}

/* Selected customer card */
.selected-card {
  padding: 0.5rem 0.75rem;
  background: white;
  border: 1px solid #bbf7d0;
}

/* Toolbar top section (border + bg) */
.toolbar-top {
  padding: 0.5rem;
  background: var(--color-bg-secondary);
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--color-border);
  border-bottom: none;
}

/* Detail modal (CustomerDetailModal, etc.) */
.detail-modal {
  background: white;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.detail-body { padding: 1.5rem; }
.detail-tab-content { padding: 0.5rem 0; }

/* Detail tab navigation */
.detail-tab-nav {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  padding: 0 1rem;
}
.detail-tab {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.detail-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* Detail modal — mobile containment */
@media (max-width: 768px) {
  .detail-modal {
    position: fixed;
    inset: 0;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
  }
  .detail-tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.5rem;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
  }
  .detail-tab {
    padding: 0.625rem 0.625rem;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .detail-body {
    padding: 1rem;
    overflow-x: hidden;
  }
  .detail-body .view-value {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .detail-body .info-card {
    min-width: 0;
  }
  .detail-body .flex {
    flex-wrap: wrap;
  }
  .detail-body .font-mono {
    word-break: break-all;
  }
}

/* Loading spinner circle (reusable) */
.spinner-sm {
  width: 30px;
  height: 30px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

/* Error box for inline errors */
.error-box {
  padding: 2rem;
  background: #fee2e2;
  margin: 0.5rem 0;
}

/* Warning note box (amber) */
.warning-note {
  background: #fef3c7;
  padding: 0.75rem 1rem;
  border: 1px solid #fcd34d;
}
.warning-note__title { color: #92400e; }
.warning-note__text { color: #78350f; }

/* Info card (flex: 1, centered, rounded) */
.info-card {
  flex: 1;
  min-width: 100px;
  padding: 0.75rem;
  text-align: center;
  border-radius: var(--radius-lg);
  background: #f8fafc;
}
.info-card--wide { min-width: 120px; }

/* Referral code display */
.referral-code {
  font-family: var(--font-mono, monospace);
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

/* Purple CTA link button */
.btn-link-primary {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
}

/* Action icon button (small square) */
.btn-icon-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
}
.btn-icon-sm--primary { background: var(--color-primary); color: white; }
.btn-icon-sm--success { background: #059669; color: white; }

/* Status badge (inline pill) */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.status-badge--sm {
  padding: 0.125rem 0.375rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Note card (with left border accent) */
.note-card {
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
}
.note-card__text {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.4;
}
.note-card__meta {
  font-size: 0.7rem;
  color: #94a3b8;
}
.note-card__auto {
  font-size: 0.65rem;
  color: #94a3b8;
  font-style: italic;
}

/* Item card (used in invoice/booking lists) */
.item-card {
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
}

/* Credit history row */
.credit-row {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}
.credit-row--even { background: #f8fafc; }

/* Flex utility */
.flex-1 { flex: 1; }

/* Config spreadsheet / setup guide styles */
.config-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  overflow: hidden;
}
.config-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.config-table-wrap { overflow-x: auto; }
.config-table { width: 100%; border-collapse: collapse; }
.config-th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
}
.config-th--sticky {
  position: sticky;
  left: 0;
  background: var(--color-bg);
  z-index: 2;
  width: 220px;
}
.config-td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.config-td--sticky {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}
.config-tr { border-bottom: 1px solid var(--color-border); }
.action-icon {
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: 4px;
}
.secret-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Config form section (accordion-style) */
.config-section { border-bottom: 1px solid var(--color-border); }
.config-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.config-section-icon { font-size: 1rem; }
.config-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--color-text);
}
.config-section-content { padding: 1rem 1.5rem; }

/* Read-only label/value (view modal) */
.ro-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: 0.25rem;
}
.ro-value { font-size: 0.875rem; font-weight: 500; }

/* Small utility button (show/copy) */
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text);
}

/* Delete button (outlined danger) */
.btn-danger-outline {
  background: none;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Toggle switch */
.toggle-container { display: flex; align-items: center; cursor: pointer; }
.toggle-checkbox { display: none; }
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  transition: background 0.2s;
}
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

/* Step number circle */
.step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 50%;
  color: white;
  flex-shrink: 0;
}
.step-circle--md { width: 28px; height: 28px; font-size: 0.875rem; }
.step-circle--sm { width: 24px; height: 24px; font-size: 0.75rem; }
.step-circle--primary { background: var(--color-primary); }
.step-circle--paystack { background: #0ea5e9; }
.step-circle--stripe { background: #8b5cf6; }

/* Guide step row */
.guide-step {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.guide-step--compact {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.guide-step-title { font-size: 0.9375rem; }

/* Guide callout box */
.guide-callout {
  border-radius: var(--radius);
  padding: 1rem;
}
.guide-callout--success { background: #f0fdf4; border: 1px solid #bbf7d0; }
.guide-callout--success .guide-callout__title { color: #166534; }
.guide-callout--success ul { color: #166534; }
.guide-callout--warning { background: #fef3c7; border: 1px solid #fcd34d; }
.guide-callout--warning .guide-callout__title { color: #92400e; }
.guide-callout--warning ul { color: #92400e; }
.guide-callout--info { background: #dbeafe; border: 1px solid #93c5fd; }
.guide-callout--info .guide-callout__title { color: #1e40af; }
.guide-callout--info ul { color: #1e40af; }
.guide-callout ul { padding-left: 1.25rem; font-size: 0.8125rem; margin: 0; }

/* Guide modal body */
.guide-body { padding: 1.5rem; max-height: 60vh; overflow: auto; }
.guide-intro { margin-top: 0; margin-bottom: 1.5rem; }
.guide-step ul,
.guide-step-list { padding-left: 1.25rem; font-size: 0.8125rem; color: var(--color-text); margin: 0; }

/* Payment provider section header */
.provider-header {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}
.config-th--country { min-width: 180px; }
.provider-header--paystack { background: #e0f2fe; color: #0369a1; }
.provider-header--stripe { background: #f3e8ff; color: #7c3aed; }

/* Font weight normal (override bold context) */
.fw-400 { font-weight: 400; }

/* Float right */
.float-right { float: right; }

/* Config font size (0.8125rem — between text-xs and text-sm) */
.text-config { font-size: 0.8125rem; }

/* Modal scrollable body */
.modal-scroll-body { max-height: 60vh; overflow: auto; }

/* Push result banner */
.push-banner {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
}
.push-banner--success { background: #d4edda; }
.push-banner--warning { background: #fff3cd; }

/* Group header row */
.group-header-row { background: var(--color-bg); }
.group-header-cell {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

/* Cell value truncate */
.cell-value-truncate {
  max-width: 150px;
}

/* Placeholder/empty text */
.text-placeholder { color: #ccc; }
.text-not-set { color: #999; }

/* Disabled input background */
.input-disabled-bg { background: #f3f4f6; }

/* Dependent field indent */
.dependent-field {
  margin-left: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border);
}

/* Border-top separator */
.border-top-separator {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Pre-wrap whitespace */
.whitespace-pre-wrap { white-space: pre-wrap; }

/* Background none */
.bg-none { background: none; }

/* Warning text */
.text-warning { color: #856404; }

/* ============================================
   Rewards Dashboard
   ============================================ */

/* Stat metric value + label */
.stat-value { font-size: var(--font-xl); font-weight: 700; }
.stat-label { font-size: var(--font-sm); color: var(--color-text-light); }

/* Stats grid (auto-fit metrics) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-xl);
  text-align: center;
}

/* Cards grid (auto-fit program cards) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* Quick action grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* Quick action button */
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: white;
  border-width: 2px;
  border-style: solid;
  border-radius: var(--radius-lg);
  min-height: 100px;
  cursor: pointer;
}

/* Quick action icon */
.quick-action-icon { font-size: 1.5rem; }

/* Section title (large, bold) */
.section-title-lg { font-size: var(--font-lg); font-weight: 600; margin-bottom: var(--space-xs); }

/* Section subtitle */
.section-subtitle { font-size: var(--font-sm); color: var(--color-text-light); }

/* Program card */
.program-card { height: 100%; cursor: pointer; transition: box-shadow 0.15s; border-left: 4px solid var(--color-border); }
.program-card--primary { border-left-color: var(--color-primary); }
.program-card--success { border-left-color: var(--color-success); }
.program-card--warning { border-left-color: var(--color-warning); }

/* Program card header layout */
.program-card-header { display: flex; justify-content: space-between; align-items: flex-start; }

/* Program card icon (large emoji) */
.program-card-icon { font-size: 2rem; }

/* Program card stats grid */
.program-card-stats { margin-top: var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

/* Link with no decoration/color */
.link-reset { text-decoration: none; color: inherit; }

/* Settlement alert banner */
.settlement-alert {
  padding: var(--space-lg);
  background: var(--color-warning-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-warning);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Empty state centered text */
.empty-state-text { color: var(--color-text-light); text-align: center; padding: var(--space-xl); }

/* Card header with flex between */
.card-header--flex { display: flex; justify-content: space-between; align-items: center; }

/* Coming soon badge */
.coming-soon-badge {
  margin-top: var(--space-lg);
  text-align: center;
  padding: var(--space-md);
  background: var(--color-warning-bg);
  border-radius: var(--radius);
}
.coming-soon-badge span { font-size: var(--font-sm); color: var(--color-warning-text); font-weight: 500; }

/* Referral code display */
.referral-code-panel { text-align: center; padding: 1.5rem; background: var(--color-bg); border-radius: var(--radius-lg); margin-bottom: 1.5rem; }
.referral-code-value { font-size: 2rem; font-family: monospace; font-weight: 700; color: var(--color-primary); letter-spacing: 0.05em; }

/* Referral info box */
.referral-info-box { padding: 1rem; background: var(--color-success-bg); border-radius: var(--radius); border: 1px solid var(--color-success); margin-bottom: 1.5rem; }

/* WhatsApp share button */
.btn-whatsapp {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  background: #25D366;
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  min-height: 44px;
}

/* Customer search result button */
.customer-result-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  min-height: 60px;
}
.customer-result-btn:hover { background: #f3f4f6; }

/* Modal back button */
.modal-back-btn { background: none; border: none; font-size: 1.25rem; cursor: pointer; padding: 0.5rem; margin-right: 0.5rem; min-width: 44px; min-height: 44px; }

/* Search error/empty state */
.search-empty-state { color: var(--color-text-light); padding: 1rem; background: var(--color-bg); border-radius: var(--radius); text-align: center; margin-top: 1rem; }

/* Quick action section title */
.quick-action-title { font-size: var(--font-lg); font-weight: 600; margin-bottom: var(--space-md); }

/* ─── Calendar Legend ─────────────────────────────────────── */
.cal-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}
.cal-legend--mobile { gap: 8px; padding: 8px 12px; }
.cal-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; }
.cal-legend-item--mobile { font-size: 0.65rem; }
.cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.cal-legend-dot--bordered { border: 1px solid #16a34a; }

/* ─── Calendar Filter Bar ─────────────────────────────────── */
.cal-nav-btn { padding: 6px 10px; }
.cal-today-btn { padding: 6px 10px; margin-left: 4px; }
.cal-date-label {
  text-align: center;
  font-weight: 500;
  font-size: 0.875rem;
  min-width: 140px;
}
.cal-date-label--mobile { min-width: 100px; font-size: 0.8rem; }
.cal-nav-group { display: flex; align-items: center; gap: 8px; }

/* ─── Booking List Table Cells ────────────────────────────── */
.cell-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-truncate--150 { max-width: 150px; }
.cell-truncate--180 { max-width: 180px; }
.cell-ref { display: flex; align-items: center; gap: 6px; }
.sb-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: #f59e0b;
  color: #fff;
  padding: 2px 4px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.text-mono-primary { font-family: monospace; color: var(--color-primary); }
.text-time-sub { font-size: 0.75rem; color: var(--color-text-light); }

/* ─── Booking Success Modal ───────────────────────────────── */
.booking-success-modal { text-align: center; padding: 2rem; background: white; border-radius: 12px; }
.booking-code-display {
  font-family: monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 1rem;
  background: var(--color-primary-bg);
  border-radius: 8px;
  display: inline-block;
}

/* ─── Calendar Mobile Tabs Override ───────────────────────── */
.page-tabs--mobile {
  display: flex;
  gap: 0;
  padding: 0 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.page-tab--mobile { font-size: 0.8rem; padding: 8px 12px; white-space: nowrap; }

/* ─── Calendar Day Headers ────────────────────────────────── */
.cal-day-header {
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-text-light);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding: 12px 8px;
}
.cal-day-header--mobile { padding: 6px 2px; font-size: 0.65rem; }

/* ─── Calendar Grid Cell ──────────────────────────────────── */
.cal-cell {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  position: relative;
}
.cal-cell--pad { background: var(--color-bg-secondary); }

/* ─── Calendar Mobile Hint ────────────────────────────────── */
.cal-mobile-hint {
  padding: 6px 12px;
  background: var(--color-bg);
  font-size: 0.65rem;
  color: var(--color-text-light);
  text-align: center;
}

/* ─── Day View Summary Bar ────────────────────────────────── */
.cal-day-summary {
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-light);
  display: flex;
  justify-content: space-between;
}

/* ─── Calendar Empty State ────────────────────────────────── */
/* Visibility hidden utility */
.invisible { visibility: hidden; }

/* Inline flex centered */
.inline-flex-center { display: inline-flex; align-items: center; gap: var(--space-xs); }

.cal-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  color: var(--color-text-light);
  font-style: italic;
}

/* ─── Batch 2 Utilities ──────────────────────────────────── */

/* Layout */
.inline-flex { display: inline-flex; }

/* Overflow */
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }

/* Whitespace */
.whitespace-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Borders */
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* Opacity */
.opacity-50 { opacity: 0.5; }

/* Cursor */
.cursor-not-allowed { cursor: not-allowed; }

/* Spacing extras */
.pt-sm { padding-top: 0.5rem; }
.pt-md { padding-top: 1rem; }
.pt-lg { padding-top: 1.5rem; }
.pl-sm { padding-left: 0.5rem; }
.pl-md { padding-left: 1rem; }
.ml-auto { margin-left: auto; }
.m-0 { margin: 0; }

/* ─── Batch 2 Component Classes ──────────────────────────── */

/* Section divider — border-top with spacing */
.section-divider { border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-bottom: 1.5rem; }

/* Section title (small) */
.section-title-sm { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.75rem; }

/* Form hint text */
.form-hint { font-size: 0.75rem; color: var(--color-text-light); margin-top: 0.25rem; }

/* 2-column form row */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* 3-column form row */
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* Scrollable modal body */
.modal-body-scroll { max-height: 70vh; overflow-y: auto; }

/* Panel card */
.panel { padding: 1rem; background: var(--color-bg-secondary, #f9fafb); border-radius: 8px; border: 1px solid var(--color-border); }

/* Empty state */
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--color-text-light); }

/* Text nowrap utility */
.text-nowrap { white-space: nowrap; }

/* ─── ContentLibrary page ──────────────────────────── */

/* Compact button (icon-style buttons with tighter padding) */
.btn-compact { padding: 0.5rem 0.75rem; }

/* Notification badge (absolute positioned counter) */
.badge-notification {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: white;
  width: 20px;
  height: 20px;
}

/* Close button (unstyled X button) */
.btn-close-plain {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--color-text-light);
}

/* YouTube status panel backgrounds */
.yt-status-connected { background: #dcfce7; }
.yt-status-disconnected { background: #f3f4f6; }

/* YouTube connected checkmark */
.yt-check { color: #22c55e; font-size: 18px; }

/* YouTube error panel */
.yt-error-bg { background: #fee2e2; }

/* Filter grid */
.cl-filter-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Filter label compact spacing */
.cl-filter-label { margin-bottom: 4px; }

/* Sort controls */
.cl-sort-control {
  padding: 4px 8px;
  font-size: 12px;
  width: auto;
}
.cl-sort-btn {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 32px;
}

/* Empty state large padding */
.cl-empty { padding: 3rem; }

/* Asset grid */
.cl-asset-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* List view thumbnail */
.cl-list-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/* List view type icon placeholder */
.cl-list-type-icon {
  width: 50px;
  height: 50px;
  background: var(--color-bg-alt);
  font-size: 20px;
}

/* Table column widths */
.cl-col-thumb { width: 60px; }
.cl-col-actions { width: 120px; }

/* Asset card hover effect */
.cl-asset-card {
  transition: transform 0.15s, box-shadow 0.15s;
}
.cl-asset-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Asset card thumbnail area */
.cl-card-thumb {
  height: 140px;
  background: var(--color-bg-alt);
  position: relative;
}

/* Asset card thumbnail image */
.cl-card-thumb-img {
  height: 100%;
  object-fit: cover;
}

/* Large type icon (no-thumbnail fallback) */
.cl-type-icon-lg { font-size: 40px; }

/* Video play overlay */
.cl-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.cl-play-icon { font-size: 40px; color: white; }

/* Featured badge */
.cl-badge-featured {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #fbbf24;
  color: #78350f;
  padding: 2px 8px;
}

/* Type badge */
.cl-badge-type {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 8px;
}

/* Asset card content area */
.cl-card-content { padding: 12px; }

/* Asset card title */
.cl-card-title { font-size: 14px; }

/* Asset card action bar */
.asset-action-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  border-left: 1px solid var(--color-border);
}
.asset-action-btn:hover { background: var(--color-bg); }

/* Preview modal */
.cl-preview-modal { max-width: 800px; width: 90%; }

/* Preview area dark bg */
.cl-preview-area {
  background: #1a1a1a;
  min-height: 300px;
}

/* Preview iframe */
.cl-preview-iframe { height: 400px; }

/* Preview image (full) */
.cl-preview-img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

/* Preview image (thumbnail fallback) */
.cl-preview-img-sm {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

/* Preview no-preview placeholder */
.cl-preview-placeholder { color: white; }
.cl-preview-placeholder-icon { font-size: 60px; }

/* Metadata grid */
.cl-meta-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Metadata label */
.cl-meta-label { margin-bottom: 4px; }

/* Tag pill */
.cl-tag {
  background: var(--color-bg-alt);
  padding: 4px 10px;
}

/* Tags heading / Usage notes heading */
.cl-section-label { margin-bottom: 8px; }

/* Usage notes box */
.cl-usage-notes {
  background: var(--color-bg-alt);
  padding: 12px;
}

/* Relative positioning utility */
.pos-relative { position: relative; }

/* Background utility for card actions */
.bg-alt { background: var(--color-bg-alt); }

/* YouTube settings title */
.cl-yt-title { font-size: 1rem; }

/* ─── Settlements page ────────────────────────────────────── */

/* Type badge (admin fee / pool funding) */
.type-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: 500;
  white-space: nowrap;
}
.type-badge--admin { background: #e0e7ff; color: #3730a3; }
.type-badge--pool { background: #fce7f3; color: #9d174d; }

/* Code chip in view modal (monospace on bg) */
.settlements-code-chip {
  font-family: monospace;
  font-size: var(--font-base);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

/* Partner selection card */
.partner-card {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Invoice preview table */
.invoice-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}
.invoice-preview-table th {
  padding: var(--space-sm);
  font-weight: 600;
  background: var(--color-bg);
}
.invoice-preview-table th:first-child,
.invoice-preview-table td:first-child { text-align: left; }
.invoice-preview-table th:nth-child(2) { text-align: center; }
.invoice-preview-table th:nth-child(3),
.invoice-preview-table th:nth-child(4),
.invoice-preview-table th:nth-child(5) { text-align: right; }
.invoice-preview-table thead tr {
  border-bottom: 2px solid var(--color-border);
}
.invoice-preview-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}
.invoice-preview-table td {
  padding: var(--space-sm);
}
.invoice-preview-table td:nth-child(2) { text-align: center; }
.invoice-preview-table td:nth-child(3),
.invoice-preview-table td:nth-child(4),
.invoice-preview-table td:nth-child(5) { text-align: right; }
.invoice-preview-table tfoot tr {
  border-top: 2px solid var(--color-border);
  background: var(--color-bg);
}
.invoice-preview-table tfoot td {
  padding: var(--space-sm);
}

/* Modal icon (large emoji for success/error states) */
.modal-result-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

/* Modal footer centered */
.modal-footer--center {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* ─── ServiceLogs page ──────────────────────────────────── */

/* Modal width modifier */
.modal--md { max-width: 650px; }

/* Fullscreen overlay for InvoiceManager */
.sl-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg, #f8f9fa);
  z-index: 1000;
  overflow: auto;
}

.sl-fullscreen-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Modal action bar (top buttons row) */
.sl-modal-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt, #f8f9fa);
}

/* Customer name/heading in view modal */
.sl-customer-name {
  font-weight: 600;
  font-size: 1.1rem;
}

.sl-customer-detail {
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.sl-customer-company {
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Invoice subject text */
.sl-invoice-subject {
  font-size: 0.9rem;
}

/* Totals section total row */
.sl-total-row {
  font-weight: 600;
  font-size: 1.1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}

/* Section title annotation (light inline note) */
.sl-title-note {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-left: 0.5rem;
}

/* Internal notes box */
.sl-notes-box {
  background: var(--color-bg-light);
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  white-space: pre-wrap;
}

/* No-items italic placeholder */
.sl-empty-items {
  color: var(--color-text-light);
  font-style: italic;
}

/* Last view-section with no border */
.sl-section-last {
  border-bottom: none;
  margin-bottom: 0;
}

/* Mobile card */
.sl-mobile-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
}

/* Mobile card actions row */
.sl-mobile-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* Mobile padding */
.sl-mobile-wrap {
  padding: 8px;
}

/* Mobile button row */
.sl-mobile-btn-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* DataTable column: inline status + payment layout */
.sl-status-cell {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Column customer email sub-line */
.sl-sub-text {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* Column: VAT inclusive marker */
.sl-vat-marker {
  font-size: 0.625rem;
  margin-left: 4px;
  color: var(--color-text-light);
}

/* Column: invoice number under amount */
.sl-invoice-num {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-family: monospace;
}

/* Board card operator meta */
.sl-meta-light {
  font-size: 0.7rem;
  color: var(--color-text-light);
}

/* Discount text in table items */
.sl-discount-text {
  font-size: 0.75rem;
  color: var(--color-error);
}

/* Delete draft button style (outline red) */
.sl-btn-danger-outline {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* WhatsApp button style */
.sl-btn-whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: white;
}

/* Min-height touch target for mobile */
.sl-touch-btn {
  min-height: 44px;
}

/* Location value right-aligned */
.sl-location-value {
  text-align: right;
  max-width: 60%;
}

/* Payment reference monospace */
.sl-payment-ref {
  font-family: monospace;
  font-size: 0.8rem;
}

/* ─── POSAmbassadors page ──────────────────────────────── */

/* POS brand color */
:root {
  --color-pos-gold: #BD982F;
}

/* Ambassador badge pill */
.ambassador-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--color-pos-gold);
}

/* Referral code dark card */
.referral-card {
  background: linear-gradient(135deg, #1a1a1a, #333);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  color: #fff;
}
.referral-card h3 {
  margin: 0 0 16px;
  color: var(--color-pos-gold);
}

/* Referral code display block */
.referral-code-display {
  background: var(--color-pos-gold);
  color: #1a1a1a;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  font-family: monospace;
}

/* Ghost button on dark backgrounds */
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
}

/* Referral link code block */
.referral-link-code {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  word-break: break-all;
}

/* Referral hint text */
.referral-hint {
  margin: 0 0 8px;
  color: #aaa;
  font-size: 13px;
}

/* Referral usage count */
.referral-usage {
  margin: 12px 0 0;
  color: #888;
  font-size: 12px;
}

/* Auto-fit stat grid */
.grid-auto-150 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}
.grid-auto-140 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

/* Stat card */
.stat-card {
  padding: var(--space-lg);
  text-align: center;
}
.stat-card-label {
  font-size: 12px;
  color: #666;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-card-value {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}
.stat-card-value--highlight {
  color: var(--color-pos-gold);
}

/* Empty state (large padding variant) */
.empty-state-lg {
  padding: 40px;
  text-align: center;
  color: #666;
}
.empty-state-lg .empty-state-title {
  font-size: 16px;
  margin-bottom: 8px;
}
.empty-state-lg .empty-state-desc {
  font-size: 14px;
  color: #999;
}

/* Vendor field label (uppercase tiny label) */
.vendor-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin: 0 0 2px;
}

/* Vendor field value */
.vendor-field-value {
  margin: 0;
  font-weight: 500;
}

/* Vendor detail grid (2-col) */
.vendor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

/* Banking details panel */
.banking-panel {
  background: #f9fafb;
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: 20px;
}
.banking-panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #999;
  margin: 0 0 12px;
  font-weight: 600;
}
.banking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Rejection reason alert */
.rejection-alert {
  background: var(--color-error-bg);
  color: var(--color-error);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
}

/* Vendor action divider */
.vendor-actions-divider {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

/* Approve button (green override) */
.btn-approve {
  background: var(--color-success);
  border-color: var(--color-success);
}

/* Reject button (red outline) */
.btn-reject {
  color: var(--color-error);
  border-color: var(--color-error);
}

/* POS gold branded button */
.btn-pos-gold {
  background: var(--color-pos-gold);
  border-color: var(--color-pos-gold);
}

/* Invite success link display */
.invite-link-display {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  padding: 12px;
  word-break: break-all;
  font-size: 13px;
  font-family: monospace;
  margin-bottom: 12px;
}

/* Invite success icon */
.invite-success-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* Approved-on text */
.text-approved {
  font-size: 13px;
  color: var(--color-success);
  margin: 0;
}

/* Tier text styles */
.tier-text {
  text-transform: capitalize;
  font-weight: 500;
}
.tier-signature { color: var(--color-pos-gold); }
.tier-distinguished { color: #A8A9AD; }
.tier-classic { color: #CD7F32; }

/* POS-themed scope.
   Wrap a page's outermost element with className="pos-themed" to rebind
   the primary brand token locally. Every descendant that uses
   var(--color-primary) (buttons, tab indicators, counters, focus rings,
   filter pills) automatically renders in POS gold instead of CMB violet.
   Used on POS-operator-facing pages only — the CMB clinical surfaces
   (POSCertificates) deliberately stay on the global primary. */
.pos-themed {
  --color-primary: #BD982F;
  --color-primary-dark: #6E5A1B;
  --color-primary-light: #D4B85B;
}

/* ─── WebsitePages ──────────────────────────── */

/* Toast notification */
.toast-notification {
  position: fixed;
  top: 1rem;
  right: 1rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.toast-notification--success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.toast-notification--error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
.toast-notification__close {
  margin-left: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
}

/* Tab bar */
.wp-tab-bar {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.wp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-light);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.wp-tab--active {
  font-weight: 600;
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.wp-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: #e5e7eb;
  color: #6b7280;
}
.wp-tab--active .wp-tab__count {
  background: var(--color-primary);
  color: #fff;
}

/* View mode toggle */
.wp-view-toggle {
  display: flex;
  gap: 2px;
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px;
}
.wp-view-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  background: transparent;
  color: #6b7280;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: none;
}
.wp-view-btn--active {
  background: white;
  color: var(--color-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Toolbar row */
.wp-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Scan button */
.wp-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  cursor: pointer;
}
.wp-scan-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Publish / Unpublish buttons */
.wp-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
}
.wp-publish-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.wp-publish-btn--busy {
  min-width: 100px;
}
.wp-unpublish-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #dc2626;
  cursor: pointer;
  background: transparent;
  color: #dc2626;
}
.wp-unpublish-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.wp-unpublish-btn--busy {
  min-width: 100px;
}

/* Type badge (inline colored label) */
.wp-type-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Status badge */
.wp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* SEO score pill */
.wp-seo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Name column */
.wp-name-label {
  font-weight: 500;
  text-transform: capitalize;
}
.wp-name-path {
  font-size: 0.75rem;
  color: var(--color-text-light);
  background: transparent;
}

/* Scan modal */
.wp-scan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.wp-scan-stat {
  padding: 0.75rem;
  border-radius: 8px;
  text-align: center;
}
.wp-scan-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
}
.wp-scan-stat__label {
  font-size: 0.6875rem;
}
.wp-scan-stat--new { background: #f0fdf4; }
.wp-scan-stat--new .wp-scan-stat__value,
.wp-scan-stat--new .wp-scan-stat__label { color: #166534; }
.wp-scan-stat--stale { background: #fef3c7; }
.wp-scan-stat--stale .wp-scan-stat__value,
.wp-scan-stat--stale .wp-scan-stat__label { color: #92400e; }
.wp-scan-stat--match { background: #f0f9ff; }
.wp-scan-stat--match .wp-scan-stat__value,
.wp-scan-stat--match .wp-scan-stat__label { color: #0369a1; }
.wp-scan-stat--dynamic { background: #faf5ff; }
.wp-scan-stat--dynamic .wp-scan-stat__value,
.wp-scan-stat--dynamic .wp-scan-stat__label { color: #7c3aed; }

/* Scan section action buttons */
.wp-scan-add-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: #166534;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.wp-scan-add-btn:disabled { cursor: not-allowed; }
.wp-scan-remove-btn {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.wp-scan-remove-btn:disabled { cursor: not-allowed; }

/* Scan list containers */
.wp-scan-list {
  max-height: 150px;
  overflow: auto;
  border-radius: 6px;
  padding: 0.5rem;
}
.wp-scan-list--new { background: #f9fafb; }
.wp-scan-list--stale { background: #fffbeb; }
.wp-scan-list--dynamic { background: #faf5ff; max-height: 200px; margin-top: 0.5rem; }
.wp-scan-list__item {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  font-family: monospace;
}
.wp-scan-list__item--new { color: #166534; }
.wp-scan-list__item--stale { color: #92400e; }
.wp-scan-list__item--dynamic { color: #7c3aed; }

/* Scan section headers */
.wp-scan-section { margin-bottom: 1.5rem; }
.wp-scan-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.wp-scan-section__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.wp-scan-section__title--new { color: #166534; }
.wp-scan-section__title--stale { color: #92400e; }

/* Dynamic pages summary */
.wp-scan-dynamic-summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: #7c3aed;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: #faf5ff;
  border-radius: 6px;
}

/* Scan sync message */
.wp-scan-sync {
  text-align: center;
  padding: 2rem;
  background: #f0fdf4;
  border-radius: 8px;
  color: #166534;
}
.wp-scan-sync__detail {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

/* Scan info footer */
.wp-scan-info {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 0.6875rem;
  color: #6b7280;
}

/* Scan error */
.wp-scan-error {
  padding: 1rem;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Section title style (used in detail panels) */
.wp-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Field display box */
.wp-field-box {
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border-radius: 4px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Helper link styles */
.wp-link {
  color: var(--color-primary);
  text-decoration: none;
}
.wp-dash {
  color: var(--color-text-light);
}

/* Deploying status label */
.wp-deploying-label {
  font-size: 0.65rem;
  color: var(--color-text-light);
}

/* =============================================================================
 * PREMIUM DESIGN SYSTEM — Added 2026-03-07
 * Foundation classes for consistent, polished UI across all pages.
 * ============================================================================= */

/* --- Alpha Tokens --- */
:root {
  --color-primary-alpha-5: rgba(119, 44, 187, 0.05);
  --color-primary-alpha-8: rgba(119, 44, 187, 0.08);
  --color-primary-alpha-10: rgba(119, 44, 187, 0.1);
  --color-primary-alpha-15: rgba(119, 44, 187, 0.15);
  --color-primary-alpha-20: rgba(119, 44, 187, 0.2);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 8px 30px rgba(0, 0, 0, 0.12);
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

/* --- Flex Utilities --- */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* --- Spacing Utilities --- */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* --- Font Utilities --- */
.font-mono { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }

/* --- Detail Page Layout --- */
.detail-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.detail-page-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl);
}

.detail-header {
  margin-bottom: var(--space-xl);
}

.detail-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.detail-header h1 {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.detail-header-subtitle {
  font-size: var(--font-sm);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

.detail-header-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.detail-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.detail-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.detail-meta-item strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- Premium Card --- */
.premium-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.premium-card-header {
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.premium-card-header h3 {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.premium-card-body {
  padding: var(--space-xl);
}

.premium-card-body--compact {
  padding: var(--space-lg);
}

.premium-card-footer {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

/* --- Data Grid (for detail views) --- */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.data-grid-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.data-grid-item:nth-child(odd) {
  padding-right: var(--space-xl);
}

.data-grid-item:nth-child(even) {
  padding-left: var(--space-xl);
  border-left: 1px solid var(--color-border);
}

.data-grid-label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-xs);
}

.data-grid-value {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-text);
}

.data-grid-full {
  grid-column: 1 / -1;
  padding-left: 0 !important;
  border-left: none !important;
}

/* --- Premium Table --- */
.premium-table {
  width: 100%;
  border-collapse: collapse;
}

.premium-table th {
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--color-border);
  background: var(--color-bg);
}

.premium-table td {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.premium-table tbody tr:hover {
  background: var(--color-primary-alpha-5);
}

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

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

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

.premium-table tfoot td {
  padding: var(--space-md) var(--space-lg);
  font-weight: 600;
  border-top: 2px solid var(--color-border);
  border-bottom: none;
}

/* --- Status Pills (compact inline badges) --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.status-pill--draft { background: #f1f5f9; color: #475569; }
.status-pill--pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-pill--sent { background: var(--color-info-bg); color: var(--color-info-text); }
.status-pill--confirmed { background: var(--color-info-bg); color: var(--color-info-text); }
.status-pill--paid { background: var(--color-success-bg); color: var(--color-success-text); }
.status-pill--completed { background: var(--color-success-bg); color: var(--color-success-text); }
.status-pill--overdue { background: var(--color-error-bg); color: var(--color-error-text); }
.status-pill--viewed { background: #ede9fe; color: #7c3aed; }
.status-pill--partial { background: var(--color-warning-bg); color: var(--color-warning-text); }
.status-pill--cancelled { background: #f1f5f9; color: #64748b; }
.status-pill--voided { background: #f1f5f9; color: #64748b; }
.status-pill--active { background: var(--color-success-bg); color: var(--color-success-text); }
.status-pill--in_progress { background: var(--color-info-bg); color: var(--color-info-text); }

.status-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Dropdown Menu --- */
.dropdown {
  position: relative;
  display: inline-block;
}

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

.dropdown-menu--top {
  bottom: 100%;
  margin-bottom: var(--space-xs);
}

.dropdown-menu--bottom {
  top: 100%;
  margin-top: var(--space-xs);
}

.dropdown-menu--right {
  right: 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-sm);
  color: var(--color-text);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--color-primary-alpha-5);
}

.dropdown-item--danger {
  color: var(--color-error);
}

.dropdown-item--danger:hover {
  background: var(--color-error-bg);
}

.dropdown-divider {
  border-top: 1px solid var(--color-border);
  margin: var(--space-xs) 0;
}

/* --- Alert Banners (polished) --- */
.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  font-size: var(--font-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.alert-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.alert-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.alert-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-danger {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* --- Notes/Highlight Box --- */
.highlight-box {
  padding: var(--space-lg);
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.highlight-box--primary {
  background: var(--color-primary-alpha-5);
  border-color: var(--color-primary-alpha-15);
}

.highlight-box--warning {
  background: var(--color-warning-bg);
  border-color: rgba(245, 158, 11, 0.3);
}

/* --- Totals Container --- */
.totals-container {
  max-width: 280px;
  margin-left: auto;
}

@media (max-width: 768px) {
  .totals-container {
    max-width: 100%;
  }
}

/* --- Totals Row (for invoices, service logs) --- */
.totals-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  font-size: var(--font-sm);
}

.totals-row--grand {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--color-text);
  padding-top: var(--space-md);
  margin-top: var(--space-sm);
  border-top: 2px solid var(--color-text);
}

.totals-label {
  color: var(--color-text-light);
}

.totals-value {
  font-weight: 600;
  color: var(--color-text);
}

.totals-value--overdue {
  color: var(--color-error);
}

.totals-value--paid {
  color: var(--color-success);
}

/* --- Timeline/Activity --- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.timeline-item {
  display: flex;
  gap: var(--space-md);
  font-size: var(--font-sm);
}

.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
  margin-top: 6px;
}

.timeline-dot--success { background: var(--color-success); }
.timeline-dot--warning { background: var(--color-warning); }
.timeline-dot--error { background: var(--color-error); }
.timeline-dot--primary { background: var(--color-primary); }

.timeline-content {
  flex: 1;
}

.timeline-date {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/* --- Empty State (polished) --- */
.empty-state {
  text-align: center;
  padding: var(--space-xxl) var(--space-xl);
  color: var(--color-text-light);
}

.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.empty-state-text {
  font-size: var(--font-sm);
  max-width: 400px;
  margin: 0 auto var(--space-lg);
}

/* --- Back Link --- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--color-text-light);
  text-decoration: none;
  margin-bottom: var(--space-lg);
  transition: color var(--transition-fast);
}

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

/* --- Reference Code (monospace pill) --- */
.ref-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--color-primary-alpha-8);
  color: var(--color-primary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* --- Overdue/Due date indicators --- */
.due-date { font-size: var(--font-sm); }
.due-date--overdue { color: var(--color-error); font-weight: 600; }
.due-date--upcoming { color: var(--color-warning-text); }
.due-date--paid { color: var(--color-success); }

/* --- Inline key-value (horizontal) --- */
.kv-inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-sm);
}

.kv-label {
  color: var(--color-text-light);
}

.kv-value {
  font-weight: 500;
  color: var(--color-text);
}

/* --- Divider --- */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

.divider--sm {
  margin: var(--space-lg) 0;
}

/* =================================================================
   MOBILE UX UPLIFT — Phase 1
   Fixes inline-style overrides that break responsive layouts.
   These rules use !important ONLY where inline styles must be
   beaten at mobile breakpoints. Do not add !important elsewhere.
   ================================================================= */

/* --- 1. Modal inline maxWidth override ---
   Many modals set style={{ maxWidth: '640px' }} etc. which overrides
   the CSS .modal max-width rule on mobile. Force full-width below 768px. */
@media (max-width: 768px) {
  .modal[style*="maxWidth"],
  .modal[style*="max-width"],
  .modal-overlay > div[style*="maxWidth"],
  .modal-overlay > div[style*="max-width"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --- 2. Detail page grid: single-column on mobile ---
   Detail pages (Invoice, Customer, ServiceLog) hardcode
   gridColumn: '1' / '2' inline. Override to auto-flow. */
@media (max-width: 768px) {
  .data-grid {
    grid-template-columns: 1fr !important;
  }

  .data-grid-item:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }

  .data-grid-item:nth-child(odd) {
    padding-right: 0;
  }

  /* Beat inline gridColumn styles */
  .premium-card[style*="gridColumn"],
  .premium-card[style*="grid-column"],
  div[style*="gridColumn"],
  div[style*="grid-column"] {
    grid-column: auto !important;
  }
}

/* --- 3. Detail header actions: wrap on mobile ---
   InvoiceDetailPage, ServiceLogDetailPage have 4-5 buttons
   in .detail-header-actions that overflow at 375px. */
@media (max-width: 768px) {
  .detail-header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-header-actions {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .detail-header-actions .btn {
    flex: 1 1 calc(50% - var(--space-sm));
    min-height: 44px;
    font-size: var(--font-sm);
    justify-content: center;
  }
}

/* --- 4. Premium table: horizontal scroll on mobile ---
   Tables inside premium-card overflow on narrow screens.
   .premium-card itself becomes scrollable so detail pages where the
   table is a direct child (Invoice, Customer, ServiceLog, BookingView)
   still get horizontal scroll without needing a body wrapper. */
@media (max-width: 768px) {
  .premium-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .premium-card-body {
    padding: var(--space-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .premium-table {
    min-width: 480px;
  }

  .premium-table th,
  .premium-table td {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-xs);
    white-space: nowrap;
  }
}

/* --- 5. Action icon touch targets ---
   Ensure all .action-icon elements meet 44px minimum. */
@media (max-width: 768px) {
  .action-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- 6. Platform config: override inline maxWidth ---
   PlatformConfigPage sets style={{ maxWidth: '960px' }} inline. */
@media (max-width: 768px) {
  .detail-page[style*="maxWidth"],
  .detail-page[style*="max-width"],
  .detail-page-wide[style*="maxWidth"],
  .detail-page-wide[style*="max-width"] {
    max-width: 100% !important;
    padding: var(--space-md) !important;
  }

  /* Force 2-column grids to single column on mobile */
  div[style*="gridTemplateColumns: '1fr 1fr'"],
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- 7. Day toggle buttons: responsive sizing ---
   MyAvailability, BookingSettings use fixed 48px day buttons
   that overflow at 375px (7 * 48 + gaps > 375). */
@media (max-width: 768px) {
  .day-toggle {
    min-width: 0;
    flex: 1 1 0;
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-xs);
  }
}

/* --- 8. Highlight box / totals box: responsive width ---
   ServiceLogDetailPage sets maxWidth: '280px' inline on totals. */
@media (max-width: 768px) {
  .highlight-box[style*="maxWidth"],
  .highlight-box[style*="max-width"],
  div[style*="maxWidth: '280px'"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --- 9. Detail page spacing on mobile --- */
@media (max-width: 768px) {
  .detail-page,
  .detail-page-wide {
    padding: var(--space-md);
  }
}

/* --- 10. Stats / summary grids on mobile ---
   Dashboard uses repeat(auto-fit, minmax(100px, 1fr)) which
   gets too cramped. Ensure minimum 2 columns. */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 3-column grids to 1-column on extra small */
  div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* --- 11. Card: horizontal scroll on mobile ---
   Mirrors the .premium-card fix in Section 4. Tables sitting as
   direct children of .card (or inside .card-body, or wrapped in
   the undefined .data-table-wrapper) have their right-edge columns
   clipped by .card { overflow: hidden } on phones. Allow horizontal
   scroll on mobile so all columns are reachable. */
@media (max-width: 768px) {
  .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =================================================================
   CALENDAR VIEWS — Phase 4
   CSS classes for DayView / WeekView time-grid calendars.
   Dynamic positioning (top/height/left/width) stays inline.
   Everything else uses these classes.
   ================================================================= */

/* --- Time grid structural --- */
.cal-time-grid {
  display: flex;
}

.cal-time-labels {
  flex-shrink: 0;
  width: 80px;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
}

.cal-time-label {
  height: 80px;
  padding: var(--space-md) var(--space-sm);
  font-size: var(--font-sm);
  color: var(--color-text-light);
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}

.cal-events-col {
  flex: 1;
  position: relative;
}

.cal-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--color-border);
  pointer-events: none;
}

.cal-avail-slot {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--color-success-bg);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* --- Event cards (shared day + week) --- */
.cal-event {
  position: absolute;
  border-radius: var(--radius-sm);
  overflow: hidden;
  z-index: 2;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.cal-event-block {
  position: absolute;
  border-radius: var(--radius-sm);
  overflow: hidden;
  z-index: 1;
}

.cal-event-time {
  font-weight: 600;
  line-height: 1.2;
}

.cal-event-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cal-badge-territory {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  color: #374151;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
}

.cal-badge-operator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cal-badge-initials {
  background: var(--color-primary-bg, #f3e8ff);
  color: var(--color-primary);
  border-radius: 50%;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-badge-status {
  font-size: 0.6rem;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 600;
}

/* --- Week view day headers --- */
.cal-week-scroll {
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cal-week-grid {
  display: flex;
  min-width: 800px;
}

.cal-week-day-col {
  flex: 1;
  min-width: 100px;
  border-left: 1px solid var(--color-border);
}

.cal-day-header {
  height: 60px;
  padding: var(--space-sm);
  text-align: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cal-day-header--today {
  font-weight: 600;
  color: var(--color-primary);
}

.cal-day-header-weekday {
  font-size: 0.75rem;
}

.cal-day-header-date {
  font-size: 1rem;
}

.cal-day-header-count {
  font-size: 0.65rem;
  color: var(--color-text-light);
}

/* --- Day view specific --- */
.cal-day-scroll {
  padding: 0;
  overflow-y: auto;
  max-height: 600px;
}

.cal-day-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--color-border);
}

.cal-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: var(--font-sm);
}

.cal-mobile-hint {
  text-align: center;
  padding: var(--space-sm);
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

/* --- Day view: desktop sizes (default) --- */
:root {
  --cal-hour-h: 80px;
  --cal-time-w: 80px;
  --cal-event-pad: 8px;
  --cal-event-font: var(--font-sm);
  --cal-event-name-font: 0.85rem;
  --cal-badge-initials-size: 18px;
  --cal-badge-initials-font: 0.55rem;
  /* Week-specific */
  --cal-week-hour-h: 55px;
  --cal-week-time-w: 60px;
  --cal-week-min-w: 800px;
  --cal-week-day-min-w: 100px;
  --cal-week-header-h: 60px;
  --cal-week-event-font: 0.65rem;
  --cal-week-event-pad: 3px 4px;
  --cal-week-badge-size: 14px;
  --cal-week-badge-font: 0.45rem;
}

/* --- Mobile overrides --- */
@media (max-width: 768px) {
  :root {
    --cal-hour-h: 60px;
    --cal-time-w: 50px;
    --cal-event-pad: 6px 8px;
    --cal-event-font: 0.85rem;
    --cal-event-name-font: 0.8rem;
    --cal-badge-initials-size: 18px;
    --cal-badge-initials-font: 0.55rem;
    /* Week */
    --cal-week-hour-h: 40px;
    --cal-week-time-w: 40px;
    --cal-week-min-w: 600px;
    --cal-week-day-min-w: 80px;
    --cal-week-header-h: 50px;
    --cal-week-event-font: 0.55rem;
    --cal-week-event-pad: 2px 3px;
    --cal-week-badge-size: 14px;
    --cal-week-badge-font: 0.45rem;
  }

  .cal-time-labels {
    width: var(--cal-time-w);
  }

  .cal-time-label {
    height: var(--cal-hour-h);
    padding: var(--space-sm) var(--space-xs);
    font-size: 0.7rem;
  }

  .cal-day-scroll {
    max-height: calc(100vh - 280px);
  }

  .cal-week-grid {
    min-width: var(--cal-week-min-w);
  }

  .cal-week-day-col {
    min-width: var(--cal-week-day-min-w);
  }

  .cal-day-header {
    height: var(--cal-week-header-h);
    padding: var(--space-xs);
    cursor: pointer;
  }

  .cal-day-header-weekday {
    font-size: 0.65rem;
  }

  .cal-day-header-date {
    font-size: 0.85rem;
  }

  .cal-day-header-count {
    font-size: 0.55rem;
  }

  .cal-event {
    padding: var(--cal-event-pad);
    gap: 2px;
  }

  .cal-event-time {
    font-size: var(--cal-event-font);
  }

  .cal-event-name {
    font-size: var(--cal-event-name-font);
  }

  .cal-badge-initials {
    width: var(--cal-badge-initials-size);
    height: var(--cal-badge-initials-size);
    font-size: var(--cal-badge-initials-font);
  }
}

/* ============================================================
   Update Banner — deploy detection
   ============================================================ */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 1px solid #fbbf24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.update-banner-btn {
  background: #f59e0b;
  color: #fff;
  border: none;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.update-banner-btn:hover {
  background: #d97706;
}

/* ============================================
   TRAINING CONTENT V2 — Library + Workspace
   Used by TrainingContentV2.tsx (prototype page)
   ============================================ */

.tcv2-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tcv2-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.tcv2-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tcv2-main-title {
  margin: 0;
  font-size: var(--font-lg);
  color: var(--color-text);
  font-weight: 600;
}

/* Tag filter popover */
.tcv2-tagfilter {
  position: relative;
}

.tcv2-tagfilter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.tcv2-tagfilter-btn-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tcv2-tagfilter-chevron {
  font-size: var(--font-xs);
  opacity: 0.6;
}

.tcv2-tagfilter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-sm);
  line-height: 1;
  cursor: pointer;
}

.tcv2-tagfilter-clear:hover {
  background: var(--color-border);
}

.tcv2-tagfilter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.tcv2-tagfilter-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 11;
  min-width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
}

.tcv2-tagfilter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-text);
  text-align: left;
}

.tcv2-tagfilter-item:hover {
  background: var(--color-bg);
}

.tcv2-tagfilter-item.active {
  background: var(--color-info-bg);
  color: var(--color-primary);
  font-weight: 500;
}

.tcv2-tagfilter-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.tcv2-tagfilter-count {
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.tcv2-tagfilter-item.active .tcv2-tagfilter-count {
  color: var(--color-primary);
}

.tcv2-tagfilter-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xs);
  padding: var(--space-xs);
  display: flex;
  justify-content: flex-end;
}

.tcv2-rail-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Reuse .modal-tabs outside a modal — remove the modal-style padding */
.tcv2-status-tabs {
  padding: 0;
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.tcv2-status-tabs .modal-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.tcv2-filter-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.tcv2-search {
  flex: 1;
  max-width: none;
}

.tcv2-public-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-sm);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}

.tcv2-public-toggle input[type="checkbox"] {
  margin: 0;
}

.tcv2-public-toggle-disabled {
  color: var(--color-text-light);
  cursor: not-allowed;
}

.tcv2-public-toggle-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.tcv2-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tcv2-empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-xxl) var(--space-lg);
  font-size: var(--font-sm);
}

.tcv2-empty-inline {
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  text-align: left;
}

.tcv2-row {
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.tcv2-row:hover {
  border-color: var(--color-primary-light);
}

.tcv2-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.tcv2-row-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: var(--font-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcv2-row-objective {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--space-xs);
}

.tcv2-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.tcv2-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  min-width: 0;
}

.tcv2-tag-chip-btn {
  border: none;
  cursor: pointer;
  font: inherit;
}

.tcv2-tag-chip-btn:hover {
  opacity: 0.85;
}

.tcv2-public-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-xs);
  font-weight: 500;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-radius: 12px;
}

.tcv2-tag-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: var(--font-xs);
  font-weight: 500;
  white-space: nowrap;
}

/* Detail modal (replaces the old right-side slide-over) */
.tcv2-detail-modal.modal {
  max-width: 960px;
}

.tcv2-detail-header {
  gap: var(--space-md);
  align-items: flex-start;
}

.tcv2-detail-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tcv2-detail-heading h2 {
  margin: 0;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcv2-detail-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.tcv2-detail-close:hover {
  background: var(--color-border);
  border-color: var(--color-text-light);
  color: var(--color-text);
}

.tcv2-detail-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tcv2-panel-code {
  font-family: 'Courier New', monospace;
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.tcv2-detail-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.tcv2-detail-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tcv2-toolbar-label {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

.tcv2-status-select {
  width: 150px;
}

.tcv2-detail-body {
  padding: var(--space-lg);
}

/* Mobile: detail modal takes full screen, controls stack naturally */
@media (max-width: 640px) {
  .tcv2-detail-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .tcv2-detail-modal.modal {
    max-width: 100%;
    width: 100%;
    /* 100dvh respects the browser's dynamic chrome (URL bar) — 100vh would hide the top under it on iOS Safari */
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .tcv2-detail-modal .modal-header {
    padding: var(--space-md);
    /* Respect iOS notch / status bar on devices that need it */
    padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
    position: sticky;
    top: 0;
    background: var(--color-white);
    z-index: 2;
  }
  .tcv2-detail-toolbar {
    padding: var(--space-sm) var(--space-md);
  }
  .tcv2-detail-body {
    padding: var(--space-md);
  }
  .tcv2-status-select {
    width: auto;
    min-width: 120px;
  }
  .tcv2-detail-modal .modal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .tcv2-detail-modal .modal-tab {
    flex-shrink: 0;
  }
}

/* Main page — mobile layout */
@media (max-width: 640px) {
  .tcv2-page-header {
    align-items: stretch;
  }
  .tcv2-page-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .tcv2-status-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .tcv2-status-tabs .modal-tab {
    flex-shrink: 0;
  }
  .tcv2-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .tcv2-tagfilter-menu {
    right: 0;
    left: auto;
    max-width: calc(100vw - var(--space-lg));
  }
}

.tcv2-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tcv2-tag-toggle {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  border-radius: 12px;
  font-size: var(--font-xs);
  cursor: pointer;
  color: var(--color-text);
}

.tcv2-tag-toggle:hover {
  border-color: var(--color-primary-light);
}

.tcv2-panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.tcv2-panel-hint {
  font-size: var(--font-sm);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.tcv2-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  font-size: var(--font-sm);
  background: var(--color-white);
}

.tcv2-attach-box {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.tcv2-attach-row {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.tcv2-attach-row .form-select {
  flex: 1;
}

.tcv2-history-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  font-size: var(--font-sm);
}

.tcv2-history-row span:first-child {
  color: var(--color-text-light);
}

.tcv2-history-note {
  font-style: italic;
  margin-top: var(--space-md);
  color: var(--color-text-light);
}

/* Tag manager modal */
.tcv2-tag-manager-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.tcv2-tag-manager-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  flex-wrap: wrap;
}

.tcv2-tag-manager-row .form-input {
  max-width: 180px;
}

.tcv2-tag-manager-key {
  font-family: 'Courier New', monospace;
  font-size: var(--font-xs);
  color: var(--color-text-light);
}

.tcv2-tag-manager-usage {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  margin-left: auto;
}

.tcv2-tag-manager-system {
  font-size: var(--font-xs);
  color: var(--color-text-light);
  font-style: italic;
  padding: var(--space-xs) var(--space-sm);
}

.tcv2-tag-manager-new {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* ============================================
   COLLAPSIBLE FORM SECTION
   Shared pattern for optional sections inside forms/panels.
   Used by both the legacy TrainingContent modal and the V2 slide-over.
   ============================================ */
.form-section-collapsible {
  margin: var(--space-md) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  overflow: hidden;
}

.form-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  transition: background 0.15s;
}

.form-section-toggle:hover {
  background: var(--color-border);
}

.form-section-toggle > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.form-section-content {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
}

.form-section-content > *:last-child {
  margin-bottom: 0;
}

/* Media list inside Details panel */
.tcv2-media-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tcv2-media-row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.tcv2-media-thumb {
  width: 72px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tcv2-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcv2-media-thumb-placeholder {
  font-size: var(--font-lg);
  color: var(--color-text-light);
}

.tcv2-media-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tcv2-media-url {
  font-size: var(--font-xs);
  color: var(--color-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcv2-media-url:hover {
  text-decoration: underline;
}

.tcv2-media-caption {
  width: 100%;
  font-size: var(--font-sm);
}

.tcv2-media-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-end;
  flex-shrink: 0;
}

.tcv2-media-add {
  padding: var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.tcv2-media-add-buttons {
  margin-bottom: var(--space-sm);
}

.tcv2-media-add-url {
  display: flex;
  gap: var(--space-xs);
}

.tcv2-media-add-url .form-input {
  flex: 1;
}

/* Content Library picker modal grid */
.tcv2-lib-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tcv2-lib-filters .form-input {
  flex: 1;
}

.tcv2-lib-filters .form-select {
  width: 180px;
}

.tcv2-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.tcv2-lib-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}

.tcv2-lib-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
}

.tcv2-lib-thumb {
  height: 110px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: var(--font-sm);
}

.tcv2-lib-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcv2-lib-title {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tcv2-lib-type {
  padding: 0 var(--space-sm) var(--space-xs);
  font-size: var(--font-xs);
  color: var(--color-text-light);
  text-transform: capitalize;
}