@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Tarung Derajat — Tournament Control
   Tampilan saja. Markup, id, dan class fungsional tidak diubah.

   Tiga aturan yang memegang seluruh berkas ini:

   1. UKURAN lewat token. Semua ukuran huruf dan tinggi kontrol diambil dari
      --td-fs-* / --td-ctl-*. Di layar TV token-nya yang dinaikkan, bukan
      masing-masing aturan, supaya proporsinya tetap.

   2. TABEL SERAGAM. Satu ukuran dan satu warna huruf untuk semua kolom.
      MatchController menyuntikkan .text-danger / .text-black / .text-primary
      langsung ke dalam sel, jadi utility itu dinetralkan khusus di tabel.

   3. PAPAN SKOR DIKECUALIKAN. Semua aturan di atas dibatasi dengan
      body:not(.td-scoreboard) — tampilan live score punya skalanya sendiri.
   ========================================================================== */

:root {
    /* Permukaan & garis — nada lembut, kontras dibawa oleh teks bukan blok. */
    --td-bg: #f7f8fb;
    --td-surface: #ffffff;
    --td-surface-2: #f4f6f9;
    --td-line: #e8ebf1;
    --td-line-strong: #dbe0e9;

    /* Teks. --td-muted sengaja tidak lebih terang dari ini: di bawahnya
       label kecil jatuh di bawah rasio kontras 4.5:1. */
    --td-text: #2a3140;
    --td-text-soft: #5d6675;
    --td-muted: #6f7889;

    /* Aksen UI. Nilai solid dipilih agar teks putih di atasnya tetap
       terbaca; varian -hi hanya untuk hover dan garis, tidak membawa teks. */
    --td-primary: #15807b;
    --td-primary-hi: #1fa39d;
    --td-primary-soft: #eaf5f4;
    --td-primary-line: #c6e2e0;

    --td-amber: #a97f16;
    --td-amber-soft: #fbf3e2;
    --td-amber-line: #ead9b0;

    /* Semantik data — merah & grafit hanya berarti "sudut petarung". */
    --td-red: #c9394a;
    --td-red-soft: #fcedef;
    --td-red-line: #f2ccd2;
    --td-graphite: #3a4254;
    --td-graphite-soft: #f0f2f6;

    /* Skala huruf. Rasio ~1.15 di rentang kecil supaya rapat tapi tetap
       berjenjang; judul memakai clamp agar ikut lebar layar. */
    --td-fs-xs: .72rem;
    --td-fs-sm: .8125rem;
    --td-fs-base: .875rem;
    --td-fs-md: 1rem;
    --td-fs-lg: 1.15rem;
    --td-fs-title: clamp(1.15rem, 1.5vw, 1.45rem);

    /* Tinggi kontrol. Semua tombol, input, select2, dan bootstrap-select
       memakai dua nilai ini saja. */
    --td-ctl-h: 38px;
    --td-ctl-h-sm: 30px;

    --td-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --td-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --td-radius: 12px;
    --td-radius-sm: 8px;
    --td-gutter: clamp(14px, 1.4vw, 22px);
}

body {
    font-family: var(--td-body);
    font-size: var(--td-fs-base);
    background-color: var(--td-bg);
    color: var(--td-text);
    -webkit-font-smoothing: antialiased;
}

/* Area cetak / ekspor PDF tetap pakai font sistem supaya hasil html2canvas
   dan jsPDF identik dengan sebelumnya. */
.preview-canvas,
.preview-canvas * {
    font-family: Arial, Helvetica, sans-serif;
}

::selection {
    background: var(--td-primary-soft);
}

/* ==========================================================================
   1. Topbar
   ========================================================================== */

.td-topbar {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--td-line);
    position: sticky;
    top: 0;
    z-index: 1030;
    margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem) / 2) var(--td-gutter);
}

.td-topbar__inner {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0 clamp(10px, 2vw, 24px);
    padding: 0 clamp(12px, 1.6vw, 20px);
}

.td-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 0;
    text-decoration: none;
    color: var(--td-text);
    margin-right: auto;
}

.td-brand__mark {
    height: clamp(28px, 2.8vw, 36px);
    width: auto;
}

.td-brand__text {
    font-family: var(--td-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: var(--td-fs-lg);
    line-height: 1.1;
    display: flex;
    flex-direction: column;
}

.td-brand__text em {
    font-family: var(--td-body);
    font-style: normal;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--td-fs-xs);
    color: var(--td-muted);
}

.td-nav {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.td-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 clamp(9px, 1vw, 15px);
    min-height: 46px;
    color: var(--td-text-soft);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--td-fs-base);
    white-space: nowrap;
    transition: color .15s ease;
}

/* Satu-satunya elemen yang "miring" di seluruh antarmuka — penanda halaman
   aktif. Selebihnya sengaja tenang. */
.td-nav__link::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--td-primary-hi);
    transform: skewX(-16deg) scaleX(0);
    transition: transform .18s ease;
}

