/* ==========================================================================
   VELOSCRIPT — Design System
   Satu-satunya lapisan tampilan bersama untuk seluruh halaman.
   Dimuat SETELAH <style> bawaan tiap template, jadi nilai di sini menang.
   Banyak markup lama memakai atribut style="..." inline, karena itu
   properti yang bentrok ditandai !important secara sengaja.

   Prinsip: pembaca utama berusia 30+ dan mengisi formulir panjang.
   - teks besar & kontras tinggi
   - label kalimat biasa, bukan KAPITAL KECIL
   - target sentuh minimal 48px
   - fokus keyboard selalu terlihat
   ========================================================================== */

:root {
    /* Warna inti */
    --vs-navy:         #0f4c81;
    --vs-navy-dark:    #0b3a63;
    --vs-navy-soft:    #e8f0f8;
    --vs-amber:        #f59e0b;
    --vs-amber-dark:   #b45309;
    --vs-amber-soft:   #fef3c7;

    /* Permukaan */
    --vs-bg:           #eef2f7;
    --vs-surface:      #ffffff;
    --vs-surface-alt:  #f8fafc;
    --vs-border:       #d6dfe9;
    --vs-border-strong:#b9c7d6;

    /* Teks */
    --vs-text:         #1e293b;
    --vs-text-muted:   #5b6b7f;
    --vs-text-faint:   #8a98a8;

    /* Status */
    --vs-danger:       #c0392b;
    --vs-danger-soft:  #fdecea;
    --vs-success:      #15803d;
    --vs-success-soft: #e7f6ec;

    /* Bentuk & bayangan */
    --vs-radius:       12px;
    --vs-radius-lg:    16px;
    --vs-shadow-sm:    0 1px 2px rgba(15, 42, 74, .06);
    --vs-shadow:       0 2px 10px rgba(15, 42, 74, .08);
    --vs-shadow-lg:    0 16px 40px rgba(15, 42, 74, .16);

    /* Ukuran kendali form — kunci keterbacaan */
    --vs-control-h:    50px;
    --vs-font-base:    16px;
    --vs-font-label:   14.5px;
}

/* --------------------------------------------------------------------------
   1. Dasar
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-size: var(--vs-font-base);
    line-height: 1.6;
    color: var(--vs-text) !important;
    background-color: var(--vs-bg) !important;
    -webkit-font-smoothing: antialiased;
}

/* Font lama (Livvic/Madimi One) dipakai di ratusan atribut inline.
   Disamakan ke Inter agar tampilan konsisten tanpa menyunting markup. */
body, body * {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body i, body .fa, body .fas, body .far, body .fab, body .fa-solid, body .fa-regular, body .fa-brands {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
}

h1, h2, h3, h4, h5, h6 {
    font-style: normal !important;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--vs-text);
}

a { color: var(--vs-navy); }

/* Fokus keyboard — wajib terlihat di seluruh aplikasi */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(15, 76, 129, .45) !important;
    outline-offset: 2px !important;
}

::selection { background: var(--vs-amber-soft); color: var(--vs-text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #a8b8c8; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--vs-navy); }

/* --------------------------------------------------------------------------
   2. Kerangka halaman
   -------------------------------------------------------------------------- */

.app-layout { display: flex; min-height: 100vh; align-items: stretch; }

.main-content,
.main {
    flex: 1;
    min-width: 0;                      /* cegah grid/flex meluber horizontal */
    background-color: var(--vs-bg) !important;
    padding: 32px clamp(16px, 4vw, 40px) 64px !important;
}

.page-header { margin-bottom: 28px; }
.page-header h2,
.page-title {
    font-size: clamp(24px, 3vw, 30px) !important;
    font-weight: 700 !important;
    color: var(--vs-navy) !important;
    text-shadow: none !important;
    font-style: normal !important;
}
.page-header p,
.page-sub {
    font-size: 16px !important;
    color: var(--vs-text-muted) !important;
    margin-top: 6px !important;
    max-width: 70ch;
}

/* --------------------------------------------------------------------------
   3. Sidebar (halaman formulir draft)
   -------------------------------------------------------------------------- */

.app-layout .sidebar {
    width: 284px !important;
    min-width: 284px !important;
    background: var(--vs-surface) !important;
    border-right: 1px solid var(--vs-border) !important;
    box-shadow: var(--vs-shadow-sm) !important;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.app-layout .sidebar-header {
    background: var(--vs-navy) !important;
    padding: 24px 20px !important;
    text-align: center;
}
.app-layout .sidebar-header .logo-icon img { width: 56px !important; height: auto !important; }
.app-layout .sidebar-header .logo-text {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
    color: #ffffff !important;
    font-style: normal !important;
}
.app-layout .sidebar-header p { color: #c7dcef !important; font-size: 13px !important; margin-top: 4px !important; }

.app-layout .sidebar-nav { padding: 16px 12px; flex: 1; }

.app-layout .nav-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--vs-text-faint) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 14px 10px 6px !important;
}

.app-layout .nav-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px !important;
    margin-bottom: 4px;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: none;
    color: var(--vs-text-muted) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.app-layout .nav-item:hover { background: var(--vs-surface-alt) !important; color: var(--vs-text) !important; }
.app-layout .nav-item.active {
    background: var(--vs-navy-soft) !important;
    color: var(--vs-navy) !important;
    border-color: #b6cde2 !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--vs-navy);
}
.app-layout .nav-item i { width: 20px; text-align: center; color: var(--vs-text-faint) !important; font-size: 15px; }
.app-layout .nav-item.active i { color: var(--vs-navy) !important; }

.app-layout .nav-badge {
    margin-left: auto;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--vs-amber) !important;
    color: #40270a !important;
    font-size: 12px !important;
    font-weight: 700;
    text-align: center;
}

.app-layout .sidebar-footer { padding: 18px 16px; border-top: 1px solid var(--vs-border); }
.app-layout .progress-info { font-size: 13px !important; font-weight: 600; color: var(--vs-text-muted) !important; margin-bottom: 8px; }
.app-layout .progress-bar { height: 10px !important; background: #e2e8f0 !important; border-radius: 999px; overflow: hidden; }
.app-layout .progress-fill { height: 100%; background: linear-gradient(90deg, var(--vs-navy), var(--vs-amber)) !important; border-radius: 999px; transition: width .3s ease; }

/* --------------------------------------------------------------------------
   4. Navbar atas (Home, riwayat, detail, tarik data)
   -------------------------------------------------------------------------- */

.navbar {
    background: var(--vs-surface) !important;
    padding: 10px clamp(16px, 4vw, 40px) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--vs-border) !important;
    box-shadow: var(--vs-shadow-sm) !important;
    position: sticky !important;
    top: 0;
    z-index: 900;
}
.navbar .logo { display: flex; align-items: center; gap: 12px; }
.navbar .logo img { width: 42px !important; height: auto; }
.navbar .logo h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: var(--vs-navy) !important;
    white-space: nowrap;
}
.navbar ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.navbar ul > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px !important;
    border-radius: 8px;
    color: var(--vs-text-muted) !important;
    font-size: 15px !important;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.navbar ul > li > a:hover { background: var(--vs-surface-alt) !important; color: var(--vs-navy) !important; }

