/* ============================================================
   calendar-mos.css — Tema Hijau Hutan Perhutanan Perak
   Berdasarkan struktur SEBENAR calendar_mini.js:
   
   <thead>
     <tr>              ← baris tajuk: [«] [Bulan Tahun] [×]
       <td class="button">    ← toggle (-)
       <td class="title">     ← "Jun 2026" — boleh drag
       <td class="button">    ← close (×)
     </tr>
     <tr class="headrow">     ← baris navigasi: «« ‹ HariIni › »»
       <td class="button">    ← «« tahun lepas
       <td class="button">    ← ‹  bulan lepas
       <td class="button" colspan="3|4"> ← "Hari Ini"
       <td class="button">    ← ›  bulan depan
       <td class="button">    ← »» tahun depan
     </tr>
     <tr class="daynames">    ← nama hari
       <td class="name wn">   ← nombor minggu
       <td class="name">      ← Isn, Sel, Rab ...
       <td class="name weekend"> ← Sab, Ahd
     </tr>
   </thead>
   <tbody>
     <tr>
       <td class="wn">        ← nombor minggu
       <td class="day">       ← tarikh biasa
       <td class="day weekend"> ← tarikh hujung minggu
     </tr>
     ...
   </tbody>
   <tfoot>
     <tr class="footrow">
       <td class="ttip">      ← status / tooltip
       <td class="hilite">    ← butang Tutup
     </tr>
   </tfoot>
   ============================================================ */

/* ============================================================
   KONTENA UTAMA
   PENTING: overflow:hidden TIDAK boleh ada pada .calendar table
   — ia akan clip baris headrow. Letak border-radius pada
   div.calendar sahaja, bukan pada table.
   ============================================================ */
div.calendar {
    position:      relative;
    z-index:       9999;
    border-radius: 12px;
    overflow:      hidden;   /* clip sini, bukan dalam table */
    border:        1px solid #b7d5bf;
    box-shadow:    0 8px 28px rgba(26,77,46,0.20),
                   0 2px 8px rgba(0,0,0,0.10);
    display:       inline-block;
}

/* Table dan semua table dalam calendar — TIADA border-radius, TIADA overflow */
.calendar,
.calendar table {
    border:      none;       /* border sudah ada pada div.calendar */
    font-size:   13px;
    font-family: 'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
    color:       #1c2b1e;
    cursor:      default;
    background:  #ffffff;
    border-radius: 0;        /* JANGAN letak radius pada table */
    overflow:    visible;    /* JANGAN overflow:hidden pada table */
    min-width:   230px;
    border-collapse: collapse;
}

/* ============================================================
   BARIS 1: TAJUK BULAN & TAHUN  (tr tanpa class khusus)
   td.button (toggle -), td.title (bulan tahun), td.button (×)
   ============================================================ */
.calendar thead .title {
    font-size:      13px;
    font-weight:    700;
    text-align:     center;
    background:     #1a4d2e;
    color:          #ffffff;
    padding:        9px 4px;
    letter-spacing: 0.03em;
    cursor:         move;    /* boleh drag */
    white-space:    nowrap;
}

/* ============================================================
   BARIS 2: NAVIGASI  (tr.headrow)
   butang «« ‹ [Hari Ini] › »»
   ============================================================ */
.calendar thead .headrow {
    background: #2d6a4f;
}

/* Semua butang navigasi (dalam headrow DAN baris title) */
.calendar .button {
    text-align:  center;
    padding:     7px 8px;
    font-size:   13px;
    font-weight: 700;
    color:       rgba(255,255,255,0.80);
    cursor:      pointer;
    background:  transparent;
    white-space: nowrap;
}

/* Hover butang navigasi header */
.calendar thead .hilite {
    background:    rgba(255,255,255,0.18);
    color:         #ffffff;
    border:        1px solid rgba(255,255,255,0.25);
    border-radius: 5px;
    padding:       6px 7px;
    cursor:        pointer;
}

/* Butang navigasi ditekan */
.calendar thead .active {
    background: rgba(255,255,255,0.30);
    color:      #ffffff;
    padding:    7px 8px;
}

/* ============================================================
   BARIS 3: NAMA HARI  (tr.daynames)
   td.name, td.name.wn, td.name.weekend
   ============================================================ */
.calendar thead .daynames {
    background:  #40916c;
    border-top:  1px solid rgba(255,255,255,0.15);
}

