/* Event Schedule V3 — refined desktop two-column + mobile two-screen.
   Recreates claude/designs/design_handoff_event_schedule (event-schedule-v3.css)
   in the CareerEco Fair Event Day Schedule view. Handoff-only tokens are scoped
   to .es so they do not leak into the rest of the page. */
.es {
    /* design tokens (scoped) */
    --ce-darkblue: #194c79;
    --ce-darkblue-700: #143e62;
    --ce-darkblue-50: #eef4fa;
    --ce-blue: #23a5de;
    --ce-green: #84c442;
    --ce-green-700: #6ba834;
    --ce-green-50: #f1f9e7;
    --ce-orange: #df6228;
    --ce-gray-50: #f4f5f6;
    --ce-gray-100: #ececeb;
    --ce-border: #e2e4e7;
    --ce-border-strong: #d3d6da;
    --ce-font: #2b2d31;
    --ce-muted: #6b6e76;
    --es-radius-sm: 6px;
    --es-radius: 10px;
    --es-radius-lg: 14px;

    font-family: 'Roboto', system-ui, sans-serif;
    color: var(--ce-font);
    background: #fff;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

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

/* ---------- header ---------- */
.es-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

    .es-h h3 {
        margin: 0;
        font-size: 22px;
        font-weight: 600;
        color: var(--ce-font);
    }

.es-dl {
    color: var(--ce-blue);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: 0;
    background: transparent;
    line-height: 0;
}

    .es-dl:hover {
        color: var(--ce-darkblue);
    }

.es-tz {
    margin-left: auto;
    font-size: 12.5px;
    font-style: italic;
    color: var(--ce-darkblue);
}

/* ---------- empty state ---------- */
.es-emptystate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px 64px;
    color: var(--ce-muted);
}

.es-emptystate__icon {
    color: var(--ce-border-strong);
    margin-bottom: 16px;
}

.es-emptystate__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ce-darkblue);
    margin-bottom: 6px;
}

.es-emptystate__sub {
    font-size: 13.5px;
    color: var(--ce-muted);
    max-width: 380px;
    line-height: 1.5;
}

/* ---------- desktop two-column ---------- */
.v3 {
    display: grid;
    grid-template-columns: 232px 1fr;
    gap: 22px;
    min-height: 0;
}

.v3-list {
    overflow: auto;
    max-height: 560px;
    border-right: 1px solid var(--ce-border);
    padding-right: 14px;
}

/* month header */
.v3-mhead {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--ce-darkblue);
    padding: 10px 6px 7px;
    margin-top: 2px;
    border-bottom: 2px solid var(--ce-green);
    margin-bottom: 4px;
}

    .v3-mhead .yr {
        color: var(--ce-muted);
        font-weight: 600;
        font-size: 13px;
    }

/* dot-timeline rows */
.v3-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--es-radius-sm);
    padding: 10px;
    cursor: pointer;
    margin-bottom: 1px;
    font-family: inherit;
}

    .v3-item::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--ce-border);
        z-index: 0;
    }

    .v3-item:hover {
        background: var(--ce-gray-100);
    }

    .v3-item.active {
        background: var(--ce-darkblue-50);
    }

.v3-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ce-border-strong);
    margin-left: 5px;
}

.v3-item:hover .v3-dot {
    border-color: var(--ce-green);
}

.v3-item.active .v3-dot {
    background: var(--ce-green-700);
    border-color: var(--ce-green-700);
    box-shadow: 0 0 0 4px var(--ce-green-50);
}

.v3-lbl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.v3-day {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

    .v3-day .num {
        font-size: 17px;
        font-weight: 800;
        color: var(--ce-font);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

.v3-item.active .v3-day .num {
    color: var(--ce-darkblue);
}

.v3-day .dow {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ce-muted);
}

.v3-noh {
    font-size: 11.5px;
    color: var(--ce-muted);
    font-style: italic;
    flex-shrink: 0;
}

.v3-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.v3-seldate {
    font-size: 15px;
    font-weight: 700;
    color: var(--ce-darkblue);
    margin-bottom: 10px;
}

.es .hidden {
    display: none !important;
}

/* toolbar */
.es-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.es-search,
.m-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ce-border-strong);
    border-radius: var(--es-radius-sm);
    padding: 7px 11px;
    min-width: 200px;
    color: var(--ce-muted);
}

    .es-search input,
    .m-search input {
        border: 0;
        outline: 0;
        font-family: inherit;
        font-size: 13px;
        flex: 1;
        min-width: 0;
        background: transparent;
        color: var(--ce-font);
    }

.es-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ce-font);
    cursor: pointer;
    user-select: none;
}

    /* visually-hidden native checkbox keeps it accessible/keyboard-operable */
    .es-toggle input[type="checkbox"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        overflow: hidden;
        white-space: nowrap;
    }

.es-switch {
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--ce-border-strong);
    position: relative;
    flex-shrink: 0;
}

    .es-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: left .15s;
    }

