/* ==========================================================================
   ui-sync.css — satu-satunya sumber ukuran (tinggi, lebar, font) untuk UI.

   ATURAN PAKAI
   - Dimuat PALING AKHIR di setiap halaman, setelah semua *-N.css / inline style,
     sehingga menang atas override lama tanpa menyentuh file-file itu.
   - Ubah angka HANYA di blok :root di bawah. Jangan menambah ukuran kontrol,
     sel tabel, atau tombol ikon di file CSS lain.
   - Skala font memakai token yang sudah ada (--fs-xs/sm/base/md). Fallback di
     var(..., nilai) menjaga halaman yang tidak mendefinisikan token tersebut.
   - Salinan identik file ini ada di public/assets/css, statistics/assets/css
     dan assets/css. Ubah satu, salin ke dua lainnya.
   - Pengecualian dibuat dengan :where(:not(...)) agar spesifisitas tetap
     rendah dan aturan khusus (mis. .td-empty) tidak tertimpa.
   ========================================================================== */

:root {
    /* Kontrol form & tombol teks */
    --ui-ctl-h: 31px;   /* tombol teks */
    --ui-in-h: 31px;    /* input, select, addon: tidak ikut naik di layar sentuh */
    --ui-ctl-py: 6px;
    --ui-ctl-px: 12px;
    --ui-ctl-px-sm: 10px;
    --ui-ta-h: 114px;
    --ui-ctl-fs: var(--fs-sm, 12px);
    --ui-ctl-lh: var(--lh-snug, 1.35);

    /* Ukuran kecil: .btn-xs dan semua tombol ikon (24px = target minimum WCAG 2.2 AA) */
    --ui-sm-h: 24px;
    --ui-sm-fs: var(--fs-xs, 11px);
    --ui-icon-btn: 24px;
    --ui-icon-svg: 14px;
    --ui-icon-btn-touch: 44px; /* target sentuh WCAG 2.5.5, hanya di layar sentuh */

    /* Tabel */
    --ui-th-h: 34px;
    --ui-th-fs: var(--fs-xs, 11px);
    --ui-td-fs: var(--fs-sm, 12px);
    --ui-cell-px: 10px;
    --ui-td-py: 6px;

    /* Indikator fokus keyboard (kontras >= 3:1 di atas porcelain) */
    --ui-focus: #252a2e;
}

@media screen and (max-width: 560px) {
    :root {
        --ui-cell-px: 6px;
    }
}

/* Layar sentuh: tombol teks dan .btn-xs jadi 44px (WCAG 2.5.5). Input tetap
   31px (--ui-in-h), jadi tombol di .input-group-btn lebih tinggi dari input di
   sebelahnya. Padding vertikal tombol dinaikkan agar teks tetap di tengah. */
@media (pointer: coarse) {
    :root {
        --ui-ctl-h: 44px;
        --ui-ctl-py: 13px;
        --ui-sm-h: 44px;
    }

    .btn:where(:not(.btn-link, .close, .navbar-btn)) {
        min-width: 44px !important;
    }
}

/* Zoom halaman selalu 1: nilai 1.1 / .95 di file lama mengubah ukuran efektif
   semua angka di bawah secara berbeda per halaman. */
html {
    zoom: 1 !important;
}

/* --------------------------------------------------------------------------
   1. Kontrol form: tinggi, font, line-height seragam (textarea dikecualikan)
   -------------------------------------------------------------------------- */
.form-control:where(:not(textarea)),
input[type=text],
input[type=number],
input[type=password],
input[type=search],
input[type=email],
input[type=url],
input[type=tel],
select:where(:not([multiple]):not([size])),
.input-sm,
.input-group-addon,
.bootgrid-header .search .search-field,
.bootgrid-header .search .form-control {
    height: var(--ui-in-h) !important;
    min-height: var(--ui-in-h) !important;
    font-size: var(--ui-ctl-fs) !important;
    line-height: var(--ui-ctl-lh) !important;
}

