/* ────────────────────────────── 0. GLOBAL RESET & BASE SETTINGS ─────────────────────── */
html, body {
    height: 100%;
    margin: 0;
    background-color: #f2f5fa;            /* light‑grey backdrop */
    color: #333;
}

* {
    box-sizing: border-box;
}

/* ────────────────────────────── 1. PAGE LAYOUT ─────────────────────────────────── */
body {
    display:flex;
    justify-content:center;          /* center container horizontally (desktop) */
    align-items:start;               /* allow it to start at the top on mobile */
}

.container {
    width:100%;
    background:#fff;
    border-radius:.25rem;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    min-height:calc(80vh);   /* full height minus the body paddings */
}

/* ────────────────────────────── 2. HEADER & GREETING ─────────────────────────── */
h1 {
    margin:0 0 .75rem;
    font-size:2rem;
    text-align:center;
    color:#222;
}

#welcome {
    text-align:center;
    margin-bottom:1.25rem;
    color:#555;
    font-weight:600;
}

/* ────────────────────────────── 3. NEW ROOM FORM ─────────────────────────── */
#newRoomForm{
    display:flex;
    gap:.75rem;
    margin-bottom:1.5rem;
}

#roomName{
    flex:1;
    padding:.75rem;
    border:1px solid #ddd;
    border-radius:.25rem;
    font-size:1rem;
    background:#fafafa;
}

/* ────────────────────────────── 4. BUTTONS (generic) ───────────────────────── */
button {
    background:#0066cc;
    color:white;
    border:none;
    padding:.75rem 1.25rem;
    border-radius:.25rem;
    cursor:pointer;
    font-weight:600;
    transition:background .2s ease;
}
button:hover{background:#005bb5;}
button:focus-visible{
    outline:2px solid #004999;
    outline-offset:2px;
}

/* ────────────────────────────── 4.1 LOGOUT BUTTON (red) ─────────────────────── */
.logout {
    background:#ff4d4d;
}
.logout:hover{background:#e60000;}
.logout:focus-visible{
    outline:2px solid #b20000;
    outline-offset:2px;
}

/* ────────────────────────────── 5. ROOM LIST ──────────────────────────────── */
.room-list {
    list-style:none;
    padding:0;
    margin:0 0 1.5rem;
    flex-grow:1;                     /* take up the remaining vertical space */
    overflow-y:auto;                 /* scroll if many rooms */
}

.room-item{
    padding:.75rem .5rem;
    border-bottom:1px solid #eee;
    cursor:pointer;
    transition:background .2s ease;
    background-color: lightgray;
    border-radius: 1rem;
}
.room-item:hover{background:#f9fafb;}
.room-item:last-child{border-bottom:none;}

/* ────────────────────────────── 6. ERROR MESSAGE (optional) ─────────────────── */
#msg{
    color:#d00;
    margin-top:.5rem;
    text-align:center;
}

/* ────────────────────────────── 7. RESPONSIVE ADJUSTMENTS ─────────────────── */