/* ============================================================================ REKA ERP — DESIGN SYSTEM ---------------------------------------------------------------------------- Ditulis tangan, tanpa framework, tanpa build step. Prinsip: 1. TOKEN DULU. Semua warna/jarak/radius/bayangan lewat CSS variable. Ganti satu variabel → seluruh aplikasi ikut berubah. Ini yang bikin tema gelap bisa dibuat tanpa menulis ulang satu pun komponen. 2. WARNA SEMANTIK, bukan nama warna. Pakai `--permukaan`, `--garis`, `--tinta` — bukan `--putih`/`--abu`. Kalau namanya warna, tema gelap jadi mimpi buruk. 3. DENSITAS BISA DIATUR. Aplikasi bisnis dilihat berjam-jam; sebagian orang mau rapat (banyak baris), sebagian mau lega. Satu atribut di . 4. RESPONSIF NYATA. Tabel data di HP BUKAN tabel yang di-scroll ke samping — itu menyiksa. Di layar kecil, baris berubah jadi kartu. ============================================================================ */ /* ---------------------------------------------------------------- 1. TOKEN */ :root { /* --- Netral (dasar seluruh tampilan) --- */ --n-0: #ffffff; --n-25: #fcfcfd; --n-50: #f8f9fb; --n-100:#f1f2f6; --n-150:#e8eaef; --n-200:#dfe2e9; --n-300:#c8ccd6; --n-400:#9ba1b0; --n-500:#6f7686; --n-600:#525a6b; --n-700:#3b4252; --n-800:#252b38; --n-900:#161a23; --n-950:#0d1017; /* --- Merek --- */ --b-50: #eef2ff; --b-100:#e0e7ff; --b-200:#c7d2fe; --b-300:#a5b4fc; --b-400:#818cf8; --b-500:#6366f1; --b-600:#4f46e5; --b-700:#4338ca; --b-800:#3730a3; /* --- Semantik --- */ --hijau-50:#ecfdf5; --hijau-500:#10b981; --hijau-600:#059669; --hijau-700:#047857; --kuning-50:#fffbeb; --kuning-500:#f59e0b;--kuning-600:#d97706; --kuning-700:#b45309; --merah-50:#fef2f2; --merah-500:#ef4444; --merah-600:#dc2626; --merah-700:#b91c1c; --biru-50:#eff6ff; --biru-500:#3b82f6; --biru-600:#2563eb; --biru-700:#1d4ed8; --ungu-50:#faf5ff; --ungu-500:#a855f7; --ungu-600:#9333ea; /* --- Peran (ini yang dipakai komponen) --- */ --latar: var(--n-50); --permukaan: var(--n-0); --permukaan-2: var(--n-25); --tinta: var(--n-900); --tinta-lembut: var(--n-600); --tinta-samar: var(--n-500); --garis: var(--n-200); --garis-kuat: var(--n-300); --merek: var(--b-600); --merek-lembut: var(--b-50); --merek-teks: var(--b-700); /* --- Jarak: kelipatan 4px --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; /* --- Radius --- */ --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-penuh: 999px; /* --- Bayangan bertingkat (makin tinggi = makin "dekat" ke mata) --- */ /* Bayangan berlapis. Tiga hal yang bikin ini terasa "mahal" dan bukan kotak kelabu: (a) 2-3 lapis per level, bukan satu blur rata; (b) rasio offset y:x = 2:1 — sumber cahaya konsisten dari atas; (c) warna bayangan diselaraskan ke hue merek (264), bukan hitam murni. */ --bayang-1: 0 1px 2px -1px rgb(38 40 90 / .08), 0 1px 1px 0 rgb(38 40 90 / .04); --bayang-2: 0 2px 4px -1px rgb(38 40 90 / .09), 0 1px 2px -1px rgb(38 40 90 / .05); --bayang-3: 0 4px 8px -2px rgb(38 40 90 / .10), 0 2px 4px -2px rgb(38 40 90 / .06); --bayang-4: 0 12px 22px -6px rgb(38 40 90 / .12), 0 4px 8px -4px rgb(38 40 90 / .07); --bayang-5: 0 26px 48px -12px rgb(38 40 90 / .20), 0 8px 16px -8px rgb(38 40 90 / .09); /* --- Tipografi --- */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; --t-2xs: 11px; --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 19px; --t-2xl: 24px; --t-3xl: 30px; /* --- Gerak --- */ --cepat: 120ms; --sedang: 200ms; --lambat: 320ms; --ease: cubic-bezier(.4, 0, .2, 1); --ease-masuk: cubic-bezier(.16, 1, .3, 1); /* --- Tata letak --- */ --lebar-sisi: 244px; --tinggi-atas: 56px; --lebar-isi: 1360px; /* --- Densitas --- Satu atribut di mengubah tinggi kontrol, padding sel, dan tinggi baris sekaligus. Pengguna ERP memakai layar berbeda: laptop kecil butuh rapat, monitor besar butuh lega. Menyediakan keduanya lebih baik daripada memilih satu untuk semua orang. */ --pad-baris: 11px 14px; --tinggi-kontrol: 36px; --tinggi-baris: 44px; --pad-kartu: 20px; --pad-sel-x: 14px; --z-lengket: 20; --z-sisi: 40; --z-atas: 50; --z-toast: 80; --z-modal: 90; --z-palet: 100; } /* ------------------------------------------------------------- 2. TEMA GELAP */ /* Tema gelap BUKAN pembalikan warna. Yang berubah cuma PERAN-nya; skala netral tetap dipakai supaya bayangan & kontras tetap masuk akal. Permukaan dibuat sedikit lebih terang dari latar (bukan lebih gelap), karena di layar gelap "naik" terasa lebih benar daripada "turun". */ :root[data-tema="gelap"] { --latar: var(--n-950); --permukaan: #151922; --permukaan-2: #1b2029; --tinta: #eceef3; --tinta-lembut: #a7aebe; --tinta-samar: #7c8496; --garis: #262c39; --garis-kuat: #343b4b; --merek: var(--b-500); --merek-lembut: #1e2440; --merek-teks: var(--b-300); --hijau-50:#062b1e; --kuning-50:#2e1f04; --merah-50:#2c0f10; --biru-50:#0c1d3d; --ungu-50:#231039; /* Di layar gelap, bayangan hitam saja bikin permukaan "tenggelam". Tambahkan garis cahaya tipis di tepi atas — meniru cahaya dari atas. */ --bayang-1: 0 1px 2px -1px rgb(0 0 0 / .5), inset 0 1px 0 0 rgb(255 255 255 / .04); --bayang-2: 0 2px 5px -1px rgb(0 0 0 / .55), inset 0 1px 0 0 rgb(255 255 255 / .05); --bayang-3: 0 5px 11px -2px rgb(0 0 0 / .6), inset 0 1px 0 0 rgb(255 255 255 / .05); --bayang-4: 0 14px 26px -6px rgb(0 0 0 / .65), inset 0 1px 0 0 rgb(255 255 255 / .06); --bayang-5: 0 30px 56px -14px rgb(0 0 0 / .75), inset 0 1px 0 0 rgb(255 255 255 / .07); color-scheme: dark; } /* Densitas nyata: nilai di atas ditimpa sesuai pilihan pengguna. */ :root[data-densitas="rapat"] { --pad-baris: 6px 10px; --tinggi-kontrol: 30px; --tinggi-baris: 32px; --pad-kartu: 14px; --pad-sel-x: 10px; --t-md: 13px; } :root[data-densitas="nyaman"] { --pad-baris: 11px 14px; --tinggi-kontrol: 36px; --tinggi-baris: 44px; --pad-kartu: 20px; --pad-sel-x: 14px; } /* ---------------------------------------------------------------- 3. DASAR */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--t-md); line-height: 1.55; background: var(--latar); color: var(--tinta); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.014em; line-height: 1.25; } h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); } p { margin: 0 0 var(--s4); } a { color: var(--merek-teks); text-decoration: none; } a:hover { text-decoration: underline; } code, kbd, samp { font-family: var(--font-mono); font-size: .92em; } kbd { background: var(--permukaan-2); border: 1px solid var(--garis); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 1px 5px; font-size: var(--t-2xs); color: var(--tinta-lembut); } /* Fokus: HANYA tampil saat navigasi keyboard. Mouse tidak perlu lihat cincin. */ :focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; border-radius: var(--r-sm); } /* Hormati pengguna yang matikan animasi. Ini bukan hiasan — bagi sebagian orang, gerakan bisa memicu mual/vertigo. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------- 4. TATA LETAK */ .shell { min-height: 100vh; display: flex; } /* --- Bilah sisi --- */ .sisi { width: var(--lebar-sisi); flex: 0 0 var(--lebar-sisi); background: var(--permukaan); border-right: 1px solid var(--garis); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: var(--z-sisi); } .sisi-kepala { height: var(--tinggi-atas); flex: 0 0 var(--tinggi-atas); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); border-bottom: 1px solid var(--garis); } .sisi-merek { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-lg); letter-spacing: -.02em; color: var(--tinta); } .sisi-merek .lambang { width: 28px; height: 28px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--b-500), var(--b-700)); display: grid; place-items: center; color: #fff; font-size: var(--t-sm); font-weight: 800; box-shadow: var(--bayang-2); } .sisi-tenant { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--garis); font-size: var(--t-xs); color: var(--tinta-samar); } .sisi-tenant strong { display: block; color: var(--tinta); font-size: var(--t-sm); font-weight: 600; } .sisi-nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s2); } .sisi-nav .judul-grup { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-samar); padding: var(--s4) var(--s3) var(--s2); } .sisi-nav a { display: flex; align-items: center; gap: var(--s3); padding: 7px var(--s3); margin-bottom: 1px; border-radius: var(--r-md); color: var(--tinta-lembut); font-size: var(--t-sm); font-weight: 500; text-decoration: none; transition: background var(--cepat) var(--ease), color var(--cepat) var(--ease); } .sisi-nav a:hover { background: var(--permukaan-2); color: var(--tinta); text-decoration: none; } .sisi-nav a.aktif { background: var(--merek-lembut); color: var(--merek-teks); font-weight: 600; } .sisi-nav a .ikon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.9; opacity: .85; } .sisi-nav a.aktif .ikon { opacity: 1; } .sisi-nav a .hitung { margin-left: auto; font-size: var(--t-2xs); font-weight: 700; background: var(--n-100); color: var(--tinta-lembut); padding: 1px 7px; border-radius: var(--r-penuh); } :root[data-tema="gelap"] .sisi-nav a .hitung { background: var(--n-800); } .sisi-kaki { padding: var(--s3); border-top: 1px solid var(--garis); } /* --- Area utama --- */ .utama { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bilah-atas { height: var(--tinggi-atas); flex: 0 0 var(--tinggi-atas); background: color-mix(in srgb, var(--permukaan) 82%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--garis); display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s5); position: sticky; top: 0; z-index: var(--z-atas); } .bilah-atas .cari-cepat { display: flex; align-items: center; gap: var(--s2); background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: var(--r-md); padding: 0 var(--s3); height: 34px; width: min(360px, 42vw); color: var(--tinta-samar); font-size: var(--t-sm); cursor: pointer; transition: border-color var(--cepat) var(--ease); } .bilah-atas .cari-cepat:hover { border-color: var(--garis-kuat); } .bilah-atas .cari-cepat span { flex: 1; text-align: left; } .bilah-atas .kanan { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } .ikon-tombol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--tinta-lembut); cursor: pointer; transition: background var(--cepat) var(--ease), color var(--cepat) var(--ease); } .ikon-tombol:hover { background: var(--permukaan-2); color: var(--tinta); } .ikon-tombol svg { width: 18px; height: 18px; stroke-width: 1.9; } .avatar { width: 30px; height: 30px; border-radius: var(--r-penuh); background: linear-gradient(135deg, var(--b-500), var(--b-700)); color: #fff; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 700; flex: 0 0 30px; } .pengguna-tombol { display: flex; align-items: center; gap: var(--s2); padding: 3px 8px 3px 3px; border-radius: var(--r-penuh); border: 1px solid var(--garis); background: var(--permukaan); cursor: pointer; font: inherit; color: var(--tinta); transition: border-color var(--cepat) var(--ease), box-shadow var(--cepat) var(--ease); } .pengguna-tombol:hover { border-color: var(--garis-kuat); box-shadow: var(--bayang-1); } .pengguna-tombol .nama { font-size: var(--t-sm); font-weight: 600; } .isi { flex: 1; padding: var(--s6) var(--s5) var(--s12); width: 100%; max-width: var(--lebar-isi); margin: 0 auto; } /* Kepala halaman: judul + aksi, menempel saat scroll panjang */ .kepala-halaman { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; } .kepala-halaman .teks { flex: 1; min-width: 220px; } .kepala-halaman h1 { font-size: var(--t-2xl); } .kepala-halaman .sub { color: var(--tinta-samar); font-size: var(--t-sm); margin-top: 2px; } .kepala-halaman .aksi { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } .remah { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--tinta-samar); margin-bottom: var(--s2); } .remah a { color: var(--tinta-samar); } .remah a:hover { color: var(--tinta); } .remah .pisah { opacity: .45; } /* ------------------------------------------------------------------ 5. TOMBOL */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--tinggi-kontrol); padding: 0 var(--s4); border-radius: var(--r-md); border: 1px solid var(--merek); background: var(--merek); color: #fff; font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: var(--bayang-1); transition: background var(--cepat) var(--ease), border-color var(--cepat) var(--ease), box-shadow var(--cepat) var(--ease), transform var(--cepat) var(--ease); } .btn:hover { background: var(--b-700); border-color: var(--b-700); text-decoration: none; color: #fff; } .btn:active { transform: translateY(1px); box-shadow: none; } .btn svg { width: 16px; height: 16px; stroke-width: 2; } .btn.abu { background: var(--permukaan); color: var(--tinta); border-color: var(--garis); box-shadow: var(--bayang-1); } .btn.abu:hover { background: var(--permukaan-2); border-color: var(--garis-kuat); color: var(--tinta); } .btn.halus { background: transparent; border-color: transparent; color: var(--tinta-lembut); box-shadow: none; padding: 0 var(--s3); } .btn.halus:hover { background: var(--permukaan-2); color: var(--tinta); } .btn.hapus { background: var(--permukaan); border-color: var(--garis); color: var(--merah-600); } .btn.hapus:hover { background: var(--merah-50); border-color: var(--merah-500); color: var(--merah-700); } .btn.kecil { height: 30px; padding: 0 var(--s3); font-size: var(--t-xs); } .btn.besar { height: 42px; padding: 0 var(--s5); font-size: var(--t-md); } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; } /* ---------------------------------------------------------------- 6. KARTU */ .kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-lg); box-shadow: var(--bayang-1); overflow: hidden; } .kartu-kepala { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--garis); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .kartu-kepala h2, .kartu-kepala h3 { font-size: var(--t-lg); } .kartu-kepala .kanan { margin-left: auto; display: flex; gap: var(--s2); align-items: center; } .kartu-isi { padding: var(--s5); } .kartu-kaki { padding: var(--s3) var(--s5); border-top: 1px solid var(--garis); background: var(--permukaan-2); } /* ----------------------------------------------------------------- 7. PESAN */ .pesan { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: var(--t-sm); margin-bottom: var(--s4); border: 1px solid transparent; } .pesan.ok { background: var(--hijau-50); border-color: color-mix(in srgb, var(--hijau-500) 32%, transparent); color: var(--hijau-700); } .pesan.err { background: var(--merah-50); border-color: color-mix(in srgb, var(--merah-500) 32%, transparent); color: var(--merah-700); } .pesan.info { background: var(--biru-50); border-color: color-mix(in srgb, var(--biru-500) 32%, transparent); color: var(--biru-700); } .pesan.ingat{ background: var(--kuning-50);border-color: color-mix(in srgb, var(--kuning-500) 34%, transparent);color: var(--kuning-700); } :root[data-tema="gelap"] .pesan.ok { color: #6ee7b7; } :root[data-tema="gelap"] .pesan.err { color: #fca5a5; } :root[data-tema="gelap"] .pesan.info { color: #93c5fd; } :root[data-tema="gelap"] .pesan.ingat{ color: #fcd34d; } /* ------------------------------------------------------------------ 8. LABEL */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-penuh); font-size: var(--t-2xs); font-weight: 650; letter-spacing: .01em; background: var(--n-100); color: var(--tinta-lembut); border: 1px solid transparent; white-space: nowrap; } :root[data-tema="gelap"] .tag { background: var(--n-800); } .tag.merek { background: var(--merek-lembut); color: var(--merek-teks); } .tag.ok { background: var(--hijau-50); color: var(--hijau-700); } .tag.ingat { background: var(--kuning-50); color: var(--kuning-700); } .tag.bahaya{ background: var(--merah-50); color: var(--merah-700); } .tag.info { background: var(--biru-50); color: var(--biru-700); } .tag.netral{ background: var(--n-100); color: var(--tinta-lembut); } :root[data-tema="gelap"] .tag.ok { color: #6ee7b7; } :root[data-tema="gelap"] .tag.ingat { color: #fcd34d; } :root[data-tema="gelap"] .tag.bahaya{ color: #fca5a5; } :root[data-tema="gelap"] .tag.info { color: #93c5fd; } .titik { width: 7px; height: 7px; border-radius: var(--r-penuh); background: currentColor; flex: 0 0 7px; } /* ----------------------------------------------------------------- 9. TABEL */ .bungkus-tabel { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); } table.data thead th { position: sticky; top: 0; z-index: 2; background: var(--permukaan-2); border-bottom: 1px solid var(--garis); padding: var(--pad-baris); text-align: left; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-samar); white-space: nowrap; } table.data thead th.sortir { cursor: pointer; user-select: none; } table.data thead th.sortir:hover { color: var(--tinta); } table.data thead th .arah { opacity: .35; margin-left: 3px; } table.data thead th.aktif { color: var(--merek-teks); } table.data thead th.aktif .arah { opacity: 1; } table.data tbody td { padding: var(--pad-baris); border-bottom: 1px solid var(--garis); vertical-align: middle; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr { transition: background var(--cepat) var(--ease); } table.data tbody tr:hover { background: var(--permukaan-2); } table.data tbody tr.terpilih { background: var(--merek-lembut); } table.data td.angka { text-align: right; font-variant-numeric: tabular-nums; } table.data td.kunci { font-weight: 600; } table.data td.mono { font-family: var(--font-mono); font-size: var(--t-xs); } table.data .kosong-sel { color: var(--tinta-samar); } /* Kolom pertama menempel saat scroll ke samping — supaya kita tidak pernah kehilangan "baris ini baris apa" di tengah tabel lebar. */ table.data.lengket-kiri th:first-child, table.data.lengket-kiri td:first-child { position: sticky; left: 0; z-index: 1; background: var(--permukaan); } table.data.lengket-kiri thead th:first-child { z-index: 3; background: var(--permukaan-2); } table.data.lengket-kiri tbody tr:hover td:first-child { background: var(--permukaan-2); } table.data.lengket-kiri tbody tr.terpilih td:first-child { background: var(--merek-lembut); } /* --- Bilah alat tabel: cari, saring, atur kolom --- */ .bilah-tabel { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--garis); flex-wrap: wrap; } .cari { display: flex; align-items: center; gap: var(--s2); background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-md); padding: 0 var(--s3); height: var(--tinggi-kontrol); flex: 1; min-width: 180px; max-width: 340px; transition: border-color var(--cepat) var(--ease), box-shadow var(--cepat) var(--ease); } .cari:focus-within { border-color: var(--merek); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 16%, transparent); } .cari svg { width: 16px; height: 16px; color: var(--tinta-samar); flex: 0 0 16px; stroke-width: 2; } .cari input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: var(--t-sm); color: var(--tinta); min-width: 0; } .cari input::placeholder { color: var(--tinta-samar); } .cari .bersih { border: none; background: none; cursor: pointer; color: var(--tinta-samar); padding: 2px; line-height: 0; } .cari .bersih:hover { color: var(--tinta); } .pilih { height: var(--tinggi-kontrol); padding: 0 var(--s3); border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--permukaan); color: var(--tinta); font: inherit; font-size: var(--t-sm); cursor: pointer; transition: border-color var(--cepat) var(--ease); } .pilih:hover { border-color: var(--garis-kuat); } .pilih:focus { outline: 2px solid var(--merek); outline-offset: -1px; } .bilah-tabel .kanan { margin-left: auto; display: flex; gap: var(--s2); align-items: center; } /* --- Kaki tabel: jumlah data + paginasi --- */ .kaki-tabel { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--garis); font-size: var(--t-xs); color: var(--tinta-samar); flex-wrap: wrap; } .kaki-tabel .kanan { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } .halaman { display: flex; gap: 2px; align-items: center; } .halaman a, .halaman span { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; border: 1px solid transparent; color: var(--tinta-lembut); } .halaman a:hover { background: var(--permukaan-2); text-decoration: none; } .halaman .kini { background: var(--merek); color: #fff; } .halaman .mati { opacity: .4; } /* --- Keadaan kosong: jangan cuma "tidak ada data" --- */ .kosong { padding: var(--s12) var(--s5); text-align: center; color: var(--tinta-samar); } .kosong .lambang { width: 46px; height: 46px; margin: 0 auto var(--s4); border-radius: var(--r-lg); display: grid; place-items: center; background: var(--permukaan-2); color: var(--tinta-samar); border: 1px solid var(--garis); } .kosong .lambang svg { width: 22px; height: 22px; stroke-width: 1.7; } .kosong strong { display: block; color: var(--tinta); font-size: var(--t-md); margin-bottom: var(--s1); } .kosong .btn { margin-top: var(--s4); } /* --- Baris terpilih: bilah aksi massal melayang --- */ .aksi-massal { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%) translateY(140%); background: var(--n-900); color: #fff; border-radius: var(--r-penuh); padding: var(--s2) var(--s2) var(--s2) var(--s5); display: flex; align-items: center; gap: var(--s4); box-shadow: var(--bayang-5); z-index: var(--z-lengket); font-size: var(--t-sm); transition: transform var(--sedang) var(--ease-masuk); } :root[data-tema="gelap"] .aksi-massal { background: var(--n-800); border: 1px solid var(--garis-kuat); } .aksi-massal.tampil { transform: translateX(-50%) translateY(0); } .aksi-massal .jumlah { font-weight: 600; } .aksi-massal .pisah { width: 1px; height: 22px; background: rgb(255 255 255 / .18); } .aksi-massal .btn { height: 32px; } .aksi-massal .btn.abu { background: rgb(255 255 255 / .1); border-color: transparent; color: #fff; } .aksi-massal .btn.abu:hover { background: rgb(255 255 255 / .18); } /* ------------------------------------------------------------------ 10. FORM */ .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); } .form-grid .lebar { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field > label { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); display: flex; align-items: center; gap: 5px; } .field .wajib { color: var(--merah-600); font-weight: 700; } .field .petunjuk { font-size: var(--t-xs); color: var(--tinta-samar); font-weight: 400; } .field .galat { font-size: var(--t-xs); color: var(--merah-600); font-weight: 500; } .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date], .field input[type=datetime-local], .field input[type=tel], .field input[type=search], .field input[type=url], .field select, .field textarea { width: 100%; height: var(--tinggi-kontrol); padding: 0 var(--s3); border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--permukaan); color: var(--tinta); font: inherit; font-size: var(--t-sm); transition: border-color var(--cepat) var(--ease), box-shadow var(--cepat) var(--ease); } .field textarea { height: auto; padding: var(--s2) var(--s3); line-height: 1.5; resize: vertical; min-height: 76px; } .field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7686' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; padding-right: 32px; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--garis-kuat); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--merek); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 16%, transparent); } .field input[readonly], .field textarea[readonly], .field select[readonly], .field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--permukaan-2); color: var(--tinta-lembut); cursor: not-allowed; } .field input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--merek); cursor: pointer; flex: 0 0 auto; } .field input[type=number] { font-variant-numeric: tabular-nums; } /* Kelompok centang (pilih grup akses) */ .centang { display: flex; flex-direction: column; gap: 6px; } .cb { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s3); border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--permukaan); cursor: pointer; transition: border-color var(--cepat) var(--ease), background var(--cepat) var(--ease); } .cb:hover { border-color: var(--garis-kuat); background: var(--permukaan-2); } .cb:has(input:checked) { border-color: var(--merek); background: var(--merek-lembut); } .cb input { width: 17px; height: 17px; accent-color: var(--merek); } .cb .label { font-size: var(--t-sm); font-weight: 500; } .cb .ket { font-size: var(--t-xs); color: var(--tinta-samar); } /* --- Bagian form yang bisa dilipat --- */ .bagian { border: 1px solid var(--garis); border-radius: var(--r-lg); background: var(--permukaan); margin-bottom: var(--s4); } .bagian > summary { padding: var(--s4) var(--s5); cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: var(--s2); list-style: none; border-radius: var(--r-lg); } .bagian > summary::-webkit-details-marker { display: none; } .bagian > summary::before { content: ""; width: 15px; height: 15px; flex: 0 0 15px; background: currentColor; opacity: .45; clip-path: polygon(38% 22%, 38% 78%, 74% 50%); transition: transform var(--cepat) var(--ease); } .bagian[open] > summary::before { transform: rotate(90deg); } .bagian > summary:hover { background: var(--permukaan-2); } .bagian .isi-bagian { padding: 0 var(--s5) var(--s5); } /* --- Bilah aksi form: menempel di bawah, selalu bisa dijangkau --- */ .bilah-form { position: sticky; bottom: 0; z-index: var(--z-lengket); margin: var(--s5) calc(var(--s5) * -1) calc(var(--s12) * -1); padding: var(--s3) var(--s5); background: color-mix(in srgb, var(--permukaan) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--garis); display: flex; align-items: center; gap: var(--s2); } .bilah-form .kanan { margin-left: auto; display: flex; gap: var(--s2); } .bilah-form .kotor { font-size: var(--t-xs); color: var(--tinta-samar); margin-right: var(--s2); } /* --- Tombol pintar: kotak kecil dengan angka, khas ERP --- */ .pintar { display: flex; gap: var(--s2); flex-wrap: wrap; } .tombol-pintar { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--permukaan); text-decoration: none; color: var(--tinta); transition: border-color var(--cepat) var(--ease), box-shadow var(--cepat) var(--ease); } .tombol-pintar:hover { border-color: var(--merek); box-shadow: var(--bayang-2); text-decoration: none; } .tombol-pintar .angka { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .tombol-pintar .ket { font-size: var(--t-xs); color: var(--tinta-samar); } /* --- Bilah status alur kerja (draft → dikonfirmasi → selesai) --- */ .alur { display: flex; align-items: center; gap: 0; margin-bottom: var(--s4); flex-wrap: wrap; } .alur .langkah { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-penuh); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-samar); background: var(--permukaan-2); border: 1px solid transparent; } .alur .langkah.selesai { color: var(--hijau-700); background: var(--hijau-50); } .alur .langkah.kini { color: #fff; background: var(--merek); box-shadow: var(--bayang-2); } .alur .antar { width: 22px; height: 1px; background: var(--garis-kuat); } /* --- Log aktivitas per catatan (chatter ala Odoo) --- */ .chatter { display: flex; flex-direction: column; gap: var(--s4); } .catatan { display: flex; gap: var(--s3); } .catatan .avatar { flex: 0 0 30px; } .catatan .badan { flex: 1; min-width: 0; } .catatan .kepala-catatan { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; } .catatan .siapa { font-weight: 600; font-size: var(--t-sm); } .catatan .kapan { font-size: var(--t-xs); color: var(--tinta-samar); } .catatan .teks { font-size: var(--t-sm); color: var(--tinta-lembut); margin-top: 2px; } .catatan .ubah { font-size: var(--t-xs); margin-top: var(--s2); border-left: 2px solid var(--garis); padding-left: var(--s3); } .catatan .ubah .dari { color: var(--merah-600); text-decoration: line-through; opacity: .8; } .catatan .ubah .ke { color: var(--hijau-700); font-weight: 600; } .ketik-catatan { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--permukaan-2); } .ketik-catatan textarea { flex: 1; min-height: 40px; border: none; background: none; outline: none; font: inherit; font-size: var(--t-sm); resize: vertical; color: var(--tinta); } /* ---------------------------------------------------------- 11. BERANDA/KPI */ .grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); } .kpi { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--bayang-1); position: relative; overflow: hidden; } .kpi .label { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-samar); text-transform: uppercase; letter-spacing: .04em; } .kpi .nilai { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.1; } .kpi .bawah { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); font-size: var(--t-xs); color: var(--tinta-samar); } .kpi .naik { color: var(--hijau-700); font-weight: 650; } .kpi .turun { color: var(--merah-600); font-weight: 650; } .kpi .ikon-kpi { position: absolute; top: var(--s4); right: var(--s4); width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--merek-lembut); color: var(--merek-teks); } .kpi .ikon-kpi svg { width: 18px; height: 18px; stroke-width: 1.9; } .grid-kartu { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--s4); } .kartu-modul { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--bayang-1); text-decoration: none; color: inherit; transition: border-color var(--sedang) var(--ease), box-shadow var(--sedang) var(--ease), transform var(--sedang) var(--ease); display: flex; flex-direction: column; gap: var(--s3); } .kartu-modul:hover { border-color: var(--merek); box-shadow: var(--bayang-3); transform: translateY(-2px); text-decoration: none; } .kartu-modul .ikon-modul { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--merek-lembut); color: var(--merek-teks); } .kartu-modul .ikon-modul svg { width: 20px; height: 20px; stroke-width: 1.9; } .kartu-modul strong { font-size: var(--t-md); font-weight: 650; } .kartu-modul .ket { font-size: var(--t-xs); color: var(--tinta-samar); flex: 1; } .kartu-modul .buka { font-size: var(--t-sm); font-weight: 600; color: var(--merek-teks); display: flex; align-items: center; gap: 4px; } .kartu-modul:hover .buka svg { transform: translateX(3px); } .kartu-modul .buka svg { width: 15px; height: 15px; transition: transform var(--sedang) var(--ease); } /* ------------------------------------------------------- 12. HALAMAN MASUK */ .layar-masuk { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); background: radial-gradient(1000px 520px at 12% -8%, color-mix(in srgb, var(--merek) 14%, transparent), transparent 62%), radial-gradient(820px 460px at 96% 106%, color-mix(in srgb, var(--ungu-500) 12%, transparent), transparent 58%), var(--latar); } .kotak-masuk { width: 100%; max-width: 396px; } .kotak-masuk .merek-besar { display: flex; align-items: center; gap: var(--s3); justify-content: center; margin-bottom: var(--s5); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em; } .kotak-masuk .merek-besar .lambang { width: 38px; height: 38px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--b-500), var(--b-700)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--t-lg); box-shadow: var(--bayang-3); } .kotak-masuk .kartu { box-shadow: var(--bayang-4); } .kotak-masuk .kartu-isi { padding: var(--s6); } .kotak-masuk h1 { font-size: var(--t-xl); margin-bottom: 4px; } .kotak-masuk .sub { color: var(--tinta-samar); font-size: var(--t-sm); margin-bottom: var(--s5); } .kotak-masuk .btn { width: 100%; } .kotak-masuk .antar-aksi { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0; color: var(--tinta-samar); font-size: var(--t-xs); } .kotak-masuk .antar-aksi::before, .kotak-masuk .antar-aksi::after { content: ""; flex: 1; height: 1px; background: var(--garis); } .kotak-masuk .kaki-masuk { text-align: center; margin-top: var(--s5); font-size: var(--t-xs); color: var(--tinta-samar); } /* --------------------------------------------------- 13. PALET PERINTAH ⌘K */ .palet-latar { position: fixed; inset: 0; z-index: var(--z-palet); background: rgb(9 11 16 / .5); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: 12vh var(--s5) var(--s5); } .palet-latar.tampil { display: flex; animation: pudar var(--cepat) var(--ease); } .palet { width: 100%; max-width: 600px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-xl); box-shadow: var(--bayang-5); overflow: hidden; animation: naik var(--sedang) var(--ease-masuk); } .palet-cari { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--garis); } .palet-cari svg { width: 19px; height: 19px; color: var(--tinta-samar); flex: 0 0 19px; stroke-width: 2; } .palet-cari input { flex: 1; border: none; background: none; outline: none; font: inherit; font-size: var(--t-lg); color: var(--tinta); min-width: 0; } .palet-cari input::placeholder { color: var(--tinta-samar); } .palet-hasil { max-height: 56vh; overflow-y: auto; padding: var(--s2); } .palet-grup { font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-samar); padding: var(--s3) var(--s3) var(--s2); } .palet-item { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s3); border-radius: var(--r-md); cursor: pointer; font-size: var(--t-sm); color: var(--tinta); } .palet-item .ikon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--tinta-samar); stroke-width: 1.9; } .palet-item .ket { margin-left: auto; font-size: var(--t-xs); color: var(--tinta-samar); } .palet-item.pilih { background: var(--merek-lembut); color: var(--merek-teks); } .palet-item.pilih .ikon { color: var(--merek-teks); } .palet-kosong { padding: var(--s8) var(--s5); text-align: center; color: var(--tinta-samar); font-size: var(--t-sm); } .palet-kaki { padding: var(--s2) var(--s4); border-top: 1px solid var(--garis); background: var(--permukaan-2); display: flex; gap: var(--s4); font-size: var(--t-2xs); color: var(--tinta-samar); } .palet-kaki span { display: flex; align-items: center; gap: 5px; } /* ------------------------------------------------------------------ 14. TOAST */ .toast-wadah { position: fixed; right: var(--s5); bottom: var(--s5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--s3); background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-lg); padding: var(--s3) var(--s4); box-shadow: var(--bayang-4); font-size: var(--t-sm); min-width: 260px; max-width: 400px; pointer-events: auto; animation: masuk-toast var(--sedang) var(--ease-masuk); } .toast.keluar { animation: keluar-toast var(--cepat) var(--ease) forwards; } .toast .ikon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 2; } .toast.ok .ikon { color: var(--hijau-600); } .toast.err .ikon { color: var(--merah-600); } .toast.info .ikon { color: var(--biru-600); } @keyframes masuk-toast { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes keluar-toast { to { opacity: 0; transform: translateX(20px); } } @keyframes pudar { from { opacity: 0; } to { opacity: 1; } } @keyframes naik { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes denyut { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* ------------------------------------------------------------ 15. KERANGKA MUAT */ .muat { background: var(--n-150); border-radius: var(--r-sm); animation: denyut 1.4s var(--ease) infinite; } :root[data-tema="gelap"] .muat { background: var(--n-800); } /* ------------------------------------------------------ 16. MENU MELAYANG */ .melayang-latar { position: fixed; inset: 0; z-index: var(--z-modal); display: none; } .melayang-latar.tampil { display: block; } .melayang { position: absolute; background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-lg); box-shadow: var(--bayang-4); padding: var(--s2); min-width: 216px; animation: naik var(--cepat) var(--ease-masuk); } .melayang .kepala { padding: var(--s2) var(--s3) var(--s3); border-bottom: 1px solid var(--garis); margin-bottom: var(--s2); display: flex; align-items: center; gap: var(--s3); } .melayang .kepala .info { min-width: 0; } .melayang .kepala strong { display: block; font-size: var(--t-sm); } .melayang .kepala .ket { font-size: var(--t-xs); color: var(--tinta-samar); } .melayang a, .melayang button { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 8px var(--s3); border-radius: var(--r-md); font: inherit; font-size: var(--t-sm); color: var(--tinta); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; } .melayang a:hover, .melayang button:hover { background: var(--permukaan-2); text-decoration: none; } .melayang svg { width: 16px; height: 16px; color: var(--tinta-samar); stroke-width: 1.9; flex: 0 0 16px; } .melayang .pisah { height: 1px; background: var(--garis); margin: var(--s2) 0; } .melayang .bahaya { color: var(--merah-600); } .melayang .bahaya svg { color: var(--merah-600); } /* ----------------------------------------------------------------- 17. GRAFIK */ .grafik { width: 100%; height: auto; display: block; overflow: visible; } .grafik .batang { fill: var(--merek); transition: opacity var(--cepat) var(--ease); } .grafik .batang:hover { opacity: .75; } .grafik .garis-bantu { stroke: var(--garis); stroke-width: 1; } .grafik .teks-sumbu { fill: var(--tinta-samar); font-size: 10px; font-family: var(--font); } .grafik .area { fill: color-mix(in srgb, var(--merek) 16%, transparent); } .grafik .garis-data { fill: none; stroke: var(--merek); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .grafik .titik-data { fill: var(--permukaan); stroke: var(--merek); stroke-width: 2; } /* ----------------------------------------------------------------- 18. LAIN */ .baris { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; } .baris.antar { justify-content: space-between; } .antar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .tumpuk { display: flex; flex-direction: column; gap: var(--s4); } .tumpuk.rapat { gap: var(--s2); } .kanan { margin-left: auto; } .samar { color: var(--tinta-samar); } .kecil { font-size: var(--t-xs); } .mono { font-family: var(--font-mono); } .tebal { font-weight: 650; } .kini { color: var(--merek-teks); } .angka { font-variant-numeric: tabular-nums; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .pemisah { height: 1px; background: var(--garis); margin: var(--s5) 0; } /* Bilah kemajuan */ .kemajuan { height: 6px; border-radius: var(--r-penuh); background: var(--permukaan-2); overflow: hidden; } .kemajuan > span { display: block; height: 100%; background: var(--merek); border-radius: var(--r-penuh); transition: width var(--lambat) var(--ease); } .kemajuan.ok > span { background: var(--hijau-500); } .kemajuan.ingat > span { background: var(--kuning-500); } .kemajuan.bahaya > span { background: var(--merah-500); } /* Kartu statistik kecil dalam baris */ .grid-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); } .stat { background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: var(--r-md); padding: var(--s3) var(--s4); } .stat .l { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-samar); font-weight: 650; } .stat .v { font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; } /* Papan Kanban (pipa penjualan) */ .papan { display: flex; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s4); align-items: flex-start; } .kolom { flex: 0 0 286px; background: var(--permukaan-2); border: 1px solid var(--garis); border-radius: var(--r-lg); display: flex; flex-direction: column; max-height: calc(100vh - 220px); } .kolom-kepala { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--garis); display: flex; align-items: center; gap: var(--s2); font-weight: 650; font-size: var(--t-sm); } .kolom-kepala .jumlah { margin-left: auto; font-size: var(--t-xs); color: var(--tinta-samar); font-weight: 600; } .kolom-kepala .total { font-size: var(--t-xs); color: var(--tinta-samar); font-variant-numeric: tabular-nums; } .kolom-isi { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); overflow-y: auto; } .kartu-kanban { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--r-md); padding: var(--s3); box-shadow: var(--bayang-1); cursor: grab; transition: box-shadow var(--cepat) var(--ease), border-color var(--cepat) var(--ease); } .kartu-kanban:hover { box-shadow: var(--bayang-2); border-color: var(--garis-kuat); } .kartu-kanban .judul-kb { font-size: var(--t-sm); font-weight: 600; margin-bottom: 3px; } .kartu-kanban .meta-kb { font-size: var(--t-xs); color: var(--tinta-samar); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .kartu-kanban .nilai-kb { font-weight: 700; font-variant-numeric: tabular-nums; } /* Pita status di tepi kartu */ .pita { border-left: 3px solid var(--garis-kuat); } .pita.ok { border-left-color: var(--hijau-500); } .pita.ingat { border-left-color: var(--kuning-500); } .pita.bahaya { border-left-color: var(--merah-500); } .pita.info { border-left-color: var(--biru-500); } /* ------------------------------------------------------------- 19. RESPONSIF */ /* Tampilan tabel ↔ kartu. Di layar sempit, tabel padat jadi tidak terbaca. Solusi yang dipakai aplikasi besar: SETIAP BARIS jadi KARTU, dan tiap sel menyebut nama kolomnya sendiri. Itu sebabnya render server menaruh `data-label` di tiap . */ .sembunyi-desktop { display: none; } @media (max-width: 1080px) { :root { --lebar-sisi: 220px; } .form-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .sisi { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform var(--sedang) var(--ease); box-shadow: var(--bayang-5); } .sisi.terbuka { transform: none; } .sisi-latar { position: fixed; inset: 0; background: rgb(9 11 16 / .45); z-index: calc(var(--z-sisi) - 1); display: none; } .sisi-latar.tampil { display: block; } .bilah-atas .cari-cepat span { display: none; } .bilah-atas .cari-cepat { width: auto; padding: 0 9px; } .isi { padding: var(--s5) var(--s4) var(--s12); } .kepala-halaman h1 { font-size: var(--t-xl); } .sembunyi-hp { display: none !important; } /* Tabel → kartu */ table.data, table.data thead, table.data tbody, table.data tr, table.data td { display: block; } table.data thead { display: none; } table.data tbody tr { border: 1px solid var(--garis); border-radius: var(--r-lg); background: var(--permukaan); margin-bottom: var(--s3); padding: var(--s2) var(--s3); box-shadow: var(--bayang-1); } table.data tbody tr:hover { background: var(--permukaan); } table.data tbody td { display: flex; align-items: flex-start; gap: var(--s3); padding: 7px 0; border-bottom: 1px solid var(--garis); text-align: left !important; } table.data tbody tr td:last-child { border-bottom: none; } table.data tbody td::before { content: attr(data-label); flex: 0 0 38%; max-width: 38%; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-samar); padding-top: 2px; } table.data.lengket-kiri td:first-child { position: static; background: none; } .bilah-tabel { padding: var(--s3); } .cari { max-width: none; } .kaki-tabel { padding: var(--s3); } .toast-wadah { left: var(--s4); right: var(--s4); bottom: var(--s4); align-items: stretch; } .toast { min-width: 0; max-width: none; } .palet-latar { padding: var(--s4); align-items: flex-start; padding-top: 8vh; } .bilah-form { margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); padding: var(--s3) var(--s4); } } @media (max-width: 560px) { .kepala-halaman { flex-direction: column; align-items: stretch; } .kepala-halaman .aksi .btn { flex: 1; } .grid-kpi { grid-template-columns: 1fr 1fr; } .kpi .nilai { font-size: var(--t-2xl); } .alur .antar { width: 10px; } .alur .langkah { padding: 6px 10px; font-size: var(--t-xs); } .aksi-massal { left: var(--s4); right: var(--s4); transform: translateY(140%); border-radius: var(--r-lg); padding: var(--s3); } .aksi-massal.tampil { transform: none; } .aksi-massal .pisah { display: none; } } /* --------------------------------------------------------------- 20. CETAK */ @media print { .sisi, .bilah-atas, .bilah-form, .bilah-tabel, .kaki-tabel, .aksi-massal, .toast-wadah { display: none !important; } .isi { padding: 0; max-width: none; } .kartu, .kartu-modul, .kpi { box-shadow: none; border-color: #ccc; } body { background: #fff; } a { color: inherit; } } /* ========================================================================== 21. TAMBAHAN DESIGN SYSTEM (halaman masuk, 2FA, riwayat, kartu tabel) ========================================================================== */ /* --- Halaman publik tanpa kerangka aplikasi --- */ body.latar-polos { background: var(--latar); } .layar-masuk { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s5) var(--s4); } .kotak-masuk { width: 100%; max-width: 400px; } .merek-besar { display: flex; align-items: center; gap: var(--s3); justify-content: center; margin-bottom: var(--s5); } .merek-besar .lambang { width: 42px; height: 42px; border-radius: var(--r-lg); display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--b-500), var(--b-700)); box-shadow: var(--bayang-2); } .merek-besar .lambang svg { width: 22px; height: 22px; } .merek-besar strong { display: block; font-size: var(--t-lg); letter-spacing: -.02em; } .merek-besar span { font-size: var(--t-xs); color: var(--tinta-samar); } .kotak-masuk .kartu { box-shadow: var(--bayang-3); } .kotak-masuk h1 { font-size: var(--t-xl); } .kotak-masuk .sub { margin-bottom: var(--s5); } /* --- Kotak peringatan (dipakai di profil, 2FA, bantuan admin) --- */ .peringatan { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.55; margin-bottom: var(--s4); background: var(--merah-50); border: 1px solid color-mix(in srgb, var(--merah-500) 30%, transparent); color: var(--merah-700); } .peringatan svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; stroke-width: 2; } .peringatan.ingat { background: var(--kuning-50); border-color: color-mix(in srgb, var(--kuning-500) 34%, transparent); color: var(--kuning-700); } :root[data-tema="gelap"] .peringatan { color: #fca5a5; } :root[data-tema="gelap"] .peringatan.ingat { color: #fcd34d; } /* --- Kepala bagian & label kecil --- */ .judul-bagian { font-size: var(--t-md); font-weight: 650; margin: var(--s6) 0 var(--s3); display: flex; align-items: center; gap: var(--s2); letter-spacing: -.01em; } .judul-bagian:first-child { margin-top: 0; } .ikon-kecil { width: 14px !important; height: 14px !important; flex: 0 0 14px; stroke-width: 2.2; } /* --- Keadaan "tidak ada hasil pencarian" --- */ .kosong-cari { border: 1px dashed var(--garis-kuat); border-radius: var(--r-lg); background: var(--permukaan); margin-top: var(--s3); } /* --- Input kode OTP (6 angka) --- */ .kode-otp { font-family: var(--font-mono); font-size: 26px !important; letter-spacing: 8px; text-align: center; height: 54px !important; font-variant-numeric: tabular-nums; } /* --- Langkah penyiapan 2FA --- */ .langkah-2fa { display: flex; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--garis); } .langkah-2fa:last-of-type { border-bottom: none; } .langkah-2fa .nomor { flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--r-penuh); display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700; background: var(--merek-lembut); color: var(--merek-teks); } .langkah-2fa .qr { margin: var(--s3) 0; } .langkah-2fa .qr img { border: 1px solid var(--garis); border-radius: var(--r-md); padding: 10px; background: #fff; display: block; } .kode-rahasia { font-family: var(--font-mono); font-size: var(--t-md); letter-spacing: 2px; background: var(--permukaan-2); border: 1px solid var(--garis); padding: var(--s3); border-radius: var(--r-md); text-align: center; word-break: break-all; margin-top: 6px; font-weight: 600; } /* --- Kode pemulihan --- */ .grid-kode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); } .kode-pulih { font-family: var(--font-mono); font-size: var(--t-md); letter-spacing: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--garis); } /* --- Tabel: kolom tanpa sortir & sel aksi di mode kartu --- */ table.data thead th.tanpa-sortir { cursor: default; } table.data thead th.tanpa-sortir:hover { color: var(--tinta-samar); } /* --- Tampilkan hanya di layar kecil --- */ .hanya-hp { display: none; } @media (max-width: 860px) { .hanya-hp { display: inline-flex; } /* Sel aksi: di mode kartu jangan pakai label kolom */ table.data tbody td.tanpa-label { border-bottom: none; padding-top: var(--s3); } table.data tbody td.tanpa-label::before { content: none; } table.data tbody td.tanpa-label .btn { width: 100%; justify-content: center; } } /* --- Sidebar tanpa JavaScript (checkbox + label) --- */ @media (max-width: 860px) { #sisi-cb:checked ~ .shell .sisi { transform: none; } #sisi-cb:checked ~ .shell .sisi-latar { display: block; } } /* --- Sel angka: rata kanan, digit sejajar --- */ table.data thead th.angka, table.data td.angka { text-align: right; } table.data thead th.kunci { color: var(--tinta); } table.data td.kunci { font-weight: 600; color: var(--tinta); } .uang { font-variant-numeric: tabular-nums; white-space: nowrap; } .angka { font-variant-numeric: tabular-nums; } /* Di mode kartu (ponsel), sel angka kembali rata kiri agar sejajar label */ @media (max-width: 860px) { table.data tbody td.angka { text-align: left !important; } }