textarea,
textarea.form-control {
    min-height: var(--ui-ta-h) !important;
    font-size: var(--ui-ctl-fs) !important;
    line-height: var(--ui-ctl-lh) !important;
}

/* --------------------------------------------------------------------------
   2. Tombol teks: tinggi 31px, font 12px, padding vertikal seragam.
      Padding horizontal sengaja tidak disentuh: tombol ikon-saja memakai
      padding 0 dan akan terjepit kalau dipaksa 10px.
   -------------------------------------------------------------------------- */
.btn:where(:not(.btn-xs, .btn-icon, .btn-cf, .btn-copy, .btn-copy-float, .btn-copy-domain, .btn-del, .action-btn, .cf-sync-btn, .navbar-btn, .btn-link, .close)),
.input-group-btn > .btn,
.bootgrid-header .actions .btn,
.bootgrid-header .actions .dropdown-toggle,
.pn-toolbar .input-group-btn > .btn,
.pn-refresh-btn {
    height: var(--ui-ctl-h) !important;
    min-height: var(--ui-ctl-h) !important;
    padding-top: var(--ui-ctl-py) !important;
    padding-bottom: var(--ui-ctl-py) !important;
    font-size: var(--ui-ctl-fs) !important;
    line-height: var(--ui-ctl-lh) !important;
}

