/* Live Room Board v35 — simple, readable, light/dark aware. */
#lrbRoot {
  --lrb-ui-bg: #071525;
  --lrb-ui-panel: #0b1b2e;
  --lrb-ui-card: #0d2035;
  --lrb-ui-soft: #11263d;
  --lrb-ui-border: #29445f;
  --lrb-ui-text: #f4f8fc;
  --lrb-ui-muted: #9eb0c4;
  --lrb-ui-accent: #14b8a6;
  --lrb-ui-blue: #3b82f6;
  --lrb-ui-green: #22a06b;
  --lrb-ui-orange: #e58b28;
  --lrb-ui-red: #ef5b62;
  --lrb-ui-purple: #8b6fd1;
  background: rgba(2, 8, 20, .76) !important;
  backdrop-filter: blur(8px) !important;
}

#lrbRoot .lrb-shell {
  width: min(1680px, calc(100vw - 28px)) !important;
  background: var(--lrb-ui-bg) !important;
  border-color: var(--lrb-ui-border) !important;
  border-radius: 18px 0 0 18px !important;
}

#lrbRoot .lrb-head,
#lrbRoot .lrb-d-head {
  min-height: 72px;
  padding: 12px 18px !important;
  background: var(--lrb-ui-panel) !important;
  border-color: var(--lrb-ui-border) !important;
}

#lrbRoot .lrb-brand { color: var(--lrb-ui-text) !important; font-size: 20px !important; letter-spacing: 0 !important; }
#lrbRoot .lrb-sub { color: var(--lrb-ui-muted) !important; }
#lrbRoot .lrb-section-title { color: var(--lrb-ui-text) !important; font-size: 12px !important; letter-spacing: .04em !important; }

#lrbRoot .lrb-btn,
#lrbRoot .lrb-select,
#lrbRoot .lrb-input {
  min-height: 40px;
  border: 1px solid var(--lrb-ui-border) !important;
  border-radius: 9px !important;
  background: var(--lrb-ui-soft) !important;
  color: var(--lrb-ui-text) !important;
  box-shadow: none !important;
}

#lrbRoot .lrb-btn:hover,
#lrbRoot .lrb-btn.active,
#lrbRoot .lrb-btn.primary {
  border-color: var(--lrb-ui-accent) !important;
  background: color-mix(in srgb, var(--lrb-ui-accent) 22%, var(--lrb-ui-soft)) !important;
  color: var(--lrb-ui-text) !important;
  box-shadow: none !important;
}

#lrbRoot .lrb-side { padding: 12px 16px 10px !important; }
#lrbRoot .lrb-content { padding: 0 16px 18px !important; }
#lrbRoot .lrb-urgent { gap: 8px !important; }
#lrbRoot .lrb-alert {
  padding: 10px 12px !important;
  border: 1px solid var(--lrb-ui-border) !important;
  border-left: 4px solid var(--lrb-ui-orange) !important;
  border-radius: 9px !important;
  background: var(--lrb-ui-card) !important;
  color: var(--lrb-ui-text) !important;
}
#lrbRoot .lrb-alert.emergency { border-left-color: var(--lrb-ui-red) !important; background: var(--lrb-ui-card) !important; }
#lrbRoot .lrb-alert small { color: var(--lrb-ui-muted) !important; }
#lrbRoot .lrb-ai-action {
  border-color: var(--lrb-ui-border) !important;
  background: var(--lrb-ui-soft) !important;
  color: var(--lrb-ui-text) !important;
}
#lrbRoot .lrb-ai-all { color: var(--lrb-ui-blue) !important; }

#lrbRoot .lrb-legend {
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: 8px 12px !important;
  background: var(--lrb-ui-panel) !important;
  border-color: var(--lrb-ui-border) !important;
  border-radius: 9px !important;
}
#lrbRoot .lrb-legend span { color: var(--lrb-ui-muted) !important; font-size: 10px !important; }

#lrbRoot .lrb-kpis {
  border-color: var(--lrb-ui-border) !important;
  border-radius: 10px !important;
  background: var(--lrb-ui-panel) !important;
}
#lrbRoot .lrb-kpi {
  min-height: 58px !important;
  padding: 9px 14px !important;
  background: transparent !important;
  border-color: var(--lrb-ui-border) !important;
  color: var(--lrb-ui-muted) !important;
  filter: none !important;
  transform: none !important;
}
#lrbRoot .lrb-kpi:hover,
#lrbRoot .lrb-kpi.active { background: var(--lrb-ui-soft) !important; box-shadow: inset 0 -3px var(--lrb-ui-accent) !important; }
#lrbRoot .lrb-kpi b { color: var(--lrb-ui-text) !important; }