.es-toggle.on .es-switch {
    background: var(--ce-green-700);
}

    .es-toggle.on .es-switch::after {
        left: 16px;
    }

.es-toggle input[type="checkbox"]:focus-visible + .es-switch {
    outline: 2px solid var(--ce-darkblue);
    outline-offset: 2px;
}

/* day schedule table */
.ds {
    overflow: auto;
    border-top: 2px solid var(--ce-font);
}

.ds-org {
    border-bottom: 1px solid var(--ce-border);
}

.ds-orghead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px 9px;
}

    .ds-orghead .nm {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ce-darkblue);
    }

.ds-room {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 8px 4px 8px 16px;
    border-top: 1px dashed var(--ce-border);
}

    .ds-room .rn {
        font-size: 13.5px;
        color: var(--ce-font);
    }

    .ds-room .rt {
        text-align: right;
        font-size: 13px;
        color: var(--ce-font);
        font-variant-numeric: tabular-nums;
    }

        .ds-room .rt .s {
            display: block;
            white-space: nowrap;
        }

    .ds-room--none .rn,
    .ds-room--none .rt {
        color: var(--ce-muted);
        font-style: italic;
    }

/* ---------- mobile two-screen ---------- */
.m-flow {
    display: none;
}

.m-wrap {
    font-family: 'Roboto', system-ui, sans-serif;
    color: var(--ce-font);
}

.m-sub {
    padding: 10px 18px 12px;
    border-bottom: 1px solid var(--ce-border);
    background: #fff;
}

    .m-sub .ttl {
        font-size: 18px;
        font-weight: 700;
        color: var(--ce-darkblue);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .m-sub .rng {
        font-size: 14px;
        font-weight: 700;
        color: var(--ce-font);
        margin-top: 2px;
    }

    .m-sub .tz {
        font-size: 11.5px;
        font-style: italic;
        color: var(--ce-muted);
        margin-top: 2px;
    }

.m-list {
    padding: 6px 0 20px;
}

.m-mhead {
    position: sticky;
    top: 0;
    background: #F2F2F7;
    font-size: 16px;
    font-weight: 800;
    color: var(--ce-darkblue);
    padding: 12px 18px 7px;
    z-index: 1;
}

    .m-mhead .yr {
        color: var(--ce-muted);
        font-weight: 600;
        font-size: 12.5px;
    }

.m-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px 13px 34px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--ce-border);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

    .m-row:active {
        background: var(--ce-gray-100);
    }

    .m-row .d {
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
    }

        .m-row .d .num {
            font-size: 20px;
            font-weight: 800;
            color: var(--ce-font);
            font-variant-numeric: tabular-nums;
        }

        .m-row .d .dow {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--ce-muted);
        }

    .m-row .right {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .m-row .orgs.none {
        font-size: 12px;
        font-weight: 600;
        color: var(--ce-muted);
        background: #fff;
        border: 1px solid var(--ce-border-strong);
        border-radius: 999px;
        padding: 2px 10px;
    }

    .m-row .chev {
        color: #c0c4c9;
        display: inline-flex;
    }

.m-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--ce-border);
    color: var(--ce-darkblue);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
}

.m-selbar {
    padding: 12px 18px 6px;
}

    .m-selbar .d {
        font-size: 17px;
        font-weight: 800;
        color: var(--ce-darkblue);
    }

.m-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 12px;
}

.m-search {
    flex: 1;
    min-width: 0;
    padding: 8px 11px;
}

.m-sched {
    padding: 0 18px 24px;
}

.m-org {
    background: #fff;
    border: 1px solid var(--ce-border);
    border-radius: var(--es-radius);
    margin-bottom: 10px;
    overflow: hidden;
}

.m-orghead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    background: var(--ce-gray-50);
}

    .m-orghead .nm {
        font-size: 14px;
        font-weight: 700;
        color: var(--ce-darkblue);
    }

    .m-orghead .badge {
        font-size: 10.5px;
        font-weight: 700;
        color: var(--ce-muted);
        background: #fff;
        border: 1px solid var(--ce-border-strong);
        border-radius: 999px;
        padding: 1px 8px;
        white-space: nowrap;
    }

.m-mtg {
    padding: 10px 14px;
    border-top: 1px solid var(--ce-border);
}

    .m-mtg .rn {
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ce-font);
    }

    .m-mtg .rt {
        font-size: 12.5px;
        color: var(--ce-muted);
        margin-top: 3px;
        font-variant-numeric: tabular-nums;
    }

        .m-mtg .rt .s {
            display: inline-block;
            margin-right: 10px;
        }

/* ---------- responsive switch: desktop <-> mobile two-screen ---------- */
@media (max-width: 720px) {
    .es {
        padding: 0;
    }

    .es-h {
        padding: 16px 18px 0;
    }

    .v3 {
        display: none;
    }

    .m-flow {
        display: block;
    }

        .m-flow[data-screen="list"] .m-screen--day {
            display: none;
        }

        .m-flow[data-screen="day"] .m-screen--list {
            display: none;
        }
}