.modern-timetable {
    --mt-border: #cfd8e6;
    --mt-border-strong: #aebbd0;
    --mt-header: #252525;
    --mt-cell: #ffffff;
    --mt-cell-alt: #f8fafc;
    --mt-text: #ffffff;
    --mt-legend-text: #252525;
    --mt-muted: #667085;
    color: var(--mt-text);
    font-family: inherit;
    margin: 35px 0;
    max-width: 100%;
}

/* ── Legend ── */
.modern-timetable__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 16px;
    align-items: center;
}
.modern-timetable__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mt-legend-text);
}
.modern-timetable__legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Desktop table ── */
.modern-timetable__table-wrap {
    max-width: 100%;
    overflow-x: auto;
}
.modern-timetable__table {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    min-width: 980px;
    table-layout: fixed;
    width: 100%;
}
.modern-timetable__table th,
.modern-timetable__table td {
    vertical-align: top;
    width: 14.285%;
}
.modern-timetable__table th:last-child,
.modern-timetable__table td:last-child { border-right: 0; }
.modern-timetable__table tr:last-child td { border-bottom: 0; }
.modern-timetable__table th {
    background: var(--mt-header);
    color: #ffffff;
    font-weight: 800;
    line-height: 1.2;
    padding: 14px 16px;
    text-align: center;
}
.modern-timetable__table th.mt-today-col {
    background: #dd3131;
}
.modern-timetable__table th:not(:last-child) { border-right: 2px solid #fff; }
.modern-timetable__day-name,
.modern-timetable__day-date { display: block; }
.modern-timetable__day-name {
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.modern-timetable__day-date {
    color: #9aa5b4;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}
.modern-timetable__table td {
    background: var(--mt-cell);
    padding: 12px 14px;
}
.modern-timetable__table td:nth-child(even) { background: var(--mt-cell-alt); }
.modern-timetable__table td.mt-today-col { background: #eff6ff; }

/* ── Event card (shared desktop + mobile) ── */
.modern-timetable__cell-event {
    border-left: 4px solid #0f766e;
    border-radius: 5px;
    display: grid;
    gap: 4px;
    margin: 0 0 10px;
    min-height: 100px;
    padding: 12px;
    position: relative;
}
.modern-timetable__cell-event:last-child { margin-bottom: 0; }
.modern-timetable__cell-event strong,
.modern-timetable__organizer,
.modern-timetable__time,
.modern-timetable__duration { display: block; overflow-wrap: anywhere; }
.modern-timetable__cell-event strong { font-size: 15px; font-weight: 800; line-height: 1.25; }
.modern-timetable__organizer { color: var(--mt-muted); font-size: 13px; font-weight: 600; line-height: 1.25; }
.modern-timetable__time { font-size: 12px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.modern-timetable__duration { font-size: 11px; font-weight: 600; line-height: 1.25; opacity: 0.8; }

/* ── Clickable event card (opens details popup) ── */
.modern-timetable__cell-event--clickable {
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.modern-timetable__cell-event--clickable:hover,
.modern-timetable__cell-event--clickable:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}
.modern-timetable__cell-event--clickable:focus-visible {
    outline: 2px solid #172033;
    outline-offset: 2px;
}
.modern-timetable__details-hint {
    align-items: center;
    color: var(--mt-legend-text);
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    gap: 4px;
    letter-spacing: 0.03em;
    margin-top: 2px;
    opacity: 0.65;
    text-transform: uppercase;
}
.modern-timetable__details-hint::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm.75 15h-1.5v-1.5h1.5V17zm0-3h-1.5V7h1.5v7z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm.75 15h-1.5v-1.5h1.5V17zm0-3h-1.5V7h1.5v7z'/></svg>") no-repeat center / contain;
}


/* ── Blank slot ── */
.modern-timetable__blank {
    background-image: linear-gradient(135deg, rgba(174,187,208,.22) 25%, transparent 25%, transparent 50%, rgba(174,187,208,.22) 50%, rgba(174,187,208,.22) 75%, transparent 75%);
    background-size: 10px 10px;
    border: 1px dashed #d4dce9;
    border-radius: 5px;
    display: block;
    min-height: 100px;
}

/* ── Empty state ── */
.modern-timetable__empty {
    background: #f8fafc;
    border: 1px dashed var(--mt-border-strong);
    border-radius: 6px;
    color: var(--mt-muted);
    padding: 24px;
    text-align: center;
}

/* ════════════════════════════════════════
   Mobile slider  (built by JS, shown ≤700px)
   ════════════════════════════════════════ */
.mt-mobile { display: none; }

/* ── Nav bar ── */
.mt-slider__nav {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
.modern-timetable__mobile-title {
    flex: 1;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    color: #252525;
    line-height: 1.2;
}
.modern-timetable__mobile-date {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mt-muted);
    margin-top: 2px;
}

/* ── Arrow buttons ── */
.modern-timetable__prev,
.modern-timetable__next {
    align-items: center;
    background: #252525;
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    transition: opacity 0.15s, background 0.15s;
    width: 44px;
    -webkit-tap-highlight-color: transparent;
}
.modern-timetable__prev:hover,
.modern-timetable__next:hover { opacity: 0.75; }
.modern-timetable__prev:active,
.modern-timetable__next:active { background: #444; }
.modern-timetable__prev:disabled,
.modern-timetable__next:disabled { opacity: 0.25; cursor: default; }

/* ── Today badge in nav ── */
.mt-today-badge {
    display: inline-block;
    background: #d76f6f5a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 0.04em;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ── Panels ── */
.mt-slider { position: relative; overflow: hidden; }
.mt-slider__panel { display: none; }
.mt-slider__panel.mt-active { display: block; }

.mt-slider__heading {
    background-color: var(--mt-header);
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: .5rem;
}

.mt-slider__heading .modern-timetable__prev,
.mt-slider__heading .modern-timetable__next {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.3rem;
}

.mt-slider__heading.mt-today-heading {
    background: #ef6464;
}
.mt-slider__heading-content {
    text-align: center;
}
.mt-slider__body {
    background: #fff;
    border-radius: 0 0 6px 6px;
    padding: 16px;
    padding-bottom: 50px;
    /* Give touch room: no clipping needed, cards already have margin */
}

/* Mobile event card tweaks */
.mt-slider__body .modern-timetable__cell-event {
    min-height: 80px;
    padding: 14px 14px 14px 16px;
    border-left-width: 5px;
    /* Make tooltip tap-accessible on mobile */
}
.mt-slider__body .modern-timetable__cell-event strong {
    font-size: 16px;
}
.mt-slider__body .modern-timetable__organizer {
    font-size: 14px;
}
.mt-slider__body .modern-timetable__time {
    font-size: 13px;
}
.mt-slider__body .modern-timetable__duration {
    font-size: 12px;
}

/* Tooltip on mobile: tap to open */
.mt-slider__body .modern-timetable__hover {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}

/* ── Dots ── */
.mt-slider__dots {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
}
.modern-timetable__dot {
    background: #cfd8e6;
    border-radius: 999px;
    height: 6px;
    transition: background 0.2s, width 0.2s;
    width: 6px;
    flex-shrink: 0;
    cursor: pointer;
}
.modern-timetable__dot:hover { background: #8898aa; }
.modern-timetable__dot--active { background: #252525; width: 18px; }
.modern-timetable__dot--today  { background: #1a56db; }
.modern-timetable__dot--today.modern-timetable__dot--active { background: #1a56db; width: 18px; }

body.mt-modal-open{
    overflow:hidden;
}

.modern-timetable-modal{
    position:fixed;
    inset:0;
    z-index:99999;
}

.modern-timetable-modal[hidden]{
    display:none;
}

.modern-timetable-modal__overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(3px);
}

.modern-timetable-modal__dialog{
    position:relative;
    max-width:560px;
    width:calc(100% - 32px);
    margin:60px auto;
    background:#1c1c1c;
    color:#fff;
    border-radius:18px;
    padding:32px;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    animation:mtModal .25s ease;
}

@keyframes mtModal{

    from{

        opacity:0;
        transform:translateY(15px) scale(.97);

    }

    to{

        opacity:1;
        transform:translateY(0) scale(1);

    }

}

.modern-timetable-modal__close{

    position:absolute;
    top:18px;
    right:18px;
    border:0;
    background:none;
    color:#999;
    font-size:32px;
    cursor:pointer;
    line-height:1;

}

.modern-timetable-modal__close:hover{

    color:#fff;

}

.modern-timetable-modal__title{

    margin:0 0 30px;
    font-size:30px;
    font-weight:700;

}

.modern-timetable-modal__section{

    margin-bottom:22px;

}

.modern-timetable-modal__label{

    display:block;
    margin-bottom:6px;
    color:#8b8b8b;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
    font-weight:600;

}

.modern-timetable-modal__section p{

    margin:0;
    line-height:1.7;
    color:#ddd;

}

.modern-timetable-modal__section a{

    color:#fff;
    text-decoration:none;

}

.modern-timetable-modal__section a:hover{

    color:#e30613;

}

.modern-timetable-modal__button{

    display:block;
    width:100%;
    margin-top:28px;
    padding:16px;
    text-align:center;
    text-decoration:none;
    background:#e30613;
    color:#fff;
    border-radius:10px;
    font-weight:600;
    transition:.25s;

}

.modern-timetable-modal__button:hover{

    background:#ff2436;
    color:#fff;

}

@media(max-width:640px){

    .modern-timetable-modal__dialog{

        margin:20px auto;
        padding:24px;

    }

    .modern-timetable-modal__title{

        font-size:24px;

    }

}

/* ── Slide animations ── */
@keyframes mt-slide-right {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mt-slide-left {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mt-slide-right { animation: mt-slide-right 0.2s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.mt-slide-left  { animation: mt-slide-left  0.2s cubic-bezier(0.25,0.46,0.45,0.94) both; }

/* ── Responsive switch ── */
@media (max-width: 700px) {
    .mt-mobile                        { display: block; }
    .modern-timetable__table-wrap     { display: none; }
    .modern-timetable__legend         { margin-bottom: 12px; }
}