/* --- KOD PENUH STYLE.CSS (MUKTAMAD DENGAN HIGHLIGHT YANG BETUL) --- */
/* --- KOD BAHARU DENGAN FON YANG BETUL --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
    --week-bg: #EAF1DD;
    --week-col-bg: #D9EAD3;
    --border-color: #000;
    --empty-cell-bg: #F2F2F2;
    --subuh-color: #0070C0;
    --maghrib-color: #C0504D;
    --date-header-bg: #FFFACD;
    --date-number-color: #2E5A88;
    --holiday-label-bg: #2c3e50;
    --today-highlight-bg: #f1e42c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
    color: #000;
    overflow: hidden; 
}

/* ======================================================= */
/* BAHAGIAN 1: GAYA ASAS & PAPARAN DESKTOP (> 768px)       */
/* ======================================================= */

.page-container { display: flex; flex-direction: column; height: 100vh; width: 95vw; max-width: 1800px; margin: 0 auto; padding: 1.5vmin; }
.page-header { display: flex; align-items: center; justify-content: center; text-align: left; flex-shrink: 0; padding-bottom: 1.5vmin; }
.logo-container { width: 20vmin; margin-right: 2vmin; flex-shrink: 0; }
.logo-container img { max-width: 100%; }
.title-container .title-main { font-size: 2.2vmin; font-weight: 400; margin-bottom: -0.5vmin; }
.title-container .title-month { font-size: 5vmin; font-weight: 700; margin-top: -1vmin; }
main { flex-grow: 1; min-height: 0; }

#mobile-view-container { display: none; }

