@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* ============================================
     Golden Ratio & Fibonacci Spacing System
     Based on φ (phi) = 1.618033988749895
     ============================================ */

  /* Container using Fibonacci vertical rhythm */
  .container {
    @apply w-full max-w-7xl mx-auto;
    padding-left: 21px;   /* fib-3 */
    padding-right: 21px;  /* fib-3 */
    padding-top: 34px;    /* fib-4 */
    padding-bottom: 34px; /* fib-4 */
  }

  @media (min-width: 768px) {
    .container {
      padding-left: 34px;   /* fib-4 */
      padding-right: 34px;  /* fib-4 */
      padding-top: 55px;    /* fib-5 */
      padding-bottom: 55px; /* fib-5 */
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-top: 89px;    /* fib-6 */
      padding-bottom: 89px; /* fib-6 */
    }
  }

  .container.-lg {
    @apply w-full max-w-7xl mx-auto;
    padding-left: 21px;
    padding-right: 21px;
    padding-top: 89px;    /* fib-6 */
    padding-bottom: 89px;
  }

  @media (min-width: 768px) {
    .container.-lg {
      padding-left: 34px;
      padding-right: 34px;
      padding-top: 144px;   /* fib-7 */
      padding-bottom: 144px;
    }
  }

  /* Golden ratio card proportions */
  .card-golden {
    padding: 21px;  /* fib-3 */
  }

  @media (min-width: 768px) {
    .card-golden {
      padding: 34px 21px;  /* fib-4 vertical, fib-3 horizontal (1.618 ratio) */
    }
  }

  /* Fibonacci gap utilities */
  .gap-fib {
    gap: 21px;  /* fib-3 - natural feeling gap */
  }

  .gap-fib-lg {
    gap: 34px;  /* fib-4 */
  }

  /* Golden section spacing - asymmetric feels more balanced */
  .section-golden {
    padding-top: 55px;     /* fib-5 */
    padding-bottom: 89px;  /* fib-6 - 1.618x larger */
  }

  @media (min-width: 768px) {
    .section-golden {
      padding-top: 89px;    /* fib-6 */
      padding-bottom: 144px; /* fib-7 - 1.618x larger */
    }
  }

  /* ============================================
     Semantic Fibonacci Spacing Utilities
     Use these in views for consistent spacing
     ============================================ */

  /* Page section padding - responsive Fibonacci scale */
  .fib-section-padding {
    @apply px-fib-3 py-fib-4;
  }
  @media (min-width: 768px) {
    .fib-section-padding {
      @apply px-fib-4 py-fib-5;
    }
  }

  /* Card internal padding */
  .fib-card-padding {
    @apply p-fib-3;
  }
  @media (min-width: 768px) {
    .fib-card-padding {
      @apply p-fib-4;
    }
  }

  /* Form field spacing */
  .fib-form-spacing {
    @apply space-y-fib-3;
  }

  /* Table cell padding */
  .fib-table-cell {
    @apply px-fib-2 py-fib-2;
  }

  /* Button padding */
  .fib-btn-padding {
    @apply px-fib-2 py-fib-1;
  }

  /* Navigation item spacing */
  .fib-nav-spacing {
    @apply space-y-fib-2;
  }

  /* Header/topbar padding */
  .fib-header-padding {
    @apply px-fib-3 py-fib-2;
  }

  /* Small content gaps */
  .fib-gap-sm {
    @apply gap-fib-1;
  }

  /* Medium content gaps */
  .fib-gap-md {
    @apply gap-fib-2;
  }

  /* Large content gaps */
  .fib-gap-lg {
    @apply gap-fib-3;
  }

  /* Stack spacing (vertical) */
  .fib-stack-sm {
    @apply space-y-fib-1;
  }

  .fib-stack-md {
    @apply space-y-fib-2;
  }

  .fib-stack-lg {
    @apply space-y-fib-3;
  }

  /* Inline spacing (horizontal) */
  .fib-inline-sm {
    @apply space-x-fib-1;
  }

  .fib-inline-md {
    @apply space-x-fib-2;
  }

  .fib-inline-lg {
    @apply space-x-fib-3;
  }

  .link {
    @apply text-gray-700 hover:text-gray-800 underline hover:no-underline;
  }

  /* Form validation error styles */
  .field_with_errors > input,
  .field_with_errors > textarea,
  .field_with_errors > select {
    @apply border-rose-400;
  }

  /* API Documentation prose styles */
  .prose code {
    @apply bg-gray-100 rounded px-1 py-0.5 text-sm font-mono;
  }
  .prose pre {
    @apply bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto;
  }
  .prose pre code {
    @apply bg-transparent text-gray-100 p-0;
  }
}

/* Print styles - hide non-essential elements when printing */
@media print {
  .print\:hidden {
    display: none !important;
  }
}

/* ============================================
   Admin Dark Theme Styles (CommishVault-inspired)
   ============================================ */

/* ============================================
   CSS Custom Properties for Admin Theme
   Based on Package_Save_Dark_Mode_Design_Ethos.md
   Science-based eye comfort for low-light environments
   ============================================ */
body.admin-dark {
  /* Backgrounds - Match main app's Mirage/Navy card palette */
  --ps-bg-primary: #1a1d24;      /* Page background - matches main app */
  --ps-bg-secondary: #1e293b;    /* Cards, panels - Mirage blue */
  --ps-bg-card: #1e293b;         /* Card surfaces - Mirage blue (matches main app) */
  --ps-bg-sidebar: #15181e;      /* Sidebar - matches main app header */
  --ps-bg-elevated: #2d333d;     /* Hover states, dropdowns */

  /* Text - Match main app text colors */
  --ps-text-primary: #e8edf3;    /* Match main app --app-text-primary */
  --ps-text-secondary: #a8b3c0;  /* Match main app --app-text-secondary */
  --ps-text-muted: #6b7685;      /* Match main app --app-text-muted */

  /* Borders - Match main app borders */
  --ps-border-color: #3a4149;    /* Match main app --app-border-color */
  --ps-border-subtle: #3a4149;   /* Same for consistency */

  /* Accent Colors - Match main app teal */
  --ps-accent-primary: #4fd1b5;  /* Mint/teal accent - matches main app */
  --ps-accent-hover: #3ec4a8;    /* Hover state - matches main app */

  /* Semantic Colors - Muted versions */
  --ps-success: #86c09e;         /* Sage green - desaturated */
  --ps-success-bg: #1a2e28;
  --ps-warning: #d4a860;         /* Muted amber */
  --ps-warning-bg: #2e2614;
  --ps-danger: #d4a5a5;          /* Soft rose - not aggressive red */
  --ps-danger-bg: #2d1f1f;
  --ps-info: #7eb8d8;            /* Muted sky */
  --ps-info-bg: #1a2a38;

  /* Shadows - Subtle, low opacity */
  --ps-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ps-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ps-shadow-glow: 0 0 20px rgba(94, 234, 212, 0.15);

  /* Border radius */
  --ps-radius: 10px;
  --ps-radius-sm: 6px;
  --ps-radius-lg: 16px;

  /* Transitions */
  --ps-transition: 0.15s ease;
  --ps-hover-bg: #2d333d;  /* Card hover - matches main app */
  --ps-active-bg: #3d4a5c;

  color: var(--ps-text-muted);  /* Use muted for body text - easier on eyes */
  background-color: var(--ps-bg-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;  /* Minimum 14px for dark mode readability */
  line-height: 1.5;
  letter-spacing: 0.01em;  /* Improved character separation */
  -webkit-font-smoothing: antialiased;  /* Required for dark mode */
  -moz-osx-font-smoothing: grayscale;
}

body.admin-dark .main-content-area {
  background-color: var(--ps-bg-primary);
  @apply min-h-screen;
}

/* ============================================
   Admin Navigation Sidebar (Shopify-inspired)
   ============================================ */

body.admin-dark .navigation {
  background-color: var(--ps-bg-sidebar);
  border-right: 1px solid var(--ps-border-color);
  min-width: 220px;
  padding: 13px 0;  /* fib-2 vertical */
}

body.admin-dark .navigation__link {
  display: flex;
  align-items: center;
  gap: 8px;  /* fib-1 */
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  margin: 2px 8px;  /* small margin, fib-1 horizontal */
  height: 34px;  /* fib-4 */
  color: var(--ps-text-muted);
  text-decoration: none;
  transition: background var(--ps-transition), color var(--ps-transition);
  border-radius: 4px;
  font-size: 0.875rem;  /* 14px minimum for dark mode readability */
  font-weight: 400;
  position: relative;
}

body.admin-dark .navigation__link:hover {
  color: var(--ps-text-secondary);
  background: var(--ps-hover-bg);
}

body.admin-dark .navigation__link--active {
  color: var(--ps-text-primary);
  background: var(--ps-active-bg);
  font-weight: 500;
}

body.admin-dark .navigation__link--active::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.25rem;
  background: var(--ps-accent-primary);
  border-radius: 2px;
}