/* Tautan halaman aktif ditandai inline color:#ffa420 di markup lama */
.navbar ul > li > a[style*="ffa420"],
.navbar ul > li > a[style*="f59e0b"] {
    color: var(--vs-navy) !important;
    background: var(--vs-navy-soft) !important;
}

.nav-dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px;
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    box-shadow: var(--vs-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 950;
}
/* Dibuka lewat ketukan (kelas .vs-open dipasang velloscript-assist.js),
   hover untuk tetikus, dan :focus-within untuk navigasi keyboard.
   Ketukan dijadikan cara utama karena layar sentuh tidak punya hover. */
.nav-dropdown.vs-open > .dropdown-menu,
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-menu a {
    display: block;
    padding: 11px 14px !important;
    border-radius: 8px;
    color: var(--vs-text) !important;
    font-size: 14.5px !important;
    font-weight: 500;
    text-decoration: none;
}
.dropdown-menu a:hover { background: var(--vs-navy-soft) !important; color: var(--vs-navy) !important; }

.user-info { display: flex; align-items: center; gap: 10px; padding-left: 12px; }
.user-name { font-size: 14.5px !important; font-weight: 600; color: var(--vs-text) !important; }
.profile-img { width: 38px !important; height: 38px !important; border-radius: 50%; object-fit: cover; border: 2px solid var(--vs-border) !important; }
.logout-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--vs-danger) !important;
    font-size: 18px !important;
}
.logout-btn:hover { background: var(--vs-danger-soft) !important; transform: none !important; }

/* --------------------------------------------------------------------------
   5. Kartu & panel
   -------------------------------------------------------------------------- */

.card,
.table-wrap,
.info-card,
.chart-box {
    background: var(--vs-surface) !important;
    border: 1px solid var(--vs-border) !important;
    border-top: 4px solid var(--vs-navy) !important;
    border-radius: var(--vs-radius-lg) !important;
    box-shadow: var(--vs-shadow) !important;
    padding: clamp(20px, 3vw, 30px) !important;
    margin-bottom: 24px !important;
}
.table-wrap {
    padding: 0 !important;
    overflow-x: auto;              /* tabel lebar digeser, bukan terpotong */
    -webkit-overflow-scrolling: touch;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--vs-border);
}
.card-icon {
    flex: none;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px !important;
}
.card-icon.blue   { background: var(--vs-navy-soft) !important; color: var(--vs-navy) !important; }
.card-icon.orange { background: var(--vs-amber-soft) !important; color: var(--vs-amber-dark) !important; }
.card-icon.purple { background: #ece9f7 !important; color: #5b4b9a !important; }

.card-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--vs-text) !important;
    font-style: normal !important;
    line-height: 1.35;
}
.card-subtitle { font-size: 14.5px !important; color: var(--vs-text-muted) !important; margin-top: 3px !important; }

/* --------------------------------------------------------------------------
   6. Formulir — inti perbaikan keterbacaan
   -------------------------------------------------------------------------- */

.form-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 22px 20px !important;
    align-items: start;
}
.form-group.full,
.form-grid > .full { grid-column: 1 / -1 !important; }

.form-group {
    display: flex !important;
    flex-direction: column;
    gap: 8px !important;
    min-width: 0;
}
/* .form-group bersarang di dalam .full: jangan tambah jarak ganda */
.form-group .form-group { margin-bottom: 0 !important; }

/* Label: kalimat biasa, ukuran nyaman dibaca, kontras cukup.
   Markup lama memakai huruf kapital 11px — itu yang paling melelahkan mata. */
label,
.form-group label,
.input-group label {
    font-size: var(--vs-font-label) !important;
    font-weight: 600 !important;
    color: var(--vs-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.45;
    margin-bottom: 0 !important;
}
label span { font-weight: 500; color: var(--vs-text-muted) !important; }

/* Keterangan kecil di bawah field */
.form-group small,
small {
    font-size: 13.5px !important;
    color: var(--vs-text-muted) !important;
    line-height: 1.5;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
select,
textarea {
    width: 100% !important;
    min-height: var(--vs-control-h) !important;
    padding: 13px 16px !important;
    background: var(--vs-surface) !important;
    border: 1.5px solid var(--vs-border-strong) !important;
    border-radius: 10px !important;
    color: var(--vs-text) !important;
    font-size: 16px !important;               /* 16px mencegah zoom otomatis di iOS */
    line-height: 1.5 !important;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { min-height: 96px !important; resize: vertical !important; }

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    cursor: pointer;
}

input:hover:not([readonly]):not([disabled]),
select:hover,
textarea:hover { border-color: #93a8bd !important; }

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--vs-navy) !important;
    background: var(--vs-surface) !important;
    box-shadow: 0 0 0 4px rgba(15, 76, 129, .16) !important;
}

::placeholder { color: var(--vs-text-faint) !important; opacity: 1 !important; font-weight: 400 !important; }

input[readonly],
input[disabled],
textarea[readonly] {
    background: #eef2f7 !important;
    color: var(--vs-text-muted) !important;
    border-color: var(--vs-border) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

input[type="checkbox"],
input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    accent-color: var(--vs-navy);
    cursor: pointer;
    flex: none;
}
.checkbox-group { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.checkbox-group label { margin: 0 !important; cursor: pointer; }

input[type="file"] {
    width: 100%;
    padding: 12px !important;
    background: var(--vs-surface-alt) !important;
    border: 1.5px dashed var(--vs-border-strong) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    cursor: pointer;
}

/* Sub-judul bagian yang ditulis inline (mis. "Alamat Lengkap Kantor") */
.form-group.full > div[style*="text-transform"] {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--vs-navy) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vs-border);
}

/* --------------------------------------------------------------------------
   6b. Keterangan bantuan & penguncian layar saat modal terbuka
   -------------------------------------------------------------------------- */

/* Disisipkan oleh static/velloscript-assist.js, tepat di bawah label supaya
   dibaca sebelum orang mulai mengetik. */
.vs-hint {
    margin: -2px 0 2px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--vs-text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Keterangan bawaan template disamakan bentuknya dengan .vs-hint */
.form-group small {
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--vs-text-muted) !important;
}
.form-group small span[style*="red"] { color: var(--vs-danger) !important; font-weight: 700; }

/* Saat modal terbuka, halaman di belakangnya tidak ikut bergulir.
   Posisi gulir dikembalikan oleh velloscript-assist.js setelah modal ditutup. */
