@charset "UTF-8";
/* ============================================================================
   tema.css — KSPROJECT
   STAGE B Iterasi 1. Dibuat 29 Juli 2026.

   PERAN
   Lapisan tema tunggal di atas Bootstrap 5.3.8. Dipakai bersama oleh
   /www/wwwroot/ksproject.work/index.php dan SELURUH halaman di console/.
   Wajib dimuat SESUDAH bootstrap.min.css agar override-nya menang.

   ATURAN YANG MENGIKAT BERKAS INI
   - CLAUDE.md 6.8 poin 4: peniruan gaya polymarket.com dikerjakan dengan
     meng-override CSS custom property bawaan Bootstrap (--bs-*) dan memakai
     mekanisme tema bawaannya (data-bs-theme) — BUKAN menulis ulang CSS.
   - CLAUDE.md 6.8: setiap token warna wajib punya DUA nilai (gelap & terang).
     DILARANG menulis warna langsung (hard-code) di dalam komponen; semua
     warna hanya boleh muncul satu kali, yaitu di lapisan token di bawah ini.
   - CLAUDE.md 6.6/6.7: tanpa library tambahan, tanpa CDN. Font di-host lokal.

   PERINGATAN T-6 (rencana-pekerjaan.md 0.2)
   vhost ksproject.work baris 74-76 memuat:  location ~ .*\.(js|css)?$ { expires 12h; }
   Berkas ini berekstensi .css sehingga DI-CACHE BROWSER 12 JAM. Setiap
   <link> yang memuatnya WAJIB memakai penanda versi manual, contoh:
       <link rel="stylesheet" href="/core/template/tema.css?v=2026072901">
   dan angkanya dinaikkan setiap kali berkas ini diubah.
   Berkas font .woff2 TIDAK tertangkap aturan cache itu, jadi src @font-face
   di bawah sengaja ditulis tanpa penanda versi.

   SUMBER NILAI
   Seluruh angka warna, radius, dan metrik fallback dibaca langsung dari
   polymarket.com pada 29 Juli 2026 (4 berkas CSS, 538.790 byte) dan tercatat
   sebagai fakta terverifikasi di CLAUDE.md bagian 6.8. Tidak ada nilai
   yang ditebak.
   ========================================================================= */


/* ============================================================================
   1. FONT — Inter variable, di-host lokal (CLAUDE.md 6.8)
   Satu berkas mencakup seluruh ketebalan 100-900, termasuk tebal antara
   seperti 450/540/590/620 yang dipakai referensi.
   ========================================================================= */