body.admin-dark .button--nav {
  color: var(--ps-text-secondary);
  border-color: var(--ps-border-color);
}

body.admin-dark .button--nav:hover {
  color: var(--ps-accent-primary);
}

/* ============================================
   Admin Header/Topbar
   ============================================ */

body.admin-dark .header {
  background-color: var(--ps-bg-sidebar);
  border-bottom: 1px solid var(--ps-border-color);
  height: 56px;
}

body.admin-dark .header__title {
  color: var(--ps-text-primary);
  font-weight: 700;
  font-size: 1.125rem;
}

body.admin-dark .header a {
  color: var(--ps-accent-primary);
  transition: color var(--ps-transition);
}

body.admin-dark .header a:hover {
  color: var(--ps-accent-hover);
}

/* ============================================
   Admin Cards (Clean, Minimal)
   ============================================ */

body.admin-dark .ps-card {
  background: var(--ps-bg-card);
  border: 1px solid var(--ps-border-color);
  border-radius: var(--ps-radius);
  padding: 21px;  /* fib-3 */
  transition: box-shadow var(--ps-transition);
}

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

body.admin-dark .ps-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;  /* fib-1 */
  margin-bottom: 13px;  /* fib-2 */
}

body.admin-dark .ps-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ps-text-primary);
  margin: 0;
  line-height: 1.4;
}

body.admin-dark .ps-card-subtitle {
  font-size: 0.8125rem;
  color: var(--ps-text-muted);
  margin-top: 0.125rem;
}

body.admin-dark .ps-card-body {
  font-size: 0.8125rem;
  color: var(--ps-text-secondary);
}

body.admin-dark .ps-card-footer {
  margin-top: 13px;  /* fib-2 */
  padding-top: 13px;  /* fib-2 */
  border-top: 1px solid var(--ps-border-color);
}

/* ============================================
   Admin Tables - Optimized for Readability
   ============================================ */

body.admin-dark .collection-field-table {
  background: #1e293b;  /* Mirage blue - matches main app cards */
  border: 1px solid #3d4a5c;  /* Navy card border - matches main app */
  border-radius: 0.625rem;  /* 10px - matches main app cards */
  overflow: hidden;
}

body.admin-dark .collection-field-table th {
  background: transparent;  /* Transparent to blend with card */
  color: var(--ps-text-muted);
  border-bottom: 1px solid #3d4a5c;  /* Navy card border */
  font-size: 13px;  /* fib-xs */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 8px 13px;  /* fib-1 fib-2 */
}

body.admin-dark .collection-field-table td {
  background: #1e293b;  /* Mirage blue - matches main app cards */
  color: var(--ps-text-secondary);  /* Slightly muted for body text */
  border-bottom: 1px solid #3d4a5c;  /* Navy card border */
  font-size: 13px;  /* fib-xs */
  padding: 13px 13px;  /* fib-2 fib-2 */
  line-height: 1.4;
}

/* Remove bottom border on last row */
body.admin-dark .collection-field-table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra striping for better row tracking
   Based on best practices: subtle difference, similar value colors
   Reference: https://ui-patterns.com/patterns/AlternatingRowColors */
body.admin-dark .collection-field-table tbody tr:nth-child(odd) td {
  background: #1e293b;  /* Mirage blue - matches main app cards */
}

body.admin-dark .collection-field-table tbody tr:nth-child(even) td {
  background: #1e293b;  /* Same for consistency - cleaner look */
}

body.admin-dark .collection-field-table tr:hover td,
body.admin-dark table.collection-field-table tbody tr:hover td,
body.admin-dark .main-content table tr:hover td,
body.admin-dark table tr:hover td,
.admin-dark table tr:hover td {
  background: #2d333d !important;  /* Card hover - matches main app */
  background-color: #2d333d !important;
}

/* Right-align numeric columns (Account Balance, amounts, etc.) */
body.admin-dark .collection-field-table td[data-field-type="number"],
body.admin-dark .collection-field-table th[data-field-type="number"],
body.admin-dark .cell-data--number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Bold the primary identifier (name column - usually 2nd column after ID) */
body.admin-dark .collection-field-table td:nth-child(2) a {
  font-weight: 600;
  color: var(--ps-text-primary) !important;
}

body.admin-dark .collection-field-table td:nth-child(2) a:hover {
  color: var(--ps-accent-primary) !important;
}

body.admin-dark .collection-field-table a,
body.admin-dark table a:not([data-turbo-method="delete"]):not([data-method="delete"]) {
  color: var(--ps-accent-primary) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--ps-transition);
}

body.admin-dark .collection-field-table a:hover,
body.admin-dark table a:not([data-turbo-method="delete"]):not([data-method="delete"]):hover {
  color: var(--ps-accent-hover) !important;
  text-decoration: underline;
}

/* Destroy/Delete links - muted by default, red on hover for safety */
body.admin-dark .collection-field-table a[data-turbo-method="delete"],
body.admin-dark .collection-field-table a[data-method="delete"],
body.admin-dark a[data-turbo-method="delete"],
body.admin-dark a[data-method="delete"] {
  color: var(--ps-text-muted) !important;  /* Muted gray - less prominent */
  font-weight: 400 !important;
  opacity: 0.7;
  transition: all 0.15s ease;
}

body.admin-dark .collection-field-table a[data-turbo-method="delete"]:hover,
body.admin-dark .collection-field-table a[data-method="delete"]:hover,
body.admin-dark a[data-turbo-method="delete"]:hover,
body.admin-dark a[data-method="delete"]:hover {
  color: var(--ps-danger) !important;  /* Red only on hover - clear warning */
  opacity: 1;
}

/* ============================================
   Admin Forms
   ============================================ */

body.admin-dark .field-unit {
  background: var(--ps-bg-card);
  color: var(--ps-text-primary);
}

body.admin-dark .field-unit__label {
  color: var(--ps-text-secondary);
  font-weight: 500;
  font-size: 0.8125rem;
}

body.admin-dark .field-unit__field input,
body.admin-dark .field-unit__field textarea,
body.admin-dark .field-unit__field select {
  background: var(--ps-bg-primary);
  color: var(--ps-text-primary);
  border: 1px solid var(--ps-border-color);
  border-radius: var(--ps-radius-sm);
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  font-size: 0.875rem;
  transition: border-color var(--ps-transition), box-shadow var(--ps-transition);
}

body.admin-dark .field-unit__field input:focus,
body.admin-dark .field-unit__field textarea:focus,
body.admin-dark .field-unit__field select:focus {
  outline: none;
  border-color: var(--ps-accent-primary);
  box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.15);
}

body.admin-dark .field-unit__field input::placeholder,
body.admin-dark .field-unit__field textarea::placeholder {
  color: var(--ps-text-muted);
}