body.vs-modal-open {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   6d. Bantuan pengisian: pembacaan angka, penanda wajib, ringkasan alamat
   Semuanya dibuat oleh static/velloscript-assist.js.
   -------------------------------------------------------------------------- */

/* --- pembacaan angka di bawah kolom --- */
.vs-bacaan {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 7px 0 0 !important;
    padding: 9px 13px;
    background: var(--vs-success-soft);
    border-left: 4px solid var(--vs-success);
    border-radius: 8px;
}
.vs-bacaan-utama { font-size: 16px; font-weight: 700; color: #14612f; }
.vs-bacaan-sub { font-size: 14px; color: #3d7a52; font-style: italic; }
.vs-bacaan-salah {
    background: var(--vs-danger-soft);
    border-left-color: var(--vs-danger);
}
.vs-bacaan-salah .vs-bacaan-utama { color: #8e2b20; }

/* --- penanda wajib / opsional pada label --- */
.vs-tanda {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    vertical-align: middle;
}
.vs-tanda-wajib { background: var(--vs-amber-soft) !important; color: var(--vs-amber-dark) !important; }
.vs-tanda-opsional { background: #eef2f7 !important; color: var(--vs-text-muted) !important; }

/* --- ringkasan alamat yang bisa dilipat --- */
.vs-alamat-ringkas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--vs-surface-alt);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
}
.vs-alamat-isi { flex: 1 1 240px; min-width: 0; }
.vs-alamat-judul {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vs-success);
}
.vs-alamat-terbuka .vs-alamat-judul { color: var(--vs-text-muted); }
.vs-alamat-teks {
    margin: 0 !important;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--vs-text);
    overflow-wrap: break-word;
}
.vs-alamat-tombol {
    flex: none;
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid var(--vs-border-strong);
    border-radius: 9px;
    background: var(--vs-surface);
    color: var(--vs-navy);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}
.vs-alamat-tombol:hover { background: var(--vs-navy-soft); border-color: var(--vs-navy); }

.vs-tersembunyi { display: none !important; }

/* Di layar lebar kisi tetap seperti semula, tapi kotak isian untuk kolom
   3-5 angka tidak perlu selebar kolomnya. */
.vs-kolom-pendek input { max-width: 170px; }

/* --------------------------------------------------------------------------
   6c. Pemberitahuan pengganti alert() bawaan
   Dibuat oleh static/velloscript-assist.js.
   -------------------------------------------------------------------------- */

.vs-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;                     /* di atas modal (1000) agar pesan tetap terlihat */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 42, 74, .55);
    backdrop-filter: blur(3px);
    animation: vsNoticeMasuk .16s ease-out;
}

@keyframes vsNoticeMasuk { from { opacity: 0; } to { opacity: 1; } }

.vs-notice {
    width: 100%;
    max-width: 420px;
    padding: 28px 24px 22px;
    background: var(--vs-surface);
    border-radius: var(--vs-radius-lg);
    box-shadow: var(--vs-shadow-lg);
    text-align: center;
}

.vs-notice-ikon {
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 28px;
}
.vs-notice-peringatan .vs-notice-ikon { background: var(--vs-amber-soft); color: var(--vs-amber-dark); }
.vs-notice-baik      .vs-notice-ikon { background: var(--vs-success-soft); color: var(--vs-success); }
.vs-notice-netral    .vs-notice-ikon { background: var(--vs-navy-soft); color: var(--vs-navy); }

.vs-notice-teks {
    margin: 0 0 22px;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--vs-text);
    overflow-wrap: break-word;
}

.vs-notice-ok {
    width: 100%;
    min-height: 52px;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    background: var(--vs-navy);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.vs-notice-ok:hover { background: var(--vs-navy-dark); }

/* Tombol kirim yang sedang menunggu balasan server */
.vs-sibuk {
    opacity: .75;
    cursor: progress !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   7. Tombol
   -------------------------------------------------------------------------- */

button, .btn, .btn-aksi, .card-btn { font-size: 15px; font-weight: 600; cursor: pointer; }

.btn-submit,
.btn-simpan,
.btn-generate,
.btn-login,
button[type="submit"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px !important;
    padding: 16px 28px !important;
    border: none !important;
    border-radius: 12px !important;
    background: var(--vs-navy) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    box-shadow: 0 4px 14px rgba(15, 76, 129, .28) !important;
    transition: background .15s, transform .12s, box-shadow .15s;
}
.btn-submit:hover,
.btn-simpan:hover,
.btn-generate:hover,
.btn-login:hover,
button[type="submit"]:hover {
    background: var(--vs-navy-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(15, 76, 129, .32) !important;
}
.btn-submit:active, button[type="submit"]:active { transform: translateY(0) !important; }

/* Tombol tambah (tambah pengurus / KBLI) */
.btn-add {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 22px !important;
    border: 2px dashed var(--vs-border-strong) !important;
    border-radius: 10px !important;
    background: var(--vs-surface-alt) !important;
    color: var(--vs-navy) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: background .15s, border-color .15s;
}
.btn-add:hover { background: var(--vs-navy-soft) !important; border-color: var(--vs-navy) !important; }
.btn-add.orange { color: var(--vs-amber-dark) !important; }
.btn-add.orange:hover { background: var(--vs-amber-soft) !important; border-color: var(--vs-amber) !important; }

/* Tombol aksi kecil di tabel */
.btn-aksi, .btn-edit, .btn-icon, .pg-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px !important;
    border-radius: 9px !important;
    border: 1.5px solid var(--vs-border-strong) !important;
    background: var(--vs-surface) !important;
    color: var(--vs-navy) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s;
}
.btn-aksi:hover, .btn-edit:hover, .btn-icon:hover, .pg-btn:hover {
    background: var(--vs-navy-soft) !important;
    border-color: var(--vs-navy) !important;
}
.pg-btn.active { background: var(--vs-navy) !important; color: #fff !important; border-color: var(--vs-navy) !important; }

/* Pilihan dua-arah (Kota / Kabupaten, Tuan / Nyonya) */
.sebutan-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.sebutan-btn,
.sebutan-btn-pt {
    min-height: 46px;
    padding: 11px 22px !important;
    border: 1.5px solid var(--vs-border-strong) !important;
    border-radius: 9px !important;
    background: var(--vs-surface) !important;
    color: var(--vs-text-muted) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: background .15s, border-color .15s, color .15s;
}
.sebutan-btn:hover, .sebutan-btn-pt:hover { border-color: var(--vs-navy) !important; color: var(--vs-navy) !important; }
.sebutan-btn.active,
.sebutan-btn-pt.active {
    background: var(--vs-navy) !important;
    border-color: var(--vs-navy) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   8. Daftar pengurus
   -------------------------------------------------------------------------- */

.pengurus-list { display: flex; flex-direction: column; gap: 12px; }

.pengurus-item {
    padding: 16px 18px !important;
    background: var(--vs-surface-alt) !important;
    border: 1px solid var(--vs-border) !important;
    border-left: 5px solid var(--vs-amber) !important;
    border-radius: var(--vs-radius) !important;
}
.pengurus-item-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.pengurus-avatar {
    flex: none;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vs-navy) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    font-style: normal !important;
}
.pengurus-name-preview { font-size: 16.5px !important; font-weight: 700 !important; color: var(--vs-text) !important; }
.pengurus-jabatan-preview { font-size: 14.5px !important; color: var(--vs-text-muted) !important; }

.btn-edit-pengurus,
.btn-hapus-pengurus {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px !important;
    border-radius: 9px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
}
.btn-edit-pengurus {
    background: var(--vs-surface) !important;
    border: 1.5px solid var(--vs-border-strong) !important;
    color: var(--vs-navy) !important;
}
.btn-edit-pengurus:hover { background: var(--vs-navy-soft) !important; border-color: var(--vs-navy) !important; }
.btn-hapus-pengurus {
    background: var(--vs-danger-soft) !important;
    border: 1.5px solid #f0c0ba !important;
    color: var(--vs-danger) !important;
}
.btn-hapus-pengurus:hover { background: #fadbd6 !important; border-color: var(--vs-danger) !important; }

/* Di markup, tombol ini hanya berisi ikon tong sampah tanpa tulisan apa pun.
   Untuk pemakai awam ikon saja tidak cukup jelas, jadi labelnya ditambahkan
   di sini (semua 17 template memakai bentuk yang sama, tanpa teks). */
.btn-hapus-pengurus::after { content: "Hapus"; }

.saham-badge,
.badge {
    display: inline-block;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: var(--vs-amber-soft) !important;
    border: 1px solid #f0d089 !important;
    color: var(--vs-amber-dark) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   9. KBLI & kotak informasi
   -------------------------------------------------------------------------- */

.kbli-item {
    padding: 16px 18px !important;
    margin-bottom: 12px !important;
    background: var(--vs-surface-alt) !important;
    border: 1px solid var(--vs-border) !important;
    border-left: 5px solid var(--vs-navy) !important;
    border-radius: var(--vs-radius) !important;
}
.kbli-search-wrap { position: relative; }
.kbli-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 200;
    display: none;
    max-height: 320px;
    overflow-y: auto;
    background: var(--vs-surface) !important;
    border: 1px solid var(--vs-border) !important;
    border-radius: var(--vs-radius) !important;
    box-shadow: var(--vs-shadow-lg) !important;
}
.kbli-dropdown-item {
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--vs-border) !important;
    font-size: 15px !important;
    color: var(--vs-text) !important;
    line-height: 1.5;
    cursor: pointer;
}
.kbli-dropdown-item:last-child { border-bottom: none !important; }
.kbli-dropdown-item:hover { background: var(--vs-navy-soft) !important; }
.kbli-dropdown-item strong { color: var(--vs-navy) !important; }

.kbli-selected {
    margin-top: 10px !important;
    padding: 12px 16px !important;
    background: var(--vs-success-soft) !important;
    border: 1px solid #b9dfc6 !important;
    border-radius: 10px !important;
    color: #14612f !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    gap: 10px;
}

.info-saham,
.info-usaha,
.alert-error {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px !important;
    padding: 16px 20px !important;
    border-radius: var(--vs-radius) !important;
    font-size: 15.5px !important;
    line-height: 1.5;
}
.info-saham {
    background: var(--vs-amber-soft) !important;
    border: 1px solid #f0d089 !important;
}
.info-saham i { font-size: 22px !important; color: var(--vs-amber-dark) !important; }
.info-saham-text { color: #6b4708 !important; font-weight: 600 !important; }
.info-saham-text span {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--vs-amber-dark) !important;
    font-style: normal !important;
}

.info-usaha {
    display: block;
    background: var(--vs-surface) !important;
    border: 1px solid var(--vs-border) !important;
    border-top: 4px solid var(--vs-amber) !important;
    box-shadow: var(--vs-shadow-sm) !important;
    margin-bottom: 24px !important;
}
.info-usaha .label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--vs-text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 6px !important;
}
.info-usaha .value { font-size: 16.5px !important; font-weight: 600 !important; color: var(--vs-text) !important; }

.alert-error {
    background: var(--vs-danger-soft) !important;
    border: 1px solid #f0c0ba !important;
    color: #8e2b20 !important;
    font-weight: 500;
}

.empty-state {
    padding: 56px 24px !important;
    text-align: center;
    color: var(--vs-text-muted) !important;
    font-size: 16px !important;
}
.empty-state i { font-size: 44px !important; color: var(--vs-text-faint) !important; margin-bottom: 14px; display: block; }

/* --------------------------------------------------------------------------
   10. Tabel
   -------------------------------------------------------------------------- */

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px clamp(16px, 3vw, 26px) !important;
    border-bottom: 1px solid var(--vs-border);
}
.table-header h3 { font-size: 19px !important; font-weight: 700 !important; color: var(--vs-text) !important; font-style: normal !important; }

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px !important;
    background: var(--vs-surface) !important;
    border: 1.5px solid var(--vs-border-strong) !important;
    border-radius: 10px !important;
    min-width: 240px;
}
.search-box:focus-within { border-color: var(--vs-navy) !important; box-shadow: 0 0 0 4px rgba(15, 76, 129, .16) !important; }
.search-box i { color: var(--vs-text-faint) !important; }
.search-box input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    min-height: 46px !important;
}
.search-box input:focus { box-shadow: none !important; }