.td-nav__link:hover,
.td-nav__link:focus-visible {
    color: var(--td-text);
}

.td-nav__link:hover::after {
    transform: skewX(-16deg) scaleX(.55);
}

.td-nav__link.is-active {
    color: var(--td-primary);
    font-weight: 600;
}

.td-nav__link.is-active::after {
    transform: skewX(-16deg) scaleX(1);
    background: var(--td-primary);
}

/* Submenu dan menu pengguna di topbar */
.td-nav__group {
    display: flex;
}

.td-nav__toggle {
    background: none;
    border: none;
    cursor: pointer;
    gap: .35rem;
}

.td-nav__caret {
    font-size: .68em;
    opacity: .7;
}

.td-user {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: clamp(8px, 1.4vw, 18px);
}

.td-user__btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    color: var(--td-text-soft);
    font-size: var(--td-fs-base);
}

.td-user__btn:hover {
    color: var(--td-text);
}

.td-user__avatar {
    width: clamp(28px, 2.6vw, 34px);
    height: clamp(28px, 2.6vw, 34px);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--td-line-strong);
    background: var(--td-surface-2);
}

.td-user__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
    max-width: 11rem;
}

.td-user__text em {
    font-style: normal;
    font-size: var(--td-fs-xs);
    color: var(--td-muted);
}

.td-user__logout {
    color: var(--td-red) !important;
}

/* ==========================================================================
   2. Judul halaman
   ========================================================================== */

.row.header {
    background: transparent !important;
    color: inherit !important;
    margin-inline: 0;
    padding: 2px 0 12px;
    align-items: center;
}

.row.header h4 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-family: var(--td-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--td-fs-title);
    color: var(--td-text);
}

.row.header h4 i {
    color: var(--td-primary);
    font-size: .8em;
}

.row.header h5 {
    margin: 0 0 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--td-fs-xs);
    color: var(--td-muted);
    width: auto;
    max-width: 100%;
}

/* ==========================================================================
   3. Panel
   ========================================================================== */

body:not(.td-scoreboard) .container>.row.main-content,
body:not(.td-scoreboard) .container>.row:not(.header):not(.main-content):not(.title-header),
body:not(.td-scoreboard) .nav-tabs-custom {
    background: var(--td-surface);
    border: 1px solid var(--td-line);
    border-radius: var(--td-radius);
    box-shadow: 0 1px 2px rgba(42, 49, 64, .04);
    margin-inline: 0;
    padding: var(--td-gutter) calc(var(--td-gutter) - 12px) !important;
    margin-top: 14px !important;
    /* Panel sengaja TIDAK diberi position:relative maupun overflow:hidden.
       bootstrap-select (halaman Draw Simulator) merender dropdown-nya di
       dalam row, bukan di <body> seperti select2. overflow:hidden memotong
       daftarnya; position:relative menjadikan panel offsetParent sehingga
       Popper salah posisi dan panel berikutnya menimpa cat dropdown. */
}

body:not(.td-scoreboard) .nav-tabs-custom {
    border: 1px solid var(--td-line) !important;
    padding: 0 !important;
}

.container>hr {
    display: none;
}

/* ==========================================================================
   4. Form
   ========================================================================== */

label,
.form-group>label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--td-fs-xs);
    color: var(--td-muted);
    margin-bottom: 6px;
}

.form-group {
    margin-bottom: 6px;
}

.form-control,
.form-select {
    min-height: var(--td-ctl-h);
    border: 1px solid var(--td-line-strong);
    border-radius: var(--td-radius-sm);
    background-color: var(--td-surface);
    color: var(--td-text);
    font-size: var(--td-fs-base);
    font-weight: 500;
    padding: .4rem .7rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--td-muted);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(21, 128, 123, .13);
}

.form-control::placeholder {
    color: #aab2bf;
    font-weight: 400;
}

/* select2 disamakan dengan .form-control */
.select2-container .select2-selection--single {
    height: auto;
    min-height: var(--td-ctl-h);
    border: 1px solid var(--td-line-strong);
    border-radius: var(--td-radius-sm);
    background-color: var(--td-surface);
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: .7rem;
    color: var(--td-text);
    font-size: var(--td-fs-base);
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 4px;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(21, 128, 123, .13);
}

.select2-dropdown {
    border-color: var(--td-line-strong);
    border-radius: var(--td-radius-sm);
    overflow: hidden;
    box-shadow: 0 12px 32px -12px rgba(42, 49, 64, .22);
}

.select2-results__option {
    font-size: var(--td-fs-base);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--td-primary);
}

