/* Gaya bersama semua halaman RouterOS Manager: tombol aksi utama (Tambah/Hapus/Generate) dan
   perataan kolom tabel. Satu file supaya semua halaman konsisten, tidak perlu disalin per halaman. */


/* Tombol aksi utama sedikit lebih besar dari btn-sm biasa, dan diberi efek timbul (box-shadow) */
.btn-aksi-utama {
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.btn-aksi-utama:hover,
.btn-aksi-utama:focus {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20), 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
.btn-aksi-utama:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
}

/* Ikon toggle sidebar (garis tiga/hamburger) di header — bawaan AdminLTE ukurannya kekecilan.
   display:flex + align-items:center di link-nya supaya ikon sejajar vertikal persis dengan teks
   nama usaha di sebelahnya (tanpa ini ikon nempel ke atas karena line-height bawaan ikon beda). */
[data-lte-toggle="sidebar"] {
    display: flex;
    align-items: center;
}
[data-lte-toggle="sidebar"] .bi-list {
    font-size: 1.65rem;
    line-height: 1;
}
.sidebar-toggle-text {
    font-size: 1.15rem;
}

/* Kolom Aksi selalu rata kanan dan tidak boleh membungkus tombolnya ke baris baru */
.table .col-aksi {
    text-align: right;
    white-space: nowrap;
}

/* Tabel dengan class "table-mobile-card" berubah jadi tumpukan kartu di layar mobile, menggantikan
   scroll horizontal yang susah dibaca kalau kolomnya banyak (mis. tabel Paket di Profil, kolomnya
   beda-beda tergantung kategori). Label nama kolom di depan tiap nilai diisi otomatis oleh app.js
   dari teks <thead th> (atribut data-label) — TIDAK ditulis manual di PHP, supaya tetap sinkron
   walau kolomnya kondisional. Tidak berlaku di layar desktop (md ke atas), tabel tetap seperti biasa. */
@media (max-width: 767.98px) {
    table.table-mobile-card thead {
        display: none;
    }
    table.table-mobile-card, table.table-mobile-card tbody, table.table-mobile-card tr, table.table-mobile-card td {
        display: block;
        width: 100%;
    }
    table.table-mobile-card tr {
        border: none;
        border-radius: 14px;
        margin-bottom: 6px;
        padding: 0 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    table.table-mobile-card td {
        border: none;
        border-bottom: 1px solid #f1f3f5;
        padding: 2px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
        font-size: 0.85rem;
        min-height: 0;
    }
    table.table-mobile-card tr td:last-of-type {
        border-bottom: none;
    }
    table.table-mobile-card td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        text-align: left;
        flex-shrink: 0;
    }
    /* Nama Paket/User/Group (satu-satunya nilai yang dibungkus <strong> di PHP) ditonjolkan sebagai
       judul kartu — lebih besar & pakai warna aksen, bukan cuma teks biasa seperti field lain. */
    table.table-mobile-card td strong {
        font-size: 1.02rem;
        color: var(--app-accent-color);
    }
    /* Badge nominal (Harga/PPN/Harga+PPN/dst) dibuat lebar sama & teksnya center supaya rapi
       sejajar walau jumlah digitnya beda-beda antar baris. */
    table.table-mobile-card td .badge {
        min-width: 96px;
        text-align: center;
        padding: 6px 10px;
        line-height: 1;
    }
    table.table-mobile-card td.col-aksi {
        justify-content: center;
        flex-wrap: wrap;
        border-bottom: none;
        padding: 6px 0 4px;
        gap: 8px;
    }
    table.table-mobile-card td.col-aksi::before {
        content: none;
    }
    /* Tabel Paket khusus di mobile: cukup tampilkan No/Nama Paket/Harga/Masa Aktif/Kecepatan — field
       lain (PPN, Harga+PPN, Limit Waktu, Fee, Shared User, Jual Online) disembunyikan di kartu karena
       sudah ada lengkap di popup "Detail", supaya kartunya tidak terlalu panjang. Tabel di tab lain
       (User Profiles/User Groups) tidak terpengaruh, cocoknya cuma ke label kolom Paket ini saja. */
    table.table-mobile-card td[data-label="PPN (11%)"],
    table.table-mobile-card td[data-label="Harga + PPN (11%)"],
    table.table-mobile-card td[data-label="Limit Waktu"],
    table.table-mobile-card td[data-label="Fee"],
    table.table-mobile-card td[data-label="Shared User"],
    table.table-mobile-card td[data-label="Jual Online"] {
        display: none;
    }
    /* Kartu Data Pelanggan (pelanggan.php) di mobile sengaja diringkas maksimal: cukup ID Pelanggan +
       Nama Lengkap saja — No HP/Paket/Masa Aktif Sampai/Status disembunyikan, semuanya sudah lengkap
       di popup "Detail". Dibatasi ke #pelanggan_table saja (bukan semua tabel) karena label
       "Status"/"Paket" dipakai ulang di banyak tabel lain di app ini. Checkbox & Aksi TETAP tampil,
       keduanya elemen fungsional bukan sekadar data. */
    table#pelanggan_table.table-mobile-card td[data-label="No HP"],
    table#pelanggan_table.table-mobile-card td[data-label="Paket"],
    table#pelanggan_table.table-mobile-card td[data-label="Masa Aktif Sampai"],
    table#pelanggan_table.table-mobile-card td[data-label="Status"] {
        display: none;
    }
    /* Username-nya sendiri (baris kecil di bawah Nama Lengkap, satu <td> yang sama) ikut disembunyikan
       juga — cuma bagian <small>-nya (+ <br> pemisahnya, biar tidak nyisa baris kosong), supaya Nama
       Lengkap-nya sendiri tetap tampil. */
    table#pelanggan_table.table-mobile-card td[data-label="Nama Lengkap"] small,
    table#pelanggan_table.table-mobile-card td[data-label="Nama Lengkap"] br {
        display: none;
    }
}