#lrbRoot .lrb-toolbar { gap: 8px !important; }
#lrbRoot .lrb-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important; gap: 10px !important; }
#lrbRoot .lrb-floor { color: var(--lrb-ui-text) !important; font-size: 13px !important; }
#lrbRoot .lrb-card {
  --state: var(--lrb-ui-accent);
  min-height: 0;
  padding: 0 12px 12px 15px !important;
  border: 1px solid var(--lrb-ui-border) !important;
  border-left: 4px solid var(--state) !important;
  border-radius: 10px !important;
  background: var(--lrb-ui-card) !important;
  box-shadow: none !important;
  transition: border-color .14s ease, transform .14s ease !important;
}
#lrbRoot .lrb-card:hover { border-color: color-mix(in srgb, var(--state) 70%, var(--lrb-ui-border)) !important; transform: translateY(-1px) !important; }
#lrbRoot .lrb-card.stay-arriving { --state: var(--lrb-ui-blue); }
#lrbRoot .lrb-card.stay-in_house { --state: var(--lrb-ui-green); }
#lrbRoot .lrb-card.stay-due_out { --state: var(--lrb-ui-purple); }
#lrbRoot .lrb-card.hk-dirty,
#lrbRoot .lrb-card.hk-cleaning,
#lrbRoot .lrb-card.hk-inspection_pending { --state: var(--lrb-ui-orange); }
#lrbRoot .lrb-card.has-debt,
#lrbRoot .lrb-card.has-issue,
#lrbRoot .lrb-card.hk-maintenance,
#lrbRoot .lrb-card.is-overdue { --state: var(--lrb-ui-red); }
#lrbRoot .lrb-card-top {
  margin: 0 -12px 0 -15px !important;
  padding: 11px 12px 9px 15px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lrb-ui-border);
}
#lrbRoot .lrb-room { color: var(--lrb-ui-text) !important; font-size: 20px !important; line-height: 1.15 !important; }
#lrbRoot .lrb-type { color: var(--lrb-ui-muted) !important; }
#lrbRoot .lrb-pills { max-width: 56%; }
#lrbRoot .lrb-pill {
  padding: 3px 6px !important;
  border-color: color-mix(in srgb, var(--state) 55%, var(--lrb-ui-border)) !important;
  background: color-mix(in srgb, var(--state) 14%, var(--lrb-ui-card)) !important;
  color: var(--lrb-ui-text) !important;
  font-size: 9px !important;
  box-shadow: none !important;
}
#lrbRoot .lrb-pill.lrb-hk { border-color: var(--lrb-ui-border) !important; background: transparent !important; color: var(--lrb-ui-muted) !important; }
#lrbRoot .lrb-lines { gap: 6px !important; margin-top: 10px !important; }
#lrbRoot .lrb-line { font-size: 11px !important; }
#lrbRoot .lrb-line span { color: var(--lrb-ui-muted) !important; }
#lrbRoot .lrb-line b { color: var(--lrb-ui-text) !important; }
#lrbRoot .lrb-warn {
  padding: 6px 8px !important;
  border: 1px solid color-mix(in srgb, var(--lrb-ui-red) 45%, var(--lrb-ui-border)) !important;
  background: color-mix(in srgb, var(--lrb-ui-red) 10%, var(--lrb-ui-card)) !important;
  color: var(--lrb-ui-red) !important;
  box-shadow: none !important;
}
#lrbRoot .lrb-context {
  margin-top: 9px !important;
  padding: 8px !important;
  border-color: var(--lrb-ui-border) !important;
  background: var(--lrb-ui-soft) !important;
  color: var(--lrb-ui-text) !important;
  box-shadow: none !important;
}
#lrbRoot .lrb-card.has-debt .lrb-context { border-color: color-mix(in srgb, var(--lrb-ui-red) 55%, var(--lrb-ui-border)) !important; background: var(--lrb-ui-soft) !important; }