/* bootstrap-select (halaman Draw Simulator) — disamakan dengan select2. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--td-primary);
    --bs-dropdown-link-hover-bg: var(--td-primary-soft);
    --bs-dropdown-font-size: var(--td-fs-base);
    border-color: var(--td-line-strong);
    border-radius: var(--td-radius-sm);
    box-shadow: 0 12px 32px -12px rgba(42, 49, 64, .22);
}

.bootstrap-select>.dropdown-toggle {
    min-height: var(--td-ctl-h);
    background-color: var(--td-surface);
    border: 1px solid var(--td-line-strong);
    border-radius: var(--td-radius-sm);
    color: var(--td-text);
    font-size: var(--td-fs-base);
    font-weight: 500;
    text-align: left;
}

.bootstrap-select>.dropdown-toggle:hover {
    border-color: var(--td-muted);
    background-color: var(--td-surface);
    color: var(--td-text);
}

.bootstrap-select>.dropdown-toggle:focus-visible,
.bootstrap-select.show>.dropdown-toggle {
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(21, 128, 123, .13);
    outline: none;
}

.bootstrap-select .bs-searchbox .form-control {
    border-radius: var(--td-radius-sm);
}

/* ==========================================================================
   5. Tombol
   Dua tinggi saja: normal (38px) dan kecil di dalam tabel (30px).
   Warna diatur lewat CSS variable Bootstrap, bukan properti mentah, supaya
   state hover / active / disabled ikut berubah.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--td-ctl-h);
    padding: .35rem 1rem;
    font-family: var(--td-body);
    font-size: var(--td-fs-base);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    border-radius: var(--td-radius-sm);
    /* Ikut variabel Bootstrap, jangan dipatok transparent: tombol outline
       (KO/WHT/UD/DIS di tabel skor) kehilangan seluruh bingkainya. */
    border: 1px solid var(--bs-btn-border-color, transparent);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* .btn-sm dinetralkan. Markup-nya tidak konsisten — "Load" dan tombol Tag#
   memakai .btn-sm sedangkan "Save" tidak, padahal ketiganya sederajat.
   Ukuran kecil hanya berlaku di dalam tabel dan tombol DataTables, di mana
   kerapatan memang dibutuhkan (lihat bagian Tabel). */
.btn-sm {
    min-height: var(--td-ctl-h);
    padding: .35rem 1rem;
    font-size: var(--td-fs-base);
}

.btn-lg {
    min-height: 44px;
    font-size: var(--td-fs-md);
}

.btn:focus-visible {
    outline: 3px solid rgba(21, 128, 123, .32);
    outline-offset: 2px;
}

/* Banyak tombol memakai .form-control agar melebar. Warna .form-control
   akan menimpa warna tombol, jadi dikembalikan di sini. */
.btn.form-control {
    cursor: pointer;
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.btn.form-control:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

.btn-flat {
    box-shadow: none;
}

/* Aksi utama: "Load" di setiap panel filter. */
.btn-info,
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--td-primary);
    --bs-btn-border-color: var(--td-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--td-primary-hi);
    --bs-btn-hover-border-color: var(--td-primary-hi);
    --bs-btn-active-bg: var(--td-primary);
    --bs-btn-active-border-color: var(--td-primary);
}

/* Aksi pendukung: Reset/Manual/Auto Tag#, Generate Draw, Refresh. */
.btn-success {
    --bs-btn-color: var(--td-primary);
    --bs-btn-bg: var(--td-primary-soft);
    --bs-btn-border-color: var(--td-primary-line);
    --bs-btn-hover-color: var(--td-primary);
    --bs-btn-hover-bg: #dcefed;
    --bs-btn-hover-border-color: var(--td-primary);
    --bs-btn-active-color: var(--td-primary);
    --bs-btn-active-bg: #d0e9e7;
    --bs-btn-active-border-color: var(--td-primary);
}

/* Aksi yang menulis data: Save, Generate. */
.btn-warning {
    --bs-btn-color: var(--td-amber);
    --bs-btn-bg: var(--td-amber-soft);
    --bs-btn-border-color: var(--td-amber-line);
    --bs-btn-hover-color: var(--td-amber);
    --bs-btn-hover-bg: #f7ead1;
    --bs-btn-hover-border-color: var(--td-amber);
    --bs-btn-active-color: var(--td-amber);
    --bs-btn-active-bg: #f3e3c4;
    --bs-btn-active-border-color: var(--td-amber);
}

/* Ekspor & hapus. */
.btn-danger {
    --bs-btn-color: var(--td-red);
    --bs-btn-bg: var(--td-red-soft);
    --bs-btn-border-color: var(--td-red-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--td-red);
    --bs-btn-hover-border-color: var(--td-red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--td-red);
    --bs-btn-active-border-color: var(--td-red);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--td-text-soft);
    --bs-btn-bg: var(--td-surface);
    --bs-btn-border-color: var(--td-line-strong);
    --bs-btn-hover-color: var(--td-text);
    --bs-btn-hover-bg: var(--td-surface-2);
    --bs-btn-hover-border-color: var(--td-muted);
    --bs-btn-active-color: var(--td-text);
    --bs-btn-active-bg: var(--td-surface-2);
    --bs-btn-active-border-color: var(--td-muted);
}

