/* ==========================================================================
   Tema modern untuk Dashboard Pelanggan & Panel Admin (v26d). Palet mengikuti logo: charcoal + peach/terracotta.
   Semua aturan dibatasi ke .app-shell[data-role], jadi halaman
   login dan undangan tamu TIDAK terpengaruh.
   Dimuat paling akhir (setelah style.css & app.css).
   ========================================================================== */

body:has(.app-shell[data-role]) { background: #f5f6fa; font-size: 15px; }

.app-shell[data-role] {
  --bg: #ffffff;
  --shell-bg: #f5f6fa;
  --panel: #f8efe9;            /* tint peach sangat lembut */
  --ink: #1c2030;
  --muted: #6b7183;
  --line: #e7e9f1;
  --accent-1: #2f343b;         /* charcoal tegas (warna logo) */
  --accent-2: #1f2328;
  --warm: #c0673f;             /* terracotta, aksen kecil (logo peach) */
  --info-bg: #e7f0ff;  --info-text: #1f5bb8;
  --ok-bg: #e3f6ec;    --ok-text: #14804a;
  --off-bg: #fde8e8;   --off-text: #c0392b;
  --warn-bg: #fff2d6;  --warn-text: #94610a;
  --shadow-sm: 0 1px 2px rgba(20, 24, 40, .04), 0 2px 8px -4px rgba(20, 24, 40, .06);
  --shadow-md: 0 14px 34px -18px rgba(20, 24, 40, .28);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --sidebar-w: 272px;
  --topbar-h: 76px;
  --ring: 0 0 0 3px rgba(47, 52, 59, .22);
  background: #f5f6fa;
  font-size: 15px;
  line-height: 1.55;
}
.app-shell[data-role] ::selection { background: rgba(47, 52, 59, .2); }

/* ---------- Judul: sans-serif tebal, bukan serif ---------- */
.app-shell[data-role] h1,
.app-shell[data-role] h2,
.app-shell[data-role] h3,
.app-shell[data-role] .stat-value,
.app-shell[data-role] .story-item-body .story-title {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.app-shell[data-role] .topbar-title h1 { font-size: 22px; font-weight: 800; }
.app-shell[data-role] .topbar-title p { font-size: 13.5px; }
.app-shell[data-role] .card-header-text h3 { font-size: 18px; }
.app-shell[data-role] .card-header-text p,
.app-shell[data-role] .muted { font-size: 13.5px; }

/* ---------- Sidebar: panel putih mengambang ---------- */
.app-shell[data-role] .sidebar {
  background: #fff;
  color: var(--muted);
  border-right: 1px solid var(--line);
  box-shadow: 0 0 0 1px transparent;
}
.app-shell[data-role] .sidebar::-webkit-scrollbar-thumb { background: #d9dce6; }
.app-shell[data-role] .sidebar-brand { border-bottom: 1px solid var(--line); padding: 22px 22px 18px; }
.app-shell[data-role] .sidebar-brand img { background: var(--panel); }
.app-shell[data-role] .sidebar-brand-text { color: var(--ink); font-size: 16px; font-weight: 700; }
.app-shell[data-role] .sidebar-brand-text em { color: var(--accent-1); }
.app-shell[data-role] .sidebar-brand-text small { color: var(--muted); font-weight: 600; }
.app-shell[data-role] .sidebar-section-label { color: #9aa0b3; font-size: 11px; padding: 16px 24px 8px; }
.app-shell[data-role] .sidebar-nav { padding: 0 14px; gap: 4px; }
.app-shell[data-role] .sidebar-link {
  color: #4b5163; font-size: 14.5px; font-weight: 600;
  padding: 11px 14px; border-radius: 12px; border-left: 0; gap: 13px;
}
.app-shell[data-role] .sidebar-link svg { width: 19px; height: 19px; opacity: .8; }
.app-shell[data-role] .sidebar-link:hover { background: var(--panel); color: var(--accent-1); }
.app-shell[data-role] .sidebar-link.active {
  background: var(--accent-1); color: #fff; box-shadow: 0 8px 18px -10px rgba(47, 52, 59, .8);
}
.app-shell[data-role] .sidebar-link.active svg { opacity: 1; }
.app-shell[data-role] .sidebar-footer { border-top: 1px solid var(--line); padding: 12px 14px 18px; }
.app-shell[data-role] .sidebar-link.sidebar-logout { color: #c0392b; }
.app-shell[data-role] .sidebar-link.sidebar-logout:hover { background: var(--off-bg); color: #c0392b; }
.app-shell[data-role] .sidebar-help {
  background: var(--panel); border: 1px solid #f0dccf; color: var(--muted); margin: 8px 16px 8px;
}
.app-shell[data-role] .sidebar-help strong { color: var(--ink); }
.app-shell[data-role] .sidebar-help-ico { background: #fff; color: var(--accent-1); }
.app-shell[data-role] .sidebar-help a { background: var(--accent-1); color: #fff; }
.app-shell[data-role] .sidebar-help a svg { color: #fff; }

/* ---------- Topbar ---------- */
.app-shell[data-role] .topbar {
  background: rgba(245, 246, 250, .88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 0;
  padding: 16px 32px;
}
.app-shell[data-role] .user-menu > summary { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.app-shell[data-role] .topbar-avatar { background: var(--accent-1); }
.app-shell[data-role] .topbar-user-name { font-size: 14px; }
.app-shell[data-role] .main-content { padding: 8px 32px 64px; }
.app-shell[data-role] .container { max-width: none; }

/* ---------- Breadcrumb: rata kiri, ikut lebar konten ---------- */
.app-shell[data-role] .breadcrumbs { max-width: none; margin: 0 0 16px; }
.app-shell[data-role] .breadcrumbs ol { font-size: 13px; }
.app-shell[data-role] .breadcrumbs li[aria-current] { color: var(--accent-1); }

/* ---------- Kartu ---------- */
.app-shell[data-role] .card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 30px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.app-shell[data-role] .card-header { margin-bottom: 24px; gap: 16px; }
.app-shell[data-role] .card-icon {
  width: 46px; height: 46px; border-radius: 14px; background: var(--panel); border: 0; color: var(--accent-1);
}
.app-shell[data-role] .count-pill { background: var(--panel); color: var(--accent-1); font-weight: 700; font-size: 12.5px; padding: 5px 13px; }

/* ---------- Kartu statistik ---------- */
.app-shell[data-role] .stat-grid { gap: 18px; margin-bottom: 24px; }
.app-shell[data-role] .stat-card {
  border-radius: var(--radius-lg); padding: 22px 24px; gap: 10px; box-shadow: var(--shadow-sm);
}
.app-shell[data-role] .stat-label { font-size: 12px; letter-spacing: .05em; }
.app-shell[data-role] .stat-icon { width: 36px; height: 36px; border-radius: 11px; }
.app-shell[data-role] .stat-icon svg { width: 17px; height: 17px; }
.app-shell[data-role] .stat-value { font-size: 34px; font-weight: 800; line-height: 1.05; }
.app-shell[data-role] .stat-note { font-size: 13px; }
.app-shell[data-role] .stat-card.stat-accent .stat-value { color: var(--accent-1); }
.app-shell[data-role] .stat-card.stat-accent .stat-icon { color: var(--accent-1); }

/* ---------- Tombol ---------- */
.app-shell[data-role] .btn:not(.btn-outline):not(.btn-ghost):not(.btn-success):not(.btn-danger-solid):not(.btn-danger) {
  background: var(--accent-1); box-shadow: 0 8px 18px -10px rgba(47, 52, 59, .75);
  font-size: 14px; padding: 10px 20px; border-radius: 12px;
}
.app-shell[data-role] .btn:not(.btn-outline):not(.btn-ghost):not(.btn-success):not(.btn-danger-solid):not(.btn-danger):hover { background: var(--accent-2); box-shadow: 0 12px 22px -10px rgba(47, 52, 59, .8); }
.app-shell[data-role] .btn-outline { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: none; }
.app-shell[data-role] .btn-ghost { background: transparent; color: var(--muted); box-shadow: none; }
.app-shell[data-role] .btn-ghost:hover { background: var(--panel); color: var(--ink); }
.app-shell[data-role] .btn-success { background: #12a15b; }
.app-shell[data-role] .btn-danger-solid { background: #c0392b; }
.app-shell[data-role] .btn:disabled, .app-shell[data-role] .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.app-shell[data-role] .btn-outline:hover { background: var(--panel); color: var(--accent-1); border-color: #ecd2c4; }
.app-shell[data-role] .btn-small, .app-shell[data-role] .btn-sm { font-size: 13.5px; min-height: 38px; border-radius: 11px; padding: 7px 15px; }
.app-shell[data-role] .btn-small { background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.app-shell[data-role] .btn-small:hover { background: var(--panel); border-color: #ecd2c4; color: var(--accent-1); }
.app-shell[data-role] .btn-primary-sm { background: var(--accent-1); color: #fff; border-color: var(--accent-1); }
.app-shell[data-role] .btn-primary-sm:hover { background: var(--accent-2); color: #fff; }
.app-shell[data-role] .btn-wa {
  background: #12a15b; border: 0; color: #fff; border-radius: 11px; font-size: 13.5px; padding: 8px 16px; font-weight: 700;
  box-shadow: 0 8px 16px -10px rgba(18, 161, 91, .8);
}
.app-shell[data-role] .btn-wa:hover { background: #0e8a4d; }

/* ---------- Form ---------- */
.app-shell[data-role] input[type=text],
.app-shell[data-role] input[type=email],
.app-shell[data-role] input[type=password],
.app-shell[data-role] input[type=url],
.app-shell[data-role] input[type=tel],
.app-shell[data-role] input[type=number],
.app-shell[data-role] input[type=date],
.app-shell[data-role] input[type=search],
.app-shell[data-role] select,
.app-shell[data-role] textarea {
  font-size: 14.5px; border-radius: 12px; border-color: var(--line); padding: 11px 14px; background: #fff;
}
.app-shell[data-role] input:focus,
.app-shell[data-role] select:focus,
.app-shell[data-role] textarea:focus { border-color: var(--accent-1); box-shadow: var(--ring); outline: none; }
.app-shell[data-role] label { font-size: 13.5px; font-weight: 600; }

/* ---------- Tabel: header marun gelap, baris lega ---------- */
.app-shell[data-role] .table { border-collapse: separate; border-spacing: 0; margin-top: 6px; }
.app-shell[data-role] .table th {
  background: #2b3038; color: #fff; border-bottom: 0; font-size: 12px; letter-spacing: .06em;
  padding: 15px 16px;
}
.app-shell[data-role] .table th:first-child { border-top-left-radius: 14px; }
.app-shell[data-role] .table th:last-child { border-top-right-radius: 14px; }
.app-shell[data-role] .table td { font-size: 14.5px; padding: 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.app-shell[data-role] .table tbody tr:hover td { background: #fbf6f3; }
.app-shell[data-role] .table .sub, .app-shell[data-role] .sub { font-size: 12.5px; }
.app-shell[data-role] .guest-name { font-weight: 700; font-size: 15px; }
.app-shell[data-role] .table-toolbar { gap: 12px; margin-bottom: 16px; }
.app-shell[data-role] .table-search { max-width: 360px; }
.app-shell[data-role] .table-search input { padding-left: 38px; background: #f8f9fc; }

/* ---------- Badge / chip ---------- */
.app-shell[data-role] .badge { font-size: 12.5px; font-weight: 700; padding: 5px 12px; }
.app-shell[data-role] .badge-neutral { background: #eef0f6; color: #5d6478; }
.app-shell[data-role] .chip { background: #fff; padding: 8px 16px; font-size: 13.5px; font-weight: 700; }
.app-shell[data-role] .chip:hover { border-color: #ecd2c4; background: var(--panel); color: var(--accent-1); }
.app-shell[data-role] .chip.on { background: var(--accent-1); border-color: var(--accent-1); color: #fff; }
.app-shell[data-role] .filter-chips { gap: 10px; margin-bottom: 18px; }

/* ---------- Halaman Ringkasan ---------- */
.app-shell[data-role] .hero-couple {
  background: linear-gradient(120deg, #2f343b 0%, #1f2328 100%);
  border-radius: 24px; padding: 30px 34px; box-shadow: 0 24px 40px -28px rgba(31, 35, 40, .9);
}
.app-shell[data-role] .hero-couple h2 { font-size: 28px; font-weight: 800; }
.app-shell[data-role] .hero-couple .hero-meta { font-size: 14.5px; }
.app-shell[data-role] .hero-actions a { font-size: 13.5px; padding: 9px 18px; }
.app-shell[data-role] .hero-count strong { font-size: 34px; font-weight: 800; }
.app-shell[data-role] .legend { font-size: 14.5px; }
.app-shell[data-role] .chart-row { gap: 20px; margin-bottom: 24px; }
.app-shell[data-role] .wish { border-radius: 16px; padding: 18px 20px; }
.app-shell[data-role] .wish p { font-size: 15px; }

/* ---------- Kartu undangan di Ringkasan ---------- */
.app-shell[data-role] .invitation-card { border-radius: 18px; border-color: var(--line); }

/* ---------- Catatan, kosong, dll ---------- */
.app-shell[data-role] .gallery-empty { background: #f8f9fc; border: 1px dashed #d9dce6; border-radius: 16px; color: var(--muted); font-size: 14.5px; padding: 28px; }
.app-shell[data-role] .promo-note { border-radius: 14px; font-size: 14px; }
.app-shell[data-role] .app-footer { color: #9aa0b3; }

/* ---------- Layar kecil ---------- */
@media (max-width: 900px) {
  .app-shell[data-role] .main-content { padding: 4px 16px 48px; }
  .app-shell[data-role] .topbar { padding: 12px 16px; }
  .app-shell[data-role] .card { padding: 20px 18px; border-radius: 18px; }
  .app-shell[data-role] .hero-couple { padding: 22px 20px; }
  .app-shell[data-role] .hero-couple h2 { font-size: 22px; }
}

/* ---------- Aksen hangat (peach/terracotta) ---------- */
.app-shell[data-role] { --ring: 0 0 0 3px rgba(217, 138, 104, .35); }
.app-shell[data-role] ::selection { background: rgba(217, 138, 104, .3); }
.app-shell[data-role] .sidebar-brand-text em,
.app-shell[data-role] .count-pill,
.app-shell[data-role] .card-icon,
.app-shell[data-role] .breadcrumbs li[aria-current],
.app-shell[data-role] .sidebar-help-ico,
.app-shell[data-role] .stat-icon,
.app-shell[data-role] .wish-av,
.app-shell[data-role] .g-av { color: var(--warm); }
.app-shell[data-role] .sidebar-link:hover { color: var(--warm); }
.app-shell[data-role] .sidebar-link.active { box-shadow: inset 3px 0 0 var(--warm), 0 8px 18px -10px rgba(31, 35, 40, .7); }
.app-shell[data-role] .stat-card.stat-accent .stat-icon,
.app-shell[data-role] .stat-card.stat-accent .stat-value { color: var(--accent-1); }
.app-shell[data-role] .stat-card.stat-ok .stat-icon { color: var(--ok-text); }
.app-shell[data-role] .stat-card.stat-warn .stat-icon { color: var(--warn-text); }
.app-shell[data-role] .hero-couple { background: linear-gradient(120deg, #2f343b 0%, #3f464f 100%); }
.app-shell[data-role] .hero-couple::after { content: none; }
.app-shell[data-role] .hero-actions a { color: #1f2328; }
.app-shell[data-role] .hero-actions a.ghost { color: #fff; }
.app-shell[data-role] .chip.on { background: var(--accent-1); }
.app-shell[data-role] .topbar-avatar { background: linear-gradient(135deg, #d98a68, #c0673f); }
.app-shell[data-role] .container p a:not([class]), .app-shell[data-role] .container .muted a:not([class]) { color: var(--warm); }
.app-shell[data-role] .note-lock a { color: inherit; font-weight: 700; }

/* ---------- Perbaikan: awalan "Rp"/"@" & akhiran pada input ---------- */
.app-shell[data-role] .input-prefix input[type] { padding-left: 48px; }
.app-shell[data-role] .input-prefix span { left: 16px; }
.app-shell[data-role] .input-suffix input[type] { padding-right: 44px; }
.app-shell[data-role] .input-suffix span { right: 16px; }

/* ---------- Satu keluarga huruf: sans-serif di seluruh panel ---------- */
.app-shell[data-role] *:not(em):not(svg *) { font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; }
.app-shell[data-role] .sidebar-brand-text em { font-family: 'Playfair Display', serif; }
.app-shell[data-role] h1, .app-shell[data-role] h2, .app-shell[data-role] h3, .app-shell[data-role] h4 { letter-spacing: -0.01em; }

/* ---------- Halaman login (pelanggan, admin, partner) ---------- */
body.auth-page { background: #f5f6fa; font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; font-size: 15px; --accent-1: #2f343b; --accent-2: #1f2328; --warm: #c0673f; --panel: #f8efe9; --line: #e7e9f1; --ink: #1c2030; --muted: #6b7183; --ring: 0 0 0 3px rgba(217, 138, 104, .35); }
body.auth-page h1, body.auth-page h2, body.auth-page h3 { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.015em; }
body.auth-page .auth-aside {
  background:
    radial-gradient(560px circle at 8% -6%, rgba(217, 138, 104, .38), transparent 55%),
    radial-gradient(520px circle at 100% 100%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(190deg, #3b414a, #1f2328 82%);
}
body.auth-page .auth-aside-brand em { color: #e9a889; }
body.auth-page .auth-aside h2 { font-size: 36px; color: #fff; }
body.auth-page .auth-points svg { color: #e9a889; }
body.auth-page .auth-box {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 40px 38px; max-width: 430px;
  box-shadow: 0 30px 60px -34px rgba(20, 24, 40, .35);
}
body.auth-page .auth-eyebrow { color: var(--warm); font-weight: 700; }
body.auth-page .auth-box h2 { font-size: 27px; }
body.auth-page .auth-box input[type=text], body.auth-page .auth-box input[type=email], body.auth-page .auth-box input[type=password], body.auth-page .auth-box input[type=tel] {
  font-size: 15px; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
}
body.auth-page .auth-box input:focus { border-color: var(--accent-1); box-shadow: var(--ring); outline: none; }
body.auth-page .auth-box button[type=submit], body.auth-page .auth-box .btn {
  background: var(--accent-1); border-radius: 12px; font-size: 15px; box-shadow: 0 10px 20px -12px rgba(31, 35, 40, .8);
}
body.auth-page .auth-box button[type=submit]:hover, body.auth-page .auth-box .btn:hover { background: var(--accent-2); }
body.auth-page .auth-foot a { color: var(--warm); }
body.auth-page .auth-back a { color: var(--warm); }
body.auth-page .auth-box a { color: var(--warm); }

/* ---------- Pilihan desain di tabel pelanggan admin (jangan terpotong) ---------- */
.app-shell[data-role] .cust-actions select.cust-select {
  width: 100%; height: 42px; padding: 0 36px 0 14px; font-size: 13.5px; line-height: 1.2;
  border-radius: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.app-shell[data-role] .cust-actions { min-width: 250px; }
.app-shell[data-role] .cust-btn-row { gap: 8px; }
.app-shell[data-role] .cust-btn { border-radius: 11px; font-size: 13.5px; min-height: 40px; }
.app-shell[data-role] select { line-height: 1.3; min-height: 44px; }
.app-shell[data-role] .table select { min-height: 40px; }

/* ---------- Tombol di samping input tidak ikut turun oleh teks bantuan ---------- */
.app-shell[data-role] .inline-edit { align-items: flex-start; }
.app-shell[data-role] .inline-edit > .btn, .app-shell[data-role] .inline-edit > button { margin-top: 27px; min-height: 46px; }
@media (max-width: 640px) { .app-shell[data-role] .inline-edit > .btn, .app-shell[data-role] .inline-edit > button { margin-top: 0; width: 100%; } }

/* Tombol preset warna Dress Code: aturan global button{color:#fff} membuat teksnya putih di atas latar putih. */
.app-shell[data-role] .dc-chip{color:#2f343b !important;font-weight:600;transition:background .12s,border-color .12s,transform .12s}
.app-shell[data-role] .dc-chip:hover{background:#f8efe9 !important;border-color:#c0673f !important;transform:none;box-shadow:none}

/* Pesan peringatan (sebagian berhasil, sebagian tidak) */
.app-shell[data-role] .alert-warning{background:#fdf3e4;color:#7a4a12;border-color:#f0d3a5}
.app-shell[data-role] .alert-warning .alert-icon{color:#c27a1c}
body.auth-page .auth-box .alert .alert-close{width:28px;height:28px;margin-top:0;flex:0 0 28px}
body.auth-page .auth-box a.btn{color:#fff}

/* ================================================================
   Panel kiri admin bisa disembunyikan (desktop). Bawaan: tampil.
   Pilihan diingat di browser (localStorage pm_admin_nav).
   ================================================================ */
.topbar-collapse { display: none; }
@media (min-width: 961px) {
  .app-shell[data-role="admin"] .topbar-collapse {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border-radius: 9px; flex-shrink: 0;
    border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  }
  .app-shell[data-role="admin"] .topbar-collapse:hover { background: #f5f6fa; box-shadow: none; transform: none; }
  .app-shell[data-role="admin"] .topbar-collapse svg { width: 18px; height: 18px; }
  .app-shell[data-role="admin"].nav-anim .sidebar { transition: transform .22s ease; }
  .app-shell[data-role="admin"].nav-anim .main-wrap { transition: margin-left .22s ease; }
  .app-shell[data-role="admin"].nav-collapsed .sidebar { transform: translateX(-100%); box-shadow: none; }
  .app-shell[data-role="admin"].nav-collapsed .main-wrap { margin-left: 0; }
}