/* =========================================================
   VELAEA CENTER - GLOBAL THEME SYSTEM
   File: /assets/theme.css
   ใช้ร่วมทุกหน้า: login, register, customer dashboard, admin pages
   ========================================================= */

:root{
  --velaea-theme-transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* ---------- Light Theme Default ---------- */
html[data-theme="light"],
html:not([data-theme]),
body.light-mode{
  --vc-bg:#ffffff;
  --vc-bg-soft:#f7f9fc;
  --vc-bg-gradient:linear-gradient(180deg,#ffffff 0%,#f8fbff 52%,#ffffff 100%);

  --vc-surface:#ffffff;
  --vc-surface-2:#f8fbff;
  --vc-card:#ffffff;
  --vc-card-2:#f7f9fc;

  --vc-text:#09182a;
  --vc-heading:#061a2f;
  --vc-muted:#657386;

  --vc-line:#e8edf3;
  --vc-line-gold:rgba(200,149,46,.26);

  --vc-gold:#c8952e;
  --vc-gold-2:#f2c76a;
  --vc-gold-soft:rgba(200,149,46,.10);

  --vc-green:#15964f;
  --vc-red:#d64545;
  --vc-blue:#316dca;

  --vc-shadow:0 20px 55px rgba(8,24,42,.10);
  --vc-shadow-soft:0 10px 30px rgba(6,26,47,.08);

  --vc-input-bg:#ffffff;
  --vc-input-text:#09182a;
  --vc-input-border:#d9e1ec;

  --vc-sidebar-bg:linear-gradient(180deg,#ffffff,#f8fbff 58%,#ffffff);
  --vc-topbar-bg:rgba(255,255,255,.90);
}

/* ---------- Dark Theme ---------- */
html[data-theme="dark"],
body.dark-mode{
  --vc-bg:#020814;
  --vc-bg-soft:#06111f;
  --vc-bg-gradient:
    radial-gradient(circle at 78% 0,rgba(242,199,106,.09),transparent 28%),
    linear-gradient(180deg,#020814 0%,#06111f 54%,#020814 100%);

  --vc-surface:#07111f;
  --vc-surface-2:#0a1625;
  --vc-card:#0a1625;
  --vc-card-2:#071321;

  --vc-text:#f7fbff;
  --vc-heading:#f7fbff;
  --vc-muted:#9fb0c3;

  --vc-line:rgba(255,255,255,.08);
  --vc-line-gold:rgba(242,199,106,.16);

  --vc-gold:#f2c76a;
  --vc-gold-2:#ffd978;
  --vc-gold-soft:rgba(242,199,106,.10);

  --vc-green:#58d878;
  --vc-red:#ff6868;
  --vc-blue:#4ea5ff;

  --vc-shadow:0 22px 60px rgba(0,0,0,.32);
  --vc-shadow-soft:0 14px 40px rgba(0,0,0,.22);

  --vc-input-bg:#06111f;
  --vc-input-text:#ffffff;
  --vc-input-border:rgba(242,199,106,.14);

  --vc-sidebar-bg:linear-gradient(180deg,#03101f,#06111f 55%,#020814);
  --vc-topbar-bg:rgba(2,8,20,.88);
}

/* Apply base theme */
html,
body{
  transition:var(--velaea-theme-transition);
}

body{
  background:var(--vc-bg-gradient, var(--vc-bg));
  color:var(--vc-text);
}

/* Common surfaces */
.theme-surface,
.panel,
.card,
.auth-card,
.metric,
.ea-card,
details{
  background:var(--vc-card);
  color:var(--vc-text);
  border-color:var(--vc-line-gold);
  transition:var(--velaea-theme-transition);
}

.theme-muted,
.muted,
small,
.help-text{
  color:var(--vc-muted)!important;
}

.theme-heading,
h1,h2,h3,h4,h5,h6{
  color:var(--vc-heading);
}

/* Inputs */
input,
select,
textarea{
  background:var(--vc-input-bg)!important;
  color:var(--vc-input-text)!important;
  border-color:var(--vc-input-border)!important;
  transition:var(--velaea-theme-transition);
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(242,199,106,.48)!important;
  box-shadow:0 0 0 4px rgba(242,199,106,.08)!important;
}

/* Buttons */
.btn-gold,
.theme-gold-btn{
  background:linear-gradient(135deg,var(--vc-gold-2),var(--vc-gold))!important;
  color:#1d1205!important;
  border-color:transparent!important;
}

.btn-outline,
.btn-ghost,
.btn-dark,
.theme-soft-btn{
  background:rgba(255,255,255,.04);
  color:var(--vc-text);
  border-color:var(--vc-line-gold);
}

/* Theme Toggle */
.theme-toggle{
  border:1px solid var(--vc-line-gold);
  background:rgba(255,255,255,.08);
  color:var(--vc-text);
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:var(--vc-shadow-soft);
  transition:.2s ease;
  user-select:none;
}

.theme-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(242,199,106,.7);
}

.theme-toggle .theme-icon{
  font-size:15px;
  line-height:1;
}

.theme-toggle .theme-text{
  font-size:11px;
}

.theme-toggle.is-icon-only{
  width:42px;
  padding:0;
}

/* Global scrollbar */
html{
  scrollbar-width:thin;
  scrollbar-color:rgba(242,199,106,.65) rgba(2,8,20,.9);
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:var(--vc-bg);
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--vc-gold-2),var(--vc-gold));
  border-radius:999px;
  border:2px solid var(--vc-bg-soft);
}

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ffe08a,var(--vc-gold));
}

/* Selection */
*::selection{
  background:rgba(242,199,106,.30);
}

/* Theme image switch utility */
.theme-img-dark{display:none!important;}
.theme-img-light{display:block!important;}

html[data-theme="dark"] .theme-img-light,
body.dark-mode .theme-img-light{
  display:none!important;
}

html[data-theme="dark"] .theme-img-dark,
body.dark-mode .theme-img-dark{
  display:block!important;
}