/* ===================================================================
   Gaya aplikasi KSP - tampilan web modern.
   Nama kelas sengaja dipertahankan sama seperti versi sebelumnya
   (window, window-title, btn, form-grid, badge, dst) supaya seluruh
   halaman Blade yang sudah ada langsung ikut tampilan baru tanpa
   perlu diubah satu per satu.
   =================================================================== */

/* ===== 1. Token desain ===== */
:root {
    --brand-50:  #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-900: #1e3a8a;

    --ink:        #0f172a;
    --ink-soft:   #334155;
    --muted:      #64748b;
    --muted-soft: #94a3b8;

    --surface:     #ffffff;
    --surface-alt: #f8fafc;
    --canvas:      #eef1f6;
    --line:        #e5e9f0;
    --line-strong: #cbd5e1;

    --ok-bg:   #ecfdf5;  --ok-line:   #a7f3d0;  --ok-ink:   #047857;
    --bad-bg:  #fef2f2;  --bad-line:  #fecaca;  --bad-ink:  #b91c1c;

    --r-sm: 7px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .05);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, .16), 0 4px 10px rgba(15, 23, 42, .07);
    --ring: 0 0 0 3px rgba(37, 99, 235, .18);

    --page-w: 1180px;
    --form-label-w: 190px;
    --form-gap: 16px;

    /* Tema DataTables v2 (variabel bawaan paketnya) */
    --dt-row-hover: 37, 99, 235;
    --dt-row-hover-alpha: .05;
    --dt-row-stripe: 15, 23, 42;
    --dt-row-stripe-alpha: .014;
    --dt-column-ordering-alpha: .012;
    --dt-row-selected: 37, 99, 235;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { line-height: 1.25; letter-spacing: -.01em; }

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Scrollbar tipis agar tidak mengganggu tampilan */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid transparent;
    border-radius: var(--r-pill);
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover { background-color: var(--muted-soft); background-clip: content-box; }

/* ===== 2. Header aplikasi ===== */
.titlebar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(120deg, #16307a 0%, var(--brand-700) 55%, #2f6fe4 100%);
    color: #fff;
    padding: 0 20px;
    height: 56px;
    flex: 0 0 auto;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
}

.titlebar .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--r-md);
    /* Ubin putih, bukan putih tembus pandang: biru pada lambang koperasi
       (#0000EB) nyaris tak terlihat di atas bilah judul yang biru tua. */
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--brand-700);
    /* Berlaku saat .brand-mark berupa <img> logo koperasi. */
    padding: 3px;
    object-fit: contain;
}

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-text strong {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-text small {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.3;
}

.titlebar-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.titlebar .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.titlebar .chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .22);
}

/* ===== Ikon (sprite SVG di partials/icons.blade.php) ===== */
.ico {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    vertical-align: -3px;
    color: inherit;
}

/* ===== 3. Menu bar ===== */
.menubar {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 12px;
    flex: 0 0 auto;
    user-select: none;
    position: relative;
    z-index: 50;
}

.menubar ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.menubar-item { position: relative; display: flex; align-items: center; }

.menubar-item > a {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0;
    padding: 7px 12px;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

.menubar-item > a:hover { background: var(--surface-alt); color: var(--ink); }

.menubar-item.open > a {
    background: var(--brand-50);
    color: var(--brand-700);
}

.menubar-item > a .ico { opacity: .6; transition: opacity .12s ease; }
.menubar-item > a:hover .ico, .menubar-item.open > a .ico { opacity: 1; }

.menubar-item > a:focus-visible { outline: none; box-shadow: var(--ring); }

.menubar .caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4.5px solid currentColor;
    opacity: .5;
}

.menubar .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    flex-direction: column;
    min-width: 258px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin-top: 2px;
    gap: 1px;
}

/* Anak langsung saja: tanpa ">" aturan ini ikut membuka submenu tingkat tiga
   di dalamnya, sehingga seluruh kelompok tampil terbentang sekaligus. */