#lrbRoot .lrb-list,
#lrbRoot .lrb-timeline-wrap,
#lrbRoot .lrb-timeline-row,
#lrbRoot .lrb-t-track,
#lrbRoot .lrb-drawer,
#lrbRoot .lrb-panel,
#lrbRoot .lrb-svc-card,
.lrb-action-modal,
.lrb-task-drawer { background: var(--lrb-ui-card, #0d2035) !important; color: var(--lrb-ui-text, #f4f8fc) !important; border-color: var(--lrb-ui-border, #29445f) !important; }

body.s79-theme-light #lrbRoot {
  --lrb-ui-bg: #eef3f8;
  --lrb-ui-panel: #ffffff;
  --lrb-ui-card: #ffffff;
  --lrb-ui-soft: #f2f6fa;
  --lrb-ui-border: #d3deea;
  --lrb-ui-text: #17243a;
  --lrb-ui-muted: #60728a;
  --lrb-ui-accent: #0f9f91;
  --lrb-ui-blue: #2f76d2;
  --lrb-ui-green: #16835a;
  --lrb-ui-orange: #c97316;
  --lrb-ui-red: #d94b54;
  --lrb-ui-purple: #7656b8;
  background: rgba(31, 41, 55, .38) !important;
}
body.s79-theme-light #lrbRoot .lrb-shell { box-shadow: -18px 0 48px rgba(15, 23, 42, .2) !important; }
body.s79-theme-light #lrbRoot .lrb-timeline-head,
body.s79-theme-light #lrbRoot .lrb-timeline-head > div,
body.s79-theme-light #lrbRoot .lrb-t-group,
body.s79-theme-light #lrbRoot .lrb-t-group b,
body.s79-theme-light #lrbRoot .lrb-t-room,
body.s79-theme-light #lrbRoot .lrb-t-track,
body.s79-theme-light #lrbRoot .lrb-mobile-nav { background-color: var(--lrb-ui-panel) !important; color: var(--lrb-ui-text) !important; }
body.s79-theme-light #lrbRoot .lrb-t-room b,
body.s79-theme-light #lrbRoot .lrb-list,
body.s79-theme-light #lrbRoot .lrb-list td,
body.s79-theme-light #lrbRoot .lrb-list th { color: var(--lrb-ui-text) !important; }
body.s79-theme-light #lrbRoot .lrb-t-date small,
body.s79-theme-light #lrbRoot .lrb-t-room small { color: var(--lrb-ui-muted) !important; }

/* Các hộp thao tác được gắn trực tiếp vào body nên cần bộ màu riêng. */
body.s79-theme-light .lrb-action-modal,
body.s79-theme-light .lrb-task-drawer {
  --lrb-ui-card: #ffffff;
  --lrb-ui-soft: #f2f6fa;
  --lrb-ui-border: #d3deea;
  --lrb-ui-text: #17243a;
  --lrb-ui-muted: #60728a;
  background: #ffffff !important;
  color: #17243a !important;
  border-color: #d3deea !important;
}
body.s79-theme-light .lrb-action-modal input,
body.s79-theme-light .lrb-action-modal select,
body.s79-theme-light .lrb-action-modal textarea,
body.s79-theme-light .lrb-task-drawer input,
body.s79-theme-light .lrb-task-drawer select,
body.s79-theme-light .lrb-task-drawer textarea {
  background: #f7f9fc !important;
  color: #17243a !important;
  border-color: #d3deea !important;
}
body.s79-theme-light .lrb-action-backdrop,
body.s79-theme-light .lrb-task-drawer-backdrop { background: rgba(31, 41, 55, .38) !important; }

@media (max-width: 900px) {
  #lrbRoot .lrb-shell { width: 100vw !important; border-radius: 0 !important; }
  #lrbRoot .lrb-head { min-height: auto; }
  #lrbRoot .lrb-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  #lrbRoot .lrb-brand { font-size: 16px !important; }
  #lrbRoot .lrb-urgent { display: block !important; }
  #lrbRoot .lrb-kpis { grid-template-columns: repeat(4, minmax(68px, 1fr)) !important; }
  #lrbRoot .lrb-card { border-radius: 9px !important; }
}

/* v37 — pastel room map, flat rendering and keyed card updates. */
#lrbRoot,
#lrbRoot * {
  animation: none !important;
  transition: none !important;
}
#lrbRoot {
  backdrop-filter: none !important;
  background: rgba(15, 23, 42, .46) !important;
}
#lrbRoot .lrb-shell,
#lrbRoot .lrb-drawer,
#lrbRoot .lrb-card,
#lrbRoot .lrb-alert,
#lrbRoot .lrb-kpi,
#lrbRoot .lrb-btn,
#lrbRoot .lrb-context,
#lrbRoot .lrb-panel {
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
#lrbRoot .lrb-shell {
  width: min(1720px, calc(100vw - 24px)) !important;
  border-radius: 14px 0 0 14px !important;
}
#lrbRoot .lrb-head {
  min-height: 74px;
  padding: 12px 20px !important;
}
#lrbRoot .lrb-brand { font-size: 25px !important; }
#lrbRoot .lrb-sub { font-size: 12px !important; text-transform: none; }
#lrbRoot .lrb-main { background: var(--lrb-ui-bg) !important; }
#lrbRoot .lrb-side { padding: 14px 16px 10px !important; }
#lrbRoot .lrb-section-title { display: none; }
#lrbRoot .lrb-urgent {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
}
#lrbRoot .lrb-ai-head {
  grid-column: 1 / -1;
  min-height: 28px;
  margin: 0 !important;
}
#lrbRoot .lrb-ai-head strong { color: var(--lrb-ui-text) !important; font-size: 15px; }
#lrbRoot .lrb-ai-head small { color: var(--lrb-ui-muted) !important; }
#lrbRoot .lrb-alert {
  min-height: 58px;
  padding: 9px 12px !important;
  border-left-width: 4px !important;
  border-radius: 10px !important;
}
#lrbRoot .lrb-ai-priority {
  display: inline-flex;
  min-width: 34px;
  justify-content: center;
  margin-right: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--lrb-ui-red);
  color: #fff !important;
}
#lrbRoot .lrb-ai-action {
  min-height: 36px;
  padding: 0 12px !important;
  border-radius: 8px !important;
}
#lrbRoot .lrb-legend { display: none !important; }
#lrbRoot .lrb-kpis {
  margin: 8px 0 14px !important;
  border-radius: 12px !important;
}
#lrbRoot .lrb-kpi {
  position: relative;
  min-height: 82px !important;
  padding: 16px 18px 12px 62px !important;
}
#lrbRoot .lrb-kpi::before {
  position: absolute;
  left: 17px;
  top: 18px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--lrb-ui-blue) 12%, var(--lrb-ui-card));
  color: var(--lrb-ui-blue);
  font-size: 18px;
  content: '●';
}
#lrbRoot .lrb-kpi[data-kpi="in_house"]::before { content: '●'; }
#lrbRoot .lrb-kpi[data-kpi="due_out"]::before { content: '▣'; }
#lrbRoot .lrb-kpi[data-kpi="arriving"]::before { content: '➜'; }
#lrbRoot .lrb-kpi[data-kpi="vacant_clean"]::before { content: '✓'; }
#lrbRoot .lrb-kpi[data-kpi="needs_action"]::before { content: '!'; color: var(--lrb-ui-red); }
#lrbRoot .lrb-kpi[data-kpi="needs_action"] { background: color-mix(in srgb, var(--lrb-ui-red) 9%, var(--lrb-ui-card)) !important; }
#lrbRoot .lrb-kpi b { font-size: 24px !important; }
#lrbRoot .lrb-filter-summary { display: none; }
#lrbRoot .lrb-toolbar { margin: 0 0 12px !important; }
#lrbRoot .lrb-filters { max-width: 890px; }
#lrbRoot .lrb-select { min-height: 46px; font-size: 13px; }
#lrbRoot .lrb-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#lrbRoot .lrb-floor { margin: 10px 0 8px !important; }
#lrbRoot .lrb-card {
  --state: var(--lrb-ui-blue);
  --card-bg: #edf6ff;
  --card-border: #9bcaf2;
  min-height: 300px;
  padding: 0 14px 14px !important;
  overflow: hidden;
  border: 1px solid var(--card-border) !important;
  border-left-width: 1px !important;
  border-radius: 12px !important;
  background: var(--card-bg) !important;
  cursor: pointer;
  transition: none !important;
}
#lrbRoot .lrb-shell,
#lrbRoot .lrb-drawer,
#lrbRoot .lrb-toast { transition: none !important; }
#lrbRoot .lrb-card:hover { transform: none !important; border-color: var(--state) !important; }
#lrbRoot .lrb-card.state-danger { --state: #ef4444; --card-bg: #fff0f2; --card-border: #f9a8b1; }
#lrbRoot .lrb-card.state-dirty { --state: #dc7b08; --card-bg: #fff8e8; --card-border: #f2cd7a; }
#lrbRoot .lrb-card.state-inhouse { --state: #0b8f79; --card-bg: #eafbf6; --card-border: #72d9c1; }
#lrbRoot .lrb-card.state-clean { --state: #256fbd; --card-bg: #edf6ff; --card-border: #8fc4ef; }
#lrbRoot .lrb-card.state-arriving { --state: #3b6fc4; --card-bg: #eff5ff; --card-border: #9ab9ee; }
#lrbRoot .lrb-card.state-dueout { --state: #b8610a; --card-bg: #fff7ed; --card-border: #efbd7d; }
#lrbRoot .lrb-card-top {
  min-height: 72px;
  margin: 0 -14px !important;
  padding: 13px 14px 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--state) 18%, transparent) !important;
  background: color-mix(in srgb, var(--state) 6%, var(--card-bg)) !important;
}
#lrbRoot .lrb-room { color: #10203a !important; font-size: 25px !important; }
#lrbRoot .lrb-type { color: #5d6f87 !important; font-size: 13px !important; }
#lrbRoot .lrb-pills { max-width: 54%; }
#lrbRoot .lrb-pill.lrb-stay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--state) 13%, #fff) !important;
  color: var(--state) !important;
  font-size: 10px !important;
}
#lrbRoot .lrb-pill.lrb-stay i { font-style: normal; }
#lrbRoot .lrb-lines { gap: 7px !important; margin-top: 12px !important; }
#lrbRoot .lrb-line { font-size: 12px !important; }
#lrbRoot .lrb-line span { color: #64748b !important; }
#lrbRoot .lrb-line b { color: #17243a !important; }
#lrbRoot .lrb-line b.is-due { color: #e1323e !important; }
#lrbRoot .lrb-line b.is-paid { color: #17243a !important; }
#lrbRoot .lrb-context {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px !important;
  border: 1px solid color-mix(in srgb, var(--state) 54%, transparent) !important;
  background: color-mix(in srgb, var(--state) 7%, var(--card-bg)) !important;
  color: var(--state) !important;
}
#lrbRoot .lrb-card[class*="state-"] .lrb-context {
  border-color: color-mix(in srgb, var(--state) 54%, transparent) !important;
  background: color-mix(in srgb, var(--state) 7%, var(--card-bg)) !important;
  color: var(--state) !important;
}
#lrbRoot .lrb-context span { margin-left: auto; font-size: 19px; }

