/* Chrome Android membesarkan sendiri teks di blok yang lebih lebar dari layar
   ("font boosting" / text autosizing). Safari iOS TIDAK melakukannya — itulah
   kenapa portal ini terlihat pas di iPhone tapi kegedean di Android padahal
   CSS-nya sama persis. Mengunci ke 100% membuat ukuran huruf yang kita tulis
   benar-benar yang dipakai, di kedua platform.
   Bukan masalah aksesibilitas: ini hanya mematikan penskalaan OTOMATIS per-blok,
   zoom manual (cubit) dan setelan ukuran huruf sistem tetap berfungsi. */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    --sidebar-width: 240px;
    --sidebar-bg: #1e293b;
    --sidebar-hover: #334155;
    --sidebar-active: #3b82f6;
    --sidebar-text: #cbd5e1;
    --sidebar-text-active: #ffffff;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f1f5f9;
    min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 1.25rem 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid #334155;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-brand .icon { font-size: 1.4rem; }

.sidebar-nav {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    flex: 1;
}

.sidebar-nav .nav-label {
    padding: 0.75rem 1rem 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    font-weight: 600;
}

.sidebar-nav .nav-item a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}

.sidebar-nav .nav-item a:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.sidebar-nav .nav-item a.active {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
    border-left-color: var(--sidebar-active);
    font-weight: 500;
}

.sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #334155;
    font-size: 0.8rem;
}

.sidebar-footer a {
    color: #94a3b8;
    text-decoration: none;
}

