/* ============================================================
   Admin GlamTour — tema dashboard modern (clean / SaaS style)
   ============================================================ */
:root{
    /* Palet Gentelella v4 */
    --bg:#f5f7fb;
    --card:#ffffff;
    --line:#e6e7eb;
    --text:#1e2633;
    --text-2:#626d7d;
    --muted:#7e8896;
    --surface-2:#f9fafb;
    --line-light:#eff0f3;
    --primary:#1abb9c;
    --primary-soft:#e8f8f4;
    --primary-dk:#169f85;
    --green:#1abb9c;
    --green-soft:#e8f8f4;
    --red:#e74c3c;
    --red-soft:#fdecea;
    --orange:#f59e0b;
    --orange-soft:#fef3e2;
    --purple:#7c5cfc;
    --purple-soft:#efeafe;
    /* Sidebar gelap */
    --sb-bg:#1a2332;
    --sb-text:#7b8fa3;
    --sb-hover:#c5d0dc;
    --sb-active:#ffffff;
    --sb-border:rgba(255,255,255,.06);
    --radius:10px;
    --shadow:0 0 0 1px rgba(4,32,69,.06), 0 2px 4px rgba(30,38,51,.05);
}
*{ margin:0; padding:0; box-sizing:border-box;
   font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; }
body{ background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; color:inherit; }

/* ===== Login ===== */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#1a2332,#1abb9c); }
.login-card{ background:#fff; padding:40px; border-radius:18px; width:370px;
    box-shadow:0 20px 50px rgba(16,24,40,.25); }
.login-card h1{ text-align:center; color:var(--primary); margin-bottom:6px; font-size:26px; }
.login-card p{ text-align:center; color:var(--muted); margin-bottom:24px; font-size:14px; }

/* ===== Layout ===== */
.layout{ display:flex; min-height:100vh; }

/* ---- Sidebar (Gentelella dark) ---- */
.sidebar{ width:240px; background:var(--sb-bg); position:fixed; height:100%;
    display:flex; flex-direction:column; padding:0; }
.brand{ display:flex; align-items:center; gap:11px; padding:18px 18px;
    border-bottom:1px solid var(--sb-border); }
