/* tema-oxygen.css — bentuk & aksen tema Oxygen (OxygenOS).
 *
 * Dimuat HANYA saat tema 'oxygen' aktif (tema_head_tag di tema_lib.php), dan
 * semua aturannya dikunci ke html[data-tema="oxygen"] — ganti tema lain dan
 * file ini tidak berpengaruh sama sekali. Warna permukaan tetap datang dari
 * variabel tema; file ini menambah apa yang tidak bisa dipikul variabel:
 * radius, pil menu, tombol, aksen hijau-teal.
 *
 * Prinsip: datar. Kedalaman dari jarak dan garis tipis, bukan bayangan.
 * Satu aksen (--ox-accent) dipakai hemat: item aktif, tombol utama, fokus.
 * Semua pemakaian aksen sebagai teks dijaga >=4,5:1 (token --ox-accent-d
 * di atas --ox-accent-soft = 5,7:1).
 *
 * Spesifisitas: awalan html[data-tema] (0,1,1) ditambah kelas halaman, supaya
 * menang atas <style> inline halaman tanpa !important.
 */

html[data-tema="oxygen"] {
    --accent:       var(--ox-accent);
    --accent-d:     var(--ox-accent-d);
    --accent-soft:  var(--ox-accent-soft);
    --accent-xsoft: #f0f8f5;
    --shadow-sm:    none;
    --r-sm:         var(--ox-r-sm);
    --bs-primary:   var(--ox-accent);
    --bs-primary-rgb: 10,127,99;
    --bs-link-color: var(--ox-accent-d);
    --bs-link-hover-color: var(--ox-accent);
    --bs-border-radius: var(--ox-r-sm);
    --bs-border-radius-lg: var(--ox-r-md);
    accent-color: var(--ox-accent);
}

/* ═══ Kerangka: sidebar & topbar ═══════════════════════════════════════ */
html[data-tema="oxygen"] .sidebar { box-shadow: none; border-right-color: var(--surface-brd); }
html[data-tema="oxygen"] .brand-logo { box-shadow: none; border-radius: 12px; }
html[data-tema="oxygen"] .brand-text { letter-spacing: .02em; }

html[data-tema="oxygen"] .nav-body { padding: 8px 10px; }
html[data-tema="oxygen"] .nav-group-btn {
    padding: 10px 10px 4px; font-size: .68rem; letter-spacing: .02em;
    text-transform: none; font-weight: 600; color: var(--app-muted);
}
html[data-tema="oxygen"] .nav-group-btn:hover { color: var(--ox-accent-d); }

/* Item menu jadi pil membulat; penanda aktif berupa isi, bukan garis kiri. */
html[data-tema="oxygen"] .nav-item-link {
    margin: 1px 0; padding: 9px 12px; border-radius: 12px;
    border-left: 0; font-size: .84rem; color: var(--app-ink-2);
}
html[data-tema="oxygen"] .nav-item-link:hover {
    background: var(--surface-hover); color: var(--app-ink); border-left: 0;
}
html[data-tema="oxygen"] .nav-item-link.active {
    background: var(--ox-accent-soft); color: var(--ox-accent-d);
    font-weight: 600; border-left: 0;
}
html[data-tema="oxygen"] .nav-item-link.active i { color: var(--ox-accent); }

html[data-tema="oxygen"] .topbar { box-shadow: none; background: var(--surface); }
html[data-tema="oxygen"] .topbar-path .current { text-transform: none; letter-spacing: 0; font-size: .95rem; }
html[data-tema="oxygen"] .topbar-icon-btn { border-radius: 12px; border-width: 1px; }
html[data-tema="oxygen"] .topbar-user {
    background: var(--surface-2); border-color: var(--surface-brd); border-radius: 999px;
}
html[data-tema="oxygen"] .topbar-user .avatar { background: var(--ox-accent); }
html[data-tema="oxygen"] .topbar-user .uname { color: var(--app-ink); }
html[data-tema="oxygen"] .btn-logout { border-radius: 12px; }