/* Nonaktif dibaca sebagai netral, bukan versi pudar dari warnanya — supaya
   "tidak bisa diklik" langsung terlihat. */
.btn.disabled,
.btn:disabled,
.btn.form-control.disabled {
    --bs-btn-disabled-bg: var(--td-surface-2);
    --bs-btn-disabled-border-color: var(--td-line);
    --bs-btn-disabled-color: var(--td-muted);
    background-color: var(--td-surface-2);
    border-color: var(--td-line);
    color: var(--td-muted);
    opacity: 1;
    box-shadow: none;
    cursor: not-allowed;
}

/* ==========================================================================
   6. Tabel
   Satu ukuran dan satu warna huruf untuk semua kolom. Halaman-halaman ini
   masing-masing menetapkan .table{font-size:...!important} sendiri (12px,
   10pt, 14px), jadi penyeragaman harus ikut !important.
   ========================================================================== */

body:not(.td-scoreboard) .table {
    --bs-table-border-color: var(--td-line);
    --bs-table-color: var(--td-text);
    border-color: var(--td-line);
    color: var(--td-text);
    font-size: var(--td-fs-sm) !important;
    vertical-align: middle;
}

body:not(.td-scoreboard) .table>thead th {
    background: var(--td-surface-2);
    color: var(--td-text-soft);
    font-size: var(--td-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-color: var(--td-line);
    border-bottom: 1px solid var(--td-line-strong);
    padding: .6rem;
    white-space: nowrap;
}

/* Header kolom skor tetap membawa kode sudut, tapi dengan nada lembut. */
body:not(.td-scoreboard) .table>thead th.bg-danger {
    background: var(--td-red-soft) !important;
    color: var(--td-red) !important;
    box-shadow: inset 0 -2px 0 var(--td-red);
}

body:not(.td-scoreboard) .table>thead th.bg-black {
    background: var(--td-graphite-soft) !important;
    color: var(--td-graphite) !important;
    box-shadow: inset 0 -2px 0 var(--td-graphite);
}

body:not(.td-scoreboard) .table>thead th.bg-secondary {
    background: var(--td-surface-2) !important;
    color: var(--td-muted) !important;
}

body:not(.td-scoreboard) .table>tbody td {
    padding: .5rem .6rem;
    border-color: var(--td-line);
}

/* Penyeragaman isi sel. MatchController menyuntikkan .text-danger /
   .text-black / .text-primary ke dalam <div>, <span>, <a>, dan <i>, jadi
   semuanya dikembalikan ke satu warna dan satu ukuran di sini. */
body:not(.td-scoreboard) .table>tbody>tr>td,
body:not(.td-scoreboard) .table>tbody>tr>td div,
body:not(.td-scoreboard) .table>tbody>tr>td span,
body:not(.td-scoreboard) .table>tbody>tr>td a,
body:not(.td-scoreboard) .table>tbody>tr>td i,
body:not(.td-scoreboard) .table>tbody>tr>td b,
body:not(.td-scoreboard) .table>tbody>tr>td small,
body:not(.td-scoreboard) .table>tbody>tr>td strong,
/* TeamController membungkus isi sel dalam <label class="lbl-team-name">,
   sehingga aturan global label{color:muted} membuat kolom Tag#/Code/Name
   lebih pucat daripada kolom lain di tabel yang sama. */
body:not(.td-scoreboard) .table>tbody>tr>td label {
    color: var(--td-text) !important;
    font-size: var(--td-fs-sm) !important;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    margin-bottom: 0;
}

/* Tautan skor tetap dikenali sebagai tautan lewat garis bawah, bukan warna. */
body:not(.td-scoreboard) .table>tbody>tr>td a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--td-line-strong);
}

body:not(.td-scoreboard) .table>tbody>tr>td a:hover {
    color: var(--td-primary) !important;
    text-decoration-color: currentColor;
}

/* Dikecualikan dari penyeragaman: penanda pemenang dan ikon aksi baris.
   Keduanya status dan kontrol, bukan isi kolom — kalau ikut netral,
   operator kehilangan penanda sekali-lihat saat menjalankan pertandingan. */
/* Identitas sudut dikembalikan. Ini SATU-SATUNYA yang dikecualikan dari
   penyeragaman warna di atas: nama petarung dan tombol set skor. Sisa
   kolom (Tag#, Kejuaraan, Kelas, tautan skor) tetap satu warna.
   .text-primary sengaja TIDAK ikut dikembalikan — biru itu tidak membawa
   arti apa pun, hanya sisa utility bawaan. */
body:not(.td-scoreboard) .table>tbody>tr>td .text-danger,
body:not(.td-scoreboard) .table>tbody>tr>td .text-danger * {
    color: var(--td-red) !important;
}

body:not(.td-scoreboard) .table>tbody>tr>td .text-black,
body:not(.td-scoreboard) .table>tbody>tr>td .text-black * {
    color: var(--td-graphite) !important;
}

