/* ============================================================
   akun-panel.css
   Seluruh gaya panel pelanggan: dashboard, Domain Saya, Invoice.

   KENAPA BERKAS TERPISAH
   Gaya ini dulu ditanam sebagai <style> di dalam dashboard.php. Begitu
   halaman Domain Saya dan Invoice dibuat, keduanya tampil polos tanpa gaya
   sama sekali, karena gayanya memang tidak pernah ada di luar dashboard.
   Ini juga alasan ikon SVG membesar memenuhi layar: aturan ukurannya ikut
   tertinggal di berkas yang tidak dimuat.

   Dimuat lewat extraCss di Account::pageData().
   ============================================================ */

:root {
  --ap-ink:   #0A1A26;
  --ap-ink2:  #41586B;
  --ap-ink3:  #7A8FA1;
  --ap-line:  #E3EBF1;
  --ap-line2: #EEF3F7;
  --ap-mist:  #F5F8FB;
  --ap-sky:   #03A9F4;
  --ap-deep:  #01579B;
  --ap-amber: #FF9800;
  --ap-ok:    #12A150;
  --ap-okbg:  #E7F7EE;
  --ap-warn:  #B45309;
  --ap-warnbg:#FFF4E5;
  --ap-no:    #9B1C1C;
  --ap-nobg:  #FDECEC;
  --ap-side:  248px;
  --ap-nav:   66px;
}

/* ── Kerangka: sidebar setinggi layar, konten menggulir sendiri ──────
   Sidebar dipatok (sticky) setinggi sisa viewport di bawah navbar
   storefront, jadi menu tetap terlihat sejauh apa pun daftar domain
   digulir. Ini yang bikin panel registrar terasa seperti aplikasi,
   bukan seperti halaman biasa yang kebetulan punya menu. */
.ap { background: var(--ap-mist); min-height: calc(100vh - var(--ap-nav)); }
.ap__shell { display: grid; grid-template-columns: var(--ap-side) minmax(0, 1fr); align-items: start; }

.ap__side {
  position: sticky; top: var(--ap-nav);
  height: calc(100vh - var(--ap-nav));
  display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid var(--ap-line);
  padding: 22px 14px 18px;
  overflow-y: auto;
}

.ap__main { min-width: 0; padding: 26px clamp(18px, 3vw, 40px) 64px; }