/* Pembungkus geser horizontal supaya tabel lebar tetap terbaca di layar kecil */
.table-container,
.table-responsive,
.window-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table { width: 100% !important; border-collapse: collapse !important; }
th {
    padding: 14px clamp(12px, 2vw, 20px) !important;
    background: var(--vs-surface-alt) !important;
    border-bottom: 2px solid var(--vs-border) !important;
    color: var(--vs-text-muted) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    white-space: nowrap;
}
td {
    padding: 16px clamp(12px, 2vw, 20px) !important;
    border-bottom: 1px solid var(--vs-border) !important;
    color: var(--vs-text) !important;
    font-size: 15px !important;
    vertical-align: middle;
}
tbody tr:hover td { background: var(--vs-surface-alt) !important; }
tbody tr:last-child td { border-bottom: none !important; }

.nama-pt, .pt-name, .pt-nama { font-size: 16px !important; font-weight: 700 !important; color: var(--vs-text) !important; }
.sub-text, .pt-meta, .time-label { font-size: 13.5px !important; color: var(--vs-text-muted) !important; }

.paginate-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px clamp(16px, 3vw, 26px) !important;
    border-top: 1px solid var(--vs-border);
}
.paginate-info { font-size: 14.5px !important; color: var(--vs-text-muted) !important; }
.paginate-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   11. Modal
   -------------------------------------------------------------------------- */

.modal-overlay,
.modal-overlay-delete,
.modal-overlay-logout {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 42, 74, .55) !important;
    backdrop-filter: blur(3px);
    padding: 20px;
    overflow-y: auto;
}
.modal-overlay.show,
.modal-overlay-delete.active,
.modal-overlay-logout.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-box,
.modal-delete-box,
.modal-logout {
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    padding: clamp(20px, 3vw, 30px) !important;
    background: var(--vs-surface) !important;
    border: none !important;
    border-top: 5px solid var(--vs-navy) !important;
    border-radius: var(--vs-radius-lg) !important;
    box-shadow: var(--vs-shadow-lg) !important;
}
.modal-delete-box, .modal-logout { max-width: 460px; padding: 0 !important; overflow: hidden; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--vs-border);
}
.modal-header h3 { font-size: 21px !important; font-weight: 700 !important; font-style: normal !important; color: var(--vs-text) !important; }

.modal-close {
    flex: none;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: var(--vs-surface-alt) !important;
    border: 1.5px solid var(--vs-border) !important;
    color: var(--vs-text-muted) !important;
    font-size: 17px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover { background: var(--vs-danger-soft) !important; border-color: #f0c0ba !important; color: var(--vs-danger) !important; }

.modal-section { margin-bottom: 26px !important; }
.modal-section-title {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--vs-border) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--vs-navy) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.modal-footer,
.modal-delete-actions,
.modal-logout-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px !important;
}
.btn-modal-save,
.modal-btn-confirm {
    flex: 1 1 180px;
    min-height: 52px !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 10px !important;
    background: var(--vs-navy) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-style: normal !important;
}
.btn-modal-save:hover, .modal-btn-confirm:hover { background: var(--vs-navy-dark) !important; }

