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

/* 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;
}

/* 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 — NGIX logo in front of every .navbar-brand, matching the
   public pages (index.php / 404.php / legal.php). Needs assets/img/ngix-logo.png
   in this module's assets tree.
   ========================================================================== */
.navbar-brand::before {
    content: "";
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    margin-right: .55em;
    vertical-align: -.45em;
    background: url('../img/ngix-logo.png') center / contain no-repeat;
    mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
    .navbar-brand::before {
        filter: invert(1);
        mix-blend-mode: screen;
    }
}

/* ==========================================================================
   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.tl::before {
    content: "";
    flex: 0 0 auto;
    width: 1.4em;
    height: 1.4em;
    margin-right: .5em;
    background: url('../img/ngix-logo.png') center / contain no-repeat;
    mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
    .tag.tl::before {
        filter: invert(1);
        mix-blend-mode: screen;
    }
}
.tag.br {
    bottom: clamp(12px, 1.5vw, 26px);
    right: calc(clamp(12px, 1.5vw, 26px) + .3em);
}