/* app.css — tampilan dasar Elang Bangunan */ :root { --lebar-sidebar: 264px; --tinggi-topbar: 56px; --isi-bg: #f4f6f9; } /* ------------------------------------------------------------- tema Empat pilihan warna. Semuanya HANYA menggeser variabel di bawah ini — tidak ada satu pun aturan tata letak yang digandakan per tema, supaya menambah tema kelima nanti tidak menuntut menyisir ulang seluruh berkas. Tema disimpan di localStorage dan dipasang di sebelum halaman digambar (lihat app.js), jadi tidak ada kedip warna saat pindah halaman. */ :root, [data-tema="batu"] { --sidebar-bg: #1f2937; /* batu tulis + amber (bawaan) */ --sidebar-teks: #cbd5e1; --sidebar-aktif: #f59e0b; --aksen: #b45309; --aksen-lembut: rgba(245, 158, 11, .12); } [data-tema="baja"] { --sidebar-bg: #14263c; /* biru baja */ --sidebar-teks: #c7d7e6; --sidebar-aktif: #38bdf8; --aksen: #0369a1; --aksen-lembut: rgba(56, 189, 248, .14); } [data-tema="bata"] { --sidebar-bg: #34211d; /* merah bata */ --sidebar-teks: #e3cdc6; --sidebar-aktif: #f97316; --aksen: #b91c1c; --aksen-lembut: rgba(249, 115, 22, .14); } [data-tema="tanah"] { --sidebar-bg: #1b2e22; /* hijau tanah */ --sidebar-teks: #c6dcce; --sidebar-aktif: #4ade80; --aksen: #15803d; --aksen-lembut: rgba(74, 222, 128, .14); } body { background: var(--isi-bg); font-size: 0.925rem; } /* ------------------------------------------------------------ sidebar */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--lebar-sidebar); background: var(--sidebar-bg); color: var(--sidebar-teks); z-index: 1030; } .sidebar-merek { display: flex; align-items: center; gap: .5rem; height: var(--tinggi-topbar); padding: 0 1rem; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); } .sidebar-merek .bi { color: var(--sidebar-aktif); font-size: 1.25rem; } .sidebar-isi { /* `overflow-x: hidden` WAJIB berpasangan dengan `overflow-y: auto`: tanpa itu, satu petak yang sedikit melebar (label panjang, ikon flyout) memicu bilah gulung mendatar di sidebar — dan bilah itu memakan tinggi sekaligus membuat menu bisa digeser ke samping tanpa alasan. */ overflow-y: auto; overflow-x: hidden; padding: .75rem 0; /* Bilah gulung tipis & sewarna sidebar. Firefox pakai properti standar, Chrome/Edge lewat ::-webkit-scrollbar di bawah. */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .sidebar-isi::-webkit-scrollbar { width: 6px; } .sidebar-isi::-webkit-scrollbar-track { background: transparent; } .sidebar-isi::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; } .sidebar-isi::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); } .sidebar-kaki { padding: .6rem 1rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; color: #e2e8f0; } .menu-grup { list-style: none; margin-bottom: .35rem; } .menu-grup-judul { display: block; padding: .5rem 1rem .25rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; } .menu-utama .nav-link { display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem; color: var(--sidebar-teks); border-left: 3px solid transparent; } .menu-utama .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; } .menu-utama .nav-link.aktif { background: var(--aksen-lembut); border-left-color: var(--sidebar-aktif); color: #fff; font-weight: 600; } /* laci mobile memakai palet yang sama supaya tidak terasa dua aplikasi */ .laci-menu { background: var(--sidebar-bg); color: var(--sidebar-teks); width: 260px; } .laci-menu .offcanvas-title { color: #fff; } .laci-menu .btn-close { filter: invert(1) grayscale(1); } /* -------------------------------------------------------------- isi */ .konten-utama { margin-left: 0; min-height: 100vh; padding-bottom: 4.5rem; } @media (min-width: 992px) { .konten-utama { margin-left: var(--lebar-sidebar); padding-bottom: 1rem; } } .topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; height: var(--tinggi-topbar); padding: 0 1rem; background: #fff; border-bottom: 1px solid #e5e7eb; } .topbar-judul { font-weight: 600; } .isi-halaman { padding: 1rem; } .flash-area { max-width: 720px; } /* ------------------------------------------------------------ tabel */ .kartu-tabel .card-header { background: #fff; border-bottom: 1px solid #e5e7eb; } table.dataTable tbody tr.baris-klik { cursor: pointer; } /* Kepala tabel memakai warna tema yang sama dengan kepala filter di atasnya, supaya keduanya terbaca sebagai satu blok kendali — bukan abu-abu tetap yang tampak asing setiap kali temanya diganti. */ table.dataTable thead th { background: var(--aksen-lembut); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--aksen); border-bottom: 2px solid var(--sidebar-aktif); } /* pagination simbol saja — tanpa nomor halaman panjang */ .dataTables_wrapper .pagination { margin-bottom: 0; } /* -------------------------------------------------------- bar bawah */ .menu-bawah { position: fixed; inset: auto 0 0 0; z-index: 1035; display: flex; background: #fff; border-top: 1px solid #e5e7eb; } .menu-bawah a { flex: 1; padding: .4rem 0 .3rem; text-align: center; font-size: .68rem; color: #64748b; text-decoration: none; } .menu-bawah a .bi { display: block; font-size: 1.15rem; } .menu-bawah a.aktif { color: var(--aksen); font-weight: 600; } /* ---------------------------------------------------------- tamu */ .halaman-tamu { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(160deg, #1f2937 0%, #374151 55%, #4b5563 100%); } .kartu-login { width: 100%; max-width: 400px; } .kartu-kosong { max-width: 720px; margin: 2rem auto; } /* ------------------------------------------------ grafik omzet dashboard */ /* Batang digambar dengan CSS murni: menambah pustaka grafik hanya untuk 30 batang membuat halaman pertama yang dibuka pemilik jadi paling berat. */ .grafik-omzet { height: 140px; } .grafik-kolom { height: 100%; display: flex; align-items: flex-end; } .grafik-batang { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; transition: opacity .15s; } .grafik-kolom:hover .grafik-batang { opacity: .75; } /* ------------------------------------------- sidebar: kisi 4 ikon Isi tiap grup ditata sebagai kisi 4 kolom, bukan daftar vertikal. Judul grupnya dipertahankan sebagai pemisah, jadi struktur menu tidak berubah — hanya jauh lebih pendek sehingga seluruh modul terlihat tanpa menggulung. */ .menu-kisi { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: .15rem .6rem .5rem; list-style: none; margin: 0; } .menu-kisi .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .2rem; padding: .45rem .15rem; border-radius: .5rem; border-left: 0; color: var(--sidebar-teks); text-align: center; line-height: 1.1; } .menu-kisi .nav-link .bi { font-size: 1.15rem; } /* Label dipotong dua baris, bukan dipangkas dengan elipsis: "Permintaan Beli" dan "Purchase Order" harus tetap bisa dibedakan sekilas. */ .menu-kisi .nav-link span { font-size: .62rem; display: -webkit-box; /* Tiga baris, bukan dua: dengan dua baris "Saldo & Kartu Stok" terpotong jadi "Saldo &" — label yang tidak memberi tahu apa pun. */ -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* `break-word` memotong di tengah kata sehingga "Dashboard" tampil sebagai "Dashboar / d". Yang dipakai pemenggalan suku kata; kata yang tetap tidak muat baru dipotong sebagai upaya terakhir. */ hyphens: auto; overflow-wrap: break-word; } .menu-kisi .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; } .menu-kisi .nav-link.aktif { background: var(--aksen-lembut); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px var(--sidebar-aktif); } /* --------------------------------------------- kaki sidebar: pengguna */ .sidebar-kaki .kaki-pengguna { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .35rem .5rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #fff; text-align: left; } .sidebar-kaki .kaki-pengguna:hover { background: rgba(255, 255, 255, .1); } .sidebar-kaki .kaki-pengguna .bi-person-circle { font-size: 1.35rem; color: var(--sidebar-aktif); } .sidebar-kaki .kaki-nama { font-weight: 600; line-height: 1.15; } .sidebar-kaki .kaki-peran { font-size: .72rem; color: var(--sidebar-teks); } .sidebar-kaki .form-select-sm { font-size: .78rem; } /* pilihan warna tema */ .pilih-tema { display: flex; gap: .35rem; } .pilih-tema button { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; } .pilih-tema button.terpilih { border-color: #fff; } /* ------------------------------------------------------ kepala filter Baris penyaring di atas tabel. Nilainya dikirim ke SERVER (kelas `dt-filter`), tidak pernah menyaring di sisi klien — aturan yang sama dengan pengurutan. */ .filter-tabel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; padding: .75rem 1rem; background: var(--aksen-lembut); border-bottom: 1px solid #e5e7eb; } .filter-tabel .filter-butir { display: flex; flex-direction: column; gap: .15rem; } .filter-tabel label { font-size: .72rem; font-weight: 600; color: #475569; } .filter-tabel .form-control, .filter-tabel .form-select { min-width: 11rem; } .judul-kartu { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #1f2937; } .judul-kartu .bi { color: var(--aksen); font-size: 1.1rem; } /* Nama aplikasi berfungsi sebagai tautan dashboard — harus terlihat bisa diklik tanpa berubah jadi teks biru bergaris. */ a.sidebar-merek, .sidebar-merek-laci { text-decoration: none; color: #fff; } a.sidebar-merek:hover, .sidebar-merek-laci:hover { background: rgba(255, 255, 255, .06); color: #fff; } .sidebar-merek-laci { color: #fff; } /* ------------------------------------------- grup menu yang dilipat Master & System Setup tampil sebagai SATU petak. Isinya muncul di panel samping saat kursor lewat (atau saat difokus lewat papan ketik). Panelnya `position: fixed`, bukan absolute: sidebar punya `overflow-y: auto`, dan panel absolute di dalamnya akan terpotong oleh batas gulung. Konsekuensinya, panel fixed TIDAK ikut bergulir bersama sidebar — karena itu posisi tegaknya dipasang app.js tiap kali panel dibuka, bukan lewat CSS. Tanpa itu, menu yang dibuka setelah menggulung akan muncul jauh dari petaknya. */ /* Petak pemicu TIDAK diberi gaya khusus apa pun: ia mewarisi `.menu-kisi .nav-link` yang sama dengan petak menu lainnya, jadi ukuran dan susunannya identik. Yang perlu di sini cuma titik acuan untuk panelnya. */ .menu-lipat-induk { position: relative; } .menu-flyout { position: fixed; left: var(--lebar-sidebar); top: 0; /* nilai sebenarnya dipasang app.js saat dibuka */ min-width: 15rem; max-height: 80vh; overflow-y: auto; padding: .4rem; background: var(--sidebar-bg); border: 1px solid rgba(255, 255, 255, .12); border-radius: .5rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35); z-index: 1040; /* Disembunyikan dengan opacity + visibility, BUKAN display:none, supaya bisa dianimasikan dan tetap terjangkau pembaca layar saat difokus. */ opacity: 0; visibility: hidden; transition: opacity .12s ease; } /* Dibuka lewat kelas `terbuka` yang dipasang app.js dengan jeda tutup, BUKAN lewat `:hover` murni. `:focus-within` tetap ada supaya jalur papan ketik tidak bergantung pada JS sama sekali. */ .menu-lipat-induk.terbuka .menu-flyout, .menu-lipat-induk:focus-within .menu-flyout { opacity: 1; visibility: visible; } /* JEMBATAN tak terlihat menutup celah antara petak dan panel. Kisi menu punya padding samping, jadi tepi kanan petak berhenti ~10px sebelum tepi sidebar sementara panel mulai persis di tepi itu. Tanpa jembatan ini, kursor yang bergerak ke panel sempat melewati daerah yang bukan keduanya — hover lepas dan panelnya hilang tepat saat mau diklik. */ .menu-flyout::before { content: ""; position: absolute; top: -.5rem; bottom: -.5rem; left: -1.25rem; width: 1.25rem; } .menu-flyout-judul { padding: .3rem .6rem .45rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: .25rem; } .menu-flyout ul { list-style: none; margin: 0; padding: 0; } .menu-flyout a { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; border-radius: .35rem; color: var(--sidebar-teks); text-decoration: none; font-size: .82rem; white-space: nowrap; } .menu-flyout a:hover { background: rgba(255, 255, 255, .08); color: #fff; } .menu-flyout a.aktif { background: var(--aksen-lembut); color: #fff; font-weight: 600; } /* Kotak tanggal dd/mm/yyyy lebih sempit daripada kotak teks biasa — ia tidak akan pernah berisi lebih dari sepuluh karakter. */ .filter-tabel .dt-filter-tanggal { min-width: 8.5rem; max-width: 9.5rem; } /* ===================================================================== LAPIS TAMPILAN --------------------------------------------------------------------- Sebelum ini, isi halaman hampir seluruhnya putih di atas abu-abu muda: kartu tanpa bayangan, kepala kartu `bg-white`, dan tabel laporan yang kepala kolomnya tidak diwarnai sama sekali (hanya `table.dataTable` yang dapat warna, sedangkan 103 tabel laporan bukan DataTables). Akibatnya layar tidak punya hierarki — mata tidak tahu harus mulai dari mana. Yang dikerjakan lapis ini: memberi kedalaman (bayangan halus), memberi kepala tiap blok warna tema, dan menyeragamkan kartu angka. Warnanya SELALU diturunkan dari variabel tema yang sudah ada, tidak ada satu pun heksadesimal aksen baru — supaya empat pilihan tema tetap berlaku penuh. ===================================================================== */ :root { --garis: #e4e8ef; --garis-tipis: #eef1f6; --teks-redup: #64748b; --teks-tegas: #1e293b; --radius: .7rem; --bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05); --bayang-naik: 0 6px 18px rgba(15, 23, 42, .09); --isi-bg: #eef1f6; } /* Latar isi diberi semburat tema yang SANGAT tipis di puncak halaman. Cukup untuk memisahkan bidang kerja dari kartu putih, tidak sampai mewarnai teks di atasnya. */ body { background: var(--isi-bg); background-image: linear-gradient(180deg, var(--aksen-lembut) 0, transparent 320px); background-repeat: no-repeat; color: var(--teks-tegas); } /* ------------------------------------------------------------- kartu */ .card { border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); } .card-header { background: linear-gradient(180deg, var(--aksen-lembut), transparent); border-bottom: 1px solid var(--garis); border-radius: var(--radius) var(--radius) 0 0 !important; padding: .7rem 1rem; font-weight: 600; } /* `.bg-white` dari Bootstrap dibuang di template; aturan ini menjaga kepala kartu tetap berwarna kalau ada yang tertinggal atau ditambahkan lagi nanti. */ .card > .card-header.bg-white { background: linear-gradient(180deg, var(--aksen-lembut), transparent) !important; } .card-header h5, .card-header h6 { color: var(--teks-tegas); } .card-header .bi { color: var(--aksen); } /* Kartu yang isinya alat kendali (filter, form target) dibedakan tipis dari kartu yang isinya HASIL. Tanpa itu, layar laporan tampak seperti dua kartu setara padahal yang satu tombol dan yang satu jawaban. */ .kartu-alat { background: #fbfcfe; } .kartu-catatan { background: #fbfcfe; border-style: dashed; box-shadow: none; } .kartu-catatan .bi { color: var(--aksen); } /* --------------------------------------------------------- kepala halaman */ .kepala-halaman { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: .85rem 1.1rem; background: #fff; border: 1px solid var(--garis); border-left: 4px solid var(--aksen); border-radius: var(--radius); box-shadow: var(--bayang); } .kepala-halaman .kh-ikon { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .6rem; background: var(--aksen-lembut); color: var(--aksen); font-size: 1.3rem; } .kepala-halaman .kh-teks { min-width: 0; flex: 1 1 auto; } .kepala-halaman .kh-judul { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--teks-tegas); } .kepala-halaman .kh-ket { margin: .15rem 0 0; font-size: .8rem; color: var(--teks-redup); } .kepala-halaman .kh-aksi { flex: 0 0 auto; display: flex; gap: .4rem; } /* Judul pemisah antar bagian dalam satu halaman panjang. */ .judul-bagian { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--aksen); } .judul-bagian::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--garis), transparent); } /* ------------------------------------------------------- kartu statistik */ .kartu-statistik { display: flex; align-items: flex-start; gap: .75rem; height: 100%; padding: .85rem .95rem; background: #fff; border: 1px solid var(--garis); border-left: 4px solid var(--stat, var(--aksen)); border-radius: var(--radius); box-shadow: var(--bayang); text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; } a.kartu-statistik:hover { box-shadow: var(--bayang-naik); transform: translateY(-1px); color: inherit; } .kartu-statistik .ks-ikon { display: grid; place-items: center; flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: .55rem; font-size: 1.1rem; background: rgba(var(--stat-rgb, 13, 110, 253), .12); color: var(--stat, var(--aksen)); } .kartu-statistik .ks-isi { display: flex; flex-direction: column; min-width: 0; } .ks-judul { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teks-redup); } .kartu-statistik .ks-nilai { font-size: 1.28rem; font-weight: 700; line-height: 1.25; color: var(--teks-tegas); overflow-wrap: anywhere; } .kartu-statistik .ks-ket { font-size: .74rem; color: var(--teks-redup); line-height: 1.3; } /* Peran warna Bootstrap diterjemahkan sekali di sini. Template cukup menyebut namanya (`warna="danger"`), tidak pernah heksadesimal. */ .warna-primary { --stat: #2563eb; --stat-rgb: 37, 99, 235; } .warna-success { --stat: #16a34a; --stat-rgb: 22, 163, 74; } .warna-danger { --stat: #dc2626; --stat-rgb: 220, 38, 38; } .warna-warning { --stat: #d97706; --stat-rgb: 217, 119, 6; } .warna-info { --stat: #0891b2; --stat-rgb: 8, 145, 178; } .warna-secondary { --stat: #64748b; --stat-rgb: 100, 116, 139; } /* ------------------------------------------------------------- meter */ .meter { position: relative; background: #eef1f6; border-radius: 999px; overflow: hidden; } .meter-isi { height: 100%; border-radius: 999px; transition: width .35s ease; } .meter-baik { background: linear-gradient(90deg, #16a34a, #22c55e); } .meter-sedang { background: linear-gradient(90deg, #d97706, #f59e0b); } .meter-buruk { background: linear-gradient(90deg, #dc2626, #ef4444); } /* Angkanya di ATAS bilah, bukan di dalamnya: bilah 4 % tidak muat memuat tulisan "4%", dan angka yang terpotong lebih buruk daripada tidak ada. */ .meter-teks { position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #0f172a; text-shadow: 0 0 3px rgba(255, 255, 255, .85); } /* -------------------------------------------------------- pil & lencana */ .lencana { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .lencana-primary { background: rgba(37, 99, 235, .12); color: #1d4ed8; } .lencana-success { background: rgba(22, 163, 74, .13); color: #15803d; } .lencana-danger { background: rgba(220, 38, 38, .12); color: #b91c1c; } .lencana-warning { background: rgba(217, 119, 6, .14); color: #b45309; } .lencana-info { background: rgba(8, 145, 178, .12); color: #0e7490; } .lencana-secondary { background: rgba(100, 116, 139, .13); color: #475569; } .pil-skor { display: inline-grid; place-items: center; min-width: 2.6rem; padding: .2rem .5rem; border-radius: 999px; font-weight: 700; color: #fff; } .pil-baik { background: #16a34a; } .pil-sedang { background: #d97706; } .pil-buruk { background: #dc2626; } /* ------------------------------------------------------ lingkaran skor */ .kartu-skor .skor-lingkar { display: grid; place-items: center; flex: 0 0 auto; width: 7rem; height: 7rem; border-radius: 50%; border: .5rem solid; line-height: 1; } .kartu-skor .skor-angka { font-size: 2rem; font-weight: 800; } .kartu-skor .skor-satuan { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teks-redup); } .skor-baik { border-color: #16a34a; color: #15803d; background: rgba(22, 163, 74, .07); } .skor-sedang { border-color: #d97706; color: #b45309; background: rgba(217, 119, 6, .07); } .skor-buruk { border-color: #dc2626; color: #b91c1c; background: rgba(220, 38, 38, .07); } .skor-kosong { border-color: #cbd5e1; color: #94a3b8; background: #f8fafc; } /* -------------------------------------------------------------- tabel Ini perbaikan terbesar untuk layar laporan: sebelumnya HANYA `table.dataTable thead th` yang diberi warna, sehingga seluruh tabel laporan (yang bukan DataTables) tampil putih polos di atas kartu putih. */ .card table > thead > tr > th { background: var(--aksen-lembut); font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--aksen); border-bottom: 2px solid var(--sidebar-aktif); white-space: nowrap; } .card table > tbody > tr > td { border-color: var(--garis-tipis); } .card table > tbody > tr:hover > td { background: var(--aksen-lembut); } .card table > tfoot > tr > th, .card table > tfoot > tr > td { background: #f8fafc; border-top: 2px solid var(--garis); font-weight: 700; } /* Kepala tabel yang menempel HANYA dinyalakan lewat kelas `gulung-tabel`, tidak berlaku umum. Percobaan pertama memasang batas tinggi ke semua tabel dalam kartu, dan hasilnya laporan panjang tampak seperti kartu yang isinya terpotong di tengah baris — orang menyimpulkan datanya hilang, padahal ia hanya perlu menggulung di dalam kotak yang tidak terlihat batasnya. */ .card .table-responsive.gulung-tabel { max-height: 34rem; overflow-y: auto; } .card .table-responsive.gulung-tabel table > thead > tr > th { position: sticky; top: 0; z-index: 2; } /* Angka dalam tabel dibaca lebih cepat dengan lebar digit yang seragam. */ .card table .text-end { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- keadaan kosong */ .keadaan-kosong { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--teks-redup); text-align: center; } .keadaan-kosong .bi { font-size: 2.2rem; color: #cbd5e1; } .keadaan-kosong p { margin: 0; max-width: 34rem; font-size: .85rem; } /* ------------------------------------------------------------- alert tipis */ .alert-tipis { padding: .55rem .8rem; font-size: .82rem; border-radius: .5rem; border-width: 0 0 0 3px; } /* --------------------------------------------------------------- form */ .form-control:focus, .form-select:focus { border-color: var(--sidebar-aktif); box-shadow: 0 0 0 .2rem var(--aksen-lembut); } .form-label { font-weight: 600; color: #475569; } /* Tombol utama mengikuti aksen tema, bukan biru Bootstrap yang selalu sama apa pun tema yang dipilih pengguna. */ .btn-primary { --bs-btn-bg: var(--aksen); --bs-btn-border-color: var(--aksen); --bs-btn-hover-bg: var(--aksen); --bs-btn-hover-border-color: var(--aksen); --bs-btn-active-bg: var(--aksen); --bs-btn-active-border-color: var(--aksen); --bs-btn-disabled-bg: var(--aksen); --bs-btn-disabled-border-color: var(--aksen); filter: none; } .btn-primary:hover { filter: brightness(1.12); } .btn-outline-secondary { --bs-btn-color: #475569; --bs-btn-border-color: var(--garis); --bs-btn-hover-bg: var(--aksen-lembut); --bs-btn-hover-border-color: var(--aksen); --bs-btn-hover-color: var(--aksen); } /* -------------------------------------------------------- grafik dashboard */ .grafik-batang.bg-primary { background: var(--aksen) !important; border-radius: 3px 3px 0 0; } .grafik-kolom:hover .grafik-batang { opacity: 1; filter: brightness(1.2); } /* ---------------------------------------------------------------- cetak Halaman cetak (surat jalan, faktur, bukti setor) harus keluar HITAM-PUTIH di kertas: warna tema yang bagus di layar hanya memboroskan tinta dan membuat kepala kolom jadi abu-abu pudar di printer dot matrix. */ @media print { .sidebar, .menu-bawah, .laci-menu, .kepala-halaman .kh-aksi, .kartu-alat, .no-cetak { display: none !important; } .konten-utama { margin-left: 0 !important; } body { background: #fff !important; } .card { border: 1px solid #000; box-shadow: none; } .card-header { background: #fff !important; } .card table > thead > tr > th { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000; position: static; } .card .table-responsive { max-height: none; overflow: visible; } } /* ------------------------------------------------- petak antrean dashboard */ .petak-antrean { display: flex; align-items: center; justify-content: space-between; gap: .5rem; height: 100%; padding: .55rem .8rem; border: 1px solid var(--garis); border-left: 3px solid var(--pa, #cbd5e1); border-radius: .5rem; background: #fff; color: var(--teks-tegas); text-decoration: none; font-size: .82rem; transition: box-shadow .15s ease, transform .15s ease; } .petak-antrean:hover { box-shadow: var(--bayang-naik); transform: translateY(-1px); color: var(--teks-tegas); } .petak-antrean .petak-angka { display: grid; place-items: center; min-width: 1.85rem; padding: .05rem .45rem; border-radius: 999px; font-weight: 700; font-size: .78rem; background: rgba(var(--pa-rgb, 100, 116, 139), .14); color: var(--pa, #64748b); } .petak-danger { --pa: #dc2626; --pa-rgb: 220, 38, 38; } .petak-warning { --pa: #d97706; --pa-rgb: 217, 119, 6; } .petak-primary { --pa: #2563eb; --pa-rgb: 37, 99, 235; } .petak-secondary { --pa: #64748b; --pa-rgb: 100, 116, 139; } .petak-sepi { --pa: #e2e8f0; --pa-rgb: 148, 163, 184; color: var(--teks-redup); } .petak-sepi .petak-angka { background: #f1f5f9; color: #94a3b8; } /* =============================================== halaman bantuan & panduan */ .text-warna-aksen { color: var(--aksen); } /* Rantai alur di kepala halaman bantuan. Dibuat dari simpul + panah, bukan gambar: teksnya tetap bisa dicari peramban dan dibaca pembaca layar. */ .rantai-alur { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; } .rantai-simpul { padding: .2rem .6rem; border: 1px solid var(--garis); border-radius: 999px; background: var(--aksen-lembut); color: var(--aksen); font-size: .76rem; font-weight: 600; white-space: nowrap; } .rantai-panah { color: #cbd5e1; font-size: .7rem; } /* Satu butir fitur: nama, apa fungsinya, kenapa dirancang begitu. */ .butir-fitur { padding: .75rem .9rem; border: 1px solid var(--garis); border-left: 3px solid var(--aksen-lembut); border-radius: .5rem; background: #fff; } .butir-fitur:hover { border-left-color: var(--aksen); } .butir-fitur .bf-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .3rem; } .butir-fitur .bf-nama { font-weight: 700; color: var(--teks-tegas); text-decoration: none; } a.bf-nama:hover { color: var(--aksen); } .butir-fitur .bf-nama .bi { font-size: .72rem; opacity: .55; } .butir-fitur .bf-apa { margin: 0 0 .35rem; font-size: .84rem; } .butir-fitur .bf-kenapa { margin: 0; padding-top: .35rem; border-top: 1px dashed var(--garis); font-size: .78rem; color: var(--teks-redup); } /* Tangga langkah panduan cepat. Nomornya di luar kartu supaya urutannya terbaca sekilas tanpa perlu menghitung kartu. */ .tangga { list-style: none; margin: 0; padding: 0; } .tangga-anak { position: relative; display: flex; gap: .85rem; padding-bottom: .85rem; } /* Garis penghubung antar langkah — berhenti di langkah terakhir. */ .tangga-anak:not(:last-child)::before { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: 0; width: 2px; background: var(--garis); } .tangga-nomor { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; margin-top: .35rem; border-radius: 50%; background: var(--aksen); color: #fff; font-weight: 700; font-size: .85rem; } .tangga-kartu { flex: 1 1 auto; } .tangga-awas { display: flex; gap: .5rem; padding: .5rem .7rem; border-radius: .4rem; background: rgba(217, 119, 6, .09); border-left: 3px solid #d97706; font-size: .8rem; color: #78350f; } .tangga-awas .bi { color: #d97706; flex: 0 0 auto; margin-top: .1rem; } .tangga-awas code { background: rgba(0, 0, 0, .06); padding: 0 .25rem; border-radius: .2rem; } /* Tautan bantuan di kaki sidebar — selalu terlihat tanpa menggulung. */ .sidebar-kaki .kaki-bantuan { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: .5rem; color: var(--sidebar-teks); text-decoration: none; font-size: .78rem; } .sidebar-kaki .kaki-bantuan:hover { background: rgba(255, 255, 255, .08); color: #fff; } .sidebar-kaki .kaki-bantuan .bi { color: var(--sidebar-aktif); font-size: .95rem; }