/* ── Kartu pengguna di kepala sidebar ── */
.cz-user { display: flex; align-items: center; gap: 11px; padding: 0 8px 16px; border-bottom: 1px solid var(--ap-line2); margin-bottom: 12px; }
.cz-user__av {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--ap-sky), var(--ap-deep));
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 1.05rem;
}
.cz-user__meta { min-width: 0; }
.cz-user__name { font-weight: 700; font-size: .92rem; color: var(--ap-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-user__mail { font-size: .78rem; color: var(--ap-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Menu ── */
.cz-nav { display: grid; gap: 2px; }
.cz-nav__i {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 10px;
  font-size: .9rem; font-weight: 500; color: var(--ap-ink2);
  text-decoration: none; transition: background .14s, color .14s;
}
/* Ukuran ikon WAJIB dipatok. Tanpa ini SVG memakai ukuran bawaan viewBox
   dan membesar memenuhi layar. */
.cz-nav__i svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.cz-nav__i span { flex: 1; }
.cz-nav__i:hover { background: var(--ap-mist); color: var(--ap-ink); }
.cz-nav__i.is-active { background: #E9F7FE; color: var(--ap-deep); font-weight: 700; }
.cz-nav__i--danger { color: #C2410C; }
.cz-nav__i--danger:hover { background: var(--ap-nobg); color: var(--ap-no); }
.cz-nav__n {
  font-style: normal; font-size: .72rem; font-weight: 700;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--ap-line2); color: var(--ap-ink3);
}
.cz-nav__i.is-active .cz-nav__n { background: #fff; color: var(--ap-deep); }
.cz-nav__sep { height: 1px; background: var(--ap-line2); margin: 10px 4px; }
.cz-side__foot { margin-top: auto; padding-top: 14px; font-size: .74rem; color: #A7BACB; text-align: center; }

/* ── Kepala halaman ── */
.cz-topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cz-hello { font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 800; color: var(--ap-ink); letter-spacing: -.03em; }
.cz-subtitle { font-size: .93rem; color: var(--ap-ink3); margin-top: 4px; }

.cz-flash { padding: 12px 16px; border-radius: 10px; font-size: .88rem; margin-bottom: 16px; }
.cz-flash--ok  { background: var(--ap-okbg); color: var(--ap-ok); }
.cz-flash--err { background: var(--ap-nobg); color: #C2410C; }

.cz-banner {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; margin-bottom: 16px; border-radius: 12px;
  background: var(--ap-warnbg); border: 1px solid #FFD8A8; color: #7A3E00; font-size: .88rem;
}
.cz-banner svg { width: 18px; height: 18px; flex: none; }
.cz-banner__go { margin-left: auto; font-weight: 700; color: var(--ap-warn); white-space: nowrap; text-decoration: none; }

/* ── Kartu angka ── */
.cz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.cz-stat {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 14px;
  background: #fff; border: 1px solid var(--ap-line);
}
.cz-stat__ic { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--ap-mist); color: var(--ap-ink2); }
.cz-stat__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cz-stat__num { font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--ap-ink); letter-spacing: -.035em; }
.cz-stat__lbl { font-size: .82rem; color: var(--ap-ink3); margin-top: 5px; }
.cz-stat--teal  { background: #F0FCFB; border-color: #CFF0EC; }
.cz-stat--teal  .cz-stat__ic { background: #D7F3EF; color: #0E7C6B; }
.cz-stat--amber { background: var(--ap-warnbg); border-color: #FFD8A8; }
.cz-stat--amber .cz-stat__ic { background: #FFE3BC; color: var(--ap-warn); }
.cz-stat--amber .cz-stat__num { color: var(--ap-warn); }
.cz-stat--red   { background: var(--ap-nobg); border-color: #F5C2C2; }
.cz-stat--red   .cz-stat__ic { background: #F8D4D4; color: var(--ap-no); }
.cz-stat--red   .cz-stat__num { color: var(--ap-no); }
.cz-stat--slate { background: #fff; }

/* ── Kartu isi ── */
.cz-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; padding: 22px; margin-bottom: 16px; }
.cz-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cz-card__head h2 { font-size: 1.05rem; font-weight: 700; color: var(--ap-ink); letter-spacing: -.02em; }
.cz-count { margin-left: auto; font-size: .78rem; color: var(--ap-ink3); background: var(--ap-mist); padding: 4px 11px; border-radius: 999px; }
.cz-seeall { margin-left: auto; font-size: .84rem; font-weight: 600; color: var(--ap-deep); white-space: nowrap; text-decoration: none; }
.cz-seeall:hover { text-decoration: underline; }

/* ── Tabel ── */
.cz-tablewrap { overflow-x: auto; }
.cz-table { width: 100%; border-collapse: collapse; }
.cz-table th {
  padding: 9px 12px; text-align: left; white-space: nowrap;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ap-ink3); font-weight: 600; border-bottom: 1px solid var(--ap-line);
}
.cz-table td { padding: 14px 12px; border-bottom: 1px solid var(--ap-line2); font-size: .88rem; color: var(--ap-ink2); vertical-align: middle; }
.cz-table tbody tr:last-child td { border-bottom: 0; }
.cz-table td strong { color: var(--ap-ink); font-weight: 700; }
.cz-table th:first-child, .cz-table td:first-child { padding-left: 0; }
.cz-table th:last-child, .cz-table td:last-child { padding-right: 0; text-align: right; }
.cz-table--dom td:nth-child(2), .cz-table--dom td:nth-child(3) { white-space: nowrap; }

.cz-dom__link { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; font-size: .92rem; color: var(--ap-deep); text-decoration: none; overflow-wrap: anywhere; }
.cz-dom__link:hover { text-decoration: underline; }
.cz-subref { display: block; font-size: .76rem; color: var(--ap-ink3); margin-top: 3px; font-weight: 400; }
.cz-subref.is-warn { color: #E65100; font-weight: 600; }

.cz-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.cz-badge.is-success { background: var(--ap-okbg); color: var(--ap-ok); }
.cz-badge.is-info    { background: #E9F7FE;        color: var(--ap-deep); }
.cz-badge.is-warning,
.cz-badge.is-warn    { background: var(--ap-warnbg); color: var(--ap-warn); }
.cz-badge.is-danger  { background: var(--ap-nobg);  color: var(--ap-no); }
.cz-badge.is-muted   { background: var(--ap-line2); color: var(--ap-ink3); }

.cz-link { font-size: .86rem; font-weight: 600; color: var(--ap-deep); text-decoration: none; white-space: nowrap; }
.cz-link:hover { text-decoration: underline; }
.cz-table td .cz-link + .cz-link { margin-left: 12px; }

.cz-btn-manage {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 34px; padding: 0 14px; border-radius: 9px;
  background: var(--ap-deep); color: #fff; text-decoration: none;
  font-size: .84rem; font-weight: 600; transition: background .15s;
}
.cz-btn-manage:hover { background: #013F70; color: #fff; }

.cz-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 20px; border-radius: 10px;
  background: var(--ap-amber); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .9rem; transition: background .15s;
}
.cz-btn-primary:hover { background: #E65100; color: #fff; }

/* ── Kosong ── */
.cz-empty { text-align: center; padding: 44px 20px; }
.cz-empty__ic { width: 46px; height: 46px; margin: 0 auto 14px; fill: none; stroke: #C6D5E0; stroke-width: 1.5; }
.cz-empty p { font-size: .92rem; color: var(--ap-ink3); margin-bottom: 16px; }

.cz-hint { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ap-line2); }
.cz-hint p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ap-ink2); }
.cz-hint strong { color: var(--ap-ink); }

/* ── Responsif ────────────────────────────────────────────────────
   Di bawah 900px sidebar berhenti jadi kolom dan berubah jadi baris
   menu yang bisa digeser. Sidebar setinggi layar di ponsel akan
   memakan seluruh layar dan menyembunyikan isinya. */
@media (max-width: 900px) {
  .ap__shell { grid-template-columns: 1fr; }
  .ap__side {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 10px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--ap-line);
    overflow-x: auto; overflow-y: hidden;
  }
  .cz-user { padding: 0 10px 0 0; margin: 0; border-bottom: 0; border-right: 1px solid var(--ap-line2); }
  .cz-user__meta { display: none; }
  .cz-nav { grid-auto-flow: column; gap: 4px; }
  .cz-nav__i { white-space: nowrap; padding: 9px 12px; }
  .cz-nav__sep { display: none; }
  .cz-side__foot { display: none; }
  .ap__main { padding: 20px 16px 48px; }
}

@media (max-width: 640px) {
  .cz-table thead { display: none; }
  .cz-table, .cz-table tbody, .cz-table tr, .cz-table td { display: block; width: 100%; }
  .cz-table tr { border: 1px solid var(--ap-line); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; }
  .cz-table td { border: 0; padding: 7px 0; display: flex; justify-content: space-between; gap: 14px; text-align: right; }
  .cz-table td::before { content: attr(data-l); color: var(--ap-ink3); font-size: .74rem; font-weight: 600; text-align: left; }
  .cz-table td:first-child { padding-left: 0; }
  .cz-table td:last-child { padding-right: 0; }
  .cz-btn-manage { width: 100%; justify-content: center; }
  .cz-banner { flex-wrap: wrap; }
  .cz-banner__go { margin-left: 0; }
}