:root{--ff-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;--ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;}
/*! Used font faces */
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI");ascent-override:95%;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Italic");ascent-override:95%;font-style:italic;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold");ascent-override:95%;font-weight:600;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold Italic");ascent-override:95%;font-style:italic;font-weight:600;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold");ascent-override:95%;font-weight:700;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Semibold Italic");ascent-override:95%;font-style:italic;font-weight:700;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Bold");ascent-override:90%;font-weight:800;}
@font-face{font-family:"Segoe UI Adjusted";src:local("Segoe UI Bold Italic");ascent-override:95%;font-style:italic;font-weight:800;}
/* ==========================================================================
   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.
   ========================================================================== */

/*! Used font faces */
/* "Segoe UI Adjusted" adalah wajah utama di stack --ff-sans, tetapi wajah itu hanya memuat aksara historis. Di Windows
   ia masih bisa terpilih untuk blok Armenia/Georgia dan menggambar rentang itu dengan wajah yang
   salah, jadi dua blok di bawah mengarahkan tepat rentang tersebut ke Arial (sama seperti stack
   acuan). Deklarasi identik yang diulang tidak ditulis dua kali. */




: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;
}

/* --------------------------------------------------------------------------
   Tombol = ikon + label.

   Dashboard sudah memakai pola ini (svg + <span>), sedangkan campaigns dan
   addondomain hanya menampilkan ikonnya: teksnya cuma ada di title/aria-label,
   jadi tombol toolbar terbaca sebagai kotak ikon tanpa keterangan. .btn
   Bootstrap itu inline-block, sehingga `gap` milik .btn-gap/.btn-gap-sm tidak
   berpengaruh apa pun; di sini display dibuat flex supaya jarak ikon-teks
   konsisten di semua tombol berlabel.

   Kedua kelas sudah ada sebelumnya (dashboard-4.css) dan hanya dimuat di
   dashboard, jadi definisinya dipindah ke berkas bersama ini.
   -------------------------------------------------------------------------- */
.btn-gap,
.btn-gap-sm {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.btn-gap > svg,
.btn-gap-sm > svg {
    flex: 0 0 auto;
}

/* Tombol aksi baris tabel (Edit/Delete) kini berlabel juga. Aturan halaman
   mematikan teks dengan font-size:0 karena tombolnya memang ikon saja;
   font-size dipulihkan, lalu gap dan padding diberi ruang secukupnya.
   .action-btn sengaja dikeluarkan dari daftar tombol-ikon persegi di atas
   (width: var(--ui-icon-btn)) — kotak 24px memotong labelnya.
   Tombol yang tetap ikon-saja (cluster Cloudflare di addondomain) tidak punya
   <span>, jadi tidak terpengaruh. */
.btn.action-btn {
    width: auto !important;
    min-width: 0 !important;
    padding: 4px 7px !important;
    gap: 5px !important;
    font-size: var(--fs-xs, 11px) !important;
    white-space: nowrap !important;
}

.action-btn > svg {
    flex: 0 0 auto;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !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,
.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,
    .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;
}

/* Crisp text: integer font sizes only (no clamp()/vw), consistent smoothing and rendering. */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    font-synthesis: none;
}
body {
    font-kerning: normal;
    font-variant-ligatures: none;
}

/* Uniform buttons: every button-like element gets the same 1px border. */
:root {
    --btn-line: rgb(68 71 70 / 20%); /* one thin, light line colour for buttons and inputs */
    --hair: 1px;
}
@media (min-resolution: 2dppx) {
    :root {
        --hair: 0.5px; /* true hairline on high-density screens */
    }
}
html body button:not(.navbar-btn):not(.logout-btn):not(.btn-link):not(.close):not(.srp-pw-toggle),
html body .btn:not(.navbar-btn):not(.logout-btn):not(.btn-link),
html body [class*="btn"]:not(.input-group-btn):not(.navbar-btn):not(.logout-btn):not(.btn-link):not(.btn-copy-float),
html body .dd-trigger,
html body .rd-tab,
html body .tab,
html body .action,
html body .page-link,
html body .swal2-styled,
html body #table_domain .cf-sync-btn,
html body #table_domain .delete.btn,
html body #table_domain td .delete.btn {
    border: 0px !important;
    box-shadow: none !important;
}

/* .btn-primary sits on a dark fill, so the generic dark text color above
   (matched via the [class*="btn"] rule, which also matches .btn-primary
   buttons) would make its label/icon unreadable. Needs equal-or-higher
   specificity than that rule to win. */
html body [class*="btn"].btn-primary:not(.input-group-btn):not(.navbar-btn):not(.logout-btn):not(.btn-link):not(.btn-copy-float) {
    color: #fff !important;
}