.menubar-item.open > .dropdown {
    display: flex;
    animation: dropdown-in .13s ease-out;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.menubar .dropdown li { width: 100%; }

.menubar .dropdown a,
.menubar .dropdown .disabled {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .1s ease, color .1s ease;
}

.menubar .dropdown a:hover {
    background: var(--brand-600);
    color: #fff;
}

.menubar .dropdown .disabled { color: var(--muted-soft); cursor: not-allowed; }

/* Ikon item lebih redup dari teksnya, lalu ikut memutih saat barisnya di-hover. */
.menubar .dropdown a .ico { color: var(--muted); transition: color .1s ease; }
.menubar .dropdown a:hover .ico { color: #fff; }
.menubar .dropdown .disabled .ico { opacity: .7; }

/* --- Kelompok (tingkat tiga) --------------------------------------------
   Baris kelompok TIDAK menuju halaman: ia hanya membuka daftar di sampingnya.
   Karena itu <button>, bukan <a> - dan tampil serupa item biasa supaya
   barisnya tetap sejajar, hanya ditambah tanda panah di ujung kanan. */
.menubar .dropdown li.has-submenu { position: relative; }

.menubar .submenu-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 7px 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 13.5px;
    line-height: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .1s ease, color .1s ease;
}

.menubar .submenu-toggle .ico { color: var(--muted); transition: color .1s ease; }
.menubar .submenu-toggle .submenu-caret { margin-left: auto; width: 14px; height: 14px; opacity: .6; }

.menubar .has-submenu:hover > .submenu-toggle,
.menubar .has-submenu.open > .submenu-toggle {
    background: var(--brand-600);
    color: #fff;
}

.menubar .has-submenu:hover > .submenu-toggle .ico,
.menubar .has-submenu.open > .submenu-toggle .ico { color: #fff; }

.menubar .submenu-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

/* Tanpa jarak ke induknya: celah sekecil apa pun membuat submenu tertutup
   saat kursor menyeberang. "-7px" = padding + border dropdown induk, supaya
   baris pertama submenu sejajar dengan baris kelompoknya. */
.menubar .submenu {
    top: -7px;
    left: 100%;
    margin: 0;
}

.menubar .has-submenu:hover > .submenu,
.menubar .has-submenu.open > .submenu {
    display: flex;
    animation: dropdown-in .13s ease-out;
}

/* Dibalik ke kiri bila ruang di kanan layar tidak cukup (menu paling kanan). */
.menubar .has-submenu.flip > .submenu { left: auto; right: 100%; }

/* Kode pintasan di ujung kanan tiap item - petunjuk apa yang harus diketik
   di kotak pintasan (Ctrl+K). Sengaja redup: ia keterangan, bukan isi menu. */
.menubar .dropdown .kode {
    margin-left: auto;
    padding-left: 22px;
    color: var(--muted-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}

.menubar .dropdown a:hover .kode { color: rgba(255, 255, 255, .8); }

.menubar-spacer { flex: 1 1 auto; }

.menubar-user > a { font-weight: 600; color: var(--ink); }
.menubar-user .dropdown { left: auto; right: 0; }

.menubar-user .avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-900));
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

/* ===== 4. Area konten ===== */
.content {
    flex: 1 1 auto;
    overflow: auto;
    padding: 22px 20px 32px;
    scroll-behavior: smooth;
}

/* ===== Breadcrumb ===== */
.breadcrumb {
    max-width: var(--page-w);
    margin: 0 auto 14px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    min-width: 0;
}

.breadcrumb a,
.breadcrumb span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    color: var(--muted);
    text-decoration: none;
}

.breadcrumb a { transition: background-color .12s ease, color .12s ease; }
.breadcrumb a:hover { background: var(--surface); color: var(--brand-700); }
.breadcrumb a:focus-visible { outline: none; box-shadow: var(--ring); }

.breadcrumb [aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.breadcrumb .ico { width: 14px; height: 14px; }
.breadcrumb .sep { color: var(--muted-soft); opacity: .7; }

/* Panel konten (dulu "window" gaya MDI, sekarang kartu) */
.window {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    margin: 0 auto 18px;
    max-width: var(--page-w);
    overflow: hidden;
    animation: card-in .2s ease-out both;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.window.narrow { max-width: 680px; }

.window-title {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: 13px 18px;
}

/* overflow-x: tabel yang lebih lebar dari kartu tetap bisa digeser, tidak
   terpotong oleh sudut membulat .window (overflow: hidden). */
.window-body { padding: 18px; overflow-x: auto; }

/* Dua window-body berurutan: rapatkan jaraknya */
.window-body + .window-body { padding-top: 0; }

/* Pola "window-body toolbar" (baris filter/cetak di atas isi) jadi strip sendiri */
.window-body.toolbar {
    margin-bottom: 0;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}

.window-body.toolbar + .window-body { padding-top: 18px; }

/* ===== 5. Status bar ===== */
.statusbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 7px 18px;
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--muted);
}

