/* ==========================================================================
   Meridian Hotel ERP — admin panel
   --------------------------------------------------------------------------
   Design notes
   The people who live in this interface work eight hour shifts under lobby
   lighting, so the surface is a quiet warm grey rather than pure white and
   every status carries its own colour AND its own label — never colour alone.
   The accent is brass, borrowed from the key fobs and lamp fittings of a
   hotel lobby, and it is used sparingly: primary actions and the active nav
   item, nothing else.
   Numbers, room numbers and document numbers are set in a monospaced face so
   that a column of folio totals lines up and can be scanned vertically.
   ========================================================================== */

:root {
    /* Blue & white theme */
    --navy-900: #0B2E63;   /* deep blue — sidebar */
    --navy-800: #123B7E;
    --navy-700: #1A4C9E;
    --navy-500: #2E63C4;
    --paper:    #F1F5FB;   /* app background — faint blue-white */
    --card:     #FFFFFF;
    --line:     #D7E1F1;
    --line-soft:#E8EFF9;
    --ink:      #12233F;   /* dark navy text */
    --ink-soft: #52627C;
    --ink-faint:#8391A8;

    /* Primary accent — bright blue (was brass) */
    --brass:      #1D5FD8;
    --brass-lift: #3B7DF0;
    --brass-wash: #E6F0FD;

    --clean:     #12735A;
    --clean-bg:  #E1F3EC;
    --dirty:     #B14A22;
    --dirty-bg:  #FBEAE1;
    --inspected: #1A56C8;
    --inspected-bg:#E4EDFB;
    --blocked:   #5C6675;
    --blocked-bg:#E8EAEE;
    --occupied:  #123B7E;
    --occupied-bg:#E3EAF7;

    --danger:    #B3261E;
    --danger-bg: #FBE9E7;

    --radius:   6px;
    --radius-lg:10px;
    --shadow:   0 1px 2px rgba(16, 32, 46, .06), 0 4px 14px rgba(16, 32, 46, .05);

    --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    margin: 0;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* Eyebrow labels: condensed, spaced, uppercase. Used for section headers and
   table group headings so the hierarchy reads without extra rules. */
.eyebrow {
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-faint);
}

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

.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--navy-900);
    color: #C6D6EF;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.brand-mark {
    font-family: var(--cond);
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 17px;
    color: #FFF;
    display: block;
}
.brand-sub {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--brass-lift);
    text-transform: uppercase;
}

.nav-scroll { overflow-y: auto; flex: 1; padding: 10px 0 20px; }

.nav-group {
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px;
    color: #8095B6;
    padding: 16px 20px 6px;
}

.nav-link-x {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    color: #C6D6EF;
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
}
.nav-link-x:hover { background: rgba(255, 255, 255, .05); color: #FFF; }
.nav-link-x.active {
    background: rgba(201, 154, 46, .12);
    border-left-color: var(--brass-lift);
    color: #FFF;
    font-weight: 500;
}
.nav-link-x .ico { width: 16px; text-align: center; opacity: .85; }

.sidebar-foot {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 12px;
    color: #93A6C6;
}

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

.topbar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar h1 {
    font-family: var(--cond);
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    letter-spacing: .01em;
}

.business-date {
    font-family: var(--mono);
    font-size: 12px;
    background: var(--brass-wash);
    border: 1px solid #C5DAF6;
    color: #134092;
    padding: 3px 9px;
    border-radius: var(--radius);
    white-space: nowrap;
}

.content { padding: 22px; flex: 1; }

/* ----------------------------------------------------------------- kpi --- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }

.kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
.kpi .label { font-family: var(--cond); text-transform: uppercase; letter-spacing: .09em; font-size: 10.5px; color: var(--ink-faint); }
.kpi .value { font-family: var(--mono); font-size: 25px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.kpi .foot  { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.kpi.accent { border-left: 3px solid var(--brass); }

/* ---------------------------------------------------------------- cards -- */
.card-x {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}
.card-x > header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-x > header h2 { font-family: var(--cond); font-size: 15px; font-weight: 600; margin: 0; }
.card-x > .body { padding: 16px; }
.card-x > .body.flush { padding: 0; }

/* --------------------------------------------------------------- tables -- */
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid thead th {
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-faint);
    background: #F4F8FE;
    border-bottom: 1px solid var(--line);
    padding: 9px 12px;
    text-align: left;
    white-space: nowrap;
}
table.grid tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.grid tbody tr:hover { background: #F5F9FE; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid td.num, table.grid th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--ink-soft);
}
.empty .headline { font-family: var(--cond); font-size: 15px; color: var(--ink); margin-bottom: 4px; }