@font-face {
    font-family: "Inter";
    src: url("InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Fallback ber-metrik — WAJIB menurut CLAUDE.md 6.8.
   Tujuannya: sebelum InterVariable.woff2 selesai diunduh, browser memakai
   Arial yang sudah "dipaksa" bermetrik sama, sehingga tata letak TIDAK
   bergeser saat font asli akhirnya termuat.
   Keempat angka di bawah dibaca langsung dari @font-face "inter Fallback"
   milik referensi, bukan dihitung sendiri. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial");
    ascent-override: 89.79%;
    descent-override: 22.36%;
    line-gap-override: 0%;
    size-adjust: 107.89%;
}


/* ============================================================================
   2. TOKEN YANG TIDAK BERGANTUNG TEMA — bentuk & huruf
   ========================================================================= */

:root {

    /* -- Skala sudut membulat (CLAUDE.md 6.8) --------------------------------
       Referensi memakai 6 tingkat: sm/md/lg/xl/2xl/3xl dari dasar 0.7rem.
       Bootstrap juga punya 6 slot, dipetakan sebagai berikut:
           --bs-border-radius-sm   = sm  referensi
           --bs-border-radius      = md  referensi  (slot dasar Bootstrap)
           --bs-border-radius-lg   = lg  referensi
           --bs-border-radius-xl   = xl  referensi
           --bs-border-radius-xxl  = 2xl referensi   (.rounded-5 memakai ini)
       Tingkat 3xl referensi tidak punya padanan Bootstrap, jadi disimpan
       sebagai token sendiri agar tetap tersedia bila dibutuhkan. */
    --ks-radius: 0.7rem;
    --ks-radius-3xl: 1.5rem;

    --bs-border-radius-sm: calc(var(--ks-radius) - 4px);
    --bs-border-radius: calc(var(--ks-radius) - 2px);
    --bs-border-radius-lg: var(--ks-radius);
    --bs-border-radius-xl: calc(var(--ks-radius) + 4px);
    --bs-border-radius-xxl: 1rem;

    /* -- Stack huruf --------------------------------------------------------
       Urutan meniru referensi: font asli lebih dulu, fallback ber-metrik
       sesudahnya, baru stack bawaan Bootstrap sebagai jaring pengaman
       terakhir. --bs-body-font-family sudah menunjuk ke variabel ini,
       sehingga tidak perlu disetel terpisah. */
    --bs-font-sans-serif: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


/* ============================================================================
   3. TOKEN WARNA — TEMA TERANG
   Satu-satunya tempat warna terang ditulis harfiah di berkas ini.
   ========================================================================= */

:root,
[data-bs-theme="light"] {

    /* -- Token KSPROJECT -- */
    --ks-latar: #ffffff;
    --ks-latar-rgb: 255, 255, 255;

    --ks-permukaan: #ffffff;
    --ks-permukaan-rgb: 255, 255, 255;
    /* Referensi memang menyetel permukaan-hover = #fff pada tema terang,
       jadi tema terang sengaja tidak punya beda warna saat hover. */
    --ks-permukaan-hover: #ffffff;
    --ks-permukaan-hover-rgb: 255, 255, 255;

    --ks-tepi: #e5e7eb;

    --ks-brand: #1452f0;
    --ks-brand-rgb: 20, 82, 240;
    --ks-brand-hover: #1249d8;
    --ks-brand-hover-rgb: 18, 73, 216;

    --ks-positif: #42c772;
    --ks-positif-rgb: 66, 199, 114;
    --ks-positif-hover: #30a159;

    --ks-negatif: #e23939;
    --ks-negatif-rgb: 226, 57, 57;
    --ks-negatif-hover: #c61d1d;

    /* -- Landing sign-in bergaya Stripe ---------------------------------- */
    --ks-login-latar: #f6f9fc;
    --ks-login-panel: #ffffff;
    --ks-login-teks: #0a2540;
    --ks-login-teks-sekunder: #425466;
    --ks-login-aksen: #635bff;
    --ks-login-aksen-hover: #5147e5;
    --ks-login-atas-aksen: #ffffff;
    --ks-login-tepi: #e3e8ee;
    --ks-login-ikon-latar: #ffffff;
    --ks-login-toggle-latar: rgba(255, 255, 255, 0.82);
    --ks-login-toggle-tepi: rgba(10, 37, 64, 0.16);
    --ks-login-shadow: 0 24px 64px rgba(50, 50, 93, 0.16), 0 8px 24px rgba(0, 0, 0, 0.08);
    --ks-login-gradient: linear-gradient(135deg, #635bff 0%, #a960ee 34%, #ff8f70 68%, #80e9ff 100%);

    /* -- Console bergaya Stripe ----------------------------------------- */
    --ks-console-latar: #f6f9fc;
    --ks-console-permukaan: #ffffff;
    --ks-console-permukaan-halus: #f7fafc;
    --ks-console-teks: #0a2540;
    --ks-console-teks-sekunder: #425466;
    --ks-console-aksen: #635bff;
    --ks-console-aksen-hover: #5147e5;
    --ks-console-atas-aksen: #ffffff;
    --ks-console-tepi: #e3e8ee;
    --ks-console-tepi-kuat: #cbd5e1;
    --ks-console-bayangan: 0 1px 2px rgba(50, 50, 93, 0.08), 0 2px 8px rgba(50, 50, 93, 0.06);
    --ks-console-bayangan-naik: 0 8px 24px rgba(50, 50, 93, 0.12);
    --ks-console-sorot: rgba(99, 91, 255, 0.08);

    /* -- Pemetaan ke Bootstrap -- */
    --bs-body-bg: var(--ks-latar);
    --bs-body-bg-rgb: var(--ks-latar-rgb);

    --bs-secondary-bg: var(--ks-permukaan);
    --bs-secondary-bg-rgb: var(--ks-permukaan-rgb);
    --bs-tertiary-bg: var(--ks-permukaan-hover);
    --bs-tertiary-bg-rgb: var(--ks-permukaan-hover-rgb);

    --bs-border-color: var(--ks-tepi);
    --bs-border-color-translucent: var(--ks-tepi);

    --bs-primary: var(--ks-brand);
    --bs-primary-rgb: var(--ks-brand-rgb);
    --bs-success: var(--ks-positif);
    --bs-success-rgb: var(--ks-positif-rgb);
    --bs-danger: var(--ks-negatif);
    --bs-danger-rgb: var(--ks-negatif-rgb);

    --bs-link-color: var(--ks-brand);
    --bs-link-color-rgb: var(--ks-brand-rgb);
    --bs-link-hover-color: var(--ks-brand-hover);
    --bs-link-hover-color-rgb: var(--ks-brand-hover-rgb);

    --bs-focus-ring-color: rgba(var(--ks-brand-rgb), 0.25);
}


/* ============================================================================
   4. TOKEN WARNA — TEMA GELAP
   Ditempatkan SESUDAH blok tema terang. Bootstrap memakai pola yang sama:
   kedua selektor berspesifisitas sama, sehingga yang ditulis belakangan
   menang saat <html data-bs-theme="dark">.
   ========================================================================= */

[data-bs-theme="dark"] {

    /* -- Token KSPROJECT -- */
    /* Catatan riwayat: referensi juga memuat --background:#030712, dan nilai
       itulah yang dipakai di sini atas keputusan pemilik proyek 29 Juli 2026,
       karena memberi pemisahan paling tegas antara latar dan permukaan kartu. */
    --ks-latar: #030712;
    --ks-latar-rgb: 3, 7, 18;

    --ks-permukaan: #1a1f23;
    --ks-permukaan-rgb: 26, 31, 35;
    --ks-permukaan-hover: #242b32;
    --ks-permukaan-hover-rgb: 36, 43, 50;

    --ks-tepi: #1f2937;

    --ks-brand: #0093fd;
    --ks-brand-rgb: 0, 147, 253;
    --ks-brand-hover: #26a3fd;
    --ks-brand-hover-rgb: 38, 163, 253;

    --ks-positif: #3db468;
    --ks-positif-rgb: 61, 180, 104;
    --ks-positif-hover: #5fbe82;

    --ks-negatif: #cb3131;
    --ks-negatif-rgb: 203, 49, 49;
    --ks-negatif-hover: #d05959;

    /* -- Landing sign-in bergaya Stripe ---------------------------------- */
    --ks-login-latar: #030712;
    --ks-login-panel: #111827;
    --ks-login-teks: #f6f9fc;
    --ks-login-teks-sekunder: #a7b2c3;
    --ks-login-aksen: #8b85ff;
    --ks-login-aksen-hover: #a29dff;
    --ks-login-atas-aksen: #ffffff;
    --ks-login-tepi: #293548;
    --ks-login-ikon-latar: #ffffff;
    --ks-login-toggle-latar: rgba(17, 24, 39, 0.76);
    --ks-login-toggle-tepi: rgba(246, 249, 252, 0.22);
    --ks-login-shadow: 0 28px 72px rgba(0, 0, 0, 0.46), 0 8px 24px rgba(0, 0, 0, 0.28);
    --ks-login-gradient: linear-gradient(135deg, #312e81 0%, #6d28d9 36%, #9f3a5e 68%, #155e75 100%);

    /* -- Console bergaya Stripe ----------------------------------------- */
    --ks-console-latar: #030712;
    --ks-console-permukaan: #111827;
    --ks-console-permukaan-halus: #172033;
    --ks-console-teks: #f6f9fc;
    --ks-console-teks-sekunder: #a7b2c3;
    --ks-console-aksen: #8b85ff;
    --ks-console-aksen-hover: #a29dff;
    --ks-console-atas-aksen: #ffffff;
    --ks-console-tepi: #293548;
    --ks-console-tepi-kuat: #3b4960;
    --ks-console-bayangan: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.22);
    --ks-console-bayangan-naik: 0 12px 30px rgba(0, 0, 0, 0.34);
    --ks-console-sorot: rgba(139, 133, 255, 0.14);

    /* -- Pemetaan ke Bootstrap -- */
    --bs-body-bg: var(--ks-latar);
    --bs-body-bg-rgb: var(--ks-latar-rgb);

    --bs-secondary-bg: var(--ks-permukaan);
    --bs-secondary-bg-rgb: var(--ks-permukaan-rgb);
    --bs-tertiary-bg: var(--ks-permukaan-hover);
    --bs-tertiary-bg-rgb: var(--ks-permukaan-hover-rgb);

    --bs-border-color: var(--ks-tepi);
    --bs-border-color-translucent: var(--ks-tepi);

    --bs-primary: var(--ks-brand);
    --bs-primary-rgb: var(--ks-brand-rgb);
    --bs-success: var(--ks-positif);
    --bs-success-rgb: var(--ks-positif-rgb);
    --bs-danger: var(--ks-negatif);
    --bs-danger-rgb: var(--ks-negatif-rgb);

    --bs-link-color: var(--ks-brand);
    --bs-link-color-rgb: var(--ks-brand-rgb);
    --bs-link-hover-color: var(--ks-brand-hover);
    --bs-link-hover-color-rgb: var(--ks-brand-hover-rgb);

    --bs-focus-ring-color: rgba(var(--ks-brand-rgb), 0.25);
}


/* ============================================================================
   5. OVERRIDE KOMPONEN
   ALASAN LAPISAN INI HARUS ADA — hasil pemeriksaan bootstrap.min.css
   pada 29 Juli 2026, bukan dugaan:

     - .btn-primary mengunci #0d6efd secara HARFIAH; var(--bs-primary) muncul
       0 kali di dalamnya. Total ada 19 selektor Bootstrap yang mengunci biru
       bawaannya (#0d6efd sendiri muncul 29 kali di berkas itu). Tanpa lapisan
       ini, seluruh tombol tetap biru Bootstrap walaupun --bs-primary diubah.
     - .card memakai --bs-card-bg: var(--bs-body-bg), sehingga tanpa override
       kartu akan sewarna persis dengan latar halaman.

   Sebaliknya .modal, .toast, dan .dropdown-menu SUDAH mengambil warnanya dari
   var(--bs-body-bg)/var(--bs-border-color), jadi ketiganya ikut berubah
   sendiri dan sengaja tidak disentuh di sini.

   Seluruh blok di bawah hanya menimpa custom property — bukan menulis ulang
   CSS Bootstrap — kecuali blok formulir di ujung, yang alasannya dijelaskan
   di tempatnya.
   ========================================================================= */

.card {
    --bs-card-bg: var(--ks-permukaan);
    --bs-card-border-color: var(--ks-tepi);
}

.btn-primary {
    --bs-btn-bg: var(--ks-brand);
    --bs-btn-border-color: var(--ks-brand);
    --bs-btn-hover-bg: var(--ks-brand-hover);
    --bs-btn-hover-border-color: var(--ks-brand-hover);
    --bs-btn-active-bg: var(--ks-brand-hover);
    --bs-btn-active-border-color: var(--ks-brand-hover);
    --bs-btn-disabled-bg: var(--ks-brand);
    --bs-btn-disabled-border-color: var(--ks-brand);
    --bs-btn-focus-shadow-rgb: var(--ks-brand-rgb);
}

.btn-success {
    --bs-btn-bg: var(--ks-positif);
    --bs-btn-border-color: var(--ks-positif);
    --bs-btn-hover-bg: var(--ks-positif-hover);
    --bs-btn-hover-border-color: var(--ks-positif-hover);
    --bs-btn-active-bg: var(--ks-positif-hover);
    --bs-btn-active-border-color: var(--ks-positif-hover);
    --bs-btn-disabled-bg: var(--ks-positif);
    --bs-btn-disabled-border-color: var(--ks-positif);
    --bs-btn-focus-shadow-rgb: var(--ks-positif-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--ks-negatif);
    --bs-btn-border-color: var(--ks-negatif);
    --bs-btn-hover-bg: var(--ks-negatif-hover);
    --bs-btn-hover-border-color: var(--ks-negatif-hover);
    --bs-btn-active-bg: var(--ks-negatif-hover);
    --bs-btn-active-border-color: var(--ks-negatif-hover);
    --bs-btn-disabled-bg: var(--ks-negatif);
    --bs-btn-disabled-border-color: var(--ks-negatif);
    --bs-btn-focus-shadow-rgb: var(--ks-negatif-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ks-brand);
    --bs-btn-border-color: var(--ks-brand);
    --bs-btn-hover-bg: var(--ks-brand);
    --bs-btn-hover-border-color: var(--ks-brand);
    --bs-btn-active-bg: var(--ks-brand);
    --bs-btn-active-border-color: var(--ks-brand);
    --bs-btn-disabled-color: var(--ks-brand);
    --bs-btn-disabled-border-color: var(--ks-brand);
    --bs-btn-focus-shadow-rgb: var(--ks-brand-rgb);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ks-brand);
}

.list-group {
    --bs-list-group-active-bg: var(--ks-brand);
    --bs-list-group-active-border-color: var(--ks-brand);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ks-brand);
}

/* -- Formulir: SATU-SATUNYA tempat berkas ini menulis properti langsung -----
   Bootstrap mengunci warna fokus dan warna centang formulir sebagai
   DEKLARASI BIASA, bukan sebagai custom property:
       .form-control:focus      -> border-color:#86b7fe; box-shadow:...rgba(13,110,253,.25)
       .form-select:focus       -> sama
       .form-check-input:focus  -> sama
       .form-check-input:checked-> background-color:#0d6efd; border-color:#0d6efd
   Karena tidak ada variabel yang bisa ditimpa, keempatnya mustahil diperbaiki
   dengan cara lain. Nilainya tetap diambil dari token --ks-*, sehingga aturan
   "dilarang menulis warna langsung" (6.8) tetap dipatuhi. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ks-brand);
    box-shadow: 0 0 0 0.25rem rgba(var(--ks-brand-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--ks-brand);
    border-color: var(--ks-brand);
}


/* ============================================================================
   6. LANDING SIGN-IN — bergaya Stripe, terisolasi dari seluruh console
   Seluruh selektor memakai namespace .ks-login-* agar perubahan halaman
   publik ini tidak menggeser dashboard, papan, modal, maupun toast.
   ========================================================================= */

.ks-login-page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--ks-login-latar);
    color: var(--ks-login-teks);
}

