/* Webtop Manager — shadcn/ui-inspired dark theme (zinc), hand-rolled in plain
   CSS so the app stays a dependency-free server-rendered FastAPI/Jinja app. */
:root {
  --background:#09090b; --card:#101012; --card-2:#161619;
  --border:#27272a; --input:#27272a; --ring:#52525b;
  --foreground:#fafafa; --muted:#18181b; --muted-foreground:#a1a1aa;
  --primary:#fafafa; --primary-foreground:#18181b;
  --secondary:#27272a; --secondary-foreground:#fafafa;
  --destructive:#7f1d1d; --destructive-fg:#fecaca;
  --accent:#3b82f6; --ok:#22c55e; --warn:#f59e0b;
  --radius:2px;
}
* { box-sizing:border-box; }
html { color-scheme:dark; }
/* Inline icon sprite must not take up a line box (was a gap at page top). */
.lucide-sprite { position:absolute; width:0; height:0; overflow:hidden; }
body {
  margin:0; background:var(--background); color:var(--foreground);
  font-family: "Inter", "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--foreground); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { letter-spacing:-0.01em; }

/* ---- top bar ---- */
.topbar {
  display:flex; align-items:center; gap:1.5rem; height:56px; padding:0 1.5rem;
  background:linear-gradient(90deg, #0b3a29, #0d4a33); color:#eafaf2;
  border-bottom:1px solid #1f7a52; position:sticky; top:0; z-index:20;
}
.brand { font-weight:600; font-size:.95rem; color:#fff; }
.nav { display:flex; gap:.25rem; }
.nav a {
  color:rgba(234,250,242,.72); padding:.4rem .7rem; border-radius:2px;
  font-size:.875rem; font-weight:500; transition:background .15s, color .15s;
}
.nav a:hover { color:#fff; background:rgba(255,255,255,.12); text-decoration:none; }
.nav a.active { color:#fff; background:rgba(255,255,255,.18); }
.userbox { margin-left:auto; display:flex; align-items:center; gap:.9rem; }
.who {
  color:rgba(234,250,242,.85); font-size:.8rem; padding:.2rem .6rem;
  border:1px solid rgba(255,255,255,.25); border-radius:3px;
}
.btn-link { color:rgba(234,250,242,.85); font-size:.85rem; }
.btn-link:hover { color:#fff; }
.menu { display:flex; flex:1; align-items:center; gap:1.5rem; }
.hamburger {
  display:none; margin-left:auto; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.3); padding:.35rem; border-radius:2px; line-height:0;
}
.hamburger:hover { background:rgba(255,255,255,.14); opacity:1; }

/* ---- layout / cards ---- */
main { max-width:1080px; margin:1.75rem auto; padding:0 1.5rem; display:grid; gap:1.25rem; }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.35rem 1.5rem; box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.card.narrow { max-width:440px; }
.card h2 { margin:0 0 .35rem; font-size:1rem; font-weight:600; }
.card > h2 + table, .card > h2 + .form-grid, .card > h2 + .gauges { margin-top:1rem; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.card-head h2 { margin:0; }

/* ---- forms ---- */
label { display:flex; flex-direction:column; gap:.4rem; font-size:.8rem; font-weight:500; color:var(--foreground); }
input, select, textarea {
  background:transparent; border:1px solid var(--input); color:var(--foreground);
  border-radius:2px; padding:.5rem .7rem; font-size:.875rem; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color:var(--muted-foreground); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--ring); box-shadow:0 0 0 3px rgba(82,82,91,.35);
}
.form-grid { display:flex; flex-direction:column; gap:1rem; max-width:520px; }
.inline-form { display:flex; gap:.45rem; align-items:center; }
.inline-form input { width:auto; }

/* ---- buttons (shadcn variants) ---- */
button {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--primary); color:var(--primary-foreground); border:1px solid transparent;
  border-radius:2px; padding:.5rem .9rem; cursor:pointer; font-size:.85rem; font-weight:500;
  transition:opacity .15s, background .15s, border-color .15s; white-space:nowrap;
}
button:hover { opacity:.9; }
button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(82,82,91,.45); }
button.danger { background:transparent; color:#f87171; border-color:var(--border); }
button.danger:hover { background:var(--destructive); color:var(--destructive-fg); opacity:1; }
.actions { display:flex; gap:.3rem; flex-wrap:nowrap; align-items:center; }
.actions form { display:inline-flex; margin:0; }
.col-actions, td.actions { width:1%; white-space:nowrap; }

/* small + ghost button variants */
.btn-sm { padding:.35rem .7rem; font-size:.8rem; background:var(--secondary); color:var(--secondary-foreground); border-color:var(--border); }
.btn-sm:hover { background:var(--muted); opacity:1; }
.btn-ghost { background:transparent; color:var(--foreground); border-color:transparent; }
.btn-ghost:hover { background:var(--secondary); opacity:1; }

/* icon buttons / links */
.icon { width:1rem; height:1rem; display:inline-block; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn { padding:.4rem; background:transparent; color:var(--muted-foreground);
  border:1px solid var(--border); border-radius:2px; line-height:0; }
.icon-btn:hover { background:var(--secondary); color:var(--foreground); opacity:1; }
.icon-btn.danger { color:#f87171; }
.icon-btn.danger:hover { background:var(--destructive); color:var(--destructive-fg); }
.icon-link { display:inline-flex; padding:.35rem; border-radius:2px; color:var(--muted-foreground); }
.icon-link:hover { background:var(--secondary); color:var(--foreground); text-decoration:none; }
.btn-sm .icon { width:.9rem; height:.9rem; }

/* toggle switch */
.switch { position:relative; display:inline-block; width:34px; height:18px; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { position:absolute; inset:0; cursor:pointer; background:var(--secondary);
  border:1px solid var(--border); border-radius:999px; transition:background .15s, border-color .15s; }
.switch .track::before { content:""; position:absolute; left:2px; top:2px; width:12px; height:12px;
  background:var(--muted-foreground); border-radius:50%; transition:transform .15s, background .15s; }
.switch input:checked + .track { background:rgba(34,197,94,.35); border-color:rgba(34,197,94,.55); }
.switch input:checked + .track::before { transform:translateX(16px); background:#4ade80; }
.switch input:focus-visible + .track { box-shadow:0 0 0 3px rgba(82,82,91,.45); }
.switch input:disabled + .track { opacity:.45; cursor:not-allowed; }

/* dropdowns: keep the native option list dark */
select { color-scheme:dark; }
option { background-color:var(--card); color:var(--foreground); }

/* dialog (native <dialog>) */
dialog.dialog {
  background:var(--card); color:var(--foreground); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem 1.5rem; width:min(540px, calc(100vw - 2rem));
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
dialog.dialog::backdrop { background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.dialog-head h2 { margin:0; font-size:1.05rem; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.4rem; }
.share-list { border:1px solid var(--border); border-radius:2px; padding:.6rem .8rem; margin:0; }
.share-list legend { font-size:.8rem; color:var(--muted-foreground); padding:0 .3rem; }
.share-list .check { flex-direction:row; align-items:center; gap:.45rem; font-weight:400; padding:.15rem 0; }
.share-list .check input { width:auto; }

/* ---- tables ---- */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.6rem .55rem; border-bottom:1px solid var(--border); font-size:.875rem; vertical-align:middle; }
th { color:var(--muted-foreground); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
tbody tr { transition:background .12s; }
tbody tr:hover { background:rgba(255,255,255,.02); }
tr:last-child td { border-bottom:0; }

/* ---- bits ---- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.82em; color:var(--muted-foreground); }
.muted { color:var(--muted-foreground); font-size:.85rem; }
.stats { font-variant-numeric:tabular-nums; }
.error { color:#f87171; font-size:.875rem; }
.badge {
  display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:3px;
  font-size:.72rem; font-weight:500; background:var(--secondary); color:var(--secondary-foreground);
  border:1px solid var(--border); text-transform:capitalize;
}
.badge.running { background:rgba(34,197,94,.12); color:#4ade80; border-color:rgba(34,197,94,.3); }
.badge.exited, .badge.created, .badge.paused, .badge.restarting { background:rgba(245,158,11,.12); color:#fbbf24; border-color:rgba(245,158,11,.3); }
.banner { border-radius:2px; padding:.7rem 1rem; font-size:.875rem; border:1px solid var(--border); }
.banner.ok { background:rgba(34,197,94,.1); color:#86efac; border-color:rgba(34,197,94,.3); }
.banner.err { background:rgba(220,38,38,.12); color:#fca5a5; border-color:rgba(220,38,38,.35); }

/* ---- host usage gauges ---- */
.gauges { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1rem; }
.gauge { margin:0; background:var(--card-2); border:1px solid var(--border); border-radius:2px; padding:.7rem .9rem; }
.gauge figcaption { display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted-foreground); margin-bottom:.5rem; font-weight:500; }
.gauge figcaption b { color:var(--foreground); font-variant-numeric:tabular-nums; font-size:.95rem; }
.spark { width:100%; height:40px; display:block; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:1.75; vector-effect:non-scaling-stroke; }

/* ---- progress ---- */
.progress { background:var(--muted); border:1px solid var(--border); border-radius:2px; height:14px; overflow:hidden; margin:.9rem 0; }
.progress .bar { height:100%; width:0; background:var(--accent); transition:width .4s ease; }
.progress .bar.ok { background:var(--ok); }
.progress .bar.err { background:#dc2626; }

/* ---- login ---- */
body.centered { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:1rem; }
.login { width:min(360px, calc(100vw - 1.6rem)); display:flex; flex-direction:column; gap:1rem; }
.login h1 { font-size:1.25rem; margin:0 0 .25rem; text-align:center; }
.login > button[type=submit] { width:100%; }
.login-aux { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.85rem; }
.login-aux .btn-ghost { padding:.35rem .5rem; }

/* ---- settings layout ---- */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:1.25rem; align-items:start; }
.settings-grid .card { margin:0; }

/* ---- tabs (shadcn "line" variant) ---- */
.tablist { display:flex; gap:.15rem; border-bottom:1px solid var(--border); margin-bottom:1.25rem; flex-wrap:wrap; }
.tab {
  background:transparent; color:var(--muted-foreground); border:0; border-radius:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; padding:.55rem .85rem;
  font-size:.875rem; font-weight:500; cursor:pointer;
}
.tab:hover { color:var(--foreground); background:transparent; opacity:1; }
.tab.active { color:var(--foreground); border-bottom-color:var(--foreground); }
.tab:focus-visible { outline:none; box-shadow:none; color:var(--foreground); }
.tabpanel { display:none; }
.tabpanel.active { display:block; }
.tabpanel .card { max-width:580px; }

/* ---- settings extras ---- */
.mt { margin-top:1rem; }
.sub { font-size:.85rem; color:var(--muted-foreground); margin:.4rem 0 0; font-weight:600; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.row-forms { display:flex; gap:.5rem; flex-wrap:wrap; }
.qr { background:transparent; border:1px solid var(--border); border-radius:2px; padding:.4rem; }
.codes { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.5rem; margin-top:.6rem; }
.codes code { background:var(--card-2); border:1px solid var(--border); border-radius:2px; padding:.4rem .6rem; text-align:center; letter-spacing:.06em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; background:var(--card-2); padding:.05rem .35rem; border-radius:2px; }

/* ---- responsive (tablet / phone) ---- */
@media (max-width: 820px) {
  main { margin:1.1rem auto; padding:0 .9rem; gap:1rem; }
  .card { padding:1.1rem 1.1rem; }
  .grid-2 { grid-template-columns:1fr; }
  /* wide tables scroll horizontally inside their card instead of overflowing */
  .card { overflow-x:auto; }
  table { min-width:560px; }
  .gauges { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
  .topbar { gap:.6rem; padding:0 .8rem; }
  .brand { font-size:.9rem; }
  /* collapse the nav into a hamburger dropdown */
  .hamburger { display:inline-flex; }
  .menu {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:30;
    flex-direction:column; align-items:stretch; gap:.1rem;
    background:#0d4a33; border-bottom:1px solid #1f7a52;
    padding:.5rem .8rem .8rem; box-shadow:0 12px 30px rgba(0,0,0,.45);
  }
  .topbar.open .menu { display:flex; }
  .nav { flex-direction:column; align-items:stretch; gap:.1rem; }
  .nav a { padding:.6rem .6rem; }
  .userbox {
    margin:.4rem 0 0; flex-direction:column; align-items:stretch; gap:.5rem;
    border-top:1px solid rgba(255,255,255,.15); padding-top:.6rem;
  }
  .who { align-self:flex-start; }
  .btn-link { padding:.45rem .6rem; }
  main { padding:0 .75rem; gap:.9rem; }
  .card { padding:.95rem .95rem; }
  .form-grid, .login { max-width:100%; }
  .card-head { flex-wrap:wrap; gap:.5rem; }
  .dialog-actions { flex-wrap:wrap; }
  .codes { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
  h1 { font-size:1.1rem; }
}