/* TWG Tunniplaan v3.0.0 Styles */
/* Colors: accent #E5A642, text #3B3D42, fonts: Source Sans 3, Roboto */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

.twg-tunniplaan-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    color: #3B3D42;
}

/* =========================
   Tab Navigation
   ========================= */
.twg-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    border-bottom: none;
    justify-content: flex-start;
}

.twg-tab {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    color: #3B3D42;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
    text-transform: none !important;
}

.twg-tab:hover {
    color: #E5A642;
    border-bottom-color: #E5A642;
}

.twg-tab.twg-tab-active {
    color: #E5A642;
    border-bottom-color: #E5A642;
    font-weight: 600;
}

/* Override theme button hover for tabs */
.twg-tunniplaan-wrapper .twg-tabs button.twg-tab,
.twg-tunniplaan-wrapper .twg-tabs button.twg-tab:hover,
.twg-tunniplaan-wrapper .twg-tabs button.twg-tab:focus,
.twg-tunniplaan-wrapper .twg-tabs button.twg-tab:active,
.twg-tunniplaan-wrapper .twg-tabs button.twg-tab.twg-tab-active,
.twg-tunniplaan-wrapper .twg-tabs button.twg-tab.twg-tab-active:hover {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =========================
   Class Grid
   ========================= */
.twg-class-grid {
    border-collapse: separate;
    border-spacing: 4px;
    margin: 0 auto 30px auto;
}

.twg-class-grid td {
    width: 52px;
    height: 44px;
    text-align: center;
    vertical-align: middle;
    background: #f4f0eb;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0;
    transition: all 0.15s ease;
}

.twg-class-grid td:not(:has(a)) {
    background: #fafafa;
    border-color: #eee;
}

.twg-class-grid a.twg-class-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: underline;
    text-decoration-color: #ccc;
    text-underline-offset: 2px;
    color: #3B3D42;
    font-weight: 500;
    font-size: 15px;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    transition: all 0.15s ease;
    border-radius: 4px;
}

.twg-class-grid a.twg-class-link:hover,
.twg-class-grid a.twg-class-link.active {
    background: #E5A642;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(229, 166, 66, 0.35);
}

/* =========================
   Teacher/Room Item Grid
   ========================= */
.twg-item-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 30px 0;
}

.twg-item-grid .twg-item-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 44px;
    padding: 0 14px;
    background: #f4f0eb;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #3B3D42;
    text-decoration: underline;
    text-decoration-color: #ccc;
    text-underline-offset: 2px;
    font-weight: 500;
    font-size: 15px;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    transition: all 0.15s ease;
    cursor: pointer;
}

.twg-item-grid .twg-item-link:hover,
.twg-item-grid .twg-item-link.active {
    background: #E5A642;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(229, 166, 66, 0.35);
}

/* =========================
   Timetable Container (rendered HTML, no iframe)
   ========================= */
.twg-timetable-container {
    margin-bottom: 30px;
}

/* =========================
   Rendered Timetable View
   ========================= */
.twg-tt-view {
    font-family: "Source Sans 3", "Roboto", sans-serif;
}

/* Header: class title + nav */
.twg-tt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.twg-tt-class-title {
    font-size: 26px;
    font-weight: 700;
    color: #3B3D42;
    font-family: "Source Sans 3", "Roboto", sans-serif;
}

.twg-tt-teacher-name {
    font-weight: 400;
    font-size: 18px;
    color: #7a7068;
}

.twg-tt-nav {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.twg-tt-nav-link {
    font-size: 14px;
    color: #E5A642;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
    font-family: "Source Sans 3", "Roboto", sans-serif;
}

.twg-tt-nav-link:hover {
    color: #d4952e;
    text-decoration: underline;
}

.twg-tt-nav-disabled {
    font-size: 14px;
    color: #ccc;
    font-weight: 500;
    cursor: default;
}

/* Table wrapper - horizontal scroll if needed */
.twg-tt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}

.twg-tt-table-wrap::-webkit-scrollbar {
    height: 10px;
}
.twg-tt-table-wrap::-webkit-scrollbar-track {
    background: #f0ebe4;
    border-radius: 5px;
}
.twg-tt-table-wrap::-webkit-scrollbar-thumb {
    background: #E5A642;
    border-radius: 5px;
}
.twg-tt-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: #E5A642 #f0ebe4;
}