.ks-login-backdrop {
    position: absolute;
    inset: 0 0 auto;
    height: clamp(14rem, 38vh, 22rem);
    background: var(--ks-login-gradient);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
    pointer-events: none;
}

.ks-login-header {
    position: relative;
    z-index: 1;
    padding: 1.5rem clamp(0.25rem, 3vw, 1.5rem);
}

.ks-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ks-login-atas-aksen);
    font-size: 0.875rem;
    font-weight: 680;
    letter-spacing: 0.09em;
}

.ks-login-brand-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid var(--ks-login-toggle-tepi);
    border-radius: 0.6rem;
    background: var(--ks-login-toggle-latar);
    font-size: 0.95rem;
    font-weight: 720;
    letter-spacing: 0;
    backdrop-filter: blur(12px);
}

.ks-login-theme-toggle {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--ks-login-toggle-tepi);
    border-radius: 0.7rem;
    background: var(--ks-login-toggle-latar);
    color: var(--ks-login-atas-aksen);
    backdrop-filter: blur(12px);
    transition: transform 160ms ease, background-color 160ms ease;
}

.ks-login-theme-toggle:hover {
    transform: translateY(-1px);
}

.ks-login-theme-toggle:focus-visible {
    outline: 3px solid var(--ks-login-atas-aksen);
    outline-offset: 3px;
}

