/* =========================================================
   style.css - tampilan Portal Berkas Pegawai
   File ini menimpa gaya bawaan di index.html. Tidak ada logika yang diubah.

   CARA PASANG LOGO:
   Simpan logo RS dengan nama  logo.png  di folder yang sama
   dengan index.html. (Nama/format lain? ubah --logo di bawah.)
   ========================================================= */

:root{
  --logo: url("logo.png");

  /* Warna utama. Sesuaikan dengan warna logo RS Anda. */
  --pri:#1c4f82;
  --pri2:#143b63;
  --aksen:#c8962e;

  --ink:#1f2933;
  --mut:#616e7c;
  --bg:#f2f3f5;
  --card:#ffffff;
  --line:#cfd5dc;
  --ok:#1e6b3a;   --okbg:#e3f1e7;
  --warn:#8a5300; --warnbg:#fbefd6;
  --bad:#a4262c;  --badbg:#f9e3e4;
  color-scheme:light;
}

body{
  font:15px/1.55 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
h1,h2,h3{font-family:inherit;font-weight:600;letter-spacing:0}

/* ---------- Header dashboard ---------- */
.top{
  background:var(--pri);
  border-bottom:4px solid var(--aksen);
}
.top .wrap{padding:10px 16px;gap:10px}
.top h1{
  font-size:17px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
}
.top h1::before{
  content:"";
  width:46px;height:46px;flex:none;
  background:#fff var(--logo) center/contain no-repeat;
  background-origin:content-box;
  padding:3px;
  border-radius:3px;
}
.top small{opacity:1;font-size:13px}
.top .btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  font-weight:500;
}
.top .btn:hover{background:rgba(255,255,255,.16)}

/* Opsional: tampilkan nama RS di header. Hapus tanda komentar lalu ganti teksnya.
.top h1{font-size:0}
.top h1::after{content:"RS Contoh Sehat - Portal Berkas Pegawai";font-size:17px}
*/

/* ---------- Kartu & umum ---------- */
.card{
  border-radius:3px;
  padding:20px;
  border:1px solid var(--line);
  box-shadow:none;
}
.card h3{font-size:17px}

/* ---------- Tombol ---------- */
.btn{
  border-radius:3px;
  font-weight:500;
  padding:8px 16px;
}
.btn.sec{background:#fff;color:var(--pri);border:1px solid var(--pri)}
.btn.sec:hover{background:#eaf0f7}
.btn.bad{background:#fff;color:var(--bad);border:1px solid var(--bad)}
.btn.bad:hover{background:var(--badbg)}
.btn.sm{padding:4px 10px;font-size:13px}
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}

/* ---------- Isian formulir ---------- */
label{font-weight:600;font-size:13.5px;margin:14px 0 4px}
input,select{
  border:1px solid #aab3bd;
  border-radius:3px;
  background:#fff;
  padding:8px 10px;
}
input:focus,select:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 2px rgba(28,79,130,.18)}

/* ---------- Halaman masuk / daftar ---------- */
.auth{
  max-width:460px;
  margin:28px auto;
  border-top:4px solid var(--pri);
  padding:26px 28px 28px;
}
.auth h2{font-size:22px;margin-top:4px}
.auth h2::before{
  content:"";
  display:block;
  width:92px;height:92px;
  margin:0 0 14px;
  background:var(--logo) left center/contain no-repeat;
}
.tabs{gap:0;margin:20px 0 2px;border-bottom:1px solid var(--line)}
.tabs button{
  flex:none;
  padding:8px 18px;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  background:none;
  color:var(--mut);
  font-weight:600;
  margin-bottom:-1px;
}
.tabs button.on{background:none;color:var(--pri);border-color:var(--pri)}
.err{border-left:4px solid var(--bad);border-radius:0;font-size:14px}

/* ---------- Label status ---------- */
.badge{border-radius:2px;font-weight:600;font-size:12px;padding:2px 8px}

/* ---------- Daftar dokumen pegawai ---------- */
.row{padding:12px 0}
.row .nm a{color:var(--pri)}

/* ---------- Progres ---------- */
.bar{height:7px;border-radius:2px;background:#dfe3e8}
.bar i{background:var(--pri);border-radius:0}

/* ---------- Ringkasan admin: satu panel, bukan tiga kartu ---------- */
.stats{
  gap:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:3px;
}
.stats div{
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:none;
  padding:14px 18px;
  color:var(--mut);
  font-size:13.5px;
}
.stats div:last-child{border-right:0}
.stats b{font:600 26px "Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}
@media(max-width:640px){
  .stats div{padding:10px 8px;font-size:12px}
  .stats b{font-size:20px}
}

/* ---------- Tabel admin ---------- */
th{
  background:#e9edf1;
  color:var(--ink);
  font-weight:600;
  font-size:13px;
  border-bottom:1px solid var(--line);
}
td{border-top:1px solid #e1e5ea}
tr.cl:hover{background:#eef3f8}
.tools input,.tools select{min-width:150px}

/* ---------- Pemberitahuan ---------- */
.toast{border-radius:3px;background:#27323d;color:#fff}

/* ---------- Catatan kaki ---------- */
#app::after{
  content:"Hanya untuk keperluan kepegawaian internal. Jaga kerahasiaan akun Anda.";
  display:block;
  text-align:center;
  color:var(--mut);
  font-size:12.5px;
  padding:6px 16px 28px;
}