.btn-modal-cancel,
.modal-btn-batal,
.modal-btn-cancel {
    min-height: 52px !important;
    padding: 14px 24px !important;
    border: 1.5px solid var(--vs-border-strong) !important;
    border-radius: 10px !important;
    background: var(--vs-surface) !important;
    color: var(--vs-text-muted) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}
.btn-modal-cancel:hover, .modal-btn-batal:hover, .modal-btn-cancel:hover { background: var(--vs-surface-alt) !important; color: var(--vs-text) !important; }

.modal-btn-action { min-height: 52px !important; padding: 14px 24px !important; border-radius: 10px !important; font-size: 16px !important; }
.modal-btn-hapus {
    background: var(--vs-danger) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}
.modal-btn-hapus:hover { background: #a53023 !important; transform: none !important; box-shadow: none !important; }

.modal-delete-header, .modal-logout-header {
    padding: 26px 24px !important;
    background: var(--vs-navy) !important;
    text-align: center;
}
.modal-delete-header h3, .modal-logout-header h3 { color: #ffffff !important; font-size: 21px !important; font-weight: 700 !important; }
.modal-delete-icon, .modal-logout-icon {
    width: 68px !important;
    height: 68px !important;
    margin: 0 auto 14px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: none !important;
}
.modal-delete-icon i, .modal-logout-icon i { font-size: 30px !important; color: #ffffff !important; }
.modal-delete-body, .modal-logout-body, .modal-body { padding: 26px 24px !important; text-align: center; }
.modal-delete-body p, .modal-logout-body p { font-size: 16px !important; line-height: 1.6 !important; color: var(--vs-text-muted) !important; margin-bottom: 0 !important; }
.modal-delete-actions, .modal-logout-actions { justify-content: center; padding: 0 24px 26px !important; margin-top: 20px !important; }

/* --------------------------------------------------------------------------
   12. Beranda & halaman pilihan (kartu menu)
   -------------------------------------------------------------------------- */

/* Template Home.html dan show_detail_*.html mengunci komponen ini:
     .card-grid { max-width: 700px }  -> hanya muat 2 kolom, sisa layar kosong
     .card-item { width:150px; height:160px } -> kartu sempit, teks terpatah
   Keduanya dilepas di sini supaya kartu mengikuti lebar yang tersedia. */

.card-grid-wrap {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
}

.category-title {
    margin: 4px 0 18px !important;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--vs-border);
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--vs-navy) !important;
    letter-spacing: 0 !important;
}

.card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)) !important;
    gap: 18px !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 40px !important;
    justify-content: stretch !important;
}

.card-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto !important;
    height: auto !important;
    min-height: 172px;
    padding: 22px 18px !important;
    background: var(--vs-surface) !important;
    border: 1px solid var(--vs-border) !important;
    border-radius: var(--vs-radius-lg) !important;
    box-shadow: var(--vs-shadow-sm) !important;
    text-decoration: none !important;
    text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card-item:hover {
    transform: translateY(-3px);
    border-color: var(--vs-navy) !important;
    box-shadow: var(--vs-shadow) !important;
}
.card-item img { width: 52px !important; height: 52px !important; object-fit: contain; }
.card-item span {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--vs-text) !important;
    line-height: 1.35;
}