.ks-login-main {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: calc(100vh - 5.5rem);
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2.75rem, 10vh, 7rem) 1rem 3rem;
}

.ks-login-panel {
    width: min(100%, 27.5rem);
    overflow: hidden;
    border: 1px solid var(--ks-login-tepi);
    border-radius: 0.85rem;
    background: var(--ks-login-panel);
    box-shadow: var(--ks-login-shadow);
}

.ks-login-panel-body {
    padding: clamp(2rem, 6vw, 3rem);
}

.ks-login-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--ks-login-aksen);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ks-login-panel h1 {
    margin: 0;
    color: var(--ks-login-teks);
    font-size: clamp(1.75rem, 5vw, 2.15rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.18;
}

.ks-login-intro {
    margin: 0.85rem 0 2rem;
    color: var(--ks-login-teks-sekunder);
    font-size: 0.95rem;
    line-height: 1.65;
}

.ks-login-google {
    display: grid;
    grid-template-columns: 2rem 1fr 1.125rem;
    min-height: 3.25rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--ks-login-aksen);
    border-radius: 0.55rem;
    background: var(--ks-login-aksen);
    color: var(--ks-login-atas-aksen);
    font-size: 0.925rem;
    font-weight: 620;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.ks-login-google:hover {
    border-color: var(--ks-login-aksen-hover);
    background: var(--ks-login-aksen-hover);
    color: var(--ks-login-atas-aksen);
    transform: translateY(-1px);
}

.ks-login-google:focus-visible {
    outline: 3px solid var(--ks-login-aksen);
    outline-offset: 3px;
}

.ks-login-google-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.38rem;
    background: var(--ks-login-ikon-latar);
}

.ks-login-google-arrow {
    justify-self: end;
}

.ks-login-note {
    display: grid;
    grid-template-columns: 1.125rem 1fr;
    align-items: start;
    gap: 0.7rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ks-login-tepi);
    color: var(--ks-login-teks-sekunder);
}

.ks-login-note svg {
    margin-top: 0.1rem;
    color: var(--ks-login-aksen);
}

.ks-login-note p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .ks-login-header {
        padding-top: 1rem;
    }

    .ks-login-main {
        min-height: calc(100vh - 4.5rem);
        padding-top: 2.75rem;
    }

    .ks-login-panel-body {
        padding: 1.75rem 1.4rem;
    }
}

@media (max-height: 620px) and (min-width: 576px) {
    .ks-login-main {
        padding-top: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-login-theme-toggle,
    .ks-login-google {
        transition: none;
    }
}


/* ============================================================================
   9. MODAL TIKET PROFESIONAL
   Terisolasi lewat .ks-ticket-*; modal Bootstrap lain tidak terpengaruh.
   ============================================================================ */

.ks-ticket-modal .modal-dialog {
    width: min(72rem, calc(100% - 2rem));
    max-width: 72rem;
}

.ks-ticket-create-modal .modal-dialog {
    max-width: 50rem;
}

.ks-ticket-modal-content {
    overflow: hidden;
    border-color: var(--ks-console-tepi);
    border-radius: 1rem;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    box-shadow: var(--ks-console-bayangan-naik);
}

.ks-ticket-modal-header {
    align-items: flex-start;
    padding: 1.15rem 1.35rem;
    border-bottom-color: var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
}

.ks-ticket-modal-heading {
    min-width: 0;
    padding-right: 1rem;
}

.ks-ticket-modal-eyebrow {
    margin-bottom: 0.25rem;
    color: var(--ks-console-aksen);
    font-size: 0.67rem;
    font-weight: 680;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ks-ticket-modal-title {
    overflow-wrap: anywhere;
    color: var(--ks-console-teks);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 660;
    line-height: 1.3;
}

.ks-ticket-modal-body {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.35rem 1.5rem;
    background: var(--ks-console-permukaan-halus);
}

.ks-ticket-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ks-ticket-status-badge {
    border: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    font-weight: 630;
}

.ks-ticket-section {
    padding: 1.15rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.8rem;
    background: var(--ks-console-permukaan);
    box-shadow: var(--ks-console-bayangan);
}

.ks-ticket-section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ks-ticket-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
    margin-bottom: 1rem;
}

.ks-ticket-section-heading-row .ks-ticket-section-heading {
    margin-bottom: 0;
}

.ks-ticket-section-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    background: var(--ks-console-sorot);
    color: var(--ks-console-aksen);
    font-weight: 700;
}

.ks-ticket-section-title {
    margin: 0;
    color: var(--ks-console-teks);
    font-size: 0.9rem;
    font-weight: 660;
    line-height: 1.35;
}

.ks-ticket-section-caption {
    margin: 0.16rem 0 0;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.72rem;
    line-height: 1.45;
}

.ks-ticket-description {
    color: var(--ks-console-teks);
    font-size: 0.9rem;
    line-height: 1.7;
}

.ks-ticket-description > :last-child {
    margin-bottom: 0;
}

.ks-ticket-description-heading {
    margin: 1.1rem 0 0.45rem;
    color: var(--ks-console-teks);
    font-size: 0.92rem;
    font-weight: 660;
}

.ks-ticket-description-heading:first-child {
    margin-top: 0;
}

.ks-ticket-description-paragraph {
    margin: 0 0 0.8rem;
    white-space: pre-wrap;
}

.ks-ticket-description-list {
    margin: 0 0 0.9rem;
    padding-left: 1.35rem;
}

.ks-ticket-description-list li + li {
    margin-top: 0.42rem;
}

.ks-ticket-checklist {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.ks-ticket-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.ks-ticket-checklist input {
    margin-top: 0.32rem;
    accent-color: var(--ks-console-aksen);
}

.ks-ticket-checklist .is-complete {
    color: var(--ks-console-teks-sekunder);
    text-decoration: line-through;
}

.ks-ticket-empty-state,
.ks-ticket-audit-state {
    padding: 1rem;
    border: 1px dashed var(--ks-console-tepi-kuat);
    border-radius: 0.65rem;
    background: var(--ks-console-permukaan-halus);
    color: var(--ks-console-teks-sekunder);
    font-size: 0.8rem;
    text-align: center;
}

.ks-ticket-image-empty p {
    margin-top: 0.25rem;
}

.ks-ticket-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.ks-ticket-image-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.7rem;
    background: var(--ks-console-permukaan-halus);
}

