/* ====== БАЗА / ТЕМА (сталі змінні) ====== */
:root{
  /* нейтральна темна база */
  --bg:#0a0f1e;
  --card:#0e1530;
  --ink:#e6e9ef;
  --muted:#a7b0c3;

  --border:#1d2a46;
  --border-strong:#2c3e70;

  /* семантичні акценти */
  --accent:#3a5ccc;    /* головний контур/акцент (підсвітки) */
  --emerald:#34d399;   /* завжди зелений! */
  --blue:#60a5fa;
  --rose:#f472b6;      /* окремо рожевий */
  --amber:#fbbf24;

  /* допоміжні */
  --elev-1: 0 6px 18px rgba(0,0,0,.18);
  --elev-2: 0 10px 30px rgba(0,0,0,.26);
}

/* ====== ТЕМИ ====== */
/* Тема — Rose: міняємо базові тла/текст, але emerald лишається зеленим */
body.theme-rose{
  --bg:#3a2b2d;            /* темне тепле тло */
  --card:#4a3538;
  --ink:#f5edf0;
  --muted:#e4ccd2;

  --border:#604247;
  --border-strong:#7d5960;

  --accent: var(--rose);   /* головний акцент = рожевий */
  /* --emerald НЕ чіпаємо, він зелений і стабільний у всіх темах */
  --blue:#f9a8d4;          /* ніжніший синій для гармонії з rose */
  --amber:#fbbf24;
}

/* Тема — Green: холодна темна палітра, акцент = emerald */
body.theme-green{
  --bg:#0d241e;
  --card:#10322b;
  --ink:#eaf5f2;
  --muted:#a5cfc3;

  --border:#1d4f3d;
  --border-strong:#28745c;

  --accent: var(--emerald); /* головний акцент = зелений */
  --blue:#5eead4;
  --amber:#facc15;
}

/* ====== БАЗОВІ СТИЛІ ====== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  background:var(--bg);
  color:var(--ink);
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ====== АНІМАЦІЇ ПЕРЕХОДІВ ====== */
.fade-slide-enter-active,
.fade-slide-leave-active{ transition: all .25s ease }
.fade-slide-enter-from{ opacity:0; transform: translateY(8px) }
.fade-slide-leave-to{ opacity:0; transform: translateY(-8px) }

.fade-out{ animation: fadeOut .25s ease forwards }
@keyframes fadeOut{ to{ opacity:0; transform: scale(.98) } }

/* ====== СІТКИ ====== */
.equal-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 768px){
  .equal-col{ grid-template-columns:1fr }
}

/* ====== КАРТКИ / ПАНЕЛІ ====== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  box-shadow: var(--elev-1);
}
.sav-card{
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  background: color-mix(in oklab, var(--card) 80%, #0000);
  border-radius:12px;
  border:1px solid var(--border);
}
.sav-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
  border-color: var(--border-strong);
}

/* ====== КНОПКИ ====== */
button{
  background:#18223c;
  color:var(--ink);
  border:none;
  padding:10px 16px;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover{ background:#233258; transform: translateY(-1px) }
button:active{ transform: translateY(0) }
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
button.is-primary{
  background: var(--emerald);
  color:#0b1020;
}
button.is-primary:hover{ filter: brightness(1.08) }
button.is-ghost{
  background:transparent;
  border:1px solid var(--border);
}
button.is-ghost:hover{ border-color: var(--border-strong) }

/* ====== ІНПУТИ ====== */
input,select,textarea{
  width:100%;
  background:#0f1526;
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder,textarea::placeholder{ color:#7f879a }
input:hover, select:hover, textarea:hover{
  border-color: var(--border-strong);
}
input:focus,select:focus,textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* ====== ТАБЛИЦІ ====== */
table{ border-collapse: collapse; width:100% }
thead th{
  font-weight:600;
  color:var(--muted);
  font-size:12px;
  padding:8px 6px;
}
tbody td{
  padding:10px 6px;
  border-top:1px solid color-mix(in oklab, var(--muted) 22%, transparent);
}
tbody tr{
  transition: background .18s ease;
}
tbody tr:hover{
  /* адаптивний hover під тему через акцентний колір */
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}

/* ====== ДЕКОР ====== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid color-mix(in oklab, var(--emerald) 40%, transparent);
  color:var(--emerald);
  padding:.15rem .5rem;
  border-radius:999px;
  font-size:12px;
  cursor:default;
}
.text-muted{ color:var(--muted) }
.link{
  color:var(--blue);
  text-decoration:none;
  cursor:pointer;
}
.link:hover{ text-decoration:underline }

/* ====== ХЕЛПЕРИ ====== */
.container{ max-width:1120px; margin:0 auto; padding:0 16px }
.shadow-soft{ box-shadow: var(--elev-2) }
.rounded-xl{ border-radius:14px }
.border{ border:1px solid var(--border) }

/* ====== FALLBACK на випадок, якщо Tailwind не підвантажився ====== */
.h-64 { height: 16rem; }
.p-4 { padding:1rem; }
.text-center { text-align:center; }
.flex { display:flex; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }

/* Дрібні службові (для app.js) */
[v-cloak]{ display:none; }