.btn.btn-xs {
    height: var(--ui-sm-h) !important;
    min-height: var(--ui-sm-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: var(--ui-sm-fs) !important;
    line-height: calc(var(--ui-sm-h) - 2px) !important;
}

/* Padding horizontal tombol teks seragam (12px; .btn-sm 10px; .btn-xs 6px).
   Tombol di dalam .input-group-btn dilewati: sebagian ikon-saja dengan padding 0. */
.btn:where(:not(.btn-xs, .btn-sm, .btn-icon, .btn-cf, .btn-copy, .btn-copy-float, .btn-copy-domain, .btn-del, .action-btn, .cf-sync-btn, .navbar-btn, .btn-link, .close, .input-group-btn > .btn, .dropdown-toggle)) {
    padding-left: var(--ui-ctl-px) !important;
    padding-right: var(--ui-ctl-px) !important;
}

.btn.btn-sm:where(:not(.input-group-btn > .btn)) {
    padding-left: var(--ui-ctl-px-sm) !important;
    padding-right: var(--ui-ctl-px-sm) !important;
}

.btn.btn-xs {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Chip baris-per-halaman (.ddt) memakai .btn.btn-xs, jadi aturan .btn.btn-xs di
   atas MENANG atas .ddt-btn — (0,2,0) melawan (0,1,0), keduanya !important —
   dan tinggi chip dipaksa --ui-sm-h (24px) padahal kotak pencarian di
   sebelahnya --ui-in-h (31px): chip-nya 7px lebih pendek dan teksnya terasa
   terjepit. Menambah .ddt-btn menaikkan spesifisitas ke (0,3,0) supaya sejajar
   dengan kontrol sebelahnya. padding 8px sesuai nilai asli .ddt-btn. */
.btn.btn-xs.ddt-btn {
    height: var(--ui-in-h) !important;
    min-height: var(--ui-in-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    line-height: calc(var(--ui-in-h) - 2px) !important;
}

/* Addon pencarian bootgrid: kotak sama dengan tinggi kontrol */
.bootgrid-header .search .input-group-addon {
    flex: 0 0 var(--ui-in-h) !important;
    width: var(--ui-in-h) !important;
    min-width: var(--ui-in-h) !important;
    height: var(--ui-in-h) !important;
    min-height: var(--ui-in-h) !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.bootgrid-header .search .input-group-addon .glyphicon {
    font-size: var(--ui-ctl-fs) !important;
}

#cfg_cf_token_toggle {
    width: var(--ui-ctl-h) !important;
    min-width: var(--ui-ctl-h) !important;
    height: var(--ui-ctl-h) !important;
    min-height: var(--ui-ctl-h) !important;
    padding: 0 !important;
}

/* Kotak cari statistics/realtime: aturan inline lama mengunci 29px, sementara
   clicks/performance 31px. Input & addon mengikuti --ui-in-h, tombol refresh
   mengikuti --ui-ctl-h (44px di layar sentuh); grup memusatkan input. */
.panel-heading .input-group.search.searchbox {
    align-items: center !important;
    height: auto !important;
    min-height: var(--ui-in-h) !important;
}

.panel-heading .input-group.search.searchbox > .input-group-addon {
    flex: 0 0 var(--ui-in-h) !important;
    width: var(--ui-in-h) !important;
    min-width: var(--ui-in-h) !important;
    height: var(--ui-in-h) !important;
    min-height: var(--ui-in-h) !important;
}

.panel-heading .input-group.search.searchbox > .form-control {
    height: var(--ui-in-h) !important;
    min-height: var(--ui-in-h) !important;
}

.panel-heading .input-group.search.searchbox > .input-group-btn,
.searchbox > .input-group-btn > .btn,
.panel-heading .input-group.search.searchbox > .input-group-btn > .pn-refresh-btn {
    height: var(--ui-ctl-h) !important;
    min-height: var(--ui-ctl-h) !important;
}

/* --------------------------------------------------------------------------
   3. Tombol ikon: semuanya 24 x 24, ikon 14px
   -------------------------------------------------------------------------- */
/* .cf-badge sengaja TIDAK dikunci lebarnya di sini. Ia indikator status, bukan
   tombol: public/addondomain merendernya sebagai <svg> + label teks (" aktif").
   Mengunci lebarnya ke var(--ui-icon-btn) menyisakan ~10px untuk label itu,
   sehingga teksnya terpecah satu karakter per baris (a/k/t/i/f). Yang butuh
   kotak tetap hanya badge berisi ikon saja: tabel portal (#table_domain /
   .td-cf-cell) dan #cf-modal-badge di modal portal. */
.btn-icon,
.btn-cf,
.btn-copy,
.btn-copy-float,
.btn-copy-domain,
.btn-del,
.action-btn,
.cf-sync-btn,
.td-cf-cell .cf-badge,
.td-cf-cell .cf-sync-btn,
#table_domain .cf-badge,
#table_domain .cf-sync-btn,
#table_domain .delete.btn,
#table_domain td .delete.btn,
#cf-modal-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--ui-icon-btn) !important;
    min-width: var(--ui-icon-btn) !important;
    height: var(--ui-icon-btn) !important;
    min-height: var(--ui-icon-btn) !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.btn-icon svg,
.btn-cf svg,
.btn-copy svg,
.btn-copy-float svg,
.btn-copy-domain svg,
.btn-del svg,
.action-btn svg,
.action-btn .action-ico,
.cf-sync-btn svg,
.cf-badge svg,
.td-cf-cell .cf-badge svg,
.td-cf-cell .cf-sync-btn svg,
#table_domain .cf-badge svg,
#table_domain .cf-sync-btn svg,
#table_domain .delete.btn svg,
#table_domain td .delete.btn svg {
    width: var(--ui-icon-svg) !important;
    height: var(--ui-icon-svg) !important;
    min-width: var(--ui-icon-svg) !important;
    min-height: var(--ui-icon-svg) !important;
}

/* Perangkat sentuh: tombol ikon jadi 44 x 44 (ikon tetap 14px). .cf-badge tidak
   ikut: ia indikator status tanpa aksi klik, bukan target sentuh. */
@media (pointer: coarse) {
    .btn-icon,
    .btn-cf,
    .btn-copy,
    .btn-copy-float,
    .btn-copy-domain,
    .btn-del,
    .action-btn,
    .cf-sync-btn,
    .td-cf-cell .cf-sync-btn,
    #table_domain .cf-sync-btn,
    #table_domain .delete.btn,
    #table_domain td .delete.btn {
        width: var(--ui-icon-btn-touch) !important;
        min-width: var(--ui-icon-btn-touch) !important;
        height: var(--ui-icon-btn-touch) !important;
        min-height: var(--ui-icon-btn-touch) !important;
    }
}

/* Modal konfigurasi Cloudflare: tombol ikon di dalam input-group dikunci 31px
   oleh aturan ID lama, dan grupnya display:table sehingga input ikut melar
   mengikuti tombol. Di layar sentuh: grup jadi flex, tombol 44px, input tetap
   31px dan terpusat. */
@media (pointer: coarse) {
    .input-group:has(> #cfg_cf_ip),
    .input-group:has(> #cfg_postback_secret) {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    #cfg_cf_ip,
    #cfg_postback_secret {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #cfg_cf_ip + .input-group-btn,
    #cfg_postback_secret + .input-group-btn {
        display: flex !important;
        flex: 0 0 var(--ui-icon-btn-touch) !important;
        width: var(--ui-icon-btn-touch) !important;
        min-width: var(--ui-icon-btn-touch) !important;
        max-width: var(--ui-icon-btn-touch) !important;
    }

    #cfg_cf_ip_detect,
    #cfg_postback_secret_generate,
    #cfg_cf_token_toggle {
        flex: 0 0 var(--ui-icon-btn-touch) !important;
        width: var(--ui-icon-btn-touch) !important;
        min-width: var(--ui-icon-btn-touch) !important;
        max-width: var(--ui-icon-btn-touch) !important;
        height: var(--ui-icon-btn-touch) !important;
        min-height: var(--ui-icon-btn-touch) !important;
        max-height: var(--ui-icon-btn-touch) !important;
    }

    /* Tombol tutup (x) modal Bootstrap: aslinya ~12 x 21px. */
    .modal-header .close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: var(--ui-icon-btn-touch) !important;
        min-height: var(--ui-icon-btn-touch) !important;
        margin: -10px -12px -10px 0 !important;
    }

    /* Tombol tutup modal portal (.app-modal): aslinya 24 x 24. Header-nya flex,
       jadi margin negatif menjaga tinggi header. */
    .app-modal__header .close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 var(--ui-icon-btn-touch) !important;
        width: var(--ui-icon-btn-touch) !important;
        min-width: var(--ui-icon-btn-touch) !important;
        height: var(--ui-icon-btn-touch) !important;
        min-height: var(--ui-icon-btn-touch) !important;
        margin: -10px -8px -10px 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
}