/* KO / WHT / UD / DIS — huruf diperkecil dan diberi latar sesuai sudut,
   supaya dua kelompok set skor langsung terbedakan sekali lihat.
   Hanya variabel Bootstrap yang diisi, bukan properti mentah, agar aturan
   .btn.disabled (dipasang JS setelah KO ditekan) tetap menang. */
body:not(.td-scoreboard) .table .btn-ko,
body:not(.td-scoreboard) .table .btn-ko-op {
    padding: .15rem .35rem;
}

body:not(.td-scoreboard) .table .btn-ko i,
body:not(.td-scoreboard) .table .btn-ko-op i {
    font-size: var(--td-fs-xs) !important;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .02em;
}

body:not(.td-scoreboard) .table .btn-ko {
    --bs-btn-color: var(--td-red);
    --bs-btn-bg: var(--td-red-soft);
    --bs-btn-border-color: var(--td-red-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--td-red);
    --bs-btn-hover-border-color: var(--td-red);
}

body:not(.td-scoreboard) .table .btn-ko-op {
    --bs-btn-color: var(--td-graphite);
    --bs-btn-bg: var(--td-graphite-soft);
    --bs-btn-border-color: var(--td-line-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--td-graphite);
    --bs-btn-hover-border-color: var(--td-graphite);
}

body:not(.td-scoreboard) .table .btn-ko:hover i,
body:not(.td-scoreboard) .table .btn-ko-op:hover i {
    color: #fff !important;
}

/* Saat dinonaktifkan, latar tombol jadi netral — teksnya harus ikut, kalau
   tidak KO merah menyala di atas abu-abu dan terbaca masih bisa diklik. */
body:not(.td-scoreboard) .table .btn:disabled i,
body:not(.td-scoreboard) .table .btn.disabled i {
    color: var(--td-muted) !important;
}

/* Ditargetkan lewat kelas ikonnya, bukan nama tombolnya: nama tombol
   berbeda-beda per controller (btn-team-del, btn-div-del, btn-tour-del, …)
   sedangkan ikonnya sudah konsisten. */
body:not(.td-scoreboard) .table>tbody>tr>td .bi-star-fill {
    color: var(--td-amber) !important;
}

body:not(.td-scoreboard) .table>tbody>tr>td .bi-pencil-square,
body:not(.td-scoreboard) .table>tbody>tr>td .bi-floppy2-fill {
    color: var(--td-primary) !important;
}

body:not(.td-scoreboard) .table>tbody>tr>td .bi-trash-fill,
body:not(.td-scoreboard) .table>tbody>tr>td .fa-rotate-left {
    color: var(--td-red) !important;
}

/* Kontrol di dalam sel ikut tinggi kecil, supaya baris tidak melar. */
body:not(.td-scoreboard) .table .form-control,
body:not(.td-scoreboard) .table .btn {
    min-height: var(--td-ctl-h-sm);
    font-size: var(--td-fs-sm) !important;
}

body:not(.td-scoreboard) .table .btn {
    padding: .2rem .55rem;
}

/* Kolom skor sempit. Di dalam .input-group, Bootstrap memberi input
   width:1% sehingga ia menyusut sampai ~30px — tidak cukup untuk nilai
   empat karakter seperti -100 (KO). */
body:not(.td-scoreboard) .table .form-control {
    padding: .2rem .4rem;
    text-align: center;
}

body:not(.td-scoreboard) .table .input-group>.form-control {
    min-width: 2.9rem;
}

/* .input-group bawaan Bootstrap membungkus saat sempit — di layar entri
   skor itu memecah satu pertandingan jadi dua baris. Lebih baik tabelnya
   yang digeser (sudah ada overflow-x pada #table-team). */
body:not(.td-scoreboard) .table .input-group {
    flex-wrap: nowrap;
}

body:not(.td-scoreboard) .table .input-group .btn {
    padding: .2rem .4rem;
}

body:not(.td-scoreboard) .table>tbody tr:hover>td {
    background-color: var(--td-primary-soft);
}

.table.with-border,
.with-border {
    border: 1px solid var(--td-line);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: #fbfcfd;
    --bs-table-bg-type: #fbfcfd;
}

/* Tabel selalu bisa digeser di layar sempit, tidak pernah memaksa halaman
   melebar. */
#table-team,
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

.dataTables_wrapper,
div.dt-container {
    font-size: var(--td-fs-sm);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    min-height: var(--td-ctl-h-sm);
    border: 1px solid var(--td-line-strong);
    border-radius: var(--td-radius-sm);
    padding: .25rem .55rem;
    font-size: var(--td-fs-sm);
}

.dataTables_wrapper .dataTables_filter input:focus,
div.dt-container .dt-search input:focus {
    outline: none;
    border-color: var(--td-primary);
    box-shadow: 0 0 0 3px rgba(21, 128, 123, .13);
}