.brand img{ width:36px; height:36px; border-radius:9px; object-fit:cover; }
.brand span{ font-size:19px; font-weight:600; color:#fff; }
.brand b{ color:var(--primary); font-weight:800; }

.nav{ flex:1; overflow-y:auto; padding:8px 12px; }
.nav-section{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
    color:#4f5e72; padding:18px 12px 7px; }
.nav-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px;
    color:var(--sb-text); font-size:13.5px; font-weight:500; margin-bottom:2px; transition:.15s; }
.nav-link .nav-ic{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-link .nav-ic svg{ width:18px; height:18px; }
.nav-link:hover{ background:rgba(255,255,255,.05); color:var(--sb-hover); }
.nav-link.active{ background:rgba(26,187,156,.14); color:var(--sb-active);
    box-shadow:inset 3px 0 0 var(--primary); }
.nav-link.active .nav-ic svg{ color:var(--primary); }

/* User block bawah sidebar */
.sidebar-foot{ border-top:1px solid var(--sb-border); padding:12px; }
.sidebar-user{ display:flex; align-items:center; gap:11px; padding:6px 8px 12px; }
.su-avatar{ position:relative; width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; }
.su-online{ position:absolute; right:0; bottom:0; width:10px; height:10px; border-radius:50%;
    background:#2ecc71; border:2px solid var(--sb-bg); }
.su-info{ min-width:0; }
.su-name{ font-size:13px; font-weight:600; color:#dfe5ec; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.su-role{ font-size:11.5px; color:#5f7186; }
.nav-logout{ color:#9aa7b6; }
.nav-logout:hover{ background:rgba(231,76,60,.14); color:#ff7568; }

/* ---- Main ---- */
.main{ margin-left:240px; flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ display:flex; justify-content:space-between; align-items:center;
    background:var(--card); border-bottom:1px solid var(--line); padding:15px 28px;
    box-shadow:0 1px 3px rgba(30,38,51,.04); }
.topbar h1{ font-size:20px; font-weight:600; color:var(--text); }
.topbar-right{ display:flex; align-items:center; gap:18px; }
.bell{ font-size:17px; cursor:pointer; opacity:.7; }
.user{ display:flex; align-items:center; gap:10px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.user-name{ font-size:14px; font-weight:600; }
.content{ padding:24px 28px; }

/* ===== Cards ===== */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; box-shadow:var(--shadow); margin-bottom:22px; }
.card h3{ font-size:16px; font-weight:700; margin-bottom:16px; }

/* ===== Grid grafik ===== */
.chart-box{ position:relative; height:300px; }
.chart-box.sm{ height:260px; }
.grid-2-1{ display:grid; grid-template-columns:2fr 1fr; gap:22px; }
.grid-1-1{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.grid-2-1 .card, .grid-1-1 .card{ margin-bottom:0; }
.grid-2-1, .grid-1-1{ margin-bottom:22px; }
@media (max-width:1000px){
    .grid-2-1, .grid-1-1{ grid-template-columns:1fr; }
}

/* ===== Stat cards (gradiasi + ikon gambar) ===== */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.stat{ border:none; border-radius:var(--radius); padding:20px;
    display:flex; align-items:center; gap:16px; color:#fff; overflow:hidden; }
.stat .stat-ic{ width:52px; height:52px; border-radius:13px; flex-shrink:0; object-fit:cover;
    box-shadow:0 4px 12px rgba(0,0,0,.20); background:rgba(255,255,255,.3); }
.stat .lbl{ font-size:12.5px; color:rgba(255,255,255,.92); font-weight:600; }
.stat .num{ font-size:24px; font-weight:800; color:#fff; margin-top:3px; line-height:1.1;
    text-shadow:0 1px 2px rgba(0,0,0,.12); }

/* Varian gradiasi */
.grad-blue  { background:linear-gradient(135deg,#5b9bff,#3b6ef5); box-shadow:0 10px 22px rgba(59,110,245,.32); }
.grad-green { background:linear-gradient(135deg,#3ddc97,#0ea66e); box-shadow:0 10px 22px rgba(16,166,110,.32); }
.grad-orange{ background:linear-gradient(135deg,#ffb24d,#f97316); box-shadow:0 10px 22px rgba(249,115,22,.32); }
.grad-purple{ background:linear-gradient(135deg,#a98bff,#7c5cfc); box-shadow:0 10px 22px rgba(124,92,252,.32); }
.grad-teal  { background:linear-gradient(135deg,#2ee0c9,#0d9488); box-shadow:0 10px 22px rgba(13,148,136,.32); }
.grad-pink  { background:linear-gradient(135deg,#fb7c91,#e11d48); box-shadow:0 10px 22px rgba(225,29,72,.32); }

/* ===== Tabel ===== */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); font-size:14px; }
th{ color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.3px;
    text-transform:uppercase; background:transparent; }
tbody tr:hover, tr:hover{ background:#fafbff; }
img.thumb{ width:54px; height:54px; object-fit:cover; border-radius:10px; }

/* ===== Tabel data (search + sort + pagination) ===== */
.table-tools{ display:flex; justify-content:space-between; align-items:center; gap:12px;
    margin-bottom:14px; flex-wrap:wrap; }
.rpp{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.rpp select{ width:auto; padding:8px 30px 8px 12px; }
.search-box{ position:relative; }
.search-box input{ width:280px; padding-left:38px; }
.search-box svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--muted); }

/* Tabel data — gaya Gentelella (header abu, teks muted uppercase) */
.data-table{ border-collapse:collapse; font-size:13px; }
.data-table th{ text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.3px; color:var(--muted); background:var(--surface-2);
    border-bottom:1px solid var(--line); padding:10px 16px; }
.data-table td{ border-bottom:1px solid var(--line-light); color:var(--text-2);
    vertical-align:middle; padding:10px 16px; font-size:13px; }
.data-table tbody tr{ transition:background 80ms; }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table th.sortable{ cursor:pointer; user-select:none; }
.data-table th.sortable:hover{ color:var(--text); }
.data-table th .arrow{ opacity:.5; font-size:11px; margin-left:3px; }
.data-table th.asc .arrow, .data-table th.desc .arrow{ opacity:1; color:var(--primary); }

.pager{ display:flex; justify-content:space-between; align-items:center;
    margin-top:16px; flex-wrap:wrap; gap:10px; }
.pager-info{ font-size:12px; color:var(--muted); }
.pager-btns{ display:flex; gap:5px; }
.pager-btns button{ min-width:30px; height:30px; padding:0 8px; border:1px solid var(--line);
    background:#fff; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:500;
    color:var(--text-2); transition:.1s; }
.pager-btns button:hover:not(:disabled):not(.active){ background:var(--surface-2); border-color:#d7dbe2; }
.pager-btns button.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.pager-btns button:disabled{ opacity:.45; cursor:default; }

/* ===== Tombol ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:9px 16px; border-radius:10px; border:none; cursor:pointer;
    font-size:14px; font-weight:600; transition:.15s; }
.btn:hover{ filter:brightness(.96); }
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(26,187,156,.3); }
.btn-sm{ padding:6px 12px; font-size:12px; border-radius:8px; }
.btn-edit{ background:var(--primary-soft); color:var(--primary); }
.btn-del{ background:var(--red-soft); color:var(--red); }
.btn-add{ background:var(--primary); color:#fff; margin-bottom:16px;
    box-shadow:0 4px 12px rgba(26,187,156,.3); }
.btn-ghost{ background:#eef0f5; color:#586070; }
.btn-ghost:hover{ background:#e4e7ee; }
.btn.is-busy, .btn.is-disabled{ pointer-events:none; opacity:.6; }
.spinner{ display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.5);
    border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; vertical-align:-2px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Progress bar (blast media promosi) */
.progress{ width:100%; height:12px; background:var(--surface-2); border:1px solid var(--line);
    border-radius:20px; overflow:hidden; }
.progress-bar{ height:100%; width:0; background:var(--primary); border-radius:20px;
    transition:width .25s ease; }
.progress-bar.done{ background:var(--green); }
.btn-soft{ background:var(--surface-2); color:var(--text-2); border:1px solid var(--line); }
.btn-soft:hover{ background:#eef0f3; }

/* Daftar sub-data (Fasilitas / Tips) dalam modal */
.sub-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 12px; border:1px solid var(--line); border-radius:9px; margin-bottom:8px; }
.sub-text{ font-size:13.5px; color:var(--text); }
.sub-acts{ display:flex; gap:6px; flex-shrink:0; }
.sub-edit-input{ flex:1; }
.sub-add{ display:flex; gap:8px; margin-top:14px; }
.sub-add input{ flex:1; }
.sub-empty{ color:var(--muted); font-size:13px; padding:10px 0; text-align:center; }

/* Galeri foto */
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:8px; }
.gal-thumb{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line);
    aspect-ratio:4/3; background:var(--surface-2); }
.gal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-del{ position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:8px;
    background:rgba(231,76,60,.92); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.gal-del svg{ width:16px; height:16px; }
.gal-del:hover{ background:#e74c3c; }
.gal-add{ border-top:1px solid var(--line); padding-top:14px; margin-top:6px; }

/* Breadcrumb drill-down */
.crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:18px; flex-wrap:wrap; }
.crumbs a{ color:var(--primary); font-weight:600; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs .sep{ color:#c0c7cf; }
.crumbs .cur{ color:var(--text); font-weight:600; }

/* ===== Form ===== */
label{ display:block; font-size:13px; font-weight:600; margin:12px 0 6px; color:#3a4150; }
input,textarea,select{ width:100%; padding:11px 12px; border:1px solid #dfe3ec; border-radius:10px;
    font-size:14px; background:#fff; transition:.15s; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-soft); }
textarea{ min-height:84px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ===== Badge / Alert ===== */
.badge{ padding:4px 11px; border-radius:20px; font-size:11px; font-weight:700; display:inline-block; }
.badge-green{ background:var(--green-soft); color:var(--green); }
.badge-orange{ background:var(--orange-soft); color:#b45309; }
.badge-gray{ background:#eef0f5; color:#6b7280; }
.alert{ padding:13px 16px; border-radius:10px; margin-bottom:18px; font-size:14px; }
.alert-success{ background:var(--green-soft); color:var(--green); }
.alert-error{ background:var(--red-soft); color:var(--red); }

/* ===== Header kartu (judul + aksi) ===== */
.card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.card-head h3{ margin-bottom:0; }

/* ===== Tombol ikon (aksi tabel) ===== */
.icon-btn{ width:34px; height:34px; border:none; border-radius:9px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.icon-btn svg{ width:17px; height:17px; }
.icon-btn.edit{ background:var(--primary-soft); color:var(--primary); }
.icon-btn.del{ background:var(--red-soft); color:var(--red); }
.icon-btn:hover{ filter:brightness(.93); }

/* ===== Modal ===== */
.modal-overlay{ position:fixed; inset:0; background:rgba(16,24,40,.5); backdrop-filter:blur(2px);
    display:none; align-items:flex-start; justify-content:center; z-index:50;
    padding:40px 16px; overflow-y:auto; }
.modal-overlay.open{ display:flex; }
.modal{ background:#fff; border-radius:16px; width:100%; max-width:680px;
    box-shadow:0 24px 60px rgba(16,24,40,.3); animation:modalIn .2s ease; }
@keyframes modalIn{ from{ transform:translateY(-12px); opacity:0 } to{ transform:none; opacity:1 } }
.modal-header{ display:flex; justify-content:space-between; align-items:center;
    padding:18px 22px; border-bottom:1px solid var(--line); }
.modal-header h3{ margin:0; font-size:17px; }
.modal-close{ background:none; border:none; cursor:pointer; color:var(--muted);
    display:inline-flex; padding:4px; border-radius:8px; }
.modal-close:hover{ background:#f3f5f9; color:var(--text); }
.modal-close svg{ width:20px; height:20px; }
.modal-body{ padding:20px 22px; }
.modal-footer{ padding:16px 22px; border-top:1px solid var(--line);
    display:flex; justify-content:flex-end; gap:10px; }

/* ===== Responsif ringkas ===== */
@media (max-width:900px){
    .sidebar{ width:72px; }
    .brand span, .nav-section, .nav-link span:not(.nav-ic){ display:none; }
    .nav-link{ justify-content:center; }
    .main{ margin-left:72px; }
    .stat-grid{ grid-template-columns:repeat(2,1fr); }
    .form-row{ grid-template-columns:1fr; }
}