/* Meeting Rooms (Phòng họp) — Nexa Mini App styles.
 * Self-contained. Design tokens (NewEra) keyed on [data-mode] EXACTLY like the
 * source design system; app.js mirrors the host colorScheme (or the OS scheme
 * when standalone) onto <html data-mode>. Room UI block below is ported verbatim
 * from the design's styles/bizapp.css "Meeting Rooms" section. */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-15: 15px;
  --text-16: 16px; --text-18: 18px; --text-20: 20px; --text-24: 24px; --text-32: 32px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-full: 999px;
  /* content measures — 3 dải bề rộng của design (styles/tokens.css) */
  --mod-w: 960px;  /* dashboard, lưới card */
  --list-w: 860px; /* list dày, bảng */
  --read-w: 760px; /* nội dung đọc, danh sách thưa */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 120ms; --d-base: 180ms; --d-slow: 280ms;

  --accent-h: 239; --accent-s: 84%; --accent-l: 67%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 58%);
  --accent-soft: hsl(var(--accent-h) 94% 96%);
  --accent-softer: hsl(var(--accent-h) 100% 98%);
  --accent-ring: hsla(239, 84%, 67%, 0.28);
}

/* ---------- LIGHT ---------- */
:root, [data-mode='light'] {
  --bg: #f4f5f9; --bg-panel: #ffffff; --bg-elev: #ffffff; --bg-hover: #f3f4f8;
  --bg-active: #eef0f6; --bg-sidebar: #f8f9fc; --bg-rail: #ffffff; --bg-chat: #f4f5f9;
  --text: #0f1220; --text-2: #454a63; --text-muted: #6b7185; --text-dim: #9aa0b4; --text-on-accent: #ffffff;
  --border: #e6e8ef; --border-subtle: #eef0f6; --border-strong: #d5d9e4;
  --shadow-sm: 0 1px 2px rgba(15, 18, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 18, 32, 0.06), 0 1px 2px rgba(15, 18, 32, 0.04);
  --shadow-pop: 0 20px 48px rgba(15, 18, 32, 0.18), 0 2px 6px rgba(15, 18, 32, 0.06);
  --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
}

/* ---------- DARK (incl. design's re-tuned accent for dark surfaces) ---------- */
[data-mode='dark'] {
  --bg: #0f1115; --bg-panel: #161922; --bg-elev: #1c2030; --bg-hover: #1f2331;
  --bg-active: #262b3c; --bg-sidebar: #141721; --bg-rail: #0d0f15; --bg-chat: #0f1115;
  --text: #eceef5; --text-2: #b8bccc; --text-muted: #8a90a3; --text-dim: #5c6278; --text-on-accent: #ffffff;
  --border: #262a36; --border-subtle: #1e222e; --border-strong: #323747;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 20px 48px rgba(0, 0, 0, 0.6);
  --success: #10b981; --warning: #f59e0b; --danger: #ef4444;
  --accent-strong: hsl(var(--accent-h) var(--accent-s) 74%);
  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 12%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-14);
  color: var(--text);
  background: var(--bg-chat);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
::selection { background: var(--accent-ring); color: var(--text); }

/* scrollbar (theme-aware, from the design base) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 25%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 45%, transparent); background-clip: padding-box; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

@keyframes neFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes neScaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
/* Toast KHÔNG dùng transform để căn giữa: một keyframes nào khai lại `transform`
   là phần dịch ngang bị xoá suốt lúc animate → toast hiện lệch phải nửa chiều
   rộng rồi nhảy vào giữa. Việc căn giữa giao cho .rm-toast-wrap (flex), nên
   `transform` của toast chỉ còn phục vụ animation. */
@keyframes rmToastIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

#app { height: 100vh; display: flex; flex-direction: column; min-height: 0; }
.status-msg { margin: auto; color: var(--text-muted); font-size: var(--text-14); padding: 40px; text-align: center; }

/* generic button + icon button (design components.css equivalents) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: var(--r-md); font-weight: 600; font-size: var(--text-14); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-strong); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }
.btn.ghost { background: var(--bg-panel); color: var(--text-2); border-color: var(--border); }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn.sm { padding: 6px 12px; font-size: var(--text-13); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* modal shell (design kb.css equivalents) */
/* Top-anchored (not vertically centered): when the modal content grows — e.g. the
   day-bar + conflict warning appear after picking a time — a centered modal would
   re-center and visibly jump. Anchoring to the top keeps its position stable and
   just extends downward. The scrim scrolls if the modal is taller than the viewport. */