.card-btn {
    margin-top: 4px;
    padding: 9px 24px !important;
    border-radius: 999px !important;
    background: var(--vs-navy) !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    pointer-events: none;
}
.card-item:hover .card-btn { background: var(--vs-amber) !important; color: #40270a !important; }

.card-item.disabled { opacity: .5; pointer-events: none; }
.card-item.disabled .card-btn { background: var(--vs-border-strong) !important; color: #fff !important; }

/* Halaman splash (index.html) */
body > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
    background: var(--vs-navy) !important;
    gap: 24px;
}
.konten { margin-left: clamp(20px, 6vw, 80px) !important; padding: 40px 20px !important; text-align: left; }
.konten h1 {
    font-size: clamp(40px, 8vw, 76px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.05;
    margin-bottom: 16px !important;
}
.konten p { font-size: clamp(17px, 2.2vw, 22px) !important; color: #cfe0ef !important; }
.konten button {
    min-height: 56px;
    margin-top: 32px !important;
    padding: 15px 44px !important;
    border: none !important;
    border-radius: 12px !important;
    background: var(--vs-amber) !important;
    color: #3d2606 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25) !important;
    transition: transform .15s, background .15s;
}
.konten button:hover { background: #fbb226 !important; transform: translateY(-3px) !important; }

/* --------------------------------------------------------------------------
   13. Halaman login
   -------------------------------------------------------------------------- */

.login-container {
    display: flex;
    min-height: 100vh;
    background: var(--vs-bg) !important;
}
.login-brand {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 6vw, 72px) !important;
    background: var(--vs-navy) !important;
    color: #ffffff;
}
.login-brand h1 { font-size: clamp(32px, 5vw, 46px) !important; font-weight: 800 !important; color: #ffffff !important; font-style: normal !important; }
.login-brand > p { font-size: 18px !important; color: #cfe0ef !important; margin-top: 8px; }
.brand-icon {
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    font-size: 30px;
    color: #ffffff;
}
.brand-features { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.feature { display: flex; align-items: center; gap: 12px; font-size: 16px !important; color: #dbe8f4 !important; }
.feature-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vs-amber); flex: none; }

.login-form-panel {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 6vw, 72px) !important;
    background: var(--vs-surface) !important;
}
.form-header h2 { font-size: clamp(26px, 4vw, 32px) !important; font-weight: 700 !important; color: var(--vs-text) !important; font-style: normal !important; }
.form-header p { font-size: 16px !important; color: var(--vs-text-muted) !important; margin-top: 6px; }
.login-form { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; max-width: 460px; }
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-wrapper { position: relative; }
.input-wrapper input { padding-left: 48px !important; padding-right: 48px !important; }
.input-wrapper > i {
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    color: var(--vs-text-faint) !important;
    font-size: 16px;
}
.input-wrapper > i.toggle-password {
    left: auto;
    right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}
.input-wrapper > i.toggle-password:hover { background: var(--vs-surface-alt) !important; color: var(--vs-navy) !important; }
.error-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 18px !important;
    border-radius: 10px;
    background: var(--vs-danger-soft) !important;
    border: 1px solid #f0c0ba !important;
    color: #8e2b20 !important;
    font-size: 15px !important;
}
.back-link { margin-top: 28px; }
.back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--vs-navy) !important;
    font-size: 15px !important;
    font-weight: 600;
    text-decoration: none;
}
.back-link a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   14. Responsif
   -------------------------------------------------------------------------- */

/* Tablet ke bawah: sidebar menjadi bilah navigasi ringkas di atas.
   Susunannya diatur ulang lewat `order` sehingga menjadi tiga jalur:
     1. jalur merek (navy)
     2. jalur progres  — selalu terlihat saat mengisi formulir panjang
     3. jalur pintasan bagian — bisa digeser
   Markup tidak diubah; kait selektor memakai atribut onclick yang sudah ada. */
@media (max-width: 1024px) {
    .app-layout { flex-direction: column !important; }

    .app-layout .sidebar {
        position: sticky !important;
        top: 0;
        z-index: 900;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: visible !important;
        border-right: none !important;
        border-bottom: 1px solid var(--vs-border) !important;
        box-shadow: 0 2px 10px rgba(15, 42, 74, .10) !important;
    }

    /* --- Jalur 1: merek --- */
    .app-layout .sidebar-header {
        order: 1;
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 10px 16px !important;
        text-align: left;
    }
    .app-layout .sidebar-header .logo-icon { display: flex; flex: none; }
    .app-layout .sidebar-header .logo-icon img,
    .app-layout .sidebar-header > div:first-child img { width: 28px !important; height: auto !important; }
    .app-layout .sidebar-header .logo-text { font-size: 18px !important; letter-spacing: .04em; }
    .app-layout .sidebar-header p { display: none !important; }

    /* --- Jalur 2: progres, menempel pada blok navy --- */
    .app-layout .sidebar-footer {
        order: 2;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 16px 10px !important;
        background: var(--vs-navy) !important;
        border-top: none !important;
    }
    .app-layout .progress-info {
        flex: none;
        margin-bottom: 0 !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #bfd6ea !important;
        white-space: nowrap;
    }
    .app-layout .sidebar-footer .progress-bar {
        flex: 1;
        height: 8px !important;
        background: rgba(255, 255, 255, .22) !important;
    }
    .app-layout .sidebar-footer .progress-fill { background: var(--vs-amber) !important; }

    /* --- Jalur 3: pintasan bagian --- */
    .app-layout .sidebar-nav {
        order: 3;
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 16px !important;
        background: var(--vs-surface);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-padding-left: 16px;
        /* pudar di tepi kanan sebagai isyarat bahwa baris ini bisa digeser */
        mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    }
    .app-layout .sidebar-nav::-webkit-scrollbar { display: none; }
    .app-layout .nav-label { display: none !important; }
    .app-layout .sidebar-nav > a { flex: none; display: flex; text-decoration: none; }

    .app-layout .nav-item {
        flex: none;
        width: auto !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 9px 16px !important;
        border: 1.5px solid var(--vs-border-strong) !important;
        border-radius: 999px !important;
        font-size: 14.5px !important;
        white-space: nowrap;
        box-shadow: none !important;
        scroll-snap-align: start;
    }
    .app-layout .nav-item i { font-size: 14px; }

    /* Tindakan sekunder (Kembali, Panduan) lebih kalem daripada pintasan bagian */
    .app-layout .sidebar-nav > a .nav-item,
    .app-layout .nav-item[onclick*="bukaModalPanduan"] {
        background: transparent !important;
        border-color: var(--vs-border) !important;
        color: var(--vs-text-muted) !important;
        font-weight: 500 !important;
    }
    .app-layout .nav-item[onclick*="bukaModalPanduan"] i { color: var(--vs-amber-dark) !important; }

    /* Pemisah antara tindakan sekunder dan pintasan bagian */
    .app-layout .nav-item[onclick*="bukaModalPanduan"] { position: relative; margin-right: 9px !important; }
    .app-layout .nav-item[onclick*="bukaModalPanduan"]::after {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        right: -9px;
        width: 1px;
        background: var(--vs-border);
    }

    /* Pintasan bagian: lebih menonjol, yang aktif terisi penuh */
    .app-layout .nav-item[onclick*="scrollToSec"] {
        background: var(--vs-surface) !important;
        color: var(--vs-text) !important;
        font-weight: 600 !important;
    }
    .app-layout .nav-item[onclick*="scrollToSec"] i { color: var(--vs-text-faint) !important; }
    .app-layout .nav-item[onclick*="scrollToSec"].active {
        background: var(--vs-navy) !important;
        border-color: var(--vs-navy) !important;
        color: #ffffff !important;
    }
    .app-layout .nav-item[onclick*="scrollToSec"].active i { color: #ffffff !important; }
    .app-layout .nav-item[onclick*="scrollToSec"].active .nav-badge {
        background: #ffffff !important;
        color: var(--vs-navy) !important;
    }
    .app-layout .nav-item.active { box-shadow: none !important; }
    .app-layout .nav-badge { margin-left: 2px; }

    /* scrollToSec() memakai scrollIntoView({block:'start'}); tanpa ini judul
       kartu berhenti tepat di balik bilah yang menempel di atas. */
    .card[id^="sec-"], [id^="sec-"] { scroll-margin-top: 150px; }

    /* ================= Bilah langkah melayang =================
       Dibangun oleh static/velloscript-steps.js. Kelas .vs-steps-on hanya
       menempel di <body> bila skrip itu benar-benar berjalan, sehingga tanpa
       JavaScript pintasan lama di bilah atas tetap utuh. */

    body.vs-steps-on .nav-item[onclick*="scrollToSec"] { display: none !important; }
    /* progres keseluruhan jadi mubazir: titik langkah sudah menunjukkannya */
    body.vs-steps-on .app-layout .sidebar-footer { display: none !important; }
    body.vs-steps-on .nav-item[onclick*="bukaModalPanduan"] { margin-right: 0 !important; }
    body.vs-steps-on .nav-item[onclick*="bukaModalPanduan"]::after { display: none; }
    body.vs-steps-on .card[id^="sec-"],
    body.vs-steps-on [id^="sec-"] { scroll-margin-top: 108px; }

    /* beri ruang di bawah agar tombol Generate tidak tertutup bilah */
    body.vs-steps-on .main-content,
    body.vs-steps-on .main {
        padding-bottom: calc(var(--vs-steps-h, 36px) + 24px) !important;
    }

    .vs-steps {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 880;
        padding: 7px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--vs-surface);
        border-top: 1px solid var(--vs-border);
        box-shadow: 0 -6px 24px rgba(15, 42, 74, .14);
    }

    /* Segmen dulu, keterangan di bawah. Model ini dipilih menggantikan
       deretan titik berlabel yang memakan ~106px: label di tiap titik selalu
       terpotong jadi elipsis, dan nama langkah yang sedang dikerjakan toh
       sudah disebut di baris keterangan. Tingginya kini ~36px. */

    .vs-steps-list {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0 16px;
        list-style: none;
    }
    .vs-steps-list li { flex: 1 1 0; min-width: 0; }

    /* Tombolnya dibuat setinggi bilah dan transparan di luar garisnya:
       garisnya tipis, tapi daerah yang bisa ditekan tetap selebar seperempat
       layar dan setinggi ~30px. Segmen tetap bisa ditekan karena pintasan
       bagian di bilah atas disembunyikan saat bilah ini aktif — tanpa itu
       tidak ada lagi cara berpindah bagian di layar kecil. */
    .vs-step {
        display: flex;
        align-items: center;
        width: 100%;
        height: 28px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
    }

    .vs-step-seg {
        width: 100%;
        height: 6px;
        border-radius: 999px;
        background: var(--vs-border-strong);
        transition: background .15s, box-shadow .15s;
    }

    .vs-step.is-done .vs-step-seg { background: var(--vs-success); }

    .vs-step.is-current .vs-step-seg {
        background: var(--vs-navy);
        box-shadow: 0 0 0 3px rgba(15, 76, 129, .16);
    }

    .vs-steps-head {
        display: flex;
        align-items: baseline;
        gap: 7px;
        padding: 1px 16px 0;
        font-size: 12.5px;
        line-height: 1.25;
    }
    .vs-steps-count { font-weight: 700; color: var(--vs-navy); white-space: nowrap; }
    .vs-steps-sep { color: var(--vs-text-faint); }
    .vs-steps-name {
        font-weight: 600;
        color: var(--vs-text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Ponsel */
@media (max-width: 768px) {
    :root { --vs-control-h: 52px; }

    .main-content, .main { padding: 20px 16px 48px !important; }

    /* Kisi dibuat 2 kolom, dan semua kolom membentang penuh KECUALI yang
       ditandai pendek (RT, RW, Kode Pos) — supaya kolom 3 angka tidak lagi
       memakan satu baris penuh sendirian. */
    .form-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px 14px !important;
    }
    .form-grid > * { grid-column: span 2; }
    .form-grid > .vs-kolom-pendek { grid-column: span 1; }

    /* Navbar: logo di kiri, menu menggulung di bawahnya */
    .navbar { padding: 10px 16px !important; }
    .navbar .logo h1 { font-size: 20px !important; }
    .navbar .logo img { width: 34px !important; }
    /* TIDAK memakai overflow-x di sini: wadah yang bisa digulir akan memotong
       menu dropdown-nya. Menu navbar hanya berisi sedikit butir, jadi dibiarkan
       membungkus ke baris berikutnya saja. */
    .navbar ul {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        overflow: visible;
        gap: 6px;
        padding-bottom: 4px;
    }
    .navbar ul > li { flex: none; }
    .user-info { order: 2; padding-left: 0; }
    .user-name { display: none; }

    /* Menu jadi panel selebar layar di bawah navbar. .nav-dropdown dibuat
       static agar penempatannya mengacu ke .navbar (yang sticky, sehingga
       menjadi blok penampung), bukan ke butir <li> yang sempit. */
    .nav-dropdown { position: static; }
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 12px;
        right: 12px;
        min-width: 0;
        max-height: 60vh;
        margin-top: 6px;
    }
    .dropdown-menu a { padding: 14px 16px !important; font-size: 15.5px !important; }

    /* Markup sudah memuat karakter "▾" pada teksnya, jadi tidak ditambah
       penanda lagi; status terbuka ditandai lewat warna saja. */
    .nav-dropdown.vs-open > a {
        background: var(--vs-navy) !important;
        color: #ffffff !important;
    }

    /* Baris tombol Generate: satu tombol satu baris, tidak meluber ke samping.
       Markup lama memberi flex:1 / flex:0 0 auto lewat atribut style inline. */
    .btn-submit {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding: 15px 18px !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        text-align: center;
    }

    .card-header { gap: 12px; }
    .card-title { font-size: 17.5px !important; }
    .card-icon { width: 42px !important; height: 42px !important; font-size: 17px !important; }

    .table-header { padding: 16px !important; }
    .search-box { width: 100%; min-width: 0; }

    /* ---------- Tabel data jadi kartu bertumpuk ----------
       Tabel 8 kolom tidak mungkin terbaca di layar ponsel. Tiap baris diubah
       menjadi satu kartu, dan tiap sel menampilkan nama kolomnya sendiri.
       Nama kolom itu disalin dari <th> ke atribut data-label oleh
       static/velloscript-assist.js, jadi markup template tidak diubah. */
    .table-wrap { overflow-x: visible !important; }
    .table-wrap > table,
    .table-container > table,
    .table-responsive > table,
    .window-table-container > table {
        min-width: 0 !important;
        display: block;
    }
    .table-wrap thead,
    .table-container thead,
    .table-responsive thead,
    .window-table-container thead,
    .table-responsive-wrapper thead { display: none; }

    .table-wrap tbody, .table-wrap tr, .table-wrap td,
    .table-container tbody, .table-container tr, .table-container td,
    .table-responsive tbody, .table-responsive tr, .table-responsive td,
    .window-table-container tbody, .window-table-container tr, .window-table-container td,
    .table-responsive-wrapper tbody, .table-responsive-wrapper tr, .table-responsive-wrapper td {
        display: block;
        width: auto;
    }

    /* admin_style.css memasang `table, .riwayat-table, .user-table
       { min-width: 800px !important }` di lebar ini; dikalahkan di sini agar
       tabel admin ikut menjadi kartu, bukan digeser ke samping. */
    .window-table-container, .table-responsive-wrapper { overflow-x: visible !important; }
    .window-table-container > table,
    .table-responsive-wrapper > table,
    .user-table, .riwayat-table {
        min-width: 0 !important;
        display: block;
    }

    .table-wrap tr, .table-container tr, .table-responsive tr,
    .window-table-container tr, .table-responsive-wrapper tr {
        margin: 0 14px 14px;
        background: var(--vs-surface) !important;
        border: 1px solid var(--vs-border);
        border-radius: var(--vs-radius);
        box-shadow: var(--vs-shadow-sm);
        overflow: hidden;
    }
    .table-wrap tbody tr:first-child { margin-top: 14px; }

    /* Pencarian & paginasi di Riwayat memakai jQuery .hide()/.show(). jQuery
       menyimpan nilai display saat baris disembunyikan, jadi bila layar sempat
       dirotasi melewati 768px, .show() bisa mengembalikan 'table-row' dan
       merusak tata kartu. Nilai itu saja yang dikoreksi — 'display: none'
       sengaja tidak disentuh agar penyaringan tetap bekerja. */
    .table-wrap tr[style*="table-row"] { display: block !important; }
    .table-wrap tbody tr:hover td { background: transparent !important; }

    .table-wrap td, .table-container td, .table-responsive td,
    .window-table-container td, .table-responsive-wrapper td {
        padding: 11px 15px !important;
        border-bottom: 1px solid var(--vs-border) !important;
        font-size: 15px !important;
    }
    .table-wrap tr td:last-child,
    .table-container tr td:last-child,
    .table-responsive tr td:last-child,
    .window-table-container tr td:last-child,
    .table-responsive-wrapper tr td:last-child { border-bottom: none !important; }

    /* nama kolom ditaruh di atas nilainya, bukan di sampingnya: sel di sini
       sering berisi beberapa baris (nama + kota + label jenis akta) */
    .table-wrap td[data-label]::before,
    .table-container td[data-label]::before,
    .table-responsive td[data-label]::before,
    .window-table-container td[data-label]::before,
    .table-responsive-wrapper td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        font-size: 13px;
        font-weight: 700;
        color: var(--vs-text-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    /* nomor urut tidak berguna dalam bentuk kartu */
    .table-wrap td[data-label="No"],
    .window-table-container td[data-label="No"] { display: none; }

    /* sel yang membentang (baris "belum ada data") tampil polos */
    .table-wrap td[colspan]::before { content: none; }
    .table-wrap td[colspan] { text-align: center; }

    /* tombol aksi melebar penuh agar mudah ditekan */
    .table-wrap td[data-label="Aksi"] > div { flex-direction: column; align-items: stretch; }
    .table-wrap td[data-label="Aksi"] .btn-aksi {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .modal-box table,
    .modal-body table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }
    .modal-box td, .modal-body td {
        padding: 8px 6px !important;
        font-size: 14px !important;
        overflow-wrap: anywhere;
    }

    .pengurus-item-header { align-items: flex-start; gap: 14px; }
    /* tombol aksi dibuat selebar mungkin agar mudah ditekan */
    .pengurus-item-header > div:last-child { width: 100%; }
    .pengurus-item-header .btn-edit-pengurus,
    .pengurus-item-header .btn-hapus-pengurus {
        flex: 1 1 0;
        justify-content: center;
        min-height: 46px;
    }
    /* ---------- Modal isian panjang (Tambah Pengurus) ----------
       Di ponsel modal ini dibuat selayar penuh: judul menempel di atas dan
       tombol Simpan menempel di bawah, jadi tidak perlu menggulir sampai
       habis untuk menemukan tombolnya. */
    .modal-overlay { padding: 0 !important; align-items: stretch !important; }
    .modal-overlay-delete, .modal-overlay-logout { padding: 0 !important; align-items: flex-end !important; }

    .modal-box {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 0 !important;
        border-top: none !important;
        border-radius: 0 !important;
        overflow-y: auto;
    }

    .modal-box .modal-header {
        position: sticky;
        top: 0;
        z-index: 5;
        margin: 0 !important;
        padding: 13px 16px !important;
        background: var(--vs-navy) !important;
        border-bottom: none !important;
    }
    .modal-box .modal-header h3 { color: #ffffff !important; font-size: 19px !important; }
    .modal-box .modal-close {
        background: rgba(255, 255, 255, .18) !important;
        border-color: transparent !important;
        color: #ffffff !important;
    }

    .modal-box .modal-section { padding: 0 16px !important; margin-bottom: 24px !important; }
    .modal-box .modal-section:first-of-type { padding-top: 20px !important; }

    .modal-box .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 5;
        flex-direction: column-reverse;   /* Simpan di atas, Batal di bawah */
        gap: 10px;
        margin: 0 !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--vs-surface);
        border-top: 1px solid var(--vs-border);
        box-shadow: 0 -4px 16px rgba(15, 42, 74, .10);
    }
    .modal-box .modal-footer > * { width: 100%; flex: none !important; }

    /* Modal konfirmasi tetap berupa kartu kecil, bukan selayar penuh */
    .modal-delete-box, .modal-logout {
        max-width: none;
        border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0 !important;
    }
    .modal-delete-actions > *, .modal-logout-actions > * { flex: 1 1 100%; }

    /* ---------- Kotak unggah berkas (KTP / NPWP) ----------
       Di markup lama ukurannya kecil dan tulisannya 13px. */
    div[onclick*="getElementById"][onclick*="click()"] {
        min-height: 104px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 18px 14px !important;
        background: var(--vs-surface-alt) !important;
        border: 2px dashed var(--vs-border-strong) !important;
        border-radius: var(--vs-radius) !important;
    }
    div[onclick*="getElementById"][onclick*="click()"] i {
        font-size: 30px !important;
        color: var(--vs-navy) !important;
        margin: 0 !important;
    }
    div[onclick*="getElementById"][onclick*="click()"] br { display: none; }
    div[onclick*="getElementById"][onclick*="click()"] span {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--vs-text) !important;
        line-height: 1.4;
    }

    /* ---------- Pilihan Tuan / Nyonya / Nona, Kota / Kabupaten ---------- */
    .sebutan-toggle {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        gap: 8px;
    }
    .sebutan-btn, .sebutan-btn-pt { width: 100%; padding: 12px 8px !important; }

    /* Splash & login menumpuk vertikal */
    body > .container { flex-direction: column; justify-content: center; text-align: center; padding: 40px 0; }
    .konten { margin-left: 0 !important; text-align: center; }
    .login-container { flex-direction: column; }
    .login-brand { padding: 36px 24px !important; }
    .brand-features { display: none; }
    .login-form { max-width: none; }

    /* Di ponsel kartu kotak jadi tinggi dan sempit, dan namanya terpatah
       ("NOTARIS / SOPPENG"). Diubah menjadi baris selebar layar: ikon di kiri,
       nama dibaca mendatar, tombol di kanan. Lebih mudah dibaca dan ditekan. */
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 32px !important;
    }
    .card-item {
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        min-height: 76px;
        padding: 14px 16px !important;
        text-align: left;
    }
    .card-item:hover { transform: none; }
    .card-item img { width: 42px !important; height: 42px !important; flex: none; }
    .card-item span {
        flex: 1;
        min-width: 0;
        text-align: left;
        font-size: 16.5px !important;
        line-height: 1.3;
    }
    .card-btn {
        flex: none;
        margin-top: 0 !important;
        padding: 9px 20px !important;
        font-size: 14.5px !important;
    }

    .category-title { font-size: 18px !important; margin-bottom: 14px !important; }
}

