/* ===================================================================
   e-ASET : gaya.css
   =================================================================== */
:root{
  --navy:#12395B;
  --hijau:#1F7A5A;
  --garis:#B9C6D2;
  --muda:#EEF3F7;
  --kelabu:#5A6672;
  --merah:#B3261E;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Arial,Helvetica,sans-serif;font-size:14px;
  color:#1c2733;background:#F4F7FA;
}
h1{font-size:20px;color:var(--navy);margin:18px 0 12px}
h2{font-size:15px;color:var(--hijau);margin:18px 0 8px}
a{color:var(--navy)}

/* ---------- susun atur ---------- */
.bekas{max-width:1200px;margin:0 auto;padding:0 16px 40px}
.bekas.sempit{max-width:520px}
.atas{
  background:var(--navy);color:#fff;padding:9px 16px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
}
.jenama-blok{display:flex;align-items:center;gap:10px}
.logo-atas{
  height:36px;width:36px;object-fit:contain;flex-shrink:0;
  background:#fff;border-radius:50%;
}
.jenama{font-weight:bold;font-size:16px;line-height:1.25}
.jenama span{display:block;font-weight:normal;font-size:11px;opacity:.85}
.pengguna{font-size:12px;display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.nama-pengguna{font-weight:bold}
.lencana{background:var(--hijau);padding:2px 9px;border-radius:10px;font-size:11px;white-space:nowrap}

/* pemisah menegak antara kumpulan dalam bar atas */
.pisah{width:1px;height:18px;background:rgba(255,255,255,.35);display:inline-block}

/* kumpulan pautan pentadbir - sebaris dengan lencana peranan */
.kumpulan-admin{
  display:inline-flex;align-items:center;gap:2px;flex-wrap:wrap;
  background:rgba(255,217,160,.12);border:1px solid rgba(255,217,160,.35);
  border-radius:5px;padding:2px 6px 2px 4px;
}
.tajuk-admin{
  font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;
  color:#FFD9A0;opacity:.9;padding:0 5px 0 3px;white-space:nowrap;
}

/* pautan pentadbir */
.pengguna .pautan-admin{
  color:#FFD9A0;text-decoration:none;font-size:12px;
  padding:4px 9px;border-radius:4px;white-space:nowrap;
}
.pengguna .pautan-admin:hover{background:rgba(255,217,160,.18);color:#fff}
.menu{background:#0d2b45;padding:0 16px;display:flex;flex-wrap:wrap}
.menu a{color:#cfe0ee;text-decoration:none;padding:9px 12px;font-size:12.5px;white-space:nowrap}
.menu a:hover{background:#164e7d;color:#fff}
.bawah{
  border-top:1px solid var(--garis);padding:12px 16px;
  text-align:center;color:var(--kelabu);font-size:11px;
}

/* ---------- kad ---------- */
.kad-baris{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.kad{
  background:#fff;border:1px solid var(--garis);border-radius:6px;
  padding:12px 16px;min-width:150px;flex:1;
}
.kad-amaran{border-left:4px solid var(--merah)}
.kad-label{display:block;font-size:11px;color:var(--kelabu);text-transform:uppercase}
.kad-nombor{display:block;font-size:26px;font-weight:bold;color:var(--navy);line-height:1.2}
.kad-kecil{display:block;font-size:11px;color:var(--kelabu)}
.dua-lajur{display:flex;gap:20px;flex-wrap:wrap}
.dua-lajur>div{flex:1;min-width:280px}

/* ---------- jadual ---------- */
.skrol{overflow-x:auto}
.jadual{width:100%;border-collapse:collapse;background:#fff;font-size:12.5px}
.jadual th{
  background:var(--navy);color:#fff;text-align:left;
  padding:8px;border:1px solid var(--garis);font-weight:bold;white-space:nowrap;
}
.jadual td{padding:7px 8px;border:1px solid var(--garis);vertical-align:top}
.jadual tr:nth-child(even) td{background:var(--muda)}
.kanan{text-align:right;white-space:nowrap}

/* ---------- borang ---------- */
.borang label{display:block;margin:10px 0 4px;font-size:12px;color:var(--kelabu)}
.borang input,.borang select{
  width:100%;padding:8px;border:1px solid var(--garis);border-radius:4px;font-size:14px;
}
button,.butang{
  background:var(--navy);color:#fff;border:0;border-radius:4px;
  padding:9px 16px;font-size:14px;cursor:pointer;margin-top:12px;
}
button:hover{background:#1b4d78}
.butang-kecil{
  display:inline-block;background:#fff;border:1px solid var(--garis);
  padding:6px 12px;border-radius:4px;font-size:12px;text-decoration:none;color:var(--navy);
}
.penapis{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  background:#fff;border:1px solid var(--garis);border-radius:6px;padding:10px;
}
.penapis input,.penapis select{padding:7px;border:1px solid var(--garis);border-radius:4px;font-size:13px}
.penapis input[type=text]{flex:1;min-width:200px}
.penapis button{margin-top:0}

/* ---------- log masuk ---------- */
.latar-masuk{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:#0B2740;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(31,122,90,.32), transparent 46%),
    radial-gradient(circle at 82% 88%, rgba(18,57,91,.9), transparent 55%);
  padding:20px;
}
.kotak-masuk{
  background:#fff;border-radius:10px;width:100%;max-width:390px;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.32);
}

.masuk-kepala{
  background:var(--navy);color:#fff;text-align:center;padding:24px 20px 20px;
}
.masuk-jata{
  width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:bold;letter-spacing:1px;overflow:hidden;
}
/* Logo imej: tanpa bulatan putih tambahan (logo Majlis sudah berbingkai bulat) */
.masuk-jata-imej{
  width:auto;height:auto;background:none;border-radius:0;
  padding:0;overflow:visible;margin-bottom:14px;
}
.masuk-jata-imej img{
  width:92px;height:92px;object-fit:contain;display:block;margin:0 auto;
  background:#fff;border-radius:50%;
  box-shadow:0 2px 9px rgba(0,0,0,.32);
}
.masuk-nama{font-size:24px;font-weight:bold;letter-spacing:.5px;line-height:1.15}
.masuk-penuh{font-size:12.5px;opacity:.9;margin-top:3px}
.masuk-pbt{
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  opacity:.75;margin-top:9px;
}

.masuk-isi{padding:22px 24px 6px}
.masuk-ralat{
  background:#FBE0DD;border:1px solid #E7B4AF;color:#8F1E17;
  padding:9px 12px;border-radius:5px;font-size:12.5px;margin-bottom:14px;
}
.borang-masuk label{
  display:block;margin:0 0 5px;font-size:11.5px;color:var(--kelabu);
  text-transform:uppercase;letter-spacing:.6px;
}
.borang-masuk input{
  width:100%;padding:10px 12px;border:1px solid var(--garis);border-radius:5px;
  font-size:14px;margin-bottom:14px;background:#FBFCFD;
}
.borang-masuk input:focus{
  outline:none;border-color:var(--navy);background:#fff;
  box-shadow:0 0 0 3px rgba(18,57,91,.12);
}
.borang-masuk button{
  width:100%;margin-top:2px;padding:11px;font-size:14.5px;font-weight:bold;
  border-radius:5px;background:var(--hijau);
}
.borang-masuk button:hover{background:#176448}
.masuk-nota{
  font-size:11px;color:var(--kelabu);line-height:1.55;text-align:center;
  margin:16px 0 6px;
}

.masuk-kaki{
  background:var(--muda);border-top:1px solid var(--garis);
  padding:11px 20px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--kelabu);
}
.masuk-kaki a{color:var(--navy);text-decoration:none;font-weight:bold}
.masuk-kaki a:hover{text-decoration:underline}

/* ---------- lain-lain ---------- */
.kecil{font-size:12px;color:var(--kelabu)}
.ok{color:var(--hijau);font-weight:bold}
.ralat{color:var(--merah);font-weight:bold}
.amaran{background:#FFF3CD;border:1px solid #E0C97F;padding:10px;border-radius:4px;font-size:12.5px}
.halaman{margin:14px 0;display:flex;gap:6px;flex-wrap:wrap}
.halaman a{
  padding:6px 11px;border:1px solid var(--garis);background:#fff;
  text-decoration:none;border-radius:4px;font-size:13px;
}
.halaman a.aktif{background:var(--navy);color:#fff;border-color:var(--navy)}
code{background:var(--muda);padding:1px 5px;border-radius:3px}

/* ---------- tambahan: skrin admin ---------- */
.tab{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.tab a{
  padding:7px 12px;background:#fff;border:1px solid var(--garis);
  border-radius:4px;text-decoration:none;font-size:12.5px;color:var(--navy);
}
.tab a.aktif{background:var(--navy);color:#fff;border-color:var(--navy)}

.kotak-borang{
  background:#fff;border:1px solid var(--garis);border-radius:6px;padding:16px;margin-bottom:8px;
}
.grid-borang{display:flex;flex-wrap:wrap;gap:0 16px}
.grid-borang > div{flex:1 1 230px;min-width:200px}
.grid-borang label{display:block;margin:8px 0 4px;font-size:12px;color:var(--kelabu)}
.grid-borang input,.grid-borang select{
  width:100%;padding:8px;border:1px solid var(--garis);border-radius:4px;font-size:13.5px;
}
.semak{display:block;margin:12px 0 0;font-size:13px}
.semak input{width:auto;margin-right:6px}

.btn-kecil{
  background:var(--navy);color:#fff;border:0;border-radius:4px;
  padding:5px 10px;font-size:11.5px;cursor:pointer;margin:0 2px 0 0;
}
.btn-kecil:hover{background:#1b4d78}
.btn-putih{background:#fff;color:var(--navy);border:1px solid var(--garis)}
.btn-putih:hover{background:var(--muda)}
.btn-merah{background:var(--merah)}
.btn-merah:hover{background:#8f1e17}
.lencana-kecil{
  background:var(--hijau);color:#fff;padding:1px 6px;border-radius:8px;font-size:10px;
}
.jadual td input[type=text],.jadual td input[type=number]{
  padding:5px;border:1px solid var(--garis);border-radius:3px;font-size:12.5px;
}

/* ---------- panel padam ---------- */
.kotak-bahaya{
  background:#FFF6F5;border:1px solid #E7B4AF;border-left:4px solid var(--merah);
  border-radius:6px;padding:16px;margin:14px 0;
}
.kotak-bahaya label{display:block;margin:10px 0 4px;font-size:12px;color:var(--kelabu)}
.kotak-bahaya input[type=text]{
  width:100%;padding:8px;border:1px solid var(--garis);border-radius:4px;font-size:13.5px;
}
.btn-pautan-merah{color:var(--merah);border-color:#E7B4AF}
.btn-pautan-merah:hover{background:#FFF0EE}

/* ---------- baris tindakan & borang aset ---------- */
.baris-tindakan{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.baris-tindakan .butang{margin-top:0;text-decoration:none;display:inline-block}
.kotak-borang h2:first-of-type{margin-top:0}
.kotak-borang .kecil{display:block;margin-top:3px}
.kotak-bahaya ul{margin:8px 0 0 18px;padding:0}
.kotak-bahaya li{margin-bottom:3px}
/* jadual butiran: lajur label di kiri */
.jadual-butiran th{background:var(--muda);color:var(--navy);width:230px;font-weight:bold}

/* ---------- Fasa 3 & 4 ---------- */
.lencana-status{
  display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;
  font-weight:bold;white-space:nowrap;
}
.l-biru{background:#DCE9F5;color:#12395B}
.l-kuning{background:#FFF0C7;color:#7A5A12}
.l-hijau{background:#D8EFE5;color:#14563E}
.l-merah{background:#FBE0DD;color:#8F1E17}
.l-kelabu{background:#E6EAEE;color:#5A6672}

.aliran{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--garis);border-radius:6px;padding:12px;margin:12px 0;
}
.aliran span{
  background:var(--muda);border:1px solid var(--garis);border-radius:4px;
  padding:7px 11px;font-size:12px;font-weight:bold;color:var(--navy);text-align:center;
}
.aliran span small{display:block;font-weight:normal;font-size:10.5px;color:var(--kelabu)}
.aliran i{color:var(--navy);font-style:normal;font-size:15px}

.kad-pautan{text-decoration:none;display:block}
.kad-pautan:hover{background:var(--muda)}

/* ---------- kad borang ---------- */
.grid-borang-kad{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin:14px 0}
.kad-borang{background:#fff;border:1px solid var(--garis);border-radius:6px;padding:12px}
.kad-borang-tajuk{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  font-size:13px;color:var(--navy);margin-bottom:4px}
.kad-borang p.kecil{margin:2px 0 8px}
.kad-borang select{width:100%;padding:6px;border:1px solid var(--garis);border-radius:4px;
  font-size:12.5px;margin-bottom:6px}
.kad-borang form{margin:0}
.tgh{text-align:center}

/* ---------- lembaga / lelongan ---------- */
.ringkas{cursor:pointer;font-size:12.5px;color:var(--navy);font-weight:bold;
  padding:6px 0;user-select:none}
details[open] .ringkas{margin-bottom:4px}
.kotak-borang .jadual{margin-top:6px}

/* ---------- butang GSP tiga warna ---------- */
.menu a.gsp-merah{background:#8F1E17;color:#fff}
.menu a.gsp-merah:hover{background:#B3261E}
.menu a.gsp-hijau{background:#14563E;color:#fff}
.menu a.gsp-hijau:hover{background:#1F7A5A}
.menu a.gsp-ungu{background:#4A2E7A;color:#fff}
.menu a.gsp-ungu:hover{background:#63409E}

/* ---------- carta bar laporan ---------- */
.bar-bekas{
  background:#E6EAEE;border-radius:3px;height:14px;width:100%;overflow:hidden;
}
.bar-isi{height:100%;border-radius:3px;min-width:2px}

@media print{
  .atas,.menu,.baris-tindakan,.tab,.amaran,.bawah{display:none !important}
  body{background:#fff}
  .bekas{max-width:none;padding:0}
  .jadual{font-size:9pt}
}

/* ---------- dokumen & gambar ---------- */
.grid-gambar{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;margin:12px 0;
}
.kad-gambar{
  background:#fff;border:1px solid var(--garis);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;
}
.kad-gambar img{
  width:100%;height:140px;object-fit:cover;display:block;background:var(--muda);
}
.kad-gambar .ikon-fail{
  display:flex;align-items:center;justify-content:center;height:140px;
  background:var(--muda);color:var(--navy);font-weight:bold;font-size:12px;
  letter-spacing:1.5px;text-decoration:none;
}
.kad-gambar .ikon-fail:hover{background:#DCE9F5}
.kad-gambar-isi{padding:9px 10px;flex:1}
.kad-gambar-isi p{margin:5px 0 0}
.kad-gambar-isi form{margin-top:6px}
input[type=file]{
  padding:6px;border:1px solid var(--garis);border-radius:4px;
  font-size:12.5px;background:#fff;
}

/* ---------- kotak imbas QR / kod bar ---------- */
.kotak-imbas{
  background:#EEF7F2;border:1px solid #9FD5C0;border-left:4px solid var(--hijau);
  border-radius:6px;padding:12px 14px;margin:10px 0 14px;
}
.kotak-imbas label{
  display:block;font-size:11.5px;color:var(--hijau);font-weight:bold;
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;
}
.kotak-imbas input{
  width:100%;padding:11px 12px;border:2px solid var(--hijau);border-radius:5px;
  font-size:15px;font-family:Courier,monospace;background:#fff;
}
.kotak-imbas input:focus{outline:none;box-shadow:0 0 0 3px rgba(31,122,90,.18)}
.kotak-imbas .kecil{display:block;margin-top:6px}

.baris-qr{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qr-kecil{flex-shrink:0}
.qr-kecil img,.qr-kecil canvas{display:block}

/* ---------- medan dalam kotak borang (termasuk di luar grid) ---------- */
.kotak-borang label{
  display:block;margin:12px 0 5px;font-size:12px;color:var(--kelabu);
}
.kotak-borang .grid-borang label{margin-top:0}

/* medan lebar penuh - tidak termasuk borang ringkas dalam sel jadual */
.kotak-borang > input[type=text],
.kotak-borang > input[type=number],
.kotak-borang > input[type=date],
.kotak-borang > input[type=email],
.kotak-borang > select,
.kotak-borang textarea{
  width:100%;padding:9px 10px;border:1px solid var(--garis);border-radius:4px;
  font-size:13.5px;background:#fff;box-sizing:border-box;font-family:inherit;
}
.kotak-borang td input[type=text],
.kotak-borang td input[type=number],
.kotak-borang td select{width:100%}

.kotak-borang textarea{line-height:1.55;resize:vertical;min-height:58px}
.kotak-borang input:focus,
.kotak-borang textarea:focus,
.kotak-borang select:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,57,91,.10);
}
.kotak-borang > button{display:inline-block;margin-top:12px}

/* borang ringkas dalam sel jadual - kekal padat */
td form textarea{min-height:44px;font-size:12.5px}
td input[type=text]{min-width:150px}