/**
 * AkkinoObras ERP — Themes CSS
 * Obsidian Gold  (dark)      — padrão, não alterado
 * Abyssal Neon   (deep-blue) — gradiente oceano profundo
 * Crystal Sky    (light)     — azul suave + gradiente aéreo
 */

/* ── OBSIDIAN GOLD — dark (padrão) ────────────────────────── */
[data-theme="dark"], :root {
  --color-primary:        #f0c93a;
  --color-primary-hover:  #e8a820;
  --color-primary-muted:  rgba(240,201,58,.10);
  --color-primary-glow:   rgba(240,201,58,.25);
  --color-bg:             #080808;
  --color-surface:        #111111;
  --color-surface-2:      #181818;
  --color-surface-3:      #1e1e1e;
  --color-border:         rgba(255,255,255,.07);
  --color-border-light:   rgba(255,255,255,.12);
  --color-text:           #f2f2f2;
  --color-text-secondary: #a0a0a0;
  --color-text-muted:     #555555;
  --color-danger:         #f87171;
  --color-danger-bg:      rgba(248,113,113,.12);
  --color-success:        #4ade80;
  --color-success-bg:     rgba(74,222,128,.12);
  --color-warning:        #fbbf24;
  --color-warning-bg:     rgba(251,191,36,.12);
  --color-info:           #60a5fa;
  --color-info-bg:        rgba(96,165,250,.12);
  --shadow-sm:            0 1px 3px rgba(0,0,0,.4);
  --shadow-md:            0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:            0 8px 24px rgba(0,0,0,.6);
  --shadow-card:          0 2px 12px rgba(0,0,0,.4);
  --shadow-primary:       0 4px 20px rgba(240,201,58,.25);
  --btn-gradient:         linear-gradient(135deg,#f0c93a 0%,#e8a820 50%,#d49010 100%);
  --card-gradient:        linear-gradient(160deg,#181818 0%,#141414 60%,#121212 100%);
  --sidebar-gradient:     linear-gradient(180deg,#0e0e0e 0%,#080808 100%);
}

[data-theme="dark"] [data-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(240,201,58,.045) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(200,140,20,.03) 0%, transparent 55%),
    #080808;
  min-height: 100vh;
}

/* Fallback para quando o atributo ainda não foi injetado (prevenção de flash branco) */
:root:not([data-theme]) body {
  background: #080808;
}

/* Fallback para quando o atributo ainda não foi injetado (prevenção de flash branco) */
:root:not([data-theme]) body {
  background: #080808;
}

/* ── ABYSSAL NEON — deep-blue ─────────────────────────────── */
[data-theme="deep-blue"] {
  --color-primary:        #22d3ee;
  --color-primary-hover:  #0ea5e9;
  --color-primary-muted:  rgba(34,211,238,.10);
  --color-primary-glow:   rgba(34,211,238,.30);
  --color-bg:             #01090f;
  --color-surface:        #020d1a;
  --color-surface-2:      #031220;
  --color-surface-3:      #041830;
  --color-border:         rgba(34,211,238,.07);
  --color-border-light:   rgba(34,211,238,.14);
  --color-text:           #e0f8ff;
  --color-text-secondary: #67c4d8;
  --color-text-muted:     #2a6070;
  --color-danger:         #fb7185;
  --color-danger-bg:      rgba(251,113,133,.12);
  --color-success:        #34d399;
  --color-success-bg:     rgba(52,211,153,.12);
  --color-warning:        #fbbf24;
  --color-warning-bg:     rgba(251,191,36,.12);
  --color-info:           #38bdf8;
  --color-info-bg:        rgba(56,189,248,.12);
  --shadow-sm:            0 1px 3px rgba(0,10,30,.6);
  --shadow-md:            0 4px 16px rgba(0,10,30,.7);
  --shadow-lg:            0 8px 32px rgba(0,10,30,.85);
  --shadow-card:          0 2px 12px rgba(0,10,30,.5);
  --shadow-primary:       0 4px 20px rgba(34,211,238,.25);
  --btn-gradient:         linear-gradient(135deg,#22d3ee 0%,#0ea5e9 50%,#0284c7 100%);
  --card-gradient:        linear-gradient(160deg,#031525 0%,#021020 60%,#020d1a 100%);
  --sidebar-gradient:     linear-gradient(180deg,#020e1c 0%,#010912 100%);
}

[data-theme="deep-blue"] body {
  background:
    radial-gradient(ellipse 70% 55% at 15% 5%, rgba(34,211,238,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(6,182,212,.04) 0%, transparent 50%),
    linear-gradient(180deg, #01090f 0%, #010d17 100%);
  min-height: 100vh;
}

[data-theme="deep-blue"] .sidebar {
  background: var(--sidebar-gradient);
  border-right: 1px solid rgba(34,211,238,.07);
}

[data-theme="deep-blue"] .card,
[data-theme="deep-blue"] .header {
  background: var(--card-gradient);
  border-color: rgba(34,211,238,.07);
}

[data-theme="deep-blue"] .btn-primary,
[data-theme="deep-blue"] .btn.btn-primary {
  background: var(--btn-gradient);
  box-shadow: 0 0 12px rgba(34,211,238,.3);
}

/* ── CRYSTAL SKY — light ──────────────────────────────────── */
[data-theme="light"] {
  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-muted:  rgba(37,99,235,.08);
  --color-primary-glow:   rgba(37,99,235,.18);
  --color-bg:             #f1f6fe;
  --color-surface:        #ffffff;
  --color-surface-2:      #f7f9ff;
  --color-surface-3:      #eef4ff;
  --color-border:         rgba(37,99,235,.10);
  --color-border-light:   rgba(37,99,235,.18);
  --color-text:           #0c1a3a;
  --color-text-secondary: #3d5580;
  --color-text-muted:     #90a8cc;
  --color-danger:         #dc2626;
  --color-danger-bg:      rgba(220,38,38,.10);
  --color-success:        #16a34a;
  --color-success-bg:     rgba(22,163,74,.10);
  --color-warning:        #d97706;
  --color-warning-bg:     rgba(217,119,6,.10);
  --color-info:           #2563eb;
  --color-info-bg:        rgba(37,99,235,.10);
  --shadow-sm:            0 1px 4px rgba(37,99,235,.10);
  --shadow-md:            0 4px 16px rgba(37,99,235,.13);
  --shadow-lg:            0 8px 32px rgba(37,99,235,.16);
  --shadow-card:          0 2px 12px rgba(37,99,235,.08);
  --shadow-primary:       0 4px 20px rgba(37,99,235,.20);
  --btn-gradient:         linear-gradient(135deg,#3b82f6 0%,#2563eb 50%,#1d4ed8 100%);
  --card-gradient:        linear-gradient(160deg,#fff 0%,#fafcff 60%,#f5f9ff 100%);
  --sidebar-gradient:     linear-gradient(180deg,#fff 0%,#f7f9ff 100%);
}

[data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(37,99,235,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(99,155,255,.05) 0%, transparent 55%),
    linear-gradient(160deg, #eef4ff 0%, #f4f9ff 50%, #edf3ff 100%);
  min-height: 100vh;
}

[data-theme="light"] .sidebar {
  background: var(--sidebar-gradient);
  border-right: 1px solid rgba(37,99,235,.10);
}

[data-theme="light"] .card,
[data-theme="light"] .header {
  background: var(--card-gradient);
  border-color: rgba(37,99,235,.10);
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .btn.btn-primary {
  background: var(--btn-gradient);
  box-shadow: 0 0 10px rgba(37,99,235,.2);
}

/* ── Stat cards — top accent bar ─────────────────────────── */
.stat-card,
.card[class*="stat"] {
  position: relative;
  overflow: hidden;
}
.stat-card::before,
.card[class*="stat"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--btn-gradient);
  opacity: .75;
}

/* ── Nav item active accent bar ──────────────────────────── */
.nav-item.active,
.sidebar-nav .active {
  background: var(--color-primary-muted);
  color: var(--color-primary);
  position: relative;
}
.nav-item.active::before,
.sidebar-nav .active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 9px 9px 0;
  background: var(--btn-gradient);
}

/* ── Previews na página de configurações ─────────────────── */
.theme-preview {
  border-radius: 12px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.theme-preview:hover {
  transform: translateY(-3px);
}
.theme-preview.active {
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

/* Dark preview */
.theme-preview-dark {
  background: linear-gradient(160deg, #111 0%, #0d0d0d 100%);
  border-color: rgba(240,201,58,.2);
}
.theme-preview-dark.active { border-color: #f0c93a; }

/* Deep Blue preview */
.theme-preview-deep-blue {
  background: linear-gradient(160deg, #020d1a 0%, #01090f 100%);
  border-color: rgba(34,211,238,.15);
}
.theme-preview-deep-blue.active { border-color: #22d3ee; }

/* Light preview */
.theme-preview-light {
  background: linear-gradient(160deg, #fff 0%, #f0f6ff 100%);
  border-color: rgba(37,99,235,.15);
}
.theme-preview-light.active { border-color: #2563eb; }

.theme-preview::after {
  content: attr(data-label);
  display: block;
  padding: 7px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
}
.theme-preview-dark::after       { color: #f0c93a; background: rgba(240,201,58,.06); border-top: 1px solid rgba(240,201,58,.10); }
.theme-preview-deep-blue::after  { color: #22d3ee; background: rgba(34,211,238,.05); border-top: 1px solid rgba(34,211,238,.08); }
.theme-preview-light::after      { color: #2563eb; background: rgba(37,99,235,.05);  border-top: 1px solid rgba(37,99,235,.10); }

.theme-preview-inner {
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 72px;
}
.tp-bar  { height: 4px; border-radius: 9px; width: 55%; }
.tp-bar2 { height: 3px; border-radius: 9px; width: 32%; opacity: .5; }
.tp-dots { display: flex; gap: 4px; margin-top: auto; }
.tp-dot  { width: 5px; height: 5px; border-radius: 50%; opacity: .65; }

.theme-preview-dark      .tp-bar,
.theme-preview-dark      .tp-bar2,
.theme-preview-dark      .tp-dot  { background: #f0c93a; }

.theme-preview-deep-blue .tp-bar,
.theme-preview-deep-blue .tp-bar2,
.theme-preview-deep-blue .tp-dot  { background: #22d3ee; }

.theme-preview-light     .tp-bar,
.theme-preview-light     .tp-bar2,
.theme-preview-light     .tp-dot  { background: #2563eb; }