/* Jaring pengaman: cegah satu elemen lebar membuat seluruh halaman bisa
   digeser ke samping. Wadah yang memang perlu digeser (tabel, bilah nav)
   sudah punya overflow-x sendiri di atas. */
@media (max-width: 768px) {
    /* clip, bukan hidden: 'hidden' membuat wadah gulir baru dan mematahkan
       position:sticky pada navbar/sidebar. 'clip' tidak. */
    html, body { max-width: 100%; overflow-x: clip; }
    img, video, canvas { max-width: 100%; height: auto; }
    .card, .info-usaha, .pengurus-item, .kbli-item { max-width: 100%; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
    /* Kata panjang tanpa spasi (URL, nama berkas) tidak mendorong lebar.
       Dipakai 'break-word', BUKAN 'anywhere': 'anywhere' ikut mengecilkan
       lebar minimum elemen, sehingga sel tabel bisa menyusut sampai selebar
       satu huruf dan tulisannya menumpuk vertikal. */
    .card, .pengurus-item, .kbli-item, .info-saham-text { overflow-wrap: break-word; }
}

/* Ponsel kecil: rapatkan jalur merek agar ruang layar tersisa untuk formulir */
@media (max-width: 560px) {
    .app-layout .sidebar-header { padding: 8px 14px !important; }
    .app-layout .sidebar-header .logo-icon img,
    .app-layout .sidebar-header > div:first-child img { width: 24px !important; }
    .app-layout .sidebar-header .logo-text { font-size: 16px !important; }
    .app-layout .sidebar-footer { padding: 0 14px 8px !important; gap: 10px; }
    .app-layout .progress-info { font-size: 12px !important; }
    .app-layout .sidebar-nav { padding: 9px 14px !important; gap: 7px; }
    .app-layout .nav-item { min-height: 42px; padding: 8px 14px !important; font-size: 14px !important; }
    .card[id^="sec-"], [id^="sec-"] { scroll-margin-top: 136px; }
}

@media (max-width: 480px) {
    .btn-submit, button[type="submit"] { font-size: 16.5px !important; }
    .sebutan-toggle > * { flex: 1 1 calc(50% - 5px); }
    .modal-delete-actions, .modal-logout-actions { flex-direction: column; }
    .modal-delete-actions > *, .modal-logout-actions > * { width: 100%; justify-content: center; }
}

/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .app-layout .sidebar, .navbar, .btn-submit, .btn-add, .modal-overlay { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; }
    body { background: #fff !important; }
}