body.s79-theme-dark #lrbRoot .lrb-card,
body:not(.s79-theme-light) #lrbRoot .lrb-card {
  --card-bg: #10263a;
  --card-border: #315473;
}
body.s79-theme-dark #lrbRoot .lrb-card.state-danger,
body:not(.s79-theme-light) #lrbRoot .lrb-card.state-danger { --card-bg: #301d27; --card-border: #8f4654; }
body.s79-theme-dark #lrbRoot .lrb-card.state-dirty,
body:not(.s79-theme-light) #lrbRoot .lrb-card.state-dirty { --card-bg: #302819; --card-border: #8a692e; }
body.s79-theme-dark #lrbRoot .lrb-card.state-inhouse,
body:not(.s79-theme-light) #lrbRoot .lrb-card.state-inhouse { --card-bg: #12322f; --card-border: #287f70; }
body.s79-theme-dark #lrbRoot .lrb-room,
body:not(.s79-theme-light) #lrbRoot .lrb-room,
body.s79-theme-dark #lrbRoot .lrb-line b,
body:not(.s79-theme-light) #lrbRoot .lrb-line b { color: #f4f8fc !important; }
body.s79-theme-dark #lrbRoot .lrb-type,
body:not(.s79-theme-light) #lrbRoot .lrb-type,
body.s79-theme-dark #lrbRoot .lrb-line span,
body:not(.s79-theme-light) #lrbRoot .lrb-line span { color: #a8b9ca !important; }
body.s79-theme-dark #lrbRoot .lrb-line b.is-due,
body:not(.s79-theme-light) #lrbRoot .lrb-line b.is-due { color: #ff8992 !important; }

@media (max-width: 1450px) {
  #lrbRoot .lrb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) {
  #lrbRoot .lrb-urgent { grid-template-columns: 1fr !important; }
  #lrbRoot .lrb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  #lrbRoot .lrb-grid { grid-template-columns: 1fr !important; }
  #lrbRoot .lrb-card { min-height: 0; }
  #lrbRoot .lrb-kpi { min-width: 110px !important; padding-left: 12px !important; }
  #lrbRoot .lrb-kpi::before { display: none; }
}