/* ============================================
   Admin Buttons
   ============================================ */

body.admin-dark .button,
body.admin-dark .button--primary,
body.admin-dark button[type="submit"],
body.admin-dark a.button {
  background: var(--ps-accent-primary) !important;
  color: #1A202C !important;
  border: none !important;
  border-radius: var(--ps-radius-sm);
  padding: 8px 21px;  /* fib-1 vertical, fib-3 horizontal */
  font-weight: 600;
  font-size: 0.875rem;
  transition: background var(--ps-transition), transform var(--ps-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;  /* fib-1 */
  text-decoration: none;
}

body.admin-dark .button:hover,
body.admin-dark .button--primary:hover,
body.admin-dark button[type="submit"]:hover,
body.admin-dark a.button:hover {
  background: var(--ps-accent-hover) !important;
  transform: translateY(-1px);
}

body.admin-dark .button:active,
body.admin-dark button[type="submit"]:active {
  transform: translateY(0);
}

body.admin-dark .button--alt {
  background: transparent;
  color: var(--ps-accent-primary);
  border: 1px solid var(--ps-accent-primary);
}

body.admin-dark .button--alt:hover {
  background: var(--ps-accent-primary);
  color: #1A202C;
}

body.admin-dark .button--danger {
  background: var(--ps-danger);
  color: #1A202C;
}

body.admin-dark .button--danger:hover {
  background: #c99090;  /* Darker rose - not harsh red */
}

/* Small buttons */
body.admin-dark .ps-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;  /* fib-1 */
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--ps-radius-sm);
  text-decoration: none;
  transition: all var(--ps-transition);
}

body.admin-dark .ps-btn-sm.ps-btn-primary {
  background: var(--ps-accent-primary);
  color: #1A202C;
}

body.admin-dark .ps-btn-sm.ps-btn-primary:hover {
  background: var(--ps-accent-hover);
}

body.admin-dark .ps-btn-sm.ps-btn-secondary {
  background: transparent;
  color: var(--ps-text-secondary);
  border: 1px solid var(--ps-border-color);
}

body.admin-dark .ps-btn-sm.ps-btn-secondary:hover {
  background: var(--ps-hover-bg);
  color: var(--ps-text-primary);
  border-color: var(--ps-text-muted);
}

/* ============================================
   Admin Badges
   ============================================ */

body.admin-dark .ps-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
  line-height: 1.4;
}

body.admin-dark .ps-badge-success {
  background: rgba(72, 187, 120, 0.15);
  color: #68D391;
}

body.admin-dark .ps-badge-warning {
  background: rgba(236, 201, 75, 0.15);
  color: #F6E05E;
}

body.admin-dark .ps-badge-danger {
  background: rgba(212, 165, 165, 0.15);
  color: #d4a5a5;  /* Soft rose - same as --ps-danger */
}

body.admin-dark .ps-badge-info {
  background: rgba(79, 209, 197, 0.15);
  color: var(--ps-accent-primary);
}

body.admin-dark .ps-badge-neutral {
  background: var(--ps-hover-bg);
  color: var(--ps-text-secondary);
}

/* ============================================
   Admin Data Rows
   ============================================ */

body.admin-dark .ps-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;  /* fib-1 */
  font-size: 0.8125rem;
}

body.admin-dark .ps-data-row:not(:last-child) {
  border-bottom: 1px solid var(--ps-border-color);
}

body.admin-dark .ps-data-label {
  color: var(--ps-text-muted);
}

body.admin-dark .ps-data-value {
  color: var(--ps-text-primary);
  font-weight: 500;
}

/* ============================================
   Admin Progress Bar
   ============================================ */

body.admin-dark .ps-progress {
  height: 4px;
  background: var(--ps-border-color);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;  /* fib-1 */
}

body.admin-dark .ps-progress-bar {
  height: 100%;
  background: var(--ps-accent-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ============================================
   Admin Pagination
   ============================================ */

body.admin-dark .pagination {
  color: var(--ps-text-muted);
  font-size: 0.875rem;
}

body.admin-dark .pagination a {
  color: var(--ps-accent-primary);
  text-decoration: none;
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  border-radius: var(--ps-radius-sm);
  transition: background var(--ps-transition);
}

body.admin-dark .pagination a:hover {
  background: var(--ps-hover-bg);
  color: var(--ps-accent-hover);
}

body.admin-dark .pagination .current {
  color: var(--ps-text-primary);
  font-weight: 600;
  background: var(--ps-active-bg);
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  border-radius: var(--ps-radius-sm);
}

/* ============================================
   Admin Attributes Table (Show Pages)
   ============================================ */

body.admin-dark .attributes-table {
  background: var(--ps-bg-card);
  border: 1px solid var(--ps-border-color);
  border-radius: var(--ps-radius);
  overflow: hidden;
}

body.admin-dark .attributes-table th {
  background: var(--ps-bg-primary);
  color: var(--ps-text-muted);
  border-bottom: 1px solid var(--ps-border-color);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  padding: 13px 21px;  /* fib-2 vertical, fib-3 horizontal */
}

body.admin-dark .attributes-table td {
  color: var(--ps-text-primary);
  border-bottom: 1px solid var(--ps-border-color);
  padding: 13px 21px;  /* fib-2 vertical, fib-3 horizontal */
  font-size: 0.875rem;
}

/* ============================================
   Admin Search and Filters
   ============================================ */

body.admin-dark .search {
  background: #1e293b;  /* Mirage blue - matches main app cards */
  border: 1px solid #3d4a5c;
  border-radius: 0.625rem;  /* 10px - matches main app */
}

body.admin-dark .search__input {
  background: #1e293b;  /* Mirage blue */
  color: var(--ps-text-primary);
  border: 1px solid #3d4a5c;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

body.admin-dark .search__input::placeholder {
  color: var(--ps-text-muted);
}

body.admin-dark .search__input:focus {
  outline: none;
  border-color: var(--ps-accent-primary);
  box-shadow: 0 0 0 3px rgba(94, 234, 213, 0.2);
}

/* ============================================
   Admin Flash Messages
   ============================================ */

body.admin-dark .flashes {
  background: transparent;
}

body.admin-dark .flashes .alert,
body.admin-dark .flash-alert,
body.admin-dark .flash-warning,
body.admin-dark .flash-error {
  background: rgba(236, 201, 75, 0.1);
  border: 1px solid rgba(236, 201, 75, 0.3);
  color: #F6E05E;
  border-radius: var(--ps-radius-sm);
}

body.admin-dark .flashes .notice,
body.admin-dark .flash-notice,
body.admin-dark .flash-success {
  background: rgba(72, 187, 120, 0.1);
  border: 1px solid rgba(72, 187, 120, 0.3);
  color: #68D391;
  border-radius: var(--ps-radius-sm);
}

/* ============================================
   Admin Main Content Wrapper
   ============================================ */

body.admin-dark .main-content {
  background: var(--ps-bg-primary);
  padding: 21px;  /* fib-3 */
}

body.admin-dark .main-content__header {
  border-bottom: 1px solid var(--ps-border-color);
  padding-bottom: 13px;  /* fib-2 */
  margin-bottom: 21px;  /* fib-3 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.admin-dark .main-content__page-title {
  color: var(--ps-text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

/* ============================================
   Admin Links
   ============================================ */

body.admin-dark .ps-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ps-accent-primary);
  text-decoration: none;
  transition: color var(--ps-transition);
}

body.admin-dark .ps-link:hover {
  color: var(--ps-accent-hover);
  text-decoration: underline;
}

/* Override any remaining Administrate blue colors */
body.admin-dark a {
  color: var(--ps-accent-primary);
}

body.admin-dark a:hover {
  color: var(--ps-accent-hover);
}

/* Focus states - teal instead of blue */
body.admin-dark *:focus {
  outline-color: var(--ps-accent-primary) !important;
}

body.admin-dark input:focus,
body.admin-dark select:focus,
body.admin-dark textarea:focus,
body.admin-dark button:focus {
  box-shadow: 0 0 0 3px rgba(125, 212, 201, 0.3) !important;
  border-color: var(--ps-accent-primary) !important;
}

/* ============================================
   Section Headers
   ============================================ */

body.admin-dark .ps-section-header {
  display: flex;
  align-items: center;
  gap: 8px;  /* fib-1 */
  margin-bottom: 21px;  /* fib-3 */
  padding-bottom: 13px;  /* fib-2 */
  border-bottom: 1px solid var(--ps-border-color);
}

body.admin-dark .ps-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ps-text-primary);
  margin: 0;
}

