/* Kasaloop CSS Variables (Design System) */
:root {
  /* Brand (Purple) */
  --primary-start: #7C3AED; /* Purple 600 */
  --primary-end:   #5B21B6; /* Purple 800 */
  --primary-light: #A78BFA; /* Purple 400 */
  --primary-dark:  #4C1D95; /* Purple 900 */

  /* Accents */
  --accent-blue:   #3B82F6; /* Info */
  --accent-green:  #10B981; /* Success */
  --accent-yellow: #F59E0B; /* Warning */
  --accent-red:    #EF4444; /* Error */
  --accent-orange: #F97316; /* Pending */

  /* Neutrals */
  --bg:            #ffffff;
  --bg-muted:      #f7f7f9;
  --text:          #111827; /* Gray-900 */
  --text-muted:    #6B7280; /* Gray-500 */
  --border:        #E5E7EB; /* Gray-200 */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Safe-area helpers and mobile viewport fixes */
html, body, #root { min-height: 100%; }
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}

.safe-top { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + var(--kb, 0px)); }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.touch-pan-x { touch-action: pan-x; }

/* Navbar fade edges */
.edge-fade { position: absolute; top: 0; bottom: 0; width: 32px; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); }
.edge-left { left: 0; }
.edge-right { right: 0; }

/* Responsive label visibility for ultra‑narrow phones */
.nav-label { display: inline-block; }
@media (max-width: 390px) { .nav-label { display: none; } }

/* Truncation utilities */
.truncate-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Dark theme */
.dark, [data-theme="dark"] {
  --bg:          #0f1116;
  --bg-muted:    #141824;
  --text:        #ffffff;   /* make all default text white in dark */
  --text-muted:  #cbd5e1;   /* softer white for secondary text */
  --border:      #1f2937;
}

/* Minimal helpers that do not collide with Tailwind classes */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary-start), var(--primary-end));
}

.glass {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
}

.elevate-sm { box-shadow: var(--shadow-sm); }
.elevate-md { box-shadow: var(--shadow-md); }
.elevate-lg { box-shadow: var(--shadow-lg); }

.focus-ring {
  outline: 2px solid var(--primary-start);
  outline-offset: 2px;
}

/* Generic responsive media */
img, video, canvas { max-width: 100%; height: auto; }
* { -webkit-tap-highlight-color: transparent; }

/* Ensure form controls have readable text across themes */
/* Base (light) uses --text; dark overrides via variable swap above */
/* Use :root prefix for higher specificity than Tailwind preflight */
select, input, textarea, :root select, :root input, :root textarea {
  color: var(--text);
}

/* Option menus (where supported) */
option {
  color: var(--text);
  background-color: var(--bg);
}

/* Placeholder color aligned with theme */
input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

/* In dark mode, force all tailwind gray text utilities to render white */
.dark [class*="text-gray-"], [data-theme="dark"] [class*="text-gray-"] {
  color: #ffffff !important;
}

/* Default document text in dark mode should be white */
.dark, [data-theme="dark"] { color: #ffffff; }

/* Dark-mode tone adjustments: lighten surfaces for better legibility */
.dark .bg-gray-900, [data-theme="dark"] .bg-gray-900 { background-color: #1f2937 !important; }
.dark .bg-gray-800, [data-theme="dark"] .bg-gray-800 { background-color: #374151 !important; }
.dark .bg-gray-700, [data-theme="dark"] .bg-gray-700 { background-color: #4b5563 !important; }
.dark .border-gray-700, [data-theme="dark"] .border-gray-700 { border-color: #4b5563 !important; }
.dark .border-gray-600, [data-theme="dark"] .border-gray-600 { border-color: #6b7280 !important; }

/* Dark-mode inputs/selects a touch lighter with clearer borders */
.dark select, .dark input, .dark textarea,
[data-theme="dark"] select, [data-theme="dark"] input, [data-theme="dark"] textarea {
  background-color: #374151 !important; /* gray-700 */
  border-color: #4b5563 !important;     /* gray-600 */
}