/* Tabel addondomain: sampai 7 tombol aksi bersebelahan (sync, purge, unlink,
   hapus, ...). Jarak 2px terlalu rapat untuk jari; beri 6px. Wrapper tabel
   sudah overflow-x:auto, jadi kolom aksi digeser horizontal. */
@media (pointer: coarse) {
    .btn-cf,
    .action-btn.command-delete {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }

    /* Shortlinks: salin / buka / hapus berdempet 4px. */
    .sl-actions {
        gap: 8px !important;
    }
}

/* Pagination tabel (dashboard, campaigns, shortlinks): tautan aslinya ~33 x 31.
   Hamburger navbar dan tombol Logout juga di bawah 44px. Margin hamburger
   dinolkan supaya tinggi navbar (44px) tidak bertambah. */
@media (pointer: coarse) {
    .pagination > li > a,
    .pagination > li > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1 !important;
    }

    .navbar-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .navbar-btn.btn-link {
        min-height: 44px !important;
    }
}

/* statistics/report-password: toggle mata (32 x 31) dan Logout (37 x 14) di
   bawah 44px. Toggle diperbesar ke atas/bawah dari kolom (tetap 31px) supaya
   tinggi input tidak berubah; padding input dan jarak ke tombol submit ikut
   disesuaikan. */