/* ============================================
   Content Grid
   ============================================ */

body.admin-dark .ps-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 21px;  /* fib-3 */
}

@media (min-width: 768px) {
  body.admin-dark .ps-content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  body.admin-dark .ps-content-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   CommishVault-Style App Layout
   ============================================ */

body.admin-dark.ps-app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body.admin-dark .ps-app-container {
  display: flex;
  flex: 1;
  position: relative;
}

/* ============================================
   Top Bar
   ============================================ */

body.admin-dark .ps-topbar {
  height: 55px;  /* fib-5 */
  background: var(--ps-bg-sidebar);
  border-bottom: 1px solid var(--ps-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px;  /* fib-3 horizontal */
  position: sticky;
  top: 0;
  z-index: 1030;
}

body.admin-dark .ps-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;  /* fib-1 */
}

body.admin-dark .ps-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ps-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

body.admin-dark .ps-topbar-brand:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ps-text-primary);
}

body.admin-dark .ps-topbar-brand i {
  color: #4fd1b5;
  font-size: 1.25rem;
}

/* Admin accent button - mint background with dark text for WCAG compliance */
body.admin-dark .bg-admin-accent {
  background-color: #4fd1b5 !important;
  color: #1a1d24 !important;
}

body.admin-dark .bg-admin-accent:hover {
  background-color: #3ec4a8 !important;
}

body.admin-dark .ps-topbar-title {
  font-weight: 600;
  font-size: 1.25rem;
}

body.admin-dark .ps-topbar-right {
  display: flex;
  align-items: center;
  gap: 13px;  /* fib-2 */
}

body.admin-dark .ps-topbar-subtitle {
  color: var(--ps-text-muted);
  font-size: 0.8125rem;
}

/* ============================================
   Left Sidebar (Shopify/CommishVault Style)
   ============================================ */

body.admin-dark .ps-sidebar {
  width: 220px;
  background: var(--ps-bg-sidebar);
  border-right: 1px solid var(--ps-border-color);
  padding: 21px 0;  /* fib-3 vertical */
  position: sticky;
  top: 55px;  /* match topbar height fib-5 */
  height: calc(100vh - 55px);
  overflow-y: auto;
  flex-shrink: 0;
}

body.admin-dark .ps-sidebar-nav {
  padding: 0;
}

body.admin-dark .ps-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.admin-dark .ps-sidebar-item {
  margin: 0;
  position: relative;
}

body.admin-dark .ps-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;  /* fib-1 */
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  margin: 0;
  color: #9CA3AF;
  text-decoration: none;
  transition: color 0.15s ease;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

body.admin-dark .ps-sidebar-link:hover {
  color: #E5E7EB;
}

body.admin-dark .ps-sidebar-link.active {
  color: #4fd1b5;
  font-weight: 500;
}

body.admin-dark .ps-sidebar-link.active::before {
  display: none;
}

body.admin-dark .ps-sidebar-label {
  flex: 1;
  white-space: nowrap;
}

body.admin-dark .ps-sidebar-divider {
  height: 1px;
  background: rgba(75, 85, 99, 0.3);
  margin: 0.75rem 1rem;
}

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

body.admin-dark .ps-main-content {
  flex: 1;
  padding: 21px 34px;  /* fib-3 vertical, fib-4 horizontal */
  min-width: 0;
  max-width: 100%;
  background: var(--ps-bg-primary);
}

@media (max-width: 767.98px) {
  body.admin-dark .ps-main-content {
    padding: 13px;  /* fib-2 on mobile */
  }
}

/* ============================================
   Typography Hierarchy for Eye Comfort
   - Headings use brighter text for emphasis
   - Body text uses muted for reduced strain
   ============================================ */

body.admin-dark .ps-main-content h1,
body.admin-dark .ps-main-content h2,
body.admin-dark .ps-main-content h3,
body.admin-dark .main-content h1,
body.admin-dark .main-content h2,
body.admin-dark .main-content h3,
body.admin-dark h1.main-content__page-title {
  color: var(--ps-text-primary);  /* Brighter for headings */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

body.admin-dark .ps-main-content h1,
body.admin-dark .main-content h1,
body.admin-dark h1.main-content__page-title {
  font-size: 1.5rem;  /* 24px */
  margin-bottom: 1rem;
}

body.admin-dark .ps-main-content h2,
body.admin-dark .main-content h2 {
  font-size: 1.25rem;  /* 20px */
  margin-bottom: 0.75rem;
}

body.admin-dark .ps-main-content h3,
body.admin-dark .main-content h3 {
  font-size: 1.125rem;  /* 18px */
  margin-bottom: 0.5rem;
}

body.admin-dark .ps-main-content p,
body.admin-dark .main-content p {
  color: var(--ps-text-muted);  /* Muted for body - easier on eyes */
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.5;
}

/* ============================================
   Sidebar Dropdown Groups
   ============================================ */

body.admin-dark .ps-sidebar-group {
  margin: 0;
  padding: 0.25rem 0;
}

body.admin-dark .ps-sidebar-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;  /* fib-1 */
  width: 100%;
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  background: transparent;
  border: none;
  color: #9CA3AF;
  font-size: 0.9375rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
  letter-spacing: -0.01em;
}

body.admin-dark .ps-sidebar-group-toggle:hover {
  color: #E5E7EB;
}

body.admin-dark .ps-sidebar-group.is-open .ps-sidebar-group-toggle {
  color: #E5E7EB;
}

body.admin-dark .ps-sidebar-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.6;
}

body.admin-dark .ps-sidebar-group-toggle span {
  flex: 1;
}

body.admin-dark .ps-sidebar-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.4;
  transition: transform 0.2s ease;
}

body.admin-dark .ps-sidebar-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  padding-left: 34px;  /* fib-4 */
}

/* Show submenu when group is open */
body.admin-dark .ps-sidebar-group.is-open .ps-sidebar-submenu {
  display: block;
}

/* Rotate chevron when open */
body.admin-dark .ps-sidebar-group.is-open .ps-sidebar-chevron {
  transform: rotate(180deg);
}

body.admin-dark .ps-sidebar-submenu .ps-sidebar-link {
  padding: 8px 13px;  /* fib-1 vertical, fib-2 horizontal */
  font-size: 0.875rem;
  color: #9CA3AF;  /* ~6.3:1 contrast - WCAG AA compliant */
}

body.admin-dark .ps-sidebar-submenu .ps-sidebar-link:hover {
  color: #D1D5DB;  /* ~10:1 contrast */
}

body.admin-dark .ps-sidebar-submenu .ps-sidebar-link.active {
  color: #4fd1b5;  /* Mint accent */
}

/* ============================================
   Main App Theme System
   ============================================ */

/* Light Mode (Default) */
:root, [data-theme="light"] {
  --app-bg-primary: #f8fafc;      /* Light gray background */
  --app-bg-card: #ffffff;         /* White cards */
  --app-bg-card-hover: #f1f5f9;   /* Hover state */
  --app-bg-header: #1f2937;       /* Dark header (stays dark) */
  --app-border-color: #e2e8f0;    /* Light borders */
  --app-text-primary: #1e293b;    /* Dark text */
  --app-text-secondary: #475569;  /* Medium gray */
  --app-text-muted: #94a3b8;      /* Light gray */
  --app-accent: #14b8a6;          /* Teal accent */
  --app-accent-hover: #0d9488;    /* Darker teal */
  --app-success: #22c55e;         /* Green */
  --app-warning: #eab308;         /* Yellow */
  --app-danger: #ef4444;          /* Red */
}