.ks-ticket-image-link {
    display: block;
    overflow: hidden;
    background: var(--ks-console-permukaan);
}

.ks-ticket-image {
    display: block;
    width: 100%;
    height: 10rem;
    object-fit: cover;
    transition: transform 160ms ease;
}

.ks-ticket-image-link:hover .ks-ticket-image {
    transform: scale(1.02);
}

.ks-ticket-image-link:focus-visible {
    outline: 3px solid var(--ks-console-aksen);
    outline-offset: -3px;
}

.ks-ticket-image-info {
    padding: 0.75rem 0.8rem 0.45rem;
}

.ks-ticket-image-actions {
    display: flex;
    gap: 0.45rem;
    padding: 0 0.8rem 0.8rem;
}

.ks-ticket-image-confirm {
    padding: 0.75rem 0.8rem;
    border-top: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
}

.ks-ticket-metadata > div {
    min-width: 0;
}

.ks-ticket-metadata .fw-medium {
    overflow-wrap: anywhere;
    color: var(--ks-console-teks);
    font-size: 0.82rem;
}

.ks-ticket-sign-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.ks-ticket-sign-list > div {
    min-height: 3.3rem;
    margin: 0 !important;
    padding: 0.75rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.65rem;
    background: var(--ks-console-permukaan-halus);
}

.ks-ticket-audit-timeline {
    position: relative;
    display: grid;
    gap: 0.9rem;
    padding-left: 1.4rem;
}

.ks-ticket-audit-timeline::before {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.34rem;
    width: 1px;
    background: var(--ks-console-tepi-kuat);
    content: "";
}

.ks-ticket-audit-item {
    position: relative;
}

.ks-ticket-audit-marker {
    position: absolute;
    top: 1.05rem;
    left: -1.38rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--ks-console-permukaan);
    border-radius: 50%;
    background: var(--ks-console-aksen);
    box-shadow: 0 0 0 1px var(--ks-console-tepi-kuat);
}

.ks-ticket-audit-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.7rem;
    background: var(--ks-console-permukaan-halus);
}

.ks-ticket-audit-change {
    margin-top: 0.8rem;
}

.ks-ticket-audit-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.ks-ticket-audit-value {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.55rem;
    background: var(--ks-console-permukaan);
}

.ks-ticket-audit-value.is-after {
    border-color: var(--ks-console-tepi-kuat);
}

.ks-ticket-audit-value-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ks-ticket-audit-text {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.ks-ticket-audit-legacy {
    margin-top: 0.7rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks-sekunder);
    font-size: 0.72rem;
}

.ks-ticket-audit-state.is-error {
    color: var(--ks-negatif);
}

.ks-ticket-editor {
    overflow: hidden;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.7rem;
    background: var(--ks-console-permukaan);
}

.ks-ticket-editor:focus-within {
    border-color: var(--ks-console-aksen);
    box-shadow: 0 0 0 0.2rem var(--ks-console-sorot);
}

.ks-ticket-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan-halus);
}

.ks-ticket-editor-button {
    min-height: 2rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.7rem;
    font-weight: 620;
}

.ks-ticket-editor-button:hover,
.ks-ticket-editor-button[aria-pressed="true"] {
    border-color: var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
}

.ks-ticket-editor-button:focus-visible {
    outline: 2px solid var(--ks-console-aksen);
    outline-offset: 1px;
}

.ks-ticket-editor-textarea {
    min-height: 11rem;
    resize: vertical;
    border: 0;
    border-radius: 0;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    line-height: 1.65;
}

.ks-ticket-editor-textarea:focus {
    background: var(--ks-console-permukaan);
    box-shadow: none;
}

.ks-ticket-editor-preview {
    min-height: 11rem;
    padding: 0.85rem 0.9rem;
    background: var(--ks-console-permukaan);
}

.ks-ticket-edit-form {
    display: grid;
    gap: 0;
    padding: 1.15rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.8rem;
    background: var(--ks-console-permukaan);
}

.ks-ticket-edit-intro {
    margin: -1.15rem -1.15rem 1.1rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan-halus);
    color: var(--ks-console-teks-sekunder);
    font-size: 0.76rem;
}

.ks-ticket-edit-intro .fw-semibold {
    color: var(--ks-console-teks);
}

.ks-ticket-unsaved {
    padding: 0.85rem 1rem;
    border: 1px solid var(--ks-negatif);
    border-radius: 0.7rem;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    font-size: 0.78rem;
    box-shadow: var(--ks-console-bayangan);
}

.ks-ticket-upload-preview {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.6rem;
    background: var(--ks-console-permukaan-halus);
}

.ks-ticket-upload-preview-image {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 3.5rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.5rem;
    object-fit: cover;
}

.ks-ticket-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.85rem 1.35rem;
    border-top-color: var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
}

.ks-ticket-footer-secondary {
    display: flex;
    gap: 0.55rem;
    margin-right: auto;
}

.ks-ticket-workflow-note {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .ks-ticket-modal .modal-dialog,
    .ks-ticket-create-modal .modal-dialog {
        width: calc(100% - 1rem);
        max-width: none;
        min-height: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .ks-ticket-modal-content {
        max-height: calc(100vh - 1rem);
        border-radius: 0.8rem;
    }

    .ks-ticket-modal-header,
    .ks-ticket-modal-body,
    .ks-ticket-modal-footer {
        padding-right: 0.9rem;
        padding-left: 0.9rem;
    }

    .ks-ticket-modal-body {
        gap: 0.75rem;
        padding-top: 0.9rem;
        padding-bottom: 1rem;
    }

    .ks-ticket-section {
        padding: 0.9rem;
    }

    .ks-ticket-section-heading-row {
        display: grid;
    }

    .ks-ticket-section-heading-row > .btn {
        justify-self: start;
    }

    .ks-ticket-gallery,
    .ks-ticket-sign-list,
    .ks-ticket-audit-comparison {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-ticket-image {
        height: 12rem;
    }

    .ks-ticket-editor-toolbar {
        gap: 0.25rem;
    }

    .ks-ticket-editor-button.ms-auto {
        width: 100%;
        margin-left: 0 !important;
    }

    .ks-ticket-modal-footer > .btn,
    .ks-ticket-modal-footer > .ks-ticket-footer-secondary {
        width: 100%;
    }

    .ks-ticket-footer-secondary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-right: 0;
    }

    .ks-ticket-modal-footer > .btn {
        order: 2;
    }

    .ks-ticket-workflow-note {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}

@media (max-width: 399.98px) {
    .ks-ticket-footer-secondary {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-ticket-image-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-ticket-image {
        transition: none;
    }

    .ks-ticket-image-link:hover .ks-ticket-image {
        transform: none;
    }
}


/* ============================================================================
   7. CONSOLE — dashboard bergaya Stripe
   Namespace .ks-console-* menjaga landing, papan, callback, dan halaman status
   tetap utuh. Komponen memakai token dua tema di atas, bukan warna harfiah.
   ========================================================================= */

.ks-console-page {
    min-height: 100vh;
    background: var(--ks-console-latar);
    color: var(--ks-console-teks);
}

.ks-console-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 15.5rem minmax(0, 1fr);
}

.ks-console-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    height: 100vh;
    flex-direction: column;
    border-right: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
}

.ks-console-brand {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--ks-console-tepi);
    color: var(--ks-console-teks);
    font-size: 0.82rem;
    font-weight: 720;
    letter-spacing: 0.09em;
    text-decoration: none;
}