.schedule-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; border: 2px solid var(--border-color); }
.schedule-table th, .schedule-table td { border: 1px solid var(--border-color); vertical-align: top; padding: 0.5vmin; }
.schedule-table thead th { background-color: var(--week-bg); font-size: 1.6vmin; text-align: center; vertical-align: middle; }
.week-header-title { background-color: var(--week-col-bg) !important; width: 2%; }
.week-number-cell { background-color: var(--week-col-bg); font-weight: bold; font-size: 1.6vmin; text-align: center; vertical-align: middle; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-rl; transform-origin: center center; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

.day-cell { position: relative; background-color: var(--date-header-bg); }
.day-cell.empty-cell { background-color: var(--empty-cell-bg); }

/* --- PERATURAN HIGHLIGHT YANG BETUL KINI AKAN BERFUNGSI --- */
.day-cell.is-today {
    background-color: var(--today-highlight-bg);
}

.date-number { font-weight: bold; position: absolute; top: -0.6vmin; left: 0.5vmin; font-size: 2.5vmin; color: var(--date-number-color); }
.lecture-content { position: absolute; top: 2.5vmin; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; font-size: 1.2vmin; text-align: center; background-color: #fff; padding: 0.1vmin; }
.lecture-block { padding-bottom: 0.5vmin; }
.lecture-block + .lecture-block { border-top: 1px solid #ccc; padding-top: 0.5vmin; margin-top: 0.5vmin; }
.lecture-time, .ustaz-name, .lecture-title { line-height: 1.2; }
.lecture-time { font-weight: bold; font-size: 1.6vmin; }
.lecture-time.subuh { color: var(--subuh-color); }
.lecture-time.maghrib { color: var(--maghrib-color); }
.ustaz-name { font-weight: bold; }
.lecture-title {  font-style: italic; font-weight: 400 !important; }
.arabic-text { font-size: 4.5vmin; font-family: 'Times New Roman', serif; }
.yasin-title { font-weight: bold; font-size: 1.4vmin; }
.page-footer { padding-top: 1vmin; font-size: 1.2vmin; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.legend { display: flex; align-items: center; gap: 1vmin; }
.legend-box { width: 12vw; padding: 0.5vmin 0; border: 1px solid #000; text-align: center; font-weight: bold; }
.empty-slot-legend { background-color: var(--empty-cell-bg); }
.public-holiday-legend { background-color: #2c3e50; color: white; }
.legend-box.today-legend { background-color: var(--today-highlight-bg); }
.footer-link a { color: #0000FF; }
.date-header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.holiday-label { background-color: var(--holiday-label-bg); color: white; font-size: 1.1vmin; font-weight: bold; padding: 0vmin 0.8vmin; border-radius: 5px; white-space: nowrap; margin-left: auto; }
.lecture-content.is-empty-slot { background-color: var(--empty-cell-bg); }
.empty-slot-text { font-weight: bold; font-size: 1.6vmin; color: #888; }
.lecture-block.is-weekend-empty { background-color: var(--empty-cell-bg); border-radius: 5px; padding-top: 2vmin; padding-bottom: 1.5vmin; }

/* ======================================================= */
/* BAHAGIAN 2: GAYA UNTUK PAPARAN MUDAH ALIH (<= 768px)    */
/* ======================================================= */
@media (max-width: 768px) {
    body { overflow-y: auto; }
    .page-container { padding: 15px; height: auto; }
    .schedule-table { display: none; }
    #mobile-view-container { display: block; }
    .page-header { flex-direction: column; text-align: center; }
    .logo-container { margin: 0 0 15px 0; width: 150px; }
    .title-container .title-main { font-size: 0.95em; font-weight: 400; }
    .title-container .title-month { font-size: 2em; }
    #today-kuliah-card.is-today-card { background-color: var(--date-header-bg); border: 2px solid var(--date-number-color); }
    #today-kuliah-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin: 25px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .today-card-header { text-align: center; margin-bottom: 15px; }
    .today-card-header .label { font-size: 2em; font-weight: bold; text-transform: uppercase; color: #2c3e50; }
    .today-card-header .date-string { font-size: 1.2em; font-weight: 600; }
    .today-card-header .hijri-date-string { font-size: 1em; color: #555; margin-top: -5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
    .today-card-header .holiday-label { margin-top: 10px; display: inline-block; font-size: 1em; padding: 5px 12px; }
    .today-card-body .lecture-block { font-size: 1.1em; border-bottom: 1px solid #eee; padding-bottom: 15px; }
    .today-card-body .lecture-time { font-size: 1.1rem; text-align: center; }
    .today-card-body .ustaz-name { font-size: 1.2em; text-align: center;}
    .today-card-body .lecture-title { font-size: 1em; text-align: center;}
    .no-kuliah-today { text-align: center; font-size: 1.1em; font-weight: 500; padding: 20px 0; }
    .poster-wrapper { width: 100%; aspect-ratio: 16 / 9; margin-top: 15px; margin-bottom: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .poster-iframe { width: 100%; height: 100%; border: none; pointer-events: none; }
    #mobile-card-list .mobile-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
    .card-header { background-color: #fffde7; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-style: italic; font-size: 1.1em; }
    .card-header .holiday-label { font-size: 0.95em; padding: 4px 10px; }
    .card-body { padding: 15px; }
    .card-body.is-empty-slot { background-color: var(--empty-cell-bg); text-align: center; }
    .card-body .empty-slot-text { font-size: 1.1rem; }
    .card-body .lecture-block { font-size: 1.1em; }
    .card-body .lecture-time { font-size: 1.1rem; }
    .card-body .ustaz-name { font-size: 1.1em; }
    .page-footer { flex-direction: column; gap: 20px; text-align: center; }
    .page-footer .update-info, .page-footer .legend, .page-footer .footer-link { font-size: 0.8rem; }
    .legend { flex-wrap: wrap; justify-content: center; display: none;}
    .legend-box { width: auto; flex-grow: 1; padding: 8px 12px; font-size: 0.9em; }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 0;
    }

    body {
        overflow: visible !important;
        background-color: white;
    }

    /* --- Sembunyikan elemen yang tidak perlu dicetak --- */
    .print-button,
    .legend-box.today-legend{
        display: none !important;
    }
    
    /* --- Aturan Reka Letak Utama --- */
    .page-container {
        display: flex; flex-direction: column; height: 100vh !important;
        width: 100% !important; max-width: none !important;
        padding: 1cm !important; margin: 0 !important;
    }
    .page-header { flex-shrink: 0; }
    main { flex-grow: 1; min-height: 0; }
    .page-footer { flex-shrink: 0; padding-top: 5px; }

    /* --- Strategi Jadual Muktamad --- */
    .schedule-table {
        width: 100%;
        height: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .schedule-table th,
    .schedule-table td {
        /* PEMBETULAN #1: Garisan lebih halus dan lembut */
        border: 0.5pt solid #555;
        padding: 0 !important;
        background-color: transparent !important;
        position: relative;
        text-align: center;
        vertical-align: middle;
    }

    /* PEMBETULAN #2: Kembalikan warna hijau pada header hari */
    .schedule-table thead th {
        box-shadow: inset 0 0 0 1000px var(--week-bg);
    }
    
    .week-number-cell {
        box-shadow: inset 0 0 0 1000px var(--week-col-bg);
    }

    .day-cell {
        box-shadow: inset 0 0 0 1000px var(--date-header-bg);
    }

    .day-cell.empty-cell {
        box-shadow: inset 0 0 0 1000px var(--empty-cell-bg);
    }

    /* --- Aturan untuk sel yang mempunyai tarikh --- */
    .day-cell .date-header {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 14pt;
        background-color: var(--date-header-bg);
    }
    
    .day-cell .lecture-content {
        position: absolute;
        top: 14pt; bottom: 0; left: 0; right: 0;
        background-color: #fff;
        padding: 0.5vmin;
    }

    /* --- Penyesuaian Saiz Fon & Posisi Teks (Final) --- */
    .title-container .title-main { font-size: 14pt; }
    .title-container .title-month { font-size: 28pt; }
    .schedule-table thead th { font-size: 9pt; font-weight: bold; }
    .week-number-cell { writing-mode: vertical-lr; transform: rotate(180deg); }
    
    .date-number { position: absolute; top: 2pt; left: 4pt; font-size: 9pt; z-index: 3; }
    .date-header { align-items: flex-start !important; z-index: 2; }
    .holiday-label { font-size: 6.5pt; float: right; margin-top: 2pt; margin-right: 4pt; }
    
    .lecture-content { font-size: 5pt; z-index: 2; }
    .lecture-time { font-size: 7pt; }
    .ustaz-name { font-size: 7pt; }
    .lecture-title { font-size: 6.5pt; }
    .empty-slot-text { font-size: 9pt; }
    .arabic-text { font-size: 18pt; }
    .yasin-title { font-size: 8pt; }
    .page-footer { font-size: 7pt; }
}