/* Front desk dashboard ("/"): hero, KPI strip, option cards and panels. Brand: navy #0B3D6E, blue #1E5AA8. */

:root {
    --dash-navy: #0B3D6E;
    --dash-blue: #1E5AA8;
    --dash-ink: #1d2733;
    --dash-muted: #5b6675;
    --dash-line: #e3e7ed;
    --dash-soft: #f4f7fb;
    --dash-radius: 14px;
    --dash-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
    --dash-shadow-hover: 0 4px 10px rgba(16, 24, 40, .10), 0 12px 28px rgba(16, 24, 40, .10);

    --st-ready: #2E7D32;
    --st-inspected: #00897B;
    --st-clean: #7CB342;
    --st-dirty: #D32F2F;
    --st-occupied: #F59E0B;
    --st-occdirty: #7B3FD0;
    --st-ooo: #37474F;
    --st-oos: #8D6E63;
    --st-unknown: #9AA4B2;
}

.dash { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------- hero: one slim band - ring, property + greeting line, actions */
.dash-hero {
    position: relative; overflow: hidden; border-radius: 12px; color: #fff; padding: 9px 16px;
    background: radial-gradient(900px 160px at 85% -60%, rgba(255, 255, 255, .16), transparent 60%),
                linear-gradient(120deg, #0B3D6E 0%, #164f91 55%, #1E5AA8 100%);
    box-shadow: var(--dash-shadow);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.dash-hero h1 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3; }
.dash-hero .hello { font-size: .78rem; opacity: .88; display: flex; flex-wrap: wrap; gap: 0 6px; line-height: 1.4; }
.dash-hero .hello .sep { opacity: .55; }
.dash-hero .grow { flex: 1 1 260px; min-width: 0; }
.dash-hero .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 14px; position: relative; z-index: 1; }
.dash-hero .actions .quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dash-hero .actions .quick.fd { padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, .18); }
.dash-hero .actions .quick.fd .mud-button-root { box-shadow: 0 2px 6px rgba(0, 0, 0, .22); font-weight: 600; }
.dash-hero .actions .mud-button-root { border-radius: 8px; }
@media (max-width: 1100px) {
    .dash-hero .actions { flex: 1 0 100%; justify-content: space-between; }
}
@media (max-width: 600px) {
    .dash-hero .actions .quick.fd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; padding-right: 0; border-right: 0; }
    .dash-hero .actions .quick.fd .mud-button-root { padding-left: 4px; padding-right: 4px; font-size: .72rem; }
}
.dash-hero .occ { display: flex; align-items: center; position: relative; z-index: 1; }
.dash-hero .occ .ring { position: relative; width: 46px; height: 46px; }
.dash-hero .occ .ring svg { transform: rotate(-90deg); }
.dash-hero .occ .ring .val { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: .78rem; }