.sidebar-footer a:hover { color: #fff; }

/* ── WLB Selector in sidebar ──────────────────────── */
.wlb-selector {
    padding: 0.5rem 1rem;
}

.wlb-selector select {
    width: 100%;
    background: #334155;
    color: #fff;
    border: 1px solid #475569;
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.wlb-selector select:focus {
    border-color: var(--sidebar-active);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
}

/* ── Main Content ─────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 1.5rem 2rem;
    min-height: 100vh;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* ── Cards ────────────────────────────────────────── */
.stat-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* ── Tables ───────────────────────────────────────── */
.table-wrap {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    overflow-x: auto;   /* scroll horizontal jika tabel lebar */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.table-wrap .table {
    margin: 0;
    min-width: max-content; /* jangan wrap kolom, biarkan scroll */
}

.table-wrap .table th {
    background: #f8fafc;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

.table-wrap .table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

/* ── Freeze kolom Aksi (last column) — sticky ke kanan ─── */
.table-wrap .table th:last-child,
.table-wrap .table td:last-child {
    position: sticky;
    right: 0;
    background: #f8fafc;
    z-index: 2;
    box-shadow: -2px 0 6px rgba(0,0,0,0.06);
}

.table-wrap .table td:last-child {
    background: #fff;
}

/* ── Login Page ───────────────────────────────────── */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.login-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.login-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
}

.login-card .subtitle {
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* ── Misc ─────────────────────────────────────────── */
.text-nominal { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.badge { font-weight: 500; }
.badge.bg-outline-primary { background: transparent; color: #3b82f6; border: 1px solid #3b82f6; }
.badge.bg-outline-secondary { background: transparent; color: #64748b; border: 1px solid #cbd5e1; }

/* ── Reasons column (transfer-logs / worker-logs / transactions) ──
   Wrap pesan panjang dalam batas max-width supaya tidak overflow tabel. */
.col-reasons {
    max-width: 360px;
    min-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}
.col-reasons small {
    display: block;
}

@media (max-width: 768px) {
    .sidebar { width: 100%; height: auto; position: relative; }
    .main-content { margin-left: 0; padding: 1rem; }
    .col-reasons { max-width: 240px; }
}

/* ── Filter bar (GLOBAL — dipakai SEMUA menu: Withdraw, Deposit, Logs) ──
   Dulu didefinisikan inline per-halaman (duplikat). Dipindah ke sini agar
   semua menu konsisten. Halaman lama masih punya blok inline (harmless). */
.txn-filter-bar{background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#dee2e6);border-radius:10px;padding:10px 14px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.txn-filter-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.txn-filter-group{display:flex;align-items:center;gap:6px;background:var(--bs-tertiary-bg,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);border-radius:7px;padding:4px 10px 4px 8px;transition:border-color .15s,box-shadow .15s}
.txn-filter-group:focus-within{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.12);background:#fff}
.txn-filter-label{font-size:.72rem;font-weight:600;color:var(--bs-secondary-color,#6c757d);white-space:nowrap;margin:0;user-select:none}
.txn-date-input{border:none;background:transparent;font-size:.85rem;color:var(--bs-body-color,#212529);padding:0;outline:none;width:100px;cursor:pointer;min-width:0}
.txn-date-input[type="hidden"]{display:none}
.txn-filter-sep{color:var(--bs-secondary-color,#6c757d);font-size:.85rem;padding:0 2px}
.txn-filter-divider{width:1px;height:28px;background:var(--bs-border-color,#dee2e6);margin:0 2px}
.txn-filter-search{display:flex;align-items:center;gap:6px;background:var(--bs-tertiary-bg,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);border-radius:7px;padding:4px 10px 4px 8px;flex:1;min-width:200px;transition:border-color .15s,box-shadow .15s}
.txn-filter-search.txn-filter-search-compact{flex:0 1 280px;min-width:200px;max-width:320px}
.txn-filter-search:focus-within{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.12);background:#fff}
.txn-search-icon{color:var(--bs-secondary-color,#6c757d);font-size:.85rem;flex-shrink:0}
.txn-search-input{border:none;background:transparent;font-size:.85rem;color:var(--bs-body-color,#212529);padding:0;outline:none;width:100%;min-width:0}
.txn-search-input::placeholder{color:var(--bs-secondary-color,#adb5bd)}
.txn-filter-bank .txn-bank-btn,.txn-filter-device .txn-device-btn{background:var(--bs-tertiary-bg,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);color:var(--bs-body-color,#212529);padding:6px 12px;font-size:.85rem;display:inline-flex;align-items:center;gap:6px}
.txn-filter-bank .txn-bank-btn:hover,.txn-filter-device .txn-device-btn:hover{background:#fff;border-color:#0d6efd}
.txn-filter-bank .dropdown-menu,.txn-filter-device .dropdown-menu{border:1px solid var(--bs-border-color,#dee2e6);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.txn-filter-bank .form-check,.txn-filter-device .form-check{padding-left:1.6em;padding-top:3px;padding-bottom:3px}
.txn-filter-bank .form-check-label,.txn-filter-device .form-check-label{font-size:.85rem;cursor:pointer;user-select:none;width:100%}
.txn-filter-bank .form-check-input,.txn-filter-device .form-check-input{cursor:pointer}
.txn-filter-pick .txn-pick-btn{background:var(--bs-tertiary-bg,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);color:var(--bs-body-color,#212529);padding:6px 12px;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;border-radius:7px;font-weight:500}
.txn-filter-pick .txn-pick-btn:hover{background:#fff;border-color:#0d6efd}
.txn-pick-cap{color:var(--bs-secondary-color,#6c757d);font-weight:600;font-size:.78rem}
.txn-pick-menu{border:1px solid var(--bs-border-color,#dee2e6);box-shadow:0 6px 22px rgba(0,0,0,.12);border-radius:10px;padding:5px;min-width:190px;max-height:320px;overflow-y:auto}
.txn-pick-opt{position:relative}
.txn-pick-opt input{position:absolute;opacity:0;pointer-events:none}
.txn-pick-opt label{display:flex;align-items:center;width:100%;margin:1px 0;padding:7px 12px;border-radius:7px;font-size:.85rem;color:#344054;cursor:pointer;transition:background .12s,color .12s}
.txn-pick-opt label:hover{background:#f1f5f9}
.txn-pick-opt input:checked+label{background:linear-gradient(135deg,#eaf2ff,#f7fbff);color:#174ea6;font-weight:600}
.txn-pick-opt input:checked+label::after{content:"\2713";margin-left:auto;font-weight:700}
.txn-pick-search-wrap{position:relative;margin-bottom:5px}
.txn-pick-search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.8rem;pointer-events:none}
.txn-pick-search{padding-left:30px!important}
.txn-pick-search:focus{border-color:#0d6efd;box-shadow:0 0 0 .18rem rgba(13,110,253,.15)}
.txn-pick-opt.is-focused>input:not(:checked)+label{background:#e7f0ff}
.txn-pick-txt mark{background:#fde68a;color:inherit;font-weight:700;padding:0 1px;border-radius:2px}
.txn-pick-empty{padding:9px 12px;font-size:.82rem;color:#94a3b8;text-align:center}
/* Multi-select (dropdown checkbox Bank/Device/Handle Banks) searchable */
.ms-pick-search{padding-left:30px!important}
.ms-pick-search:focus{border-color:#0d6efd;box-shadow:0 0 0 .18rem rgba(13,110,253,.15)}
.ms-pick-empty{padding:9px 12px;font-size:.82rem;color:#94a3b8;text-align:center}
.ms-pick-wrap{position:sticky;top:0;z-index:2;background:#fff;margin-bottom:6px;padding-top:1px}
.form-check.is-focused{background:#e7f0ff;border-radius:5px}
@media(max-width:576px){.txn-filter-divider{display:none}.txn-filter-search{min-width:100%}}

/* ── Filter GRID berlabel (modern) — semua menu Deposit & WD.
   Bungkus: <form class="dp-grid-filter"> [hidden] <div class="dpg">[cells]</div>
            <div class="dpg-actions">[Reset]</div> </form>. ── */
.dp-grid-filter{display:flex;flex-direction:column;gap:12px;width:100%}
.dpg{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:end}
.dpg-cell{display:flex;flex-direction:column;gap:5px;min-width:0;flex:0 0 190px}
.dpg-cell>label{font-size:.66rem;font-weight:700;letter-spacing:.03em;color:#64748b;text-transform:uppercase;margin:0 0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpg-date{flex-basis:210px}
@media(max-width:680px){.dpg-cell{flex:1 1 140px}}
.dpg-cell .txn-filter-search{flex:none;width:100%;min-height:36px}
.dpg-cell .txn-filter-pick,.dpg-cell .txn-filter-bank,.dpg-cell .txn-filter-device{width:100%}
.dpg-cell .txn-pick-btn,.dpg-cell .txn-bank-btn,.dpg-cell .txn-device-btn{width:100%;min-height:36px;justify-content:flex-start}
.dpg-cell .txn-pick-cap{display:none}
.dpg-cell .txn-pick-btn strong{flex:1;min-width:0;text-align:left;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpg-cell .txn-search-input{width:100%}
.dpg-datebox{display:flex;align-items:center;gap:6px;width:100%;max-width:230px;min-height:36px;background:var(--bs-tertiary-bg,#f8f9fa);border:1px solid var(--bs-border-color,#dee2e6);border-radius:7px;padding:4px 10px}
.dpg-datebox:focus-within{border-color:#0d6efd;box-shadow:0 0 0 3px rgba(13,110,253,.12);background:#fff}
.dpg-ic{color:#6c757d;font-size:.85rem;flex-shrink:0}
.dpg-din{border:none;background:transparent;font-size:.84rem;color:#212529;padding:0;outline:none;min-width:0;width:100%;cursor:pointer}
.txn-range-trigger{cursor:pointer;border:none;background:transparent;color:#212529;padding:0;outline:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txn-range-trigger.dpg-din{font-size:.84rem;width:100%}
.txn-range-trigger:not(.dpg-din){font-size:.85rem;width:150px}
/* Tombol Reset / aksi filter dipojokkan kanan-bawah (filter bar flat) */
.txn-filter-actions{flex-basis:100%;width:100%;display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:2px}
/* Preset cepat di dalam kalender flatpickr (Hari ini / Kemarin / 7 Hari / dll) */
.fp-presets{display:flex;flex-wrap:wrap;gap:5px;padding:8px;border-top:1px solid #e9ecef;justify-content:center}
.fp-preset-btn{border:1px solid #d7dee8;background:#f8fafc;color:#334155;border-radius:6px;padding:4px 10px;font-size:.78rem;line-height:1;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.fp-preset-btn:hover{background:#0d6efd;border-color:#0d6efd;color:#fff}
.dpg-dsep{color:#6c757d;flex-shrink:0}
.dpg-actions{display:flex;justify-content:flex-end}
.dpg-actions .btn{min-height:36px;display:inline-flex;align-items:center;gap:5px;padding-inline:18px}

/* ── Bank picker + device-readonly + cred-disabled (GLOBAL — dipakai
   devices.php, wlb-settings.php (Scrape Banks), deposit-devices.php,
   deposit-settings.php (Process Banks)). Dulu inline di devices.php. ── */
.device-readonly { background:#eef1f5; border-color:#d7dde6; color:#667085; cursor:not-allowed; }
.bank-picker { display:grid; grid-template-columns:repeat(auto-fit, minmax(142px,1fr)); gap:10px; padding:12px; border:1px solid #e2e8f0; border-radius:16px; background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%); }
.bank-option { position:relative; }
.bank-option input { position:absolute; opacity:0; pointer-events:none; }
/* nowrap + font sedikit dikecilkan: label terpanjang ("BLU BCA DIGITAL") muat 1
   baris — tanpa ini wrap 2 baris & kotaknya jadi lebih tinggi sendiri (gak rapih). */
.bank-option label { display:flex; align-items:center; justify-content:center; min-height:42px; margin:0; padding:0 10px; border:1px solid #d8e0ea; border-radius:12px; background:#fff; color:#344054; font-weight:700; font-size:.82rem; letter-spacing:.01em; white-space:nowrap; cursor:pointer; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; }
.bank-option label:hover { border-color:#7aa7ff; box-shadow:0 8px 22px rgba(64,112,244,.12); transform:translateY(-1px); }
.bank-option input:checked + label { border-color:#2563eb; background:linear-gradient(135deg,#eaf2ff 0%,#f7fbff 100%); color:#174ea6; box-shadow:inset 0 0 0 1px rgba(37,99,235,.28), 0 10px 24px rgba(37,99,235,.14); }
.bank-picker-mobile input:checked + label { border-color:#2563eb; background:linear-gradient(135deg,#dbeafe 0%,#eff6ff 100%); color:#1e3a8a; box-shadow:inset 0 0 0 1px rgba(37,99,235,.28), 0 8px 20px rgba(37,99,235,.12); }
.bank-picker-desktop input:checked + label { border-color:#7c3aed; background:linear-gradient(135deg,#f3e8ff 0%,#faf5ff 100%); color:#5b21b6; box-shadow:inset 0 0 0 1px rgba(124,58,237,.28), 0 10px 24px rgba(124,58,237,.14); }
.cred-row.cred-disabled { opacity:0.65; pointer-events:none; }
.cred-row.cred-disabled .form-label { color:#94a3b8 !important; }
.cred-row.cred-disabled .form-control, .cred-row.cred-disabled input[type="text"] { background:#eef1f5 !important; border-color:#d7dde6 !important; color:#667085 !important; cursor:not-allowed !important; box-shadow:none !important; }
/* Bank picker toolbar (Pilih Semua / Hapus Semua / search / counter) */
.bank-picker-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.bank-picker-bar .bp-search { flex:1; min-width:160px; max-width:280px; }
.bank-option.bp-hidden { display:none; }

/* ── Money cell (Rp kiri, nominal kanan) — deposit (_dp_alias_inline) + hold-withdraw ── */
.dp-amt { display:flex; justify-content:space-between; gap:10px; font-weight:600; white-space:nowrap; }
.dp-amt .dp-rp { font-weight:500; opacity:.85; }
/* ── Tabel multi-select: kolom checkbox + bulk bar (hold-withdraw pakai .chk-*/.multibar) ── */
.chk-col { width:42px; }
.chk-col .form-check-input { width:1.15rem; height:1.15rem; cursor:pointer; margin:0; }
.multibar { display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem; margin-bottom:.6rem; background:#eef2ff; border:1px solid #c7d2fe; border-radius:.6rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.multibar-info { font-weight:600; color:#3730a3; margin-right:auto; }
/* ── Dropdown custom (txn-pick) di dalam modal → full-width + caret kanan, biar pas
   sbg field form (modal Tambah/Edit di admins, whitelist, dll). ── */
.modal .txn-filter-pick { width:100%; }
.modal .txn-filter-pick .txn-pick-btn { width:100%; }
.modal .txn-filter-pick .txn-pick-btn::after { margin-left:auto; }
.modal .txn-pick-menu { width:100%; }