@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459W1hyw.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('https://fonts.gstatic.com/s/montserrat/v26/JTUSjIg1_i6t8kCHKm459WZhyw.woff2') format('woff2');
}

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

:root {
    --blue:      #245886;
    --blue-dark: #1a3f61;
    --orange:    #EF7D00;
    --green:     #4CAF50;
    --white:     #F1F1F1;
    --card-bg:   var(--blue-dark);
    --ended:     #3a3a3a;
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--blue);
    color: var(--white);
}

/* ── LAYOUT: 3 rows — header / events / footer ── */
body {
    display: grid;
    grid-template-rows: 11vh 1fr 14vh;
}

#status { display: none; }

/* ── HEADER ── */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    background-color: var(--blue-dark);
    border-bottom: 3px solid rgba(255,255,255,0.08);
}

h1#name {
    font-size: 5.5vh;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
}

#nextBookingTime {
    font-size: 3.8vh;
    font-weight: 600;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── EVENTS AREA ── */
.main {
    overflow: hidden;
    padding: 2vh 3vw;
}

.events {
    height: 100%;
}

h2#weekDay { display: none; }

.event-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.5vh 1.5vw;
    height: 100%;
    align-content: stretch;
}

/* max 2 rows visible — 4×2 = 8 events */
.event-container > div {
    background-color: var(--card-bg);
    padding: 1.8vh 1.4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8vh;
    border-left: 0.8vw solid var(--blue);
}

.event-container > div:has(.active)    { border-left-color: var(--orange); }
.event-container > div:has(.uppcoming) { border-left-color: var(--green); }
.event-container > div:has(.ended)     { border-left-color: var(--ended); opacity: 0.45; }

.event-container > div h3 {
    font-size: 3.2vh;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.event-container > div time {
    font-size: 2.8vh;
    font-weight: 600;
    color: rgba(241,241,241,0.75);
}

/* status indicator — thin bar, no dot */
.event-container > div > div {
    height: 4px;
    width: 2.5vw;
    margin-top: 0.6vh;
}

.active    { background-color: var(--orange); }
.uppcoming { background-color: var(--green); }
.ended     { background-color: var(--ended); }

/* ── FOOTER ── */
.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    background-color: var(--blue-dark);
    border-top: 3px solid rgba(255,255,255,0.1);
}

#clock {
    font-size: 10vh;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

/* ── SETUP PROMPT ── */
#prompt-new-user {
    z-index: 100;
    position: fixed;
    inset: 0;
    background-color: rgba(10,20,35,0.92);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

#prompt-new-user form {
    background-color: var(--blue-dark);
    border-top: 4px solid var(--orange);
    padding: 4vh 3vw;
    display: flex;
    flex-direction: column;
    gap: 1.5vh;
    min-width: 32vw;
}

#prompt-new-user form label {
    font-size: 1.8vh;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(241,241,241,0.6);
}

#prompt-new-user form input {
    height: 5.5vh;
    font-size: 2vh;
    font-family: 'Montserrat', sans-serif;
    padding: 0 1.2vw;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.07);
    outline: none;
    transition: border-color 0.2s;
}

#prompt-new-user form input:focus {
    border-color: var(--orange);
}

#prompt-new-user form button {
    height: 5.5vh;
    font-size: 2vh;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    background-color: var(--orange);
    color: var(--white);
    cursor: pointer;
    margin-top: 1vh;
    transition: opacity 0.2s;
}

#prompt-new-user form button:hover { opacity: 0.85; }