/* ---------- KPI strip: slim tiles - label over value + detail on one line */
.dash-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dash-kpi {
    background: #fff; border-radius: 10px; padding: 6px 12px; box-shadow: var(--dash-shadow); border-left: 4px solid var(--k, var(--dash-blue));
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; min-width: 0;
}
.dash-kpi .k-label { grid-column: 1 / -1; font-size: .66rem; color: var(--dash-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi .k-value { font-size: 1.12rem; font-weight: 700; color: var(--dash-ink); font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.dash-kpi .k-sub { font-size: .72rem; color: var(--dash-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- option cards: compact tabs - icon, title (+ caption), number */
.dash-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) {
    /* tablets / phones: a swipeable strip so the panel stays near the top */
    .dash-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; margin: 0 -2px; }
    .dash-cards .dash-card { flex: 0 0 172px; scroll-snap-align: start; }
}
.dash-card {
    all: unset; box-sizing: border-box; cursor: pointer; position: relative; background: #fff; border-radius: 10px;
    padding: 7px 10px; box-shadow: var(--dash-shadow); border: 1px solid transparent; min-width: 0;
    display: flex; align-items: center; gap: 8px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.dash-card:hover { transform: translateY(-1px); box-shadow: var(--dash-shadow-hover); }
.dash-card:focus-visible { outline: 3px solid rgba(30, 90, 168, .35); outline-offset: 2px; }
.dash-card .ic {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center; color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, #fff);
}
.dash-card .txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.dash-card .ttl { font-weight: 600; color: var(--dash-ink); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-card .sub { font-size: .68rem; color: var(--dash-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* seven tabs in a row: the caption moves to the tooltip so the title can use the width (shown again on very wide screens and in the swipe strip) */
@media (min-width: 1101px) and (max-width: 1919px) { .dash-card .sub { display: none; } .dash-card { min-height: 46px; } }
.dash-hero .due { margin-left: .3em; }
@media (max-width: 600px) {
    .dash-hero .due { display: none; }
    .dash-hero .actions .quick.fd .mud-button-root { white-space: nowrap; min-width: 0; }
    .dash-hero .actions .quick.fd .mud-button-icon-start { display: none; }
}
.dash-card .num { font-size: 1.05rem; font-weight: 700; color: var(--dash-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.dash-card.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 18%, transparent), var(--dash-shadow); }
.dash-card.active .ic { background: var(--c); color: #fff; }
.dash-card.active::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--c);
}

/* ---------- panel */
.dash-panel { background: #fff; border-radius: var(--dash-radius); box-shadow: var(--dash-shadow); padding: 14px 16px; min-width: 0; }
.dash-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.dash-panel-head h2 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--dash-navy); display: flex; align-items: center; gap: 8px; }
.dash-panel-head .sub { color: var(--dash-muted); font-size: .85rem; }
.dash-panel-head .grow { flex: 1 1 auto; }
.dash-section-title { font-weight: 600; color: var(--dash-navy); display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.dash-empty { text-align: center; color: var(--dash-muted); padding: 28px 12px; }
.dash-empty .mud-icon-root { font-size: 2.4rem; opacity: .45; display: block; margin: 0 auto 6px; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--dash-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.dash-filters .f { min-width: 180px; flex: 1 1 180px; max-width: 280px; }
.dash-chipstat { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; background: var(--dash-soft); border-radius: 999px; font-size: .82rem; color: var(--dash-muted); }
.dash-chipstat b { color: var(--dash-ink); font-size: 1rem; }
.dash-scroll { overflow-x: auto; max-width: 100%; }
.dash-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--dash-muted); }
.dash-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--c); }

/* ---------- occupancy cards */
.occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.occ-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--dash-line); background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s; }
.occ-card:hover { box-shadow: var(--dash-shadow-hover); }
.occ-card .top { background: linear-gradient(120deg, #1E5AA8, #2D8CD6); color: #fff; padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; }
.occ-card.vip .top { background: linear-gradient(120deg, #8a5a00, #E0A100); }
.occ-card .top a { color: #fff; font-weight: 600; text-decoration: none; }
.occ-card .top .gname { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-card .body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.occ-card .lbl { font-size: .7rem; letter-spacing: .08em; color: var(--dash-muted); text-transform: uppercase; }
.occ-card .rooms { display: flex; gap: 6px; flex-wrap: wrap; }
.occ-card .room { background: var(--dash-soft); border-radius: 8px; padding: 3px 10px; font-weight: 600; }
.occ-card .foot { border-top: 1px solid var(--dash-line); padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.occ-card .when { font-size: .75rem; color: var(--dash-muted); }
.occ-card .when b { display: block; color: var(--dash-ink); font-size: .92rem; }
.badge-days { border-radius: 999px; padding: 2px 10px; font-size: .75rem; font-weight: 600; background: #e8f5e9; color: #2E7D32; white-space: nowrap; }
.badge-days.today { background: #fff4e0; color: #b26a00; }
.badge-days.late { background: #fdecea; color: #C62828; }

/* ---------- meals */
.meal-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; }
.meal-table th, .meal-table td { padding: 10px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.meal-table thead th { background: #eaf3fc; color: var(--dash-navy); font-weight: 600; }
.meal-table thead th:first-child { border-top-left-radius: 10px; text-align: left; }
.meal-table thead th:last-child { border-top-right-radius: 10px; }
.meal-table thead .d { font-size: 1.35rem; font-weight: 700; display: block; }
.meal-table thead .w, .meal-table thead .m { font-size: .72rem; color: var(--dash-muted); }
.meal-table thead th.today { background: #d6e7fb; }
.meal-table td:first-child, .meal-table th:first-child { text-align: left; }
.meal-table .mealname { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.meal-table .mealname .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); }
.meal-table tr.meal td { background: color-mix(in srgb, var(--c) 9%, #fff); font-size: 1.15rem; font-weight: 600; }
.meal-table tr.split td { font-size: .8rem; color: var(--dash-muted); border-bottom: 1px solid var(--dash-line); }
.meal-table tr.total td { font-weight: 700; border-top: 2px solid var(--dash-line); }
.meal-side { display: flex; flex-direction: column; gap: 14px; }

/* ---------- room tiles */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; }
.room-tile {
    all: unset; box-sizing: border-box; cursor: pointer; border-radius: 12px; background: #fff; border: 2px solid var(--c);
    padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: transform .12s, box-shadow .12s;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 55%);
}
.room-tile:hover { transform: translateY(-2px); box-shadow: var(--dash-shadow-hover); }
.room-tile:focus-visible { outline: 3px solid rgba(30, 90, 168, .35); outline-offset: 2px; }
.room-tile .no { font-size: 1.35rem; font-weight: 700; color: var(--dash-ink); }
.room-tile .st { position: absolute; top: 10px; right: 10px; background: var(--c); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.room-tile .type { color: var(--dash-blue); font-weight: 600; font-size: .85rem; border-left: 3px solid var(--c); padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-tile .cap { display: flex; gap: 10px; font-size: .8rem; color: var(--dash-muted); align-items: center; }
.room-tile .guest { font-size: .8rem; color: var(--dash-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; }
.room-tile .guest.muted { color: var(--dash-muted); }
.st-READY { --c: var(--st-ready); } .st-INSPECTED { --c: var(--st-inspected); } .st-CLEAN { --c: var(--st-clean); }
.st-DIRTY { --c: var(--st-dirty); } .st-OCCUPIED { --c: var(--st-occupied); } .st-OCCUPIED_DIRTY { --c: var(--st-occdirty); }
.st-OUT_OF_ORDER { --c: var(--st-ooo); } .st-OUT_OF_SERVICE { --c: var(--st-oos); } .st-UNKNOWN { --c: var(--st-unknown); }
.room-tile.dim { opacity: .35; }

/* ---------- folios */
.folio-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .folio-col { grid-template-columns: minmax(0, 1fr); } }
.folio-box { border: 1px solid var(--dash-line); border-radius: 12px; overflow: hidden; min-width: 0; }
.folio-box .head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--dash-soft); border-bottom: 1px solid var(--dash-line); flex-wrap: wrap; }
.folio-box .head h3 { margin: 0; font-size: 1rem; color: var(--dash-navy); display: flex; align-items: center; gap: 8px; }
.folio-box .head .count { background: var(--dash-blue); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: .8rem; font-weight: 600; }
.folio-box .progress { height: 6px; background: #e9eef5; }
.folio-box .progress > div { height: 100%; background: linear-gradient(90deg, #2E9E4F, #7CB342); }
.folio-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--dash-line); align-items: center; }
.folio-row:last-child { border-bottom: 0; }
.folio-row .who { font-weight: 600; color: var(--dash-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio-row .what { font-size: .78rem; color: var(--dash-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.folio-row .acts { display: flex; gap: 6px; align-items: center; }
.folio-row.done { background: #fafcfa; }
.folio-row.done .who { color: var(--dash-muted); }

/* ---------- availability heatmap */
.avail { border-collapse: separate; border-spacing: 3px; min-width: 100%; }
.avail th, .avail td { text-align: center; font-variant-numeric: tabular-nums; }
.avail thead th { font-size: .72rem; color: var(--dash-muted); font-weight: 500; padding: 4px 2px; min-width: 38px; }
.avail thead th b { display: block; color: var(--dash-ink); font-size: .9rem; }
.avail thead th.we b { color: #b26a00; }
.avail thead th.today { background: #eaf3fc; border-radius: 8px; }
.avail .rt { text-align: left; min-width: 230px; position: sticky; left: 0; background: #fff; z-index: 1; padding-right: 8px; }
.avail .rt b { color: var(--dash-blue); display: block; }
.avail .rt small { color: var(--dash-muted); }
.avail .cell { border-radius: 8px; padding: 6px 2px; font-weight: 700; font-size: .9rem; cursor: default; min-width: 38px; }
.avail .cell small { display: block; font-weight: 500; font-size: .62rem; opacity: .85; }
.avail tr.house .rt b { color: var(--dash-navy); }
.avail tr.house .cell { outline: 1px dashed rgba(11, 61, 110, .25); }

/* ---------- calendar */
.cal { --day: 44px; position: relative; min-width: calc(150px + var(--days) * var(--day)); }
.cal-head, .cal-row { display: grid; grid-template-columns: 150px repeat(var(--days), var(--day)); }
.cal-head { position: sticky; top: 0; z-index: 2; }
.cal-head .d { background: var(--dash-navy); color: #fff; text-align: center; font-size: .72rem; padding: 4px 0; line-height: 1.25; border-right: 1px solid rgba(255, 255, 255, .12); }
.cal-head .d b { display: block; font-size: .92rem; }
.cal-head .d.we { background: #154b85; }
.cal-head .d.today { background: #F28C28; }
.cal-head .corner { background: var(--dash-navy); color: #fff; font-weight: 600; display: flex; align-items: center; padding: 0 10px; border-top-left-radius: 10px; position: sticky; left: 0; z-index: 3; }
.cal-row { position: relative; min-height: 38px; }
.cal-row .room { position: sticky; left: 0; z-index: 1; background: #fff; border-bottom: 1px solid var(--dash-line); padding: 6px 10px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cal-row .room small { color: var(--dash-muted); font-weight: 500; }
.cal-row .room .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.cal-row .c { border-bottom: 1px solid var(--dash-line); border-right: 1px solid #f0f2f5; }
.cal-row .c.we { background: #f3f6fb; }
.cal-row .c.today { background: #fff4e8; }
.cal-bar {
    position: absolute; top: 6px; height: 26px; border-radius: 7px; color: #fff; font-size: .74rem; font-weight: 600; padding: 0 8px;
    display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; z-index: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15); text-decoration: none; background: var(--c);
}
.cal-bar:hover { filter: brightness(1.08); z-index: 2; }
.bar-IN_HOUSE { --c: #F59E0B; } .bar-ARRIVAL { --c: #2E9E4F; } .bar-RESERVED { --c: #1E5AA8; } .bar-DEPARTED { --c: #90A4AE; }
.bar-OUT_OF_ORDER { --c: #37474F; background: repeating-linear-gradient(45deg, #37474F 0 6px, #455A64 6px 12px); }
.bar-OUT_OF_SERVICE { --c: #8D6E63; background: repeating-linear-gradient(45deg, #8D6E63 0 6px, #a1887f 6px 12px); }
.bar-UNASSIGNED { --c: #7B3FD0; }

/* ---------- reservations board */
.res-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .res-cols { grid-template-columns: minmax(0, 1fr); } }
.res-cols > * { min-width: 0; }
.res-box { border: 1px solid var(--dash-line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.res-box + .res-box { margin-top: 14px; }
.res-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--dash-line); }
.res-item:last-child { border-bottom: 0; }
.res-item .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--c, #1E5AA8); font-size: .85rem; }
.res-item .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-item .nm a { color: inherit; text-decoration: none; }
.res-item .nm a:hover { text-decoration: underline; }
.res-item .dt { font-size: .78rem; color: var(--dash-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.res-item .rt { text-align: right; font-size: .8rem; color: var(--dash-muted); }
.res-item .rt b { display: block; color: var(--dash-ink); font-size: .92rem; }
.res-item .rt .mud-button-root { margin-top: 4px; }

/* ---------- print */
@media print {
    .dash-hero, .dash-kpis, .dash-cards, .no-print, .mud-appbar, .mud-drawer { display: none !important; }
    .dash-panel { box-shadow: none; padding: 0; }
    .print-pickups .res-box:not(.sec-pickups), .print-dropoffs .res-box:not(.sec-dropoffs) { display: none !important; }
    .print-pickups, .print-dropoffs { display: block !important; }
}