.ks-console-brand:hover {
    color: var(--ks-console-teks);
}

.ks-console-brand-mark {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.55rem;
    background: var(--ks-console-aksen);
    color: var(--ks-console-atas-aksen);
    font-size: 0.9rem;
    font-weight: 740;
    letter-spacing: 0;
    box-shadow: var(--ks-console-bayangan);
}

.ks-console-nav {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
}

.ks-console-nav-label {
    margin: 0.8rem 0.65rem 0.35rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ks-console-nav-link {
    display: flex;
    min-height: 2.55rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.84rem;
    font-weight: 570;
    text-align: left;
    text-decoration: none;
}

.ks-console-nav-link:hover,
.ks-console-nav-link[aria-current="page"] {
    background: var(--ks-console-sorot);
    color: var(--ks-console-aksen);
}

.ks-console-nav-link svg {
    flex: 0 0 auto;
}

.ks-console-sidebar-account {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid var(--ks-console-tepi);
}

.ks-console-sidebar-account strong,
.ks-console-sidebar-account span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-console-sidebar-account strong {
    color: var(--ks-console-teks);
    font-size: 0.8rem;
    font-weight: 620;
}

.ks-console-sidebar-account span {
    margin-top: 0.15rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.72rem;
}

.ks-console-content {
    min-width: 0;
}

.ks-console-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
}

.ks-console-breadcrumb {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.8rem;
}

.ks-console-breadcrumb strong {
    overflow: hidden;
    color: var(--ks-console-teks);
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-console-account {
    flex: 0 0 auto;
}

.ks-console-avatar {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--ks-console-aksen);
    border-radius: 50%;
    background: var(--ks-console-aksen);
    color: var(--ks-console-atas-aksen);
    font-size: 0.72rem;
    font-weight: 720;
    letter-spacing: 0.035em;
    box-shadow: var(--ks-console-bayangan);
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.ks-console-avatar:hover,
.ks-console-avatar[aria-expanded="true"] {
    border-color: var(--ks-console-aksen-hover);
    background: var(--ks-console-aksen-hover);
    box-shadow: var(--ks-console-bayangan-naik);
    transform: translateY(-1px);
}

.ks-console-avatar:focus-visible {
    outline: 3px solid var(--ks-console-aksen);
    outline-offset: 3px;
}

.ks-console-account-menu {
    width: 17.5rem;
    margin-top: 0.55rem !important;
    padding: 0.5rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.75rem;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    box-shadow: var(--ks-console-bayangan-naik);
}

.ks-console-account-identity {
    min-width: 0;
    padding: 0.6rem 0.7rem 0.7rem;
    border-bottom: 1px solid var(--ks-console-tepi);
}

.ks-console-account-identity strong,
.ks-console-account-identity span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-console-account-identity strong {
    color: var(--ks-console-teks);
    font-size: 0.82rem;
    font-weight: 640;
}

.ks-console-account-identity span {
    margin-top: 0.18rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.7rem;
}

.ks-console-account-role {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.75rem;
    font-weight: 560;
}

.ks-console-account-role .badge {
    max-width: 9rem;
    overflow: hidden;
    color: var(--ks-console-teks) !important;
    font-size: 0.66rem;
    font-weight: 640;
    text-overflow: ellipsis;
}

.ks-console-account-action {
    display: flex;
    min-height: 2.55rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.78rem;
    font-weight: 560;
}

.ks-console-account-action:hover,
.ks-console-account-action:focus {
    background: var(--ks-console-sorot);
    color: var(--ks-console-aksen);
}

.ks-console-account-action svg {
    flex: 0 0 auto;
}

.ks-console-account-menu .dropdown-divider {
    margin: 0.35rem 0;
    border-color: var(--ks-console-tepi);
}

.ks-console-account-logout,
.ks-console-account-logout:hover,
.ks-console-account-logout:focus {
    color: var(--ks-negatif);
}

.ks-console-main {
    width: min(100%, 90rem);
    margin: 0 auto;
    padding: 2rem;
}

.ks-console-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ks-console-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--ks-console-aksen);
    font-size: 0.7rem;
    font-weight: 720;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ks-console-page-heading h1 {
    margin: 0;
    color: var(--ks-console-teks);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

.ks-console-page-heading p {
    max-width: 42rem;
    margin: 0.45rem 0 0;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.88rem;
    line-height: 1.6;
}

.ks-console-primary-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ks-console-page .btn {
    font-size: 0.8rem;
    font-weight: 620;
}

.ks-console-page .btn-primary {
    --bs-btn-bg: var(--ks-console-aksen);
    --bs-btn-border-color: var(--ks-console-aksen);
    --bs-btn-hover-bg: var(--ks-console-aksen-hover);
    --bs-btn-hover-border-color: var(--ks-console-aksen-hover);
}

.ks-console-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.75rem;
    background: var(--ks-console-permukaan);
    box-shadow: var(--ks-console-bayangan);
}

