/* ============================================================================
   Lapisan polish "XaXi Cloud" — kosmetik saja, tidak menyentuh fungsi.
   Dimuat SETELAH styles.css; tema dark-blue asli dipertahankan.
   ========================================================================== */

:root {
  /* --- Tokens asli (dari styles.css blok akhir) — nilai TIDAK diubah --- */
  --ink: #eaf1ff;          /* teks utama (warna terang di atas gelap) */
  --muted: #9fb3d9;        /* teks sekunder */
  --paper: #050b18;        /* kanvas dasar */
  --panel: #0c1b36;        /* kartu */
  --panel-soft: #12244a;   /* kartu terangkat / hover */
  --line: #2a3f6b;         /* garis pembatas */
  --gold: #3b82f6;         /* aksen */
  --gold-bright: #60a5fa;  /* aksen terang */
  --gold-dark: #2563eb;    /* aksen tua */
  --danger: #f87171;
  --shadow: 0 24px 70px rgba(0,0,0,.45);

  /* --- Tokens konsolidasi (dipakai lapisan ini + aman ditambah) --- */
  --ink-soft: #081226;     /* rail */
  --line-soft: #1b2b4d;
  --muted-strong: #c3d1ec;
  --success: #34d399;
  --warning: #fbbf24;
  --text: var(--ink);
  --text-2: #c3d1ec;
  --text-3: var(--muted);
  --surface: var(--panel);
  --surface-hover: var(--panel-soft);
  --border: var(--line);
  --border-soft: var(--line-soft);
  --accent: var(--gold);
  --accent-hover: var(--gold-dark);
  --accent-text: var(--gold-bright);
  --gold-soft: rgba(59, 130, 246, .14);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --scrim: rgba(2, 6, 16, .82);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, .38);
  --sidebar: clamp(14.5rem, 18vw, 16.5rem);

  /* Skala spacing & radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 22px; --space-6: 30px; --space-7: 44px;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px;

  /* Tipografi */
  --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-page: clamp(18px, 1.6vw, 22px);
  --fs-card: 15px;
  --fs-body: 14px;
  --fs-caption: 12px;
}

/* ---------- Basis: tabular angka, scrollbar gelap, focus ring ---------- */
body { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(59, 130, 246, .35); }
* { scrollbar-width: thin; scrollbar-color: #2a3f6b transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #2a3f6b; border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
a, button, input, select, textarea, summary, [role="button"], .crumb, .side-link, .user-menu {
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

/* ---------- Kerangka ---------- */
.app-shell { display: flex; align-items: flex-start; }
.sidebar {
  position: sticky; top: 0; flex: 0 0 var(--sidebar);
  display: flex; flex-direction: column; gap: var(--space-6);
  min-height: 100dvh; padding: var(--space-5);
  background: var(--ink-soft); border-right: 1px solid var(--line-soft);
}
.sidebar-bottom { margin-top: auto; display: grid; gap: var(--space-3); padding-top: var(--space-5); }
.main { flex: 1; min-width: 0; padding: 0 var(--space-6) var(--space-7); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.right-column { display: grid; gap: var(--space-5); min-width: 0; }
@media (min-width: 1025px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); }
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 76px; margin-bottom: var(--space-5);
  padding-block: var(--space-4); border-bottom: 1px solid var(--line-soft);
}
.main > .greeting { margin-top: var(--space-4); }

/* ---------- Merek ---------- */
.brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-display); font-size: 18px !important; font-weight: 600; letter-spacing: -.01em !important; white-space: nowrap; overflow: hidden; }
.brand::after { content: none !important; }
.brand::before { content: none !important; }
.brand-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: none; }

