/* Sistem Permohonan DUTE - tema hijau cerah */
* { box-sizing: border-box; }
:root {
  --utama: #2e7d4f;
  --utama-gelap: #1f5c39;
  --utama-cerah: #e8f5ec;
  --latar: #f4f8f5;
  --kad: #ffffff;
  --garis: #d7e4db;
  --teks: #1f2d24;
  --pudar: #64776a;
  --merah: #c0392b;
  --merah-cerah: #fdecea;
  --kuning: #8a6d00;
  --kuning-cerah: #fff6d6;
}
body { margin: 0; font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 14px; color: var(--teks); background: var(--latar); }
a { color: var(--utama); }

/* Header */
.atas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; background: var(--utama); color: #fff; }
.jenama { display: flex; align-items: center; gap: 10px; }
.jenama strong { display: block; font-size: 16px; }
.jenama small { opacity: .85; }
.logo { display: inline-block; background: #fff; color: var(--utama); font-weight: 800; padding: 6px 9px; border-radius: 6px; letter-spacing: 1px; }
.logo.besar { font-size: 22px; padding: 10px 14px; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; }
.menu a { color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 5px; }
.menu a:hover, .menu a.aktif { background: rgba(255,255,255,.2); }
.menu a.keluar { background: rgba(0,0,0,.18); }

.kandungan { max-width: 1280px; margin: 0 auto; padding: 16px 20px; }
.bawah { text-align: center; color: var(--pudar); font-size: 12px; padding: 14px; }
.tajuk-cetak { display: none; }

/* Mesej */
.mesej { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.mesej ul { margin: 0; padding-left: 18px; }
.mesej.berjaya { background: var(--utama-cerah); border-color: #b6dcc2; color: var(--utama-gelap); }
.mesej.ralat { background: var(--merah-cerah); border-color: #f2b8b1; color: var(--merah); }

/* Kad statistik */
.kad-statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kad { background: var(--kad); border: 1px solid var(--garis); border-left: 4px solid var(--utama); border-radius: 8px; padding: 12px 14px; text-decoration: none; color: inherit; }
.kad span { display: block; color: var(--pudar); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.kad strong { display: block; font-size: 22px; margin-top: 4px; }
.kad.amaran { border-left-color: var(--merah); }
.kad.info { border-left-color: #d4a017; }
a.kad:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Butang */
.butang { display: inline-block; padding: 8px 14px; border: 1px solid var(--garis); background: #fff; color: var(--teks); border-radius: 6px; cursor: pointer; text-decoration: none; font-size: 14px; font-family: inherit; }
.butang:hover { background: var(--utama-cerah); }
.butang.utama { background: var(--utama); border-color: var(--utama); color: #fff; }
.butang.utama:hover { background: var(--utama-gelap); }
.butang.bahaya { color: var(--merah); border-color: #f2b8b1; }
.butang.bahaya:hover { background: var(--merah-cerah); }
.butang.kecil { padding: 4px 10px; font-size: 13px; }
.butang.penuh { width: 100%; }

/* Bar tapis */
.bar-tapis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--kad); border: 1px solid var(--garis); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.bar-tapis input[type=search] { flex: 1 1 240px; }
.bar-tapis .ruang { flex: 1; }
input[type=text], input[type=search], input[type=password], select { padding: 8px 10px; border: 1px solid var(--garis); border-radius: 6px; font-size: 14px; font-family: inherit; background: #fff; }
input:focus, select:focus { outline: 2px solid #9fd1b0; border-color: var(--utama); }
.ringkasan-tapis { margin: 4px 0 10px; color: var(--pudar); }

/* Jadual */
.bekas-jadual { background: var(--kad); border: 1px solid var(--garis); border-radius: 8px; overflow-x: auto; }
.jadual { width: 100%; border-collapse: collapse; }
.jadual th { background: var(--utama-cerah); color: var(--utama-gelap); text-align: left; padding: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 2px solid var(--garis); white-space: nowrap; }
.jadual td { padding: 9px 10px; border-bottom: 1px solid #edf2ee; vertical-align: top; }
.jadual tbody tr:hover { background: #f8fbf9; }
.jadual .bil { width: 46px; text-align: center; }
.jadual .nombor { text-align: right; white-space: nowrap; }
.jadual .tindakan { white-space: nowrap; width: 1%; }
.jadual .tindakan a, .jadual .tindakan form { display: block; margin-bottom: 4px; }
.jadual .tindakan .butang { width: 100%; text-align: center; }
.jadual tfoot td { font-weight: 700; background: var(--utama-cerah); border-top: 2px solid var(--garis); }
.jadual .label-jumlah { text-align: right; }
.jadual .kosong { text-align: center; color: var(--pudar); padding: 30px; }
tr.tidak-lengkap { background: #fffafa; }
tr.tidak-lengkap td:first-child { box-shadow: inset 3px 0 0 var(--merah); }
td.salah { color: var(--merah); font-weight: 600; }
.tiada { color: #b9c5bd; }
.lencana { display: inline-block; background: var(--utama-cerah); color: var(--utama-gelap); padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.lencana.kuning { background: var(--kuning-cerah); color: var(--kuning); }
.lencana-ralat { color: var(--merah); font-size: 12px; margin-top: 3px; }

/* Graf laporan */
.graf-kol { width: 30%; }
.bar { background: #edf2ee; border-radius: 4px; height: 14px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--utama); }

/* Borang */
.kepala-halaman { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.kepala-halaman h1 { margin: 0; font-size: 20px; }
.borang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: var(--kad); border: 1px solid var(--garis); border-radius: 8px; padding: 20px; max-width: 820px; }
.borang.sempit { max-width: 420px; grid-template-columns: 1fr; }
.borang label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.borang label em { color: var(--merah); font-style: normal; }
.borang label small { font-weight: normal; color: var(--pudar); }
.borang .penuh { grid-column: 1 / -1; }
.butang-borang { display: flex; gap: 8px; }

/* Login */
.halaman-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #e8f5ec, #cfe9d8); }
.kotak-login { background: #fff; padding: 30px; border-radius: 12px; width: 100%; max-width: 360px; box-shadow: 0 8px 30px rgba(31,92,57,.15); text-align: center; }
.kotak-login .logo { background: var(--utama); color: #fff; }
.kotak-login h1 { font-size: 18px; margin: 14px 0 2px; }
.kotak-login .kecil { color: var(--pudar); margin: 0 0 18px; }
.kotak-login label { display: flex; flex-direction: column; gap: 5px; text-align: left; font-weight: 600; margin-bottom: 12px; }

/* Borang berkumpulan */
.borang fieldset { border: 1px solid var(--garis); border-radius: 8px; padding: 12px 14px 14px; margin: 0; }
.borang legend { font-weight: 700; color: var(--utama-gelap); padding: 0 6px; }
.grid-2, .grid-3 { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 2fr 1fr 1fr; }
.borang { max-width: 900px; }

/* Jadual: tambahan */
.kecil { font-size: 12px; color: var(--pudar); }
.tiada-pecah { white-space: nowrap; }
.lencana-prog { display: inline-block; border: 1.5px solid; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; background: #fff; }

/* Laporan */
.tapis-laporan { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-laporan { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { background: var(--kad); border: 1px solid var(--garis); border-radius: 8px; padding: 14px 16px; }
.panel.lebar { grid-column: 1 / -1; }
.panel h2, .panel h3 { margin: 0 0 10px; font-size: 15px; color: var(--utama-gelap); }
.panel .bekas-jadual { border: 0; }
.nota { color: var(--pudar); font-size: 12px; margin: 8px 0 0; }
.tiada-data { color: var(--pudar); }

/* Graf SVG */
.graf-svg { width: 100%; height: auto; max-height: 340px; display: block; margin: 0 auto; }
.jadual .kol-nama { min-width: 200px; }
.jadual td span.salah { color: var(--merah); font-weight: 600; }
.graf-svg .grid { stroke: #e6eee9; stroke-width: 1; }
.graf-svg .dasar { stroke: #b9c9be; stroke-width: 1; }
.graf-svg text { font-family: inherit; }
.graf-svg .paksi { fill: var(--pudar); font-size: 11px; }
.graf-svg .label { fill: var(--teks); font-size: 13px; font-weight: 700; }
.graf-svg .nilai { fill: var(--teks); font-size: 12px; font-weight: 600; }
.graf-svg rect:hover { opacity: .85; }
.petunjuk { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 4px; padding: 0; font-size: 12px; color: var(--pudar); }
.petunjuk i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Graf mendatar */
.graf-mendatar { display: flex; flex-direction: column; gap: 8px; }
.baris-graf { display: grid; grid-template-columns: 150px 1fr 82px; align-items: center; gap: 8px; font-size: 13px; }
.nama-graf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landasan { background: #edf2ee; height: 14px; border-radius: 3px; overflow: hidden; }
.landasan span { display: block; height: 100%; border-radius: 3px; }
.nilai-graf { text-align: right; font-weight: 600; white-space: nowrap; }

/* Log masuk dengan graf */
.halaman-login.dengan-graf { align-items: flex-start; padding: 30px 20px; }
.susun-login { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1180px; }
.halaman-login.dengan-graf .kotak-login { position: sticky; top: 30px; flex: 0 0 340px; }
.papan-graf { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.papan-graf header h2 { margin: 0; font-size: 20px; color: var(--utama-gelap); }
.papan-graf header p { margin: 4px 0 0; color: var(--pudar); }
.papan-graf .panel { box-shadow: 0 4px 18px rgba(31,92,57,.08); }
.kad-statistik.mini { margin: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kad-statistik.mini strong { font-size: 19px; }
.dua-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Telefon: jadual jadi kad */
@media (max-width: 760px) {
  .kandungan { padding: 12px; }
  .borang { grid-template-columns: 1fr; }
  .jadual thead { display: none; }
  .jadual, .jadual tbody, .jadual tr, .jadual td, .jadual tfoot { display: block; width: 100%; }
  .jadual tr { border-bottom: 1px solid var(--garis); padding: 8px 0; }
  .jadual td { border: 0; padding: 4px 12px; text-align: left !important; }
  .jadual td[data-label]:before { content: attr(data-label) ": "; color: var(--pudar); font-size: 12px; }
  .jadual .bil { width: auto; text-align: left; }
  .graf-kol { width: auto; }
  .grid-2, .grid-3, .grid-laporan, .dua-panel { grid-template-columns: 1fr; }
  .baris-graf { grid-template-columns: 110px 1fr 70px; }
  .halaman-login.dengan-graf { padding: 16px; }
  .halaman-login.dengan-graf .kotak-login { position: static; flex: 1 1 100%; }
  .tiada-pecah { white-space: normal; }
  .jadual .kol-nama { min-width: 0; }
  .graf-svg .paksi { font-size: 19px; }
  .graf-svg .label { font-size: 24px; }
  .graf-svg .nilai { font-size: 20px; }
}

/* Cetak */
@media print {
  .atas, .bar-tapis, .tindakan, .butang, .kad-statistik a.kad, .kepala-halaman .butang { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .kandungan { max-width: none; padding: 0; }
  .tajuk-cetak { display: block; text-align: center; font-size: 15px; margin: 0 0 10px; }
  .bekas-jadual { border: 0; overflow: visible; }
  .jadual th, .jadual td { border: 1px solid #999; padding: 4px 6px; }
  .lencana-ralat { display: none; }
  tr.tidak-lengkap { background: none; }
  .panel { break-inside: avoid; }
  .tapis-laporan { display: none; }
}