/* ---------- KARTU RINGKASAN SALDO (di atas tabel) — WARNA LEMBUT, BEDA TIAP KARTU (15 Okt 2026) ---------- */ .kartu-saldo { background: #f8fafc; border: 1px solid var(--border); border-left: 4px solid #cbd5e1; border-radius: 8px; padding: 5px 10px; min-width: 170px; } .kartu-saldo .nm { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kartu-saldo .jk { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kartu-saldo .jl { font-size: 15px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; margin-top: 2px; } /* warna lembut per kartu (dipakai bergiliran) */ .kartu-saldo.lembut-1 { background: #eef4ff; border-left-color: #93c5fd; } .kartu-saldo.lembut-2 { background: #f0fdfa; border-left-color: #5eead4; } .kartu-saldo.lembut-3 { background: #fff7ed; border-left-color: #fdba74; } .kartu-saldo.lembut-4 { background: #f5f3ff; border-left-color: #c4b5fd; } .kartu-saldo.lembut-5 { background: #fff1f2; border-left-color: #fda4af; } .kartu-saldo.lembut-6 { background: #f7fee7; border-left-color: #bef264; } /* kartu TOTAL SALDO: hijau lembut + baris ketiga daftar bank (tinggi sama dengan kartu lain) */ .kartu-saldo.total { background: #ecfdf5; border-left-color: #86efac; } .kartu-saldo.total .jl { color: #15803d; } .kartu-saldo.total .jk { color: #34d399; } /* ============================================================ TEMA APLIKASI KEUANGAN YAYASAN (E-Kampus) Warna diambil dari tabel `pengaturan`, diisi oleh index.html ============================================================ */ :root { --sidebar-bg: #1e3a8a; --header-bg: #0f2a6b; --kepala-bg: #0b1f52; --accent: #facc15; --teks-menu: #dbe4ff; --teks-nama: #facc15; --teks-sub: #b9c7f0; --teks-motto: #93a3c9; --sidebar-hover: rgba(255, 255, 255, .12); --sidebar-active: rgba(255, 255, 255, .22); --bg-page: #f6f8fb; --text-main: #1e293b; --text-muted: #64748b; --border: #cbd5e1; --table-head: #1e3a8a; --table-border: #c3cbe0; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', system-ui, sans-serif; } body { background-color: var(--bg-page); color: var(--text-main); font-size: 14px; line-height: 1.5; overflow-x: hidden; } /* ---------- KERANGKA ---------- */ .app-container { display: flex; min-height: 100vh; position: relative; align-items: flex-start; } .main-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .main-content { padding: 24px; flex: 1; min-width: 0; } /* ---------- SIDEBAR ---------- */ /* kepala + profil + tombol KELUAR tetap di tempatnya; hanya daftar menu yang di-scroll kalau menu panjang */ .sidebar { width: 280px; background-color: var(--sidebar-bg); color: var(--teks-menu); display: flex; flex-direction: column; flex-shrink: 0; transition: all .3s ease; overflow: hidden; z-index: 100; position: sticky; top: 0; height: 100vh; } .app-container.sidebar-collapsed .sidebar { width: 70px; } .app-container.sidebar-collapsed .brand-text, .app-container.sidebar-collapsed .user-info, .app-container.sidebar-collapsed .sidebar-menu .title, .app-container.sidebar-collapsed .sidebar-menu .arrow { display: none !important; } .app-container.sidebar-collapsed .user-profile { justify-content: center; padding: 14px 0; margin: 12px 6px; } .app-container.sidebar-collapsed .sidebar-header { padding: 16px 10px; text-align: center; } .app-container.sidebar-collapsed .sidebar-menu a, .app-container.sidebar-collapsed .sidebar-menu .dropdown-btn { justify-content: center; padding: 12px 0; gap: 0; } .app-container.sidebar-collapsed .sidebar-menu i { font-size: 18px; margin: 0; } .app-container.sidebar-collapsed .dropdown-menu { display: none !important; } .app-container.sidebar-collapsed .sidebar-logout span { display: none !important; } .sidebar-header { padding: 12px 10px; background-color: var(--kepala-bg); border-bottom: 1px solid rgba(255,255,255,.12); white-space: nowrap; flex-shrink: 0; } .brand-logo { display: flex; align-items: center; gap: 10px; } .brand-icon-box { width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .brand-icon-box img { width: 100%; height: 100%; object-fit: contain; } .brand-text { display: flex; flex-direction: column; margin-left: 5px; } .brand-sub { font-size: 10px; font-weight: 700; color: var(--teks-sub); letter-spacing: 1.3px; text-transform: uppercase; } .brand-title { font-family: 'Georgia', serif; font-size: 17px; font-weight: 700; color: var(--teks-nama); line-height: 1; letter-spacing: 4px; } .brand-motto { font-size: 9.5px; font-weight: 500; color: var(--teks-motto); margin-top: 1px; text-transform: uppercase;letter-spacing: 0.3px; } .user-profile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background-color: rgba(255,255,255,.10); margin: 12px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; } .avatar { width: 36px; height: 36px; background: var(--accent); color: var(--header-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .user-info { display: flex; flex-direction: column; min-width: 0; } .user-info .role { font-size: 11px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .user-info .name { font-size: 13px; font-weight: 700; color: var(--teks-menu); overflow: hidden; text-overflow: ellipsis; } .sidebar-menu { padding: 10px; list-style: none; white-space: nowrap; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; } .sidebar-menu ul { list-style: none; padding-left: 0; } .sidebar-menu a, .dropdown-btn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--teks-menu); text-decoration: none; font-weight: 600; border-radius: 6px; width: 100%; border: none; background: transparent; cursor: pointer; text-align: left; font-size: 13.5px; } .sidebar-menu a i, .dropdown-btn i { font-size: 16px; flex-shrink: 0; } .sidebar-menu a:hover, .dropdown-btn:hover { background-color: var(--sidebar-hover); color: var(--teks-menu); } .sidebar-menu a.active { background-color: var(--sidebar-active); color: var(--teks-menu); box-shadow: inset 3px 0 0 var(--accent); } .dropdown-menu { display: none; padding-left: 14px; list-style: none; } .dropdown.open .dropdown-menu { display: block; } .dropdown-menu a { padding: 9px 0 9px 24px; font-weight: 500; font-size: 13px; } .dropdown-menu a i { font-size: 13px !important; } .arrow { margin-left: auto; font-size: 11px; transition: transform .2s; } .dropdown.open .arrow { transform: rotate(180deg); } /* --- Sub-kelompok di dalam sebuah menu (contoh: LAPORAN -> Laporan Bulanan / Tahunan / Bank) --- */ .dropdown-menu .dropdown-btn { padding: 9px 0 9px 20px; font-weight: 600; font-size: 12.5px; } .dropdown-menu .dropdown-menu { padding-left: 10px; } .dropdown-menu .dropdown-menu .dropdown-btn { padding-left: 26px; font-weight: 500; } .dropdown-menu .dropdown-menu a { padding: 8px 0 8px 34px; font-size: 12.5px; } /* kelompok yang belum punya laporan */ .menu-kosong { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 34px; font-size: 12px; font-style: italic; color: #8ea0c9; cursor: default; } .sidebar-logout { flex-shrink: 0; margin: 8px 12px 14px 12px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; } .sidebar-logout button { width: 100%; display: flex; align-items: center; gap: 10px; justify-content: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #ffd9d9; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; } .sidebar-logout button:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; } .sidebar-backdrop { display: none; } /* ---------- TOPBAR ---------- */ .topbar { height: 64px; background-color: var(--header-bg); display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid rgba(0,0,0,.15); position: sticky; top: 0; z-index: 90; } .toggle-btn { background: rgba(255,255,255,.12); border: none; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--accent); font-size: 20px; transition: background .2s; } .toggle-btn:hover { background: rgba(255,255,255,.22); } .topbar-title { color: #ffffff; font-weight: 700; font-size: 15px; letter-spacing: .3px; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #dbe4ff; font-size: 13px; } .topbar-chip { background: rgba(255,255,255,.12); padding: 6px 12px; border-radius: 20px; font-weight: 600; } /* ---------- KARTU & TABEL ---------- */ /* tabel kolom banyak (transaksi): lebar mengikuti isi — kalau kepanjangan, kotaknya geser ke samping */ .tabel-trx { } .tabel-trx th, .tabel-trx td { overflow: hidden; text-overflow: ellipsis; } /* Paku kolom terakhir (Aksi) di kanan: tetap terlihat walau tabel digeser ke samping */ .tabel-trx thead th:last-child, .tabel-trx tbody td:last-child { position: sticky; right: 0; z-index: 2; box-shadow: -7px 0 7px -7px rgba(15, 23, 42, .22); } .tabel-trx thead th:last-child { z-index: 4; background-color: var(--table-head); } .tabel-trx tbody tr:nth-child(odd) td:last-child { background-color: #ffffff; } .tabel-trx tbody tr:nth-child(even) td:last-child { background-color: #edf3fc; } .tabel-trx tbody tr:hover td:last-child { background-color: #d7e5fa; } /* batasi teks panjang jadi beberapa baris saja (selengkapnya lewat tooltip) */ .klamp-2, .klamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } .klamp-2 { -webkit-line-clamp: 2; } .klamp-3 { -webkit-line-clamp: 3; } /* ---------- KOLOM TABEL TRANSAKSI ---------- */ /* kolom Kategori: datanya di tengah */ td.kol-kategori { text-align: center; } /* kolom Jumlah: lebarnya mengikuti angka TERPANJANG (tidak terpotong, tidak melipat) */ th.kol-jumlah, td.kol-jumlah { min-width: 104px; white-space: nowrap; } th.kol-jumlah { white-space: normal; } td.kol-jumlah { text-align: right; font-variant-numeric: tabular-nums; } /* kolom Uraian: melebar mengisi sisa ruang, tapi tidak lebih dari 340px */ .uraian-sel { max-width: 340px; } border-radius: 8px; padding: 5px 10px; min-width: 170px; } letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .table-card { background: #fff; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 2px 4px rgba(0,0,0,.02); padding: 10px; min-width: 0; } /* baris 2 kolom (kiri lebar, kanan sempit). minmax(0,...) WAJIB supaya kolom mau menyusut — kalau tidak, isi yang lebar mendorong halaman melebar dan sisi kanan terpotong. */ .baris-2kolom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .baris-2kolom > * { min-width: 0; } /* jendela belum cukup lebar -> tumpuk jadi satu kolom (jangan dipotong) */ @media (max-width: 1150px) { .baris-2kolom { grid-template-columns: minmax(0, 1fr); } } .table-title-area h2 { font-size: 20px; font-weight: 800; color: #0f172a; letter-spacing: .2px; } .table-title-area p { font-size: 13px; color: var(--text-muted); margin-top: 3px; margin-bottom: 16px; } /* KOTAK TABEL: judul tabel (thead) MELAYANG di atas, hanya ISI tabel yang bergerak */ .table-responsive { width: 100%; max-width: 100%; display: block; overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 300px); } .data-table { width: 100%; border-collapse: collapse; white-space: nowrap; } /* judul tabel sengaja LEBIH BESAR dari isi baris (14px vs 13.5px) */ .data-table th { background-color: var(--table-head); color: #ffffff; padding: 8px; border: 1px solid var(--table-border); text-align: center; font-weight: 700; font-size: 12px; letter-spacing: .2px;text-transform: uppercase; position: sticky; top: 0; z-index: 3;line-height: 1.3; box-shadow: inset 0 1px 0 var(--table-border), inset 0 -1px 0 var(--table-border); } /* penanda JENIS di tabel — tulisannya NAMA JENIS, warnanya ikut arah (hijau masuk / merah keluar) */ .badge-masuk { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; background:#dcfce7; color:#166534; white-space:nowrap; } .badge-keluar { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11.5px; font-weight:700; background:#fee2e2; color:#991b1b; white-space:nowrap; } .data-table td { padding: 7px; border: 1px solid var(--table-border); color: #334155; vertical-align: middle; font-size: 12px;line-height: 1.2;} /* ZEBRA: baris selang-seling untuk SEMUA tabel (.data-table) */ .data-table tbody tr:nth-child(odd) { background-color: #ffffff; } .data-table tbody tr:nth-child(even) { background-color: #edf3fc; } .data-table tbody tr:hover { background-color: #d7e5fa; } .data-table tfoot td { background-color: #f8fafc; font-weight: 700; color: #0f172a; border: 1px solid var(--table-border); padding: 8px; font-size: 12.5px; white-space: nowrap; } /* ---------- TOMBOL ---------- */ .btn-act-blue { background-color: #0284c7; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 500; cursor: pointer; font-size: 12px; } .btn-act-red { background-color: #dc2626; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 500; cursor: pointer; font-size: 12px; } .btn-act-green { background-color: #16a34a; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 12px; } .btn-act-gray { background-color: #64748b; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 500; cursor: pointer; font-size: 12px; } .btn-act-blue:hover { background-color: #0369a1; } .btn-act-red:hover { background-color: #b91c1c; } .btn-act-green:hover { background-color: #15803d; } .btn-act-gray:hover { background-color: #475569; } .btn-add-row-bottom { margin-top: 16px; background-color: var(--header-bg); color: #ffffff; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; } .btn-add-row-bottom:hover { filter: brightness(1.25); } /* bilah tombol simpan: selalu menempel di bawah layar walau form panjang */ .bar-aksi { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid var(--border); padding: 12px 0 6px; margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* ---------- FORM ---------- */ /* dua isian berdampingan; otomatis jadi satu kolom kalau ruang sempit */ .baris-2isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 12px; } .baris-3isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 12px; } .form-row { margin-bottom: 18px; } /* label baku untuk baris filter di atas tabel */ .lbl-filter { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: #334155;text-transform: uppercase; } .form-row label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; color: #334155;text-transform: uppercase; } .form-control, .table-input, .table-select { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13.5px; background: #fff; color: var(--text-main); } .form-control:focus, .table-input:focus, .table-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); } /* merah + pesan saat input salah */ .input-error, .form-control.input-error { border-color: #dc2626 !important; background: #fff5f5 !important; } .pesan-error { color: #b91c1c; font-size: 12.5px; font-weight: 600; margin-top: 5px; display: none; } .pesan-error.tampil { display: block; } /* ---------- BADGE ---------- */ .badge-aktif { background-color: #dcfce7; color: #166534; padding: 4px 10px; border-radius: 20px; font-weight: 600; font-size: 11px; display: inline-block; } .badge-nonaktif { background-color: #fee2e2; color: #991b1b; padding: 4px 10px; border-radius: 20px; font-weight: 600; font-size: 11px; display: inline-block; } /* ---------- TOAST ---------- */ #toastWrap { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { min-width: 240px; max-width: 360px; background: #fff; border-left: 5px solid #16a34a; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 12px 14px; font-size: 13px; font-weight: 600; color: #1e293b; animation: toastIn .25s ease; } .toast.gagal { border-left-color: #dc2626; } .toast.info { border-left-color: #0284c7; } @keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } /* ---------- MODAL ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; } .modal-backdrop.tengah { align-items: center; } .modal-box { background: #fff; border-radius: 12px; width: 100%; max-width: 530px; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: modalIn .2s ease; } .modal-box.lebar { max-width: 760px; } .modal-box.sangat-lebar { max-width: 1180px; } /* RAB: rincian (bosku 16 Okt 2026) */ /* kotak konfirmasi/pesan singkat: jangan lebar - cukup selebar isinya */ .modal-box.sempit { max-width: 400px; } .modal-box.sempit .modal-body { padding: 16px 18px; } .modal-tanya { font-size: 14px; color: #334155; line-height: 1.6; margin: 0; } /* tombol di dalam modal: ukuran seragam & rapi */ .modal-foot .tombol-modal { min-width: 104px; padding: 9px 18px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 420px) { .modal-foot { flex-direction: column-reverse; } .modal-foot .tombol-modal { width: 100%; } } @keyframes modalIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } .modal-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-head h3 { font-size: 16px; font-weight: 700; color: #0f172a;text-transform: uppercase; } .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #64748b; line-height: 1; } .modal-body { padding: 18px; } .modal-foot { padding: 14px 20px 22px; display: flex; justify-content: flex-end; gap: 10px; } /* ---------- CETAK ---------- */ @media print { .sidebar, .topbar, .toggle-btn, .no-print, .filter-panel, .sidebar-backdrop { display: none !important; } body, .app-container, .main-wrapper, .main-content { background: #fff !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; display: block !important; position: static !important; } .table-card { border: none !important; box-shadow: none !important; padding: 0 !important; } .data-table th { position: static !important; } } /* ---------- MOBILE ---------- */ @media (max-width: 768px) { .sidebar { position: fixed; height: 100%; left: 0; top: 0; width: 280px; margin-left: 0; z-index: 1000; transition: margin-left .3s ease; } .app-container.sidebar-collapsed .sidebar { width: 280px; margin-left: -280px; } /* HP: rapatkan jarak supaya tabel dapat ruang paling lebar */ .main-content { padding: 6px; } .table-card { padding: 8px; border-radius: 10px; } .table-card[style*="margin-bottom:14px"] { margin-bottom: 10px !important; } /* HP: sel dirapatkan + kolom Uraian dilebarkan supaya uraian panjang terbaca (maks 3 baris) */ .data-table th, .data-table td { padding: 6px; } .tabel-trx .uraian-sel { min-width: 150px; max-width: 190px; } .app-container:not(.sidebar-collapsed) .sidebar-backdrop { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.4); z-index: 999; } .topbar-title { font-size: 13px; } /* di HP: kotak tabel sedikit lebih pendek */ .table-responsive { max-height: calc(100vh - 250px); } /* semua baris 2 kolom jadi 1 kolom di HP */ .baris-2kolom { grid-template-columns: 1fr !important; } } /* ============================================================ KOP LAPORAN — SATU SUMBER GAYA untuk PRATINJAU & CETAKAN Dipakai oleh halaman cetak (Rekening Koran) DAN pratinjau kop (Data Yayasan). Jangan ditulis ulang sebagai inline di template supaya keduanya TIDAK PERNAH berbeda lagi. Lebar acuan = 718px (lebar A4 dikurangi margin 10mm kanan-kiri). ============================================================ */ .kop-baris { display: flex; justify-content: space-between; align-items: flex-start; gap: 3%; border-bottom: 3px double #000; padding-bottom: 7px; } .kop-identitas { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; max-width: 58%; } .kop-logo { width: 50px; height: 50px; object-fit: contain; flex: 0 0 auto; } .kop-teks { min-width: 0; } .kop-nama1 { font-size: 11px; font-weight: 600; letter-spacing: .8px; line-height: 1.25; color: #334155; word-break: break-word; } .kop-nama2 { font-size: 14px; font-weight: 900; letter-spacing: .3px; line-height: 1.15; word-break: break-word; } .kop-nama1--besar { font-size: 14px; font-weight: 900; letter-spacing: .3px; color: inherit; } .kop-alamat { font-size: 9.5px; line-height: 1.45; margin-top: 2px; color: #334155; word-break: break-word; } .kop-laporan { flex: 0 0 auto; text-align: right; max-width: 38%; } .kop-judul { font-size: 12.5px; font-weight: 800; letter-spacing: .4px; margin-bottom: 3px; word-break: break-word; } .kop-info { font-size: 9.5px; line-height: 1.45; color: #334155; word-break: break-word; } .kop-info--tebal { font-weight: 700; } /* Pratinjau: dibatasi selebar kertas A4 (718px) lalu diperbesar sedikit supaya mudah dibaca — potongan barisnya TETAP sama dengan hasil cetak. */ .kop-pratinjau { width: 718px; zoom: 1.2; } @media (max-width: 1000px) { .kop-pratinjau { zoom: .85; } } @media (max-width: 768px) { .kop-pratinjau { zoom: .46; } } @media print { .kop-nama1, .kop-alamat, .kop-info { color: #000 !important; } .kop-baris { page-break-inside: avoid; } .kop-pratinjau { width: auto !important; zoom: 1 !important; } } /* ============================================================ KOTAK KETIK-CARI (AUTOCOMPLETE) — dipakai halaman laporan ============================================================ */ .ac-bungkus { position: relative; } .ac-daftar { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: #fff; border: 1px solid #cbd5e1; border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 10px 24px rgba(15,23,42,.14); max-height: 250px; overflow-y: auto; } .ac-item { padding: 8px 12px; font-size: 12.5px; color: #0f172a; cursor: pointer; border-bottom: 1px solid #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-item:last-child { border-bottom: none; } .ac-item:hover, .ac-item.aktif { background: #eff6ff; color: #0b1f52; } .ac-jml { color: #94a3b8; font-size: 11px; } .ac-kosong { padding: 9px 12px; font-size: 12px; color: #b91c1c; background: #fef2f2; } .form-control.salah { border-color: #dc2626 !important; background: #fef2f2 !important; } /* Tabel transaksi (lebar 100%): biar kolom Uraian yang menyerap ruang sisa, sehingga kolom lain (Jenis, Kategori, dsb) tetap sesuai lebarnya - tidak ikut melebar. */ .data-table th.th-uraian { width: 100%; } /* ============================================================ KOLOM JENIS PADA TABEL TRANSAKSI: hanya teks berwarna (tanpa latar badge) Dibatasi .tabel-trx supaya badge di Dashboard tetap seperti semula. ============================================================ */ .tabel-trx .badge-masuk, .tabel-trx .badge-keluar { display: inline; background: none; border: none; border-radius: 0; padding: 0; font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center; white-space: normal; } .tabel-trx .badge-masuk { color: #15803d; } .tabel-trx .badge-keluar { color: #b91c1c; } /* Pilihan (select) di baris filter: lebarnya PAS kotak filternya. Tanpa ini,