.dataTables_wrapper .dataTables_info,
div.dt-container .dt-info {
    color: var(--td-muted);
    font-size: var(--td-fs-sm);
}

/* Tombol DataTables — "Gen. Next Round" (matches) dan "Export To Excel"
   (dafur). Ini satu-satunya sumber gayanya; kedua halaman itu sebelumnya
   menimpanya sendiri-sendiri dari <style> masing-masing (cyan #13cfcd dan
   hijau), sehingga bentuknya berbeda antar halaman.

   Flat mengikuti konvensi yang memang sudah dipakai proyek ini pada
   .btn-table: tanpa sudut, tanpa bingkai, tanpa bayangan — sekaligus
   membedakannya dari tombol aksi biasa yang bersudut 8px.

   Dikaitkan ke .dt-button karena kelas itu selalu ditambahkan DataTables,
   baik oleh Buttons 2.3.6 (matches) maupun 3.2.5 (dafur). */
.dt-button {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    min-height: var(--td-ctl-h-sm);
    padding: .25rem .8rem !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* DataTables memberi gradien pada tombolnya — harus dimatikan eksplisit. */
    background: var(--td-primary-soft) !important;
    background-image: none !important;
    color: var(--td-primary) !important;
    font-family: var(--td-body);
    font-size: var(--td-fs-sm) !important;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .15s ease, color .15s ease;
}

.dt-button:hover,
.dt-button:focus-visible,
.dt-button.dt-button-active {
    background: var(--td-primary) !important;
    background-image: none !important;
    color: #fff !important;
}

.dt-button:focus-visible {
    outline: 3px solid rgba(21, 128, 123, .32);
    outline-offset: 2px;
}

div.dt-buttons {
    gap: 6px;
}

.page-link {
    color: var(--td-text-soft);
    border-color: var(--td-line);
    font-size: var(--td-fs-sm);
}

.page-item.active .page-link {
    background-color: var(--td-primary);
    border-color: var(--td-primary);
}

/* ==========================================================================
   7. Tab (halaman Setup)
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--td-line);
    background: transparent;
    padding: 0 10px;
    gap: 2px;
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: var(--td-muted);
    font-size: var(--td-fs-base);
    font-weight: 500;
    padding: .7rem 1rem;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--td-text);
    background: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--td-primary);
    font-weight: 600;
    background: transparent;
    border-bottom-color: var(--td-primary);
}

.tab-content {
    padding-block: 16px;
}

/* ==========================================================================
   8. Modal
   ========================================================================== */

.modal-content {
    border: 1px solid var(--td-line);
    border-radius: var(--td-radius);
    overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(42, 49, 64, .26);
}

.modal-header {
    background: var(--td-surface) !important;
    border-bottom: 1px solid var(--td-line);
    color: var(--td-text);
}

.modal-header .modal-title,
.modal-header .modal-title .text-white {
    font-size: var(--td-fs-md);
    font-weight: 600;
    color: var(--td-text) !important;
}

.modal-header .btn-close {
    filter: none;
    opacity: .6;
}

.modal-header .btn-close .text-white {
    color: var(--td-text-soft) !important;
}

/* Bootstrap 5.2 tidak menyediakan .bg-black — tanpa ini header kartu
   "Sudut Hitam" tampil transparan dengan teks putih. */
.bg-black {
    background-color: var(--td-graphite) !important;
}

/* ==========================================================================
   9. Area bagan & cetak
   ========================================================================== */

.preview-canvas {
    background: var(--td-surface);
    border: 1px solid var(--td-line) !important;
    border-radius: var(--td-radius);
}

/* Bagan jQuery Bracket punya lebar piksel tetap. Di halaman lain ia sudah
   dibungkus .preview-canvas yang bisa digeser; #main (Draw Simulator) tidak,
   jadi diberi geser sendiri daripada terpotong. */
#main {
    overflow-x: auto;
    width: 100%;
}

/* Logo kop dipasang dengan tinggi tetap; tanpa batas lebar ia menembus
   kolomnya di layar sempit. */
.logo,
.logo-modal {
    max-width: 100%;
    object-fit: contain;
}

.bracket-no-data {
    display: grid !important;
    place-items: center;
    background: var(--td-surface-2) !important;
    border: 1px dashed var(--td-line-strong);
    border-radius: var(--td-radius);
    color: var(--td-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--td-fs-sm);
}

.team-box.upcoming {
    background-color: var(--td-surface-2) !important;
    color: var(--td-muted) !important;
    font-weight: 600;
}

.tag-title {
    color: var(--td-primary) !important;
}

/* ==========================================================================
   10. Papan skor (matches_result) — dikecualikan dari semua aturan di atas
   ========================================================================== */

.td-scoreboard {
    background: var(--td-bg);
    color: var(--td-text);
    min-height: 100vh;
}

