/* ===== SaaS Advanced Theme ===== */
:root {
  /* Colors */
  --primary: #6e64f0;
  --primary-2: #00d4ff;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --bg: #f6f8fc;
  --surface: #ffffff;
  --text: rgb(0, 0, 0);
  --muted: #64748b;
  --border: #e2e8f0;
  --shadow: 0 14px 36px rgba(15, 23, 42, 0.12);

  /* Radii & spacing */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --container: 1200px;

  /* Effects */
  --card-accent: linear-gradient(90deg, var(--primary), var(--primary-2));
}

/* Dark mode (auto + manual via data-theme="dark") */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0b1220; --surface: #0f172a; --text: #f8fafc; --muted: #cbd5e1; --border: #334155; --shadow: 0 14px 36px rgba(2, 6, 23, 0.6); }
}

[data-theme="dark"] {
  --bg: #0b1220; --surface: #0f172a; --text: #f8fafc; --muted: #cbd5e1; --border: #334155; --shadow: 0 14px 36px rgba(2, 6, 23, 0.6);
}

[data-theme="light"] {
  --bg: #f6f8fc; --surface: #ffffff; --text: rgb(0, 0, 0); --muted: #64748b; --border: #e2e8f0; --shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ===== Navbar ===== */
.navbar { background: linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 100%); box-shadow: 0 8px 24px rgba(13, 110, 253, 0.25); }
.navbar-brand { letter-spacing: .4px; font-weight: 600; }
.nav-link { color: #fff; opacity: .9; transition: opacity .15s ease; }
.nav-link:hover { opacity: 1; }

/* ===== Container ===== */
main.container { max-width: var(--container); }

/* ===== Cards (glass + accent top) ===== */
.card { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow); background: var(--surface); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-accent); }
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16); }
.card .badge { font-size: .85rem; background: rgba(110, 100, 240, .12); color: var(--primary); border-radius: 999px; padding: .35rem .55rem; }
.card .text-muted { color: var(--muted) !important; }

/* KPI blocks */
.kpi { display: flex; gap: .75rem; align-items: center; }
.kpi .value { font-size: 1.25rem; font-weight: 600; }
.kpi .label { color: var(--muted); }

/* ===== Buttons ===== */
.btn-primary { background-color: var(--primary); border-color: var(--primary); box-shadow: 0 8px 20px rgba(110, 100, 240, .35); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-outline-light { border-color: rgba(255,255,255,.75); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); }

/* ===== Forms ===== */
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface); color: var(--text); transition: box-shadow .15s ease, border-color .15s ease; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .25rem rgba(110, 100, 240, .18); }
.input-group-text { background: var(--surface); border-color: var(--border); }

/* Floating labels (Bootstrap-compatible) */
.form-floating>.form-control, .form-floating>.form-select { border-radius: var(--radius-sm); }

/* ===== Tables ===== */
.table-modern { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-modern thead th { background: linear-gradient(180deg, rgba(110,100,240,.12), rgba(110,100,240,.04)); color: var(--text); border-bottom: 1px solid var(--border); padding: .75rem; font-weight: 600; }
.table-modern tbody td { border-bottom: 1px solid var(--border); padding: .75rem; color: var(--text); }
.table-modern tbody tr:hover { background: rgba(13,110,253,.05); }
.table-modern .status { border-radius: 999px; padding: .2rem .55rem; font-size: .8rem; }
.status-success { background: rgba(34,197,94,.15); color: var(--success); }
.status-warning { background: rgba(245,158,11,.15); color: var(--warning); }
.status-danger { background: rgba(239,68,68,.15); color: var(--danger); }

/* ===== Chips & Badges ===== */
.chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .25rem .6rem; background: rgba(2,132,199,.12); color: #0284c7; font-size: .85rem; }

/* ===== Animations ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.card, .navbar { animation: fadeInUp .25s ease both; }
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400px 100px; animation: shimmer 1.25s infinite;
}

/* ===== Utilities ===== */
.shadow-lg { box-shadow: var(--shadow) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.text-muted { color: var(--muted) !important; }
.bg-surface { background: var(--surface) !important; }

/* ===== Hero banner (optional usage) ===== */
.hero { border-radius: var(--radius-lg); padding: 1.25rem; background: radial-gradient(1200px 300px at 10% -10%, rgba(110,100,240,.25), transparent 60%), radial-gradient(1200px 300px at 90% -10%, rgba(0,212,255,.25), transparent 60%), linear-gradient(90deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: var(--shadow); }
.hero h1 { font-weight: 700; letter-spacing: .4px; }

/* ===== Responsive tweaks ===== */
@media (max-width: 992px) { main.container { max-width: 100%; padding-left: .75rem; padding-right: .75rem; } .navbar .navbar-collapse { padding: .5rem 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Readability fixes for dark backgrounds */
.form-label, .form-floating label { color: var(--text); font-weight: 600; }
.form-control::placeholder, .form-select::placeholder { color: var(--muted); opacity: 1; }

/* ===== High-contrast text helpers (theme-aware) ===== */
:root { --muted-contrast: #374151; }
@media (prefers-color-scheme: dark) { :root { --muted-contrast: #e2e8f0; } }
[data-theme="dark"] { --muted-contrast: #e2e8f0; }
[data-theme="light"] { --muted-contrast: #374151; }

/* Increase readability of muted/secondary texts */
.text-muted { color: var(--muted-contrast) !important; }
[data-theme="dark"] .text-secondary { color: var(--muted-contrast) !important; }

/* Avoid white text on light surfaces inside content areas */
[data-theme="light"] main .text-white,
[data-theme="light"] .card .text-white,
[data-theme="light"] .table-modern .text-white { color: #0f172a !important; }

@media (max-width: 768px) {
  .card { border-radius: var(--radius-sm); }
  .card .badge { font-size: .8rem; }
  .table-modern thead th, .table-modern tbody td { padding: .6rem; }
  .kpi { gap: .5rem; }
  .kpi .value { font-size: 1.1rem; }
}

@media (max-width: 576px) {
  body { font-size: .95rem; }
  main.container { margin-top: 1rem; margin-bottom: 1rem; padding-left: .5rem; padding-right: .5rem; }
  .navbar .navbar-brand { font-size: 1rem; }
  .hero { padding: .75rem; }
  .hero h1 { font-size: clamp(1rem, 3vw + .8rem, 1.4rem); }
  .kpi { flex-direction: column; align-items: flex-start; }
  .btn { font-size: .95rem; padding: .45rem .75rem; }
  .table-modern thead th, .table-modern tbody td { padding: .5rem; }
}