/* ============================================================================
   PANEL THEME  —  premium Red/White, light + dark
   Retheme strategy: Tailwind color tokens point at CSS variables (see header
   config), and the hardcoded literal utility classes used across the panel are
   remapped here so retheming flips everything without editing every file.
   ============================================================================ */

:root,
[data-theme="light"] {
  --background: #FFFFFF;   /* Clean white page bg */
  --surface:    #FFFFFF;   /* cards / panels */
  --surface-2:  #FBF7F7;   /* subtle warm-white hover / inset bg */
  --foreground: #1A1414;   /* near-black with a warm undertone */
  --primary:    #1A1414;
  --secondary:  #6B5C5C;   /* warm slate for secondary text */
  --muted:      #A89999;   /* warm muted tone */
  --accent:     #E11D2E;   /* Premium Red */
  --accent-hover:#B8121F;  /* deeper red on hover */
  --accent-soft:rgba(225, 29, 46, 0.08);
  --accent-2:   #FF4757;   /* lighter red for gradients/highlights */
  --border:     #ECE3E3;   /* soft warm border */
  --hover:      #FBF7F7;
  --success:    #16A34A;
  --error:      #E11D2E;
  --shadow:     0 1px 2px rgba(26, 20, 20, 0.04), 0 1px 3px rgba(26, 20, 20, 0.03);
  --shadow-lg:  0 12px 24px -8px rgba(26, 20, 20, 0.10), 0 4px 8px -4px rgba(26, 20, 20, 0.04);
  --shadow-accent: 0 8px 20px -6px rgba(225, 29, 46, 0.28);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"] {
  --background: #120D0D;   /* near-black with warm red undertone */
  --surface:    #1C1515;
  --surface-2:  #251B1B;
  --foreground: #F7F1F1;
  --primary:    #F7F1F1;
  --secondary:  #B8A5A5;
  --muted:      #7A6868;
  --accent:     #FF4D5E;   /* brighter red for dark bg contrast */
  --accent-hover:#FF7181;
  --accent-soft:rgba(255, 77, 94, 0.14);
  --accent-2:   #FF8A94;
  --border:     #2E2222;
  --hover:      #251B1B;
  --success:    #4ADE80;
  --error:      #FF6B7A;
  --shadow:     0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 20px 30px -8px rgba(0, 0, 0, 0.5), 0 10px 12px -6px rgba(0, 0, 0, 0.35);
  --shadow-accent: 0 10px 24px -6px rgba(255, 77, 94, 0.35);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html { background-color: var(--background); }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.2s ease, color 0.2s ease;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Premium display headings */
h1, h2, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}

/* Slightly larger tap targets + comfortable spacing on small screens */
@media (max-width: 640px) {
  .btn-primary, button, input, select, textarea, a { -webkit-tap-highlight-color: transparent; }
  main { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ── Remap hardcoded literal utility classes to theme variables ───────────── */
.bg-white { background-color: var(--surface) !important; }
.bg-gray-50,
.bg-\[\#F9F9F9\],
.bg-\[\#FAFAFA\],
.bg-\[\#F5F3EE\],
.bg-\[\#F0F0F0\] { background-color: var(--surface-2) !important; }
.bg-gray-100,
.hover\:bg-gray-50:hover { background-color: var(--hover) !important; }

.text-primary,
.text-\[\#0D0D0D\] { color: var(--primary) !important; }
.text-secondary,
.text-\[\#6B6B6B\] { color: var(--secondary) !important; }
.text-\[\#9CA3AF\],
.text-\[\#9ca3af\] { color: var(--muted) !important; }

.border-border,
.border-\[\#E8E8E8\],
.border-\[\#E5E5E5\] { border-color: var(--border) !important; }

.bg-accent { background-color: var(--accent) !important; }
.text-accent { color: var(--accent) !important; }
.border-accent,
.focus\:border-accent:focus { border-color: var(--accent) !important; }
.bg-accent\/5 { background-color: var(--accent-soft) !important; }
.bg-accent\/10 { background-color: var(--accent-soft) !important; }

/* Legacy blue literals repointed to the red accent */
.text-\[\#1A73E8\],
.text-blue-700,
.text-\[\#0969da\] { color: var(--accent) !important; }
.bg-\[\#1A73E8\] { background-color: var(--accent) !important; }
.bg-\[\#1A73E8\]\/10,
.bg-blue-50,
.hover\:bg-blue-50:hover { background-color: var(--accent-soft) !important; }
.border-\[\#1A73E8\],
.focus\:border-\[\#1A73E8\]:focus { border-color: var(--accent) !important; }

/* Hover states */
.hover\:bg-\[\#1557B0\]:hover,
.hover\:bg-\[\#B91C1C\]:hover { background-color: var(--accent-hover) !important; }
.hover\:border-\[\#1A73E8\]:hover { border-color: var(--accent) !important; }
.hover\:bg-\[\#1A73E8\]\/5:hover { background-color: var(--accent-soft) !important; }
.group:hover .group-hover\:text-\[\#1A73E8\] { color: var(--accent) !important; }

/* Gradient headers */
.from-\[\#1A73E8\],
.from-accent {
  --tw-gradient-from: var(--accent) !important;
  --tw-gradient-to: var(--accent-hover) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-\[\#0D47C2\],
.to-accent { --tw-gradient-to: var(--accent-hover) !important; }
.shadow-\[\#1A73E8\]\/20 { box-shadow: var(--shadow-accent) !important; }

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

th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--foreground);
}

tbody tr {
  transition: background-color 0.12s ease;
}
tbody tr:hover {
  background-color: var(--surface-2);
}

@media (max-width: 640px) {
  th, td { padding: 10px 12px; font-size: 13px; }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card, .rounded-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  box-shadow: var(--shadow-accent);
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 44px; /* comfortable mobile tap target */
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -6px rgba(225, 29, 46, 0.38);
  filter: brightness(1.04);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 160ms ease;
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--muted); }

/* Inputs pick up themed surfaces when they use the common border literal */
input, select, textarea {
  color: var(--foreground);
  background-color: var(--surface);
  font-family: var(--font-body);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Skeleton loaders ─────────────────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--hover) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* ── Misc animations kept from before ─────────────────────────────────────── */
@keyframes dotsMove { from { background-position: 0 0; } to { background-position: 60px 60px; } }
.animate-dots { animation: dotsMove 30s linear infinite; }

@keyframes ripple-out {
  0% { width: 0; height: 0; opacity: 0.8; }
  100% { width: 250px; height: 250px; opacity: 0; }
}
.animate-ripple { animation: ripple-out 0.8s ease-out forwards; }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.2s ease-out forwards;
  display: flex;
  align-items: center;
  gap: 8px;
}
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.toast-error { border-left: 3px solid var(--error); }
.toast-success { border-left: 3px solid var(--success); }

@media (max-width: 640px) {
  #toast-container { left: 16px; right: 16px; bottom: 16px; }
  .toast { width: 100%; }
}

/* Theme toggle knob */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  color: var(--secondary);
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--hover); color: var(--accent); }