.ks-console-profile-name {
    overflow: hidden;
    color: var(--ks-console-teks);
    font-size: 0.88rem;
    font-weight: 630;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-console-profile-email {
    overflow: hidden;
    margin-top: 0.15rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-console-section {
    margin-top: 1.5rem;
}

.ks-console-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ks-console-section-heading h2 {
    margin: 0;
    color: var(--ks-console-teks);
    font-size: 0.95rem;
    font-weight: 640;
}

.ks-console-section-heading p {
    margin: 0.25rem 0 0;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.76rem;
}

.ks-console-page [data-ks-ringkasan-tiket] > h2 {
    color: var(--ks-console-teks);
    font-size: 0.95rem;
}

.ks-console-page [data-ks-ringkasan-tiket] .row {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.65rem;
}

.ks-console-page [data-ks-ringkasan-tiket] .card {
    border-color: var(--ks-console-tepi);
    border-radius: 0.7rem;
    background: var(--ks-console-permukaan);
    box-shadow: var(--ks-console-bayangan);
}

.ks-console-page [data-ks-ringkasan-tiket] .small {
    color: var(--ks-console-teks-sekunder) !important;
    font-size: 0.7rem;
    font-weight: 550;
}

.ks-console-page [data-ks-ringkasan-tiket] .h4 {
    color: var(--ks-console-teks);
    font-size: 1.45rem;
    font-weight: 650;
    letter-spacing: -0.03em;
}

.ks-console-page #ks-manajemen-akun .card {
    overflow: hidden;
    border-color: var(--ks-console-tepi);
    border-radius: 0.75rem;
    background: var(--ks-console-permukaan);
    box-shadow: var(--ks-console-bayangan);
}

.ks-console-page #ks-manajemen-akun .card-body {
    padding: 0;
}

.ks-console-page #ks-manajemen-akun .ks-console-table-title {
    margin: 0;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--ks-console-tepi);
    color: var(--ks-console-teks);
    font-size: 0.88rem;
    font-weight: 640;
}

.ks-console-page div.dt-container {
    padding-bottom: 1rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.78rem;
}

.ks-console-page div.dt-container .dt-layout-row {
    margin: 0;
    padding: 0.85rem 1.1rem;
}

.ks-console-page div.dt-container .dt-layout-row:not(.dt-layout-table) {
    border-bottom: 1px solid var(--ks-console-tepi);
}

.ks-console-page div.dt-container .dt-layout-row:last-child {
    border-top: 1px solid var(--ks-console-tepi);
    border-bottom: 0;
}

.ks-console-page div.dt-container label {
    color: var(--ks-console-teks-sekunder);
    font-size: 0.74rem;
    font-weight: 550;
}

.ks-console-page div.dt-container .dt-input {
    min-height: 2.25rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.5rem;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    font-size: 0.78rem;
}

.ks-console-page div.dt-container .dt-search .dt-input {
    width: min(15rem, 52vw);
    margin-left: 0.45rem;
}

.ks-console-page table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}

.ks-console-page table.dataTable > thead > tr > th {
    padding: 0.72rem 0.8rem;
    border-bottom: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan-halus);
    color: var(--ks-console-teks-sekunder);
    font-size: 0.68rem;
    font-weight: 680;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ks-console-page table.dataTable > tbody > tr {
    background: var(--ks-console-permukaan);
}

.ks-console-page table.dataTable > tbody > tr:hover {
    background: var(--ks-console-sorot);
}

.ks-console-page table.dataTable > tbody > tr > td {
    padding: 0.78rem 0.8rem;
    border-bottom: 1px solid var(--ks-console-tepi);
    color: var(--ks-console-teks);
    vertical-align: middle;
}

.ks-console-page table.dataTable > tbody > tr:last-child > td {
    border-bottom: 0;
}

.ks-console-page table.dataTable td .text-body-secondary {
    color: var(--ks-console-teks-sekunder) !important;
}

.ks-console-page div.dt-container .dt-paging .dt-paging-button {
    min-width: 2rem;
    margin: 0 0.1rem;
    border: 1px solid transparent !important;
    border-radius: 0.45rem;
    background: transparent !important;
    color: var(--ks-console-teks-sekunder) !important;
    font-size: 0.75rem;
}

.ks-console-page div.dt-container .dt-paging .dt-paging-button.current,
.ks-console-page div.dt-container .dt-paging .dt-paging-button:hover {
    border-color: var(--ks-console-tepi) !important;
    background: var(--ks-console-sorot) !important;
    color: var(--ks-console-aksen) !important;
}

.ks-console-page table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
    border: 0;
    background: var(--ks-console-aksen);
    box-shadow: none;
}

.ks-console-page ul.dtr-details {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ks-console-page ul.dtr-details li {
    display: grid;
    grid-template-columns: minmax(6rem, 0.35fr) 1fr;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--ks-console-tepi);
}

.ks-console-page ul.dtr-details li:last-child {
    border-bottom: 0;
}

.ks-console-page span.dtr-title {
    color: var(--ks-console-teks-sekunder);
    font-size: 0.7rem;
    font-weight: 650;
}

.ks-console-page span.dtr-data {
    min-width: 0;
}

.ks-console-page .dt-empty {
    padding: 2rem !important;
    color: var(--ks-console-teks-sekunder) !important;
    text-align: center;
}

@media (max-width: 991.98px) {
    .ks-console-shell {
        display: block;
    }

    .ks-console-sidebar {
        position: sticky;
        width: 100%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ks-console-tepi);
    }

    .ks-console-brand {
        min-height: 3.75rem;
        border-bottom: 0;
    }

    .ks-console-nav {
        display: flex;
        overflow-x: auto;
        padding: 0 0.75rem 0.65rem;
        scrollbar-width: thin;
    }

    .ks-console-nav-label,
    .ks-console-sidebar-account {
        display: none;
    }

    .ks-console-nav-link {
        flex: 0 0 auto;
        min-height: 2.25rem;
        padding: 0.45rem 0.65rem;
    }

    .ks-console-topbar {
        min-height: 3.75rem;
        padding: 0 1rem;
    }

    .ks-console-main {
        padding: 1.25rem 1rem 2rem;
    }
}