/* The domain table's icon controls (status, sync, delete) stay borderless and flat, whatever
   the generic button rule above says — now or if it is ever set back to a visible border.
   The extra #myTabContent id keeps this ahead of it and of the #table_domain rules in portal-*.css. */
html body #myTabContent #table_domain .cf-badge,
html body #myTabContent #table_domain .cf-sync-btn,
html body #myTabContent #table_domain .delete.btn,
html body #myTabContent #table_domain td .delete.btn {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Inputs: no outline on focus. */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
html body select,
html body textarea,
html body .form-control {
    border-width: var(--hair, 1px) !important;
    border-color: var(--btn-line) !important;
    border-left: none !important;
    border-right: none !important;
    transition: border-color .15s ease-in-out !important;
    border-radius: 0 0px !important;
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):focus,
html body select:focus,
html body textarea:focus,
html body .form-control:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border-color: #444746 !important;
}

/* ==========================================================================
   Popups, modals, dialogs, alerts, toasts and info boxes are opaque.
   --panel is rgba(252,251,248,.82) and the *-soft tints are 16% alpha, so every
   component that took its fill from them let the page show through. This block is
   loaded last and gives each a solid fill. Dim overlays (modal backdrops, loaders)
   stay translucent on purpose: they are not the popup itself.
   ========================================================================== */
html body .modal-content,
html body .swal2-popup,
html body .swal2-modal,
html body .app-modal__content,
html body .admin-toast,
html body .admin-toast--success,
html body .admin-toast--error,
html body .admin-toast--info,
html body .msg,
html body #logout-toast,
html body .notice,
html body .rt-toast,
html body .dropdown-menu,
html body .dd-menu,
html body .rt-period-menu {
    background-color: #fcfbf8 !important;
}