/* The timetable table */
.twg-tt-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #d4cfc7;
}

.twg-tt-table thead th {
    background: #f9f5ef;
    border: 1px solid #d4cfc7;
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: #3B3D42;
    font-family: "Source Sans 3", "Roboto", sans-serif;
}

.twg-tt-th-period {
    width: 100px;
}

.twg-tt-th-day {
    width: auto;
}

/* Period cell (left column) */
.twg-tt-period-cell {
    border: 1px solid #d4cfc7;
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
    background: #f9f5ef;
}

.twg-tt-period-label {
    font-weight: 600;
    font-size: 13px;
    color: #3B3D42;
    line-height: 1.3;
}

.twg-tt-period-time {
    font-size: 11px;
    color: #7a7068;
    margin-top: 2px;
    line-height: 1.2;
}

/* Day cells */
.twg-tt-day-cell {
    border: 1px solid #d4cfc7;
    padding: 6px 8px;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.15s;
}

.twg-tt-empty-cell {
    background: #fff;
}

/* Lesson block (two-line layout: subject + teacher/room) */
.twg-tt-lesson {
    padding: 2px 0;
}

.twg-tt-subject {
    font-weight: 600;
    font-size: 13px;
    color: #3B3D42;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twg-tt-lesson-meta {
    font-size: 11px;
    color: #7a7068;
    line-height: 1.2;
    margin-top: 1px;
}

.twg-tt-lesson-teacher {
    margin-right: 4px;
}

.twg-tt-lesson-room {
    font-style: italic;
}

/* Split lessons (multiple in same cell) */
.twg-tt-lesson-split {
    padding: 3px 0;
}

.twg-tt-lesson-divider {
    height: 1px;
    background: #d4cfc7;
    margin: 3px 0;
}

/* Põhitund row highlight */
.twg-tt-row-pohitund .twg-tt-period-cell {
    background: #f0ece4;
}

.twg-tt-row-pohitund .twg-tt-day-cell {
    font-weight: 600;
}

/* =========================
   Footer and Actions
   ========================= */
.twg-tt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.twg-tt-modified {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

.twg-tt-actions {
    display: flex;
    gap: 12px;
}

.twg-tt-action-link {
    font-size: 13px;
    color: #E5A642;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.twg-tt-action-link:hover {
    text-decoration: underline;
    color: #d4952e;
}

/* Bottom navigation buttons */
.twg-tt-bottom-nav {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

.twg-tt-bottom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid #E5A642;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.twg-tt-btn-rooms {
    background: #E5A642;
    color: #fff;
}

.twg-tt-btn-rooms:hover {
    background: #d4952e;
    color: #fff;
}

.twg-tt-btn-classes {
    background: #fff;
    color: #E5A642;
}

.twg-tt-btn-classes:hover {
    background: #E5A642;
    color: #fff;
}

/* =========================
   Loading & Error States
   ========================= */
.twg-tt-loading {
    text-align: center;
    padding: 60px 20px;
    font-size: 16px;
    color: #7a7068;
    font-family: "Source Sans 3", "Roboto", sans-serif;
}

.twg-tt-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f0ebe4;
    border-top-color: #E5A642;
    border-radius: 50%;
    animation: twg-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes twg-spin {
    to { transform: rotate(360deg); }
}

.twg-tt-error {
    text-align: center;
    padding: 40px 20px;
    font-size: 15px;
    color: #c44;
    font-family: "Source Sans 3", "Roboto", sans-serif;
}

/* =========================
   Legacy iframe container (teachers/rooms)
   ========================= */
.twg-iframe-container {
    margin-bottom: 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.twg-iframe-container::-webkit-scrollbar {
    height: 14px;
}
.twg-iframe-container::-webkit-scrollbar-track {
    background: #f0ebe4;
    border-radius: 7px;
}
.twg-iframe-container::-webkit-scrollbar-thumb {
    background: #E5A642;
    border-radius: 7px;
    border: 2px solid #f0ebe4;
}
.twg-iframe-container {
    scrollbar-width: auto;
    scrollbar-color: #E5A642 #f0ebe4;
}

.twg-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    padding: 9px 20px;
    background: #fff;
    border: 1px solid #E5A642;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #E5A642;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    font-weight: 500;
    transition: all 0.15s ease;
    letter-spacing: 0.3px;
}

.twg-back-btn:hover {
    background: #E5A642;
    color: #fff;
}

.twg-timetable-iframe {
    min-width: 1300px;
    min-height: 500px;
    border: 1px solid #e0dcd6;
    border-radius: 6px;
    background: #fff;
}

/* =========================
   Tundide ajad - Lesson Times Table
   ========================= */
.twg-lesson-times {
    margin-top: 50px;
}

.twg-lesson-times h3 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #3B3D42;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    font-weight: 600;
}