/* Dark Mode */
[data-theme="dark"] {
  /* Sleeper-inspired palette - softer blue-gray, not harsh black */
  --app-bg-primary: #1a1d24;      /* Soft dark blue-gray (Sleeper-like) */
  --app-bg-card: #252a33;         /* Elevated card - visible contrast */
  --app-bg-card-hover: #2d333d;   /* Card hover state */
  --app-bg-header: #15181e;       /* Slightly darker for visual hierarchy */
  --app-border-color: #3a4149;    /* Visible but soft borders */
  --app-text-primary: #e8edf3;    /* Soft off-white */
  --app-text-secondary: #a8b3c0;  /* Readable blue-gray */
  --app-text-muted: #6b7685;      /* Muted but visible */
  --app-accent: #4fd1b5;          /* Vibrant teal accent */
  --app-accent-hover: #3ec4a8;    /* Slightly darker teal */
  --app-success: #56d364;         /* Vibrant green */
  --app-warning: #e3b341;         /* Warm amber */
  --app-danger: #f47067;          /* Soft coral red */

  background-color: var(--app-bg-primary);
  color: var(--app-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme Toggle Button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

/* Light mode body styling */
[data-theme="light"] {
  background-color: var(--app-bg-primary);
  color: var(--app-text-secondary);
}

[data-theme="light"] main {
  background-color: var(--app-bg-primary);
  min-height: calc(100vh - 80px);
}

[data-theme="light"] footer {
  background-color: var(--app-bg-primary);
  border-color: var(--app-border-color);
}

/* Main content area */
[data-theme="dark"] main {
  background-color: var(--app-bg-primary);
  min-height: calc(100vh - 80px);
}

/* Main site header stays dark (already dark in current design) */
[data-theme="dark"] body > header,
[data-theme="dark"] .app-header {
  background-color: var(--app-bg-header);
  border-bottom: 1px solid var(--app-border-color);
}

/* Page content headers should be transparent (blend with main) */
[data-theme="dark"] main header {
  background-color: transparent;
  border-bottom: none;
}

/* Remove the white border on header nav */
[data-theme="dark"] header nav .border-b {
  border-color: var(--app-border-color);
}

/* Footer dark theme */
[data-theme="dark"] footer {
  background-color: var(--app-bg-primary);
  border-color: var(--app-border-color);
}

[data-theme="dark"] footer p,
[data-theme="dark"] footer a {
  color: var(--app-text-muted);
}

[data-theme="dark"] footer a:hover {
  color: var(--app-text-secondary);
}

/* ============================================
   Theme-Agnostic Components
   These use CSS variables, so they work in both light and dark modes
   ============================================ */

/* Cards */
.app-card {
  background-color: var(--app-bg-card);
  border: 1px solid var(--app-border-color);
  border-radius: 8px;  /* fib-1 */
}

/* Stat cards */
.app-stat-card {
  background-color: #1e293b;  /* Mirage - darker card background */
  border: 1px solid #3d4a5c;
  border-radius: 8px;  /* fib-1 */
  padding: 16px 21px;  /* fib-2.5 fib-3 */
}

.app-stat-card h3 {
  color: var(--app-text-primary);
  font-size: 14px;  /* fib-sm */
  font-weight: 500;
  margin-bottom: 5px;  /* fib-0 */
}

.app-stat-card .value {
  color: var(--app-accent);
  font-size: 34px;  /* fib-4 */
  font-weight: 600;
  line-height: 1.2;
}

.app-stat-card .hint {
  color: var(--app-text-muted);
  font-size: 13px;  /* fib-xs */
  margin-top: 5px;  /* fib-0 */
}

/* Tabs */
.app-tabs {
  background-color: #1e293b;  /* Mirage - darker card background */
  border: 1px solid #3d4a5c;
  border-radius: 8px;  /* fib-1 */
  overflow: hidden;
}

.app-tabs-nav {
  border-bottom: 1px solid var(--app-border-color);
  display: flex;
  gap: 0;
}

.app-tab {
  padding: 13px 21px;  /* fib-2 fib-3 */
  font-size: 13px;  /* fib-xs */
  font-weight: 500;
  color: var(--app-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.app-tab.active {
  color: var(--app-accent);
  border-bottom-color: var(--app-accent);
}

.app-tabs-content {
  padding: 0;
}

/* Tables */
.app-table {
  width: 100%;
  border-collapse: collapse;
}

.app-table th {
  padding: 8px 13px; /* fib-1 fib-2 */
  text-align: left;
  font-size: 13px; /* fib-xs */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--app-text-muted);
  background-color: transparent;
  border-bottom: 1px solid var(--app-border-color);
}

.app-table td {
  padding: 13px 13px; /* fib-2 fib-2 */
  font-size: 13px; /* fib-xs */
  color: var(--app-text-secondary);
  border-bottom: 1px solid var(--app-border-color);
}

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

/* Solid background for table rows */
.app-table tbody tr td {
  background-color: #1e293b;
}

.app-table tr:hover td {
  background-color: var(--app-bg-card-hover) !important;
}

.app-table .text-primary {
  color: var(--app-text-primary);
  font-weight: 500;
}

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

/* Links */
.app-link {
  color: var(--app-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.app-link:hover {
  color: var(--app-accent-hover);
  text-decoration: underline;
}

/* Badges */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px; /* fib-0 fib-2 */
  font-size: 13px; /* fib-xs */
  font-weight: 500;
  border-radius: 9999px;
}

.app-badge-success {
  background-color: rgba(34, 197, 94, 0.15);
  color: var(--app-success);
}

.app-badge-warning {
  background-color: rgba(234, 179, 8, 0.15);
  color: var(--app-warning);
}

.app-badge-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--app-danger);
}

.app-badge-neutral {
  background-color: rgba(100, 116, 139, 0.15);
  color: var(--app-text-secondary);
}

.app-badge-shopify {
  background-color: rgba(150, 191, 72, 0.15);
  color: #96bf48;
}

.app-badge-info {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* Draft status - soft lavender-gray, easy on eyes against navy
   Based on dark mode best practices: desaturated, ~6:1 contrast ratio
   Ref: https://www.smashingmagazine.com/2025/04/inclusive-dark-mode-designing-accessible-dark-themes/ */
.app-badge-draft {
  background-color: rgba(168, 179, 204, 0.12);
  color: #a8b3cc;
}

/* Voided status - soft rose color with strikethrough */
.app-badge-voided {
  background-color: rgba(244, 180, 180, 0.15);
  color: #e8a0a0;
  text-decoration: line-through;
}

/* Empty state */
.app-empty-state {
  text-align: center;
  padding: 55px 21px;  /* fib-5 fib-3 */
}

.app-empty-state svg {
  color: var(--app-text-muted);
  opacity: 0.5;
}

.app-empty-state h3 {
  color: var(--app-text-primary);
  font-size: 14px;  /* fib-sm */
  font-weight: 500;
  margin-top: 16px;  /* fib-2.5 */
}

.app-empty-state p {
  color: var(--app-text-muted);
  font-size: 14px;  /* fib-sm */
  margin-top: 5px;  /* fib-0 */
}

/* Primary button */
.app-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 8px 21px;  /* fib-1 fib-3 */
  background-color: var(--app-accent);
  color: #1a202c;
  font-weight: 600;
  font-size: 14px;  /* fib-sm */
  border-radius: 8px;  /* fib-1 */
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

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

/* Secondary button */
.app-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 8px 21px;  /* fib-1 fib-3 */
  background-color: var(--app-bg-card);
  color: var(--app-text-primary);
  font-weight: 600;
  font-size: 14px;  /* fib-sm */
  border-radius: 8px;  /* fib-1 */
  border: 1px solid var(--app-border-color);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.app-btn-secondary:hover {
  background-color: var(--app-bg-secondary);
  border-color: var(--app-text-muted);
}

/* View all link at bottom of card */
.app-view-all {
  display: block;
  text-align: center;
  padding: 13px 21px;  /* fib-2 fib-3 */
  border-top: 1px solid var(--app-border-color);
  color: var(--app-text-muted);
  font-size: 14px;  /* fib-sm */
  text-decoration: none;
  transition: color 0.15s ease;
}

.app-view-all:hover {
  color: var(--app-accent);
}

/* ============================================
   App Dark Theme - Forms
   ============================================ */

/* Form inputs, textareas, selects */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--app-bg-card) !important;
  color: var(--app-text-primary) !important;
  border-color: var(--app-border-color) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="tel"]:focus,
[data-theme="dark"] input[type="url"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] input[type="datetime-local"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  outline: none;
  border-color: var(--app-accent) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 213, 0.2) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--app-text-muted) !important;
}

