/* public/time/style.css - VERSION 64 (PRINT SCALING FIX & CLEANUP) */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Readex Pro', sans-serif;
    background-color: #101010; 
    color: #FFFFFF;
    margin: 0;
    padding: 20px 10px;
    direction: rtl; 
}

/* Pääasettelu (Sayegh-tyyli ylhäällä, tapahtumat alhaalla) */
.main-wrapper {
    display: flex; flex-direction: column; gap: 30px; max-width: 1100px; margin: 0 auto;
}

/* SAYEGH WIDGET (Päälaatikko) */
.sayegh-theme {
    background-color: #FFFFFF !important;
    border-radius: 20px; padding: 40px; color: #4D3A29;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); width: 100%;
}

/* Yläosan työkalut & Napit */
.s-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
.s-lang-select button { background: none; border: 1px solid #ccc; color: #666; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 0.85rem; font-family: inherit; }
.s-lang-select button:hover { background: #f0f0f0; }
.s-city-select { display: flex; align-items: center; gap: 8px; color: #4D3A29; font-size: 1.1rem; font-weight: bold; }
.s-city-select select { background: transparent; border: none; color: #4D3A29; font-family: inherit; font-size: 1.1rem; font-weight: bold; outline: none; cursor: pointer; border-bottom: 1px dashed #ccc; }

.s-top-actions { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
.s-btn-outline { border: 1px solid #CCA451; color: #CCA451; background: transparent; padding: 10px 25px; border-radius: 25px; font-weight: bold; cursor: pointer; text-decoration: none; font-size: 1rem; transition: 0.2s; }
.s-btn-outline:hover { background: #CCA451; color: #fff; }

/* Päivämäärät */
.s-location-title { text-align: center; color: #666; font-size: 1rem; margin-bottom: 5px; font-weight: bold; }
.s-day-title { text-align: center; color: #CCA451; font-size: 3rem; font-weight: 700; margin: 0 0 20px 0; }
.s-dates-container { display: flex; justify-content: center; align-items: center; gap: 50px; margin-bottom: 40px; }
.s-date-block { text-align: center; line-height: 1.5; }
.s-date-ar { font-size: 1.5rem; font-weight: 700; color: #4D3A29; }
.s-date-en { font-size: 1.1rem; font-weight: 400; color: #000; }
.s-divider { width: 1px; height: 50px; background-color: #d8d8d8; }

/* 3 KORTTIA GRID - PC:llä vierekkäin */
.s-cards-grid { display: grid; gap: 20px; margin-bottom: 40px; }
@media (min-width: 900px) { .s-cards-grid { grid-template-columns: repeat(3, 1fr); } }

.s-card { background-color: #FCF6EC; border-radius: 16px; padding: 30px 20px; text-align: center; border: 1px solid #f2e9d8; }
.s-icon { font-size: 2.5rem; color: #CCA451; margin-bottom: 15px; }
.s-card h3 { font-size: 1.3rem; font-weight: 700; color: #4D3A29; margin: 0 0 10px 0; }
.s-main-time { font-size: 3.2rem; color: #CCA451; font-weight: 600; margin-bottom: 30px; letter-spacing: 1px; }
.s-times-list { display: flex; flex-direction: column; gap: 15px; }
.s-row { display: flex; justify-content: space-between; font-size: 1.05rem; font-weight: 600; color: #4D3A29; }
.s-row span:last-child { color: #CCA451; }

/* Säännöt */
.s-rules-box { background: #fcfcfc; padding: 20px; border-radius: 12px; border: 1px solid #eee; margin-bottom: 30px; text-align: right; }

/* Qibla */
.s-qibla { text-align: center; color: #4D3A29; margin-top: 20px; }
.s-qibla h4 { color: #CCA451; margin-bottom: 15px; font-size: 1.2rem; }
.s-compass-wrap { width: 100px; height: 100px; background: #fff; border: 2px solid #CCA451; border-radius: 50%; margin: 0 auto 10px auto; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: inset 0 0 10px rgba(0,0,0,0.1); }
.s-compass-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 45px solid #CCA451; position: absolute; top: 15px; transition: transform 0.1s; transform-origin: 50% 100%; }

/* Tapahtumat (Alapuolella koko leveydellä) */
.events-container { background: #1A1A1A; border-radius: 20px; padding: 30px; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 100%; }
.event-box.today { background: #252525; padding: 15px; border-radius: 12px; border-right: 4px solid #CCA451; margin-bottom: 20px; }
.event-box.today .event-date { color: #CCA451; font-weight: bold; display: block; margin-bottom: 5px; font-size: 1.1rem; }
.upcoming-event-row { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid #333; }
.upcoming-event-row .date { color: #CCA451; font-weight: bold; font-size: 0.95rem; }
.upcoming-event-row .desc { color: #ddd; font-size: 0.95rem; margin-top: 3px; }

/* =========================================
   KUUKAUSIKALENTERI (MODAALI)
   ========================================= */
.calendar-container {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #ffffff; z-index: 1000000; padding: 20px; overflow-y: auto; color: #4D3A29;
}

/* Yksinkertaistettu kalenterin yläosa */
.calendar-header { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px; max-width: 900px; margin-left: auto; margin-right: auto; }
.calendar-title-group { display: flex; align-items: center; gap: 20px; }
.calendar-header h3 { font-size: 2.2rem; color: #CCA451; margin: 0; font-weight: bold; }
.nav-btn { background: #f0f0f0; border: none; font-size: 1.5rem; color: #333; cursor: pointer; padding: 5px 15px; border-radius: 5px; transition: 0.2s; }
.nav-btn:hover { background: #ddd; }

.calendar-actions { display: flex; gap: 15px; }
.calendar-actions button { background: #CCA451; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 1rem; transition: 0.2s; }
.calendar-actions button:hover { opacity: 0.9; }
#close-calendar-btn { background: #4D3A29; } 

/* Kalenteritaulukko */
.calendar-grid-wrapper { max-width: 900px; margin: 0 auto; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.s-calendar-table { width: 100%; border-collapse: collapse; text-align: center; }
.s-calendar-table th { background-color: #CCA451; color: #fff; padding: 12px 5px; font-weight: bold; font-size: 1rem; border: 1px solid #b89042; }
.s-calendar-table td { padding: 10px 5px; border: 1px solid #eee; font-size: 0.95rem; color: #333; }
.s-calendar-table tr:nth-child(even) { background-color: #fdfdfd; }
.s-calendar-table tr.today td { background-color: #FCF6EC; font-weight: bold; color: #CCA451; border-bottom: 2px solid #CCA451; }

.print-header { display: none; text-align: center; margin-bottom: 10px; }
.print-header img { max-width: 80px; border-radius: 50%; }
.print-header h3 { color: #CCA451; margin: 5px 0; font-size: 1.2rem; }
.print-header h4 { color: #4D3A29; margin: 0; font-size: 1.4rem; }

/* Responsiivisuus Pienille Ruuduille */
@media (max-width: 900px) {
    .s-dates-container { flex-direction: column; gap: 15px; }
    .s-divider { width: 60px; height: 1px; }
    .sayegh-theme { padding: 20px !important; }
    .calendar-container { padding: 10px; }
    .s-calendar-table th { font-size: 0.8rem; padding: 8px 2px; }
    .s-calendar-table td { font-size: 0.85rem; padding: 6px 2px; }
    .s-top-actions { flex-direction: column; gap: 10px; width: 100%; }
    .s-btn-outline { width: 100%; text-align: center; }
}

/* =========================================
   TULOSTUSNÄKYMÄ (@media print) - AGGRESSIIVINEN SOVITUS
   ========================================= */
@media print {
    /* Määritellään sivun koko ja poistetaan selaimen marginaalit */
    @page { size: A4 portrait; margin: 0.5cm; }

    /* Piilotetaan KAIKKI turha täysin */
    body * { visibility: hidden !important; }
    body, html { background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; }
    
    /* Pakotetaan kalenterin kontti näkyviin ja palautetaan normaali block-tila */
    .calendar-container {
        visibility: visible !important; position: static !important;
        left: 0; top: 0; width: 100% !important; height: auto !important;
        display: block !important; padding: 0 !important; margin: 0 !important; overflow: visible !important;
    }
    
    .calendar-container * { visibility: visible !important; }
    
    /* Piilotetaan navigaatio ja napit tulosteesta */
    .calendar-header { display: none !important; }
    .calendar-actions, .nav-btn, #prev-month, #next-month { display: none !important; }

    /* Otsikko tulosteelle */
    .print-header { display: block !important; margin-bottom: 5px !important; }
    .print-header img { max-width: 60px !important; }
    .print-header h3 { font-size: 12pt !important; margin: 2px 0 !important; color: #000 !important; }
    .print-header h4 { font-size: 16pt !important; color: #000 !important; }

    /* TAULUKON AGGRESSIIVINEN SOVITUS: 
       Käytetään transformia skaalaamaan taulukko taatusti sivulle */
    .calendar-grid-wrapper {
        border: none !important; margin: 0 !important; padding: 0 !important;
        width: 100% !important; max-width: 100% !important;
        transform: scale(0.95); /* Pienentää koko taulukon 95% kokoon */
        transform-origin: top center; /* Kutistuu ylhäältä keskeltä */
    }

    .s-calendar-table { 
        width: 100% !important; border-collapse: collapse !important; border: 2px solid #000 !important; 
    }
    .s-calendar-table th { 
        background-color: #eee !important; color: #000 !important; border: 1px solid #000 !important; 
        -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; 
        padding: 4px !important; font-size: 10pt !important; font-weight: bold !important;
    }
    .s-calendar-table td { 
        border: 1px solid #999 !important; padding: 3px !important; font-size: 9pt !important; color: #000 !important; 
    }

    .s-calendar-table tr:nth-child(even) { background-color: transparent !important; }
    
    /* Sääntöjen pakotus yksinkertaiseksi listaksi */
    #s-rules-box-print { border: none !important; border-top: 1px solid #000 !important; margin-top: 5px !important; padding: 5px 0 !important; text-align: right !important; }
    #s-rules-box-print h4 { color: #000 !important; font-size: 10pt !important; margin-bottom: 3px !important;}
    #s-rules-box-print ul li { font-size: 8pt !important; color: #000 !important; margin-bottom: 2px !important; line-height: 1.2 !important; }
}