/* ============================================================
   NAWALA CHECKPOST — Admin + Dashboard UI
   Shared with style.css vars (Alto's Odyssey palette)
   ============================================================ */

.app-body {
    display:flex; min-height:100vh; background:var(--bg-body);
    font-family:var(--font); color:var(--text-primary);
    overflow-x:hidden;
}

/* ============= SIDEBAR ============= */
.sidebar {
    width:240px; flex-shrink:0;
    background:var(--bg-deep);
    border-right:1px solid var(--border-subtle);
    display:flex; flex-direction:column;
    padding:22px 16px;
    position:sticky; top:0; height:100vh;
}
.sidebar-brand {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; margin-bottom:18px;
    color:var(--text-primary); text-decoration:none;
}
.sidebar-brand-title { font-size:1.1rem; font-weight:800; letter-spacing:.5px; }
.sidebar-brand-sub { font-size:.65rem; font-weight:600; letter-spacing:3px; color:var(--accent); margin-top:1px; }
.sidebar-nav { display:flex; flex-direction:column; gap:3px; flex:1; }
.sidebar-link {
    display:flex; align-items:center; gap:11px;
    padding:11px 14px; border-radius:10px;
    color:var(--text-secondary); font-weight:500; font-size:.92rem;
    transition:all .2s ease;
}
.sidebar-link i { width:18px; text-align:center; font-size:.9rem; }
.sidebar-link:hover { background:var(--bg-card); color:var(--text-primary); }
.sidebar-link.active {
    background:linear-gradient(90deg, var(--accent-glow), transparent);
    color:var(--accent); font-weight:600;
    border-left:2px solid var(--accent);
    padding-left:12px;
}
.sb-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:18px; padding:0 6px;
    margin-left:auto;
    font-size:.68rem; font-weight:700; line-height:1;
    border-radius:9px;
    background:#ef4444; color:#fff;
    box-shadow:0 0 0 2px rgba(239,68,68,.18), 0 0 8px rgba(239,68,68,.45);
    animation:sbBadgePulse 2s ease-in-out infinite;
}
.sb-badge-danger { background:#ef4444; color:#fff; }
@keyframes sbBadgePulse {
    0%,100% { box-shadow:0 0 0 2px rgba(239,68,68,.18), 0 0 8px rgba(239,68,68,.45); }
    50%     { box-shadow:0 0 0 3px rgba(239,68,68,.30), 0 0 14px rgba(239,68,68,.75); }
}
.sidebar-sep { height:1px; background:var(--border-subtle); margin:10px 0; }
.sidebar-foot {
    border-top:1px solid var(--border-subtle);
    padding-top:14px; margin-top:14px;
}
.sidebar-user { color:var(--text-muted); font-size:.82rem; display:flex; align-items:center; gap:8px; }
.sidebar-toggle {
    display:none;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid rgba(95,227,194,.28);
    background:linear-gradient(180deg, rgba(14,22,32,.96), rgba(8,14,22,.96));
    color:var(--text-primary);
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
    margin-left:auto;
    box-shadow:0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    transition:all .18s ease;
}
.sidebar-toggle:hover {
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-glow);
}

/* ============= MAIN ============= */
.app-main { flex:1; padding:28px 36px; min-width:0; max-width:100%; }
.app-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px; padding-bottom:18px;
    border-bottom:1px solid var(--border-subtle);
    gap:16px; flex-wrap:wrap;
}
.app-title { font-size:1.6rem; font-weight:800; }
.app-header-actions { display:flex; gap:18px; align-items:center; flex-wrap:wrap; min-width:0; }
.header-page-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0; }
.header-page-actions:empty { display:none; }
.header-global-actions {
    display:flex; gap:10px; align-items:center;
    padding-left:18px; border-left:1px solid var(--border-subtle);
}
.header-page-actions:empty + .header-global-actions {
    padding-left:0; border-left:none;
}
@media (max-width: 640px) {
    .header-global-actions { padding-left:0; border-left:none; }
}

@media (max-width: 700px) {
    .auth-wrap {
        max-width:350px;
    }
}
.header-icon-btn {
    width:38px; height:38px; border-radius:50%;
    background:var(--bg-card); border:1px solid var(--border-subtle);
    color:var(--text-primary); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none; transition:transform .15s, border-color .15s;
}
.header-icon-btn:hover { transform:scale(1.05); border-color:var(--accent); color:var(--accent); }
.header-icon-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }

/* ============= STAT CARDS ============= */
.stats-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:16px; margin-bottom:24px;
}
.stat-card {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    padding:18px 20px; border-radius:var(--radius); position:relative;
    transition:all var(--transition);
}
.stat-card:hover { border-color:var(--border); transform:translateY(-2px); }
.stat-label { font-size:.75rem; font-weight:600; color:var(--text-muted);
    letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.stat-value { font-size:1.9rem; font-weight:800; color:var(--text-primary); line-height:1; }
.stat-meta { font-size:.82rem; color:var(--text-secondary); margin-top:6px; }

.progress {
    width:100%; height:6px; background:var(--bg-deep); border-radius:3px;
    margin-top:10px; overflow:hidden;
}
.progress-bar {
    height:100%; background:linear-gradient(90deg, var(--accent), var(--gold));
    border-radius:3px; transition:width .4s ease;
}

/* ============= PANEL ============= */
.panel {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--radius); margin-bottom:20px;
    overflow:hidden;
    max-width:100%;
}
.panel-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--border-subtle);
    flex-wrap:wrap;
}
.panel-head h3 { font-size:1.05rem; font-weight:700; }

.two-col { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap:20px; }

/* Form yang langsung jadi panel — kasih padding internal biar ga mepet edge */
form.panel {
    padding: 22px;
}
form.panel > .panel-head {
    margin: -22px -22px 18px -22px;  /* kompensasi: panel-head full-width tetap */
}
@media (max-width: 600px) {
    form.panel { padding: 16px; }
    form.panel > .panel-head { margin: -16px -16px 14px -16px; }
}

/* ============= TABLE ============= */
.table { width:100%; border-collapse:collapse; }
.table th, .table td {
    padding:12px 18px; text-align:left; border-bottom:1px solid var(--border-subtle);
    font-size:.9rem;
}
.table th {
    font-weight:600; color:var(--text-muted); font-size:.76rem;
    letter-spacing:1px; text-transform:uppercase;
    background:var(--bg-deep);
}
.table td { color:var(--text-secondary); }
.table td strong { color:var(--text-primary); }
.table-hover tbody tr:hover { background:var(--bg-card-hover); }
.table td a { color:var(--accent); }
.table td,
.table th {
    overflow-wrap:normal;
}
.table code,
.table small,
.table a {
    overflow-wrap:anywhere;
}

/* ============= FORMS ============= */
.form-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:16px 20px; padding:22px;
}
.form-grid-full { grid-column:1 / -1; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:.85rem; font-weight:600; color:var(--text-secondary); }
.form-control {
    width:100%; padding:10px 14px;
    background:var(--bg-input); color:var(--text-primary);
    border:1px solid var(--border-input); border-radius:var(--radius-sm);
    font-size:.92rem; font-family:inherit;
    transition:all var(--transition);
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-control:disabled { opacity:.55; cursor:not-allowed; }
textarea.form-control { resize:vertical; min-height:70px; font-family:'JetBrains Mono', monospace; }
.form-check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.92rem; color:var(--text-secondary); }
.form-check input { width:16px; height:16px; accent-color:var(--accent); }

.search-row { display:flex; gap:10px; margin-bottom:16px; }
.search-row .form-control { max-width:360px; }