.kb-modal-scrim { position: fixed; inset: 0; background: rgba(15, 18, 32, 0.45); display: grid; place-items: start center; padding: 5vh 20px 24px; z-index: 100; overflow-y: auto; }
/* Modal ngắn (confirm) căn giữa màn hình; modal dài (form đặt phòng) vẫn neo
   trên để còn chỗ scroll. */
.kb-modal-scrim.rm-scrim-center { place-items: center; }
/* fade+slide ONLY on first open (added by app.js); replaying it on every
   re-render is what made the overlay jump ~4px when picking a time */
.kb-modal-scrim.rm-anim { animation: neFadeIn var(--d-fast) ease; }
.kb-share { width: 100%; max-width: 460px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
/* scale-in only on FIRST open (added by app.js); re-renders (e.g. picking a time)
   must NOT replay the animation or the modal visibly jitters */
.kb-share.rm-anim { animation: neScaleIn var(--d-base) var(--ease-out); }
/* ============================================================
   Meeting Rooms (Phòng họp) app
   ============================================================ */
.rm-app { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rm-footnote { flex-shrink: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 22px; border-top: 1px solid var(--border-subtle); background: var(--bg-panel); font-size: var(--text-12); color: var(--text-muted); }
.rm-footnote svg { color: var(--text-dim); flex-shrink: 0; }
.rm-footnote a { color: var(--accent-strong); font-family: var(--font-mono); font-size: 0.95em; text-decoration: none; word-break: break-all; }
.rm-footnote a:hover { text-decoration: underline; }
.rm-topbar { display: flex; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; flex-wrap: wrap; }
.rm-role { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-active); border-radius: var(--r-md); }
.rm-role button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: transparent; border-radius: var(--r-sm); font-family: inherit; font-size: var(--text-13); font-weight: 600; color: var(--text-muted); cursor: pointer; }
.rm-role button.on { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-sm); }
.rm-topbar-tabs { display: flex; gap: 2px; }
.rm-topbar-div { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }
.rm-tab { position: relative; padding: 7px 13px; border: none; background: transparent; border-radius: var(--r-md); font-family: inherit; font-size: var(--text-14); font-weight: 500; color: var(--text-2); cursor: pointer; }
.rm-tab:hover { background: var(--bg-hover); }
.rm-tab.on { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.rm-tab-badge { margin-left: 6px; font-size: 10px; font-weight: 700; background: var(--danger); color: #fff; padding: 1px 6px; border-radius: var(--r-full); }
.rm-topbar-sp { flex: 1; }
.rm-notif-wrap { position: relative; }
.rm-notif-btn { position: relative; width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.rm-notif-btn:hover, .rm-notif-btn.on { background: var(--bg-hover); color: var(--text); }
.rm-notif-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; background: var(--danger); color: #fff; border-radius: var(--r-full); display: grid; place-items: center; }
.rm-notif-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 320px; padding: 8px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.rm-notif-hd { font-size: var(--text-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 6px 8px; }
.rm-notif-empty { padding: 16px 8px; color: var(--text-dim); font-size: var(--text-13); }
.rm-notif-item { display: flex; gap: 10px; padding: 9px 8px; border-radius: var(--r-md); }
.rm-notif-item:hover { background: var(--bg-hover); }
.rm-notif-ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, #d9730d 15%, transparent); color: #d9730d; }
.rm-notif-tx { font-size: var(--text-13); color: var(--text); line-height: 1.4; }
.rm-notif-sub { font-size: var(--text-12); color: var(--text-muted); margin-top: 2px; }

.rm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 22px 60px; }

/* room cards (end-user) */
.rm-rooms { max-width: var(--read-w); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.rm-bldgroup { display: flex; flex-direction: column; gap: 10px; }
/* Khoảng cách GIỮA hai toà nhà phải lớn hơn khoảng cách giữa các phòng TRONG một
   toà, không thì header toà sau dính vào thẻ phòng cuối của toà trước và mắt đọc
   nó như một phòng nữa (QC bắt được ở tab Quản lý phòng). .rm-list là flex + gap
   10px nên margin ở đây CỘNG vào gap — 14 + 10 = 24px, gấp hơn hai lần khoảng
   trong nhóm. Chỉ đặt cho nhóm thứ hai trở đi, để nhóm đầu không thừa lề trên. */
.rm-bldgroup + .rm-bldgroup { margin-top: 14px; }
.rm-bldhd { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
/* RB-BLDCRUD — header nhóm giờ có thêm 2 nút Sửa/Xoá. Bó padding lại để trên màn
   hẹp phần chữ (đã có min-width:0 + ellipsis ở .rm-bld-tx) co trước, không phải nút. */
.rm-bldhd .rm-mini-btn { padding: 5px 10px; }
.rm-bld-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--r-md); display: grid; place-items: center; background: var(--bg-active); color: var(--text-2); }
.rm-bld-tx { flex: 1; min-width: 0; }
/* #399 — cắt gọn MỌI chỗ hiển thị tên do người dùng nhập. Trần ký tự ở backend
   (tên toà 160, tên phòng 120) vẫn cho những chuỗi dài hơn một dòng, và dữ liệu
   dev đang có một toà tên 160 ký tự: không cắt thì nó đẩy vỡ hàng chip filter và
   header nhóm phòng. `min-width: 0` trên .rm-bld-tx đã có sẵn — thiếu nó thì
   ellipsis không bao giờ chạy trong flex. */
.rm-bldnm { font-size: var(--text-15); font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-bldaddr { font-size: var(--text-12); color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-bldcount { flex-shrink: 0; font-size: var(--text-12); font-weight: 600; color: var(--text-dim); background: var(--bg-active); padding: 2px 9px; border-radius: var(--r-full); }
.rm-bldrooms { display: flex; flex-direction: column; gap: 10px; }
.rm-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.rm-filter { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 13px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-panel); color: var(--text-2); font-family: inherit; font-size: var(--text-13); font-weight: 600; cursor: pointer; }
.rm-filter:hover { background: var(--bg-hover); }
.rm-filter.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.rm-empty.sm { padding: 12px; font-size: var(--text-13); }
.rm-cta { display: flex; align-items: center; gap: 16px; padding: 15px 18px; border: 1px solid color-mix(in srgb, #0f8a5b 32%, var(--border)); border-radius: var(--r-lg); background: linear-gradient(110deg, color-mix(in srgb, #0f8a5b 9%, transparent), transparent); }
.rm-cta-tx { flex: 1; min-width: 0; }
.rm-cta-ttl { font-size: var(--text-15); font-weight: 700; letter-spacing: -0.01em; }
.rm-cta-sub { font-size: var(--text-13); color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.rm-cta .btn.primary { flex-shrink: 0; }
.rm-roomcard { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); }
.rm-roomcard > .btn { flex-shrink: 0; align-self: center; }
.rm-roomcard-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rm-roomcard-slots-lbl { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-right: 2px; }
.rm-slotchip { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: #0f8a5b; background: color-mix(in srgb, #0f8a5b 12%, transparent); padding: 2px 8px; border-radius: var(--r-sm); }
.rm-slotchip.none { color: var(--text-muted); background: var(--bg-active); font-weight: 500; }
.rm-roomcard-ic { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-lg); display: grid; place-items: center; color: #fff; }
.rm-roomcard-ic.sm { width: 36px; height: 36px; border-radius: var(--r-md); }
.rm-roomcard-tx { flex: 1; min-width: 0; }
.rm-roomcard-nm { font-size: var(--text-15); font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-roomcard-meta { font-size: var(--text-13); color: var(--text-muted); margin-top: 2px; }
.rm-roomcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rm-amen { font-size: 11px; font-weight: 500; color: var(--text-2); background: var(--bg-active); padding: 2px 8px; border-radius: var(--r-full); }

/* generic list */
.rm-list { max-width: var(--read-w); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.rm-list-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; font-size: var(--text-14); font-weight: 600; color: var(--text-2); }
/* Khoảng ngày trong tiêu đề "N suất đặt trong 7 ngày tới (…)" — cùng token với design. */
.rm-list-hd-sub { font-weight: 500; color: var(--text-dim); }
.rm-empty { padding: 48px; text-align: center; color: var(--text-dim); font-size: var(--text-14); }
.rm-bkrow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); }
.rm-bkrow.muted { opacity: 0.72; }
.rm-bk-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.rm-bk-tx { flex: 1; min-width: 0; }
.rm-bk-nm { display: flex; align-items: center; gap: 8px; font-size: var(--text-14); font-weight: 600; min-width: 0; }
/* Tiêu đề PHẢI nằm trong span riêng: .rm-bk-nm là flex container, một text node
   trần thành anonymous flex item mà CSS không chọn được — text-overflow đặt trên
   container không cắt được nó, nên tiêu đề dài đẩy văng nút Sửa/Huỷ (#416). */
.rm-bk-ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-bk-meta { font-size: var(--text-13); color: var(--text-muted); margin-top: 2px; }
.rm-bk-flag { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 1px 7px; border-radius: 5px; background: color-mix(in srgb, #d9730d 16%, transparent); color: #d9730d; }
.rm-bk-flag.cancel { background: var(--bg-active); color: var(--text-muted); }
.rm-bk-flag.ok { background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent); color: var(--success, #16a34a); }
.rm-bk-flag.no { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.rm-bk-flag.inv { background: color-mix(in srgb, #0f8a5b 16%, transparent); color: #0f8a5b; }
.rm-mini-btn { flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text-2); font-family: inherit; font-size: var(--text-13); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rm-mini-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text); }
.rm-mini-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* admin room block (room + its bookings) */
.rm-roomblock { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); overflow: hidden; }
.rm-roomblock-hd { border: none; border-radius: 0; }
.rm-roomblock-list { border-top: 1px solid var(--border-subtle); padding: 6px 16px 10px 46px; display: flex; flex-direction: column; }
.rm-field-row { flex-direction: row; align-items: flex-start; gap: 8px; }
.rm-field-row input[type='checkbox'] { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); }
.rm-field-row .rm-field-lbl { font-weight: 500; }
/* #571 — khối chuỗi lặp trong "Suất đặt của tôi": hàng chính + danh sách buổi
   thu/mở. Dùng lại .rm-sublist-hd/.rm-subrow của tab Quản lý phòng, chỉ cần bù
   thụt lề vì ở đây không có cột icon phòng như bên kia. */
.rm-bkgroup { display: flex; flex-direction: column; gap: 2px; }
/* Các buổi tiếp theo thụt vào so với hàng chính, để thấy chúng THUỘC suất phía
   trên chứ không phải suất ngang hàng. Thụt bằng padding của khối con, không
   bằng margin của .rm-bkgroup — .rm-list là flex + gap nên margin ở đây sẽ cộng
   thêm vào khoảng cách giữa các nhóm. */
/* Một rule cho cả hai phần tử: đặt margin ở rule này rồi override ở rule sau là
   cách hai dòng CSS tự huỷ nhau. Vạch dọc gánh cùng việc với thụt lề — nó vẫn
   nói "thuộc suất phía trên" khi hàng chính đã cuộn khỏi màn hình. */
.rm-bkgroup .rm-sublist-hd,
.rm-bkgroup .rm-subrow {
  margin-left: 16px;
  border-left: 2px solid var(--border-subtle);
  padding-left: 14px;
}
.rm-bkgroup .rm-sublist-hd { padding-top: 6px; padding-bottom: 4px; padding-right: 0; }
.rm-bkgroup .rm-subrow { padding-top: 6px; padding-bottom: 6px; padding-right: 16px; }

/* Lý do huỷ trong tab Lịch sử: một câu người viết, nên cho nó xuống dòng thay
   vì nối vào hàng meta (hàng đó là chuỗi field ngắn, nowrap). */
.rm-bk-why { margin-top: 3px; font-size: var(--text-12); color: var(--text-2); font-style: italic; }
.rm-sublist-hd { display: flex; align-items: center; gap: 7px; width: 100%; margin: 2px 0 2px -26px; padding: 5px 0; background: none; border: none; font-size: var(--text-12); font-weight: 600; color: var(--text-2); cursor: pointer; }
.rm-sublist-hd:hover { color: var(--text); }
.rm-sublist-cnt { font-size: var(--text-11); font-weight: 700; color: var(--text-muted); background: var(--bg-active); border-radius: var(--r-full); padding: 1px 7px; }
.rm-caret { flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-muted); }
.rm-caret .ic { transition: transform var(--d-fast) var(--ease-out); }
.rm-sublist-hd.on .rm-caret .ic { transform: rotate(180deg); }
/* Đã thu: chỉ còn hàng tiêu đề, bỏ padding dưới cho khỏi hở. */
.rm-roomblock-list.collapsed { padding-bottom: 4px; }
.rm-subday { font-size: var(--text-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 9px 0 3px; }
.rm-subday:first-child { padding-top: 4px; }
.rm-showmore { align-self: flex-start; margin-top: 7px; background: none; border: none; padding: 4px 0; font-size: var(--text-12); font-weight: 600; color: var(--accent); cursor: pointer; }
.rm-showmore:hover { text-decoration: underline; }
.rm-showmore + .rm-showmore { margin-top: 0; color: var(--text-muted); }
.rm-subrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.rm-subrow + .rm-subrow { border-top: 1px solid var(--border-subtle); }
/* flex-shrink:0 trước đây khiến tiêu đề dài đẩy .rm-subrow-meta ra ngoài hàng —
   cho phép co lại, phần thừa do .rm-bk-ttl cắt bằng ellipsis (#416). */
.rm-subrow-nm { display: flex; align-items: center; gap: 8px; font-size: var(--text-13); font-weight: 500; color: var(--text); min-width: 0; }
.rm-subrow-meta { font-size: var(--text-12); color: var(--text-muted); margin-left: auto; padding-left: 10px; text-align: right; white-space: nowrap; flex-shrink: 0; }

/* exception card */
.rm-exccard { padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); }.rm-exc-hd { display: flex; align-items: center; gap: 12px; }
.rm-exc-reason { margin: 12px 0 14px; padding: 10px 14px; background: var(--bg-active); border-radius: var(--r-md); font-size: var(--text-13); color: var(--text-2); font-style: italic; }
.rm-exc-ft { display: flex; justify-content: flex-end; gap: 10px; }

/* modals */
.rm-modal { width: min(480px, 96vw); padding: 0; }
.rm-modal-lg { width: min(660px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
/* #546 — body cuộn được cho MỌI modal, không riêng .rm-modal-lg.
   .kb-share đã cap 92vh + overflow:hidden, nên modal nào không cho body cuộn thì
   phần vượt ngưỡng bị XÉN — mất luôn .rm-modal-ft, tức mất nút submit. Dialog
   "Tạo phòng họp" dính đúng vậy (dữ liệu có toà nhà tên 160 ký tự đẩy cao lên);
   dialog ngoại lệ cùng bệnh, chỉ chưa đủ cao để lộ.
   min-height:0 là bắt buộc: flex item mặc định min-height:auto nên không co lại
   được, body cứ đẩy footer ra ngoài dù đã khai overflow. */
.rm-modal .rm-modal-body { overflow-y: auto; min-height: 0; }
.rm-modal .rm-modal-ft { flex-shrink: 0; }
/* format segmented control */
.rm-seg { display: flex; gap: 8px; }
.rm-seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text-2); font-family: inherit; font-size: var(--text-13); font-weight: 600; cursor: pointer; }
.rm-seg-btn:hover { background: var(--bg-hover); }
.rm-seg-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.rm-seg-btn svg { flex-shrink: 0; }
/* online platform picker with connector status */
.rm-platgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rm-plat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); font-family: inherit; cursor: pointer; text-align: left; transition: border-color var(--d-fast); }
.rm-plat:hover { border-color: var(--border-strong); }
.rm-plat.on { border-color: var(--accent); background: var(--accent-soft); }
.rm-plat.off { opacity: 0.9; }
.rm-plat.off.on { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.rm-plat-nm { font-size: var(--text-14); font-weight: 600; }
.rm-plat-stat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.rm-plat-stat.ok { color: #0f8a5b; }
.rm-plat-stat.no { color: var(--text-muted); }
.rm-botrecap { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-top: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); font-family: inherit; cursor: pointer; }
.rm-botrecap:hover { border-color: var(--border-strong); }
.rm-botrecap.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
.rm-botrecap-tx { flex: 1; min-width: 0; }
.rm-botrecap-ttl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-14); font-weight: 600; }
.rm-botrecap-sub { display: block; font-size: var(--text-12); color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.rm-switch { flex-shrink: 0; width: 40px; height: 23px; border-radius: var(--r-full); background: var(--border-strong); position: relative; transition: background var(--d-fast); }
.rm-switch.on { background: var(--accent); }
.rm-switch-knob { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform var(--d-fast); }
.rm-switch.on .rm-switch-knob { transform: translateX(17px); }
/* room picker (offline/hybrid) */
.rm-roompick { display: flex; flex-direction: column; gap: 12px; }
.rm-roompick-bl { display: flex; flex-direction: column; gap: 6px; }
.rm-roompick-blhd { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.rm-roompick-list { display: flex; flex-direction: column; gap: 6px; }
.rm-roompick-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); font-family: inherit; cursor: pointer; transition: border-color var(--d-fast); }
.rm-roompick-item:hover { border-color: var(--border-strong); }
.rm-roompick-item.on { border-color: var(--accent); background: var(--accent-soft); }
.rm-roompick-item.busy { opacity: 0.72; }
.rm-roompick-item.busy.on { opacity: 1; border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.rm-roompick-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.rm-roompick-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-roompick-nm { font-size: var(--text-14); font-weight: 600; }
.rm-roompick-meta { font-size: var(--text-12); color: var(--text-muted); margin-top: 1px; }
.rm-roompick-stat { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-dim); background: var(--bg-active); padding: 2px 9px; border-radius: var(--r-full); }
.rm-roompick-stat.free { color: #0f8a5b; background: color-mix(in srgb, #0f8a5b 13%, transparent); }
.rm-roompick-stat.busy { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.rm-field-hint { font-weight: 400; color: var(--text-dim); }
/* Bộ đếm ký tự tiêu đề khi đã vượt trần — cùng màu với rm-warn để mắt nhảy
   thẳng vào con số thay vì phải đọc dòng cảnh báo bên dưới (#416). */
.rm-field-hint.over { color: var(--danger); font-weight: 600; }
/* availability bar (minute-precision positioned bands) */
.rm-daybar { position: relative; height: 42px; border-radius: var(--r-sm); overflow: hidden; background: color-mix(in srgb, var(--success, #16a34a) 28%, var(--bg-active)); }
.rm-band { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.rm-daybar-pick { cursor: crosshair; touch-action: none; }
.rm-daybar-pick:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
/* Khung giờ đã có người đặt: sọc màu accent thay cho xám nhạt. Xám cũ gần như
   trùng nền panel nên nhìn lướt không thấy phòng đang bận. Giữ sọc 45° để vẫn
   đọc ra "đã chiếm" khi in đen trắng hoặc với người khó phân biệt màu. */
.rm-band.busy { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 82%, transparent) 0 7px, color-mix(in srgb, var(--accent) 58%, transparent) 7px 14px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.rm-band.past { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--bg) 88%, transparent) 0 6px, color-mix(in srgb, var(--bg) 70%, transparent) 6px 12px); }
.rm-band.pbusy { background: color-mix(in srgb, #d9730d 42%, transparent); }
.rm-band.sel { background: color-mix(in srgb, var(--text) 80%, transparent); border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); }
.rm-band.sel.bad { background: color-mix(in srgb, var(--danger) 50%, transparent); box-shadow: none; }
.rm-ruler { position: relative; height: 16px; margin-top: 3px; }
.rm-ruler span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--text-dim); }
.rm-ruler span:first-child { transform: translateX(0); }
.rm-ruler span:last-child { transform: translateX(-100%); }
.rm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--text-muted); }
.rm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rm-lg { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); }
.rm-lg.free { background: color-mix(in srgb, var(--success, #16a34a) 28%, var(--bg-active)); }
.rm-lg.busy { background: var(--bg-active); }
.rm-lg.past { background: var(--bg-active); opacity: 0.6; }
.rm-lg.sel { background: var(--accent); border-color: var(--accent); }
.rm-lg.pbusy { background: color-mix(in srgb, #d9730d 42%, transparent); }
/* time inputs */
.rm-time-row { display: flex; align-items: flex-end; gap: 10px; }
.rm-time { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rm-time span { font-size: var(--text-12); color: var(--text-muted); }
.rm-time input { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-panel); font-family: inherit; font-size: var(--text-14); color: var(--text); outline: none; }
.rm-time input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
[data-mode='dark'] .rm-time input::-webkit-calendar-picker-indicator, [data-mode='dark'] .rm-input::-webkit-calendar-picker-indicator, [data-mode='dark'] .rm-date-native::-webkit-calendar-picker-indicator { filter: invert(0.85); }
.rm-time-dash { padding-bottom: 10px; color: var(--text-dim); }
.rm-repeat-from { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-active); font-size: var(--text-14); color: var(--text-2); }
/* warnings */
.rm-warn.soft { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: var(--text-13); color: var(--danger); }
.rm-warn.hard { padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: var(--r-md); }
.rm-warn-tx { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-13); color: var(--text); line-height: 1.45; }
.rm-warn-tx svg { color: var(--danger); flex-shrink: 0; margin-top: 1px; }
.rm-warn-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.rm-chosen { margin-top: 10px; font-size: var(--text-13); color: var(--text-2); }
/* participants */
.rm-part-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-part-chips:not(:empty) { margin-bottom: 8px; }
.rm-part-row { display: flex; gap: 8px; }
.rm-amen-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rm-amen-chip { padding: 5px 11px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-family: inherit; font-size: var(--text-12); font-weight: 500; cursor: pointer; }
.rm-amen-chip:hover { border-style: solid; border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.rm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 5px 4px 11px; background: var(--bg-active); border-radius: var(--r-sm); font-size: var(--text-13); font-weight: 500; color: var(--text); }
.rm-chip button { border: none; background: none; cursor: pointer; color: var(--text-muted); display: grid; place-items: center; padding: 2px; border-radius: var(--r-xs); }
.rm-chip button:hover { background: var(--bg-hover); color: var(--text); }
.rm-part-add { position: relative; flex: 1; min-width: 120px; }
.rm-part-add .rm-input { width: 100%; }
.rm-part-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 240px; padding: 6px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.rm-part-menu button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 7px 10px; border: none; background: none; border-radius: var(--r-sm); font-family: inherit; cursor: pointer; }
.rm-part-menu button:hover { background: var(--bg-hover); }
.rm-part-menu button b { font-size: var(--text-13); font-weight: 600; color: var(--text); }
.rm-part-menu button span { font-size: var(--text-12); color: var(--text-muted); }
.rm-findbtn { align-self: flex-start; margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--accent-strong); font-family: inherit; font-size: var(--text-13); font-weight: 600; cursor: pointer; }
.rm-findbtn:hover { background: var(--accent-soft); border-color: var(--accent); }
.rm-findbtn.on { background: var(--accent-soft); border-color: var(--accent); }
.rm-modal-hd { display: flex; align-items: center; gap: 12px; padding: 18px 20px 6px; }
.rm-modal-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; }
.rm-modal-hd-tx { flex: 1; min-width: 0; }
.rm-modal-ttl { font-size: var(--text-16); font-weight: 700; letter-spacing: -0.01em; }
.rm-modal-sub { font-size: var(--text-13); color: var(--text-muted); margin-top: 1px; }
.rm-modal-body { padding: 12px 20px 4px; display: flex; flex-direction: column; gap: 16px; }
.rm-field { display: flex; flex-direction: column; gap: 8px; }
.rm-field-lbl { font-size: var(--text-13); font-weight: 600; color: var(--text-2); }
.rm-date-row { display: flex; gap: 8px; }
/* #399 (vòng 2) — hàng chọn TOÀ NHÀ khác hàng chọn ngày: số chip không cố định
   và tên do người dùng nhập, nên chip phải ăn theo độ dài tên rồi wrap xuống
   dòng. Dùng chung `flex: 1` + `min-width: 0` của .rm-date-btn thì 8 toà chia
   đều thành 8 chip tí hon, cắt còn "Li…" — QC bắt được ở form Tạo phòng. */
.rm-bldpick { flex-wrap: wrap; }
.rm-bldpick .rm-date-btn { flex: 0 1 auto; max-width: 220px; }
.rm-date-btn { flex: 1; min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text-2); font-family: inherit; font-size: var(--text-13); font-weight: 500; cursor: pointer; }
.rm-date-btn:hover { background: var(--bg-hover); }
.rm-date-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.rm-date-input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text-2); font-family: inherit; font-size: var(--text-13); font-weight: 500; cursor: pointer; }
.rm-date-input:hover { background: var(--bg-hover); }
.rm-date-input.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.rm-date-input.on::-webkit-calendar-picker-indicator { filter: invert(1); }
.rm-date-cal-wrap { position: relative; flex: 1; min-width: 0; }
.rm-date-cal { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text-2); font-family: inherit; font-size: var(--text-13); font-weight: 500; cursor: pointer; white-space: nowrap; }
.rm-date-cal:hover { background: var(--bg-hover); }
.rm-date-cal.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.rm-date-cal.dim { color: var(--text-muted); border-style: dashed; }
.rm-date-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.rm-link-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; position: relative; }
.rm-link-ic { position: absolute; left: 12px; color: var(--text-muted); display: grid; place-items: center; pointer-events: none; }
.rm-link-input { flex: 1; min-width: 0; padding-left: 36px; }
.rm-link-toggle { flex: 0 0 auto; border: none; background: none; color: var(--accent); font-family: inherit; font-size: var(--text-12); font-weight: 600; cursor: pointer; padding: 4px 2px; }
.rm-link-toggle:hover { text-decoration: underline; }
.rm-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rm-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); color: var(--text); font-family: inherit; font-size: var(--text-13); font-weight: 600; cursor: pointer; }
.rm-slot:hover:not(.busy) { border-color: var(--accent); }
.rm-slot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rm-slot.busy { background: var(--bg-active); color: var(--text-dim); cursor: not-allowed; text-decoration: line-through; }
.rm-slot-end { font-size: 10px; font-weight: 500; opacity: 0.7; }
.rm-input { padding: 10px 13px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-panel); font-family: inherit; font-size: var(--text-14); color: var(--text); outline: none; width: 100%; }
.rm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.rm-input:disabled { color: var(--text-muted); background: var(--bg-active); }
.rm-textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
.rm-conflict { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; background: color-mix(in srgb, #d9730d 12%, transparent); border-radius: var(--r-md); font-size: var(--text-13); color: var(--text-2); line-height: 1.45; }
.rm-conflict svg { color: #d9730d; flex-shrink: 0; margin-top: 1px; }
.rm-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; background: var(--bg-active); border-radius: var(--r-md); font-size: var(--text-13); color: var(--text-muted); line-height: 1.45; }
.rm-note svg { flex-shrink: 0; margin-top: 1px; }
.rm-link { border: none; background: none; padding: 0; color: var(--accent); font-weight: 600; font-family: inherit; font-size: inherit; cursor: pointer; text-decoration: underline; }
.rm-modal-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px 18px; }
/* invitation toggle + repeat */
.rm-invite { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel); cursor: pointer; font-family: inherit; text-align: left; }
.rm-invite:hover { border-color: var(--border-strong); }
.rm-invite.on { border-color: var(--accent); background: var(--accent-soft); }
.rm-invite .rm-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--r-sm); border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: #fff; }
.rm-invite.on .rm-check { background: var(--accent); border-color: var(--accent); }
.rm-invite-tx { flex: 1; min-width: 0; }
.rm-invite-nm { display: block; font-size: var(--text-14); font-weight: 600; color: var(--text); }
.rm-invite-sub { display: block; font-size: var(--text-12); color: var(--text-muted); margin-top: 1px; }
.rm-invite > svg { color: var(--text-muted); flex-shrink: 0; }
.rm-invite.on > svg { color: var(--accent-strong); }