/* ═══ Master Data ══════════════════════════════════════════════════════ */
html[data-tema="oxygen"] .md-pg .md-head { padding-top: 26px; }
html[data-tema="oxygen"] .md-pg .md-eyebrow {
    color: var(--ox-accent-d); text-transform: none; letter-spacing: 0;
    font-size: .76rem; font-weight: 600;
}
html[data-tema="oxygen"] .md-pg .md-h1 {
    color: var(--app-ink); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em;
}
html[data-tema="oxygen"] .md-pg .md-sub { font-size: .84rem; }

html[data-tema="oxygen"] .md-pg .md-tabs {
    border-radius: var(--ox-r-lg); box-shadow: none; background: var(--surface);
}
/* Bilah tab = kontrol segmen: jalur abu, tab aktif menyala hijau. */
html[data-tema="oxygen"] .md-pg .md-tabbar {
    background: transparent; border-bottom: 1px solid var(--surface-brd);
    padding: 12px 14px;
}
html[data-tema="oxygen"] .md-pg .md-tbtn {
    border: 0; background: var(--surface-2); color: var(--app-ink-2);
    border-radius: 14px; font-weight: 600;
}
html[data-tema="oxygen"] .md-pg .md-tbtn:hover:not(.active) {
    background: var(--surface-3); color: var(--app-ink); border: 0;
}
html[data-tema="oxygen"] .md-pg .md-tbtn.active {
    background: var(--ox-accent); color: #fff; box-shadow: none; font-weight: 600;
}
html[data-tema="oxygen"] .md-pg .md-tbtn:focus-visible { outline: 3px solid var(--ox-accent); outline-offset: 2px; }
@media (min-width: 640px) {
    html[data-tema="oxygen"] .md-pg .md-tbtn { border-radius: 999px; }
}

html[data-tema="oxygen"] .md-pg .md-badge { background: var(--ox-accent-soft); color: var(--ox-accent-d); }
html[data-tema="oxygen"] .md-pg .md-flash { border-radius: var(--ox-r-md); }

/* Tombol: pil, datar. */
html[data-tema="oxygen"] .md-pg .md-btn { border-radius: 999px; font-weight: 600; padding: 0 20px; }
html[data-tema="oxygen"] .md-pg .md-btn-sm { padding: 0 14px; }
html[data-tema="oxygen"] .md-pg .md-btn-pri { background: var(--ox-accent); box-shadow: none; }
html[data-tema="oxygen"] .md-pg .md-btn-pri:hover { background: var(--ox-accent-d); filter: none; }
html[data-tema="oxygen"] .md-pg .md-btn-out {
    background: transparent; color: var(--ox-accent-d); border: 1px solid var(--app-field-brd);
}
html[data-tema="oxygen"] .md-pg .md-btn-out:hover {
    background: var(--ox-accent-soft); border-color: var(--ox-accent); color: var(--ox-accent-d);
}
html[data-tema="oxygen"] .md-pg .md-btn-edit { background: var(--surface-2); border-color: transparent; color: var(--app-ink); }
html[data-tema="oxygen"] .md-pg .md-btn-edit:hover { background: var(--surface-3); }
html[data-tema="oxygen"] .md-pg .md-btn-del { border-color: transparent; }
html[data-tema="oxygen"] .md-pg .md-btn-act { border-color: transparent; }
html[data-tema="oxygen"] .md-pg .md-btn-deact { background: var(--surface-2); border-color: transparent; }

/* Tabel: kepala kalem (bukan huruf kapital), baris lapang. */
html[data-tema="oxygen"] .md-pg .md-tbl-wrap { border-radius: var(--ox-r-md); box-shadow: none; background: var(--surface-data); }
html[data-tema="oxygen"] .md-pg .md-tbl th {
    text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 600;
    color: var(--app-muted); background: var(--surface-data-head); padding: 12px 16px;
}
html[data-tema="oxygen"] .md-pg .md-tbl td { padding: 13px 16px; }
html[data-tema="oxygen"] .md-pg .md-tbl tr:hover td { background: var(--surface-hover); }