/* ---------- Navigasi rail ---------- */
.nav { display: grid; gap: var(--space-1); }
.nav button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 42px;
  padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer; position: relative;
}
.nav button:hover { background: var(--surface); color: var(--text); }
.nav button.active { background: var(--gold-soft); color: var(--accent-text); font-weight: 600; }
.nav button.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 999px; background: var(--accent);
}
.workspace-label { color: var(--muted); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; margin: 0 10px 6px; }
.side-link {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.side-link:hover { color: var(--accent-text); background: var(--gold-soft); transform: translateX(3px); }
.sidebar-bottom .provider-mini { font-size: 11.5px; color: var(--muted); opacity: .85; }
.sidebar-bottom .dot { width: 7px; height: 7px; }

/* ---------- Tombol ---------- */
.primary, .secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px;
  padding: 9px var(--space-4); border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none; line-height: 1;
}
.primary { background: var(--gold-dark); border-color: var(--gold-dark); color: #ffffff; }
.primary:hover { background: #1d4ed8; }
.primary:active { background: #1e3a8a; }
.secondary { background: var(--panel-soft); border-color: var(--line); color: var(--text); }
.secondary:hover { border-color: var(--gold-dark); background: var(--panel); }
.secondary:active { background: var(--ink-soft); }
.destructive {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px;
  padding: 9px var(--space-4); border-radius: var(--radius); border: 1px solid var(--danger);
  background: transparent; color: var(--danger); font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer; line-height: 1;
}
.destructive:hover { background: var(--danger); color: #ffffff; }
.primary:disabled, .secondary:disabled, .destructive:disabled, button[disabled] {
  opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none;
}

/* ---------- Badge pill ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.6;
  white-space: nowrap;
}
.badge-ok   { background: rgba(52, 211, 153, .14);  color: #34d399; }
.badge-warn { background: rgba(251, 191, 36, .16);  color: #fbbf24; }
.badge-err  { background: rgba(248, 113, 113, .16); color: #f87171; }
.badge-off  { background: rgba(148, 163, 184, .14); color: #94a3b8; }

/* ---------- Progress bar (tanpa coklat) ---------- */
.progress { height: 7px; border-radius: 999px; background: #0a1526; overflow: hidden; }
.progress > span {
  display: block; height: 100%; border-radius: inherit; min-width: 6px;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  transition: width 320ms var(--ease-out);
}
.progress.warn > span   { background: linear-gradient(90deg, #b45309, #fbbf24); }
.progress.danger > span { background: linear-gradient(90deg, #b91c1c, #f87171); }
button.danger { border-color: rgba(248, 113, 113, 0.5); color: var(--danger); }
button.danger:hover { background: rgba(248, 113, 113, 0.12); }
/* Member tidak melihat daftar penyimpanan owner; sidebar-nya tetap rapi tanpa blok kosong. */
.member-view .provider-mini, .member-view .sidebar-bottom .workspace-label { display: none; }

/* ---------- Dot status ---------- */
.dot { width: 8px; height: 8px; border-radius: 999px; background: #3a4a6b; flex: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }
.dot.on { background: var(--success); box-shadow: 0 0 0 3px rgba(52, 211, 153, .15), 0 0 8px rgba(52, 211, 153, .5); }
.dot.off { background: var(--muted); opacity: .6; }

/* ---------- Field ---------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); min-width: 0; }
.field label { color: var(--text-2); font-size: 13.5px; font-weight: 500; }
input, select, textarea {
  width: 100%; min-height: 42px; padding: 9px var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-soft); color: var(--text); font: inherit; font-size: var(--fs-body);
}
input::placeholder, textarea::placeholder { color: #64748b; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
textarea { background: #04070f; color: var(--ink); font: 12px monospace; }

/* ---------- Panel, hero judul ---------- */
.panel {
  padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  background: var(--surface); min-width: 0;
}
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
/* Hero judul: kecilkan + kurangi margin bawah */
.greeting { font-family: var(--font-display); font-size: var(--fs-page); line-height: 1.2; letter-spacing: -.01em; margin-bottom: 8px; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.subtle { color: var(--text-2); font-size: 13.5px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.panel h2, .panel h3, .card h2, .card h3 {
  font-size: var(--fs-card); margin: 0 0 var(--space-3); padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}

/* ---------- Daftar berkas ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.file-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3); min-height: 64px;
  padding: var(--space-2) var(--space-4); border: 0; border-bottom: 1px solid var(--line-soft);
  border-radius: 0; background: transparent;
}
.file-card:hover { background: var(--surface-hover); }
.file-card:last-child { border-bottom-color: transparent; }
.file-card .file-icon { display: grid; place-items: center; width: 40px; height: 44px; border-radius: var(--radius-sm); background: var(--ink-soft); color: var(--accent); }
.file-card.folder .file-icon { background: var(--gold-soft); }
.file-name { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--text-3); font-size: 13px; }
.breadcrumb .crumb { background: none; border: 0; padding: 4px; color: var(--text-2); font: inherit; cursor: pointer; border-radius: 6px; }
.breadcrumb .crumb:hover { color: var(--accent-text); background: var(--gold-soft); }

/* ---------- Provider ---------- */
.provider { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.provider:last-child { border-bottom: 0; }
.provider-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; font-size: 14px; }
.provider-name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 0 rgba(96, 165, 250, .6); }
.provider-meta { color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
.provider-mini { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: 12px; }
.oauth-info:empty { display: none; }
.oauth-info { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ink-soft); padding: 12px 14px; margin-bottom: 16px; }
.oauth-info code { color: var(--accent-text); font: 12px var(--f-mono, monospace); word-break: break-all; }

/* ---------- Baris aksi ---------- */
.action-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.action-row .primary, .action-row .secondary { flex: none; }
.action-row select { width: auto; min-width: 180px; }
/* Tombol rentang di rail: kompak, satu baris, tanpa memakan tinggi */
.sidebar .action-row { gap: 6px; }
.sidebar .action-row .primary, .sidebar .action-row .secondary {
  min-height: 32px; padding: 5px 11px; font-size: 12px; border-radius: var(--radius-sm);
}

/* ---------- Avatar & menu pengguna ---------- */
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--gold-soft); color: var(--accent-text); font-weight: 600; }
.user-menu { display: flex; align-items: center; gap: var(--space-2); padding: 4px 6px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.user-menu:hover { border-color: var(--line); background: var(--surface-hover); }
.user-menu small { display: block; color: var(--text-3); font-size: 12px; }

/* ---------- Halaman masuk ---------- */
.login-page { display: grid; place-items: safe center; min-height: 100dvh; padding: var(--space-5); background: var(--paper); overflow-y: auto; }
.login-page .login-card { width: min(440px, 100%); padding: var(--space-6) var(--space-5); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.login-page .brand { font-size: 20px; margin-bottom: var(--space-5); color: var(--accent-text); }
.login-page h1 { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.16; letter-spacing: -.01em; margin: 0 0 var(--space-3); color: var(--text); }
.login-page .subtle { margin-bottom: var(--space-5); color: var(--text-3); }

/* ---------- Modal, notifikasi, pemuatan ---------- */
.modal-backdrop { background: var(--scrim); }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.toast { background: var(--surface-hover); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-soft); }
.loading-card { background: var(--surface); border: 1px solid var(--gold-dark); border-radius: var(--radius-lg); }
.dropzone { border: 1px dashed var(--line); border-radius: var(--radius); background: transparent; color: var(--text-2); transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--gold-soft); }

/* ---------- Kendali VPS ---------- */
.grid-layanan { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 6px; }
.kartu-layanan {
  position: relative; padding: 16px 16px 14px; border-radius: 14px; background: var(--panel, #0c1b36);
  border: 1px solid var(--line, #2a3f6b); display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s ease, transform .18s ease;
}
.kartu-layanan:hover { border-color: #3b82f6; transform: translateY(-1px); }
.kartu-layanan.hidup { box-shadow: inset 3px 0 0 0 #34d399; }
.kartu-layanan.mati { box-shadow: inset 3px 0 0 0 #f87171; opacity: .92; }
.kartu-atas { display: flex; align-items: center; gap: 9px; }
.kartu-atas strong { flex: 1; font-size: 15px; letter-spacing: -.01em; }
.kartu-meta { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted, #9fb3d9); }
@media (max-width: 640px) { .grid-layanan { grid-template-columns: 1fr; } }

/* ---------- Monitor VPS: grafik ---------- */
.graf-head .workspace-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.graf-angka { font: 700 27px 'Space Grotesk'; color: var(--gold-bright); letter-spacing: -1px; line-height: 1.1; }
.graf-svg text { fill: var(--muted); font-size: 10px; }

/* ---------- Pill kecil untuk badge status & grup (warna lewat CSS saja) ---------- */
.kartu-atas .eyebrow, .provider .eyebrow, .panel-heading .eyebrow {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: rgba(59, 130, 246, .12); color: #9db9e8; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: none; white-space: nowrap;
}

/* ---------- 9router: baris alamat ---------- */
.alur { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.alur .mono { font-family: var(--f-mono); font-size: 12.5px; color: var(--text-2); word-break: break-all; }

/* ---------- Rail sempit ---------- */
@media (max-width: 860px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset-block: 0; left: 0; width: min(86%, 20rem); z-index: 45; overflow-y: auto; box-shadow: var(--shadow); }
  .main { padding-inline: var(--space-4); }
  .topbar { min-height: 72px; }
  .panel { padding: var(--space-4); }
  .greeting { font-size: 20px; }
}

/* ---------- Kurangi gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .kartu-layanan { transition: none; }
  .kartu-layanan:hover { transform: none; }
}