@media (max-width: 575.98px) {
    .ks-console-account-menu {
        width: min(17.5rem, calc(100vw - 2rem));
    }

    .ks-console-page-heading {
        display: block;
    }

    .ks-console-primary-actions {
        display: grid;
        margin-top: 1rem;
    }

    .ks-console-profile {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-console-profile > div:last-child {
        justify-self: start;
    }

    .ks-console-page div.dt-container .dt-layout-row {
        display: grid;
        gap: 0.7rem;
        padding: 0.75rem;
    }

    .ks-console-page div.dt-container .dt-layout-cell {
        width: 100%;
        text-align: left !important;
    }

    .ks-console-page div.dt-container .dt-search .dt-input {
        width: 100%;
        margin: 0.35rem 0 0;
    }

    .ks-console-page ul.dtr-details li {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-console-avatar {
        transition: none;
    }
}


/* ============================================================================
   8. PAPAN PROJECT — shell console + kanban horizontal
   Seluruh selector diisolasi oleh .ks-board-page/.ks-board-* agar halaman
   lain tidak berubah. Warna hanya berasal dari token console dua tema.
   ========================================================================= */

.ks-board-main {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

.ks-board-filter {
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid var(--ks-console-tepi);
    border-radius: 0.75rem;
    background: var(--ks-console-permukaan);
    box-shadow: var(--ks-console-bayangan);
}

.ks-board-filter-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.ks-board-search {
    width: min(34rem, 100%);
    min-width: 0;
}

.ks-board-filter .form-label {
    margin-bottom: 0.35rem;
    color: var(--ks-console-teks-sekunder);
    font-size: 0.72rem;
    font-weight: 620;
}

.ks-board-search-control {
    position: relative;
}

.ks-board-search-control svg {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: 2;
    color: var(--ks-console-teks-sekunder);
    pointer-events: none;
    transform: translateY(-50%);
}

.ks-board-search-control .form-control {
    padding-left: 2.35rem;
}

.ks-board-filter .form-control,
.ks-board-filter .form-select {
    min-height: 2.45rem;
    border-color: var(--ks-console-tepi);
    background-color: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    font-size: 0.8rem;
}

.ks-board-filter .form-control:focus,
.ks-board-filter .form-select:focus {
    border-color: var(--ks-console-aksen);
    box-shadow: 0 0 0 0.2rem var(--ks-console-sorot);
}

.ks-board-filter-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ks-board-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.ks-board-filter-actions [aria-expanded="true"] {
    border-color: var(--ks-console-aksen);
    background: var(--ks-console-sorot);
    color: var(--ks-console-aksen);
}

.ks-board-filter-advanced {
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--ks-console-tepi);
    background: var(--ks-console-permukaan-halus);
}

.ks-board-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid var(--ks-console-tepi);
    color: var(--ks-console-teks-sekunder);
    font-size: 0.72rem;
}

.ks-board-filter-summary [data-ks-ringkasan-filter] {
    color: var(--ks-console-teks);
    font-weight: 620;
}

.ks-board-workspace {
    min-width: 0;
}

.ks-board-workspace > .row {
    flex-wrap: nowrap;
    margin-right: 0;
    margin-left: 0;
    padding: 0.15rem 0.05rem 1rem;
    overflow-x: auto;
    scrollbar-color: var(--ks-console-tepi-kuat) var(--ks-console-permukaan-halus);
    scrollbar-width: thin;
}

.ks-board-workspace [data-ks-tahapan] {
    width: 20rem;
    min-width: 20rem;
    max-width: 20rem;
    flex: 0 0 20rem;
}

.ks-board-workspace [data-ks-tahapan] > .card {
    min-height: 19rem;
    overflow: hidden;
    border-color: var(--ks-console-tepi);
    border-radius: 0.75rem;
    background: var(--ks-console-permukaan-halus);
    box-shadow: var(--ks-console-bayangan);
}

.ks-board-workspace [data-ks-tahapan] > .card > .card-header {
    min-height: 3.25rem;
    padding: 0.8rem 0.9rem;
    border-bottom-color: var(--ks-console-tepi);
    background: var(--ks-console-permukaan);
}

.ks-board-workspace [data-ks-tahapan] > .card > .card-header h2 {
    overflow: hidden;
    color: var(--ks-console-teks);
    font-size: 0.82rem;
    font-weight: 640;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-board-workspace [data-ks-tahapan] > .card > .card-header .badge {
    min-width: 1.75rem;
    border-color: var(--ks-console-tepi) !important;
    color: var(--ks-console-teks) !important;
    font-size: 0.68rem;
}

.ks-board-workspace [data-ks-wadah-tiket] {
    min-height: 14.5rem;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.ks-board-workspace [data-ks-wadah-tiket][data-ks-tujuan-drag="true"] {
    background: var(--ks-console-sorot);
    box-shadow: inset 0 0 0 2px var(--ks-console-aksen);
}

.ks-board-workspace [data-ks-wadah-tiket] > .card {
    border-color: var(--ks-console-tepi);
    border-radius: 0.65rem;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    box-shadow: var(--ks-console-bayangan);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ks-board-workspace [data-ks-wadah-tiket] > .card:hover {
    border-color: var(--ks-console-tepi-kuat);
    box-shadow: var(--ks-console-bayangan-naik);
    transform: translateY(-1px);
}

.ks-board-workspace [data-ks-wadah-tiket] > .card:focus-visible {
    outline: 3px solid var(--ks-console-aksen);
    outline-offset: 2px;
    box-shadow: var(--ks-console-bayangan-naik);
}

.ks-board-workspace [data-ks-wadah-tiket] > .card[draggable="true"] {
    cursor: grab;
}

.ks-board-workspace [data-ks-wadah-tiket] > .card[draggable="true"]:active {
    cursor: grabbing;
}

.ks-board-workspace [data-ks-wadah-tiket] > .card .card-body > .fw-semibold {
    color: var(--ks-console-teks);
    font-size: 0.84rem;
    font-weight: 630 !important;
}

.ks-board-workspace [data-ks-wadah-tiket] > .card .text-body-secondary {
    color: var(--ks-console-teks-sekunder) !important;
    font-size: 0.7rem;
}

.ks-board-workspace [data-ks-wadah-tiket] > .card .badge {
    font-size: 0.62rem;
    font-weight: 620;
}

.ks-board-workspace [data-ks-penanda-urutan] {
    border-color: var(--ks-console-aksen) !important;
}

.ks-board-workspace > .card {
    border-color: var(--ks-console-tepi);
    border-radius: 0.75rem;
    background: var(--ks-console-permukaan);
    color: var(--ks-console-teks);
    box-shadow: var(--ks-console-bayangan);
}

@media (max-width: 991.98px) {
    .ks-board-main {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .ks-board-filter-toolbar {
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .ks-board-filter-toolbar {
        display: grid;
        padding: 0.9rem;
    }

    .ks-board-search {
        width: 100%;
    }

    .ks-board-filter-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ks-board-filter-advanced {
        padding: 0.9rem;
    }

    .ks-board-filter-summary {
        display: grid;
        gap: 0.25rem;
        padding: 0.7rem 0.9rem;
    }

    .ks-board-workspace [data-ks-tahapan] {
        width: min(18rem, calc(100vw - 3rem));
        min-width: min(18rem, calc(100vw - 3rem));
        max-width: min(18rem, calc(100vw - 3rem));
        flex-basis: min(18rem, calc(100vw - 3rem));
    }
}

@media (max-width: 399.98px) {
    .ks-board-filter-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-board-workspace [data-ks-wadah-tiket],
    .ks-board-workspace [data-ks-wadah-tiket] > .card {
        transition: none;
    }

    .ks-board-workspace [data-ks-wadah-tiket] > .card:hover {
        transform: none;
    }
}