/* Kartu rekening & penanda entitas. */
html[data-tema="oxygen"] .md-pg .md-ent-label {
    background: var(--ox-accent-soft); border-color: transparent; color: var(--ox-accent-d);
}
html[data-tema="oxygen"] .md-pg .md-rek-card {
    border: 1px solid var(--surface-brd); border-radius: var(--ox-r-lg); padding: 18px 18px;
    background: var(--surface-nested);
}
html[data-tema="oxygen"] .md-pg .md-rek-card:hover { border-color: var(--ox-accent); box-shadow: none; }
html[data-tema="oxygen"] .md-pg .md-rek-tipe { text-transform: none; letter-spacing: 0; font-size: .72rem; font-weight: 600; }
html[data-tema="oxygen"] .md-pg .md-rek-saldo { border-top-color: var(--surface-brd-2); }
html[data-tema="oxygen"] .md-pg .md-rek-saldo-lbl { text-transform: none; letter-spacing: 0; font-size: .72rem; font-weight: 600; }
html[data-tema="oxygen"] .md-pg .md-rek-saldo-val { color: var(--app-ink); font-size: 1.15rem; font-weight: 700; }
html[data-tema="oxygen"] .md-pg .md-btn-add-rek {
    border: 1.5px dashed var(--app-field-brd); border-radius: var(--ox-r-lg);
    background: transparent; color: var(--ox-accent-d);
}
html[data-tema="oxygen"] .md-pg .md-btn-add-rek:hover { background: var(--ox-accent-soft); border-color: var(--ox-accent); }

/* Isian. */
html[data-tema="oxygen"] .md-pg .md-search,
html[data-tema="oxygen"] .md-overlay .md-inp,
html[data-tema="oxygen"] .md-pg .md-inp {
    background: var(--surface-input); border: 1px solid var(--app-field-brd); border-radius: var(--ox-r-sm);
}
html[data-tema="oxygen"] .md-pg .md-search { border-radius: 999px; padding: 0 16px; }
html[data-tema="oxygen"] .md-pg .md-search:focus,
html[data-tema="oxygen"] .md-overlay .md-inp:focus,
html[data-tema="oxygen"] .md-pg .md-inp:focus {
    border-color: var(--ox-accent); box-shadow: 0 0 0 3px rgba(10,127,99,.18);
}
html[data-tema="oxygen"] .md-overlay .md-field label,
html[data-tema="oxygen"] .md-pg .md-field label {
    text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; color: var(--app-ink-2);
}

/* Modal. */
html[data-tema="oxygen"] .md-overlay { background: rgba(18,24,30,.45); backdrop-filter: none; }
html[data-tema="oxygen"] .md-overlay .md-modal {
    background: var(--surface-modal); border-radius: 28px 28px 0 0; box-shadow: var(--modal-shadow);
}
@media (min-width: 640px) {
    html[data-tema="oxygen"] .md-overlay .md-modal { border-radius: 28px; }
}
html[data-tema="oxygen"] .md-overlay .md-modal-title { color: var(--app-ink); font-size: 1.15rem; font-weight: 700; }
html[data-tema="oxygen"] .md-overlay .md-modal-close { background: var(--surface-2); color: var(--app-ink-2); }
html[data-tema="oxygen"] .md-overlay .md-modal-close:hover { background: var(--surface-3); }
html[data-tema="oxygen"] .md-overlay .md-modal-foot { border-top-color: var(--surface-brd-2); }
html[data-tema="oxygen"] .md-overlay .md-tipe-toggle { border-color: var(--app-field-brd); border-radius: 999px; }
html[data-tema="oxygen"] .md-overlay .md-tipe-opt:checked + label { background: var(--ox-accent); }

/* ═══ Turunan: komponen umum (Bootstrap) di semua halaman ══════════════ */
html[data-tema="oxygen"] .btn { border-radius: 999px; font-weight: 600; }
html[data-tema="oxygen"] .btn-sm { border-radius: 999px; }
html[data-tema="oxygen"] .btn-primary {
    --bs-btn-bg: var(--ox-accent); --bs-btn-border-color: var(--ox-accent);
    --bs-btn-hover-bg: var(--ox-accent-d); --bs-btn-hover-border-color: var(--ox-accent-d);
    --bs-btn-active-bg: var(--ox-accent-d); --bs-btn-active-border-color: var(--ox-accent-d);
    --bs-btn-disabled-bg: var(--ox-accent); --bs-btn-disabled-border-color: var(--ox-accent);
    --bs-btn-focus-shadow-rgb: 10,127,99;
}
html[data-tema="oxygen"] .btn-outline-primary {
    --bs-btn-color: var(--ox-accent-d); --bs-btn-border-color: var(--ox-accent);
    --bs-btn-hover-bg: var(--ox-accent); --bs-btn-hover-border-color: var(--ox-accent);
    --bs-btn-active-bg: var(--ox-accent); --bs-btn-active-border-color: var(--ox-accent);
    --bs-btn-focus-shadow-rgb: 10,127,99;
}
html[data-tema="oxygen"] .btn-light,
html[data-tema="oxygen"] .btn-secondary,
html[data-tema="oxygen"] .btn-outline-secondary {
    --bs-btn-border-color: var(--app-field-brd);
}