/* ============= BADGES (reuse style.css if available) ============= */
.badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:999px;
    font-size:.72rem; font-weight:600; letter-spacing:.5px;
    text-transform:uppercase;
}
.badge-accent { background:var(--accent-glow); color:var(--accent); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-danger { background:var(--danger-bg); color:var(--danger); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }

/* ============= BUTTONS (variants) ============= */
.btn-sm { padding:7px 14px; font-size:.82rem; border-radius:8px; }
.btn-block { width:100%; }
.btn-outline {
    background:transparent; color:var(--accent); border:1px solid var(--accent);
}
.btn-outline:hover { background:var(--accent-glow); color:var(--accent); transform:none; box-shadow:none; }
.btn-primary { background:var(--accent); color:#04231d; }
.btn-primary:hover { background:var(--accent-hover); color:#04231d; }
.btn-secondary {
    background:var(--bg-deep);
    color:var(--text-primary);
    border:1px solid var(--border);
}
.btn-secondary:hover {
    background:var(--accent-glow);
    color:var(--accent);
    border-color:var(--accent);
    transform:none;
    box-shadow:none;
}
.btn-danger { background:var(--danger); color:#1a0405; }
.btn-danger:hover { background:#d65858; color:#1a0405; }

/* ============= FLASH ============= */
.flash {
    padding:12px 18px; margin-bottom:14px; border-radius:var(--radius-sm);
    font-size:.92rem; font-weight:500;
    border-left:3px solid;
}
.flash-success { background:var(--success-bg); color:var(--success); border-color:var(--success); }
.flash-danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.flash-warning { background:var(--warning-bg); color:var(--warning); border-color:var(--warning); }
.flash-info { background:var(--info-bg); color:var(--info); border-color:var(--info); }

/* ============= AUTH PAGE ============= */
.auth-body {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:32px 20px;
    overflow-x:hidden;
    background:
        radial-gradient(ellipse at top, rgba(95,227,194,.08), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(245,215,122,.05), transparent 60%),
        var(--bg-body);
}
.auth-wrap {
    width:min(100%, 420px);
    max-width:calc(100vw - 40px);
    min-width:0;
}
.auth-brand {
    display:flex; align-items:center; gap:12px;
    justify-content:center; margin-bottom:24px;
    color:var(--text-primary); text-decoration:none;
}
.auth-brand-title { font-size:1.4rem; font-weight:800; letter-spacing:1px; }
.auth-brand-sub { font-size:.7rem; font-weight:600; letter-spacing:4px; color:var(--accent); margin-top:2px; }
.auth-card {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg); padding:30px 28px;
    box-shadow:var(--shadow);
    width:100%;
    max-width:100%;
    min-width:0;
}
.auth-title { font-size:1.4rem; font-weight:800; margin-bottom:6px; }
.auth-sub { color:var(--text-muted); font-size:.88rem; margin-bottom:22px; overflow-wrap:anywhere; }
.auth-sub a { color:var(--accent); }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-footer { text-align:center; margin-top:18px; }
.auth-footer a { color:var(--text-muted); font-size:.88rem; }

/* ============= PRICING (landing) ============= */
.pricing-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:20px; max-width:1100px; margin:0 auto;
}
.pricing-card {
    background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--radius-lg); padding:28px 24px;
    display:flex; flex-direction:column;
    transition:all var(--transition);
}
.pricing-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-glow); }
.pricing-card.popular {
    border-color:var(--gold); box-shadow:0 0 28px rgba(245,215,122,.15);
    position:relative; transform:scale(1.02);
}
.pricing-card.popular::before {
    content:"POPULAR"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:linear-gradient(135deg,var(--gold),var(--accent));
    color:#04231d; padding:4px 16px; border-radius:999px;
    font-size:.7rem; font-weight:800; letter-spacing:2px;
}
.pricing-name { font-size:.85rem; font-weight:700; color:var(--accent); letter-spacing:3px; text-transform:uppercase; }
.pricing-price { font-size:2.2rem; font-weight:800; margin:12px 0 4px; color:var(--text-primary); }
.pricing-price small { font-size:1rem; font-weight:500; color:var(--text-muted); }
.pricing-tagline { color:var(--text-secondary); font-size:.92rem; margin-bottom:22px; min-height:42px; }
.pricing-features { list-style:none; padding:0; margin:0 0 22px; flex:1; }
.pricing-features li {
    display:flex; align-items:flex-start; gap:10px; padding:7px 0;
    color:var(--text-secondary); font-size:.9rem; border-bottom:1px dashed var(--border-subtle);
}
.pricing-features li i { color:var(--accent); margin-top:3px; }

/* CTA block — sticks to bottom of card. Gift slot di atas, button di bawah. */
.pricing-cta {
    margin-top:auto;
    display:flex; flex-direction:column;
    gap:8px;
}
.pricing-gift-slot {
    min-height:24px;
    display:flex; align-items:center; justify-content:center;
}
.pricing-gift {
    font-size:.78rem; color:var(--gold);
    text-align:center; text-decoration:none;
    padding:2px 10px; border-radius:6px;
    transition:background .2s;
}
.pricing-gift:hover { background:rgba(245,215,122,0.08); text-decoration:underline; }
.pricing-cta .btn { margin-top:0; }