/* Labels */
[data-theme="dark"] label {
  color: var(--app-text-secondary);
}

/* Form hint/help text */
[data-theme="dark"] .text-gray-500 {
  color: var(--app-text-muted);
}

/* Subtitles, descriptions - more readable */
[data-theme="dark"] .text-gray-600 {
  color: var(--app-text-secondary);
}

/* Headings in dark mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--app-text-primary);
}

/* Paragraphs */
[data-theme="dark"] p {
  color: var(--app-text-secondary);
}

/* Override specific text colors for better readability */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 {
  color: var(--app-text-primary) !important;
}

/* Primary buttons keep dark text on teal background (same as light mode) */
[data-theme="dark"] .bg-\[\#4fd1b5\].text-gray-900,
[data-theme="dark"] a.bg-\[\#4fd1b5\],
[data-theme="dark"] button.bg-\[\#4fd1b5\] {
  color: #1a202c !important;
}

[data-theme="dark"] .text-gray-700 {
  color: var(--app-text-secondary) !important;
}

[data-theme="dark"] .text-gray-400 {
  color: var(--app-text-muted) !important;
}

/* Form sections/containers */
[data-theme="dark"] .bg-white {
  background-color: var(--app-bg-card) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--app-bg-primary) !important;
}

/* Border colors */
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
  border-color: var(--app-border-color) !important;
}

/* Divide colors for lists */
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--app-border-color);
}

/* Shadow adjustments - darker shadows for dark mode */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, 0.4);
}

/* Ring colors for focus states */
[data-theme="dark"] .ring-gray-300 {
  --tw-ring-color: var(--app-border-color);
}

/* Checkbox and radio styling */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  background-color: var(--app-bg-card) !important;
  border-color: var(--app-border-color) !important;
}

[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="radio"]:checked {
  background-color: var(--app-accent) !important;
  border-color: var(--app-accent) !important;
}

/* ============================================
   Teal to Tron Blue Override (Dark Mode)
   ============================================ */

/* Override Tailwind teal colors with Tron blue */
[data-theme="dark"] .bg-mint-500 {
  background-color: var(--app-accent) !important;
}

[data-theme="dark"] .bg-mint-500:hover,
[data-theme="dark"] .hover\:bg-mint-600:hover,
[data-theme="dark"] .hover\:bg-opacity-90:hover {
  background-color: var(--app-accent-hover) !important;
}

[data-theme="dark"] .text-mint-500,
[data-theme="dark"] .text-mint-600 {
  color: var(--app-accent) !important;
}

[data-theme="dark"] .border-mint-500 {
  border-color: var(--app-accent) !important;
}

/* Focus ring for teal elements */
[data-theme="dark"] .focus\:ring-mint-500:focus {
  --tw-ring-color: var(--app-accent) !important;
}

/* ============================================
   Marketing/Homepage Theme Support
   ============================================ */

/* Features section background */
.marketing-features-bg {
  background-color: #f3f4f6; /* gray-100 for light */
}

[data-theme="dark"] .marketing-features-bg {
  background-color: var(--app-bg-card);
}

/* FAQ section border */
.marketing-faq-border {
  border-top: 1px solid #e5e7eb; /* gray-200 for light */
}

[data-theme="dark"] .marketing-faq-border {
  border-top-color: var(--app-border-color);
}

/* FAQ dividers */
.marketing-faq-divider {
  border-color: rgba(17, 24, 39, 0.1); /* gray-900/10 for light */
}

[data-theme="dark"] .marketing-faq-divider {
  border-color: var(--app-border-color);
}

.marketing-faq-divider > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(17, 24, 39, 0.1);
}

[data-theme="dark"] .marketing-faq-divider > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--app-border-color);
}

/* Prose in dark mode for FAQ answers */
[data-theme="dark"] .prose {
  color: var(--app-text-secondary);
}

[data-theme="dark"] .prose a {
  color: var(--app-accent);
}

[data-theme="dark"] .prose strong {
  color: var(--app-text-primary);
}

[data-theme="dark"] .prose code {
  background-color: var(--app-bg-card);
  color: var(--app-text-primary);
}

/* ============================================
   Homepage Hero Section
   ============================================ */

/* Hero section background */
.hero-section {
  background: linear-gradient(180deg, var(--app-bg-primary) 0%, var(--app-bg-card) 100%);
}

/* Hero icon wrapper */
.hero-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 1.5rem;
  background: rgba(94, 234, 213, 0.1);
  border: 1px solid rgba(94, 234, 213, 0.2);
}

@media (min-width: 768px) {
  .hero-icon-wrapper {
    width: 7rem;
    height: 7rem;
  }
}

/* Hero title colors */
.hero-title-primary {
  color: var(--app-text-primary);
}

.hero-title-accent {
  color: #4fd1b5; /* teal accent */
}

/* Light mode title colors */
:root .hero-title-primary,
[data-theme="light"] .hero-title-primary {
  color: #1e293b;
}

/* Dark mode title - bright white for visibility */
[data-theme="dark"] .hero-title-primary {
  color: #f1f5f9;
}

/* Feature badges */
.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: rgba(94, 234, 213, 0.1);
  border: 1px solid rgba(94, 234, 213, 0.2);
  color: var(--app-text-secondary);
}

[data-theme="light"] .feature-badge {
  background: rgba(20, 184, 166, 0.08);
  border-color: rgba(20, 184, 166, 0.2);
  color: #475569;
}

/* Hero CTA button */
.hero-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: 0.75rem;
  background: #4fd1b5;
  color: #0f172a;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(94, 234, 213, 0.3);
}

.hero-cta-button:hover {
  background: #3ec4a8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(94, 234, 213, 0.4);
}

/* Light mode hero section */
[data-theme="light"] .hero-section {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px; /* fully rounded */
  color: #9ca3af; /* gray-400 */
  border: 1px solid #4b5563; /* gray-600 */
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  color: #e5e7eb; /* gray-200 */
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #6b7280; /* gray-500 */
}

.theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--app-accent);
}

/* ============================================
   Main App Sidebar Layout
   ============================================ */

/* Prevent white gaps - set html and body background */
html {
  background-color: #15181e;
}

/* Light mode html background */
[data-theme="light"] html,
html:has([data-theme="light"]) {
  background-color: #f8fafc;
}

/* App layout container */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #15181e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-container {
  display: flex;
  flex: 1;
  position: relative;
}

/* App Topbar */
.app-topbar {
  height: 55px;
  background: var(--app-bg-header);
  border-bottom: 1px solid var(--app-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.app-topbar-left {
  display: flex;
  align-items: center;
  gap: 13px;
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* Hamburger button - mobile only */
.app-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--app-text-secondary);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--app-text-primary);
}

