/* ============================================================
   SISTEM ECO-TOURISM JABATAN PERHUTANAN NEGERI PERAK
   CSS Baharu — Tema Hijau Hutan
   Kekalkan semua class asal, kemas kini nilai sahaja
   ============================================================ */

/* --- Token Warna Utama --- */
:root {
  --hutan-gelap:    #1a4d2e;   /* Hijau hutan dalam */
  --hutan-sedang:   #2d6a4f;   /* Hijau utama */
  --hutan-cerah:    #40916c;   /* Hijau terang */
  --hutan-muda:     #74c69d;   /* Hijau muda */
  --hutan-pucat:    #d8f3dc;   /* Hijau sangat pucat */
  --krim:           #f8f5ef;   /* Latar krim alam */
  --krim-gelap:     #ede9e1;   /* Krim gelap sedikit */
  --coklat-kayu:    #6d4c2a;   /* Warna kayu/tanah */
  --emas-cahaya:    #f4a261;   /* Aksen cahaya hutan */
  --putih:          #ffffff;
  --teks-gelap:     #1c2b1e;   /* Teks utama gelap */
  --teks-sedang:    #3d5c42;   /* Teks sekunder */
  --teks-pucat:     #6b8f72;   /* Teks hint */
  --sempadan:       #b7d5bf;   /* Border lembut */
  --bahaya:         #c53030;   /* Merah amaran */
}

/* ============================================================
   BODY & LAYOUT ASAS
   ============================================================ */
body, html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  color: var(--teks-gelap);
  background-color: var(--krim);
}

body#page.page {
  background-color: var(--krim);
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(26,77,46,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(64,145,108,0.07) 0%, transparent 60%);
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
}

/* ============================================================
   TIPOGRAFI — class asal dikekalkan, nilai dikemas kini
   ============================================================ */
.txtforma {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: var(--teks-gelap);
  line-height: 1.6;
}

.txtformaa {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: var(--teks-gelap);
}

.txtformb {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--teks-gelap);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.txtwhite {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: var(--putih);
}

.txtformg {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: var(--teks-pucat);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.txtfield {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  color: var(--teks-sedang);
  line-height: 1.6;
}

.txttitle {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--hutan-gelap);
}

.red {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: var(--bahaya);
  text-transform: uppercase;
}

/* ============================================================
   FORM INPUT & BUTTON
   ============================================================ */
.txtform {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: var(--teks-gelap);
  background: var(--putih);
  border: 1.5px solid var(--sempadan);
  border-radius: 8px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.txtform:focus {
  border-color: var(--hutan-cerah);
  box-shadow: 0 0 0 3px rgba(64,145,108,0.15);
}

.button {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--putih);
  background: var(--hutan-sedang);
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(45,106,79,0.25);
  display: inline-block;
}

.button:hover {
  background: var(--hutan-gelap);
  box-shadow: 0 4px 14px rgba(45,106,79,0.35);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(45,106,79,0.2);
}

/* ============================================================
   MESSAGE / NOTIS
   ============================================================ */
.message {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--hutan-gelap);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   HEADER
   ============================================================ */
.borderatas {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}

/* ============================================================
   LAYOUT UTAMA WRAPPER
   ============================================================ */
.homeborder {
  border: 1px solid var(--sempadan);
  border-radius: 0 0 12px 12px;
  background: var(--putih);
  box-shadow: 0 4px 24px rgba(26,77,46,0.08);
}

.borderbawah {
  padding: 16px;
  border: 1px solid var(--sempadan);
  border-radius: 10px;
  background: var(--krim);
  box-shadow: 0 1px 4px rgba(26,77,46,0.06);
}

/* ============================================================
   NAVIGASI MENU KIRI
   ============================================================ */
.leftmenutitle {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--putih);
  background: var(--hutan-gelap);
  height: 38px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 8px 8px 0 0;
}

.roundleft {
  background: transparent;
  width: 12px;
}

.roundright {
  background: transparent;
  width: 12px;
}

/* ============================================================
   TABLE HEADER (senarai data)
   ============================================================ */
.tblheader {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  color: var(--putih);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--hutan-sedang);
  height: 34px;
  border-collapse: collapse;
  border-color: var(--hutan-cerah);
}

/* ============================================================
   ROW WARNA TABLE
   ============================================================ */
.bluebox {
  background-color: #e8f4f0;
  border-bottom: 1px solid #c8e6c9;
  border-top: 1px solid #c8e6c9;
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: var(--teks-gelap);
}

.graybox {
  background-color: #f8f5ef;
  border-bottom: 1px solid var(--sempadan);
  border-top: 1px solid var(--sempadan);
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: var(--teks-gelap);
}

.tblitem {
  background-color: #fffde7;
  border-bottom: 1px solid #f9e4a0;
  border-top: 1px solid #f9e4a0;
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--coklat-kayu);
}

.dataputih     { background-color: #e8f5e9; }
.datamerah     { background-color: #ffcdd2; border-bottom: 1px solid #ef9a9a; border-top: 1px solid #ef9a9a; }
.datamerah2    { background-color: #ef5350; border-bottom: 1px solid #fff; border-top: 1px solid #fff; }
.databiru      { background-color: #bbdefb; border-bottom: 1px solid #90caf9; border-top: 1px solid #90caf9; }
.datakuning    { background-color: #fff9c4; border-bottom: 1px solid #fff176; border-top: 1px solid #fff176; }
.datahijau     { background-color: #c8e6c9; border-bottom: 1px solid #a5d6a7; border-top: 1px solid #a5d6a7; }
.datacoklat    { background-color: #ffe0b2; border-bottom: 1px solid #ffcc80; border-top: 1px solid #ffcc80; }
.dataputih_u   { text-transform: uppercase; }
.spandp        { color: #e8f4f0; }

/* ============================================================
   SUBHEADING & TITLE HALAMAN
   ============================================================ */
.hometitle {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--hutan-gelap);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.homesubtitle {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--hutan-sedang);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.homevubtitle {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  color: var(--teks-pucat);
  text-transform: uppercase;
}

.submenutitle {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  color: var(--putih);
  font-size: 12px;
  font-weight: 600;
  background: var(--hutan-cerah);
  height: 30px;
  letter-spacing: 0.04em;
}

/* ============================================================
   BILANGAN TIKET
   ============================================================ */
.biltet {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  color: var(--hutan-gelap);
  font-size: 24px;
  font-weight: 700;
}

/* ============================================================
   INFO SCROLL / MAKLUMAN
   ============================================================ */
#scrollable {
  overflow: auto;
  height: 580px;
  width: 100%;
  background: var(--putih);
}

.info_txt {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 13px;
  color: var(--teks-gelap);
  line-height: 1.8;
}

/* ============================================================
   FOOTER & PENAFIAN
   ============================================================ */
.footer {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  color: var(--putih);
  font-size: 11px;
  background: var(--hutan-gelap);
  height: 30px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 16px;
}

.penafi {
  border: 1px solid var(--sempadan);
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 11px;
  color: var(--teks-pucat);
  background-color: var(--krim-gelap);
  padding: 8px 16px;
  line-height: 1.6;
}

/* ============================================================
   SUBTBL
   ============================================================ */
.subtbl {
  font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
  font-size: 11px;
  color: var(--teks-pucat);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   CETAK
   ============================================================ */
@media print {
  body { background: white !important; }
  .footer, .penafi { display: none; }
}

/* ============================================================
   SCROLLBAR LEMBUT
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--krim-gelap); }
::-webkit-scrollbar-thumb { background: var(--hutan-muda); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--hutan-cerah); }