/* Warna aksen bersama header & sidebar-brand, satu variabel supaya keduanya selalu seragam */
:root {
    --app-accent-color: #09630134;
}

/* Header (navbar atas) semua halaman diberi warna aksen, menggantikan bg-body bawaan AdminLTE.
   Class Bootstrap "bg-body" di elemen ini pakai !important, jadi harus dilawan dengan !important juga. */
.app-header {
    background-color: var(--app-accent-color) !important;
}

/* Kotak judul "ROS Manager" di sidebar disamakan warnanya dengan header */
.sidebar-brand {
    background-color: var(--app-accent-color);
}

/* Footer dikecilkan tingginya jadi separuh bawaan AdminLTE (min-height 3rem, padding 1rem semua sisi) */
.app-footer {
    min-height: 1rem;
    padding: 0.25rem 0.5rem;
}

/* Header & footer ditahan (sticky) di tepi layar supaya tidak ikut scroll bersama isi halaman —
   struktur grid bawaan AdminLTE di sini cuma punya min-height:100vh di .app-wrapper (bukan versi
   "app-main-wrapper" yang membuat cuma .app-main yang scroll), jadi tanpa ini seluruh halaman
   (termasuk header/footer) ikut scroll sebagai satu kesatuan. */
.app-header {
    position: sticky;
    top: 0;
}

.app-footer {
    position: sticky;
    bottom: 0;
    z-index: 1030;
}

/* Submenu sidebar (treeview, mis. anak-anak "Pengaturan"/"Log") digeser lebih ke kanan — bawaan
   AdminLTE cuma ~1rem, kurang kelihatan bedanya dengan ikon menu induk di atasnya. Submenu yang lagi
   aktif/dibuka dapat bulet ikon PENUH (bi-circle-fill, diset di partials/header_sidebar.php, bukan
   cuma bulat kosong bi-circle biasa) dan warna putih solid supaya jelas menonjol dari yang lain. */
.app-sidebar .nav-treeview {
    padding-left: 1.75rem;
}
.app-sidebar .nav-treeview .nav-link.active .nav-icon {
    color: #fff;
}

/* Sidebar bisa di-scroll sendiri (naik/turun) begitu isinya lebih panjang dari tinggi layar — makin
   banyak submenu (Keuangan/Tool/Log/Pengaturan) dibuka sekaligus, makin gampang kena kasus ini. AdminLTE
   sebenarnya menyediakan scrollbar custom lewat library OverlayScrollbars, tapi library JS-nya sendiri
   TIDAK ikut dimuat di app ini (cuma CSS-nya) — jadi elemen ini diam-diam kena overflow:hidden bawaan
   tanpa ada JS yang mengubahnya jadi scrollable, bikin menu paling bawah tidak pernah bisa dijangkau.
   Solusinya: paksa scroll native browser di sini saja, tidak perlu tambah dependency JS baru. */
.sidebar-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Halaman login (login.php) — kartu "modern-card" dengan efek kaca buram + bingkai timbul, dipindahkan
   dari <style> inline supaya konsisten dengan halaman lain (semua CSS bersama ada di sini). Warna
   tombol/fokus pakai --app-accent-color yang sama seperti header/sidebar, bukan warna tetap. */