/* Hide hamburger on desktop */
@media (min-width: 1024px) {
  .app-hamburger {
    display: none;
  }
}

/* App Sidebar - Matching admin elegance */
.app-sidebar {
  width: 200px;
  background: #15181e;  /* Darker like admin */
  border-right: 1px solid rgba(58, 65, 73, 0.5);
  padding: 21px 0;
  position: sticky;
  top: 55px;
  height: calc(100vh - 55px);
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 1020;
}

/* Hide sidebar on mobile by default */
@media (max-width: 1023.98px) {
  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1040;
    padding-top: 21px;
  }

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

/* Sidebar navigation */
.app-sidebar-nav {
  padding: 0;
}

.app-sidebar-cta {
  padding: 0 13px;
  margin-bottom: 21px;
}

.app-sidebar-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* fib-0 */
  width: 100%;
  padding: 8px 13px; /* fib-1 fib-2 */
  background: #4fd1b5;
  color: #1a202c;
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.app-sidebar-cta-btn:hover {
  background: #3ec4a8;
  transform: translateY(-1px);
}

.app-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.app-sidebar-item {
  margin: 0;
  position: relative;
}

.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  margin: 0;
  color: #9CA3AF;
  text-decoration: none;
  transition: color 0.15s ease;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.app-sidebar-link:hover {
  color: #E5E7EB;
}

.app-sidebar-link.active {
  color: #4fd1b5;
  font-weight: 500;
}

.app-sidebar-icon {
  width: 21px; /* fib-3 */
  height: 21px; /* fib-3 */
  flex-shrink: 0;
  opacity: 0.6;
}

.app-sidebar-link:hover .app-sidebar-icon {
  opacity: 0.8;
}

.app-sidebar-link.active .app-sidebar-icon {
  opacity: 1;
}

.app-sidebar-label {
  flex: 1;
  white-space: nowrap;
}

.app-sidebar-divider {
  height: 1px;
  background: rgba(75, 85, 99, 0.3);
  margin: 13px 16px; /* fib-2 fib-2.5 */
}

/* Expandable sidebar menu */
.app-sidebar-details {
  width: 100%;
}

.app-sidebar-details summary {
  list-style: none;
  cursor: pointer;
}

.app-sidebar-details summary::-webkit-details-marker {
  display: none;
}

.app-sidebar-expandable {
  justify-content: flex-start;
}

.app-sidebar-chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.app-sidebar-details[open] .app-sidebar-chevron {
  transform: rotate(180deg);
}

.app-sidebar-submenu {
  list-style: none;
  padding: 5px 0 5px 21px; /* fib-0 0 fib-0 fib-3 */
  margin: 0;
}

.app-sidebar-sublink {
  display: block;
  padding: 5px 13px; /* fib-0 fib-2 */
  font-size: 13px; /* fib-2 */
  color: #9CA3AF;
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.app-sidebar-sublink:hover {
  color: #E5E7EB;
  background: rgba(255, 255, 255, 0.05);
}

.app-sidebar-sublink.active {
  color: #4fd1b5;
  font-weight: 500;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1035;
}

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

/* Hide overlay on desktop */
@media (min-width: 1024px) {
  .sidebar-overlay {
    display: none;
  }
}

/* Main content area for app layout */
.app-main-content {
  flex: 1;
  padding: 21px 34px;
  min-width: 0;
  max-width: 100%;
  background: var(--app-bg-primary);
}

/* App footer - seamless with dark theme */
.app-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: #1a1d24;
  border-top: 1px solid #3a4149;
}