/* Inline alerts keep their tint, mixed onto the paper so it is a solid colour. */
html body .alert,
html body .alert-info,
html body .alert-warning,
html body .alert-danger,
html body .alert-success {
    background-color: color-mix(in srgb, var(--burnt-copper, #a86442) 16%, #fcfbf8) !important;
}

/* ==========================================================================
   Global font normalization — family only; no size/line-height/spacing changes.
   ========================================================================== */
:root {
    --font-family-apple:var(--ff-sans);
    --font-family-code:var(--ff-mono);
    --font-family-default:var(--ff-sans);
    --font-family-segoe:var(--ff-sans);
    --font-family-system:var(--ff-sans);
    --font:var(--ff-sans);
    --mono:var(--ff-mono);
}
html body {
    font-family: var(--ff-sans);
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
overflow-wrap: anywhere;
font-size: clamp(10px, 0.85vw, 13px);
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.02em; /* reduced from .22em; set to 0 for pure code */
color: #000;
-webkit-text-stroke: 0;
text-shadow:
  0 0.5px 1px rgba(0, 0, 0, 0.10),
  0 0.25px 0.5px rgba(0, 0, 0, 0.06);
  text-rendering: geometricPrecision;
font-variant-ligatures: none;
font-kerning: normal;
font-feature-settings: "liga" 0, "calt" 0, "kern" 1;
}
html body *:not(.glyphicon):not(.hero-emoji):not(code):not(pre):not(kbd):not(samp):not(.word) {
    font-family:var(--ff-sans) !important;
}
html body input,
html body input.form-control {
    font-family:var(--ff-sans) !important;
}
html body code,
html body pre,
html body kbd,
html body samp {
    font-family:var(--ff-mono) !important;
}
html body .glyphicon {
}
html body .hero-emoji {
    font-family:var(--ff-sans) !important;
}

/* ==========================================================================
   Table typography + row-height normalization.
   Keep table text at the smaller existing size and make header/body/footer
   rows use one consistent 34px rhythm across all pages.
   ========================================================================== */
:root {
    --ui-table-row-h: 34px;
    --ui-table-fs: var(--fs-xs, 11px);
    --ui-table-lh: var(--lh-tight, 1.2);
}

html body .table > thead > tr > th,
html body .table > tbody > tr > td,
html body .table > tfoot > tr > th,
html body .table > tfoot > tr > td {
    height: var(--ui-table-row-h) !important;
    min-height: var(--ui-table-row-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-family: var(--ff-sans) !important;
    font-size: var(--ui-table-fs) !important;
    line-height: var(--ui-table-lh) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

html body .table > thead > tr > th,
html body .table > tfoot > tr > th {
    font-weight: var(--fw-bold, 700) !important;
}

html body .table > tbody > tr > td,
html body .table > tfoot > tr > td {
    font-weight: var(--fw-regular, 400) !important;
}
html body .table > thead > tr,
html body .table > tbody > tr,
html body .table > tfoot > tr {
    height: var(--ui-table-row-h) !important;
}

html body .table .btn,
html body .table button {
    font-size: var(--ui-table-fs) !important;
    line-height: var(--ui-table-lh) !important;
}

/* ==========================================================================
   Brand mark — the NGIX logo that used to sit in front of the corner label and
   in front of every .navbar-brand has been removed.

   It was a background image on `.navbar-brand::before` and `.tag.tl::before`.
   No stylesheet, template or script references the image any more; the corner
   mark now shows its wordmark text only.
   ========================================================================== */

/* ==========================================================================
   Corner tag labels (sama seperti homepage, lihat assets/css/app.css).
   Pengganti footer .app-sign lama: dua label kecil di pojok, bukan satu
   baris teks di bawah tengah.
   ========================================================================== */
.tag {
    position: fixed;
    z-index: 4;
    font-size: clamp(9px, .7vw, 11.5px);
    line-height: 1;
    letter-spacing: .3em;
    color: #000;
    font-weight: 400;
    -webkit-text-stroke: 0;
    text-shadow: 0 .08em .16em rgba(0, 0, 0, .5), 0 .022em .055em rgba(0, 0, 0, .36);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    text-rendering: geometricPrecision;
}
.tag.tl {
    top: clamp(12px, 1.5vw, 26px);
    left: clamp(12px, 1.5vw, 26px);
    display: flex;
    align-items: center;
}
.tag.br {
    bottom: clamp(12px, 1.5vw, 26px);
    right: calc(clamp(12px, 1.5vw, 26px) + .3em);
}

/* --------------------------------------------------------------------------
   Tombol reveal password (data-pw-toggle): ikon saja.

   Setiap tombol reveal menandai dirinya dengan data-pw-toggle="<id input>", jadi
   satu blok ini menutup semua field password di halaman yang memuat ui-sync.css.
   Sebelumnya tombol memakai .btn/.btn-default Bootstrap — kotak abu berbingkai
   dengan min-width 44px inline (dan min-width 148px dari portal-login-1.css) —
   sehingga terbaca sebagai tombol di samping field. Di sini tombol menjadi ikon
   polos 31px (= --ui-in-h, persis setinggi field): latar transparan, tanpa border
   dan shadow, isi dipusatkan. padding 0 wajib — tanpa itu .btn.btn-sm Bootstrap
   menyisipkan 10px di kiri/kanan dan ikonnya tidak lagi di tengah.

   Ikon sengaja dibiarkan mengalir di baris field, bukan position:absolute: pada
   form login tombol submit ada di .input-group-btn yang sama, jadi tombol reveal
   yang diangkat keluar aliran akan menutupi submit. Halaman form yang barisnya
   hanya berisi input + tombol reveal (installer, redirect-decision, shorten-web)
   menyalin blok ini ke <style> internalnya dan menambahkan aturan overlay supaya
   ikonnya duduk di dalam kotak input.
   -------------------------------------------------------------------------- */
.btn[data-pw-toggle] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--ui-in-h, 31px) !important;
    min-width: var(--ui-in-h, 31px) !important;
    max-width: var(--ui-in-h, 31px) !important;
    height: var(--ui-in-h, 31px) !important;
    min-height: var(--ui-in-h, 31px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    border: 1px solid var(--btn-border) !important;
    box-shadow: none !important;
    background: var(--btn-bg) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.btn[data-pw-toggle] > svg {
    width: var(--ui-icon-svg, 14px) !important;
    height: var(--ui-icon-svg, 14px) !important;
}

.btn[data-pw-toggle]:hover,
.btn[data-pw-toggle][aria-pressed="true"] {
    background: var(--btn-border) !important;
    border: 1px solid var(--btn-border) !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    margin-left: 0px;
}

/* Fokus keyboard tetap terlihat: kerapian tidak boleh menghapus indikator fokus. */
.btn[data-pw-toggle]:focus-visible {
    outline: 2px solid var(--ui-focus, currentColor) !important;
    outline-offset: -2px !important;
    border-radius: 6px !important;
}

/* Layar sentuh: target sentuh 44px (WCAG 2.5.5); tinggi field tidak berubah. */
@media (pointer: coarse) {
    .btn[data-pw-toggle] {
        width: var(--ui-icon-btn-touch, 44px) !important;
        min-width: var(--ui-icon-btn-touch, 44px) !important;
        max-width: var(--ui-icon-btn-touch, 44px) !important;
        height: var(--ui-icon-btn-touch, 44px) !important;
        min-height: var(--ui-icon-btn-touch, 44px) !important;
    }
}