html[data-tema="oxygen"] .card {
    background: var(--surface); border: 1px solid var(--surface-brd);
    border-radius: var(--ox-r-lg); box-shadow: none;
}
html[data-tema="oxygen"] .card-header { background: transparent; border-bottom-color: var(--surface-brd-2); }

html[data-tema="oxygen"] .form-control,
html[data-tema="oxygen"] .form-select {
    border-radius: var(--ox-r-sm); background-color: var(--surface-input);
}
html[data-tema="oxygen"] .form-control:focus,
html[data-tema="oxygen"] .form-select:focus {
    border-color: var(--ox-accent); box-shadow: 0 0 0 3px rgba(10,127,99,.18);
}
html[data-tema="oxygen"] .form-check-input:checked {
    background-color: var(--ox-accent); border-color: var(--ox-accent);
}
html[data-tema="oxygen"] .input-group-text { background: var(--surface-2); }

html[data-tema="oxygen"] .table > :not(caption) > * > * { border-bottom-color: var(--surface-brd-2); }
html[data-tema="oxygen"] .table thead th {
    background: var(--surface-data-head); color: var(--app-muted);
    font-weight: 600; text-transform: none; letter-spacing: 0;
}
html[data-tema="oxygen"] .table-hover > tbody > tr:hover > * { background-color: var(--surface-hover); }

html[data-tema="oxygen"] .nav-tabs { border-bottom-color: var(--surface-brd); }
html[data-tema="oxygen"] .nav-tabs .nav-link { border: 0; border-radius: 999px 999px 0 0; color: var(--app-ink-2); }
html[data-tema="oxygen"] .nav-tabs .nav-link.active {
    background: var(--ox-accent-soft); color: var(--ox-accent-d); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--ox-accent);
}
html[data-tema="oxygen"] .nav-pills .nav-link { border-radius: 999px; color: var(--app-ink-2); }
html[data-tema="oxygen"] .nav-pills .nav-link.active { background: var(--ox-accent); color: #fff; }

html[data-tema="oxygen"] .page-link { border-radius: 999px; color: var(--ox-accent-d); margin: 0 2px; border-color: transparent; }
html[data-tema="oxygen"] .page-item.active .page-link { background: var(--ox-accent); border-color: var(--ox-accent); color: #fff; }

html[data-tema="oxygen"] .badge { border-radius: 999px; font-weight: 600; }
html[data-tema="oxygen"] .badge.bg-primary { background-color: var(--ox-accent) !important; }

html[data-tema="oxygen"] .modal-content {
    border-radius: 28px; border-color: var(--surface-modal-brd);
}
html[data-tema="oxygen"] .modal-header,
html[data-tema="oxygen"] .modal-footer { border-color: var(--surface-brd-2); }
html[data-tema="oxygen"] .dropdown-menu { border-radius: var(--ox-r-md); border-color: var(--surface-brd); box-shadow: var(--modal-shadow); padding: 6px; }
html[data-tema="oxygen"] .dropdown-item { border-radius: 10px; }
html[data-tema="oxygen"] .alert { border-radius: var(--ox-r-md); }
html[data-tema="oxygen"] .progress { border-radius: 999px; }
html[data-tema="oxygen"] .progress-bar { background-color: var(--ox-accent); }

/* Gerak: hormati permintaan kurangi animasi. */
@media (prefers-reduced-motion: reduce) {
    html[data-tema="oxygen"] * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}