@media (min-width: 640px) {
  .app-footer {
    flex-direction: row;
    align-items: center;
    padding: 1.5rem 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .app-main-content {
    padding: 13px;
  }
}

/* Light mode - sidebar stays dark for contrast */
[data-theme="light"] .app-sidebar {
  background: #15181e;
}

[data-theme="light"] .app-topbar {
  background: #15181e;
}

/* Dark mode explicit */
[data-theme="dark"] .app-sidebar {
  background: #15181e;
}

[data-theme="dark"] .app-topbar {
  background: #15181e;
}

/* ============================================
   FINAL OVERRIDE - Admin Table Row Hover
   Must be at the end to override everything
   ============================================ */
body.admin-dark table tbody tr:hover td,
body.admin-dark .collection-field-table tbody tr:hover td,
.admin-dark table tbody tr:hover td,
.admin-dark .ps-main-content table tbody tr:hover td {
  background: #2d333d !important;  /* Card hover - matches main app */
  background-color: #2d333d !important;
}

/* ============================================
   Admin Generic Table Styling (for non-Administrate tables)
   ============================================ */
body.admin-dark .ps-main-content table {
  background: #1e293b;  /* Mirage blue */
  border: 1px solid #3d4a5c;
  border-radius: 0.625rem;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

body.admin-dark .ps-main-content table th {
  background: transparent;
  color: var(--ps-text-muted);
  border-bottom: 1px solid #3d4a5c;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 0.625rem 1rem;
  text-align: left;
}

body.admin-dark .ps-main-content table td {
  background: #1e293b;
  color: var(--ps-text-secondary);
  border-bottom: 1px solid #3d4a5c;
  font-size: 0.8125rem;
  padding: 0.75rem 1rem;
}

body.admin-dark .ps-main-content table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   Google Places Autocomplete - Position Above Input
   Prevents conflict with browser autofill dropdown
   ============================================ */
.pac-container {
  /* Dark mode styling - display below input field */
  background-color: var(--app-bg-card, #252a33) !important;
  border: 1px solid var(--app-border-color, #3a4149) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  font-family: inherit !important;
  z-index: 10000 !important;
  margin-top: 4px !important;
}

.pac-container::after {
  /* Hide the "powered by Google" logo or style it */
  background-image: none !important;
  padding: 4px 8px !important;
}

.pac-item {
  padding: 10px 14px !important;
  cursor: pointer !important;
  border-top: 1px solid var(--app-border-color, #3a4149) !important;
  color: var(--app-text-secondary, #a8b3c0) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.pac-item:first-child {
  border-top: none !important;
}

.pac-item:hover,
.pac-item-selected {
  background-color: var(--app-bg-card-hover, #2d333d) !important;
}

.pac-item-query {
  color: var(--app-text-primary, #e8edf3) !important;
  font-weight: 500 !important;
}

.pac-matched {
  color: var(--app-accent, #4fd1b5) !important;
  font-weight: 600 !important;
}

.pac-icon {
  /* Style the location pin icon */
  filter: brightness(0.8) !important;
}

/* Light mode overrides */
[data-theme="light"] .pac-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .pac-item {
  border-top-color: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .pac-item:hover,
[data-theme="light"] .pac-item-selected {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] .pac-item-query {
  color: #1e293b !important;
}

[data-theme="light"] .pac-matched {
  color: #14b8a6 !important;
}

/* Shimmer animation for celebration cards */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}

.animate-shimmer {
  animation: shimmer 3s ease-in-out infinite;
}

/* Celebration modal animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

.animate-fade-out {
  animation: fadeOut 0.2s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================
   New PlaceAutocompleteElement (Beta API)
   Web component styling for Google Places
   Refined dark theme to match PackageSave design
   ============================================ */

/* Container for the PlaceAutocompleteElement */
.places-autocomplete-input {
  width: 100%;
}

/* The element container itself - transparent to blend with form */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  background: transparent !important;
}

/* Style the input wrapper - matches form inputs (bg-slate-700) */
gmp-place-autocomplete::part(input) {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: #334155 !important;  /* slate-700 - matches other inputs */
  border: 1px solid #475569 !important;  /* slate-600 border */
  border-radius: 0.375rem;
  color: #e2e8f0 !important;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The outer wrapper/container of the component */
gmp-place-autocomplete::part(container) {
  background: transparent !important;
}

gmp-place-autocomplete::part(input):focus {
  outline: none;
  border-color: #4fd1b5 !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 213, 0.15) !important;
}

gmp-place-autocomplete::part(input)::placeholder {
  color: #64748b !important;
}

/* The clear button (X) */
gmp-place-autocomplete::part(clear-button) {
  color: #94a3b8;
  background: transparent;
  border-radius: 50%;
  padding: 4px;
}

gmp-place-autocomplete::part(clear-button):hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.1);
}

/* Search icon */
gmp-place-autocomplete::part(search-icon) {
  color: #64748b;
}

/* Style the dropdown panel - matches our card styling */
gmp-place-autocomplete::part(panel) {
  background-color: #1e293b !important;
  border: 1px solid #3d4a5c !important;
  border-radius: 0.625rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  margin-top: 6px;
  overflow: hidden;
}

/* Style individual prediction items */
gmp-place-autocomplete::part(prediction-item) {
  padding: 12px 16px;
  color: #a8b3c0 !important;
  font-size: 0.9375rem;
  cursor: pointer;
  border-bottom: 1px solid #2d3748;
  background-color: #1e293b !important;
  transition: background-color 0.1s ease;
}

/* Note: :last-child doesn't work with ::part() - border handled by panel overflow:hidden */

gmp-place-autocomplete::part(prediction-item):hover,
gmp-place-autocomplete::part(prediction-item-selected) {
  background-color: #2d3748 !important;
}

/* Main text (street address) */
gmp-place-autocomplete::part(prediction-item-main-text) {
  color: #e8edf3 !important;
  font-weight: 500;
}

/* Secondary text (city, state, country) */
gmp-place-autocomplete::part(prediction-item-secondary-text) {
  color: #6b7685 !important;
  font-size: 0.875rem;
}

/* Matched/highlighted text - teal accent */
gmp-place-autocomplete::part(prediction-item-match) {
  color: #4fd1b5 !important;
  font-weight: 600;
}

/* Location icon */
gmp-place-autocomplete::part(prediction-item-icon) {
  color: #4fd1b5 !important;
  opacity: 0.8;
}

/* "Powered by Google" footer - subtle */
gmp-place-autocomplete::part(attribution) {
  background-color: #1e293b !important;
  border-top: 1px solid #2d3748;
  padding: 8px 12px;
  opacity: 0.6;
}

/* Light mode overrides */
[data-theme="light"] gmp-place-autocomplete::part(input) {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

[data-theme="light"] gmp-place-autocomplete::part(input):focus {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15) !important;
}

[data-theme="light"] gmp-place-autocomplete::part(input)::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] gmp-place-autocomplete::part(panel) {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] gmp-place-autocomplete::part(prediction-item) {
  color: #475569 !important;
  background-color: #ffffff !important;
  border-bottom-color: #f1f5f9;
}

[data-theme="light"] gmp-place-autocomplete::part(prediction-item):hover,
[data-theme="light"] gmp-place-autocomplete::part(prediction-item-selected) {
  background-color: #f8fafc !important;
}

[data-theme="light"] gmp-place-autocomplete::part(prediction-item-main-text) {
  color: #1e293b !important;
}

[data-theme="light"] gmp-place-autocomplete::part(prediction-item-secondary-text) {
  color: #64748b !important;
}

[data-theme="light"] gmp-place-autocomplete::part(prediction-item-match) {
  color: #14b8a6 !important;
}

[data-theme="light"] gmp-place-autocomplete::part(prediction-item-icon) {
  color: #14b8a6 !important;
}

[data-theme="light"] gmp-place-autocomplete::part(attribution) {
  background-color: #ffffff !important;
  border-top-color: #f1f5f9;
}

/* ============================================
   Mint Color Utilities
   Primary brand color palette
   ============================================ */
@layer utilities {
  /* Background colors */
  .bg-mint-50 { background-color: #effcf8; }
  .bg-mint-100 { background-color: #d7f7ed; }
  .bg-mint-200 { background-color: #b2eedc; }
  .bg-mint-300 { background-color: #7ee0c6; }
  .bg-mint-400 { background-color: #4fd1b5; }
  .bg-mint-500 { background-color: #3fb8a0; }
  .bg-mint-600 { background-color: #2a9583; }
  .bg-mint-700 { background-color: #25786b; }
  .bg-mint-800 { background-color: #235f57; }
  .bg-mint-900 { background-color: #214e49; }
  .bg-mint-950 { background-color: #0e2d2a; }

  /* Background with opacity */
  .bg-mint-500\/10 { background-color: rgba(63, 184, 160, 0.1); }
  .bg-mint-500\/20 { background-color: rgba(63, 184, 160, 0.2); }
  .bg-mint-500\/30 { background-color: rgba(63, 184, 160, 0.3); }

  /* Text colors */
  .text-mint-50 { color: #effcf8; }
  .text-mint-100 { color: #d7f7ed; }
  .text-mint-200 { color: #b2eedc; }
  .text-mint-300 { color: #7ee0c6; }
  .text-mint-400 { color: #4fd1b5; }
  .text-mint-500 { color: #3fb8a0; }
  .text-mint-600 { color: #2a9583; }
  .text-mint-700 { color: #25786b; }
  .text-mint-800 { color: #235f57; }
  .text-mint-900 { color: #214e49; }
  .text-mint-950 { color: #0e2d2a; }

  /* Text with opacity */
  .text-mint-400\/80 { color: rgba(79, 209, 181, 0.8); }

  /* Border colors */
  .border-mint-500 { border-color: #3fb8a0; }
  .border-mint-400 { border-color: #4fd1b5; }
  .border-mint-500\/30 { border-color: rgba(63, 184, 160, 0.3); }
  .border-mint-500\/40 { border-color: rgba(63, 184, 160, 0.4); }

  /* Hover states */
  .hover\:bg-mint-400:hover { background-color: #4fd1b5; }
  .hover\:bg-mint-600:hover { background-color: #2a9583; }
  .hover\:text-mint-300:hover { color: #7ee0c6; }
  .hover\:text-mint-400:hover { color: #4fd1b5; }
  .hover\:border-mint-500:hover { border-color: #3fb8a0; }

  /* Admin accent colors - for admin panel buttons */
  .bg-admin-accent { background-color: #4fd1b5; }
  .hover\:bg-admin-accent-hover:hover { background-color: #3ec4a8; }
  .text-admin-accent { color: #4fd1b5; }
  .hover\:text-admin-accent-hover:hover { color: #3ec4a8; }
  .border-admin-accent { border-color: #4fd1b5; }

  /* Admin background colors for text (dark text on light buttons) */
  .text-admin-bg-primary { color: #1a1d24; }
  .bg-admin-accent\/10 { background-color: rgba(79, 209, 181, 0.1); }
  .bg-admin-accent\/20 { background-color: rgba(79, 209, 181, 0.2); }

  /* Admin hover backgrounds */
  .bg-admin-bg-hover { background-color: #2d333d; }
  .hover\:bg-admin-bg-hover:hover { background-color: #2d333d; }
  .hover\:bg-admin-bg-hover\/50:hover { background-color: rgba(45, 51, 61, 0.5); }

  /* Admin background opacity variants */
  .bg-admin-bg-primary\/30 { background-color: rgba(26, 29, 36, 0.3); }

  /* Mint shadow utilities for CTA buttons */
  .shadow-mint-500\/25 { --tw-shadow-color: rgba(63, 184, 160, 0.25); --tw-shadow: var(--tw-shadow-colored); }
  .shadow-mint-500\/40 { --tw-shadow-color: rgba(63, 184, 160, 0.4); --tw-shadow: var(--tw-shadow-colored); }
  .hover\:shadow-mint-500\/40:hover { --tw-shadow-color: rgba(63, 184, 160, 0.4); --tw-shadow: var(--tw-shadow-colored); }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */