/* ─── Theme 2 — Synthwave ───────────────────────────────────────────────────── */
/*   Font: Space Grotesk (injected dynamically by mountTheme when active)        */
/*   Dark mode:  :root (default)                                                 */
/*   Light mode: body.theme-light                                                */

/* ─── Dark mode variables (default) ────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg:    #09071e;
  --surf:  #110e32;
  --surf2: #1a1748;
  --surf3: #221e5c;

  --border:  rgba(180,50,255,.22);
  --border2: rgba(180,50,255,.42);

  /* Accent aliases — pink leads, blue supports */
  --lav:  #b44fff;
  --lav2: #8b2be2;
  --peri: #00d4ff;
  --mint: #00f5c4;
  --rose: #ff3d9a;

  --text:   rgba(255,255,255,.88);
  --muted:  rgba(210,190,255,.52);
  --muted2: rgba(210,190,255,.28);

  --danger-bg:     rgba(255,50,100,.12);
  --danger-border: rgba(255,50,100,.55);
  --danger-text:   #ff5577;
  --danger-solid:  #ff2255;

  --success-bg:     rgba(0,245,196,.10);
  --success-border: rgba(0,245,196,.45);
  --success-text:   #00f5c4;

  --warn-bg:     rgba(255,210,50,.09);
  --warn-border: rgba(255,210,50,.45);
  --warn-text:   #ffd600;

  --font: 'Space Grotesk', sans-serif;

  --nav-bg:   #110e32;
  --btn-from: #ff3d9a;
  --btn-to:   #b44fff;

  /* Glow helpers */
  --glow-pink: 0 0 8px rgba(255,61,154,.55), 0 0 22px rgba(255,61,154,.18);
  --glow-blue: 0 0 8px rgba(0,212,255,.55),  0 0 22px rgba(0,212,255,.18);
  --glow-purp: 0 0 8px rgba(180,79,255,.55), 0 0 22px rgba(180,79,255,.18);
}

/* ─── Light mode variable overrides ────────────────────────────────────────── */
body.theme-light {
  color-scheme: light;

  --bg:    #f4f0ff;
  --surf:  #ffffff;
  --surf2: #ede8ff;
  --surf3: #e0d8ff;

  --border:  rgba(130,40,200,.18);
  --border2: rgba(130,40,200,.36);

  --lav:  #7b2ecc;
  --lav2: #5e22a0;
  --peri: #0070a8;
  --mint: #007a64;
  --rose: #c4185a;

  --text:   #1a0a2e;
  --muted:  rgba(50,15,85,.55);
  --muted2: rgba(50,15,85,.30);

  --danger-bg:     rgba(196,24,90,.07);
  --danger-border: rgba(196,24,90,.28);
  --danger-text:   #a01248;
  --danger-solid:  #c4185a;

  --success-bg:     rgba(0,120,90,.07);
  --success-border: rgba(0,120,90,.28);
  --success-text:   #006048;

  --warn-bg:     rgba(150,110,0,.07);
  --warn-border: rgba(150,110,0,.28);
  --warn-text:   #7a5800;

  --nav-bg:   #ffffff;
  --btn-from: #c4185a;
  --btn-to:   #7b2ecc;

  --glow-pink: 0 2px 10px rgba(196,24,90,.22);
  --glow-blue: 0 2px 10px rgba(0,112,168,.22);
  --glow-purp: 0 2px 10px rgba(123,46,204,.22);
}

/* ─── Base ─────────────────────────────────────────────────────────────────── */

body.app {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.page-title    { color: var(--text); }
.page-subtitle { color: var(--muted); }

/* ─── Synthwave ambient pulse (injected by mountTheme as .synth-orbs) ──────── */

.synth-orbs {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Pink orb — top right */
.synth-orbs::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -180px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,61,154,.22) 0%, transparent 65%);
  animation: synth-pulse-a 7s ease-in-out infinite alternate;
}

/* Blue orb — bottom left */
.synth-orbs::after {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -160px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,.18) 0%, transparent 65%);
  animation: synth-pulse-b 9s ease-in-out infinite alternate;
}

@keyframes synth-pulse-a {
  0%   { opacity: .55; transform: scale(.90); }
  100% { opacity: 1;   transform: scale(1.10); }
}
@keyframes synth-pulse-b {
  0%   { opacity: .70; transform: scale(1.05); }
  100% { opacity: .35; transform: scale(.92); }
}

body.theme-light .synth-orbs::before {
  background: radial-gradient(circle, rgba(196,24,90,.10) 0%, transparent 65%);
}
body.theme-light .synth-orbs::after {
  background: radial-gradient(circle, rgba(0,112,168,.10) 0%, transparent 65%);
}

/* ─── Navbar ───────────────────────────────────────────────────────────────── */

.navbar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}

body.theme-light .navbar {
  box-shadow: 0 1px 12px rgba(130,40,200,.08);
}

.navbar-brand { color: var(--text); }

.nav-link { color: var(--muted); }
.nav-link:hover {
  background: rgba(180,79,255,.10);
  color: var(--text);
}
.nav-link.active {
  background: rgba(255,61,154,.10);
  color: var(--rose);
  border: 1px solid rgba(255,61,154,.28);
}

.btn-logout {
  background: rgba(180,79,255,.08);
  border: 1px solid var(--border);
  color: var(--muted);
}
.btn-logout:hover {
  background: rgba(180,79,255,.16);
  color: var(--text);
}

/* ─── Nav dropdown ─────────────────────────────────────────────────────────── */

.nav-dropdown-toggle { color: var(--muted); }
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
  background: rgba(180,79,255,.10);
  color: var(--text);
}

.nav-dropdown-menu {
  background: var(--surf);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 32px rgba(9,7,30,.70), var(--glow-purp);
}

body.theme-light .nav-dropdown-menu {
  box-shadow: 0 8px 24px rgba(50,15,85,.12);
}

.nav-dropdown-item { color: var(--text); }
a.nav-dropdown-item:hover,
button.nav-dropdown-item:hover { background: rgba(180,79,255,.08); }
.nav-dropdown-item-disabled { color: var(--muted); }
.nav-dropdown-note   { color: var(--muted); }
.nav-dropdown-divider { background: var(--border); }
.nav-dropdown-logout  { color: var(--danger-text); }
.nav-dropdown-logout:hover { background: var(--danger-bg) !important; }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */

.btn,
.btn-primary {
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: #fff;
  box-shadow: var(--glow-pink);
}
.btn:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--btn-to), var(--btn-from));
  box-shadow: var(--glow-purp);
}
.btn:disabled,
.btn-primary:disabled {
  background: var(--surf3);
  color: var(--muted);
  box-shadow: none;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
}
.btn-secondary:hover {
  background: var(--surf2);
  border-color: var(--border2);
  color: var(--text);
}

.btn-danger {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}

.btn-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}
.btn-success:hover  { filter: brightness(1.08); }
.btn-success:disabled { background: var(--surf3); color: var(--muted); }

.btn-edit   { background: rgba(0,212,255,.10); color: var(--peri); }
.btn-edit:hover { background: rgba(0,212,255,.18); }
.btn-delete { background: var(--danger-bg); color: var(--danger-text); }
.btn-delete:hover { filter: brightness(1.08); }

.btn-remove       { color: var(--danger-text); }
.btn-remove:hover { color: var(--danger-solid); }

/* ─── Panels / Cards ───────────────────────────────────────────────────────── */

.panel, .stat-card, .filter-bar, .table-wrap,
.doc-card, .history-card, .action-card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.panel-title { color: var(--text); }

/* ─── Stat cards ───────────────────────────────────────────────────────────── */

.stat-card .stat-value { color: var(--rose); }
.stat-card .stat-label { color: var(--muted); }
.stat-card .stat-sub   { color: var(--muted); }

.stat-card.accent-blue   { border-top: 3px solid var(--peri); }
.stat-card.accent-orange { border-top: 3px solid var(--rose); }
.stat-card.accent-green  { border-top: 3px solid var(--mint); }
.stat-card.accent-purple { border-top: 3px solid var(--lav); }
.stat-card.accent-slate  { border-top: 3px solid var(--muted); }

/* ─── Tables ───────────────────────────────────────────────────────────────── */

thead { background: var(--surf2); }
th { color: var(--muted); border-bottom: 1px solid var(--border); }
td { color: var(--text); border-bottom: 1px solid var(--border); }
tbody tr:hover { background: rgba(180,79,255,.06); }

.empty-state { color: var(--muted); }

th.col-drag-over {
  background: rgba(255,61,154,.07);
  box-shadow: inset 3px 0 0 0 var(--rose);
}

/* ─── Form inputs ──────────────────────────────────────────────────────────── */