body.login-page {
    background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    min-height: 100vh;
}

.modern-card {
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 2px solid rgba(255, 255, 255, 1);
    border-left: 2px solid rgba(255, 255, 255, 1);
    border-bottom: 2px solid rgba(200, 210, 225, 0.8);
    border-right: 2px solid rgba(200, 210, 225, 0.8);
    box-shadow:
        8px 8px 20px rgba(0, 0, 0, 0.15),
        -8px -8px 20px rgba(255, 255, 255, 0.7) !important;
}

.modern-card .card-header {
    border-bottom: none;
    background-color: transparent;
    padding-top: 2.5rem !important;
    padding-bottom: 1.5rem !important;
}

.modern-card .card-footer {
    border-top: none;
    background-color: transparent;
    padding-bottom: 2.5rem !important;
}

.text-timbul {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2c3e50;
    letter-spacing: 0.5px;
    text-shadow:
        2px 2px 3px rgba(255, 255, 255, 0.8),
        -1px -1px 2px rgba(0, 0, 0, 0.1),
        3px 3px 5px rgba(0, 0, 0, 0.2);
}

.logo-modern {
    max-height: 65px;
    width: auto;
    border-radius: 0;
    padding: 0;
    background: transparent !important;
    border: none;
    box-shadow: none;
    transition: transform 0.3s ease;
}

.logo-modern:hover {
    transform: scale(1.08);
}

.login-page .form-control,
.login-page .input-group-text {
    border-radius: 12px;
    border: 1px solid #d2d6de;
}

.login-page .input-group:focus-within .input-group-text {
    border-color: var(--app-accent-color);
    color: var(--app-accent-color);
}

