/* Housekeeping page — hero mockup of the real Reseva Housekeeping dashboard
   (hotel_house_keeping/static/src: KPI cards, filter pills, room cards).
   Page-wide light theme comes from the .pms-page rules in pms_page.css (wrapper: .pms-page.hk-page). */

.hk-page {
  --hk-brand: #366b6d; --hk-clean: #2e7d32; --hk-dirty: #e65100;
  --hk-cleaning: #1565c0; --hk-inspection: #6a1b9a; --hk-ooo: #b71c1c;
}

.hkd { background: #fff; border: 1px solid var(--up-line); border-radius: 18px; overflow: hidden; box-shadow: var(--up-shadow-lg); font-family: var(--up-font); color: #333; }
.hkd-body { background: #f5f5f5; padding: 14px 16px 16px; }
.hkd-head { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.hkd-head b { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--hk-brand); }
.hkd-head svg { width: 18px; height: 18px; stroke: var(--hk-brand); }
.hkd-head span { font-size: .72rem; color: #666; display: flex; align-items: center; gap: .5rem; }
.hkd-head span i { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--hk-brand); display: inline-flex; align-items: center; justify-content: center; }
.hkd-head span i svg { width: 12px; height: 12px; }

.hkd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.hkd-kpi { background: #fff; border-radius: 10px; border: 2px solid transparent; padding: .6rem .3rem; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.hkd-kpi svg { width: 18px; height: 18px; display: block; margin: 0 auto .2rem; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hkd-kpi .v { font-size: 1.35rem; font-weight: 900; line-height: 1; }
.hkd-kpi .l { font-size: .52rem; color: #666; text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.hkd-kpi.total { border-color: var(--hk-brand); } .hkd-kpi.total svg { stroke: var(--hk-brand); } .hkd-kpi.total .v { color: var(--hk-brand); }
.hkd-kpi.dirty svg { stroke: var(--hk-dirty); } .hkd-kpi.dirty .v { color: var(--hk-dirty); }
.hkd-kpi.cleaning svg { stroke: var(--hk-cleaning); } .hkd-kpi.cleaning .v { color: var(--hk-cleaning); }
.hkd-kpi.inspect svg { stroke: var(--hk-inspection); } .hkd-kpi.inspect .v { color: var(--hk-inspection); }
.hkd-kpi.clean svg { stroke: var(--hk-clean); } .hkd-kpi.clean .v { color: var(--hk-clean); }

.hkd-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: .66rem; }
.hkd-pills > span:first-child { color: #888; margin-right: 2px; }
.hkd-pill { border: 1px solid #ddd; border-radius: 999px; padding: .15rem .65rem; background: #fff; color: #555; }
.hkd-pill.on { background: var(--hk-brand); border-color: var(--hk-brand); color: #fff; }

.hkd-title { font-size: .72rem; font-weight: 700; color: var(--hk-brand); margin: 2px 0 8px; display: flex; align-items: center; gap: .4rem; }
.hkd-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hkd-room { background: #fff; border-radius: 10px; overflow: hidden; border: 2px solid #e0e0e0; border-left-width: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.07);
  animation: hkd-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.hkd-room.clean { border-left-color: var(--hk-clean); }
.hkd-room.cleaning { border-left-color: var(--hk-cleaning); }
.hkd-room.inspect { border-left-color: var(--hk-inspection); }
.hkd-room.dirty { border-left-color: var(--hk-dirty); }
.hkd-room img { display: block; width: 100%; height: 70px; object-fit: cover; background: #eee; }
.hkd-room .in { padding: .45rem .5rem .55rem; }
.hkd-room .nm { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; font-size: .66rem; font-weight: 700; color: #333; line-height: 1.25; }
.hkd-badge { display: inline-block; font-size: .52rem; font-weight: 600; padding: 1px 7px; border-radius: 12px; margin-top: 4px; white-space: nowrap; }
.hkd-badge.clean { background: #e8f5e9; color: var(--hk-clean); }
.hkd-badge.cleaning { background: #e3f2fd; color: var(--hk-cleaning); }
.hkd-badge.inspect { background: #f3e5f5; color: var(--hk-inspection); }
.hkd-badge.dirty { background: #fff3e0; color: var(--hk-dirty); }
.hkd-prio { font-size: .48rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; flex: none; }
.hkd-prio.normal { background: #e3f2fd; color: var(--hk-cleaning); }
.hkd-prio.high { background: #fff3e0; color: var(--hk-dirty); }
.hkd-prio.urgent { background: #ffebee; color: var(--hk-ooo); }
.hkd-bar { height: 5px; border-radius: 3px; background: #e0e0e0; margin: 6px 0 2px; overflow: hidden; }
.hkd-bar i { display: block; height: 100%; background: #49a09d; border-radius: 3px; }
.hkd-meta { font-size: .52rem; color: #888; display: flex; justify-content: space-between; gap: 4px; }
.hkd-who { font-size: .56rem; color: #555; margin-top: 4px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hkd-who svg { width: 10px; height: 10px; stroke: #888; flex: none; }

@keyframes hkd-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hkd-room { animation: none; } }

/* Deep-feature section: section already has an inline surface bg; keep it consistent */
.hk-page #room-status { background: var(--up-bg) !important; }

@media (max-width: 640px) {
  .hkd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hkd-kpis .hkd-kpi:nth-child(n+4) { display: none; }
  .hkd-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hero tweaks: keep "Rooms ready on time." on one line; chip clear of the room cards */
.hk-page .pms-hero h1 { font-size: clamp(2rem, 1.9vw + 1rem, 2.75rem); }
.hk-page .fdb-chip.c2 { bottom: -1.9rem; }