/* SIM-RAHN - tampilan bergaya TailAdmin (tanpa build; CSS murni, tanpa CDN) */
:root {
  --primary: #3c50e0; --primary-d: #2f3fb8; --primary-l: #eef0fd;
  --sidebar: #1c2434; --sidebar-2: #333a48; --sidebar-teks: #dee4ee; --sidebar-redup: #8a99af;
  --bg: #f1f5f9; --kartu: #ffffff; --teks: #64748b; --judul: #1c2434; --garis: #e2e8f0;
  --aksen: #3c50e0; --ok: #10b981; --salah: #d34053; --warn: #ffa70b; --abu: #eff4fb; --input: #cbd5e1;
  --bayang: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --font: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --input:#4a5a6e; --bg:#1a222c; --kartu:#24303f; --teks:#aeb7c0; --judul:#fff; --garis:#2e3a47; --abu:#313d4a; --primary-l:#2a3550; --aksen:#6b7cf0; --input:#4a5a6e; }
}
:root[data-theme="dark"] { --input:#4a5a6e; --bg:#1a222c; --kartu:#24303f; --teks:#aeb7c0; --judul:#fff; --garis:#2e3a47; --abu:#313d4a; --primary-l:#2a3550; --aksen:#6b7cf0; }

* { box-sizing: border-box; }
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--teks); font:15px/1.6 var(--font); }
a { color:var(--aksen); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3,h4 { color:var(--judul); font-weight:600; line-height:1.3; }
h2 { font-size:1.35rem; margin:0 0 .75rem; } h3 { font-size:1.1rem; margin:1.25rem 0 .5rem; }
code { background:var(--abu); padding:1px 6px; border-radius:4px; font-size:.88em; }
hr { border:0; border-top:1px solid var(--garis); }

/* ---------- Kerangka ---------- */
.ta-app { display:flex; min-height:100vh; }
.ta-sidebar { position:fixed; inset:0 auto 0 0; width:290px; background:var(--sidebar); color:var(--sidebar-teks); display:flex; flex-direction:column; z-index:50; transition:transform .25s; overflow-y:auto; }
.ta-logo { display:flex; align-items:center; gap:12px; padding:24px 24px 18px; color:#fff; font-size:1.3rem; font-weight:700; }
.ta-logo:hover { text-decoration:none; }
.ta-logo i { width:36px; height:36px; border-radius:8px; background:var(--primary); display:grid; place-items:center; font-style:normal; font-size:1rem; }
.ta-logo small { display:block; font-size:.7rem; font-weight:400; color:var(--sidebar-redup); letter-spacing:.3px; }
.ta-nav { padding:8px 16px 24px; }
.ta-grup { margin:18px 0 8px 10px; font-size:.78rem; font-weight:500; color:var(--sidebar-redup); text-transform:uppercase; letter-spacing:.4px; }
.ta-nav a { display:flex; align-items:center; gap:12px; padding:9px 12px; margin-bottom:2px; border-radius:6px; color:var(--sidebar-teks); font-weight:500; font-size:.94rem; }
.ta-nav a:hover { background:var(--sidebar-2); text-decoration:none; }
.ta-nav a.aktif { background:var(--sidebar-2); color:#fff; box-shadow:inset 3px 0 0 var(--primary); }
.ta-nav a .ik { width:20px; text-align:center; opacity:.85; }
.ta-isi { flex:1; margin-left:290px; min-width:0; display:flex; flex-direction:column; }
.ta-header { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px; padding:14px 28px; background:var(--kartu); border-bottom:1px solid var(--garis); box-shadow:var(--bayang); }
.ta-header .judul { font-weight:600; color:var(--judul); font-size:1.05rem; }
.ta-header .sp { flex:1; }
.ta-burger { display:none; padding:6px 10px; font-size:1.2rem; line-height:1; }
.ta-user { display:flex; align-items:center; gap:10px; }
.ta-user .av { width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:600; }
.ta-user .nm { line-height:1.2; text-align:right; } .ta-user .nm b { display:block; color:var(--judul); font-size:.92rem; } .ta-user .nm small { font-size:.76rem; }
.ta-main { padding:28px; max-width:1500px; width:100%; margin:0 auto; }
.ta-kartu { background:var(--kartu); border:1px solid var(--garis); border-radius:8px; box-shadow:var(--bayang); padding:22px; margin-bottom:20px; }
.ta-tutup { display:none; }
@media (max-width: 1023px) {
  .ta-sidebar { transform:translateX(-100%); }
  .ta-app.buka .ta-sidebar { transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.45); }
  .ta-isi { margin-left:0; }
  .ta-burger { display:inline-block; }
  .ta-main { padding:18px 16px; }
  .ta-header { padding:12px 16px; }
  .ta-user .nm { display:none; }
}

/* ---------- Komponen ---------- */
.gulir { overflow-x:auto; }
table { width:100%; border-collapse:collapse; background:var(--kartu); border:1px solid var(--garis); border-radius:8px; overflow:hidden; }
thead th { background:var(--abu); color:var(--judul); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--garis); font-size:.92rem; vertical-align:top; }
tbody tr:hover { background:var(--abu); }
tbody tr:last-child td { border-bottom:0; }
tfoot td { background:var(--abu); color:var(--judul); }
.kanan { text-align:right; font-variant-numeric:tabular-nums; }
.tebal { font-weight:700; color:var(--judul); }

input, select, textarea, button, .tombol { font:inherit; color:var(--judul); }
input:not([type=checkbox]):not([type=radio]), select, textarea { padding:9px 13px; background:transparent; border:1px solid var(--input); border-radius:6px; max-width:100%; }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--primary); box-shadow:0 0 0 3px rgba(60,80,224,.15); }
input[disabled], input[readonly] { background:var(--abu); }
select option, select optgroup { background:var(--kartu); color:var(--judul); }
select option:disabled, select option[hidden] { display:none; }
label { color:var(--judul); font-size:.88rem; font-weight:500; }
button, .tombol { display:inline-block; padding:8px 16px; background:var(--kartu); color:var(--aksen); border:1px solid var(--aksen); border-radius:6px; cursor:pointer; font-weight:500; text-decoration:none; line-height:1.4; }
button:hover, .tombol:hover { background:var(--primary-l); text-decoration:none; }
.utama, button.utama, .tombol.utama { background:var(--primary); color:#fff; border-color:var(--primary); }
.utama:hover, button.utama:hover, .tombol.utama:hover { background:var(--primary-d); }
fieldset { border:1px solid var(--garis); border-radius:8px; margin:0 0 18px; padding:16px 18px; background:var(--kartu); }
legend { padding:0 8px; color:var(--judul); font-weight:600; }
dl { margin:0; } dt { color:var(--teks); } dd { color:var(--judul); }
.ok { color:#0b8a60; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.35); padding:10px 14px; border-radius:6px; margin:0 0 16px; }
.salah { color:var(--salah); }
p.salah, div.salah { background:rgba(211,64,83,.08); border-left:3px solid var(--salah); padding:8px 12px; border-radius:4px; }
.lencana { display:inline-block; padding:1px 10px; border-radius:99px; font-size:.78rem; font-weight:500; background:var(--primary-l); color:var(--aksen); }
.lencana.ok { background:rgba(16,185,129,.12); color:#0b8a60; border:0; margin:0; padding:1px 10px; }
.lencana.bahaya { background:rgba(211,64,83,.12); color:var(--salah); }
.lencana.warn { background:rgba(255,167,11,.15); color:#b87400; }

/* Paginasi bawaan Laravel (tailwind view) tanpa Tailwind */
nav[role=navigation] { margin-top:14px; font-size:.9rem; }
nav[role=navigation] svg { width:18px; height:18px; vertical-align:middle; }
nav[role=navigation] > div:first-child { display:none; }
nav[role=navigation] a, nav[role=navigation] span[aria-current] span, nav[role=navigation] span[aria-disabled] span { padding:5px 10px; border:1px solid var(--garis); background:var(--kartu); }
nav[role=navigation] span[aria-current] span { background:var(--primary); color:#fff; border-color:var(--primary); }
nav[role=navigation] .relative.z-0 { display:inline-flex; border-radius:6px; overflow:hidden; }
nav[role=navigation] p { margin:0 0 8px; }

/* ---------- Dashboard ---------- */
.ta-stat { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:20px; margin-bottom:24px; }
.ta-stat > div { background:var(--kartu); border:1px solid var(--garis); border-radius:8px; box-shadow:var(--bayang); padding:20px 22px; }
.ta-stat .ic { width:46px; height:46px; border-radius:50%; background:var(--primary-l); color:var(--aksen); display:grid; place-items:center; font-size:1.2rem; margin-bottom:14px; }
.ta-stat b { display:block; font-size:1.55rem; color:var(--judul); line-height:1.2; }
.ta-stat span { font-size:.88rem; }
.ta-stat .bahaya .ic { background:rgba(211,64,83,.12); color:var(--salah); }
.ta-stat .hijau .ic { background:rgba(16,185,129,.12); color:#0b8a60; }
.ta-stat .kuning .ic { background:rgba(255,167,11,.15); color:#b87400; }
.ta-pintas { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.ta-pintas a { display:block; background:var(--kartu); border:1px solid var(--garis); border-radius:8px; padding:16px 18px; color:var(--judul); font-weight:500; box-shadow:var(--bayang); }
.ta-pintas a:hover { border-color:var(--primary); text-decoration:none; }
.ta-pintas a small { display:block; color:var(--teks); font-weight:400; }

/* ---------- Login ---------- */
.ta-login { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; background:var(--kartu); }
.ta-login .kiri { background:var(--sidebar); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:center; }
.ta-login .kiri h1 { color:#fff; font-size:2rem; margin:0 0 12px; }
.ta-login .kiri p { color:var(--sidebar-redup); max-width:420px; }
.ta-login .kanan-f { display:grid; place-items:center; padding:32px 20px; }
.ta-login form { width:100%; max-width:380px; }
.ta-login form h2 { font-size:1.6rem; }
.ta-login label { display:block; margin:16px 0 6px; }
.ta-login input { width:100%; padding:12px 14px; }
.ta-login button { width:100%; margin-top:22px; padding:12px; background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
@media (max-width: 800px) { .ta-login { grid-template-columns:1fr; } .ta-login .kiri { display:none; } }

@media print { .ta-sidebar, .ta-header { display:none !important; } .ta-isi { margin:0 !important; } .ta-main { padding:0; } body { background:#fff; } }