/* /public/assets/css/style.css */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   1. DARK MODE THEME (Ultra-Premium Midnight Slate)
   ========================================================================== */
:root, [data-theme="dark"] {
  --bg-color: #0b0f19;
  --text-color: #f8fafc;
  --text-muted: #94a3b8;
  --panel-bg: rgba(30, 41, 59, 0.7);
  --panel-border: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(15, 23, 42, 0.9);
  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
  --accent-color: #6366f1;
  --accent-hover: #4f46e5;
  --card-shadow: rgba(0, 0, 0, 0.5);
  --input-bg: #0f172a;
  --profile-bg: #1e293b;
  --logout-bg: rgba(244, 63, 94, 0.15);
  --logout-text: #f43f5e;
  --paid-bg: rgba(16, 185, 129, 0.2);
  --paid-text: #34d399;
  --pending-bg: rgba(245, 158, 11, 0.2);
  --pending-text: #fbbf24;
}

/* ==========================================================================
   2. LIGHT MODE THEME (Clean, High-Contrast Modern Executive SaaS)
   ========================================================================== */
[data-theme="light"] {
  --bg-color: #f8fafc;
  --text-color: #0f172a;
  --text-muted: #334155;
  --panel-bg: #ffffff;
  --panel-border: #cbd5e1;
  --nav-bg: rgba(255, 255, 255, 0.98);
  --sidebar-bg: #ffffff;
  --sidebar-border: #e2e8f0;
  --accent-color: #4f46e5;
  --accent-hover: #4338ca;
  --card-shadow: rgba(15, 23, 42, 0.08);
  --input-bg: #f1f5f9;
  --profile-bg: #f1f5f9;
  --logout-bg: #fee2e2;
  --logout-text: #991b1b;
  --paid-bg: #def7ec;
  --paid-text: #03543f;
  --pending-bg: #fef3c7;
  --pending-text: #92400e;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--input-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  transform: scale(1.08);
}

/* ==========================================================================
   3. HIGH-CONTRAST LIGHT MODE UTILITY OVERRIDES (WCAG AAA Compliant)
   ========================================================================== */
[data-theme="light"] .bg-slate-950,
[data-theme="light"] .bg-slate-900 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .bg-slate-800 {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .bg-purple-950\/40 {
  background-color: #f3e8ff !important;
  border-color: #d8b4fe !important;
}

[data-theme="light"] .bg-purple-950\/40 * {
  color: #581c87 !important;
}

[data-theme="light"] input[type="file"],
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="password"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

[data-theme="light"] input[type="file"]::file-selector-button {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

[data-theme="light"] .bg-slate-950 img,
[data-theme="light"] img.bg-slate-950,
[data-theme="light"] div.bg-slate-950 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-700,
[data-theme="light"] .border-slate-800\/80,
[data-theme="light"] .border-slate-700\/80 {
  border-color: #cbd5e1 !important;
}

/* Fix Brand Gradient Logo Icon Box in Both Themes */
.bg-gradient-primary,
[data-theme="light"] .bg-gradient-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
}

.bg-gradient-primary *,
[data-theme="light"] .bg-gradient-primary * {
  color: #ffffff !important;
}

/* Scope text-white for text elements, BUT NOT FOR ACTION BUTTONS OR GRADIENT BADGES */
[data-theme="light"] h1.text-white,
[data-theme="light"] h2.text-white,
[data-theme="light"] h3.text-white,
[data-theme="light"] h4.text-white,
[data-theme="light"] p.text-white,
[data-theme="light"] span.text-white:not(.btn-card-cta *):not(.btn-gradient *):not(.bg-gradient-primary *):not(.bg-indigo-600 *):not(.bg-indigo-700 *):not(.bg-rose-500 *):not(.bg-emerald-600 *),
[data-theme="light"] div.text-white:not(.btn-card-cta):not(.btn-gradient):not(.bg-indigo-600):not(.bg-gradient-primary) {
  color: #0f172a !important;
}

[data-theme="light"] .text-slate-200,
[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 {
  color: #334155 !important; /* Slate 700 - 100% High Contrast */
  font-weight: 500;
}

[data-theme="light"] .text-slate-500 {
  color: #475569 !important; /* Slate 600 */
}

/* High-Contrast Colored Text in Light Mode */
[data-theme="light"] .text-indigo-300,
[data-theme="light"] .text-indigo-400 {
  color: #3730a3 !important; /* Deep Indigo - Extremely Sharp & Readable */
  font-weight: 700 !important;
}

[data-theme="light"] .text-cyan-400 {
  color: #0e7490 !important; /* Deep Cyan */
  font-weight: 700 !important;
}

[data-theme="light"] .text-amber-400 {
  color: #b45309 !important; /* Deep Amber */
  font-weight: 700 !important;
}

[data-theme="light"] .text-emerald-400 {
  color: #047857 !important; /* Deep Emerald */
  font-weight: 700 !important;
}

[data-theme="light"] .text-purple-300,
[data-theme="light"] .text-purple-400 {
  color: #6b21a8 !important; /* Deep Royal Purple - Highly Visible on Light Backgrounds */
  font-weight: 700 !important;
}

[data-theme="light"] aside#sidebar-menu {
  background-color: #ffffff !important;
  border-right-color: #e2e8f0 !important;
}

[data-theme="light"] aside#sidebar-menu .bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] aside#sidebar-menu .bg-slate-800 span.text-white,
[data-theme="light"] aside#sidebar-menu .bg-slate-800 div.text-white {
  color: #0f172a !important;
}

[data-theme="light"] aside#sidebar-menu nav a.text-slate-300 {
  color: #334155 !important;
}

[data-theme="light"] aside#sidebar-menu nav a.text-slate-300:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="light"] aside#sidebar-menu nav a.bg-slate-800 {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Public Footer High-Contrast Styling */
.public-footer {
  background-color: var(--sidebar-bg);
  border-top: 1px solid var(--panel-border);
  color: var(--text-muted);
}

[data-theme="light"] .public-footer {
  background-color: #ffffff !important;
  border-top-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* Glassmorphism Panels */
.glass-panel {
  background-color: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--panel-border);
  box-shadow: 0 10px 30px -10px var(--card-shadow);
}

[data-theme="light"] .glass-panel {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Status Badges */
.badge-status {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  items-center: center;
  gap: 0.375rem;
}
.badge-paid {
  background-color: var(--paid-bg);
  color: var(--paid-text);
}
.badge-pending {
  background-color: var(--pending-bg);
  color: var(--pending-text);
}

/* Gradient Buttons & Elements */
.btn-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  transition: all 0.2s ease;
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
}

/* Modal Backdrop */
.modal-backdrop {
  background-color: rgba(11, 15, 25, 0.8);
  backdrop-filter: blur(4px);
}
[data-theme="light"] .modal-backdrop {
  background-color: rgba(15, 23, 42, 0.4);
}