/* =========================================================
   Dashboard (ServersPi) — richer, smooth, mobile-first
   ========================================================= */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --ink: #101826;
  --muted: #6b7280;
  --primary: #1a237e;
  --accent: #3f51b5;
  --border: #e6e8ef;
  --border-strong: #d4d8e2;
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
  --shadow: 0 8px 24px rgba(10, 15, 30, .06);
  --radius: 16px;
  --radius-sm: 12px;
}
[data-theme="dark"]{
  --bg: #0b1220;
  --card: #0f172a;
  --ink: #e5e7eb;
  --muted: #9aa6b2;
  --primary: #9aa6ff;
  --accent: #8ea2ff;
  --border: #243143;
  --border-strong: #304056;
  --shadow: 0 10px 34px rgba(0,0,0,.45);
}

body{ background: var(--bg); }

.dashboard-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(12px, 3.6vw, 22px);
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); /* nu intra sub bottom-nav */
  color: var(--ink);
}

.page-head{ margin: 4px 0 14px; }
.page-title{
  margin: 0 0 4px;
  font-weight: 900;
  font-size: clamp(22px, 4.5vw, 30px);
  color: var(--primary);
}
.page-sub{ color: var(--muted); margin: 0; }

.section{ margin: 14px 0; }

.section-toggle{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  font-size: 16px; line-height: 1.2;
  color: var(--ink);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--card) 84%, var(--accent) 16%);
  box-shadow: var(--shadow);
  cursor: pointer; user-select: none;
}
.section-toggle i{ color: var(--primary); }

.section-content{ margin-top: 10px; }

.dash-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 3.4vw, 20px);
}
.card-elev{ border: 1px solid var(--border-strong); }
.card-hero{
  background: radial-gradient(1200px 400px at -20% -40%, #e9ecff 0%, transparent 60%),
              radial-gradient(1000px 400px at 120% 120%, #e6f7ff 0%, transparent 60%),
              var(--card);
}

/* Hero (welcome) */
.hero-left{ display:flex; flex-direction:column; gap:6px; }
.hero-title{ font-size: 20px; font-weight: 900; color: var(--primary); }
.hero-sub{ color: var(--muted); }
.hero-text{ color: var(--ink); margin: 8px 0 0; }

/* key/value rows */
.kv{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px; padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.kv:last-child{ border-bottom: 0; }
.kv span{ color: var(--muted); }
.kv b{ color: var(--ink); }
.os-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }

/* buttons (generic) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius: 10px;
  padding: 8px 12px; font-weight: 800; font-size: 14px;
  cursor:pointer; text-decoration:none;
  transition: transform .06s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-sm{ padding: 7px 10px; font-size: 13px; }
.btn-outline{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover{ background:var(--primary); color:#fff; }

/* VPS card & actions */
.vps-card{ padding: 14px; }

/* === CONTROLS GRID: încape mereu, adaptiv === */
.vps-buttons{
  --col-min: 118px;                 /* ajustează ușor dacă vrei (112–140) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min), 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* === BUTOANE: compacte, dar lizibile === */
.vps-action{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--primary);
  color:#fff; border:0; border-radius: 12px;
  padding: 12px 10px;
  font-weight: 800; font-size: 14px;
  cursor:pointer;
  transition: filter .15s ease, transform .06s ease, opacity .15s ease;
}
.vps-action[data-variant="refresh"]{ background: #ff9f43; }
.vps-action:active{ transform: translateY(1px); }
.vps-action:hover{ filter: brightness(.97); }
.vps-action.is-busy{ opacity:.7; cursor: progress; }
.vps-action i{ font-size: 14px; }
.vps-action span{ white-space: nowrap; }

/* === Collapsible cu ease + fără “rupturi” === */
.section-content.collapsible,
.vps-buttons.collapsible{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .48s ease, opacity .28s ease-out;
  will-change: max-height, opacity;
  contain: layout paint;                 /* micșorează reflow-ul */
}
.section-content.collapsible.is-open,
.vps-buttons.collapsible.is-open{
  /* max-height se setează din JS pe px și apoi pe 'none' */
  opacity: 1;
}

/* Responsive */
@media (max-width: 720px){
  .dashboard-wrap{ padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .os-name{ max-width: 64vw; }
}
@media (max-width: 420px){
  .vps-buttons{ --col-min: 112px; }
}
@media (max-width: 360px){
  .vps-buttons{
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* fix 2 pe rând, sigur încape */
    gap: 8px;
  }
  .vps-action{
    padding: 9px 8px;
    font-size: 12.5px;
    gap: 6px;
  }
  .vps-action i{ font-size: 12.5px; }
}