@media (pointer: coarse) {
    .pw-wrap .form-control {
        padding-right: var(--ui-icon-btn-touch) !important;
    }

    .pw-toggle {
        top: -6.5px !important;
        bottom: -6.5px !important;
        width: var(--ui-icon-btn-touch) !important;
    }

    .pw-wrap ~ .input-group-btn > .btn,
    .input-group:has(.pw-wrap) > .input-group-btn > .btn {
        margin-top: 10px !important;
    }

    .logout-form .btn-link {
        min-width: var(--ui-icon-btn-touch) !important;
        min-height: var(--ui-icon-btn-touch) !important;
        margin: -15px 0 !important;
    }
}

/* Checkbox / toggle (portal "Block VPN", "With Cloudflare"; addondomain
   "Auto-integrasi"): inputnya kecil (15px) atau tak terlihat (switch), tapi
   dibungkus <label>, jadi seluruh label adalah area sentuhnya. Label dinaikkan
   ke 44px dan isinya dipusatkan; kotaknya sendiri tidak diubah. */
@media (pointer: coarse) {
    .cf-toggle-label {
        min-height: var(--ui-icon-btn-touch) !important;
        align-items: center !important;
    }
}

/* Item menu dropdown: .dd-option (portal, ~30px), .ddt-menu li a (campaigns,
   dashboard, addondomain, ~27px) dan .dropdown-menu > li > a (bootgrid) semuanya
   di bawah 44px. Baris menu diberi tinggi minimum 44px. */
@media (pointer: coarse) {
    .dd-option {
        min-height: var(--ui-icon-btn-touch) !important;
    }

    .ddt-menu li a,
    .dropdown-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: var(--ui-icon-btn-touch) !important;
    }
}

/* Tab Bootstrap (.nav-tabs / .nav-pills), mis. GENERATE / ADDDOMAIN di portal:
   aslinya 31px. Isi tab dipusatkan di dalam 44px. */
@media (pointer: coarse) {
    .nav-tabs > li > a,
    .nav-pills > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: var(--ui-icon-btn-touch) !important;
    }
}

/* Tabel domain di portal: tombol sync + hapus 44px tidak muat di lebar kolom
   rem lama dan saling tumpang-tindih. Beri kolom lebar tetap yang cukup;
   kolom domain mengambil sisanya. */
@media (pointer: coarse) {
    #table_domain th:nth-child(1),
    #table_domain td:nth-child(1) {
        width: auto !important;
    }

    #table_domain th:nth-child(2),
    #table_domain td:nth-child(2) {
        width: 56px !important;
    }

    #table_domain th:nth-child(3),
    #table_domain td:nth-child(3) {
        width: 88px !important;
    }

    #table_domain th:nth-child(4),
    #table_domain td:nth-child(4) {
        width: 60px !important;
    }
}

/* --------------------------------------------------------------------------
   4. Tabel: header 34px / 11px, sel 12px, padding horizontal seragam.
      .td-empty (baris kosong, padding 18px) dikecualikan.
   -------------------------------------------------------------------------- */
.table > thead > tr > th {
    height: var(--ui-th-h) !important;
    padding: 0 var(--ui-cell-px) !important;
    font-size: var(--ui-th-fs) !important;
    line-height: var(--lh-tight, 1.2) !important;
    vertical-align: middle !important;
}

.table > tbody > tr > td:where(:not(.td-empty)),
.table > tfoot > tr > td {
    padding: var(--ui-td-py) var(--ui-cell-px) !important;
    font-size: var(--ui-td-fs) !important;
    vertical-align: middle;
}

.table > tfoot > tr > th {
    padding: 7px var(--ui-cell-px) !important;
    font-size: var(--ui-th-fs) !important;
}

/* --------------------------------------------------------------------------
   5. Fokus keyboard terlihat (WCAG 2.4.7)
   File lama memakai `*:focus, *:focus-visible { outline: none !important }`
   yang menghapus indikator fokus di seluruh UI. Ring ini hanya muncul saat
   navigasi keyboard; klik mouse tidak memicunya. Hapus blok ini jika tidak
   diinginkan.
   -------------------------------------------------------------------------- */
:root :focus-visible:focus-visible:not(input):not(textarea):not(select) {
    outline: 2px solid var(--ui-focus) !important;
    outline-offset: 2px !important;
}