.statusbar span {
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-alt);
    white-space: nowrap;
}

.statusbar span strong { color: var(--ink-soft); font-weight: 600; }

.statusbar .grow { flex: 1 1 auto; background: none; padding: 0; }

/* ===== 6. Toolbar & tombol ===== */
.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.toolbar label { color: var(--muted); font-size: 13px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1.2;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-xs);
    padding: 8px 15px;
    cursor: pointer;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

.btn:hover {
    background: var(--surface-alt);
    border-color: var(--muted-soft);
    color: var(--ink);
}

.btn:active { transform: translateY(1px); box-shadow: none; }

.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn:disabled,
.btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .28);
}

.btn-primary:hover {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, .28);
}

.btn-danger { color: var(--bad-ink); border-color: var(--bad-line); background: var(--surface); }

.btn-danger:hover { background: var(--bad-bg); border-color: #f87171; color: var(--bad-ink); }

.btn-sm { padding: 4px 10px; font-size: 12.5px; border-radius: 6px; gap: 5px; }

/* Ikon tombol sedikit lebih kecil & redup dari teksnya supaya teks tetap utama. */
.btn .ico { width: 15px; height: 15px; opacity: .75; }
.btn:hover .ico { opacity: 1; }
.btn-primary .ico { opacity: .9; }
.btn-sm .ico { width: 14px; height: 14px; }

/* ===== 7. Form ===== */
.form-grid {
    display: grid;
    grid-template-columns: var(--form-label-w) minmax(220px, 440px);
    gap: 12px var(--form-gap);
    align-items: center;
}

.form-grid label {
    text-align: right;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
}

.form-grid .full { grid-column: 2; }

input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="number"], input[type="search"],
input[type="tel"], select, textarea {
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 8px 11px;
    width: 100%;
    background: var(--surface);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

input::placeholder, textarea::placeholder { color: var(--muted-soft); }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--muted-soft);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}

input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background: var(--surface-alt);
    color: var(--muted);
    cursor: not-allowed;
}

select {
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

textarea { line-height: 1.55; resize: vertical; }

/* Angka rupiah lebih rapi dengan digit selebar sama */
input[type="number"] { font-variant-numeric: tabular-nums; }

input[type="checkbox"], input[type="radio"] {
    width: 15px;
    height: 15px;
    accent-color: var(--brand-600);
    cursor: pointer;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkbox-list label {
    text-align: left;
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
}

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    margin: 0 0 16px;
    padding: 14px 16px 16px;
}

legend {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-soft);
    padding: 0 8px;
}

.form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-grid + .form-actions { margin-left: calc(var(--form-label-w) + var(--form-gap)); }

.error-text {
    color: var(--bad-ink);
    font-size: 12.5px;
    grid-column: 2;
}

