/* Tambahan di atas AdminLTE 2. Gaya utama meniru tema Mixradius V3.2 (skin-blue) — RENCANA UI §1.5. */
.label-latihan { background: #f39c12; color: #fff; padding: 4px 10px; margin: 10px 0 0 10px; border-radius: 3px; font-size: 12px; font-weight: 600; }
.small-box h3 { font-size: 26px; white-space: nowrap; }
.table > tbody > tr > td { vertical-align: middle; }
.angka { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tetap { white-space: nowrap; }
.kv { margin: 0; }
.kv dt { color: #777; font-weight: normal; }
.kv dd { margin-bottom: 8px; font-weight: 600; }
.badge-status { display: inline-block; padding: 3px 8px; border-radius: 3px; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.st-aktif, .st-lunas, .st-sukses, .st-terkirim { background: #00a65a; }
.st-terbit, .st-antre, .st-usul, .st-calon { background: #3c8dbc; }
.st-telat, .st-latihan, .st-pending { background: #f39c12; }
.st-isolir, .st-gagal, .st-dibatalkan { background: #dd4b39; }
.st-nonaktif, .st-berhenti, .st-batal, .st-gratis, .st-kedaluwarsa { background: #777; }
.hasil-hitung { background: #f4f9fd; border-left: 4px solid #3c8dbc; padding: 12px 15px; margin-top: 10px; }
.btn-aksi-utama { font-size: 16px; padding: 10px 16px; }

/* ---- Kerangka Mixradius: sidebar & logo 180px, judul menu huruf campuran, footer fixed ---- */
.modal-title { font-weight: bold; }
@media (min-width: 768px) {
    .main-header .logo, .main-sidebar, .left-side { width: 180px; }
    .main-header .navbar, .content-wrapper, .right-side, .main-footer { margin-left: 180px; }
    .sidebar-mini.sidebar-collapse .main-header .logo, .sidebar-mini.sidebar-collapse .main-sidebar { width: 50px; }
    .sidebar-mini.sidebar-collapse .main-header .navbar, .sidebar-mini.sidebar-collapse .content-wrapper,
    .sidebar-mini.sidebar-collapse .main-footer { margin-left: 50px; }
    .sidebar-mini:not(.sidebar-collapse) .sidebar-menu > li > .treeview-menu { width: auto; }
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu { width: 180px; }
}
@media (max-width: 767px) {
    .main-sidebar { width: 180px; transform: translate(-180px, 0); }
    .sidebar-open .main-sidebar { transform: translate(0, 0); }
    .sidebar-open .content-wrapper, .sidebar-open .main-footer { transform: translate(180px, 0); }
}
.main-header .logo { font-size: 18px; }
.main-header .navbar .mx-nav-btn { height: 38px; margin-top: 5px; margin-left: 2px; color: #fff; float: left; }
.sidebar-menu > li.header { text-transform: none; }
.sidebar-menu .treeview-menu > hr { margin: 3px 0; border-top: 1px solid #555; }
.content-wrapper { padding-bottom: 50px; min-height: 100vh; }
.main-footer { z-index: 810; padding: 3px 15px; }
.sidebar-menu > li > a { padding-top: 11px; padding-bottom: 11px; }
.user-panel { min-height: 65px; }
.user-panel > .image > .mx-avatar { display: inline-block; width: 45px; height: 45px; line-height: 45px; text-align: center;
    background: #fff; color: #3c8dbc; font-weight: bold; font-size: 17px; }
.user-panel > .info { left: 55px; }

/* ---- Panel & dropdown hijau (kepala halaman Mixradius) ---- */
.mx-panel > .panel-heading { border-bottom: 1px solid #f4f4f4; font-size: 15px; font-weight: bold; }
/* Garis & isian seperti Mixradius (tema Bootstrap 4): hr terang, input 38px, jarak antar form-group lebih lega. */
.content hr, .modal hr { border-top-color: #eee; }
.mx-panel .form-control:not(textarea):not(.input-sm):not([multiple]),
.modal .form-control:not(textarea):not(.input-sm):not([multiple]) { height: 38px; }
.mx-panel .panel-body > form .form-group, .mx-panel .tab-pane .form-group { margin-bottom: 20px; }
.mx-menu-hijau { display: inline-block; position: relative; }
.mx-menu-hijau > a.label { display: inline-block; }
.mx-menu-hijau .dropdown-menu > li > a { padding: 5px 12px; }
.mx-menu-hijau .dropdown-menu > li > a > .ion { margin-right: 4px; color: #00a65a; }
.mx-menu-hijau .dropdown-title { font-size: 12px; padding: 3px 0; }

/* ---- Tombol aksi baris & label ---- */
.label.btn-sm { font-size: 13px; line-height: 1.9; }
/* Mixradius menempelkan tombol aksi (tanpa spasi di markup); spasi antar komponen Blade dinetralkan di sini. */
.label.btn { margin-right: 0; }
.label.btn + .label.btn { margin-left: -4px; }
.mx-mati td, tr.mx-mati td { color: #aaa; font-style: italic; }
.mx-mono { font-family: "Courier New", monospace; font-weight: bold; }
.mx-label-hapus { display: block; font-size: 1.2em; color: red; text-align: center; margin: -10px 0 -6px; font-weight: bold; }
.mx-label-print { display: block; font-size: 1.2em; text-align: center; margin: 5px 0 -6px; font-weight: bold; }
.mx-alasan { margin: 15px 0 0; }
.mx-print-tombol { display: flex; }

/* ---- Info-box ringkasan (User PPP / DUITKU) ---- */
.mx-info-box { min-height: 64px; border-radius: 5px; border: solid 1px #ddd; box-shadow: none; }
.mx-info-box .info-box-icon { font-size: 40px; height: 64px; line-height: 64px; border-radius: 5px 0 0 5px; margin-top: -1px; width: 70px; }
.mx-info-box .info-box-content { margin-left: 70px; }
.mx-info-box .info-box-number { font-size: 20px; line-height: 1.6; font-family: "Courier New", monospace; }

/* ---- Tabel gaya DataTables (sisi server) ---- */
.mx-dt .dataTables_length label, .mx-dt .dataTables_filter label { font-weight: normal; white-space: nowrap; text-align: left; }
.mx-dt .dataTables_length select { width: 75px; display: inline-block; margin: 0 4px; }
.mx-dt .dataTables_filter { text-align: right; }
.mx-dt .dataTables_filter input { margin-left: 0.5em; display: inline-block; width: auto; }
.mx-dt .dataTables_info { padding-top: 8px; white-space: nowrap; }
.mx-dt .dataTables_paginate { margin: 0; white-space: nowrap; text-align: right; }
.mx-dt .dataTables_paginate .pagination { margin: 2px 0; white-space: nowrap; }
.mx-dt-atas { margin-bottom: 6px; }
.mx-dt .adv-table table.display > thead > tr > th { border-bottom: 1px solid #ddd; white-space: nowrap; vertical-align: bottom; }
/* DataTables Mixradius: isi sel di atas, baris belang pada baris genap. */
.adv-table table.display > tbody > tr > td { vertical-align: top; }
.adv-table table.display.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
.adv-table table.display.table-striped > tbody > tr:nth-of-type(even) { background-color: #f9f9f9; }
table.display thead th.sorting, table.display thead th.sorting_asc, table.display thead th.sorting_desc { position: relative; padding-right: 22px; }
table.display thead th.sorting > a, table.display thead th.sorting_asc > a, table.display thead th.sorting_desc > a { color: #333; }
table.display thead th.sorting::after, table.display thead th.sorting_asc::after, table.display thead th.sorting_desc::after {
    position: absolute; right: 6px; bottom: 8px; font-family: FontAwesome; opacity: .25; content: "\f0dc"; }
table.display thead th.sorting_asc::after { content: "\f0de"; opacity: .6; }
table.display thead th.sorting_desc::after { content: "\f0dd"; opacity: .6; }

/* ---- Popover tabel kecil ---- */
.mx-popover-judul { font-weight: bold; margin-bottom: 4px; }
.mx-popover-tabel td { line-height: 1.5; padding: 2px 0; vertical-align: top; }

/* HP: tabel menjadi kartu (td diberi data-label). */
@media (max-width: 640px) {
    .table-kartu thead { display: none; }
    .table-kartu tr { display: block; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; background: #fff; }
    .table-kartu td { display: flex; justify-content: space-between; gap: 10px; border: none !important; padding: 6px 10px !important; }
    .table-kartu td::before { content: attr(data-label); color: #777; font-weight: normal; }
    .table-kartu td.angka { text-align: right; }
    .mx-dt .dataTables_filter, .mx-dt .dataTables_paginate { text-align: left; }
    .label-latihan { display: none; }
}
@media print {
    .main-header, .main-sidebar, .main-footer, .content-header, .no-print { display: none !important; }
    .content-wrapper { margin: 0 !important; }
}

/* ==== HP (≤767px): tampilan ringkas & nyaman (7 Okt 2026). Tampilan komputer tidak berubah. ==== */
@media (max-width: 767px) {
    /* Footer tidak lagi menutupi isi (inline position:fixed di layout). */
    .main-footer { position: static !important; }
    .content { padding: 8px; }
    .content .row { margin-left: -4px; margin-right: -4px; }
    .info-box-text { white-space: normal; line-height: 1.2; }

    /* Kotak ringkasan dashboard (small-box) & info-box: 2 kolom kecil. */
    [class*="col-"]:has(> .small-box), [class*="col-"]:has(> .info-box), [class*="col-"]:has(> a > .info-box) {
        width: 50%; float: left; padding-left: 4px; padding-right: 4px; }
    .small-box { margin-bottom: 8px; }
    .small-box .icon { display: none; }
    .small-box .inner { padding: 6px 8px; }
    .small-box .inner h3, .small-box .inner h5 { font-size: 20px; margin: 2px 0; }
    .small-box .inner p { font-size: 12px; margin: 0; }
    .small-box .small-box-footer { padding: 2px 0; font-size: 12px; }
    .info-box { min-height: 58px; height: 58px; margin-bottom: 8px; overflow: hidden; }
    .info-box-icon { width: 40px; height: 54px; line-height: 54px; font-size: 22px; }
    .info-box-icon > i, .info-box-icon > .fa { font-size: 22px; }
    .info-box-content { margin-left: 40px; padding: 4px 6px; }
    .info-box-text { font-size: 11px; }
    .info-box-number { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.5px; }
    .info-box-icon { width: 34px; }
    .info-box-content { margin-left: 34px; }
    .info-box-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* "Show entries" lalu "Search:" selebar layar; kotak cari 16px (HP tidak zoom saat mengetik). */
    .mx-dt-atas { display: block; margin-bottom: 6px; }
    .mx-dt-atas > [class*="col-"] { width: 100%; float: none; }
    .mx-dt-atas .dataTables_length { margin-bottom: 6px; }
    .mx-dt-atas .dataTables_filter { width: 100%; text-align: left; }
    .mx-dt-atas .dataTables_filter label { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; }
    .mx-dt-atas .dataTables_filter input[type="search"] { flex: 1; width: 100% !important; margin-left: 0 !important;
        height: 38px; font-size: 16px; }
    input.form-control, select.form-control, textarea.form-control { font-size: 16px; }

    /* Kartu tabel umum lebih rapat. */
    .table-kartu tr { margin-bottom: 8px; }
    .table-kartu td { padding: 4px 10px !important; font-size: 13px; }

    /* Daftar pelanggan: kartu ringkas (ID + pilih, Nama, Paket + JT, Diperpanjang, tombol). */
    #customers-ppp tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 8px 10px; }
    #customers-ppp tbody td { display: block; padding: 1px 0 !important; font-size: 13px; }
    #customers-ppp tbody td::before { display: none; }
    #customers-ppp td[data-label="ID Pelanggan"] { grid-column: 1; grid-row: 1; }
    #customers-ppp td[data-label="Pilih"] { grid-column: 2; grid-row: 1; text-align: right; }
    #customers-ppp td[data-label="Nama"] { grid-column: 1 / -1; grid-row: 2; font-weight: bold; font-size: 15px; }
    #customers-ppp td[data-label="Paket Langganan"] { grid-column: 1; grid-row: 3; color: #555; }
    #customers-ppp td[data-label="Jatuh Tempo"] { grid-column: 2; grid-row: 3; text-align: right; }
    #customers-ppp td[data-label="Jatuh Tempo"]::before { display: inline; content: "JT "; color: #999; font-size: 11px; }
    #customers-ppp td[data-label="Diperpanjang"] { grid-column: 1 / -1; grid-row: 4; color: #888; font-size: 11px; }
    #customers-ppp td[data-label="Diperpanjang"]::before { display: inline; content: "Diperpanjang "; }
    #customers-ppp td[data-label="Renew | Print"] { grid-column: 1; grid-row: 5; padding-top: 6px !important; }
    #customers-ppp td[data-label="Aksi"] { grid-column: 2; grid-row: 5; text-align: right; padding-top: 6px !important; }
    #customers-ppp td[data-label="Renew | Print"] .btn, #customers-ppp td[data-label="Aksi"] .btn { padding: 6px 12px; }
    #customers-ppp td[data-label="Tipe Service"], #customers-ppp td[data-label="IP Address"],
    #customers-ppp td[data-label="Owner Data"] { display: none; }
    #customers-ppp tbody td[colspan] { grid-column: 1 / -1; }
}