:root { /* Softer, modern blue palette */ --c-primary: #1e40af; /* deep blue for emphasis / brand */ --c-primary-2: #3b82f6; /* main action — softer than old #1d4ed8 */ --c-primary-3: #60a5fa; /* light accent */ --c-primary-soft: #eff6ff; /* subtle blue tint background */ --c-primary-soft-2: #dbeafe; --c-bg: #f6f8fc; /* breathing background */ --c-card: #ffffff; --c-border: #d2d7df; /* card/border line */ --c-border-2: #eef2f7; --c-text: #0f172a; /* slate-900 */ --c-text-2: #334155; --c-muted: #64748b; --c-ok: #10b981; --c-warn: #f59e0b; --c-err: #ef4444; --c-info: #06b6d4; /* Sidebar dark slate-blue (softer than #0b1c3a) */ --c-side-bg-1: #1c2541; --c-side-bg-2: #131a32; --c-side-text: #c8d3e6; --c-side-text-dim: #8a99b5; --c-side-section: #6b7a99; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08); --shadow-blue: 0 6px 18px rgba(59, 130, 246, 0.28); --radius: 4px; --radius-sm: 4px; --radius-lg: 4px; --t-fast: 120ms ease; --t-base: 180ms ease; /* Shared control heights — keep inputs, selects and buttons aligned so a field and the button beside it never look lopsided (timpang). */ --control-h: 40px; /* standard inputs, selects, default buttons */ --control-h-sm: 32px; /* compact: btn-sm and inputs inside table rows */ } /* ============ Tema per-brand ============ Default (:root) tetap biru agar halaman pra-login & tanpa konteks tetap rapi. Atribut data-theme di (di-set dari brand.theme) menimpa hanya variabel warna primer + aksen sidebar/shadow. Variabel netral tidak berubah per-tema. */ [data-theme="blue"] { --c-primary: #1e40af; --c-primary-2: #3b82f6; --c-primary-3: #60a5fa; --c-primary-soft: #eff6ff; --c-primary-soft-2: #dbeafe; --c-side-bg-1: #1c2541; --c-side-bg-2: #131a32; --shadow-blue: 0 6px 18px rgba(59, 130, 246, 0.28); } [data-theme="orange"] { --c-primary: #c2410c; /* orange-700 — penekanan/brand */ --c-primary-2: #ea580c; /* orange-600 — aksi utama */ --c-primary-3: #fb923c; /* orange-400 — aksen terang */ --c-primary-soft: #fff7ed; /* orange-50 — latar tint halus */ --c-primary-soft-2: #ffedd5; /* orange-100 */ /* Sidebar coklat-oranye gelap agar kontras dengan teks terang */ --c-side-bg-1: #3a2410; --c-side-bg-2: #2a1908; /* Override nilai (bukan nama) agar elemen lama ber-var(--shadow-blue) ikut oranye */ --shadow-blue: 0 6px 18px rgba(234, 88, 12, 0.28); } /* SINERGI (oranye) = warna SOLID, tanpa gradient & tanpa sisa biru hardcoded. */ [data-theme="orange"] .sidebar { background: var(--c-side-bg-1); } [data-theme="orange"] .sidenav a.active { background: var(--c-primary-2); } [data-theme="orange"] .kpi::before { background: var(--c-primary-2); opacity: 1; } [data-theme="orange"] .btn-primary:hover, [data-theme="orange"] .btn-primary:focus, [data-theme="orange"] .btn-primary:active { background: var(--c-primary); border-color: var(--c-primary); } /* SIMKEU (merah) = brand Keuangan. Warna SOLID, mirror pola oranye. */ [data-theme="red"] { --c-primary: #b91c1c; /* red-700 — penekanan/brand */ --c-primary-2: #dc2626; /* red-600 — aksi utama */ --c-primary-3: #f87171; /* red-400 — aksen terang */ --c-primary-soft: #fef2f2; /* red-50 — latar tint halus */ --c-primary-soft-2: #fee2e2; /* red-100 */ /* Sidebar merah gelap agar kontras dengan teks terang */ --c-side-bg-1: #3a1414; --c-side-bg-2: #2a0d0d; /* Override nilai (bukan nama) agar elemen lama ber-var(--shadow-blue) ikut merah */ --shadow-blue: 0 6px 18px rgba(220, 38, 38, 0.28); } [data-theme="red"] .sidebar { background: var(--c-side-bg-1); } [data-theme="red"] .sidenav a.active { background: var(--c-primary-2); } [data-theme="red"] .kpi::before { background: var(--c-primary-2); opacity: 1; } [data-theme="red"] .btn-primary:hover, [data-theme="red"] .btn-primary:focus, [data-theme="red"] .btn-primary:active { background: var(--c-primary); border-color: var(--c-primary); } /* SIANGGAR (hijau) — brand Anggaran lama (tak lagi dipakai; disimpan untuk kompatibilitas). */ [data-theme="green"] { --c-primary: #15803d; /* green-700 — penekanan/brand */ --c-primary-2: #16a34a; /* green-600 — aksi utama */ --c-primary-3: #4ade80; /* green-400 — aksen terang */ --c-primary-soft: #f0fdf4; /* green-50 — latar tint halus */ --c-primary-soft-2: #dcfce7; /* green-100 */ --c-side-bg-1: #14371f; --c-side-bg-2: #0d2716; --shadow-blue: 0 6px 18px rgba(22, 163, 74, 0.28); } [data-theme="green"] .sidebar { background: var(--c-side-bg-1); } [data-theme="green"] .sidenav a.active { background: var(--c-primary-2); } [data-theme="green"] .kpi::before { background: var(--c-primary-2); opacity: 1; } [data-theme="green"] .btn-primary:hover, [data-theme="green"] .btn-primary:focus, [data-theme="green"] .btn-primary:active { background: var(--c-primary); border-color: var(--c-primary); } /* expertUNSRI (navy + kuning) — brand Pengawasan SPI. Palet mengikuti deck "Menu Pengawasan SPI" (navy gelap + aksen kuning emas). */ [data-theme="navy"] { --c-primary: #16324f; /* navy — penekanan/brand */ --c-primary-2: #1f4972; /* navy terang — aksi utama */ --c-primary-3: #5b84ad; /* navy pucat — aksen */ --c-primary-soft: #eef4fa; /* tint latar halus */ --c-primary-soft-2: #dce9f5; --c-accent-gold: #f5b301; /* kuning emas — highlight khas SPI */ --c-side-bg-1: #14273c; --c-side-bg-2: #0d1b2a; --shadow-blue: 0 6px 18px rgba(22, 50, 79, 0.28); } [data-theme="navy"] .sidebar { background: var(--c-side-bg-1); } /* Item aktif kuning emas + teks navy: penanda lokasi sangat jelas (aksesibilitas). */ [data-theme="navy"] .sidenav a.active { background: var(--c-accent-gold); color: #14273c; font-weight: 700; } [data-theme="navy"] .sidenav a.active [data-lucide] { color: #14273c; } [data-theme="navy"] .kpi::before { background: var(--c-accent-gold); opacity: 1; } [data-theme="navy"] .btn-primary:hover, [data-theme="navy"] .btn-primary:focus, [data-theme="navy"] .btn-primary:active { background: var(--c-primary); border-color: var(--c-primary); } /* Aksesibilitas expertUNSRI — pengguna SPI berusia 40–70 tahun: huruf lebih besar, target klik lebih lapang, kontras tegas. (docs/prd-expertunsri-spi.md §8 UI/UX) */ [data-theme="navy"] .app-content { font-size: 15px; } /* Nilai padding di sini menang atas basis .sidenav a (specificity lebih tinggi), jadi harus ikut naik saat basis dilonggarkan — kalau tidak, justru tema yang ditujukan untuk pengguna senior yang paling rapat. */ [data-theme="navy"] .sidenav a { font-size: 15px; padding-top: 13px; padding-bottom: 13px; } /* Judul seksi ikut dinaikkan dari 11.5px basis. Label huruf-kapital kecil adalah yang paling sulit dibaca di sidebar, dan expertUNSRI punya 3 seksi sehingga label itu yang jadi penanda utama letak menu. Jarak huruf sedikit dilebarkan karena huruf kapital berukuran kecil butuh itu agar tidak menyatu. */ [data-theme="navy"] .nav-section { font-size: 12.5px; letter-spacing: 0.1em; color: #9db3d1; } [data-theme="navy"] .kpi .label { font-size: 13px; } [data-theme="navy"] .kpi .value { font-size: 30px; } [data-theme="navy"] .tbl th, [data-theme="navy"] .tbl td { font-size: 14.5px; padding-top: 12px; padding-bottom: 12px; } [data-theme="navy"] .btn { font-size: 14.5px; } /* Logo expertUNSRI (SVG 240×48) tampak lebih kecil dari logo PNG brand lain pada ukuran bersama — perbesar khusus tema navy. */ [data-theme="navy"] .sidebar .brand-logo { max-width: 214px; } [data-theme="navy"] .auth-hero-logo { height: 56px; } [data-theme="navy"] .breadcrumb { font-size: 14px; } [data-theme="navy"] a:focus-visible, [data-theme="navy"] button:focus-visible { outline: 3px solid var(--c-accent-gold); outline-offset: 2px; } /* ============================================================ KONSOL GLOBAL (netral) — dipakai layouts/global.ejs untuk halaman lintas-aplikasi milik super admin (mis. Pemetaan Akses). SENGAJA netral: putih/abu, tanpa sidebar brand & tanpa warna khas SIPINTER/SINERGI/SIMKEU, karena sifatnya GLOBAL — bukan milik satu aplikasi. Primary di-set ke abu-gelap agar tombol & badge (yang memakai --c-primary*) ikut netral. */ [data-theme="neutral"] { --c-primary: #111827; /* gray-900 — penekanan */ --c-primary-2: #1f2937; /* gray-800 — aksi utama */ --c-primary-3: #4b5563; /* gray-600 — aksen */ --c-primary-soft: #f3f4f6; /* gray-100 — tint halus */ --c-primary-soft-2: #e5e7eb; /* gray-200 */ } .global-body { min-height: 100vh; display: flex; flex-direction: column; background: #f6f7f9; } .gtopbar { display: flex; align-items: center; gap: 16px; height: 58px; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 clamp(16px, 4vw, 32px); } .gtopbar-brand { display: inline-flex; align-items: center; gap: 10px; } .gtopbar-brand > [data-lucide] { width: 22px; height: 22px; color: #111827; } .gtopbar-brand-txt { display: flex; flex-direction: column; line-height: 1.12; } .gtopbar-brand-txt strong { font-size: 13.5px; font-weight: 700; color: #111827; } .gtopbar-brand-txt small { font-size: 11px; color: #9ca3af; } .gtopbar-nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; } .gtopbar-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #6b7280; text-decoration: none; border-radius: 8px; padding: 8px 12px; transition: background var(--t-fast), color var(--t-fast); } .gtopbar-link:hover { background: #f3f4f6; color: #111827; } .gtopbar-link.active { background: #111827; color: #fff; } .gtopbar-link [data-lucide] { width: 16px; height: 16px; } /* Lencana jumlah antrean pada menu konsol (mis. pendaftaran menunggu). Tetap tampil saat label teksnya disembunyikan di layar sempit. */ .gtopbar-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .gtopbar-link.active .gtopbar-badge { background: #fff; color: #111827; } .gtopbar-user { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; } .gtopbar-who { text-align: right; line-height: 1.15; } .gtopbar-name { display: block; font-size: 13px; font-weight: 600; color: #111827; } .gtopbar-role { display: block; font-size: 11px; color: #9ca3af; } .gtopbar-out { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .gtopbar-out:hover { background: #f3f4f6; color: #b91c1c; border-color: #d1d5db; } .gtopbar-out [data-lucide] { width: 17px; height: 17px; } /* Dipakai HANYA oleh halaman global super admin (admin/mapping/*). Dilebarkan dari 1080px → 1360px supaya tabel Pemetaan Akses (nama+email, peran, aplikasi, unit) punya ruang; kolom peran/aplikasi berisi banyak badge yang mudah terlipat. */ .gpage { flex: 1 1 auto; width: 100%; max-width: 1360px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 32px) 40px; } .gpage-head { margin: 0 0 16px; } .gpage-head h1 { font-size: 20px; font-weight: 700; margin: 0 0 3px; display: flex; align-items: center; gap: 9px; } .gpage-head h1 [data-lucide] { width: 22px; height: 22px; color: var(--c-primary); } .gpage-head p { margin: 0; color: #6b7280; font-size: 13px; } .gfooter { border-top: 1px solid #e5e7eb; background: #fff; text-align: center; padding: 14px; font-size: 12px; color: #9ca3af; } @media (max-width: 640px) { .gtopbar { gap: 8px; } .gtopbar-link span { display: none; } .gtopbar-link span.gtopbar-badge { display: inline-grid; } .gtopbar-brand-txt small { display: none; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font: 14px/1.55 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--c-primary-2); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--c-primary); text-decoration: none; } /* Lucide icon defaults */ [data-lucide] { width: 18px; height: 18px; stroke-width: 1.85; flex-shrink: 0; } .icon-sm [data-lucide], [data-lucide].icon-sm { width: 14px; height: 14px; } .icon-lg [data-lucide], [data-lucide].icon-lg { width: 22px; height: 22px; } /* ============ Layout ============ */ .app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } .sidebar { background: linear-gradient(180deg, var(--c-side-bg-1) 0%, var(--c-side-bg-2) 100%); color: var(--c-side-text); padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { display: flex; align-items: center; justify-content: flex-start; padding: 4px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 14px; text-decoration: none; } .sidebar .brand:hover { text-decoration: none; } .sidebar .brand-logo { display: block; width: 100%; max-width: 170px; height: auto; object-fit: contain; } /* SATU berkas logo untuk seluruh suite: /public/logo-sinergi.png — lambang resmi SINERGI, penuh warna dan bertumpuk vertikal (swoosh di atas, wordmark biru dongker + pita tagline di bawah). Sidebar berlatar gelap, jadi lambang ini TIDAK bisa ditempel langsung: wordmark-nya akan hilang. Alih-alih menyimpan berkas varian terang kedua, lambang dialasi kartu putih membulat. Kelas dipasang hanya bila brands.js menandai `logoPlate` — logo expertUNSRI sudah punya varian terang sendiri sehingga tidak perlu alas. Tingginya lebih besar dari wordmark mendatar yang lama karena lambang ini bertumpuk; di bawah ~70px pita taglinenya sudah tidak terbaca. */ .brand-logo.logo-plate { max-width: 152px; padding: 9px 11px; box-sizing: border-box; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } /* Ketiga aplikasi suite memakai wordmark SINERGI yang sama — sub-nama modul (Perencanaan/Anggaran/Keuangan) yang membedakannya. Ditumpuk tepat di bawah logo sebagai satu kunci brand, bukan baris terpisah di bawah garis pemisah. */ .sidebar .brand-lockup { display: block; min-width: 0; } .sidebar .brand-sub { display: block; margin-top: 3px; padding-left: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-side-text); opacity: .72; } /* expertUNSRI adalah AKRONIM (Executive Performance Evaluation and Review Tools) — kepanjangannya dipasang sebagai baris kecil tepat di bawah logo, sejajar peran `.brand-sub` pada suite SINERGI. Dibuat lebih redup & lebih kecil karena isinya kalimat penuh, bukan label satu kata; dibiarkan membungkus dua baris pada lebar sidebar. */ .sidebar .brand-expansion { display: block; margin-top: 4px; padding-left: 2px; font-size: 10.5px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; color: var(--c-side-text); opacity: .6; } .sidenav { display: flex; flex-direction: column; gap: 2px; } .sidenav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 4px; color: var(--c-side-text); font-size: 13.5px; white-space: nowrap; overflow: hidden; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); } /* Label menu selalu satu baris; potong dengan elipsis bila terlalu panjang. */ .sidenav a span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sidenav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .sidenav a [data-lucide] { opacity: 0.85; } .sidenav a.active { background: linear-gradient(90deg, var(--c-primary-2), #2563eb); color: #fff; } .sidenav a.active [data-lucide] { opacity: 1; } .nav-section { padding: 16px 12px 6px; color: var(--c-side-section); text-transform: uppercase; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; } .sidenav { flex: 1; } .nav-section-bottom { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 14px; } .panduan-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; } .panduan-content { min-width: 0; } .panduan-toc { position: sticky; top: 16px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px; max-height: calc(100vh - 32px); overflow-y: auto; } .panduan-toc h4 { margin: 0 0 10px; font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.08em; } .panduan-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; } .panduan-toc ol li { counter-increment: toc; margin: 0; } .panduan-toc ol li a { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 4px; color: var(--c-text); font-size: 13px; line-height: 1.3; border-left: 2px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .panduan-toc ol li a::before { content: counter(toc, decimal-leading-zero); font-size: 10px; font-weight: 700; color: var(--c-muted); letter-spacing: 0.05em; flex-shrink: 0; } .panduan-toc ol li a:hover { background: var(--c-primary-soft); color: var(--c-primary); } .panduan-toc ol li a.active { background: var(--c-primary-soft); color: var(--c-primary); border-left-color: var(--c-primary-2); font-weight: 600; } .panduan-toc ol li a.active::before { color: var(--c-primary); } @media (max-width: 960px) { .panduan-layout { grid-template-columns: 1fr; } .panduan-toc { position: static; max-height: none; } } .panduan-section { scroll-margin-top: 80px; } .panduan-section h2 { display: flex; align-items: center; gap: 8px; } .panduan-section h2 .step-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 700; } .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .role-card { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; background: #fff; } .role-card h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; } .role-card .role-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .role-card ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; } .role-card ul li { margin-bottom: 3px; } .fr-table th, .fr-table td { vertical-align: top; } .fr-table code { font-size: 12px; } .gloss-table td { font-size: 13px; } .gloss-table td:first-child strong { color: var(--c-primary); } .gloss-table td:nth-child(2) { color: #475569; } /* ---- Peta Ekosistem SINERGI (partials/ekosistem-flow.ejs) ---- Inline SVG mandiri: dipakai di portal /select-app (layout auth, tanpa d3) maupun di tiap halaman panduan. Skala mengikuti lebar wadah. */ .eko-flow { width: 100%; } .eko-flow svg { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; } .eko-legend { list-style: none; margin: 12px auto 0; padding: 0; max-width: 680px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 11.5px; color: var(--c-muted); } .eko-legend li { display: inline-flex; align-items: center; gap: 6px; } .eko-legend .ln { width: 22px; height: 0; border-top-width: 2px; flex: 0 0 auto; } .eko-legend .ln.solid { border-top-style: solid; border-top-color: #64748b; } .eko-legend .ln.back { border-top-style: dashed; border-top-color: #0d9488; } .eko-legend .ln.read { border-top-style: dashed; border-top-color: #94a3b8; } .app-main { display: flex; flex-direction: column; min-width: 0; } .topbar { background: #fff; border-bottom: 1px solid var(--c-border); padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 5; } .topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .topbar-title { font-size: 15px; font-weight: 600; color: var(--c-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user { display: flex; gap: 14px; align-items: center; flex-shrink: 0; } /* Hamburger — hanya tampil di layar kecil (lihat media query). */ .sidebar-toggle { display: none; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 7px; border-radius: 6px; color: var(--c-muted); flex-shrink: 0; } .sidebar-toggle:hover { background: var(--c-border-2); color: var(--c-text); } .sidebar-backdrop { display: none; } .user-block { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 4px; background: var(--c-border-2); } .user-avatar { width: 32px; height: 32px; border-radius: 4px; background: var(--c-primary-soft); color: var(--c-primary-2); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--c-primary-soft-2); } .user-avatar [data-lucide] { width: 18px; height: 18px; } .user-meta { line-height: 1.15; } .user-name { font-weight: 600; font-size: 13px; color: var(--c-text); } .user-roles { color: var(--c-muted); font-size: 11px; } .logout-form { margin: 0; } .btn-icon { background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 4px; color: var(--c-muted); font: inherit; display: inline-flex; align-items: center; gap: 6px; transition: background var(--t-fast), color var(--t-fast); } .btn-icon:hover { background: var(--c-border-2); color: var(--c-text); } .btn-link { background: none; border: 0; color: var(--c-primary-2); cursor: pointer; padding: 0; font: inherit; display: inline-flex; align-items: center; gap: 6px; } .btn-link:hover { color: var(--c-primary); } .app-content { padding: 24px 28px; } /* ============ Breadcrumb ============ */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; font-size: 13px; } .breadcrumb a { color: var(--c-muted); text-decoration: none; display: inline-flex; align-items: center; } .breadcrumb a:hover { color: var(--c-primary-2); text-decoration: underline; } .breadcrumb .bc-home [data-lucide] { width: 15px; height: 15px; } .breadcrumb .bc-sep { color: var(--c-muted); display: inline-flex; align-items: center; } .breadcrumb .bc-sep [data-lucide] { width: 14px; height: 14px; } .breadcrumb .bc-current { color: var(--c-text); font-weight: 600; max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ Cards & tables ============ */ .card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .card h2, .card h3 { margin: 0 0 12px; color: var(--c-text); display: flex; align-items: center; gap: 8px; } .card h2 > [data-lucide], .card h3 > [data-lucide], .card-header h2 > [data-lucide], .card-header h3 > [data-lucide] { width: 18px; height: 18px; color: var(--c-primary-2); flex-shrink: 0; } .app-content > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; } .app-content > h2 > [data-lucide] { width: 20px; height: 20px; color: var(--c-primary-2); flex-shrink: 0; } .card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px; } /* Let the title block shrink so a long h2 wraps/ellipsizes instead of pushing the action buttons out of the card (overflow). */ .card-header > :first-child { min-width: 0; } /* Ensure the icon → title gap always applies, even when .card-header is used outside a .card (so the icon never touches the title text). */ .card-header h2, .card-header h3 { margin: 0; display: flex; align-items: center; gap: 8px; } .card-header h2 { font-size: 18px; overflow-wrap: anywhere; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base); position: relative; overflow: hidden; } .kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--c-primary-3), var(--c-primary-2)); opacity: 0.7; } .kpi-icon { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 4px; background: var(--c-primary-soft); color: var(--c-primary-2); display: grid; place-items: center; } .kpi-icon [data-lucide] { width: 20px; height: 20px; } .kpi .label { color: var(--c-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding-right: 48px; } .kpi .value { font-size: 26px; font-weight: 700; margin-top: 6px; color: var(--c-text); line-height: 1.15; } .kpi .delta { font-size: 11.5px; margin-top: 6px; color: var(--c-muted); } .kpi .delta .chip { display: inline-block; background: var(--c-border-2); color: var(--c-text-2); padding: 1px 8px; border-radius: 4px; margin-right: 4px; font-weight: 500; } .chart-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } .chart-grid .card { margin-bottom: 0; } @media (max-width: 1280px) { .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .chart-grid { grid-template-columns: 1fr; } } .chart-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 11px; color: var(--c-muted); } .chart-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; } .chart-legend .lg-swatch { width: 10px; height: 10px; border-radius: 4px; display: inline-block; } .chart-legend .lg-value { color: #334155; font-weight: 600; } table.tbl { width: 100%; border-collapse: collapse; } table.tbl th, table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--c-border-2); text-align: left; vertical-align: top; } table.tbl th { background: #f7f9fc; font-weight: 600; color: var(--c-text-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; } table.tbl tr:hover td { background: #fafbfd; } table.tbl td.rka-col { max-width: 260px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .text-right { text-align: right; } .text-muted { color: var(--c-muted); } .nowrap { white-space: nowrap; } /* Sel teks panjang (mis. nama kegiatan): batasi lebar, boleh membungkus 2+ baris sehingga kolom lain tidak terdesak/terpotong. */ .cell-wrap { max-width: 260px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 640px) { .cell-wrap { max-width: 160px; } } /* ============ Forms ============ SATU sistem isian untuk seluruh aplikasi. Kenapa :where()? Basis kontrol di bawah memakai :where() sehingga bobotnya 0. Aturan komponen yang sudah ada (.rincian-table input, .jb-combo-input, .toolbar input, .auth-form …) otomatis tetap menang tanpa perlu !important. Basis ini sengaja TIDAK dibatasi ancestor
. Sebelumnya hanya `form input[type=text]` yang diberi gaya, sehingga kontrol di luar (filter, kotak pencarian) dan tipe lain (search/tel/file/tanpa atribut type) tampil polos tanpa border — itulah salah satu penyebab form terlihat rusak. Dua pola markup di repo ini didukung dan menghasilkan tampilan IDENTIK: a) (label membungkus) b)
(bersebelahan) */ /* Bawaan tetap DUA kolom seperti sebelumnya (dipakai ~35 view). Yang berubah: jarak antar-kolom sedikit dilonggarkan, item diregangkan agar isian sejajar, dan otomatis menjadi satu kolom di ponsel (lihat media query di bawah). */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: stretch; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .form-grid label.full, .form-grid .full { grid-column: 1 / -1; } /* Label = kotak field: judul di atas, kontrol menempel di bawahnya. */ form label, .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: var(--ui-fs-label); font-weight: 600; color: var(--c-text-2); min-width: 0; } /* Teks judul boleh berupa ATAU teks telanjang (banyak view memakai ). Karena bobot huruf tebal kini dipegang oleh label itu sendiri, kedua pola tampil sama. */ form label > span:first-child, .field > label { line-height: 1.35; } /* Judul yang berdiri sendiri di sebelah isiannya (pola ). Menggantikan tambalan inline style="display:block; font-size:12px" yang tersebar di 25 tempat — kini ukuran, bobot, dan jaraknya seragam dengan judul field lainnya. */ .field-label { display: block; margin: 0 0 6px; line-height: 1.35; font-size: var(--ui-fs-label); font-weight: 600; color: var(--c-text-2); } /* Keterangan bantu di samping judul (mis. "PDF/JPG · maks 10 MB") tetap redup — .text-muted / .hint tidak boleh tertimpa oleh gaya judul di atas. */ form label .text-muted, form label .hint, .field .text-muted { font-weight: 400; color: var(--c-muted); } /* Kontrol di dalam label selalu selebar fieldnya. */ form label > input:not([type=checkbox]):not([type=radio]), form label > select, form label > textarea, .field > input:not([type=checkbox]):not([type=radio]), .field > select, .field > textarea { width: 100%; } :where( .input, input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[type="search"], input[type="tel"], input[type="url"], select, textarea ) { box-sizing: border-box; height: var(--control-h); padding: 0 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; color: var(--c-text); font-family: inherit; font-size: var(--ui-fs-control); font-weight: 400; /* jangan mewarisi tebalnya judul label */ line-height: 1.3; max-width: 100%; transition: border-color var(--t-fast), box-shadow var(--t-fast); } :where(textarea) { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.55; resize: vertical; } :where(select) { padding-right: 34px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 17px; cursor: pointer; } :where(select[multiple], select[size]) { height: auto; padding: 6px 8px; background-image: none; } :where(input[type="file"]) { min-height: var(--control-h); padding: 7px 10px; border: 1px dashed var(--c-border); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: var(--ui-fs-control); max-width: 100%; } :where(input[type="checkbox"], input[type="radio"]) { width: 19px; height: 19px; margin: 0; flex: none; accent-color: var(--c-primary-2); cursor: pointer; } /* Kontrol ringkas di dalam baris tabel rincian — tetap sejajar tombol btn-sm. */ .rincian-table input, .rincian-toolbar select { height: var(--control-h-sm); padding: 4px 8px; } .rincian-toolbar select { padding-right: 28px; background-position: right 7px center; background-size: 15px; } input:focus-visible, select:focus-visible, textarea:focus-visible, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary-2); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); } input[disabled], select[disabled], textarea[disabled], input[readonly] { background: #f1f5f9; color: var(--c-muted); cursor: not-allowed; } ::placeholder { color: #94a3b8; opacity: 1; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-h); padding: 0 16px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; color: var(--c-text); cursor: pointer; font: inherit; font-weight: 500; line-height: 1.2; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); box-shadow: none; } .btn:hover { background: #f4f6fa; border-color: #d6dde8; box-shadow: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--c-primary-2); color: #fff; border-color: var(--c-primary-2); box-shadow: none; } .btn-primary:hover { background: #2563eb; border-color: #2563eb; color: #fff; } .btn-danger { background: var(--c-err); color: #fff; border-color: var(--c-err); } .btn-danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; } .btn-success { background: var(--c-ok); color: #fff; border-color: var(--c-ok); } .btn-success:hover { background: #059669; border-color: #059669; color: #fff; } .btn-block { display: flex; width: 100%; justify-content: center; } .btn-sm { min-height: var(--control-h-sm); padding: 0 10px; font-size: 12px; } button, .btn, .btn-primary, .btn-danger, .btn-success, .btn-sm, .btn-block, .btn-icon, .btn-link { box-shadow: none !important; } button:hover, button:focus, button:active, .btn:hover, .btn:focus, .btn:active, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-icon:hover, .btn-icon:focus, .btn-icon:active, .btn-link:hover, .btn-link:focus, .btn-link:active { box-shadow: none !important; } .toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .toolbar .spacer { flex: 1; } .toolbar input, .toolbar select { height: var(--control-h); padding: 7px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; font: inherit; } /* Buttons in a filter toolbar match the inputs' height regardless of the size class the view used (btn / btn-sm / btn-md), so the row stays level. */ .toolbar .btn { min-height: var(--control-h); padding: 0 14px; font-size: 13.5px; } /* Label yang membungkus input inline (mis. "Tahun ") dibuat inline-flex agar tinggi label = tinggi input → input sejajar dengan tombol. Label berpola stacked (display:block via inline-style) tidak terpengaruh. flex-direction:row WAJIB ditulis ulang di sini — `form label` (di atas) memaksa flex-direction:column untuk semua