/* FreeLines shared theme - dashboard-aligned dark mode */
:root{
  --fl-bg:#F3F4F6;
  --fl-dot:#E5E7EB;
  --fl-text:#0f172a;
}
.dark{
  --fl-bg:#0b1220;
  --fl-dot:rgba(148,163,184,.18);
  --fl-text:#e2e8f0;
}

/* Background pattern used in several pages */
.bg-pattern{
  background-color:var(--fl-bg);
  background-image: radial-gradient(var(--fl-dot) 1px, transparent 1px);
  background-size:20px 20px;
}

/* Small helpers */
.fl-text{ color: var(--fl-text); }
.fl-card{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(226,232,240,.7);
  box-shadow: 0 20px 60px rgba(2,6,23,.12);
}
.dark .fl-card{
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(51,65,85,.7);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Keep form inputs readable in dark mode when pages forgot classes */
.dark input, .dark textarea, .dark select{
  background-color: rgba(15,23,42,.9);
  border-color: rgba(51,65,85,.9);
  color: #e2e8f0;
}
.dark input::placeholder, .dark textarea::placeholder{
  color: rgba(148,163,184,.9);
}
/* Force-align common Tailwind utility colors in dark mode across legacy pages */
.dark .bg-white{ background-color: rgba(15,23,42,.78) !important; }
.dark .bg-gray-50{ background-color: rgba(11,18,32,1) !important; }
.dark .bg-gray-100{ background-color: rgba(11,18,32,1) !important; }
.dark .bg-slate-900{ background-color: rgba(11,18,32,1) !important; }
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300{ border-color: rgba(51,65,85,.8) !important; }
.dark .text-gray-800{ color: #e2e8f0 !important; }
.dark .text-gray-700{ color: rgba(226,232,240,.92) !important; }
.dark .text-gray-600{ color: rgba(148,163,184,.95) !important; }
.dark .text-gray-500{ color: rgba(148,163,184,.8) !important; }
.dark .text-gray-400{ color: rgba(148,163,184,.7) !important; }
.dark .shadow-sm{ box-shadow: 0 12px 40px rgba(0,0,0,.35) !important; }

/* Admin + legacy pages often use hard `bg-white` and pale text.
   We unify surfaces/tables when dark mode is enabled. */
.dark .admin-ui .bg-white,
.dark .admin-ui [class*="bg-white/"],
.dark .admin-ui .bg-gray-50,
.dark .admin-ui [class*="bg-gray-50/"],
.dark .admin-ui .bg-gray-100,
.dark .admin-ui [class*="bg-gray-100/"],
.dark .admin-ui .bg-slate-50{
  background-color: rgba(15,23,42,.82) !important;
}
.dark .admin-ui .text-slate-900,
.dark .admin-ui .text-slate-800{
  color: #e2e8f0 !important;
}
.dark .admin-ui .text-slate-700{ color: rgba(226,232,240,.92) !important; }
.dark .admin-ui .text-slate-600{ color: rgba(148,163,184,.95) !important; }
.dark .admin-ui .text-slate-500,
.dark .admin-ui .text-slate-400{ color: rgba(148,163,184,.90) !important; }
.dark .admin-ui .text-blue-600{ color: #38bdf8 !important; }
.dark .admin-ui .border,
.dark .admin-ui .border-gray-100,
.dark .admin-ui .border-gray-200,
.dark .admin-ui .border-gray-300{ border-color: rgba(51,65,85,.85) !important; }

/* Universal table polish (covers admin tables without fl-table too) */
.admin-ui table{ border-collapse: collapse; width: 100%; }
.admin-ui thead{ background: rgba(148,163,184,.12); }
.dark .admin-ui thead{ background: rgba(148,163,184,.10); }
.admin-ui th{ font-weight: 800; }
.admin-ui th, .admin-ui td{ padding: .85rem .9rem; border-top: 1px solid rgba(226,232,240,.7); }
.dark .admin-ui th, .dark .admin-ui td{ border-top-color: rgba(51,65,85,.75); }
.admin-ui tbody tr:hover{ background: rgba(148,163,184,.08); }
.dark .admin-ui tbody tr:hover{ background: rgba(148,163,184,.10); }

/* Inputs/selects inside admin cards */
.admin-ui input, .admin-ui select, .admin-ui textarea{
  border-radius: 14px;
}

/* Nicer tables */
.fl-table thead{ background: rgba(148,163,184,.12); }
.dark .fl-table thead{ background: rgba(148,163,184,.10); }
.fl-table tbody tr:hover{ background: rgba(148,163,184,.08); }
.dark .fl-table tbody tr:hover{ background: rgba(148,163,184,.10); }

/* Buttons (optional helper classes) */
.fl-btn{
  border-radius: 14px;
  padding: .55rem 1rem;
  font-weight: 700;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.fl-btn:active{ transform: translateY(1px); }
.fl-btn-primary{
  background: linear-gradient(135deg, rgba(99,102,241,1), rgba(236,72,153,1));
  color: #fff;
  box-shadow: 0 16px 40px rgba(99,102,241,.22);
}
.fl-btn-primary:hover{ filter: brightness(1.05); }
.fl-btn-ghost{
  background: rgba(148,163,184,.12);
  border: 1px solid rgba(148,163,184,.22);
}
.dark .fl-btn-ghost{
  background: rgba(148,163,184,.10);
  border: 1px solid rgba(148,163,184,.18);
}

/* Improve focus styles */
input:focus, textarea:focus, select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}


/* Prevent Chrome autofill yellow in dark mode */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark textarea:-webkit-autofill,
.dark textarea:-webkit-autofill:hover,
.dark textarea:-webkit-autofill:focus,
.dark select:-webkit-autofill,
.dark select:-webkit-autofill:hover,
.dark select:-webkit-autofill:focus{
  -webkit-text-fill-color:#e2e8f0;
  caret-color:#e2e8f0;
  transition: background-color 9999s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0px 1000px rgba(15,23,42,.92) inset;
  box-shadow: 0 0 0px 1000px rgba(15,23,42,.92) inset;
  border-color: rgba(51,65,85,.9);
}