.twg-times-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid #7a7068;
    border-radius: 6px;
    overflow: hidden;
}

.twg-times-table th {
    background: #f9f5ef;
    border: 1px solid #7a7068;
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    font-family: "Source Sans 3", "Roboto", sans-serif;
    color: #3B3D42;
}

.twg-times-table td {
    border: 1px solid #7a7068;
    padding: 8px 12px;
    text-align: center;
    vertical-align: middle;
    color: #3B3D42;
}

.twg-times-table .twg-time-highlight td {
    background: #f0ece4;
    font-weight: 500;
}

.twg-times-table .twg-lunch-highlight {
    background: #fdf3e3;
    color: #b8860b;
    font-weight: 500;
}

.twg-inner-table {
    width: 100%;
    border-collapse: collapse;
}

.twg-inner-table td {
    border: none;
    border-right: 1px solid #7a7068;
    padding: 4px 8px;
    font-size: 12px;
    width: 50%;
}

.twg-inner-table td:last-child {
    border-right: none;
}

/* =========================
   Print Styles
   ========================= */
@media print {
    /* Hide everything on the page by default */
    body > *:not(#page),
    #masthead,
    #colophon,
    .skip-link,
    .jet-engine-query-edit-modal {
        display: none !important;
    }

    /* Hide plugin UI elements not relevant to the printed timetable */
    .twg-tabs,
    .twg-tt-nav,
    .twg-tt-bottom-nav,
    .twg-tt-actions,
    .twg-tt-footer,
    .twg-lesson-times,
    .twg-back-btn,
    .twg-iframe-container,
    .twg-class-grid,
    .twg-tab-content.twg-tab-klasside,
    .twg-tab-content.twg-tab-opetajate,
    .twg-tab-content.twg-tab-ruumide,
    .twg-item-grid {
        display: none !important;
    }

    /* Ensure the path from body to .twg-tt-view is visible */
    #page,
    #content,
    .elementor,
    .elementor-element,
    .e-con-inner,
    .elementor-shortcode,
    .twg-tunniplaan-wrapper,
    .twg-timetable-container,
    #twg-timetable-content,
    .twg-tt-view {
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Reset body and page background for print */
    body {
        background: white !important;
    }

    /* Hide non-timetable siblings along the DOM path */
    #page > *:not(#content),
    #content > *:not(.elementor),
    .elementor > .elementor-element:not(:has(.twg-tunniplaan-wrapper)) {
        display: none !important;
    }

    /* Timetable container should be visible */
    .twg-timetable-container {
        display: block !important;
    }

    /* Table styling for print */
    .twg-tt-table {
        min-width: auto;
        font-size: 10px;
        width: 100%;
        border-collapse: collapse;
    }

    .twg-tt-table-wrap {
        overflow: visible !important;
    }

    /* Header with class title */
    .twg-tt-header {
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    .twg-tt-class-title {
        font-size: 20px;
        color: #000 !important;
    }

    .twg-tt-teacher-name {
        color: #555 !important;
    }

    /* Preserve cell colors for print */
    .twg-tt-day-cell {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .twg-tt-th-day {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .twg-tt-period-cell {
        background: #fafafa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    .twg-tt-modified {
        display: none !important;
    }

    @page {
        margin: 10mm;
        size: landscape;
    }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px) {
    .twg-tunniplaan-wrapper {
        overflow-x: auto;
    }

    .twg-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .twg-tab {
        font-size: 13px;
        padding: 8px 14px;
    }

    .twg-tt-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .twg-tt-class-title {
        font-size: 20px;
    }

    .twg-tt-nav {
        gap: 10px;
    }

    .twg-tt-table {
        min-width: 600px;
    }

    .twg-tt-bottom-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .twg-timetable-iframe {
        min-height: 400px;
    }

    .twg-times-table {
        font-size: 11px;
    }

    .twg-class-grid td {
        width: 44px;
        height: 38px;
    }

    .twg-item-grid .twg-item-link {
        min-width: 44px;
        height: 38px;
        padding: 0 10px;
        font-size: 13px;
    }
}


/* ============================================
   v3.1.0 Client overrides
   ============================================ */

/* --- Tundide ajad: heading bigger, matches site subheadings --- */
.twg-lesson-times h3 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #3B3D42 !important;
    margin: 24px 0 14px !important;
    line-height: 1.3 !important;
}

/* --- Tundide ajad: outer border + dark text --- */
.twg-lesson-times .twg-times-table {
    border: 2px solid #3B3D42 !important;
    border-collapse: collapse !important;
    color: #3B3D42 !important;
    width: 100% !important;
    font-size: 14px !important;
}

.twg-lesson-times .twg-times-table th,
.twg-lesson-times .twg-times-table td {
    color: #3B3D42 !important;
    border: 1px solid #3B3D42 !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
    background: #ffffff;
}

/* Header row (1.-7., 8., 9.-12. labels) */
.twg-lesson-times .twg-times-table thead th {
    background: #F0ECE4 !important;
    color: #3B3D42 !important;
    font-weight: 700 !important;
}

/* Lesson rows (have .twg-time-highlight class on the row OR on individual tds via PHP) */
.twg-lesson-times .twg-times-table tr.twg-time-highlight > td,
.twg-lesson-times .twg-times-table td.twg-time-highlight {
    background: #F9F5EF !important;
    font-weight: 600 !important;
}

/* All lunches: orange tint, dark text — matches client's request */
.twg-lesson-times .twg-times-table .twg-lunch-highlight {
    background: #FDE3B3 !important;
    color: #3B3D42 !important;
    font-weight: 600 !important;
}

/* Inner-table (the cells split per sub-class) — make divider thinner & softer */
.twg-lesson-times .twg-inner-table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0 !important;
}
.twg-lesson-times .twg-inner-table td {
    border: none !important;
    border-right: 1px solid #cbc6bc !important;
    padding: 6px 8px !important;
    background: inherit;
}
.twg-lesson-times .twg-inner-table td:last-child {
    border-right: none !important;
}

/* --- Group divider (vertical split inside lesson cell) — make narrower not full-height --- */
.twg-tt-day-cell .twg-inner-table td {
    border-right: 1px solid #b9b3a8 !important;
    padding: 4px 6px !important;
    position: relative;
}
.twg-tt-day-cell .twg-inner-table td:last-child {
    border-right: none !important;
}
/* Replace full-height border with a centered short divider */
.twg-tt-day-cell .twg-inner-table {
    border-collapse: collapse !important;
}
.twg-tt-day-cell .twg-inner-table td:not(:last-child) {
    border-right: none !important;
    box-shadow: 1px 0 0 #b9b3a8;
    /* fallback */
}
@supports (clip-path: inset(20% 0)) {
    .twg-tt-day-cell .twg-inner-table td:not(:last-child) {
        box-shadow: none;
        background-image: linear-gradient(#b9b3a8, #b9b3a8);
        background-position: right center;
        background-size: 1px 60%;
        background-repeat: no-repeat;
    }
}

/* --- Õpetaja/Ruumi tabel: remove faint horizontal lines on inner content --- */
.twg-iframe-container hr,
.twg-iframe-container table tr td hr,
.twg-iframe-container .row-divider {
    display: none !important;
}
.twg-iframe-container iframe {
    margin: 0 auto !important;
    display: block !important;
}

/* --- Õpetaja/Ruumi: hide horizontal scrollbar when not needed; center on narrow screens --- */
.twg-iframe-container {
    overflow-x: auto;
    text-align: center;
}
@media (max-width: 900px) {
    .twg-iframe-container {
        overflow-x: hidden;
    }
    .twg-iframe-container iframe {
        max-width: 100%;
        width: 100% !important;
    }
}

/* --- Stronger text color across the plugin (replaces faded gray) --- */
.twg-tunniplaan-wrapper,
.twg-tunniplaan-wrapper .twg-tt-day-cell,
.twg-tunniplaan-wrapper .twg-tt-period-label,
.twg-tunniplaan-wrapper .twg-tt-time-label,
.twg-tunniplaan-wrapper .twg-tt-table thead th,
.twg-tunniplaan-wrapper .twg-tt-period-cell {
    color: #3B3D42 !important;
}
.twg-tunniplaan-wrapper .twg-tt-time-label {
    color: #5a5d63 !important;
}