/* --------------------------------------------------------------- status -- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.clean     { color: var(--clean);     background: var(--clean-bg); }
.pill.dirty     { color: var(--dirty);     background: var(--dirty-bg); }
.pill.inspected { color: var(--inspected); background: var(--inspected-bg); }
.pill.blocked   { color: var(--blocked);   background: var(--blocked-bg); }
.pill.occupied  { color: var(--occupied);  background: var(--occupied-bg); }
.pill.neutral   { color: var(--ink-soft);  background: #EFF1F4; }
.pill.warn      { color: #8A5A00;          background: #FDF2DC; }
.pill.danger    { color: var(--danger);    background: var(--danger-bg); }

/* ------------------------------------------------------------ room rack --
   The signature element: the key rack behind reception. Each room is a slot
   with a brass tag; the status stripe runs down the hanging edge so a
   supervisor can read a whole floor in one pass. */
.rack-floor { margin-bottom: 22px; }
.rack-floor > .floor-label {
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    color: var(--ink-faint);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}

.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }

.slot {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--blocked);
    border-radius: var(--radius);
    padding: 9px 11px 10px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    text-align: left;
    width: 100%;
    display: block;
}
.slot:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.slot:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.slot .no {
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .02em;
}
.slot .type { font-family: var(--cond); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.slot .who {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--ink-soft);
    border-top: 1px dashed var(--line);
    padding-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 25px;
}
.slot .who.vacant { color: var(--ink-faint); font-style: italic; }
.slot .hk { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; }

.slot.s-clean     { border-left-color: var(--clean); }
.slot.s-dirty     { border-left-color: var(--dirty); }
.slot.s-inspected { border-left-color: var(--inspected); }
.slot.s-cleaning  { border-left-color: var(--brass); }
.slot.s-blocked   { border-left-color: var(--blocked); background: repeating-linear-gradient(135deg, #FFF, #FFF 7px, #F4F5F7 7px, #F4F5F7 14px); }
.slot.occupied    { background: #F3F7FE; }

.rack-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--ink-soft); }
.rack-key span { display: inline-flex; align-items: center; gap: 6px; }
.rack-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* --------------------------------------------------------------- forms --- */
.form-label { font-family: var(--cond); text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; color: var(--ink-soft); margin-bottom: 3px; font-weight: 600; }
.form-control, .form-select { font-size: 13.5px; border-color: var(--line); border-radius: var(--radius); }
.form-control:focus, .form-select:focus { border-color: var(--brass); box-shadow: 0 0 0 .18rem rgba(166, 124, 31, .16); }

.btn { border-radius: var(--radius); font-size: 13.5px; font-weight: 500; }
.btn-brass { background: var(--brass); border-color: var(--brass); color: #FFF; }
.btn-brass:hover, .btn-brass:focus { background: #1749AE; border-color: #1749AE; color: #FFF; }
.btn-outline-ink { border-color: var(--line); color: var(--ink); background: #FFF; }
.btn-outline-ink:hover { background: #EEF3FB; color: var(--ink); }
.btn-sm { font-size: 12.5px; padding: 3px 9px; }

/* --------------------------------------------------------------- misc ---- */
.folio-line td { font-size: 13px; }
.folio-line.void td { text-decoration: line-through; color: var(--ink-faint); }

.money-total { font-family: var(--mono); font-size: 20px; font-weight: 600; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1080; display: flex; flex-direction: column; gap: 8px; }
.toast-x {
    background: var(--navy-800);
    color: #FFF;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
    max-width: 380px;
    border-left: 3px solid var(--brass-lift);
}
.toast-x.err { border-left-color: #E4614F; }
.toast-x.ok  { border-left-color: #3FA981; }

.spinner-wrap { padding: 40px; text-align: center; color: var(--ink-faint); }

.tabs-x { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs-x button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-soft);
}
.tabs-x button.active { color: var(--ink); border-bottom-color: var(--brass); }

@media (max-width: 900px) {
    .sidebar { position: fixed; left: -232px; z-index: 1050; transition: left .2s ease; }
    .sidebar.open { left: 0; }
    .content { padding: 14px; }
}

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