/* ==========================================================================
   Mazira Hotel — front desk

   Designed around the rack: the board reception reads. Before computers a
   front desk had a physical rack of pigeonholes, one per room, and the state
   of the house was legible from across the lobby. That board is the hero
   here; everything else stays quiet so it can be.

   Palette comes from a hotel lobby rather than a dashboard kit: felt green
   for the nav, register paper for the working surface, brass for the single
   accent. Status colours are functional and used nowhere decorative, so a
   colour on this screen always means something.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Inter+Tight:wght@400;500;600&display=swap');

:root {
    --ink:          #1B1E1B;
    --felt:         #232B27;
    --felt-light:   #33403A;
    --paper:        #FAF8F3;
    --surface:      #FFFFFF;
    --rule:         #E3DDD1;
    --rule-soft:    #EFEBE1;
    --muted:        #6E6A60;
    --brass:        #A8802C;
    --brass-wash:   #F3E9D2;

    /* Room states. Each has a meaning; none is decoration. */
    --st-ready:     #3F7350;
    --st-occupied:  #37536E;
    --st-due-out:   #7A5BA6;
    --st-arriving:  #2E7D8C;
    --st-dirty:     #B9762C;
    --st-ooo:       #92413A;
    --st-oos:       #6E6A60;

    --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;

    --nav-w: 232px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--brass); }

:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- layout -- */

.shell { display: flex; min-height: 100vh; }

.nav {
    width: var(--nav-w);
    flex: 0 0 var(--nav-w);
    background: var(--felt);
    color: #D8D3C6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.nav__brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__brand h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.01em;
    margin: 0;
    color: #F5F2EA;
}
.nav__brand p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #8C9089;
}

.nav__date {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__date strong {
    display: block;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 500;
    color: #F5F2EA;
    font-variant-numeric: tabular-nums;
}
.nav__date span { font-size: 12px; color: #8C9089; }

.nav__links { padding: 10px 0; flex: 1; overflow-y: auto; }
.nav__links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: #C6C2B6;
    text-decoration: none;
    font-size: 14.5px;
    border-left: 3px solid transparent;
}
.nav__links a:hover { background: rgba(255,255,255,.04); color: #F5F2EA; }
.nav__links a.is-active {
    background: rgba(255,255,255,.06);
    border-left-color: var(--brass);
    color: #F5F2EA;
    font-weight: 500;
}
.nav__count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,.1);
    padding: 1px 7px;
    border-radius: 9px;
}

.nav__foot {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12.5px;
    color: #8C9089;
}
.nav__foot a { color: #C6C2B6; }

.main { flex: 1; min-width: 0; padding: 26px 32px 60px; max-width: 1400px; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 22px;
}
.page-head h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 27px;
    letter-spacing: -.02em;
    margin: 0;
}
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------- house figures -- */
/* A single strip, not four identical cards. The numbers are peers, so they
   sit on one rule rather than in separate boxes competing for weight. */

.figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--surface);
    margin-bottom: 26px;
    overflow: hidden;
}
.figure {
    flex: 1 1 130px;
    padding: 14px 18px;
    border-right: 1px solid var(--rule-soft);
}
.figure:last-child { border-right: 0; }
.figure b {
    display: block;
    font-family: var(--display);
    font-size: 25px;
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.figure span { font-size: 13px; color: var(--muted); }
.figure--accent b { color: var(--brass); }

/* ----------------------------------------------------------- the rack -- */

.rack__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--muted);
}
.rack__legend i {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: baseline;
}

.floor { margin-bottom: 22px; }
.floor__label {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    margin-bottom: 7px;
}
.floor__rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 7px;
}