/* ── app-level additions (not in the design's bizapp.css) ── */
/* toast */
.rm-toast-wrap { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 200; display: flex; justify-content: center; pointer-events: none; }
.rm-toast { background: var(--text); color: var(--bg-panel); font-size: var(--text-13); font-weight: 600; padding: 10px 18px; border-radius: var(--r-full); box-shadow: var(--shadow-pop); max-width: 90%; }
/* animate chỉ ở lần dựng đầu — mỗi render lại tạo node mới, replay animation
   sẽ nháy dù không còn lệch chỗ. */
.rm-toast.rm-anim-in { animation: rmToastIn var(--d-base) var(--ease-out); }
/* auto-link input must clear the absolute lock icon (beat .rm-input's later padding shorthand) */
.rm-link-row .rm-link-input { padding-left: 38px; }
/* let rm-modal / rm-modal-lg reach their design widths (kb-share's 460 cap must not shrink them) */
.kb-share.rm-modal { max-width: min(480px, 96vw); }
.kb-share.rm-modal-confirm { max-width: min(420px, 96vw); }
.kb-share.rm-modal-lg { max-width: min(660px, 96vw); }
/* our custom date field uses .rm-date-input (design used .rm-date-native) —
   extend the dark calendar-picker-indicator invert so its icon shows on dark */
[data-mode='dark'] .rm-date-input::-webkit-calendar-picker-indicator { filter: invert(0.85); }