.td-scoreboard .preview-canvas {
    position: static !important;
    background: transparent !important;
    border: none !important;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 2vh, 28px);
    padding: clamp(12px, 3vh, 36px) clamp(12px, 3vw, 48px) !important;
}

.td-scoreboard .title-header {
    border: none !important;
    border-bottom: 1px solid var(--td-line-strong) !important;
    align-items: center;
    margin-inline: 0 !important;
    padding-bottom: clamp(8px, 1.5vh, 18px);
}

.td-scoreboard .title-canvas {
    font-family: var(--td-display) !important;
    font-size: clamp(1rem, 2.2vw, 2.2rem) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--td-text);
    line-height: 1.25;
}

/* Penanda matras di papan skor. Dibuat menonjol karena saat beberapa matras
   berjalan bersamaan, inilah yang membedakan satu layar dari yang lain. */
.td-scoreboard .matras-badge {
    display: inline-block;
    margin-top: clamp(4px, 1vh, 10px);
    padding: .2em .9em;
    border-radius: 999px;
    background: var(--td-primary-soft);
    color: var(--td-primary);
    font-family: var(--td-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: clamp(.8rem, 1.5vw, 1.5rem);
    line-height: 1.4;
}

.td-scoreboard .logo,
.td-scoreboard .logo-modal {
    height: clamp(44px, 7vh, 100px) !important;
    width: auto;
}

.td-scoreboard .bracket-canvas {
    background: transparent !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.td-scoreboard .bracket-canvas>.row {
    width: 100%;
    align-items: stretch;
    row-gap: clamp(10px, 2vh, 20px);
    /* Margin negatif bawaan .row menambah lebar melebihi kanvas dan memicu
       scroll horizontal di layar sempit. */
    margin-inline: 0;
}

.td-scoreboard .card {
    background: var(--td-surface);
    border: 1px solid var(--td-line) !important;
    border-radius: var(--td-radius);
    height: 100%;
    overflow: hidden;
}

/* Satu-satunya tempat merah dan grafit tampil penuh: identitas sudut. */
.td-scoreboard .card-danger {
    border-top: 5px solid var(--td-red) !important;
}

.td-scoreboard .card-black {
    border-top: 5px solid var(--td-graphite) !important;
}

.td-scoreboard .card-header {
    font-weight: 600;
    letter-spacing: .16em;
    font-size: clamp(.72rem, 1vw, 1rem);
    text-align: center;
    padding: .6rem;
    border: none;
    background: transparent !important;
}

.td-scoreboard .card-danger .card-header {
    color: var(--td-red) !important;
}

.td-scoreboard .card-black .card-header {
    color: var(--td-graphite) !important;
}

.td-scoreboard .card-body {
    height: auto !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(2px, .8vh, 10px);
    padding: clamp(8px, 2vh, 22px);
}

.td-scoreboard .lbl-player {
    font-family: var(--td-display);
    font-weight: 700;
    font-size: clamp(1.3rem, 3.2vw, 3.6rem) !important;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--td-text) !important;
}

.td-scoreboard .line-asal {
    font-size: clamp(.8rem, 1.3vw, 1.5rem) !important;
    letter-spacing: .16em;
    font-weight: 500;
    color: var(--td-muted) !important;
    text-align: center !important;
}

.td-scoreboard .line-score {
    margin-top: clamp(4px, 1.5vh, 20px) !important;
}

.td-scoreboard .line-score>div:first-child {
    text-transform: uppercase;
    letter-spacing: .26em;
    font-size: clamp(.66rem, .9vw, .95rem);
    font-weight: 600;
    color: var(--td-muted);
    text-align: center;
}

.td-scoreboard .lbl-score {
    font-family: var(--td-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: clamp(4rem, 17vh, 14rem) !important;
    line-height: .95;
    color: var(--td-text) !important;
}

.td-scoreboard .card-danger .lbl-score {
    color: var(--td-red) !important;
}

.td-scoreboard .card-black .lbl-score {
    color: var(--td-graphite) !important;
}

.td-scoreboard .card-default {
    border: 1px dashed var(--td-line-strong) !important;
    background: transparent;
}

.td-scoreboard #div_title_status {
    height: auto !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: clamp(60px, 14vh, 170px);
}

.td-scoreboard .final-result {
    font-family: var(--td-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: clamp(1rem, 1.9vw, 2rem);
    color: var(--td-text-soft);
}

.td-scoreboard #card-footer {
    border: none;
}

.td-scoreboard #card-footer .final-result {
    color: #fff !important;
}

/* ==========================================================================
   10b. Login, akses ditolak, profil, dan pemilih menu role
   ========================================================================== */

.td-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--td-bg);
}

.td-login__card {
    width: 100%;
    max-width: 380px;
    background: var(--td-surface);
    border: 1px solid var(--td-line);
    border-radius: var(--td-radius);
    box-shadow: 0 12px 40px -18px rgba(42, 49, 64, .3);
    padding: clamp(22px, 4vw, 34px);
    text-align: center;
}