.hint {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ===== 8. Alert ===== */
.alert {
    max-width: var(--page-w);
    margin: 0 auto 14px;
    padding: 12px 16px;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    box-shadow: var(--shadow-xs);
    animation: card-in .2s ease-out both;
}

.alert-status { background: var(--ok-bg);  border-color: var(--ok-line);  border-left-color: #10b981; color: var(--ok-ink); }
.alert-error  { background: var(--bad-bg); border-color: var(--bad-line); border-left-color: #ef4444; color: var(--bad-ink); }

/* ===== 9. Tabel & DataTables =====
   Satu tampilan untuk semua tabel: kotak luar, garis antarbaris, dan garis
   antarkolom - grid penuh seperti tabel aplikasi lawas.

   `table.display` ikut disebut, bukan hanya `table.dataTable`: puluhan halaman
   memakai kelas itu untuk tabel STATIS yang tidak pernah di-init DataTables,
   sementara CSS DataTables hanya menata tabel yang sudah di-init (`.dataTable`
   dipasang oleh JS-nya). Tanpa baris ini tabel-tabel tersebut tampil tanpa
   garis sama sekali. */
table.dataTable,
table.display,
table.plain,
table.form-table,
table.dash-info {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    font-size: 13px;
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
table.display > thead > tr > th,
table.display > thead > tr > td,
table.plain > thead > tr > th,
table.plain > thead > tr > td {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: left;
}

table.dataTable > tbody > tr > *,
table.display > tbody > tr > *,
table.plain > tbody > tr > *,
table.form-table > tbody > tr > *,
table.dash-info > tbody > tr > * {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}

/* Garis antarbaris: dipasang di atas tiap baris kecuali yang pertama, supaya
   tidak menggandakan garis bawah kepala tabel maupun kotak luarnya. */
table.dataTable > tbody > tr:not(:first-child) > *,
table.display > tbody > tr:not(:first-child) > *,
table.plain > tbody > tr:not(:first-child) > *,
table.form-table > tbody > tr:not(:first-child) > *,
table.dash-info > tbody > tr:not(:first-child) > * {
    border-top: 1px solid var(--line);
}

/* Garis antarkolom: kolom terakhir dilewati karena kotak luar sudah menutupnya. */
table.dataTable > thead > tr > *:not(:last-child),
table.dataTable > tbody > tr > *:not(:last-child),
table.dataTable > tfoot > tr > *:not(:last-child),
table.display > thead > tr > *:not(:last-child),
table.display > tbody > tr > *:not(:last-child),
table.display > tfoot > tr > *:not(:last-child),
table.plain > thead > tr > *:not(:last-child),
table.plain > tbody > tr > *:not(:last-child),
table.plain > tfoot > tr > *:not(:last-child),
table.form-table > tbody > tr > *:not(:last-child),
table.dash-info > tbody > tr > *:not(:last-child) {
    border-right: 1px solid var(--line);
}

table.dataTable > tfoot > tr > *,
table.display > tfoot > tr > *,
table.plain > tfoot > tr > * {
    background: var(--surface-alt);
    border-top: 1px solid var(--line-strong);
    padding: 9px 12px;
    font-weight: 600;
}

table.dataTable > tbody > tr:hover > *,
table.display > tbody > tr:hover > *,
table.plain > tbody > tr:hover > * { background: var(--brand-50); }

table.dataTable.row-border > tbody > tr > *,
table.dataTable.display > tbody > tr > * { border-top-color: var(--line); }

table.dataTable td.dt-right, table.dataTable th.dt-right,
td.dt-right, th.dt-right { font-variant-numeric: tabular-nums; }

table.dataTable > tbody > tr:hover > * { transition: box-shadow .1s ease; }

/* Tabel rincian berpasangan label-nilai: kolom kiri (<th> di dalam <tbody>)
   diberi latar redup supaya terbaca sebagai label, bukan sebagai data. */
table.form-table > tbody > tr > th,
table.dash-info > tbody > tr > td:first-child {
    width: 190px;
    background: var(--surface-alt);
    color: var(--muted);
    font-weight: 600;
}

/* Kontrol DataTables (cari, jumlah baris, info, halaman) */
div.dt-container .dt-search input,
div.dt-container select.dt-input {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    font-size: 13px;
}

div.dt-container .dt-search input:focus,
div.dt-container select.dt-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}

div.dt-container .dt-search, div.dt-container .dt-length { color: var(--muted); font-size: 13px; }
div.dt-container .dt-info { color: var(--muted); font-size: 12.5px; padding-top: 12px; }

div.dt-container .dt-layout-row { margin-bottom: 4px; }

div.dt-container .dt-paging { padding-top: 10px; }

div.dt-container .dt-paging .dt-paging-button {
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-soft) !important;
    font-size: 13px;
    min-width: 32px;
    padding: 5px 10px;
    margin: 0 2px;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--surface-alt) !important;
    border-color: var(--line);
    color: var(--ink) !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--brand-600) !important;
    border-color: var(--brand-600);
    color: #fff !important;
    font-weight: 600;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    background: transparent !important;
    border-color: transparent;
    color: var(--muted-soft) !important;
}

div.dt-container .dt-processing {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    background: var(--surface);
    color: var(--ink-soft);
    font-weight: 500;
}

