/* ══════════════════════════════════════════════════════════════════════ skin-aurora.css — LAPISAN GAYA TAMBAHAN, BUKAN PENGGANTI Aktif hanya saat . Tanpa atribut itu berkas ini tidak berpengaruh dan tampilan kembali ke style.css apa adanya. ── Bentuknya ─────────────────────────────────────────────────────── Bilah kiri gelap dengan aksen merah; area isi terang, datar, minim hiasan. Warna aksen dan warna data memakai keluarga yang sama, jadi kedua sisi terbaca sebagai satu produk meski latarnya berlawanan. ── Dasar penyusunan warna ────────────────────────────────────────── Semua warna diturunkan di ruang OKLCH dari satu sudut jangkar: merah 26°. Lightness dan chroma dipatok per lapis, hanya hue yang divariasikan. • Data (--viz-*) : L 0,64 · C 0,16 · SPLIT-KOMPLEMENTER merah 26° + komplemennya toska 196° + dua tetangga. Lolos seluruh gate pada permukaan putih: pita lightness, chroma, pemisahan buta warna, dan kontras. • Status : lebih gelap dari pita data agar peringatan menonjol dan tidak tertukar dengan warna seri. • Netral : chroma 0,004–0,012 pada hue jangkar, sehingga abu-abunya berjejak hangat, bukan abu dingin yang berdiri sendiri. ══════════════════════════════════════════════════════════════════════ */ html[data-skin="aurora"] { color-scheme: light; /* Aksen merah — satu-satunya tempat gradasi dipakai */ --au-1: #ca2352; --au-2: #d93636; --au-3: #dc6702; --au-rgb: 217, 54, 54; --bg: #ffffff; --bg-2: #f6f3f2; --bg-3: #ebe4e4; --text: #282120; --text-2: #7a7271; --text-3: #aea7a7; --border: #ddd8d7; --blue: var(--au-2); --blue-2: #c22e2e; --green: #069451; --red: #c82155; /* bahaya — ΔE 11,3 dari merah seri data */ --orange: #c38608; --purple: #ab6cd3; --teal: #08a0a2; --shadow-sm: 0 1px 3px rgba(40,33,32,.07), 0 1px 2px rgba(40,33,32,.04); --shadow: 0 2px 12px rgba(40,33,32,.08), 0 1px 3px rgba(40,33,32,.05); --radius: 14px; --accent-bg: linear-gradient(135deg, var(--au-1) 0%, var(--au-2) 55%, var(--au-3) 100%); --topbar-bg: rgba(246,243,242,.85); /* Data — split-komplementer dari jangkar 26°, disetel untuk latar putih */ --viz-1: #dc5e57; /* 26° merah — diterima karyawan */ --viz-2: #08a0a2; /* 196° toska — PPh 21 (komplemen merah) */ --viz-3: #b78006; /* 78° amber — BPJS */ --viz-4: #6b82ec; /* 272° biru — potongan lain */ --viz-5: #ce5ea0; --viz-6: #07a75d; --viz-7: #ab6cd3; --viz-8: #d76821; --viz-track: #ebe4e4; } /* ══════════════════════════════════════════════════════════════════════ Bilah kiri — gelap dengan aksen merah. Tokennya didefinisikan ulang di lingkup .sidebar, sehingga seluruh isinya ikut gelap tanpa perlu menimpa tiap komponen satu per satu. ══════════════════════════════════════════════════════════════════════ */ html[data-skin="aurora"] .sidebar { --bg: #14100f; --bg-2: #1e1817; --bg-3: #2a2221; --text: #f7f2f1; --text-2: #a69c9a; --text-3: #6d6564; --border: #2a2221; background: #0e0b0a; border-right: 1px solid #241d1c; color: var(--text); } html[data-skin="aurora"] .sidebar-brand { border-bottom-color: #241d1c; } html[data-skin="aurora"] .brand-icon { background: var(--accent-bg); box-shadow: 0 3px 12px rgba(var(--au-rgb),.4); } html[data-skin="aurora"] .account-chip { background: #1b1514; } html[data-skin="aurora"] .chip-avatar { background: var(--accent-bg); } html[data-skin="aurora"] .nav-item:hover { background: #1e1817; color: #f7f2f1; } html[data-skin="aurora"] .nav-item.active { background: linear-gradient(95deg, rgba(var(--au-rgb),.22), rgba(var(--au-rgb),.06)); color: #fff; box-shadow: inset 2px 0 0 var(--au-2); } html[data-skin="aurora"] .nav-item.active svg { color: #ff7b6b; } /* ══════════════════════════════════════════════════════════════════════ Area isi — terang, datar, tanpa hiasan berlebih ══════════════════════════════════════════════════════════════════════ */ html[data-skin="aurora"] .card, html[data-skin="aurora"] .hero, html[data-skin="aurora"] .kpi, html[data-skin="aurora"] .kar-card, html[data-skin="aurora"] .slip, html[data-skin="aurora"] .modal-box { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } html[data-skin="aurora"] .kar-card:hover { border-color: rgba(var(--au-rgb),.45); box-shadow: 0 8px 22px rgba(40,33,32,.10); } /* Gradasi merah disisakan hanya untuk kartu utama, avatar, dan tombol utama */ html[data-skin="aurora"] .kpi.accent { background: var(--accent-bg); border-color: transparent; box-shadow: 0 6px 20px rgba(var(--au-rgb),.26); } html[data-skin="aurora"] .kpi.accent .kpi-label, html[data-skin="aurora"] .kpi.accent .kpi-sub { color: rgba(255,255,255,.72); } html[data-skin="aurora"] .kar-ava, html[data-skin="aurora"] .emp-ava { background: var(--accent-bg); } html[data-skin="aurora"] .btn { background: var(--accent-bg); box-shadow: 0 2px 8px rgba(var(--au-rgb),.24); } html[data-skin="aurora"] .btn:hover { filter: brightness(1.06); } html[data-skin="aurora"] .btn-utama { box-shadow: 0 3px 14px rgba(var(--au-rgb),.3); } html[data-skin="aurora"] .btn-danger { background: var(--red); box-shadow: none; } html[data-skin="aurora"] .btn-danger:hover { background: #b01a49; } html[data-skin="aurora"] .seg.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); } html[data-skin="aurora"] .cari-wrap input:focus, html[data-skin="aurora"] .field input:focus, html[data-skin="aurora"] .field select:focus, html[data-skin="aurora"] .field textarea:focus, html[data-skin="aurora"] .sel:focus, html[data-skin="aurora"] .inp:focus { border-color: var(--au-2); box-shadow: 0 0 0 3px rgba(var(--au-rgb),.13); } html[data-skin="aurora"] .btn-ghost:hover, html[data-skin="aurora"] .btn-icon:hover { border-color: var(--au-2); color: var(--au-2); } /* Angka utama dibiarkan polos — minimalis, tanpa gradasi teks */ html[data-skin="aurora"] .hero-num { background: none; -webkit-text-fill-color: currentColor; color: var(--text); } /* Grafik datar: warna murni dari palet data, tanpa kilau tambahan */ html[data-skin="aurora"] .flow { height: 46px; } html[data-skin="aurora"] .flow-seg { border-radius: 4px; } html[data-skin="aurora"] .flow-seg:first-child { border-radius: 8px 4px 4px 8px; } html[data-skin="aurora"] .flow-seg:last-child { border-radius: 4px 8px 8px 4px; } html[data-skin="aurora"] .flow-seg:only-child { border-radius: 8px; } /* Lencana — nada seragam dari keluarga warna yang sama */ html[data-skin="aurora"] .badge-a { background: rgba(107,130,236,.14); color: #4a63c9; } html[data-skin="aurora"] .badge-b { background: rgba(206,94,160,.14); color: #b04a89; } html[data-skin="aurora"] .badge-c { background: rgba(8,160,162,.14); color: #077f81; } html[data-skin="aurora"] .badge-ok { background: rgba(6,148,81,.13); color: #067a44; } html[data-skin="aurora"] .badge-warn { background: rgba(195,134,8,.15); color: #9c6b06; } html[data-skin="aurora"] .badge-bahaya { background: rgba(200,33,85,.12); color: var(--red); } html[data-skin="aurora"] .prog-chip.on { background: rgba(6,148,81,.13); color: #067a44; border-color: rgba(6,148,81,.24); } html[data-skin="aurora"] .prog-opt.on { background: rgba(var(--au-rgb),.10); border-color: rgba(var(--au-rgb),.35); color: var(--text); } html[data-skin="aurora"] .tick.on { color: #067a44; } html[data-skin="aurora"] .note svg { color: var(--au-2); } html[data-skin="aurora"] .note.warn svg { color: var(--orange); } html[data-skin="aurora"] .setor-item { border-left-color: var(--au-2); } html[data-skin="aurora"] .setor-item.pajak { border-left-color: var(--viz-2); } html[data-skin="aurora"] .setor-item.bpjs { border-left-color: var(--viz-3); } html[data-skin="aurora"] .alert-kontrak { border-left-color: var(--orange); } html[data-skin="aurora"] details.emp[open] { background: var(--bg-2); } html[data-skin="aurora"] tbody tr:hover td { background: var(--bg-2); } html[data-skin="aurora"] .spinner { border-top-color: var(--au-2); } html[data-skin="aurora"] .toast { background: #282120; color: #fff; } /* Mode gelap tetap berfungsi: area isi ikut gelap, bilah kiri sudah gelap */ html[data-skin="aurora"][data-theme="dark"] { color-scheme: dark; --bg: #17110f; --bg-2: #0d0908; --bg-3: #271e1d; --text: #f7f2f1; --text-2: #a69c9a; --text-3: #6a6160; --border: #2a2120; --viz-1: #e3645c; --viz-2: #04a7a9; --viz-3: #bf8608; --viz-4: #7189f3; --viz-5: #d564a7; --viz-6: #1aad63; --viz-7: #b172d9; --viz-8: #de6e29; --viz-track: #271e1d; --green: #3ac175; --red: #ff84a9; --orange: #e5a323; --teal: #06bcbd; --topbar-bg: rgba(13,9,8,.8); } html[data-skin="aurora"][data-theme="dark"] .card, html[data-skin="aurora"][data-theme="dark"] .hero, html[data-skin="aurora"][data-theme="dark"] .kpi, html[data-skin="aurora"][data-theme="dark"] .kar-card, html[data-skin="aurora"][data-theme="dark"] .modal-box { background: var(--bg); } html[data-skin="aurora"][data-theme="dark"] .seg.active { background: var(--bg-3); color: var(--text); } html[data-skin="aurora"][data-theme="dark"] .toast { background: #f7f2f1; color: #17110f; } html[data-skin="aurora"] .dp-item.on .dp-kode { color: #067a44; } html[data-skin="aurora"] .lg-row.total { border-top-color: var(--text); } html[data-skin="aurora"] .lgk { border-bottom-color: var(--bg-2); } html[data-skin="aurora"] .tl-dot { background: #fff; } html[data-skin="aurora"][data-theme="dark"] .tl-dot { background: var(--bg); } html[data-skin="aurora"][data-theme="dark"] .dp-item.on { background: var(--bg-3); } html[data-skin="aurora"][data-theme="dark"] .dp-item.on .dp-kode { color: var(--green); } html[data-skin="aurora"] .kp-item, html[data-skin="aurora"] .bupot { background: #fff; border-color: var(--border); } html[data-skin="aurora"] .kp-ava { background: var(--accent-bg); } html[data-skin="aurora"] .bp-status.ok { background: rgba(6,148,81,.10); color: #067a44; } html[data-skin="aurora"] .bp-status.kurang { background: rgba(195,134,8,.12); color: #9c6b06; } html[data-skin="aurora"] .bp-status.lebih { background: rgba(107,130,236,.12); color: #4a63c9; } html[data-skin="aurora"][data-theme="dark"] .kp-item, html[data-skin="aurora"][data-theme="dark"] .bupot { background: var(--bg); } html[data-skin="aurora"] .pilih-pemicu, html[data-skin="aurora"] .tgl-pemicu { background: var(--bg-2); } html[data-skin="aurora"] .pilih-pemicu:hover:not(:disabled), html[data-skin="aurora"] .tgl-pemicu:hover { border-color: var(--au-2); } html[data-skin="aurora"] .pilih-opsi.aktif svg { color: var(--au-2); } html[data-skin="aurora"] .tgl-hari.terpilih { background: var(--accent-bg); } html[data-skin="aurora"] .tgl-hari.terpilih:hover { filter: brightness(1.08); } html[data-skin="aurora"] .tenant-pemicu { background: #1b1514; } html[data-skin="aurora"] .tenant-pemicu:hover { border-color: #3a2b29; } html[data-skin="aurora"] .tenant-pop { background: #14100f; border-color: #2a2221; --bg-2: #1e1817; --text: #f7f2f1; --text-2: #a69c9a; --text-3: #6d6564; --border: #2a2221; } html[data-skin="aurora"] .tenant-plus { background: #2a2221; } html[data-skin="aurora"] .chip-avatar { background: var(--accent-bg); } @media print { html[data-skin="aurora"] .slip { background: #fff; border: none; box-shadow: none; } }