.calendar thead .name {
    border-bottom: none;
    padding:       6px 4px;
    text-align:    center;
    font-size:     10px;
    font-weight:   700;
    color:         rgba(255,255,255,0.90);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.calendar thead .weekend {
    color: rgba(255,255,255,0.55);
}

/* ============================================================
   BODY — hari dalam bulan
   ============================================================ */

.calendar tbody .day {
    width:      2.2em;
    text-align: center;
    padding:    6px 4px;
    font-size:  13px;
    color:      #1c2b1e;
}

/* Nombor minggu */
.calendar table .wn {
    padding:      5px 6px;
    border-right: 1px solid #e8f5e9;
    background:   #f8f5ef;
    font-size:    10px;
    color:        #74c69d;
    font-weight:  700;
    text-align:   center;
}

/* Highlight seluruh baris semasa hover */
.calendar tbody .rowhilite td {
    background: #f0faf2;
    color:      #1a4d2e;
}

.calendar tbody .rowhilite td.wn {
    background: #e0f2e5;
    color:      #2d6a4f;
}

/* Sel tarikh di-hover */
.calendar tbody td.hilite {
    background:    #d8f3dc;
    color:         #1a4d2e;
    padding:       5px 3px;
    border:        1px solid #74c69d;
    border-radius: 6px;
    cursor:        pointer;
}

/* Sel tarikh ditekan */
.calendar tbody td.active {
    background:    #2d6a4f;
    color:         #ffffff;
    padding:       6px 4px;
    border-radius: 6px;
}

/* Tarikh yang telah dipilih */
.calendar tbody td.selected {
    font-weight:   700;
    background:    #1a4d2e;
    color:         #ffffff;
    border:        2px solid #40916c;
    padding:       4px 2px;
    border-radius: 8px;
}

/* Tarikh hari ini */
.calendar tbody td.today {
    font-weight: 800;
    color:       #1a4d2e;
    position:    relative;
}

/* Titik hijau kecil bawah tarikh hari ini */
.calendar tbody td.today::after {
    content:       '';
    display:       block;
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    #40916c;
    margin:        1px auto 0;
}

/* Tarikh hujung minggu */
.calendar tbody td.weekend {
    color: #b91c1c;
}

/* Hari ini DAN hujung minggu */
.calendar tbody td.today.weekend {
    color: #b91c1c;
}

/* Tarikh dilumpuhkan */
.calendar tbody .disabled {
    color:  #c8d5c8;
    cursor: not-allowed;
}

.calendar tbody .emptycell  { visibility: hidden; }
.calendar tbody .emptyrow   { display:    none;   }

/* Garisan pemisah antara baris dalam body */
.calendar tbody tr {
    border-bottom: 1px solid #f0faf2;
}

/* ============================================================
   FOOTER — status & butang tutup
   ============================================================ */
.calendar tfoot .footrow {
    text-align:  center;
    background:  #f8f5ef;
    color:       #3d5c42;
    border-top:  1px solid #b7d5bf;
}

.calendar tfoot .ttip {
    border-top:  none;
    background:  #f8f5ef;
    color:       #6b8f72;
    font-size:   11px;
    padding:     6px 10px;
    font-style:  italic;
    text-align:  left;
}

.calendar tfoot .hilite {
    background:    #d8f3dc;
    border:        1px solid #74c69d;
    color:         #1a4d2e;
    padding:       5px 10px;
    border-radius: 6px;
    cursor:        pointer;
    font-weight:   600;
    font-size:     11px;
}

.calendar tfoot .active {
    background:    #2d6a4f;
    color:         #ffffff;
    padding:       6px 10px;
    border-radius: 6px;
}

/* ============================================================
   COMBO — dropdown bulan / tahun
   ============================================================ */
.combo {
    position:      absolute;
    display:       none;
    top:           0;
    left:          0;
    width:         6em;
    cursor:        default;
    background:    #ffffff;
    color:         #1c2b1e;
    font-size:     12px;
    font-family:   'Segoe UI', Tahoma, Century Gothic, Verdana, Arial, sans-serif;
    border:        1px solid #b7d5bf;
    border-radius: 8px;
    overflow:      hidden;
    box-shadow:    0 4px 16px rgba(26,77,46,0.18);
    z-index:       10000;
}

.combo .label {
    width:      100%;
    text-align: center;
    padding:    5px 6px;
    font-size:  12px;
    color:      #3d5c42;
    transition: background 0.1s;
}

.combo .hilite {
    background: #d8f3dc;
    color:      #1a4d2e;
}

.combo .active {
    background:  #1a4d2e;
    color:       #ffffff;
    font-weight: 700;
    border-top:  none;
    border-bottom: none;
}