/* Tabel sederhana non-DataTables: seluruh tampilannya kini satu tempat dengan
   tabel lain di bagian 9, supaya tidak ada dua gaya tabel yang berbeda. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.badge-on  { background: var(--ok-bg);  border-color: var(--ok-line);  color: var(--ok-ink); }
.badge-off { background: #f1f5f9;       border-color: #e2e8f0;         color: var(--muted); }
.badge-bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }

.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

/* Kode OTP di Setup > Monitor OTP. Dibuat besar & berjarak supaya petugas
   bisa membacakannya lewat telepon tanpa salah baca. */
.otp-kode {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-sm);
    padding: 2px 10px;
    cursor: pointer;
    user-select: all;
}

.otp-kode:hover { background: var(--brand-100); }
.otp-kode.tersalin { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.otp-sisa { font-variant-numeric: tabular-nums; }

/* ===== 10. Halaman login ===== */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(59, 130, 246, .45), transparent 60%),
        radial-gradient(760px 480px at 105% 108%, rgba(14, 165, 233, .38), transparent 58%),
        linear-gradient(140deg, #0f2260 0%, #16307a 45%, #1d4ed8 100%);
}

.login-dialog {
    width: 400px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(8, 15, 40, .45), 0 6px 16px rgba(8, 15, 40, .22);
    overflow: hidden;
    animation: login-in .28s ease-out both;
}

@keyframes login-in {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* Kepala kartu login memakai warna brand, bukan gaya window biasa */
.login-dialog .window-title {
    justify-content: center;
    background: linear-gradient(120deg, #16307a, var(--brand-700));
    border-bottom: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 12px 18px;
}

.login-dialog .window-body { padding: 26px 28px 28px; }

.login-dialog .form-grid { grid-template-columns: 1fr; gap: 6px; }

.login-dialog .form-grid label {
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-top: 10px;
}

.login-dialog .form-grid label:first-of-type { margin-top: 0; }

.login-dialog .error-text { grid-column: 1; }

.login-dialog input { padding: 10px 12px; }

.login-dialog .form-actions { margin-left: 0; }

.login-dialog .btn { width: 100%; padding: 10px 16px; font-size: 14px; }

.login-koperasi { text-align: center; margin-bottom: 22px; }

/* Lambang koperasi. Latarnya transparan dan kartu login berlatar putih, jadi
   tidak perlu ubin - berbeda dengan .brand-mark di bilah judul yang biru tua. */
.login-koperasi .logo {
    display: block;
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    object-fit: contain;
}

.login-koperasi .nama {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.015em;
}

/* ===== 11. Log ===== */
pre.log {
    background: #0f172a;
    color: #cbd5e1;
    border-radius: var(--r-md);
    padding: 14px 16px;
    overflow: auto;
    max-height: 65vh;
    font-family: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

/* ===== 12. Dashboard ===== */
.dash-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dash-hero .avatar-lg {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--brand-600), var(--brand-900));
    box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.dash-hero .greet { font-size: 12.5px; color: var(--muted); }

.dash-hero .who {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.dash-tile {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-alt);
    padding: 14px 16px;
}

.dash-tile .label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.dash-tile .value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
    word-break: break-word;
}

.dash-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--brand-100);
    border-radius: var(--r-md);
    background: var(--brand-50);
    color: #1e40af;
    font-size: 12.5px;
    line-height: 1.55;
}

/* Tabel info lama (masih dipakai di beberapa halaman) - tampilannya ikut
   tabel lain di bagian 9; lebarnya dibatasi karena isinya hanya label & nilai. */
.dash-info { max-width: 620px; }

/* ===== 12b. Kotak pintasan halaman (Ctrl+K / F2) ===== */
.petunjuk-pintasan { display: flex; align-items: center; gap: 4px; opacity: .85; }

.pintasan {
    position: fixed;
    inset: 0;
    z-index: 99000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: rgba(15, 23, 42, .38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pintasan[hidden] { display: none; }

.pintasan-kotak {
    width: 100%;
    max-width: 560px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: card-in .16s ease-out both;
}

.pintasan-cari {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.pintasan-cari .ico { color: var(--muted); flex: 0 0 auto; }

.pintasan-cari input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 14.5px;
}

.pintasan-cari input:focus { outline: none; }

.pintasan-hasil {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
}

.pintasan-hasil li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink-soft);
}