.td-login__logo {
    height: 64px;
    width: auto;
    object-fit: contain;
}

.td-login__title {
    font-family: var(--td-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    margin: 10px 0 0;
    color: var(--td-text);
}

.td-login__sub {
    color: var(--td-muted);
    font-size: var(--td-fs-base);
    margin: 0 0 20px;
}

.td-login__card .form-group {
    text-align: left;
    margin-bottom: 14px;
}

.td-login__pass {
    position: relative;
}

.td-login__pass .form-control {
    padding-right: 2.6rem;
}

.td-login__eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--td-muted);
    cursor: pointer;
    padding: 4px 6px;
}

.td-login__submit {
    width: 100%;
    margin-top: 6px;
}

.td-login__error {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: left;
    background: var(--td-red-soft);
    border: 1px solid var(--td-red-line);
    color: var(--td-red);
    border-radius: var(--td-radius-sm);
    padding: .6rem .8rem;
    font-size: var(--td-fs-sm);
    margin-bottom: 14px;
}

.td-login__note {
    margin: 18px 0 0;
    color: var(--td-muted);
    font-size: var(--td-fs-xs);
}

.td-noaccess__icon {
    font-size: 3rem;
    color: var(--td-amber);
}

.td-hint {
    color: var(--td-muted);
    font-size: var(--td-fs-xs);
    margin: 6px 0 0;
}

.td-profile__avatar {
    margin-bottom: 14px;
}

.td-profile__avatar img {
    width: 100%;
    max-width: 190px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--td-radius);
    border: 1px solid var(--td-line-strong);
    background: var(--td-surface-2);
}

/* Pemilih hak akses menu pada Role Management */
.td-menu-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
    border: 1px solid var(--td-line);
    border-radius: var(--td-radius-sm);
    padding: 12px;
    background: var(--td-surface-2);
}

.td-menu-picker__group {
    background: var(--td-surface);
    border: 1px solid var(--td-line);
    border-radius: var(--td-radius-sm);
    padding: 8px 10px;
}

.td-menu-picker__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 3px 0;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--td-fs-sm);
    font-weight: 500;
    color: var(--td-text);
    cursor: pointer;
}

.td-menu-picker__item--child {
    padding-left: 1.1rem;
}

.td-menu-picker__item small {
    color: var(--td-muted);
    font-size: .82em;
}

.td-menu-picker__item input {
    accent-color: var(--td-primary);
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* ==========================================================================
   11. Responsif — token yang dinaikkan, bukan aturan satu per satu
   ========================================================================== */

/* Mobile: kolom di sini semuanya .col-3 / .col-4 tanpa breakpoint, jadi di
   layar sempit dipaksa menumpuk. */
@media (max-width: 767.98px) {

    .container>.row>[class*="col-"],
    .container .row.main-content>[class*="col-"] {
        flex: 0 0 auto;
        width: 100%;
    }

    .td-topbar__inner {
        padding-inline: 10px;
    }

    .td-nav {
        width: 100%;
        border-top: 1px solid var(--td-line);
    }

    .td-nav__link {
        min-height: 42px;
    }

    .td-brand {
        margin-right: 0;
    }

    /* Di layar sempit menu pengguna pindah ke sisi kanan baris brand. */
    .td-user {
        margin-left: auto;
        order: 2;
    }

    .td-user__text {
        display: none;
    }

    .td-nav {
        order: 3;
    }

    .td-scoreboard .bracket-canvas>.row>[class*="col-"] {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* TV / layar besar: skala dinaikkan lewat token supaya perbandingan antar
   ukuran tetap sama seperti di desktop. */
@media (min-width: 1600px) {
    :root {
        --td-fs-xs: .78rem;
        --td-fs-sm: .9rem;
        --td-fs-base: .95rem;
        --td-fs-md: 1.1rem;
        --td-fs-lg: 1.3rem;
        --td-ctl-h: 42px;
        --td-ctl-h-sm: 34px;
    }

    body:not(.td-scoreboard) .container {
        max-width: 1560px;
    }
}

@media (min-width: 2200px) {
    :root {
        --td-fs-xs: .88rem;
        --td-fs-sm: 1.02rem;
        --td-fs-base: 1.08rem;
        --td-fs-md: 1.25rem;
        --td-fs-lg: 1.5rem;
        --td-ctl-h: 48px;
        --td-ctl-h-sm: 38px;
    }

    body:not(.td-scoreboard) .container {
        max-width: 1900px;
    }
}

/* Papan skor pada layar lebar dan pendek (TV landscape) — jaga skor tetap
   dominan tanpa memotong nama. */
@media (min-aspect-ratio: 16/10) and (min-width: 1200px) {
    .td-scoreboard .lbl-score {
        font-size: clamp(5rem, 22vh, 17rem) !important;
    }
}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff !important;
    }

    .container>.row.main-content,
    .container>.row,
    .nav-tabs-custom,
    .preview-canvas {
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}