label { color: var(--muted); }

input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea,
select {
  background-color: rgba(180,79,255,.07);
  border: 1px solid var(--border2);
  color: var(--text);
}

body.theme-light input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
body.theme-light textarea,
body.theme-light select {
  background-color: var(--surf);
}

input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(255,61,154,.16);
  outline: none;
  background-color: rgba(180,79,255,.12);
}

body.theme-light input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
body.theme-light textarea:focus,
body.theme-light select:focus {
  background-color: var(--surf) !important;
  box-shadow: 0 0 0 3px rgba(196,24,90,.12);
}

input[type="file"] { color: var(--muted); }

/* Native dropdown popup colors */
select { color-scheme: dark; }
body.theme-light select { color-scheme: light; }

option {
  background-color: #1a1748;
  color: rgba(255,255,255,.88);
}
body.theme-light option {
  background-color: #ffffff;
  color: #1a0a2e;
}

/* ─── Filter bar ───────────────────────────────────────────────────────────── */

.filter-group label { color: var(--muted); }

/* ─── Pagination ───────────────────────────────────────────────────────────── */

.pagination-info { color: var(--muted); }
.pagination .btn-sm {
  background: var(--surf);
  border: 1px solid var(--border2);
  color: var(--text);
}
.pagination .btn-sm:hover:not(:disabled) { background: var(--surf2); }
.pagination .btn-sm:disabled { opacity: 0.4; }

/* ─── Flash / alert messages ───────────────────────────────────────────────── */

.msg.success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  display: block;
}
.msg.error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  display: block;
}
.msg.warning {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  display: block;
}

/* ─── Status badges ────────────────────────────────────────────────────────── */

.badge-draft            { background: var(--surf2);               color: var(--muted); }
.badge-submitted        { background: rgba(0,212,255,.12);        color: var(--peri); }
.badge-pending_approval { background: rgba(255,61,154,.12);       color: var(--rose); }
.badge-approved         { background: rgba(0,245,196,.10);        color: var(--mint); }
.badge-rejected         { background: var(--danger-bg);           color: var(--danger-text); }

/* ─── Grand total bar ──────────────────────────────────────────────────────── */

.grand-total {
  background: var(--surf2);
  border: 1px solid var(--border);
  color: var(--text);
}
.grand-total span { color: var(--rose); }

/* ─── Line items table ─────────────────────────────────────────────────────── */

.li-wrap { background: var(--surf); border-color: var(--border); }

/* ─── PO detail document ───────────────────────────────────────────────────── */

.doc-header { background: var(--surf2); color: var(--text); border-bottom: 1px solid var(--border); }
.doc-header-left p { color: var(--muted); opacity: 1; }
.doc-body   { background: var(--surf); }
.doc-meta   { border-bottom: 1px solid var(--border); }
.doc-section-title { color: var(--muted); }
.doc-field         { color: var(--muted); }
.doc-field strong  { color: var(--text); }
.doc-notes-box     { background: var(--surf2); color: var(--text); }
.doc-grand-total   { border-top: 2px solid var(--border); color: var(--text); }
.doc-grand-total span { color: var(--rose); }

.action-card { border-left: 4px solid var(--rose); }
.action-card .action-title { color: var(--text); }

/* ─── History / audit ──────────────────────────────────────────────────────── */

.history-item { border-bottom: 1px solid var(--border); }
.history-meta { color: var(--muted); }
.history-note { color: var(--muted); }

/* ─── Modals ───────────────────────────────────────────────────────────────── */

.file-modal-backdrop {
  background: rgba(9,7,30,.72);
  backdrop-filter: blur(14px);
}
body.theme-light .file-modal-backdrop {
  background: rgba(26,10,46,.45);
  backdrop-filter: blur(12px);
}

.file-modal {
  background: var(--surf);
  border: 1px solid var(--border2);
  box-shadow: 0 16px 48px rgba(9,7,30,.60), var(--glow-purp);
}
body.theme-light .file-modal {
  box-shadow: 0 16px 48px rgba(50,15,85,.14);
}
.file-modal-header { border-bottom: 1px solid var(--border); }
.file-modal-title  { color: var(--text); }
.file-modal-close  { color: var(--muted); }
.file-modal-close:hover { background: var(--surf2); color: var(--text); }
.file-modal-body   { background: var(--surf2); }
.file-modal-no-preview { color: var(--muted); }