.pintasan-hasil li.terpilih { background: var(--brand-600); color: #fff; }

.pintasan-hasil .kode {
    flex: 0 0 58px;
    color: var(--brand-700);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}

.pintasan-hasil li.terpilih .kode { color: #fff; }

.pintasan-hasil .jalur { margin-left: auto; padding-left: 14px; color: var(--muted-soft); font-size: 11.5px; }
.pintasan-hasil li.terpilih .jalur { color: rgba(255, 255, 255, .8); }

.pintasan-kosong { padding: 18px 14px; color: var(--muted); font-size: 13px; text-align: center; }

.pintasan-kaki {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    background: var(--surface-alt);
    color: var(--muted);
    font-size: 11.5px;
}

.pintasan kbd,
.statusbar kbd {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
}

.statusbar kbd { min-width: 0; padding: 0 4px; border-bottom-width: 1px; font-size: 10px; }

/* ===== 13. Overlay proses (mengunci layar selama aksi berjalan) ===== */
#app-loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 23, 42, .38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: progress;
}

#app-loading.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sesaat setelah aksi dimulai layar sudah terkunci, tetapi kotaknya belum
   ditampilkan supaya aksi yang selesai cepat tidak terlihat berkedip. */
#app-loading.is-pending {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#app-loading.is-pending .loading-box { visibility: hidden; }

#app-loading .loading-box {
    width: 330px;
    max-width: 90vw;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: card-in .16s ease-out both;
}

#app-loading .window-title {
    background: var(--surface-alt);
    font-size: 13px;
    padding: 11px 16px;
}

#app-loading .loading-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
}

#app-loading .spinner {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 3px solid var(--brand-100);
    border-top-color: var(--brand-600);
    border-radius: 50%;
    animation: app-spin .8s linear infinite;
}

@keyframes app-spin {
    to { transform: rotate(360deg); }
}

#app-loading .loading-text { font-weight: 600; font-size: 13.5px; }

#app-loading .loading-note {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

/* ===== 14. Layar sempit ===== */
@media (max-width: 820px) {
    :root { --form-label-w: 100%; }

    .content { padding: 16px 12px 26px; }
    .window-body { padding: 14px; }

    .form-grid { grid-template-columns: 1fr; gap: 4px; }
    .form-grid label { text-align: left; margin-top: 8px; }
    .form-grid .full, .error-text { grid-column: 1; }
    .form-grid + .form-actions { margin-left: 0; }

    .titlebar { padding: 0 14px; }
    .brand-text small { display: none; }
    .menubar { overflow-x: auto; padding: 0 8px; }
    .statusbar { overflow-x: auto; padding: 7px 12px; }
    /* Tidak ada papan ketik untuk ditekan; kodenya tetap tampil di menu. */
    .petunjuk-pintasan { display: none; }

    /* Layar sempit: submenu tidak melayang ke samping - ruangnya tidak ada dan
       menubar-nya sendiri sudah bisa digeser - melainkan membuka ke bawah
       sebagai daftar menjorok, dan hanya lewat ketukan karena hover tidak ada
       pada layar sentuh. */
    .menubar .submenu {
        position: static;
        min-width: 0;
        padding: 2px 0 2px 16px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    .menubar .has-submenu:hover > .submenu { display: none; }
    .menubar .has-submenu.open > .submenu { display: flex; }
    .menubar .has-submenu:hover > .submenu-toggle { background: none; color: var(--ink-soft); }
    .menubar .has-submenu:hover > .submenu-toggle .ico { color: var(--muted); }
    .menubar .has-submenu.open > .submenu-toggle { background: var(--brand-600); color: #fff; }
    .menubar .has-submenu.open > .submenu-toggle .ico { color: #fff; }
    .menubar .has-submenu.open > .submenu-toggle .submenu-caret { transform: rotate(90deg); }
}

/* ===== 15. Preferensi gerakan ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    #app-loading .spinner { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}

/* ===== 16. Cetak ===== */
@media print {
    body { background: #fff; }

    .titlebar, .menubar, .statusbar, .breadcrumb, .no-print, .alert, #app-loading { display: none !important; }

    .app { height: auto; display: block; }
    .content { overflow: visible; padding: 0; }

    .window {
        border: none;
        border-radius: 0;
        box-shadow: none;
        max-width: none;
        margin: 0;
        animation: none;
    }

    .window-title { background: none; border-bottom: 1px solid #999; padding: 0 0 6px; }
    .window-body { padding: 0; overflow: visible; background: none; border: none; }
}