/* ============= TABLE OVERFLOW ============= */
.table-wrap,
.panel > .table,
.panel > form > .table {
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.panel table.table,
.table-wrap table.table {
    min-width:100%;
}

.panel > .table {
    border-radius:0;
}

/* ============= RESPONSIVE ============= */
@media (max-width: 880px) {
    .app-body { flex-direction:column; }
    .sidebar {
        width:100%;
        height:58px;
        position:sticky;
        top:0;
        z-index:500;
        flex-direction:row;
        align-items:center;
        padding:8px 12px;
        gap:10px;
        overflow:visible;
        backdrop-filter: blur(12px);
        background:rgba(4,8,16,.96);
        border-right:none;
        border-bottom:1px solid var(--border-subtle);
        box-shadow:0 10px 28px rgba(0,0,0,.28);
    }
    .sidebar::-webkit-scrollbar { display:none; }
    .sidebar-brand { margin:0; flex-shrink:0; padding:4px 6px; min-width:0; }
    .sidebar-brand-title { font-size:.95rem; }
    .sidebar-brand-sub { display:none; }
    .sidebar-brand img { width:26px; height:26px; }
    .sidebar-toggle { display:inline-flex; }
    .sidebar-nav {
        display:none;
        position:fixed;
        top:58px;
        left:10px;
        right:10px;
        z-index:510;
        max-height:calc(100vh - 76px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        flex-direction:column;
        gap:4px;
        padding:10px;
        background:rgba(6,12,20,.98);
        border:1px solid var(--border);
        border-radius:14px;
        box-shadow:0 18px 44px rgba(0,0,0,.48);
    }
    body.mobile-nav-open .sidebar-nav {
        display:flex;
    }
    .sidebar-link {
        white-space:normal;
        padding:12px 14px;
        font-size:.9rem;
        border-radius:10px;
        min-height:44px;
        justify-content:flex-start;
        border:1px solid transparent;
    }
    .sidebar-link:hover {
        border-color:rgba(95,227,194,.18);
    }
    .sidebar-link.active {
        border-left:2px solid var(--accent);
        padding-left:12px;
        background:linear-gradient(90deg, rgba(95,227,194,.18), rgba(95,227,194,.06));
        color:var(--accent);
        border-top-color:rgba(95,227,194,.16);
        border-right-color:rgba(95,227,194,.16);
        border-bottom-color:rgba(95,227,194,.16);
    }
    .sidebar-sep { display:block; margin:6px 0; }
    .sidebar-foot { display:none; }

    .app-main { padding:18px 14px; }
    .app-header { margin-bottom:18px; padding-bottom:12px; gap:10px; align-items:flex-start; }
    .app-title { font-size:1.25rem; }
    .app-header-actions,
    .header-page-actions,
    .header-global-actions {
        width:100%;
        justify-content:flex-start;
    }
    .stat-card { padding:14px 16px; }
    .stat-value { font-size:1.5rem; }
    .two-col { grid-template-columns:1fr; gap:14px; }
    .form-grid { padding:18px 14px; gap:12px 14px; grid-template-columns:1fr; }
    .panel-head { padding:14px 16px; gap:10px; }
    .panel-head h3 { font-size:.98rem; }
    .table th, .table td { padding:10px 12px; font-size:.84rem; }
    .search-row {
        flex-direction:column;
    }
    .search-row .form-control {
        max-width:none;
    }
    .btn { padding:11px 20px; min-height:42px; }
    .btn-sm { padding:8px 14px; min-height:36px; }
    .pricing-card.popular { transform:none; }

    /* Landing navbar */
    .navbar-container { padding:0 14px; }
    .nav-links { display:none; }
    .logo-wordmark { display:none; }
    .hero-title { font-size:2.2rem !important; }
    .section-title { font-size:1.4rem; }
}

@media (max-width: 880px) {
    body.mobile-nav-open::before {
        content:"";
        position:fixed;
        inset:58px 0 0;
        z-index:490;
        background:rgba(0,0,0,.45);
        backdrop-filter:blur(2px);
    }
    body.app-body > #lang-toggle-btn,
    body.app-body > #theme-toggle-btn,
    body.app-body > #notif-bell {
        display:none !important;
    }
}

@media (max-width: 640px) {
    .auth-body {
        align-items:flex-start;
        padding:42px 16px 28px;
    }
    .auth-wrap {
        width:100%;
        max-width:100%;
    }
    .auth-brand {
        margin-bottom:20px;
    }
    .auth-brand img {
        width:40px;
        height:40px;
    }
    .auth-brand-title {
        font-size:1.2rem;
    }
    .auth-brand-sub {
        font-size:.62rem;
        letter-spacing:3px;
    }
    .auth-card {
        padding:24px 20px;
        border-radius:16px;
    }
    .auth-title {
        font-size:1.25rem;
    }
    .auth-card .form-group {
        min-width:0;
    }
    .auth-card .form-control,
    .auth-card .btn {
        width:100%;
        max-width:100%;
    }
    .auth-form > div[style*="justify-content:space-between"] {
        align-items:flex-start !important;
    }
    .auth-form > div[style*="justify-content:space-between"] a {
        overflow-wrap:anywhere;
    }
}

@media (max-width: 520px) {
    .app-main {
        padding:16px 10px;
    }
    .app-title {
        font-size:1.12rem;
        line-height:1.25;
    }
    .panel-head {
        align-items:flex-start;
    }
    .panel-head .btn,
    .header-page-actions .btn {
        width:100%;
    }
    .stats-grid {
        grid-template-columns:1fr;
    }
    .table th,
    .table td {
        padding:9px 10px;
    }
    .form-grid {
        padding:16px 12px;
    }
}

/* ============= TELEGRAM MINI APP CONTEXT ============= */
body[data-tg="1"] {
    --bg-body: var(--tg-bg, #060c14);
    --bg-deep: var(--tg-secondary-bg, #040810);
    --bg-card: var(--tg-secondary-bg, #0e1620);
    --text-primary: var(--tg-text, #ecfdf7);
    --text-secondary: var(--tg-hint, #93b3aa);
    --accent: var(--tg-button, #5fe3c2);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
/* Sembunyiin sidebar di Telegram Mini App — pake TG back button & full-screen UI */
body[data-tg="1"] .sidebar,
body[data-tg="1"] .navbar,
body[data-tg="1"] .scroll-cue,
body[data-tg="1"] .hero-mountains,
body[data-tg="1"] .hero-moon {
    display:none !important;
}
body[data-tg="1"] .app-main {
    padding:14px;
}
body[data-tg="1"] .app-header {
    padding-top:4px; margin-bottom:14px;
}
body[data-tg="1"] .hero {
    min-height:auto; padding:24px 14px;
}

/* Bottom nav bar sebagai pengganti sidebar di Telegram context */
body[data-tg="1"]::after {
    content:"";
    display:block;
    height:56px;
}
.tg-bottom-nav {
    display:none;
}
body[data-tg="1"] .tg-bottom-nav {
    display:flex;
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:var(--bg-deep); border-top:1px solid var(--border-subtle);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around; align-items:center;
}
.tg-bottom-nav a {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 10px; color:var(--text-muted); text-decoration:none;
    font-size:.66rem; font-weight:600; letter-spacing:.5px;
    min-width:56px; border-radius:8px;
}
.tg-bottom-nav a.active { color:var(--accent); }
.tg-bottom-nav a i { font-size:1.1rem; }

/* ============= TOUCH TARGETS ============= */
@media (pointer: coarse) {
    .btn-sm { min-height:38px; padding:8px 14px; }
    .form-check input { width:20px; height:20px; }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="url"], select, textarea {
        font-size:16px !important;  /* prevents iOS zoom on focus */
    }
}

/* ============= DARK SCROLLBAR (global) ============= */
/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:4px; }
*::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,0.14);
    border-radius:4px;
    transition: background .15s ease;
}
*::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.28); }
*::-webkit-scrollbar-corner { background:transparent; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) rgba(255,255,255,0.03); }

/* Light-mode override (kalau theme=light) */
[data-theme="light"] *::-webkit-scrollbar-track { background:rgba(0,0,0,0.04); }
[data-theme="light"] *::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.18); }
[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.30); }
[data-theme="light"] * { scrollbar-color: rgba(0,0,0,0.20) rgba(0,0,0,0.04); }