.room {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--st-ready);
    border-radius: 3px;
    padding: 8px 10px 9px;
    min-height: 64px;
    display: block;
    text-decoration: none;
    color: inherit;
}
.room:hover { border-color: var(--brass); }
.room__no {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.room__who {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.room__meta { font-size: 11.5px; color: var(--muted); }

.room[data-state="ready"]    { border-left-color: var(--st-ready); }
.room[data-state="occupied"] { border-left-color: var(--st-occupied); }
.room[data-state="due_out"]  { border-left-color: var(--st-due-out); }
.room[data-state="arriving"] { border-left-color: var(--st-arriving); }
.room[data-state="dirty"]    { border-left-color: var(--st-dirty); background: #FDF8F0; }
.room[data-state="ooo"]      { border-left-color: var(--st-ooo); background: #FBF2F1; }
.room[data-state="oos"]      { border-left-color: var(--st-oos); background: #F6F5F2; }

/* ------------------------------------------------------------ tables -- */

.panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    margin-bottom: 22px;
}
.panel__head {
    padding: 13px 18px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel__head h3 {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}
.panel__body { padding: 18px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
    text-align: left;
    font-weight: 500;
    font-size: 12.5px;
    color: var(--muted);
    padding: 9px 18px;
    border-bottom: 1px solid var(--rule);
    background: #FCFBF7;
}
td { padding: 11px 18px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.rm { font-family: var(--display); font-weight: 500; font-variant-numeric: tabular-nums; }

.empty {
    padding: 34px 18px;
    text-align: center;
    color: var(--muted);
}
.empty strong { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); margin-bottom: 3px; }

/* ------------------------------------------------------------- chips -- */

.chip {
    display: inline-block;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--rule);
    color: var(--muted);
    background: #FCFBF7;
    white-space: nowrap;
}
.chip--due { border-color: #D9C4A0; background: var(--brass-wash); color: #6B5316; }
.chip--owing { border-color: #DCBDB8; background: #FBF2F1; color: #7A332C; }
.chip--clear { border-color: #BFD6C4; background: #F1F7F2; color: #2E5B3C; }

/* ------------------------------------------------------------ forms -- */

.field { margin-bottom: 13px; }
.field label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 3px;
}
input[type=text], input[type=email], input[type=number], input[type=date],
input[type=password], select, textarea {
    width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--brass); outline: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.helptext { font-size: 12px; color: var(--muted); }
.errorlist { color: #92413A; font-size: 13px; margin: 3px 0 0; padding-left: 16px; }

.btn {
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 3px;
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.btn:hover { border-color: var(--ink); }
.btn--primary {
    background: var(--felt);
    border-color: var(--felt);
    color: #F5F2EA;
}
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.btn--brass { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--brass:hover { background: #8E6C22; border-color: #8E6C22; }
.btn--small { font-size: 13px; padding: 4px 10px; }
.btn--quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn--quiet:hover { color: var(--ink); border-color: var(--rule); }

/* ---------------------------------------------------------- messages -- */

.flash { margin-bottom: 18px; }
.flash div {
    padding: 10px 15px;
    border-radius: 3px;
    border: 1px solid var(--rule);
    background: var(--surface);
    margin-bottom: 7px;
    font-size: 14px;
    border-left: 3px solid var(--muted);
}
.flash .success { border-left-color: var(--st-ready); background: #F4F9F5; }
.flash .error   { border-left-color: var(--st-ooo);   background: #FBF3F2; }
.flash .warning { border-left-color: var(--st-dirty); background: #FDF8F0; }

/* ------------------------------------------------- availability grid -- */

.avail { overflow-x: auto; }
.avail table { font-size: 13px; min-width: 760px; }
.avail th, .avail td { padding: 7px 9px; text-align: center; }
.avail th:first-child, .avail td:first-child { text-align: left; white-space: nowrap; }
.avail td b { font-variant-numeric: tabular-nums; font-weight: 500; }
.avail .sold  { background: #FBF2F1; color: #92413A; }
.avail .tight { background: #FDF8F0; color: #8A5A20; }

/* ------------------------------------------------------------ login -- */

.login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--felt);
    padding: 20px;
}
.login__card {
    width: 100%;
    max-width: 360px;
    background: var(--paper);
    border-radius: 4px;
    padding: 30px 28px;
}
.login__card h1 {
    font-family: var(--display);
    font-size: 23px;
    font-weight: 700;
    margin: 0 0 3px;
}
.login__card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------ mobile -- */

@media (max-width: 900px) {
    .shell { flex-direction: column; }
    .nav { width: 100%; flex: none; height: auto; position: static; }
    .nav__links { display: flex; overflow-x: auto; padding: 0; }
    .nav__links a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
    .nav__links a.is-active { border-left: 0; border-bottom-color: var(--brass); }
    .main { padding: 18px 16px 50px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    table { font-size: 13px; }
    th, td { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   The rack, colour-coded — appended override block

   The board is read from a few feet away by someone holding a phone in the
   other hand, so state has to survive a glance. A 3px hairline did not: the
   card body stayed white and all sixty rooms looked alike until you leaned in.

   Every state now carries a fill, a matching border, a solid bar and a
   worded state line. The word matters as much as the colour: about one man in
   twelve has some red-green deficiency, and a rack where colour is the only
   signal fails him completely.

   READY IS THE QUIET STATE, deliberately. On a normal morning fifty of sixty
   rooms are ready, and tinting those makes a wall of green that drowns the
   six rooms somebody has to act on. Ready gets a bar and nothing else;
   everything that needs a person gets the fill and the glow.
   ========================================================================== */

:root {
    /* Fills and text, one pair per state. Text is a darker shade of the same
       hue so every card clears 4.5:1 against its own fill. */
    --fill-ready:     #FFFFFF;
    --fill-occupied:  #E7EEF5;
    --fill-due-out:   #F0EAF7;
    --fill-arriving:  #E4F1F3;
    --fill-dirty:     #FBEEDC;
    --fill-ooo:       #F8E9E7;
    --fill-oos:       #F1F0EB;

    --text-ready:     #2C5539;
    --text-occupied:  #23405A;
    --text-due-out:   #573C7C;
    --text-arriving:  #1C5865;
    --text-dirty:     #8A5518;
    --text-ooo:       #6B2C26;
    --text-oos:       #53504A;
}

/* ------------------------------------------------------------- legend --- */

.rack__legend {
    gap: 14px 18px;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    font-size: 13.5px;
}
.rack__legend span { display: inline-flex; align-items: center; }
.rack__legend i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}

/* --------------------------------------------------------------- card --- */

.floor__rooms { gap: 9px; }

.room {
    position: relative;
    border: 1px solid var(--rule);
    border-left-width: 6px;
    border-radius: 4px;
    padding: 9px 11px 10px;
    min-height: 74px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.room:hover { transform: translateY(-1px); }

.room__no {
    font-size: 19px;
    letter-spacing: -.01em;
}
.room__who {
    font-size: 12.5px;
    font-weight: 500;
    margin-top: 1px;
}

/* The worded state. Carries the colour in text as well as in the fill, so
   the card still reads correctly in greyscale or on a washed-out screen. */
.room__state {
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 2px;
}
.room__meta { font-size: 11px; color: var(--muted); }

/* ------------------------------------------------------------- states --- */

.room[data-state="ready"] {
    background: var(--fill-ready);
    border-color: var(--rule);
    border-left-color: var(--st-ready);
}
.room[data-state="ready"] .room__state { color: var(--text-ready); }

.room[data-state="occupied"] {
    background: var(--fill-occupied);
    border-color: #C2D2E1;
    border-left-color: var(--st-occupied);
}
.room[data-state="occupied"] .room__state { color: var(--text-occupied); }

.room[data-state="due_out"] {
    background: var(--fill-due-out);
    border-color: #CFC0E3;
    border-left-color: var(--st-due-out);
    box-shadow: 0 0 0 3px rgba(122, 91, 166, .14);
}
.room[data-state="due_out"] .room__state { color: var(--text-due-out); }

.room[data-state="arriving"] {
    background: var(--fill-arriving);
    border-color: #B6D6DC;
    border-left-color: var(--st-arriving);
    box-shadow: 0 0 0 3px rgba(46, 125, 140, .14);
}
.room[data-state="arriving"] .room__state { color: var(--text-arriving); }

.room[data-state="dirty"] {
    background: var(--fill-dirty);
    border-color: #E0C08A;
    border-left-color: var(--st-dirty);
    box-shadow: 0 0 0 3px rgba(185, 118, 44, .16);
}
.room[data-state="dirty"] .room__state { color: var(--text-dirty); }

.room[data-state="ooo"] {
    background: var(--fill-ooo);
    border-color: #DFBAB5;
    border-left-color: var(--st-ooo);
    box-shadow: 0 0 0 3px rgba(146, 65, 58, .14);
}
.room[data-state="ooo"] .room__state { color: var(--text-ooo); }

.room[data-state="oos"] {
    background: var(--fill-oos);
    border-color: #D8D5CD;
    border-left-color: var(--st-oos);
}
.room[data-state="oos"] .room__state { color: var(--text-oos); }

/* ------------------------------------------------------------- urgent --- */
/*
   ONE thing on this board moves, and only when reception is genuinely
   waiting on it: a dirty room whose type has an arrival due today.

   Six pulsing states would cancel each other out — when everything moves,
   movement stops meaning anything, and a screen that flickers all shift is
   tiring to sit in front of. Reserving the animation for the single case
   that needs a person right now is what makes it work as an alarm.
*/

.room--urgent {
    border-color: var(--st-dirty);
    animation: room-waiting 2.4s ease-in-out infinite;
}

.room--urgent .room__flag {
    display: inline-block;
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    background: var(--st-dirty);
    padding: 1px 6px;
    border-radius: 3px;
}

@keyframes room-waiting {
    0%, 100% { box-shadow: 0 0 0 3px rgba(185, 118, 44, .18); }
    50%      { box-shadow: 0 0 0 7px rgba(185, 118, 44, .34); }
}

/* Someone who gets motion sick should still see the room. The flag and the
   heavier border carry it without anything moving. */
@media (prefers-reduced-motion: reduce) {
    .room--urgent {
        animation: none;
        box-shadow: 0 0 0 4px rgba(185, 118, 44, .30);
    }
    .room:hover { transform: none; }
}

/* ------------------------------------------------------------- mobile --- */

@media (max-width: 640px) {
    .floor__rooms { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .room { min-height: 66px; padding: 7px 9px 8px; }
    .room__no { font-size: 17px; }
}