.btn-modern {
    border-radius: 12px;
    background: var(--app-accent-color);
    border: none;
    font-weight: 600;
    padding: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-modern:hover {
    transform: translateY(-2px);
    filter: brightness(0.92);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.teks-copyright {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

/* Kartu login dilebarkan di layar besar supaya nama usaha yang panjang (mis. "PANGAUBAN NETWORK")
   tidak pecah jadi 2 baris — bawaan AdminLTE cuma 360px. Tidak disentuh di ≤576px (mode mobile,
   AdminLTE sudah pakai lebar 90% sendiri di situ dan sudah pas). */
@media (min-width: 577px) {
    .login-page .login-box {
        width: 460px;
    }
}

/* Dasbor (dashboard.php) — kartu ringkasan bisnis modern (ikon bulat + angka besar), menggantikan
   gaya "small-box" AdminLTE lama yang blok warna solid penuh satu kotak, terasa lebih kalem/rapi. */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.10);
}

.stat-card-icon {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.stat-card-value {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
}

.stat-card-label {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.1rem;
}

/* Varian warna per kartu — latar gradasi lembut + garis aksen kiri + ikon warna solid, supaya tiap
   metrik langsung kebedakan sekilas lewat warna (bukan cuma dari teks label-nya). */
.stat-card-primary { background: linear-gradient(135deg, #e8f2ff 0%, #ffffff 65%); border-left: 4px solid #0d6efd; }
.stat-card-info    { background: linear-gradient(135deg, #e3f7fb 0%, #ffffff 65%); border-left: 4px solid #0dcaf0; }
.stat-card-success { background: linear-gradient(135deg, #e6f8ee 0%, #ffffff 65%); border-left: 4px solid #198754; }
.stat-card-warning { background: linear-gradient(135deg, #fff6e0 0%, #ffffff 65%); border-left: 4px solid #ffc107; }
.stat-card-danger  { background: linear-gradient(135deg, #fdeaea 0%, #ffffff 65%); border-left: 4px solid #dc3545; }

.stat-card-primary .stat-card-icon { background: #0d6efd; }
.stat-card-info    .stat-card-icon { background: #0dcaf0; color: #003842; }
.stat-card-success .stat-card-icon { background: #198754; }
.stat-card-warning .stat-card-icon { background: #ffc107; color: #4d3800; }
.stat-card-danger  .stat-card-icon { background: #dc3545; }

/* Status Router — versi ringkas/sekunder, hanya baris ikon+angka+label kecil di dalam satu kartu,
   bukan kartu besar sendiri-sendiri seperti metrik bisnis di atas (biar tidak mengalihkan perhatian). */
.router-status-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.router-status-item i {
    font-size: 1.35rem;
    color: var(--app-accent-color);
    opacity: 0.85;
}

.router-status-item .router-status-value {
    font-weight: 700;
    font-size: 1.05rem;
    color: #1f2937;
    line-height: 1.1;
}

.router-status-item .router-status-label {
    font-size: 0.78rem;
    color: #6c757d;
}

/* Mode Gelap (Pengaturan Umum) — Bootstrap 5.3 sendiri sudah otomatis membalik warna komponen bawaan
   (.card, .table, .btn, .alert, dst) lewat CSS variable begitu <html data-bs-theme="dark"> dipasang,
   jadi TIDAK perlu ditulis ulang di sini. Yang perlu override manual cuma class custom di atas yang
   warnanya ditulis hex tetap (bukan variable Bootstrap) — kartu statistik Dasbor, status Router, dan
   kartu mobile tabel. Sengaja TIDAK menyentuh .modern-card/.login-page/.btn-modern dkk karena halaman
   login publik selalu dipaksa terang, tidak ikut Mode Gelap admin (lihat $dark_mode di tiap halaman app). */
[data-bs-theme="dark"] .stat-card {
    background: #1e2229;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
[data-bs-theme="dark"] .stat-card-value {
    color: #f1f3f5;
}
[data-bs-theme="dark"] .stat-card-label {
    color: #9aa4b1;
}
[data-bs-theme="dark"] .stat-card-primary { background: linear-gradient(135deg, #1c2b3f 0%, #1e2229 65%); border-left-color: #4dabf7; }
[data-bs-theme="dark"] .stat-card-info    { background: linear-gradient(135deg, #14313a 0%, #1e2229 65%); border-left-color: #22d3ee; }
[data-bs-theme="dark"] .stat-card-success { background: linear-gradient(135deg, #163627 0%, #1e2229 65%); border-left-color: #40c977; }
[data-bs-theme="dark"] .stat-card-warning { background: linear-gradient(135deg, #3a3116 0%, #1e2229 65%); border-left-color: #ffca2c; }
[data-bs-theme="dark"] .stat-card-danger  { background: linear-gradient(135deg, #3a1a1a 0%, #1e2229 65%); border-left-color: #ff6b6b; }

[data-bs-theme="dark"] .router-status-item .router-status-value {
    color: #f1f3f5;
}
[data-bs-theme="dark"] .router-status-item .router-status-label {
    color: #9aa4b1;
}
/* Ikon Status Router & judul Paket di kartu mobile pakai var(--app-accent-color) langsung sebagai warna
   teks/ikon (bukan cuma latar) — kalau admin kebetulan memilih warna aksen yang gelap (mis. buat header
   di mode terang), warna itu jadi nyaris tidak kelihatan di atas kartu Mode Gelap yang juga gelap.
   color-mix mencampur ke arah putih di sini supaya tetap terang dibaca berapa pun gelapnya aksen aslinya. */
[data-bs-theme="dark"] .router-status-item i {
    color: color-mix(in srgb, var(--app-accent-color) 55%, white 45%);
}

/* Tombol Aksi (Setujui/Tanda Tangan/Cetak/pagination, dst) banyak pakai btn-outline-dark/btn-outline-secondary
   bawaan Bootstrap — Bootstrap SENGAJA tidak membalik warna semantik dark/secondary saat data-bs-theme="dark"
   (beda dengan warna permukaan/body yang otomatis dibalik), jadi border+teksnya tetap nyaris hitam dan hilang
   ditelan kartu gelap. Ditimpa manual di sini lewat CSS variable lokal Bootstrap sendiri (--bs-btn-*), berlaku
   di semua halaman sekaligus karena tombol ini dipakai di puluhan tempat, bukan cuma satu halaman. */
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #dee2e6;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #dee2e6;
    --bs-btn-active-border-color: #dee2e6;
    --bs-btn-disabled-color: #495057;
    --bs-btn-disabled-border-color: #495057;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #ced4da;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ced4da;
    --bs-btn-hover-border-color: #ced4da;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ced4da;
    --bs-btn-active-border-color: #ced4da;
    --bs-btn-disabled-color: #495057;
    --bs-btn-disabled-border-color: #495057;
}

@media (max-width: 767.98px) {
    [data-bs-theme="dark"] table.table-mobile-card tr {
        background: #1e2229;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    [data-bs-theme="dark"] table.table-mobile-card td strong {
        color: color-mix(in srgb, var(--app-accent-color) 55%, white 45%);
    }
    [data-bs-theme="dark"] table.table-mobile-card td {
        border-bottom-color: #343a40;
    }
    [data-bs-theme="dark"] table.table-mobile-card td[data-label]::before {
        color: #9aa4b1;
    }
}