/* =====================================================================
   GofixBahasa · Tema Gofix (26 Sep 2026)
   Permintaan JEND: warna saat diklik, tulisan tebal, garis tabel, garis pembatas.
   Acuan warna diambil dari acuan tampilan lama (biru #369BD7, hijau aktif #22B534,
   judul kolom #EBEBEB, garis sel #B1BABF, huruf system-ui).
   Hanya berlaku di tema terang (data-theme="light"). Tidak mengubah kode inti.
   ===================================================================== */
html[data-theme="light"] {
    --ez-biru: #369bd7;
    --ez-biru-tua: #2a80b6;
    --ez-biru-gelap: #1f6690;
    --ez-hijau: #22b534;
    --ez-hijau-tua: #178a26;
    --ez-garis: #b1babf;
    --ez-garis-muda: #d5dadd;
    --ez-th: #ebebeb;
    --ez-teks: #2f3336;
    --ez-teks-lembut: #5e5f61;
    --ez-latar: #f4f6f8;
    --ez-belang: #f5f6f7;
    --ez-sorot: #e3f1fb;
    --ez-klik: #c9e3f6;
    --ez-pilih: #fff3c4;
    --ez-samping: #1f6fa5;
    --ez-samping-sub: #185a87;
    --ez-samping-sorot: #144c73;

    /* variabel tema NexoPOS diarahkan ke warna toko lama */
    --color-primary: var(--ez-biru);
    --color-secondary: var(--ez-biru-tua);
    --color-tertiary: var(--ez-biru-gelap);
    --color-info-secondary: var(--ez-biru);
    --color-info-tertiary: var(--ez-biru-tua);
    --color-success-tertiary: var(--ez-hijau-tua);
    --color-surface: var(--ez-latar);
    --color-typography: var(--ez-teks);
    --color-fontcolor: var(--ez-teks);
    --color-fontcolor-soft: var(--ez-teks-lembut);
    --color-box-edge: var(--ez-garis-muda);
    --color-input-background: #ffffff;
    --color-input-edge: var(--ez-garis);
    --color-input-button: #ffffff;
    --color-input-button-hover: var(--ez-sorot);
    --color-input-button-active: var(--ez-klik);
    --color-button-hover: var(--ez-sorot);
    --color-button-active: var(--ez-klik);
    --color-crud-button-edge: var(--ez-garis);
    --color-crud-input-background: #ffffff;
    --color-table-th: var(--ez-th);
    --color-table-th-edge: var(--ez-garis);
    --color-tab-active: #ffffff;
    --color-tab-active-border: var(--ez-garis);
    --color-tab-inactive: var(--ez-th);
    --color-tab-table-th: var(--ez-th);
    --color-tab-table-th-edge: var(--ez-garis);
    --color-floating-menu-hover: var(--ez-sorot);
    --color-floating-menu-selected: var(--ez-klik);
    --color-aside-background: var(--ez-samping);
    --color-aside-menu-background: var(--ez-samping);
    --color-aside-menu-background-hover: var(--ez-samping-sorot);
    --color-aside-submenu-background: var(--ez-samping-sub);
    --color-aside-submenu-background-hover: var(--ez-samping-sorot);
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

html[data-theme="light"] body { font-family: var(--font-sans); color: var(--ez-teks); }

/* ---------- MENU SAMPING: biru toko lama, menu terbuka hijau, garis pembatas ---------- */
html[data-theme="light"] #dashboard-aside > div { background: var(--ez-samping); }
html[data-theme="light"] #aside-menu > li,
html[data-theme="light"] #aside-menu > div { border-bottom: 1px solid rgba(255,255,255,.14); }
html[data-theme="light"] #dashboard-aside a.ns-aside-menu { color: #fff; border-radius: 0 .5rem .5rem 0; }
html[data-theme="light"] #dashboard-aside a.ns-aside-menu.normal:hover { background: var(--ez-samping-sorot); }
html[data-theme="light"] #dashboard-aside a.ns-aside-menu.toggled { background: var(--ez-hijau-tua); border-color: var(--ez-hijau); color: #fff; }
html[data-theme="light"] #dashboard-aside a.ns-aside-menu:active { background: var(--ez-hijau); }
html[data-theme="light"] #aside-menu a.ns-aside-submenu { color: #eef6fc; border-left-color: var(--ez-hijau); border-bottom: 1px solid rgba(255,255,255,.08); }
html[data-theme="light"] #aside-menu a.ns-aside-submenu:hover { background: var(--ez-samping-sorot); color: #fff; }
html[data-theme="light"] #aside-menu a.ns-aside-submenu:active { background: var(--ez-biru); color: #fff; }
html[data-theme="light"] #aside-menu a.ns-aside-submenu.active { background: #ffffff; color: var(--ez-biru-gelap); font-weight: 700; border-left-color: var(--ez-hijau); }
html[data-theme="light"] #aside-menu [id^="submenu-grup--"] a.ns-aside-submenu { background: var(--ez-samping-sub); font-weight: 700; color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
html[data-theme="light"] #aside-menu [id^="submenu-grup--"] a.ns-aside-submenu:hover { background: var(--ez-samping-sorot); }
html[data-theme="light"] #aside-menu [id^="submenu-isi--"] a.ns-aside-submenu { background: #164f78; font-weight: 400; }
html[data-theme="light"] #aside-menu [id^="submenu-isi--"] a.ns-aside-submenu:hover { background: var(--ez-samping-sorot); }
html[data-theme="light"] #aside-menu [id^="submenu-isi--"] a.ns-aside-submenu.active { background: #ffffff; color: var(--ez-biru-gelap); font-weight: 700; }

/* ---------- JUDUL HALAMAN + garis pembatas di bawahnya ---------- */
html[data-theme="light"] #dashboard-body .page-inner-header { border-bottom: 1px solid var(--ez-garis-muda); padding-bottom: .5rem; margin-bottom: .75rem; }
html[data-theme="light"] #dashboard-body .page-inner-header h3 { color: #3a3d40; font-weight: 600; }

/* ---------- TABEL: garis penuh tiap sel, judul kolom tebal, baris belang ---------- */
html[data-theme="light"] table.ns-table { border-collapse: collapse; border: 1px solid var(--ez-garis); background: #fff; }
html[data-theme="light"] table.ns-table thead th {
    background: var(--ez-th); color: #111; font-weight: 700;
    border: 1px solid var(--ez-garis); padding: 8px 8px; font-size: 13px; vertical-align: middle;
}
html[data-theme="light"] table.ns-table tbody td,
html[data-theme="light"] table.ns-table tfoot td {
    border: 1px solid var(--ez-garis); padding: 6px 8px; color: var(--ez-teks); font-size: 13.5px; vertical-align: middle;
}
html[data-theme="light"] table.ns-table tbody tr.ns-table-row:nth-child(odd) > td { background: var(--ez-belang); }
html[data-theme="light"] table.ns-table tbody tr.ns-table-row:nth-child(even) > td { background: #ffffff; }
html[data-theme="light"] table.ns-table tbody tr.ns-table-row:hover > td { background: var(--ez-sorot); }
html[data-theme="light"] table.ns-table tbody tr.ns-table-row:active > td { background: var(--ez-klik); }
html[data-theme="light"] table.ns-table tbody tr.ns-table-row:has(.ns-checkbox.checked) > td { background: var(--ez-pilih); }
html[data-theme="light"] table.ns-table tbody td a { color: var(--ez-biru); }
html[data-theme="light"] table.ns-table tbody td a:hover { color: var(--ez-biru-gelap); text-decoration: underline; }
/* tabel biasa di laporan / halaman modul */
html[data-theme="light"] #dashboard-body table:not(.ns-table) { border-collapse: collapse; }
html[data-theme="light"] #dashboard-body table:not(.ns-table) th { background: var(--ez-th); font-weight: 700; color: #111; border: 1px solid var(--ez-garis); }
html[data-theme="light"] #dashboard-body table:not(.ns-table) td { border: 1px solid var(--ez-garis); }

/* kotak tabel CRUD: garis luar + bilah atas */
html[data-theme="light"] #crud-table { border: 1px solid var(--ez-garis-muda); background: #fff; }
html[data-theme="light"] #crud-table-header { border-bottom: 1px solid var(--ez-garis-muda); }
html[data-theme="light"] #crud-table .footer { border-top: 1px solid var(--ez-garis-muda); }

/* ---------- TOMBOL: warna jelas saat disorot & diklik ---------- */
html[data-theme="light"] .ns-crud-button,
html[data-theme="light"] .ns-crud-input-button { border-color: var(--ez-garis); background: #fff; color: var(--ez-teks); }
html[data-theme="light"] .ns-crud-button:hover,
html[data-theme="light"] .ns-crud-input-button:hover { background: var(--ez-biru); border-color: var(--ez-biru); color: #fff; }
html[data-theme="light"] .ns-crud-button:active,
html[data-theme="light"] .ns-crud-input-button:active,
html[data-theme="light"] .ns-crud-button.active { background: var(--ez-biru-gelap); border-color: var(--ez-biru-gelap); color: #fff; }
html[data-theme="light"] .ns-inset-button { border-color: var(--ez-garis); background: #fff; }
html[data-theme="light"] .ns-inset-button:hover { background: var(--ez-sorot); }
html[data-theme="light"] .ns-inset-button:active,
html[data-theme="light"] .ns-inset-button.active { background: var(--ez-biru); color: #fff; border-color: var(--ez-biru); }
html[data-theme="light"] .ns-button button,
html[data-theme="light"] .ns-button a { border: 1px solid var(--ez-garis); transition: background-color .1s ease; }
html[data-theme="light"] .ns-button.primary button,
html[data-theme="light"] .ns-button.primary a,
html[data-theme="light"] .ns-button.info button,
html[data-theme="light"] .ns-button.info a { background: var(--ez-biru); border-color: var(--ez-biru-tua); color: #fff; font-weight: 600; }
html[data-theme="light"] .ns-button.primary button:hover,
html[data-theme="light"] .ns-button.primary a:hover,
html[data-theme="light"] .ns-button.info button:hover,
html[data-theme="light"] .ns-button.info a:hover { background: var(--ez-biru-tua); }
html[data-theme="light"] .ns-button button:active,
html[data-theme="light"] .ns-button a:active { background: var(--ez-biru-gelap) !important; color: #fff !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
html[data-theme="light"] .ns-button.success button,
html[data-theme="light"] .ns-button.success a { background: var(--ez-hijau-tua); border-color: var(--ez-hijau-tua); color: #fff; }
html[data-theme="light"] .ns-action-button:hover { background: var(--ez-sorot); }
html[data-theme="light"] .ns-action-button:active { background: var(--ez-biru); color: #fff; }

/* ---------- FORM: label tebal, kotak isian putih bergaris, fokus biru ---------- */
html[data-theme="light"] .ns-input > label,
html[data-theme="light"] .ns-select > label,
html[data-theme="light"] .ns-textarea > label,
html[data-theme="light"] .ns-date > label,
html[data-theme="light"] .ns-switch > label,
html[data-theme="light"] .ns-media > label,
html[data-theme="light"] #crud-form label[for="title"] { font-weight: 700; color: #3a3d40; }
html[data-theme="light"] .ns-input input,
html[data-theme="light"] .ns-textarea textarea,
html[data-theme="light"] .ns-select select,
html[data-theme="light"] .ns-crud-input input { background: #fff; color: var(--ez-teks); }
html[data-theme="light"] .ns-input > div,
html[data-theme="light"] .ns-textarea > div,
html[data-theme="light"] .ns-select > div,
html[data-theme="light"] .ns-date > div { border-color: var(--ez-garis) !important; background: #fff; }
html[data-theme="light"] .ns-input > div:focus-within,
html[data-theme="light"] .ns-textarea > div:focus-within,
html[data-theme="light"] .ns-select > div:focus-within,
html[data-theme="light"] .ns-crud-input:focus-within { border-color: var(--ez-biru) !important; box-shadow: 0 0 0 3px rgba(54,155,215,.25); }
html[data-theme="light"] .ns-crud-input { border-color: var(--ez-biru); background: #fff; }
html[data-theme="light"] .ns-checkbox > div { border-color: var(--ez-garis); background: #fff; }
html[data-theme="light"] .ns-checkbox.checked > div { background: var(--ez-biru); border-color: var(--ez-biru); color: #fff; }
html[data-theme="light"] .ns-switch .selected { background: var(--ez-biru); color: #fff; }
html[data-theme="light"] .ns-switch .unselected:hover { background: var(--ez-sorot); }

/* ---------- KOTAK & TAB: garis pembatas jelas ---------- */
html[data-theme="light"] .ns-box { border: 1px solid var(--ez-garis-muda); }
html[data-theme="light"] .ns-box .ns-box-header { border-bottom: 1px solid var(--ez-garis-muda); background: #fafbfc; font-weight: 700; }
html[data-theme="light"] .ns-box .ns-box-footer { border-top: 1px solid var(--ez-garis-muda); }
html[data-theme="light"] .ns-tab .tab { border: 1px solid var(--ez-garis-muda); border-bottom: 0; font-weight: 600; }
html[data-theme="light"] .ns-tab .tab.active { background: #fff; color: var(--ez-biru-gelap); box-shadow: inset 0 3px 0 var(--ez-biru); }
html[data-theme="light"] .ns-tab .tab.inactive:hover { background: var(--ez-sorot); }
html[data-theme="light"] .ns-tab-item > div { border: 1px solid var(--ez-garis-muda); }
html[data-theme="light"] hr { border-color: var(--ez-garis-muda); }

/* ---------- tautan umum & fokus keyboard ---------- */
html[data-theme="light"] #dashboard-body a.text-primary,
html[data-theme="light"] #dashboard-body .text-info-tertiary { color: var(--ez-biru); }
html[data-theme="light"] :focus-visible { outline: 2px solid var(--ez-biru); outline-offset: 1px; }

/* ---------- perbaikan putaran 2 ---------- */
/* kotak cari di tabel CRUD: bergaris */
html[data-theme="light"] #crud-table .ns-crud-input { border: 1px solid var(--ez-garis); background: #fff; }
html[data-theme="light"] #crud-table .ns-crud-input:focus-within { border-color: var(--ez-biru); }
/* pilihan Aktif/Tidak Aktif tidak terlipat */
html[data-theme="light"] .ns-switch button, html[data-theme="light"] .ns-switch a, html[data-theme="light"] .ns-switch div { white-space: nowrap; }
/* bilah atas laporan (Muat, Cetak, filter, tanggal): bergaris, satu baris, warna saat diklik */
html[data-theme="light"] #report-section > .flex { flex-wrap: wrap; row-gap: .5rem; }
html[data-theme="light"] #report-section button { border: 1px solid var(--ez-garis); background: #fff; white-space: nowrap; box-shadow: none; }
html[data-theme="light"] #report-section button:hover { background: var(--ez-sorot); border-color: var(--ez-biru); }
html[data-theme="light"] #report-section button:active { background: var(--ez-biru); color: #fff; border-color: var(--ez-biru-tua); }
html[data-theme="light"] #report-section button:active i { color: #fff; }
/* garis putus-putus info laporan jadi garis tipis rapi */
html[data-theme="light"] #report-section .border-dashed { border-color: var(--ez-garis-muda); }