/* =========================================================
   S.E.A ROOM MANAGEMENT — APPLICATION STYLES
   Cleaned from V17.3.2 without reordering the cascade.
   ========================================================= */

* { box-sizing: border-box; }
:root {
  --sea-red: #e20d20;
  --sea-red-dark: #bd0717;
  --sea-orange: #ed6417;
  --sea-purple: #7c2bbd;
  --ink-950: #151820;
  --ink-900: #20242e;
  --ink-800: #303746;
  --ink-700: #4d5667;
  --ink-600: #657083;
  --ink-500: #7d8798;
  --surface: #ffffff;
  --surface-soft: #f7f8fb;
  --surface-tint: #fff7f7;
  --line: #e9ebf0;
  --green: #20a66a;
  --green-soft: #eaf8f1;
  --orange-soft: #fff2e9;
  --purple-soft: #f5edfb;
  --red-soft: #fff0f1;
  --shadow-sm: 0 8px 22px rgba(31, 36, 48, 0.05);
  --shadow-md: 0 18px 48px rgba(31, 36, 48, 0.10);
  --shadow-lg: 0 28px 80px rgba(31, 36, 48, 0.15);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --sidebar: 270px;
  font-synthesis: none;
}
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-900);
  background: var(--surface-soft);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
input, select { outline: none; }
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hidden { display: none !important; }

/* LOGIN */

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(480px, 1.15fr) minmax(430px, .85fr);
  background: #fff;
}
.eyebrow, .panel-kicker {
  color: var(--sea-red);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
}
.muted { color: var(--ink-600); }
.auth-form {
  display: grid;
  gap: 10px;
  margin-top: 34px;
}
.auth-form label, .form-field label {
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 750;
}
.auth-form label:not(:first-child) { margin-top: 8px; }
.input-wrap {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  transition: .2s ease;
}
.input-wrap:focus-within { border-color: rgba(226,13,32,.58); box-shadow: 0 0 0 4px rgba(226,13,32,.07); }
.input-wrap svg { width: 18px; color: var(--ink-500); }
.input-wrap input {
  border: 0;
  width: 100%;
  min-width: 0;
  color: var(--ink-900);
  font-size: 15px;
  background: transparent;
}
.form-message {
  min-height: 20px;
  margin: 4px 0 0;
  color: var(--sea-red);
  font-size: 13px;
  line-height: 1.5;
}
.login-foot {
  color: var(--ink-500);
  font-size: 12px;
  text-align: center;
  margin-top: 34px;
}

/* BUTTONS */

.btn {
  min-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 760;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--sea-red), #f22838); box-shadow: 0 12px 25px rgba(226,13,32,.20); }
.btn-primary:hover { box-shadow: 0 15px 30px rgba(226,13,32,.26); }
.btn-secondary { color: var(--ink-800); background: #f1f3f6; }
.btn-danger { color: #fff; background: var(--sea-red); }
.btn-block {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
}

/* APP LAYOUT */

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 18px;
  border-right: 1px solid var(--line);
}
.brand-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 22px;
}
.brand-logo {
  width: 72px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}
.brand-copy { min-width: 0; }
.brand-copy strong {
  display: block;
  font-size: 17px;
  letter-spacing: -.02em;
}
.brand-copy span {
  display: block;
  color: var(--ink-500);
  font-size: 11px;
  margin-top: 2px;
}
.sidebar-nav {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.nav-label {
  padding: 10px 12px 8px;
  color: #a0a7b4;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}
.nav-label-spaced { margin-top: 12px; }
.nav-item {
  width: 100%;
  height: 47px;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center;
  padding: 0 12px;
  border-radius: 13px;
  color: var(--ink-600);
  text-align: left;
  font-size: 14px;
  transition: .18s ease;
}
.nav-item:hover { color: var(--ink-900); background: #f7f7f9; }
.nav-item.active {
  color: var(--sea-red);
  background: linear-gradient(90deg, #fff0f1 0%, #fff6f6 100%);
  box-shadow: inset 3px 0 0 var(--sea-red);
}
.nav-badge {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  color: var(--ink-600);
  background: #f0f2f5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}
.secure-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sea-purple);
  box-shadow: 0 0 0 4px var(--purple-soft);
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--sea-red), var(--sea-orange));
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(226,13,32,.18);
}
.avatar-small {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.logout-btn {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--sea-red);
  background: var(--red-soft);
  font-weight: 730;
}
.logout-btn svg { width: 18px; }
.topbar {
  min-height: 90px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 32px;
  background: rgba(247,248,251,.88);
  border-bottom: 1px solid rgba(233,235,240,.86);
  backdrop-filter: blur(14px);
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.topbar-actions { display: flex; align-items: center; }
.date-chip, .user-chip {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 5px 14px rgba(31,36,48,.025);
}
.date-chip { color: var(--ink-700); font-size: 12px; }
.date-chip svg { width: 17px; color: var(--sea-red); }
.user-chip { padding: 5px 11px 5px 6px; }
.user-chip strong, .user-chip span { display: block; }
.user-chip strong { font-size: 12px; line-height: 1.2; }
.user-chip span {
  max-width: 180px;
  color: var(--ink-500);
  font-size: 10px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-area {
  padding: 28px 32px 48px;
  max-width: 1720px;
  margin: 0 auto;
}

/* DASHBOARD */

.room-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--sea-red);
  background: rgba(226, 13, 32, .08);
  border: 1px solid rgba(226, 13, 32, .1);
  font-size: 12px;
  font-weight: 720;
}
.room-board-panel {
  margin-top: 4px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.room-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.room-board-head h3 {
  margin: 6px 0 8px;
  font-size: 24px;
  letter-spacing: -.03em;
}
.room-board-head p {
  margin: 0;
  color: var(--ink-500);
  font-size: 12px;
}
.room-board-legend { gap: 8px; }
.legend-chip {
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 760;
}
.legend-chip i {
  width: 8px;
  height: 8px;
  display: inline-block;
}
.legend-chip.occupied { color: #128554; background: var(--green-soft); }
.legend-chip.occupied i { background: var(--green); }
.legend-chip.available { color: var(--sea-red); background: var(--red-soft); }
.legend-chip.available i { background: var(--sea-red); }
.legend-chip.inactive { color: #6e7787; background: #f1f3f5; }
.legend-chip.inactive i { background: #97a0ad; }

/* PAGE TOOLBAR / FILTER */

.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.page-subtitle { color: var(--ink-600); font-size: 13px; }
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--line);
}
.search-box {
  min-height: 44px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border-radius: 12px;
  background: #f7f8fa;
  border: 1px solid transparent;
}
.search-box:focus-within { border-color: #e3e5e9; background: #fff; }
.search-box svg { width: 18px; color: var(--ink-500); }
.search-box input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink-900);
}
.select-control {
  min-height: 44px;
  min-width: 175px;
  padding: 0 12px;
  color: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* ROOMS */

.room-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.room-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--sea-red), var(--sea-orange));
}
.room-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 760;
}
.room-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.room-status.active { color: #138453; background: var(--green-soft); }
.room-status.active::before { background: var(--green); }
.room-status.inactive { color: #737b89; background: #f0f2f5; }
.room-status.inactive::before { background: #9aa1ad; }
.room-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #eff0f3;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--ink-700);
  background: #f5f6f8;
  font-size: 11px;
  font-weight: 720;
}
.action-btn svg { width: 14px; height: 14px; }
.action-btn:hover { background: #eceef2; }
.action-btn.danger { color: var(--sea-red); background: var(--red-soft); }
.empty-state {
  min-height: 370px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 40px;
  border-radius: 22px;
  background: #fff;
  border: 1px dashed #dfe2e8;
}
.empty-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  color: var(--sea-red);
  border-radius: 21px;
  background: var(--red-soft);
}
.empty-icon svg { width: 30px; height: 30px; }
.empty-state h3 { margin: 16px 0 7px; }
.empty-state p {
  max-width: 430px;
  margin: 0 0 18px;
  color: var(--ink-500);
  font-size: 13px;
}

/* MODULE PLACEHOLDERS */

/* MODAL */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18,22,30,.56);
  backdrop-filter: blur(5px);
}
.modal-card {
  width: min(590px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 23px;
  box-shadow: var(--shadow-lg);
  animation: modalIn .18s ease-out;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 {
  margin: 5px 0 0;
  font-size: 21px;
  letter-spacing: -.03em;
}
.icon-btn {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--ink-700);
  border-radius: 12px;
  background: #f4f5f7;
}
.icon-btn svg { width: 18px; }
.icon-btn:hover { background: #eceef1; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.form-field { min-width: 0; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 7px; }
.form-field label span { color: var(--sea-red); }
.form-field input, .form-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.form-field input:focus, .form-field select:focus { border-color: rgba(226,13,32,.52); box-shadow: 0 0 0 4px rgba(226,13,32,.06); }
.input-suffix {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.input-suffix:focus-within { border-color: rgba(226,13,32,.52); box-shadow: 0 0 0 4px rgba(226,13,32,.06); }
.input-suffix input { border: 0; box-shadow: none !important; }
.input-suffix span {
  flex: 0 0 auto;
  padding: 0 12px;
  color: var(--ink-500);
  font-size: 11px;
}
.field-help {
  display: block;
  margin-top: 6px;
  color: var(--ink-500);
  font-size: 10px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* TOAST */

.toast-container {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 200;
  display: grid;
  gap: 8px;
}
.toast {
  min-width: 280px;
  max-width: 390px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  animation: toastIn .2s ease;
}
.toast-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #148657;
  background: var(--green-soft);
  font-weight: 850;
}
.toast.error .toast-icon { color: var(--sea-red); background: var(--red-soft); }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 12px; }
.toast span {
  color: var(--ink-500);
  font-size: 10px;
  margin-top: 2px;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* RESPONSIVE */

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-105%);
    width: min(300px, 88vw);
    box-shadow: var(--shadow-lg);
    transition: transform .22s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(18,22,30,.45);
    backdrop-filter: blur(3px);
  }
  .topbar { padding: 14px 18px; min-height: 76px; }
  .content-area { padding: 20px 18px 38px; }
  .date-chip { display: none; }
}

@media (max-width: 760px) {
  .room-board-head { flex-direction: column; }
  .page-toolbar { align-items: flex-start; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .select-control { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field-full { grid-column: auto; }
  .topbar-actions .user-chip > div:last-child { display: none; }
}

@media (max-width: 520px) {
  .topbar h1 { font-size: 21px; }
  .content-area { padding-left: 13px; padding-right: 13px; }
  .room-board-panel, .room-card, .customer-card { border-radius: 17px; }
  .page-toolbar { flex-direction: column; }
  .page-toolbar .btn { width: 100%; }
}

/* CUSTOMERS */

.customer-card {
  position: relative;
  overflow: hidden;
  min-height: 215px;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.customer-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.customer-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--sea-orange), var(--sea-purple));
}
.customer-org {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.form-field textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 12px 13px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  font: inherit;
}
.form-field textarea:focus { border-color: rgba(226,13,32,.52); box-shadow: 0 0 0 4px rgba(226,13,32,.06); }
.brand-box-simple {
  min-height: 66px;
  justify-content: flex-start;
  padding: 0 10px 22px;
}
.brand-logo-main {
  width: 118px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}

/* Hai nút được bỏ theo yêu cầu: không hiển thị nút đóng sidebar / hamburger. */

.booking-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.bookings-list { display: grid; gap: 11px; }
.booking-card {
  display: grid;
  grid-template-columns: 126px minmax(150px, .85fr) minmax(180px, 1fr) minmax(155px,.8fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.booking-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.booking-date-block strong, .booking-date-block span { display: block; }
.booking-date-block strong { font-size: 15px; }
.booking-date-block span {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 10px;
}
.booking-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 780;
}
.booking-time svg { width: 16px; color: var(--sea-red); }
.booking-main strong, .booking-main span { display: block; }
.booking-main strong { font-size: 13px; }
.booking-main span {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 10px;
}
.booking-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--ink-700);
  background: #f7f8fa;
  font-size: 11px;
  font-weight: 720;
}
.booking-room-chip svg { width: 14px; color: var(--sea-purple); }
.booking-type-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 780;
}
.booking-type-badge.single { color: var(--sea-red); background: var(--red-soft); }
.booking-type-badge.fixed { color: var(--sea-purple); background: var(--purple-soft); }
.booking-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.booking-note-line {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.modal-card-wide { width: min(760px, 100%); }
.booking-type-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 20px;
}
.booking-type-option {
  min-height: 82px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  border-radius: 15px;
  color: var(--ink-700);
  background: #fafbfc;
  border: 1px solid var(--line);
  transition: .18s ease;
}
.booking-type-option:hover { background: #fff; border-color: #dfe2e8; }
.booking-type-option.active {
  color: var(--ink-900);
  background: var(--red-soft);
  border-color: rgba(226,13,32,.30);
  box-shadow: 0 0 0 3px rgba(226,13,32,.045);
}
.booking-type-option[data-booking-type="fixed"].active {
  background: var(--purple-soft);
  border-color: rgba(124,43,189,.26);
  box-shadow: 0 0 0 3px rgba(124,43,189,.04);
}
.booking-type-option strong, .booking-type-option small { display: block; }
.booking-type-option strong { font-size: 13px; }
.booking-type-option small {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.4;
}
.booking-type-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--sea-red);
  background: #fff;
}
.booking-type-icon.purple { color: var(--sea-purple); }
.booking-type-icon svg { width: 19px; }
.booking-form-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eff0f3;
}
.weekday-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.weekday-picker label { margin: 0; cursor: pointer; }
.weekday-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.weekday-picker span {
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--ink-600);
  background: #f5f6f8;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 780;
  transition: .16s ease;
}
.weekday-picker input:checked + span {
  color: #fff;
  background: linear-gradient(135deg,var(--sea-red),#f22c39);
  border-color: var(--sea-red);
  box-shadow: 0 8px 16px rgba(226,13,32,.14);
}
.booking-preview {
  margin-top: 15px;
  padding: 12px 14px;
  border-radius: 13px;
  color: #5e4b0a;
  background: #fff8d9;
  border: 1px solid #f3e4a1;
  font-size: 11px;
  line-height: 1.55;
}
.booking-preview.error {
  color: #9b101b;
  background: var(--red-soft);
  border-color: #ffd3d7;
}

/* Mobile: thay hamburger bằng thanh menu ngang, không cần nút mở/đóng. */

@media (max-width: 980px) {
  .app-shell { display: block; }
  .sidebar {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    transform: none !important;
    padding: 12px 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
  }
  .brand-box-simple { min-height: auto; padding: 0 5px 10px; }
  .brand-logo-main { width: 96px; height: 44px; }
  .sidebar-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 10px;
    scrollbar-width: none;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .nav-label { display: none; }
  .nav-item {
    flex: 0 0 auto;
    width: auto;
    grid-template-columns: 20px auto auto;
    padding: 0 11px;
    white-space: nowrap;
  }
  .sidebar-footer { display: none; }
  .sidebar-backdrop { display: none !important; }
  .topbar { position: sticky; top: 0; }
  .booking-card { grid-template-columns: 110px 1fr 1fr; }
  .booking-card .booking-type-wrap { display: none; }
  .booking-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px solid #eff0f3;
  }
}

@media (max-width: 760px) {
  .booking-summary { grid-template-columns: 1fr; }
  .booking-card { grid-template-columns: 1fr 1fr; gap: 12px; }
  .booking-main { grid-column: 1 / -1; }
  .booking-type-picker { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .booking-card { grid-template-columns: 1fr; }
  .booking-actions { grid-column: auto; }
}

.equipment-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.equipment-picker label { margin: 0; cursor: pointer; }
.equipment-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.equipment-picker span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-600);
  background: #f5f6f8;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 720;
  transition: .16s ease;
}
.equipment-picker input:checked + span {
  color: var(--sea-red);
  background: var(--red-soft);
  border-color: rgba(226,13,32,.18);
}
.booking-session-rate {
  width: fit-content;
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 9px;
  color: var(--sea-red);
  background: var(--red-soft);
  font-size: 11px;
  font-weight: 800;
}
.booking-type-badge.cancelled { color: #6f7786; background: #f0f2f5; }
.booking-invoice-line {
  margin-top: 6px;
  color: var(--sea-purple);
  font-size: 10px;
  font-weight: 760;
}
.finance-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.finance-head h2 {
  margin: 5px 0 7px;
  font-size: 28px;
  letter-spacing: -.035em;
}
.finance-head p {
  margin: 0;
  max-width: 760px;
  color: var(--ink-600);
  font-size: 13px;
  line-height: 1.6;
}
.finance-tab-switch, .finance-view-switch {
  display: inline-flex;
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  background: #f2f4f7;
}
.finance-tab-btn, .finance-view-btn {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 10px;
  color: var(--ink-600);
  background: transparent;
  font-size: 12px;
  font-weight: 780;
}
.finance-tab-btn.active, .finance-view-btn.active { color: var(--sea-red); box-shadow: 0 6px 16px rgba(31,36,48,.07); }
.finance-view { display: grid; gap: 16px; }
.finance-table-card {
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.finance-table-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.finance-table-head h3 {
  margin: 5px 0 0;
  font-size: 19px;
  letter-spacing: -.025em;
}
.forecast-breakdown { display: grid; gap: 9px; }
.forecast-group {
  overflow: hidden;
  border: 1px solid #eceef2;
  border-radius: 14px;
  background: #fff;
}
.forecast-group summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}
.forecast-group summary::-webkit-details-marker { display: none; }
.forecast-group summary > div strong, .forecast-group summary > div span { display: block; }
.forecast-group summary > div strong { font-size: 13px; }
.forecast-group summary > div span { margin-top: 4px; color: var(--ink-500); }
.forecast-group summary > strong { color: var(--sea-red); font-size: 14px; }
.forecast-detail-list { border-top: 1px solid #eff0f3; background: #fafbfc; }
.forecast-detail-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid #eef0f3;
  font-size: 11px;
}
.forecast-detail-row:last-child { border-bottom: 0; }
.forecast-detail-row span { color: var(--ink-600); }
.forecast-detail-row strong { font-size: 11px; }
.finance-empty {
  min-height: 90px;
  display: grid;
  place-items: center;
  padding: 20px;
  border-radius: 14px;
  color: var(--ink-500);
  background: #f8f9fb;
  border: 1px dashed #dfe2e8;
  text-align: center;
  font-size: 12px;
}
.finance-empty.success-empty {
  color: #137d52;
  background: var(--green-soft);
  border-color: #ccebdc;
}
.invoice-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
}
.invoice-list { display: grid; gap: 10px; }
.invoice-customer-card, .invoice-card {
  padding: 15px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid #eceef2;
}
.invoice-customer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invoice-customer-card.alert { border-left: 4px solid var(--sea-red); }
.invoice-card-main {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.invoice-card-main strong, .invoice-card-main span, .invoice-card-main small { display: block; }
.invoice-card-main strong { font-size: 13px; }
.invoice-card-main span {
  margin-top: 4px;
  color: var(--ink-600);
  font-size: 10px;
}
.invoice-card-main small {
  margin-top: 4px;
  color: var(--sea-red);
  font-size: 10px;
}
.invoice-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px #f7f7f8;
  flex: 0 0 auto;
}
.invoice-status-dot.red { background: var(--sea-red); box-shadow: 0 0 0 5px var(--red-soft); }
.invoice-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.invoice-card-head strong, .invoice-card-head span { display: block; }
.invoice-no {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .06em;
}
.invoice-card-head strong { margin-top: 4px; font-size: 13px; }
.invoice-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
.invoice-status-badge.pending { color: var(--sea-orange); background: var(--orange-soft); }
.invoice-status-badge.partial { color: #9b6512; background: #fff6da; }
.invoice-status-badge.paid { color: #128554; background: var(--green-soft); }
.invoice-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 11px;
  color: var(--ink-500);
  font-size: 10px;
}
.invoice-money-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 12px;
}
.invoice-money-grid > div {
  padding: 9px;
  border-radius: 10px;
  background: #f8f9fb;
}
.invoice-money-grid span, .invoice-money-grid strong { display: block; }
.invoice-money-grid span { color: var(--ink-500); font-size: 9px; }
.invoice-money-grid strong { margin-top: 4px; font-size: 11px; }
.invoice-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.invoice-complete-label { color: #128554; font-size: 11px; }
.invoice-customer-summary, .invoice-total-bar, .payment-summary {
  margin-top: 18px;
  padding: 15px;
  border-radius: 15px;
  background: #f8f9fb;
  border: 1px solid #eceef2;
}
.invoice-customer-summary span, .invoice-customer-summary strong { display: block; }
.invoice-customer-summary span { color: var(--ink-500); font-size: 10px; }
.invoice-customer-summary strong { margin-top: 4px; font-size: 16px; }
.invoice-range-grid { margin-top: 14px; }
.invoice-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.invoice-select-head strong, .invoice-select-head span { display: block; }
.invoice-select-head strong { font-size: 13px; }
.invoice-select-head span {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.4;
}
.invoice-booking-picker {
  display: grid;
  gap: 7px;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 3px;
}
.invoice-booking-row {
  display: grid;
  grid-template-columns: 22px 96px 1fr auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #fafbfc;
  border: 1px solid #eff0f3;
  cursor: pointer;
  font-size: 10px;
}
.invoice-booking-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--sea-red);
}
.invoice-booking-row strong { color: var(--sea-red); font-size: 11px; }
.invoice-booking-row.missing-rate { background: var(--red-soft); border-color: #ffd4d8; }
.invoice-booking-date { font-weight: 760; }
.invoice-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invoice-total-bar span { color: var(--ink-600); font-size: 11px; }
.invoice-total-bar strong { color: var(--sea-red); font-size: 19px; }
.payment-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.payment-summary > div { min-width: 0; }
.payment-summary span, .payment-summary strong { display: block; }
.payment-summary span { color: var(--ink-500); font-size: 9px; }
.payment-summary strong {
  margin-top: 4px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) {
  .invoice-workspace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .finance-head { flex-direction: column; align-items: stretch; }
  .finance-tab-switch { width: 100%; }
  .finance-tab-btn { flex: 1; }
  .forecast-detail-row { grid-template-columns: 1fr auto; }
  .forecast-detail-row span:nth-child(2) { grid-column: 1 / -1; }
  .invoice-customer-card { align-items: stretch; flex-direction: column; }
  .invoice-customer-card .btn { width: 100%; }
  .invoice-money-grid { grid-template-columns: 1fr; }
  .invoice-booking-row { grid-template-columns: 22px 1fr auto; }
  .invoice-booking-date { grid-column: 2 / -1; }
  .payment-summary { grid-template-columns: 1fr; }
}

.room-chip {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 9px;
  color: #bd2531;
  background: #fff5f6;
  border-color: #f5d9dc;
}
.room-board-panel {
  margin-top: 14px;
  padding: 20px;
  border-color: #e7ebf0;
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
}
.room-board-head { margin-bottom: 14px; }
.room-board-head .panel-kicker { color: #6f7b8d; }
.room-board-head h3 { margin: 4px 0 5px; font-size: 21px; }
.availability-field { display: grid; gap: 6px; }
.availability-field > span, .availability-tool-label {
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 760;
}
.availability-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  color: var(--ink-900);
  background: #fafbfd;
  border: 1px solid #dfe4eb;
  border-radius: 11px;
  outline: none;
}
.availability-field input:focus {
  background: #fff;
  border-color: #aebdd2;
  box-shadow: 0 0 0 3px rgba(91,107,140,.08);
}
.availability-equipment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}
.availability-equipment-chips label { cursor: pointer; }
.availability-equipment-chips input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.availability-equipment-chips span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #566274;
  background: #f7f9fc;
  border: 1px solid #e1e6ed;
  font-size: 9.5px;
  font-weight: 720;
  transition: .16s ease;
}
.availability-equipment-chips input:checked + span {
  color: #14744f;
  background: #edf9f3;
  border-color: #c9ead9;
  box-shadow: inset 0 0 0 1px #d9f1e4;
}
.availability-empty-card {
  grid-column: 1/-1;
  min-height: 100px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  color: var(--ink-500);
  background: #fafbfd;
  border: 1px dashed #dce2ea;
}
.availability-empty-card strong, .availability-empty-card span { display: block; }
.availability-empty-card strong { color: var(--ink-800); font-size: 13px; }
.availability-empty-card span { margin-top: 5px; font-size: 10px; }
.availability-empty-card.error { background: #fff8f8; border-color: #efcfd3; }
.booking-date-nav, .booking-view-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.booking-date-nav input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #dfe5ec;
  border-radius: 11px;
  background: #fbfcfe;
  color: #1f2937;
  font-weight: 700;
}
.booking-nav-arrow {
  width: 38px;
  height: 38px;
  font-size: 24px;
  line-height: 1;
}
.booking-today-btn, .booking-view-btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid #e1e6ed;
  border-radius: 11px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.booking-view-btn.active {
  background: #202838;
  border-color: #202838;
  box-shadow: 0 6px 14px rgba(32,40,56,.14);
}
.booking-day-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.booking-day-summary article {
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid #e6ebf1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(30,41,59,.035);
}
.booking-day-summary span {
  display: block;
  color: #7b8797;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.booking-day-summary strong {
  display: block;
  margin-top: 7px;
  font-size: 25px;
  color: #202838;
}
.booking-day-summary article.success { background: linear-gradient(135deg,#f7fcfa,#fff); }
.booking-day-summary article.success strong { color: #148657; }
.booking-board-card {
  border: 1px solid #e6ebf1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(30,41,59,.045);
}
.booking-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #edf0f4;
}
.booking-board-head h3 {
  margin: 4px 0 5px;
  font-size: 20px;
  color: #202838;
}
.booking-board-head p {
  margin: 0;
  color: #7c8797;
  font-size: 12px;
}
.booking-status-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.booking-status-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: #f8fafc;
  color: #687386;
  font-size: 10px;
  font-weight: 750;
}
.booking-status-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}
.booking-status-legend .upcoming i { background: #3b82f6; }
.booking-status-legend .ongoing i { background: #16a36a; }
.booking-status-legend .completed i { background: #94a3b8; }
.booking-day-board { overflow-x: auto; }
.booking-day-time-head, .booking-day-room-row { display: grid; grid-template-columns: 150px minmax(980px,1fr); }
.booking-day-time-head {
  min-height: 42px;
  border-bottom: 1px solid #edf0f4;
  background: #fbfcfe;
}
.booking-day-room-label {
  padding: 12px 14px;
  border-right: 1px solid #edf0f4;
  background: #fff;
}
.booking-day-room-label.head {
  background: #fbfcfe;
  display: flex;
  align-items: center;
}
.booking-day-room-label strong {
  display: block;
  color: #202838;
  font-size: 12px;
}
.booking-day-room-label span {
  display: block;
  margin-top: 3px;
  color: #8b96a6;
  font-size: 9px;
}
.booking-time-scale, .booking-room-timeline { position: relative; min-width: 980px; }
.booking-time-scale { height: 42px; background: #fbfcfe; }
.booking-hour-mark {
  position: absolute;
  top: 13px;
  transform: translateX(-50%);
  color: #8b96a6;
  font-size: 9px;
  white-space: nowrap;
}
.booking-hour-mark:first-child { transform: none; }
.booking-hour-mark:last-child { transform: translateX(-100%); }
.booking-day-room-row { min-height: 66px; border-bottom: 1px solid #f0f2f5; }
.booking-day-room-row:last-child { border-bottom: none; }
.booking-room-timeline {
  min-height: 66px;
  cursor: crosshair;
  background: linear-gradient(to bottom,#fff,#fdfefe);
}
.booking-room-timeline:hover { background: #fbfdff; }
.booking-grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #edf0f4;
  pointer-events: none;
}
.booking-timeline-block {
  position: absolute;
  top: 9px;
  height: 48px;
  min-width: 32px;
  padding: 7px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(30,41,59,.08);
}
.booking-timeline-block strong, .booking-timeline-block span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-timeline-block strong { font-size: 10px; }
.booking-timeline-block span {
  margin-top: 3px;
  font-size: 8.5px;
  opacity: .8;
}
.booking-timeline-block.upcoming {
  background: #eaf2ff;
  color: #2059a8;
  border: 1px solid #cfe0fb;
}
.booking-timeline-block.ongoing {
  background: #eaf8f1;
  color: #11764f;
  border: 1px solid #cdebdc;
}
.booking-timeline-block.completed {
  background: #f1f4f7;
  color: #657184;
  border: 1px solid #e0e5eb;
}
.booking-board-empty {
  padding: 40px 20px;
  color: #7b8797;
  text-align: center;
}
.booking-week-board { overflow-x: auto; }
.booking-week-grid {
  display: grid;
  grid-template-columns: 140px repeat(7,minmax(150px,1fr));
  min-width: 1190px;
}
.booking-week-corner, .booking-week-day-head, .booking-week-room-label, .booking-week-day-cell {
  border-right: 1px solid #edf0f4;
  border-bottom: 1px solid #edf0f4;
}
.booking-week-corner, .booking-week-day-head {
  min-height: 58px;
  padding: 12px;
  background: #fbfcfe;
}
.booking-week-corner {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #657184;
}
.booking-week-day-head { text-align: center; }
.booking-week-day-head strong {
  display: block;
  font-size: 10px;
  color: #526073;
}
.booking-week-day-head span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #202838;
}
.booking-week-day-head.today { background: #f3f8ff; }
.booking-week-room-label {
  min-height: 104px;
  padding: 12px;
  background: #fff;
}
.booking-week-room-label strong {
  display: block;
  font-size: 12px;
  color: #202838;
}
.booking-week-room-label span {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  color: #8b96a6;
}
.booking-week-day-cell {
  min-height: 104px;
  padding: 7px;
  background: #fff;
  cursor: pointer;
}
.booking-week-day-cell:hover { background: #fbfdff; }
.booking-week-day-cell.today { background: #fbfdff; }
.week-booking-chip {
  width: 100%;
  display: block;
  margin-bottom: 5px;
  padding: 6px 7px;
  border: 1px solid #e4e9ef;
  border-radius: 8px;
  background: #f7f9fb;
  cursor: pointer;
}
.week-booking-chip strong, .week-booking-chip span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.week-booking-chip strong { font-size: 9px; }
.week-booking-chip span { margin-top: 2px; font-size: 8px; }
.week-booking-chip.upcoming {
  background: #eef5ff;
  color: #285d9f;
  border-color: #d6e4f8;
}
.week-booking-chip.ongoing {
  background: #edf9f3;
  color: #11764f;
  border-color: #d5eddf;
}
.week-booking-chip.completed { color: #687386; }
.week-more { color: #8b96a6; font-size: 8px; }
.booking-v8-list-filter {
  display: grid;
  grid-template-columns: minmax(250px,1.5fr) repeat(6,minmax(125px,.75fr));
  gap: 10px;
  margin-bottom: 14px;
}
.booking-v8-list-filter .search-box { min-width: 0; }
.booking-v8-list-filter .select-control { width: 100%; min-width: 0; }
.booking-v8-card.cancelled { opacity: .82; }
.booking-operation-badge {
  display: inline-flex;
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 8.5px;
}
.booking-operation-badge.upcoming { color: #285d9f; background: #edf5ff; }
.booking-operation-badge.ongoing { color: #11764f; background: #eaf8f1; }
.booking-operation-badge.completed { color: #657184; background: #eef1f4; }
.booking-operation-badge.cancelled { color: #a53a44; background: #fff1f2; }
.booking-cancel-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7f7;
}
.booking-cancel-note strong {
  display: block;
  color: #a53a44;
  font-size: 10px;
}
.booking-cancel-note span {
  display: block;
  margin-top: 3px;
  color: #8b6670;
  font-size: 9px;
}
.booking-v8-modal {
  width: min(860px,calc(100vw - 30px));
  max-height: 92vh;
  overflow: auto;
}
.booking-v8-step {
  padding: 16px;
  border: 1px solid #e8edf2;
  border-radius: 16px;
  background: #fbfcfe;
}
.booking-v8-step + .booking-v8-step { margin-top: 12px; }
.booking-step-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.booking-step-label > span {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #202838;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.booking-step-label strong {
  display: block;
  font-size: 13px;
  color: #202838;
}
.booking-step-label small {
  display: block;
  margin-top: 3px;
  color: #7b8797;
  font-size: 10px;
  line-height: 1.4;
}
.booking-edit-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #d9e5f7;
  border-radius: 14px;
  background: #f4f8ff;
}
.booking-edit-scope strong {
  display: block;
  font-size: 11px;
  color: #264a78;
}
.booking-edit-scope span {
  display: block;
  margin-top: 3px;
  color: #6e7e92;
  font-size: 9px;
}
.booking-edit-scope select {
  min-width: 220px;
  height: 38px;
  border: 1px solid #cdd9e9;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
}
.booking-room-schedule { margin-top: 12px; }
.booking-room-schedule-empty, .booking-room-schedule-info {
  padding: 14px;
  border: 1px dashed #d8dee8;
  border-radius: 13px;
  background: #fff;
  color: #7b8797;
  font-size: 11px;
  text-align: center;
}
.booking-room-schedule-info strong {
  display: block;
  color: #38475a;
  font-size: 11px;
}
.booking-room-schedule-info span {
  display: block;
  margin-top: 4px;
  line-height: 1.45;
}
.booking-room-schedule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.booking-room-schedule-head strong {
  display: block;
  color: #202838;
  font-size: 12px;
}
.booking-room-schedule-head span {
  display: block;
  margin-top: 2px;
  color: #8a95a5;
  font-size: 9px;
}
.booking-room-free-badge {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eaf8f1;
  color: #11764f !important;
  font-size: 9px !important;
  font-weight: 800;
}
.booking-room-busy-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.booking-locked-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #e4e8ed;
  border-radius: 11px;
  background: #f1f3f5;
  color: #687386;
}
.booking-locked-slot .lock-dot {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #dce1e6;
  color: #7d8794;
  font-weight: 900;
}
.booking-locked-slot div { min-width: 0; flex: 1; }
.booking-locked-slot strong { display: block; font-size: 10px; }
.booking-locked-slot small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 8.5px;
}
.booking-locked-slot em {
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  color: #8b95a2;
}
.booking-all-day-free {
  grid-column: 1/-1;
  padding: 10px 12px;
  border-radius: 11px;
  background: #edf9f3;
  color: #11764f;
  font-size: 10px;
  font-weight: 750;
}
.booking-free-gap-line {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  color: #667386;
  font-size: 9.5px;
}
.booking-free-gap-line strong { color: #39475a; }
.booking-free-slots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.booking-free-slot-label {
  color: #667386;
  font-size: 9.5px;
  font-weight: 750;
}
.booking-free-slot-btn {
  padding: 8px 10px;
  border: 1px solid #d5e7dc;
  border-radius: 10px;
  background: #f3fbf6;
  color: #11764f;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.booking-free-slot-btn:hover { background: #eaf8f1; border-color: #bdddc9; }
.booking-no-slot-hint { color: #8a95a5; font-size: 9.5px; }

/* Fixed series preview */

.booking-preview { margin-top: 12px; }
.fixed-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.fixed-preview-head > div > strong {
  display: block;
  margin-top: 4px;
  color: #202838;
  font-size: 12px;
}
.fixed-preview-stats {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fixed-preview-stats span {
  padding: 6px 8px;
  border-radius: 999px;
  background: #eef1f4;
  color: #687386;
  font-size: 8.5px;
  font-weight: 750;
}
.fixed-preview-stats .warn { background: #fff5eb; color: #a95a13; }
.fixed-preview-stats .ok { background: #eaf8f1; color: #11764f; }
.fixed-conflict-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.fixed-conflict-row {
  display: grid;
  grid-template-columns: 1fr minmax(190px,260px);
  gap: 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid #f0dddd;
  border-radius: 11px;
  background: #fffafa;
}
.fixed-conflict-copy strong {
  display: block;
  color: #a53a44;
  font-size: 10px;
}
.fixed-conflict-copy span {
  display: block;
  margin-top: 3px;
  color: #81646a;
  font-size: 9px;
  line-height: 1.4;
}
.fixed-conflict-row select {
  width: 100%;
  height: 36px;
  border: 1px solid #e3d1d4;
  border-radius: 9px;
  background: #fff;
  padding: 0 9px;
  font-size: 9.5px;
  font-weight: 700;
  color: #495667;
}
.fixed-preview-success {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eaf8f1;
  color: #11764f;
  font-size: 10px;
  font-weight: 800;
}
.fixed-preview-help {
  margin-top: 9px;
  color: #7c8797;
  font-size: 9px;
  line-height: 1.45;
}

/* Cancel modal */

.cancel-booking-modal-card { width: min(620px,calc(100vw - 30px)); }
.cancel-booking-summary {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.cancel-booking-summary div {
  padding: 10px 11px;
  border-radius: 11px;
  background: #f7f9fb;
  border: 1px solid #e8edf2;
}
.cancel-booking-summary span {
  display: block;
  color: #8994a4;
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .06em;
}
.cancel-booking-summary strong {
  display: block;
  margin-top: 4px;
  color: #202838;
  font-size: 11px;
}
.cancel-warning-box {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #fff8f1;
  color: #8b642b;
  font-size: 9.5px;
  line-height: 1.5;
}
.btn-danger-soft {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #f0cfd3;
  border-radius: 12px;
  background: #fff2f3;
  color: #b32634;
  font-weight: 800;
  cursor: pointer;
}
.btn-danger-soft:hover { background: #ffe9eb; }

@media (max-width:1380px) {
  .booking-v8-list-filter { grid-template-columns: repeat(4,minmax(150px,1fr)); }
  .booking-v8-list-filter .search-box { grid-column: span 2; }
}

@media (max-width:900px) {
  .booking-board-head { align-items: stretch; }
  .booking-date-nav, .booking-view-switch { width: 100%; overflow-x: auto; }
  .booking-view-btn { flex: 1; min-width: 110px; }
  .booking-day-summary { grid-template-columns: 1fr; }
  .booking-v8-list-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .booking-v8-list-filter .search-box { grid-column: 1/-1; }
  .booking-room-busy-list { grid-template-columns: 1fr; }
  .fixed-preview-head, .booking-edit-scope { flex-direction: column; align-items: stretch; }
  .booking-edit-scope select { min-width: 0; width: 100%; }
  .fixed-conflict-row { grid-template-columns: 1fr; }
}

@media (max-width:560px) {
  .booking-v8-list-filter { grid-template-columns: 1fr; }
  .booking-v8-list-filter .search-box { grid-column: auto; }
  .booking-date-nav { flex-wrap: wrap; }
  .booking-date-nav input { flex: 1; min-width: 150px; }
  .cancel-booking-summary { grid-template-columns: 1fr; }
}

/* ----- Bảng màu Lịch ngày / Lịch tuần: trung tính, dịu mắt ----- */

.booking-board-head .panel-kicker { color: #6d7d91; }
.booking-board-card { border-color: #e4eaf1; box-shadow: 0 8px 24px rgba(30,41,59,.035); }
.booking-view-btn.active {
  background: #344256;
  border-color: #344256;
  box-shadow: 0 6px 14px rgba(52,66,86,.13);
}
.booking-today-btn:hover, .booking-view-btn:not(.active):hover {
  background: #f0f5fa;
  border-color: #d4dee9;
  color: #334155;
}
.booking-day-summary article { background: linear-gradient(135deg,#fff,#fbfcfe); border-color: #e4eaf1; }
.booking-day-summary article.success { background: linear-gradient(135deg,#f4faf8,#fff); }
.booking-day-summary article.success strong { color: #2d7f69; }
.booking-status-legend span { background: #f5f7fa; color: #647286; }
.booking-status-legend .upcoming i { background: #6f94c5; }
.booking-status-legend .ongoing i { background: #5f9d8c; }
.booking-status-legend .completed i { background: #a0a9b5; }
.booking-day-time-head, .booking-day-room-label.head, .booking-time-scale, .booking-week-corner, .booking-week-day-head {
  background: #f7f9fc;
}
.booking-room-timeline { background: linear-gradient(to bottom,#fff,#fcfdff); }
.booking-room-timeline:hover { background: #f8fbfe; }
.booking-grid-line { background: #edf1f5; }
.booking-timeline-block { box-shadow: 0 3px 10px rgba(30,41,59,.07); }
.booking-timeline-block.upcoming {
  background: #eef4fb;
  color: #40658d;
  border: 1px solid #d7e3f0;
}
.booking-timeline-block.ongoing {
  background: #edf7f3;
  color: #356f61;
  border: 1px solid #d4e8e1;
}
.booking-timeline-block.completed {
  background: #f3f5f7;
  color: #697686;
  border: 1px solid #e4e8ed;
}
.booking-week-day-head.today { background: #eef4f9; box-shadow: inset 0 -2px 0 #8ea9c3; }
.booking-week-day-cell.today { background: #f7fafc; }
.booking-week-day-cell:hover { background: #f8fbfd; }
.week-booking-chip.upcoming {
  background: #f0f5fb;
  color: #46688e;
  border-color: #d9e5f0;
}
.week-booking-chip.ongoing {
  background: #eff8f5;
  color: #3a7567;
  border-color: #d8eae4;
}
.week-booking-chip.completed {
  background: #f4f6f8;
  color: #6f7b89;
  border-color: #e7eaee;
}

/* ----- Khách mới ngay trong form tạo lịch ----- */

.booking-customer-picker-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
}
.booking-new-customer-btn {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d8e2ec;
  border-radius: 12px;
  background: #f5f8fb;
  color: #40566f;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
}
.booking-new-customer-btn:hover {
  background: #edf3f8;
  border-color: #c7d5e3;
  transform: translateY(-1px);
}
#customerModal.quick-customer-mode { z-index: 1200; }
#customerModal.quick-customer-mode .modal-card { width: min(520px,calc(100vw - 30px)); }
#customerModal.quick-customer-mode .customer-extended-field { display: none; }
#customerModal.quick-customer-mode .form-grid { grid-template-columns: 1fr; }
.booking-list-mode-switch {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid #e2e8ef;
  border-radius: 14px;
  background: #f7f9fc;
}
.booking-list-mode-btn {
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6c7889;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.booking-list-mode-btn.active {
  background: #fff;
  color: #31465e;
  box-shadow: 0 3px 10px rgba(30,41,59,.07);
}
.booking-list-v9-toolbar {
  display: grid;
  grid-template-columns: minmax(280px,1.5fr) 170px 170px auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #fff;
}
.booking-list-search { min-width: 0; }
.booking-list-month-field, .booking-list-status-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.booking-list-month-field > span, .booking-list-status-field > span {
  color: #7a8797;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.booking-list-month-field input, .booking-list-status-field select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #dfe5ec;
  border-radius: 11px;
  background: #f9fbfd;
  color: #38475a;
  font-size: 11px;
  font-weight: 700;
}
.booking-filter-toggle {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #dfe5ec;
  border-radius: 11px;
  background: #f6f8fb;
  color: #526174;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.booking-filter-toggle:hover { background: #edf3f8; }
.booking-advanced-filters {
  grid-template-columns: repeat(6,minmax(130px,1fr));
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #e5eaf0;
  border-radius: 14px;
  background: #f9fbfd;
}
.booking-list-v9-results { display: grid; gap: 10px; }
.booking-list-v9-results.session-mode { display: block; }
.booking-group-card {
  border: 1px solid #e2e8ef;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(30,41,59,.035);
}
.booking-group-card[open] { border-color: #d7e1eb; box-shadow: 0 8px 24px rgba(30,41,59,.045); }
.booking-group-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  background: linear-gradient(135deg,#fff,#fbfcfe);
}
.booking-group-summary::-webkit-details-marker { display: none; }
.booking-group-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.booking-group-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eef3f8;
  color: #49647f;
  font-size: 14px;
  font-weight: 900;
}
.booking-group-avatar.room { background: #eef6f4; color: #4c756a; }
.booking-group-identity strong {
  display: block;
  color: #27374a;
  font-size: 14px;
}
.booking-group-identity span:not(.booking-group-avatar) {
  display: block;
  margin-top: 3px;
  color: #7c8898;
  font-size: 10px;
}
.booking-group-chevron {
  color: #92a0b0;
  font-size: 18px;
  transition: transform .18s ease;
}
.booking-group-card[open] .booking-group-chevron { transform: rotate(180deg); }
.booking-group-body { padding: 0 16px 16px; border-top: 1px solid #edf1f5; }
.booking-group-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  color: #7b8797;
  font-size: 10px;
}
.booking-group-section + .booking-group-section { margin-top: 14px; }
.booking-group-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.booking-group-section-head strong {
  color: #526174;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.booking-group-section-head span {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef2f6;
  color: #697686;
  font-size: 8.5px;
  font-weight: 800;
}
.booking-group-empty {
  padding: 12px;
  border: 1px dashed #dfe5ec;
  border-radius: 11px;
  background: #fafcfe;
  color: #8a96a5;
  font-size: 10px;
}
.booking-series-stack, .booking-single-stack { display: grid; gap: 8px; }
.booking-series-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 14px;
  padding: 12px;
  border: 1px solid #e5eaf0;
  border-radius: 14px;
  background: #fbfcfe;
}
.booking-series-row.ongoing { background: #f5faf8; border-color: #dceae5; }
.booking-series-row.cancelled { opacity: .78; }
.booking-series-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.booking-series-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #52667d;
  font-size: 8px;
  font-weight: 800;
}
.booking-series-main > strong {
  display: block;
  color: #2f4054;
  font-size: 12px;
}
.booking-series-main p {
  margin: 4px 0 0;
  color: #6f7c8e;
  font-size: 10px;
}
.booking-series-main > small {
  display: block;
  margin-top: 5px;
  color: #8a95a4;
  font-size: 9px;
}
.booking-series-actions { display: flex; align-items: flex-start; }
.booking-series-sessions {
  grid-column: 1/-1;
  border-top: 1px dashed #dde4eb;
  padding-top: 8px;
}
.booking-series-sessions > summary {
  cursor: pointer;
  color: #607187;
  font-size: 9.5px;
  font-weight: 800;
}
.booking-series-session-list {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}
.booking-series-session-row {
  display: grid;
  grid-template-columns: 125px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #edf0f4;
}
.booking-series-session-row > div > strong, .booking-series-session-row > div > span, .booking-series-session-row > div > small {
  display: block;
}
.booking-series-session-row > div > strong { color: #405064; font-size: 9.5px; }
.booking-series-session-row > div > span { color: #687689; font-size: 9px; }
.booking-series-session-row > div > small {
  margin-top: 2px;
  color: #929dab;
  font-size: 8px;
}
.booking-series-session-actions { display: flex; gap: 5px; }
.booking-single-row {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  background: #fff;
}
.booking-single-row.cancelled { opacity: .78; }
.booking-single-date strong, .booking-single-date span, .booking-single-main strong, .booking-single-main span, .booking-single-main small {
  display: block;
}
.booking-single-date strong { color: #3d4e62; font-size: 10px; }
.booking-single-date span {
  margin-top: 2px;
  color: #8c97a6;
  font-size: 8px;
}
.booking-single-main strong { color: #334459; font-size: 10.5px; }
.booking-single-main span {
  margin-top: 2px;
  color: #6f7c8d;
  font-size: 9px;
}
.booking-single-main small {
  margin-top: 3px;
  color: #929cab;
  font-size: 8px;
}
.booking-list-cancel-reason { color: #9a6670 !important; }
.booking-single-actions { display: flex; gap: 5px; }

/* Nhẹ màu trạng thái trong khu vực danh sách */

.booking-operation-badge.upcoming { color: #4d6d91; background: #eef4fa; }
.booking-operation-badge.ongoing { color: #3b7567; background: #edf7f3; }
.booking-operation-badge.completed { color: #6e7b8a; background: #f0f3f6; }
.booking-operation-badge.cancelled { color: #91656d; background: #f8f1f2; }

@media (max-width:1100px) {
  .booking-list-mode-switch { width: 100%; overflow-x: auto; }
  .booking-list-mode-btn { flex: 1; min-width: 120px; }
  .booking-list-v9-toolbar { grid-template-columns: 1fr 160px 160px; }
  .booking-filter-toggle { grid-column: 1/-1; }
  .booking-advanced-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .booking-customer-picker-row { grid-template-columns: 1fr; }
  .booking-new-customer-btn { width: 100%; }
  .booking-list-v9-toolbar { grid-template-columns: 1fr; }
  .booking-advanced-filters { grid-template-columns: 1fr; }
  .booking-series-row { grid-template-columns: 1fr; }
  .booking-series-actions { justify-content: flex-start; }
  .booking-series-session-row, .booking-single-row { grid-template-columns: 1fr; }
  .booking-series-session-actions, .booking-single-actions { justify-content: flex-start; }
  .booking-group-actionbar { align-items: flex-start; flex-direction: column; }
}

:root {
  --action-primary: #709bd4;
  --action-primary-dark: #5c86bf;
  --action-primary-soft: #eef4fb;
  --status-upcoming: #709bd4;
  --status-ongoing: #2da76a;
  --status-completed: #a0b2b5;
  --status-warning: #d6a84b;
  --status-warning-soft: #fff8e9;
}

/* ----- Đồng nhất toàn bộ tác vụ ----- */

.btn-primary { background: linear-gradient(135deg,var(--action-primary),#7da6db); box-shadow: 0 10px 22px rgba(112,155,212,.22); }
.btn-primary:hover {
  background: linear-gradient(135deg,var(--action-primary-dark),var(--action-primary));
  box-shadow: 0 13px 27px rgba(112,155,212,.28);
}
.btn-secondary {
  color: #536174;
  background: #f2f5f8;
  border: 1px solid #e2e8ef;
}
.action-btn:not(.danger) { color: #55779f; background: #eef4fa; }
.action-btn:not(.danger):hover { background: #e5eef8; }
.nav-item.active {
  color: #527cad;
  background: linear-gradient(90deg,#eef4fb 0%,#f6f9fd 100%);
  box-shadow: inset 3px 0 0 var(--action-primary);
}
.finance-tab-btn.active, .finance-view-btn.active {
  color: #527cad;
  background: #fff;
  box-shadow: 0 6px 16px rgba(78,111,151,.08);
}
.booking-view-btn.active {
  background: #647c99;
  border-color: #647c99;
  color: #fff;
  box-shadow: 0 6px 14px rgba(71,93,119,.15);
}
.booking-type-option.active, .booking-type-option[data-booking-type="fixed"].active {
  color: #26374b;
  background: #eef4fb;
  border-color: #cfddec;
  box-shadow: 0 0 0 3px rgba(112,155,212,.06);
}
.booking-type-icon, .booking-type-icon.purple { color: #5f86b5; }
.booking-step-label > span { background: #647c99; }

/* ----- Màu trạng thái Lịch thuê đã chốt ----- */

.booking-status-legend .upcoming i { background: #709bd4; }
.booking-status-legend .ongoing i { background: #2da76a; }
.booking-status-legend .completed i { background: #a0b2b5; }
.booking-timeline-block.upcoming {
  background: #edf4fb;
  color: #496f9d;
  border-color: #d2e0ef;
}
.booking-timeline-block.ongoing {
  background: #edf8f2;
  color: #217c52;
  border-color: #d2eadc;
}
.booking-timeline-block.completed {
  background: #f2f5f6;
  color: #6e7e82;
  border-color: #e1e7e8;
}
.week-booking-chip.upcoming {
  background: #eef4fb;
  color: #4d7098;
  border-color: #d5e2ef;
}
.week-booking-chip.ongoing {
  background: #eff8f3;
  color: #247a53;
  border-color: #d6eadf;
}
.week-booking-chip.completed {
  background: #f3f5f6;
  color: #6f7f83;
  border-color: #e4e8e9;
}
.booking-operation-badge.upcoming { color: #4d7098; background: #eef4fb; }
.booking-operation-badge.ongoing { color: #247a53; background: #eff8f3; }
.booking-operation-badge.completed { color: #6f7f83; background: #f3f5f6; }
.dashboard-action-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.dashboard-action-btn {
  min-height: 42px;
  gap: 9px;
  padding: 7px 12px;
  border-radius: 12px;
  color: #536a85;
  background: #f4f7fa;
  border: 1px solid #e5ebf1;
  transition: .16s ease;
}
.dashboard-action-btn:hover { background: #edf3f9; border-color: #d9e4ef; }
.dashboard-action-btn.primary {
  background: #709bd4;
  border-color: #709bd4;
  box-shadow: 0 7px 16px rgba(112,155,212,.18);
}
.dashboard-action-btn.primary:hover { background: #5f8dc8; border-color: #5f8dc8; }
.dashboard-action-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: #5b7fa8;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
}
.dashboard-action-btn.primary .dashboard-action-icon { color: #709bd4; }
.dashboard-action-btn small {
  color: #8591a0;
  font-size: 7.8px;
  white-space: nowrap;
}
.dashboard-action-btn.primary small { color: rgba(255,255,255,.78); }
.dashboard-room-board {
  margin-top: 0;
  padding: 15px;
  border-color: #e5ebf1;
  box-shadow: 0 5px 18px rgba(30,41,59,.035);
}
.dashboard-room-board-head { margin-bottom: 10px; align-items: center; }
.dashboard-room-board-head h3 { margin: 3px 0 3px; font-size: 18px; }
.dashboard-room-board-head p {
  margin: 0;
  color: #7a8798;
  font-size: 9.5px;
}
.dashboard-room-board-head .panel-kicker { color: #718095; }
.room-board-legend .legend-chip.occupied i { background: #2da76a; }
.room-board-legend .legend-chip.available i { background: #709bd4; }
.room-board-legend .legend-chip.ending i { background: #d6a84b; }
.room-board-legend .legend-chip.inactive i { background: #a0b2b5; }
.dashboard-floor-groups { gap: 9px; }
.dashboard-floor-section {
  padding: 9px;
  border: 1px solid #e9edf2;
  border-radius: 14px;
  background: #fbfcfe;
}
.dashboard-floor-head {
  align-items: center;
  justify-content: space-between;
  min-height: 25px;
  padding: 0 3px 7px;
}
.dashboard-floor-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-floor-head strong {
  color: #3d4b5f;
  font-size: 10px;
  letter-spacing: .06em;
}
.dashboard-floor-head span { color: #96a0ad; font-size: 8px; }
.dashboard-floor-room-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.dashboard-room-card {
  min-height: 104px;
  padding: 10px 11px 8px;
  border: 1px solid #e4eaf0;
  border-radius: 13px;
  box-shadow: 0 2px 8px rgba(30,41,59,.025);
}
.dashboard-room-card.occupied { border-top: 3px solid rgba(45,167,106,.72); }
.dashboard-room-card.available { border-top: 3px solid rgba(112,155,212,.72); }
.dashboard-room-card.inactive { border-top: 3px solid rgba(160,178,181,.75); background: #fafbfc; }
.dashboard-room-card.ending-soon { border-top-color: #d6a84b; }
.dashboard-room-symbol {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
  color: #61738a;
  background: #f3f6f9;
  font-size: 12px;
}
.dashboard-room-card h4 { color: #172033; font-size: 13px; }
.dashboard-room-state {
  flex: 0 0 auto;
  padding: 5px 7px;
  font-size: 7.8px;
}
.dashboard-room-state.occupied { color: #237c53; background: #eaf7f0; }
.dashboard-room-state.available { color: #4f76a4; background: #edf4fb; }
.dashboard-room-state.inactive { color: #738488; background: #eef2f3; }
.dashboard-room-state.ending-soon { color: #916c22; background: #fff6df; }
.dashboard-room-main {
  min-height: 42px;
  margin-top: 7px;
  padding: 7px 8px;
  border-radius: 10px;
}
.dashboard-room-main strong, .dashboard-room-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-room-main strong { color: #2a3444; font-size: 10px; }
.dashboard-room-main > span:not(.dashboard-countdown) {
  margin-top: 2px;
  color: #778496;
  font-size: 8.3px;
}
.occupied-copy { background: #f2faf6; }
.available-copy { background: #f3f7fb; }
.inactive-copy { background: #f3f5f6; }
.dashboard-countdown {
  display: inline-flex !important;
  width: max-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 7.8px !important;
}
.dashboard-countdown.normal { color: #237c53; background: #e4f5ec; }
.dashboard-countdown.warning { color: #8a6827; background: #fff2ce; }
.dashboard-countdown.critical { color: #8c6420; background: #ffe9b8; }
.dashboard-countdown.next { color: #4e7199; background: #e8f0f8; }

/* Desktop rộng: ưu tiên thấy toàn bộ phòng */

@media (min-width:1500px) {
  .dashboard-floor-room-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .dashboard-room-card { min-height: 100px; }
}

@media (max-width:1180px) {
  .dashboard-floor-room-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-action-buttons { width: 100%; margin-left: 0; }
  .dashboard-action-btn { flex: 1; }
}

@media (max-width:780px) {
  .dashboard-action-buttons {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
  }
  .dashboard-action-btn {
    min-height: 37px;
    padding: 5px 7px;
    gap: 6px;
    justify-content: center;
  }
  .dashboard-action-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .dashboard-action-btn strong { font-size: 8.5px; }
  .dashboard-action-btn small { display: none; }
  .dashboard-room-board { padding: 10px; border-radius: 15px; }
  .dashboard-room-board-head { margin-bottom: 7px; }
  .dashboard-room-board-head h3 { font-size: 15px; }
  .dashboard-room-board-head p { display: none; }
  .room-board-legend { gap: 4px; }
  .legend-chip {
    min-height: 25px;
    padding: 0 7px;
    font-size: 7px;
  }
  .dashboard-floor-groups { gap: 7px; }
  .dashboard-floor-section { padding: 7px; border-radius: 12px; }
  .dashboard-floor-head { min-height: 22px; padding-bottom: 5px; }
  .dashboard-floor-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .dashboard-room-card {
    min-height: 88px;
    padding: 8px;
    border-radius: 11px;
  }
  .dashboard-room-symbol { display: none; }
  .dashboard-room-card h4 { font-size: 11px; }
  .dashboard-room-state { padding: 4px 5px; font-size: 6.7px; }
  .dashboard-room-main {
    min-height: 38px;
    margin-top: 5px;
    padding: 6px;
  }
  .dashboard-room-main strong { font-size: 8.7px; }
  .dashboard-room-main > span:not(.dashboard-countdown) { font-size: 7.2px; }
  .dashboard-countdown {
    margin-top: 4px;
    padding: 2px 5px;
    font-size: 6.8px !important;
  }
}

@media (max-width:430px) {
  .dashboard-room-board-head { align-items: flex-start; flex-direction: column; }
  .room-board-legend { width: 100%; flex-wrap: wrap; }
}

.mobile-menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid #e2e8ef;
  background: #fff;
  color: #627286;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

/* Dashboard không lặp breadcrumb / tiêu đề lớn */

.dashboard-mode .topbar-left { display: none; }
.dashboard-mode .topbar {
  min-height: 54px;
  padding: 7px 22px;
  justify-content: flex-end;
}
.dashboard-mode .content-area { padding: 10px 20px 14px; }

/* Status = thông tin, không giống nút tác vụ */

/* Tác vụ = button rõ ràng, tách khỏi status */

.dashboard-mode .dashboard-action-buttons { gap: 6px; }
.dashboard-mode .dashboard-action-btn {
  min-height: 34px;
  padding: 4px 9px;
  border-radius: 10px;
}
.dashboard-mode .dashboard-action-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
  border-radius: 7px;
}
.dashboard-mode .dashboard-action-btn strong { font-size: 9px; }
.dashboard-mode .dashboard-action-btn small { font-size: 7px; }

/* Room board: ưu tiên diện tích cho trạng thái phòng */

.dashboard-mode .dashboard-room-board {
  padding: 8px;
  border-radius: 14px;
  box-shadow: none;
}
.dashboard-mode .dashboard-room-board-head {
  min-height: 28px;
  margin: 0 1px 6px;
  align-items: center;
}
.dashboard-mode .dashboard-room-board-head > .panel-kicker { font-size: 8px; color: #65758a; }
.dashboard-mode .room-board-legend { gap: 4px; }
.dashboard-mode .legend-chip {
  min-height: 22px;
  padding: 0 6px;
  font-size: 6.8px;
}

/* Desktop: 2 nhóm tầng / hàng để giảm chiều cao */

.dashboard-mode .dashboard-floor-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dashboard-mode .dashboard-floor-section { min-width: 0; padding: 5px; }
.dashboard-mode .dashboard-floor-head { min-height: 18px; padding: 0 2px 4px; }
.dashboard-mode .dashboard-floor-head strong { font-size: 8.5px; }
.dashboard-mode .dashboard-floor-head span { font-size: 7px; }
.dashboard-mode .dashboard-floor-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.dashboard-mode .dashboard-room-card {
  min-height: 84px;
  padding: 7px 8px 6px;
  border-radius: 10px;
  box-shadow: none;
}
.dashboard-mode .dashboard-room-card.occupied { border-top-width: 2px; }
.dashboard-mode .dashboard-room-card.available { border-top-width: 2px; }
.dashboard-mode .dashboard-room-card.inactive { border-top-width: 2px; }
.dashboard-mode .dashboard-room-card.ending-soon { border-top-color: var(--status-warning); }
.dashboard-mode .dashboard-room-symbol {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  font-size: 10px;
}
.dashboard-mode .dashboard-room-card h4 { font-size: 11px; }
.dashboard-mode .dashboard-room-state { padding: 3px 5px; font-size: 6.3px; }
.dashboard-mode .dashboard-room-main {
  min-height: 0;
  margin-top: 4px;
  padding: 5px 6px;
  border-radius: 8px;
}
.dashboard-room-current-line {
  min-width: 0;
  align-items: baseline;
  gap: 6px;
}
.dashboard-room-current-line strong, .dashboard-room-current-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-mode .dashboard-room-current-line strong { font-size: 8.7px; }
.dashboard-mode .dashboard-room-current-line span { font-size: 7px; color: #7b8796; }

/* 3 kiểu countdown có cấu trúc và màu khác nhau */

.dashboard-countdown-block {
  margin-top: 4px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 3px 5px;
  border-radius: 7px;
  border: 1px solid transparent;
}
.dashboard-countdown-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 6.4px;
  letter-spacing: .035em;
}
.dashboard-countdown {
  flex: 0 0 auto;
  display: block !important;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  font-size: 7.5px !important;
  font-weight: 900;
  white-space: nowrap;
}
.dashboard-countdown-block.current {
  color: #247a53;
  background: #edf8f2;
  border-color: #d8ece1;
}
.dashboard-countdown-block.current.warning, .dashboard-countdown-block.current.critical {
  color: #84631f;
  background: #fff7df;
  border-color: #f1dfae;
}
.dashboard-countdown-block.next {
  color: #4f76a4;
  background: #edf4fb;
  border-color: #d8e5f2;
}
.dashboard-countdown-block.transition {
  color: #796128;
  background: #f8f4e9;
  border-color: #ebe0c3;
}
.dashboard-countdown-block.transition.warning, .dashboard-countdown-block.transition.critical {
  color: #7d5b14;
  background: #fff4d6;
  border-color: #ecd89f;
}
.dashboard-countdown.normal { color: #247a53; }
.dashboard-countdown.warning, .dashboard-countdown.critical { color: #7d5b14; }
.dashboard-countdown.next { color: #4f76a4; }
.dashboard-next-inline {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #7d8998;
  font-size: 6.6px;
}
.dashboard-next-inline span {
  flex: 0 0 auto;
  color: #7890aa;
  font-weight: 800;
}
.dashboard-next-inline strong { color: #657487; font-size: 6.8px; }
.dashboard-next-inline.transition-next span { color: #a17c2d; }
.dashboard-next-inline.transition-next strong { color: #765f2e; }

/* Không hiện thông tin thiết bị trên Dashboard - để menu Phòng học xử lý */

/* Mobile FAB: thay 3 nút tác vụ chiếm chỗ */

@media (min-width:1500px) {
  .dashboard-mode .dashboard-floor-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-mode .dashboard-room-card { min-height: 82px; }
}

@media (max-width:1180px) and (min-width:781px) {
  .dashboard-mode .dashboard-floor-groups { grid-template-columns: 1fr; }
  .dashboard-mode .dashboard-floor-room-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width:780px) {
  .dashboard-mode .topbar { min-height: 50px; padding: 5px 9px; }
  .dashboard-mode .topbar-actions {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .dashboard-mode .mobile-menu-btn {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
  .dashboard-mode .user-chip {
    order: -1;
    min-height: 36px;
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 3px 8px 3px 4px;
    box-shadow: none;
  }
  .dashboard-mode .topbar-actions .user-chip > div:last-child { display: block; }
  .dashboard-mode .user-chip strong { font-size: 10px; }
  .dashboard-mode .user-chip span { display: none; }
  .dashboard-mode .date-chip {
    display: flex;
    min-height: 36px;
    padding: 0 7px;
    font-size: 8px;
    box-shadow: none;
  }
  .dashboard-mode .date-chip svg { width: 13px; color: var(--action-primary); }
  .dashboard-mode .content-area { padding: 7px 7px 72px; }
  .dashboard-mode .dashboard-room-board { padding: 5px; border-radius: 11px; }
  .dashboard-mode .dashboard-room-board-head { min-height: 24px; margin: 0 1px 4px; }
  .dashboard-mode .dashboard-room-board-head > .panel-kicker { font-size: 6.5px; }
  .dashboard-mode .room-board-legend { gap: 2px; }
  .dashboard-mode .legend-chip {
    min-height: 19px;
    padding: 0 4px;
    font-size: 5.5px;
  }
  .dashboard-mode .dashboard-floor-groups { grid-template-columns: 1fr; gap: 4px; }
  .dashboard-mode .dashboard-floor-section { border-radius: 9px; }
  .dashboard-mode .dashboard-floor-head { min-height: 16px; padding: 0 2px 3px; }
  .dashboard-mode .dashboard-floor-head strong { font-size: 7px; }
  .dashboard-mode .dashboard-floor-head span { font-size: 5.8px; }
  .dashboard-mode .dashboard-floor-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-mode .dashboard-room-card { padding: 5px; border-radius: 8px; }
  .dashboard-mode .dashboard-room-symbol { display: none; }
  .dashboard-mode .dashboard-room-card h4 { font-size: 9.5px; }
  .dashboard-mode .dashboard-room-state { font-size: 5.5px; }
  .dashboard-mode .dashboard-room-main {
    margin-top: 3px;
    padding: 4px;
    border-radius: 6px;
  }
  .dashboard-mode .dashboard-room-current-line { display: block; }
  .dashboard-mode .dashboard-room-current-line strong { display: block; font-size: 7.8px; }
  .dashboard-mode .dashboard-room-current-line span {
    display: block;
    margin-top: 1px;
    font-size: 6.2px;
  }
  .dashboard-mode .dashboard-countdown-block {
    margin-top: 3px;
    padding: 2px 3px;
    gap: 3px;
  }
  .dashboard-mode .dashboard-countdown-label { font-size: 5.4px; }
  .dashboard-mode .dashboard-countdown { font-size: 6.2px !important; }
  .dashboard-mode .dashboard-next-inline { margin-top: 2px; font-size: 5.5px; }
  .dashboard-mode .dashboard-next-inline strong { font-size: 5.7px; }
  .dashboard-mobile-actions {
    display: block;
    position: fixed;
    right: 13px;
    bottom: 14px;
    z-index: 24;
  }
  .dashboard-mobile-actions > summary {
    list-style: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--action-primary);
    box-shadow: 0 10px 26px rgba(74,108,148,.26);
    font-size: 25px;
    font-weight: 300;
    cursor: pointer;
  }
  .dashboard-mobile-actions > summary::-webkit-details-marker { display: none; }
  .dashboard-mobile-action-menu {
    position: absolute;
    right: 0;
    bottom: 54px;
    min-width: 175px;
    padding: 6px;
    display: grid;
    gap: 4px;
    border: 1px solid #e2e8ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(30,41,59,.16);
  }
  .dashboard-mobile-action-menu button {
    min-height: 37px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    border-radius: 9px;
    color: #52677f;
    background: #f7f9fc;
    font-size: 8.5px;
    font-weight: 750;
    text-align: left;
  }
  .dashboard-mobile-action-menu button:first-child { color: #fff; background: var(--action-primary); }
  .dashboard-mobile-action-menu button span {
    width: 20px;
    text-align: center;
    font-weight: 900;
  }
}

@media (max-width:430px) {
  .dashboard-mode .room-board-legend .legend-chip:nth-child(4) { display: none; }
  .dashboard-mode .dashboard-room-card { min-height: 78px; }
  .dashboard-mode .dashboard-countdown-label { letter-spacing: 0; }
}

/* Mobile navigation luôn truy cập được ở mọi module */

@media (max-width:780px) {
  .mobile-menu-btn { display: flex; }
}

/* Status: giữ là vùng báo cáo, không biến thành nút */

/* Tác vụ: tăng chữ để thao tác nhanh, đồng nhất màu toàn hệ thống */

.dashboard-mode .dashboard-action-btn {
  min-height: 38px;
  padding: 5px 11px;
  gap: 8px;
}
.dashboard-mode .dashboard-action-icon {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  font-size: 13px;
}
.dashboard-mode .dashboard-action-btn strong { font-size: 11px; line-height: 1.1; }
.dashboard-mode .dashboard-action-btn small {
  margin-top: 2px;
  font-size: 8.2px;
  line-height: 1.1;
}

/* 4 tầng luôn xếp dọc. Mỗi tầng là 1 hàng điều hành riêng. */

.dashboard-mode .dashboard-floor-groups { grid-template-columns: 1fr !important; gap: 6px; }
.dashboard-mode .dashboard-floor-section {
  display: grid;
  grid-template-columns: 78px minmax(0,1fr);
  align-items: stretch;
  gap: 7px;
  padding: 5px 6px;
  background: #fafcfe;
  border: 1px solid #edf1f5;
  border-radius: 11px;
}
.dashboard-mode .dashboard-floor-head {
  min-height: 0;
  height: 100%;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 1px solid #e5ebf1;
  background: linear-gradient(180deg,#f7faff 0%,#f3f7fb 100%);
  border-radius: 8px;
}
.dashboard-mode .dashboard-floor-head > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.dashboard-mode .dashboard-floor-head strong {
  color: #4e6178;
  font-size: 10.5px;
  letter-spacing: .065em;
}
.dashboard-mode .dashboard-floor-head span { color: #8b98a8; font-size: 7.8px; }
.dashboard-mode .dashboard-floor-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px; }

/* Card phòng rộng hơn nên tăng khả năng đọc nhưng không tăng nhiều chiều cao */

.dashboard-mode .dashboard-room-card { min-height: 76px; }
.dashboard-mode .dashboard-room-card h4 { font-size: 12.5px; }
.dashboard-mode .dashboard-room-state { font-size: 7.2px; }
.dashboard-mode .dashboard-room-current-line strong { font-size: 9.8px; }
.dashboard-mode .dashboard-room-current-line span { font-size: 8.2px; }
.dashboard-mode .dashboard-countdown-label { font-size: 7.3px; }
.dashboard-mode .dashboard-countdown { font-size: 8.8px !important; }
.dashboard-mode .dashboard-next-inline, .dashboard-mode .dashboard-next-inline strong { font-size: 7.2px; }

/* Board labels lớn vừa đủ để đọc, vẫn tiết kiệm chiều cao */

.dashboard-mode .dashboard-room-board-head > .panel-kicker { font-size: 8.5px; }
.dashboard-mode .legend-chip { font-size: 7.3px; }

/* Laptop: vẫn 4 tầng dọc + 2 phòng/tầng */

@media (max-width:1180px) and (min-width:781px) {
  .dashboard-mode .dashboard-floor-groups { grid-template-columns: 1fr !important; }
  .dashboard-mode .dashboard-floor-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .dashboard-mode .dashboard-floor-section { grid-template-columns: 72px minmax(0,1fr); }
}

/* Mobile: tầng vẫn xếp dọc, 2 phòng / hàng; title nhỏ và user vẫn ở topbar */

@media (max-width:780px) {
  .dashboard-mode .dashboard-floor-section { display: block; padding: 4px; }
  .dashboard-mode .dashboard-floor-head {
    height: auto;
    min-height: 18px;
    margin: 0 0 4px;
    padding: 0 3px 3px;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid #e8edf2;
    background: transparent;
    border-radius: 0;
  }
  .dashboard-mode .dashboard-floor-head > div {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .dashboard-mode .dashboard-floor-head strong { font-size: 8px; }
  .dashboard-mode .dashboard-floor-head span { font-size: 6.5px; }
  .dashboard-mode .dashboard-floor-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 4px; }
  .dashboard-mode .dashboard-room-card { min-height: 80px; }
  .dashboard-mode .dashboard-room-card h4 { font-size: 10px; }
  .dashboard-mode .dashboard-room-state { font-size: 6px; }
  .dashboard-mode .dashboard-room-current-line strong { font-size: 8.3px; }
  .dashboard-mode .dashboard-room-current-line span { font-size: 6.7px; }
  .dashboard-mode .dashboard-countdown-label { font-size: 5.8px; }
  .dashboard-mode .dashboard-countdown { font-size: 6.7px !important; }

  /* Menu tác vụ nổi mobile: chữ dễ đọc hơn */

  .dashboard-mobile-action-menu { min-width: 190px; }
  .dashboard-mobile-action-menu button {
    min-height: 40px;
    padding: 0 11px;
    font-size: 10.5px;
  }
  .dashboard-mobile-action-menu button span { width: 22px; font-size: 12px; }
}

/* ---------- HEADER CHUNG ---------- */

.app-page-header, .dashboard-mode .app-page-header {
  min-height: 68px;
  padding: 10px 26px;
  justify-content: space-between;
  background: rgba(247,249,252,.94);
  border-bottom: 1px solid #e5eaf0;
}
.app-page-header .topbar-left, .dashboard-mode .app-page-header .topbar-left {
  display: flex;
  align-items: center;
  min-width: 0;
}
.app-page-title {
  margin: 0;
  color: #202838;
  font-size: 20px !important;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: .055em !important;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-page-header .topbar-actions, .dashboard-mode .app-page-header .topbar-actions {
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
  gap: 8px;
}
.app-page-header .date-chip, .app-page-header .user-chip {
  min-height: 40px;
  border-radius: 11px;
  box-shadow: none;
}
.app-page-header .date-chip { color: #5e6c80; font-size: 11px; }
.app-page-header .date-chip svg { color: var(--action-primary); }
.app-page-header .user-chip strong { font-size: 11.5px; }
.app-page-header .user-chip span { font-size: 9.5px; }

/* Dashboard dùng chính header chung, không có title thứ hai trong content */

.dashboard-mode .content-area { max-width: none; padding: 9px 20px 14px; }

/* ---------- BUTTON SYSTEM ---------- */

.btn {
  min-height: 43px;
  padding: 0 17px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 790;
  letter-spacing: -.005em;
}
.btn svg { width: 17px; height: 17px; }
.dashboard-mode .dashboard-action-btn strong { font-size: 12px; }
.dashboard-mode .dashboard-action-btn small { font-size: 8.8px; }
.booking-view-btn, .booking-list-mode-btn, .booking-filter-toggle, .finance-tab-btn, .finance-view-btn, .booking-today-btn {
  font-size: 12.5px;
  font-weight: 760;
}

/* ---------- DASHBOARD: TĂNG KHẢ NĂNG ĐỌC ---------- */

.dashboard-mode .dashboard-room-board-head > .panel-kicker { font-size: 9.6px; font-weight: 850; }
.dashboard-mode .legend-chip {
  min-height: 24px;
  padding: 0 7px;
  font-size: 8.5px;
  font-weight: 760;
}
.dashboard-mode .dashboard-floor-head strong { font-size: 11.5px; }
.dashboard-mode .dashboard-floor-head span { font-size: 8.7px; }
.dashboard-mode .dashboard-room-card { min-height: 80px; padding: 7px 9px 6px; }
.dashboard-mode .dashboard-room-card h4 { font-size: 13.5px; }
.dashboard-mode .dashboard-room-state {
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 820;
}
.dashboard-mode .dashboard-room-current-line strong { font-size: 10.8px; }
.dashboard-mode .dashboard-room-current-line span { font-size: 9px; }
.dashboard-mode .dashboard-countdown-label { font-size: 8.2px; }
.dashboard-mode .dashboard-countdown { font-size: 10px !important; font-weight: 900; }
.dashboard-mode .dashboard-next-inline, .dashboard-mode .dashboard-next-inline strong { font-size: 8.2px; }

/* ---------- PHÒNG HỌC ---------- */

.rooms-v104-shell { display: grid; gap: 12px; }
.rooms-overview-strip {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 10px 9px 16px;
  border: 1px solid #e5eaf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(30,41,59,.035);
}
.rooms-overview-metrics {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
}
.rooms-overview-item {
  min-width: 126px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  padding: 4px 18px;
  border-right: 1px solid #edf1f5;
}
.rooms-overview-item:first-child { padding-left: 4px; }
.rooms-overview-item:last-child { border-right: 0; }
.rooms-overview-item strong {
  grid-row: 1 / span 2;
  color: #202838;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.035em;
}
.rooms-overview-item span {
  color: #7a8798;
  font-size: 10.5px;
  font-weight: 760;
  white-space: nowrap;
}
.rooms-overview-item.active strong { color: #2da76a; }
.rooms-overview-item.inactive strong { color: #8a9a9d; }
.rooms-add-btn { flex: 0 0 auto; }
.rooms-v104-tools {
  display: grid;
  grid-template-columns: minmax(220px,1fr) 190px;
  gap: 9px;
  padding: 0;
}
.rooms-search-box, .rooms-status-filter {
  min-height: 41px;
  border-color: #e4e9ef;
  background: #fff;
}
.rooms-search-box { box-shadow: none; }
.rooms-floor-groups { display: grid; gap: 12px; }
.rooms-floor-section {
  display: grid;
  grid-template-columns: 100px minmax(0,1fr);
  align-items: stretch;
  gap: 10px;
  padding: 8px;
  border: 1px solid #e8edf2;
  border-radius: 16px;
  background: #fbfcfe;
}
.rooms-floor-head {
  min-height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(180deg,#f3f7fc 0%,#eef4fa 100%);
  border: 1px solid #e2eaf3;
}
.rooms-floor-head > div {
  width: 100%;
  display: grid;
  gap: 5px;
}
.rooms-floor-head strong {
  color: #52677f;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.rooms-floor-head span {
  color: #8b98a8;
  font-size: 10px;
  font-weight: 700;
}
.rooms-floor-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.room-library-card {
  position: relative;
  min-width: 0;
  min-height: 136px;
  display: flex;
  flex-direction: column;
  padding: 14px 15px 12px;
  border: 1px solid #e5eaf0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(30,41,59,.035);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.room-library-card:hover {
  transform: translateY(-1px);
  border-color: #d9e2ec;
  box-shadow: 0 9px 24px rgba(30,41,59,.065);
}
.room-library-card.inactive { background: #fafbfc; }
.room-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.room-library-title { min-width: 0; }
.room-library-title h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2938;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.room-library-title > span {
  display: block;
  margin-top: 4px;
  color: #7f8b9a;
  font-size: 11px;
  font-weight: 680;
}
.room-menu-wrap { position: relative; flex: 0 0 auto; }
.room-menu-toggle {
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #718096;
  background: #f5f7fa;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
}
.room-menu-toggle:hover { background: #edf2f7; }
.room-card-menu {
  position: absolute;
  top: 35px;
  right: 0;
  z-index: 12;
  min-width: 172px;
  padding: 6px;
  display: grid;
  gap: 3px;
  border: 1px solid #e3e8ee;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(30,41,59,.16);
}
.room-card-menu button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #4f6075;
  background: transparent;
  font-size: 11.5px;
  font-weight: 720;
  text-align: left;
}
.room-card-menu button:hover { background: #f4f7fa; }
.room-card-menu button.danger { color: #bd3542; }
.room-card-menu button.danger:hover { background: #fff1f2; }
.room-equipment-list {
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}
.room-equipment-chip {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #e2e8ef;
  border-radius: 8px;
  color: #607086;
  background: #f7f9fb;
  font-size: 10px;
  font-weight: 720;
}
.room-equipment-chip.more {
  color: #5279a7;
  background: #eef4fb;
  border-color: #dce8f5;
}
.room-equipment-chip.muted { color: #97a2af; font-weight: 650; }
.room-library-note {
  min-height: 18px;
  margin: 8px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #748195;
  font-size: 10.5px;
  line-height: 1.4;
}
.room-library-note.muted { color: #a0a9b4; }
.room-library-footer {
  margin-top: auto;
  padding-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #eef1f4;
}
.room-library-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #66758a;
  font-size: 10.5px;
  font-weight: 760;
  white-space: nowrap;
}
.room-library-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #a0b2b5;
}
.room-library-status.active { color: #287c56; }
.room-library-status.active i { background: #2da76a; }
.room-library-status.inactive { color: #7d8c90; }
.room-view-bookings {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  color: #5e82ad;
  background: transparent;
  font-size: 10.5px;
  font-weight: 790;
  white-space: nowrap;
}
.room-view-bookings:hover { color: #436c9b; }
.room-view-bookings span { font-size: 14px; line-height: 1; }

/* Form phòng: tinh gọn và đồng nhất */

.room-modal-v104 { max-width: 650px; }
.room-modal-v104 .form-grid { gap: 13px; }
.room-modal-v104 .form-field label { font-weight: 760; }
.room-modal-v104 .form-field input, .room-modal-v104 .form-field select, .room-modal-v104 .form-field textarea {
  border-color: #e2e7ed;
  border-radius: 11px;
  background: #fbfcfd;
}
.room-modal-v104 .form-field input:focus, .room-modal-v104 .form-field select:focus, .room-modal-v104 .form-field textarea:focus {
  border-color: #b9d0ea;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(112,155,212,.10);
}
.room-modal-v104 .equipment-picker span {
  border-color: #e2e8ef;
  border-radius: 9px;
  background: #f7f9fb;
}
.room-modal-v104 .equipment-picker input:checked + span {
  color: #4d76a4;
  background: #eef4fb;
  border-color: #cfdff0;
  box-shadow: inset 0 0 0 1px #deebf7;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:980px) and (min-width:781px) {
  .rooms-floor-section { grid-template-columns: 84px minmax(0,1fr); }
  .rooms-overview-item { min-width: 108px; padding: 4px 12px; }
  .room-library-title h3 { font-size: 17px; }
}

@media (max-width:780px) {
  .app-page-header, .dashboard-mode .app-page-header {
    min-height: 56px;
    padding: 6px 9px;
    gap: 5px;
  }
  .app-page-title {
    max-width: 118px;
    font-size: 12px !important;
    letter-spacing: .035em !important;
  }
  .app-page-header .topbar-actions, .dashboard-mode .app-page-header .topbar-actions { width: auto; gap: 4px; }
  .app-page-header .mobile-menu-btn {
    order: 4;
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }
  .app-page-header .date-chip {
    order: 2;
    min-height: 34px;
    padding: 0 6px;
    font-size: 7.8px;
    white-space: nowrap;
  }
  .app-page-header .date-chip svg { display: none; }
  .app-page-header .user-chip {
    order: 3;
    min-height: 34px;
    padding: 3px 6px 3px 4px;
  }
  .app-page-header .user-chip strong { font-size: 9px; }
  .app-page-header .user-chip span { display: none; }
  .app-page-header .avatar-small {
    width: 27px;
    height: 27px;
    font-size: 10px;
  }
  .dashboard-mode .content-area { padding: 7px 8px 12px; }
  .btn { min-height: 41px; padding: 0 14px; }
  .dashboard-mode .dashboard-room-board-head > .panel-kicker { font-size: 7.8px; }
  .dashboard-mode .legend-chip { font-size: 6.6px; min-height: 20px; }
  .dashboard-mode .dashboard-floor-head strong { font-size: 8.8px; }
  .dashboard-mode .dashboard-floor-head span { font-size: 7.1px; }
  .dashboard-mode .dashboard-room-card { min-height: 82px; padding: 6px; }
  .dashboard-mode .dashboard-room-card h4 { font-size: 10.8px; }
  .dashboard-mode .dashboard-room-state { font-size: 6.5px; padding: 2px 4px; }
  .dashboard-mode .dashboard-room-current-line strong { font-size: 9px; }
  .dashboard-mode .dashboard-room-current-line span { font-size: 7.2px; }
  .dashboard-mode .dashboard-countdown-label { font-size: 6.4px; }
  .dashboard-mode .dashboard-countdown { font-size: 7.5px !important; }
  .dashboard-mode .dashboard-next-inline, .dashboard-mode .dashboard-next-inline strong { font-size: 6.4px; }

  /* Phòng học: tầng dọc, 2 phòng / hàng */

  .rooms-v104-shell { gap: 8px; }
  .rooms-overview-strip {
    min-height: 54px;
    padding: 6px 7px 6px 9px;
    gap: 7px;
  }
  .rooms-overview-metrics { flex: 1; }
  .rooms-overview-item {
    min-width: 0;
    flex: 1;
    padding: 3px 6px;
    column-gap: 5px;
  }
  .rooms-overview-item strong { font-size: 16px; }
  .rooms-overview-item span {
    font-size: 7px;
    white-space: normal;
    line-height: 1.15;
  }
  .rooms-add-btn {
    min-height: 36px;
    padding: 0 9px;
    font-size: 9px;
  }
  .rooms-add-btn svg { width: 13px; height: 13px; }
  .rooms-v104-tools { grid-template-columns: minmax(0,1fr) 118px; gap: 6px; }
  .rooms-search-box, .rooms-status-filter { min-height: 36px; font-size: 9px; }
  .rooms-search-box svg { width: 14px; }
  .rooms-floor-groups { gap: 8px; }
  .rooms-floor-section {
    display: block;
    padding: 5px;
    border-radius: 12px;
  }
  .rooms-floor-head {
    min-height: 24px;
    margin-bottom: 5px;
    padding: 0 4px 4px;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid #e7edf3;
    border-radius: 0;
    background: transparent;
  }
  .rooms-floor-head > div {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .rooms-floor-head strong { font-size: 9px; }
  .rooms-floor-head span { font-size: 7px; }
  .rooms-floor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .room-library-card {
    min-height: 116px;
    padding: 9px 8px 8px;
    border-radius: 10px;
  }
  .room-library-title h3 { font-size: 13px; }
  .room-library-title > span { margin-top: 3px; font-size: 8px; }
  .room-menu-toggle {
    width: 25px;
    height: 24px;
    border-radius: 7px;
    font-size: 10px;
  }
  .room-card-menu { top: 29px; min-width: 150px; }
  .room-card-menu button { min-height: 32px; font-size: 10px; }
  .room-equipment-list {
    min-height: 22px;
    margin-top: 7px;
    gap: 4px;
  }
  .room-equipment-chip {
    min-height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 7px;
  }
  .room-equipment-list .room-equipment-chip:nth-child(n/**/+3):not(.more) { display: none; }
  .room-library-note { display: none; }
  .room-library-footer { padding-top: 7px; gap: 5px; }
  .room-library-status { font-size: 7.3px; gap: 4px; }
  .room-library-status i {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
  }
  .room-view-bookings { font-size: 7.2px; gap: 2px; }
  .room-view-bookings span { font-size: 10px; }
  .room-modal-v104 { width: min(94vw,650px); }
}

@media (max-width:430px) {
  .app-page-title { max-width: 108px; font-size: 11.2px !important; }
  .app-page-header .user-chip > div:last-child { display: none; }
  .app-page-header .user-chip { padding: 3px; }
  .app-page-header .date-chip { font-size: 7.4px; }
  .rooms-overview-item span { font-size: 6.5px; }
  .rooms-add-btn span { display: none; }
  .rooms-add-btn { width: 36px; padding: 0; }
  .room-view-bookings { font-size: 6.7px; }
}

/* ----- Header quick stats ----- */

.bookings-mode .app-page-header .topbar-left { flex: 1; gap: 16px; }
.page-quick-stats {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.page-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  color: #5f6f82;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(30,41,59,.025);
}
.page-stat-pill strong {
  color: #253246;
  line-height: 1;
  font-weight: 850;
}
.page-stat-pill em { font-style: normal; font-weight: 730; }
.page-stat-pill i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #a0b2b5;
}
.page-stat-pill.sessions { background: #f8fafc; }
.page-stat-pill.occupied i { background: #2da76a; }
.page-stat-pill.occupied strong { color: #257a52; }
.page-stat-pill.available i { background: #709bd4; }
.page-stat-pill.available strong { color: #527dae; }
.page-stat-pill.ending { border-color: #eadcb9; background: #fff9ec; }
.page-stat-pill.ending i { background: #d6a84b; }
.page-stat-pill.ending strong { color: #9b7425; }

/* ----- Booking page spacing ----- */

.bookings-mode .content-area { padding: 15px 24px 36px; max-width: 1720px; }
#bookingsPage { display: grid; gap: 12px; }

/* ----- Main compact command bar ----- */

.booking-v11-commandbar {
  min-height: 54px;
  grid-template-columns: auto minmax(290px,1fr) auto;
  gap: 12px;
  padding: 6px;
  border: 1px solid #e3e9ef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(30,41,59,.035);
}
.booking-v11-date-nav {
  display: flex;
  align-items: center;
  gap: 5px;
}
.booking-v11-date-nav .booking-nav-arrow, .booking-v11-date-nav .booking-today-btn, .booking-v11-date-nav input {
  height: 40px;
  border: 1px solid #e0e6ed;
  border-radius: 10px;
  background: #f9fbfd;
  color: #405166;
  box-shadow: none;
}
.booking-v11-date-nav .booking-nav-arrow {
  width: 40px;
  flex: 0 0 40px;
  font-size: 20px;
  line-height: 1;
}
.booking-v11-date-nav .booking-today-btn {
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 780;
}
.booking-v11-date-nav input {
  min-width: 142px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 720;
}
.booking-v11-date-nav .booking-nav-arrow:hover, .booking-v11-date-nav .booking-today-btn:hover, .booking-v11-date-nav input:hover {
  border-color: #cfdae6;
  background: #f4f8fb;
}
.booking-v11-view-switch {
  justify-self: center;
  width: min(330px,100%);
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 3px;
  padding: 4px;
  border: 1px solid #e3e8ee;
  border-radius: 12px;
  background: #f5f7fa;
}
.booking-v11-view-switch .booking-view-btn {
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6c7a8d;
  font-size: 12.5px;
  font-weight: 770;
  box-shadow: none;
}
.booking-v11-view-switch .booking-view-btn.active {
  color: #4c78a8;
  background: #fff;
  box-shadow: 0 3px 10px rgba(30,41,59,.075);
}
.booking-v11-view-switch .booking-view-btn:not(.active):hover { color: #4d6178; background: #eef3f7; }
.booking-v11-add-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 11px;
}
.booking-v11-legacy-summary { display: none !important; }

/* Không can thiệp thiết kế lịch bên trong; chỉ giảm khoảng cách trước lịch */

#bookingDayView, #bookingWeekView, #bookingListView { margin-top: 0; }

/* ----- List top switch + compact summary ----- */

.booking-list-v11-head {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.booking-list-v11-head .booking-list-mode-switch {
  margin: 0;
  padding: 4px;
  border-radius: 12px;
  background: #f5f7fa;
}
.booking-list-v11-head .booking-list-mode-btn {
  height: 35px;
  padding: 0 13px;
  border-radius: 9px;
  color: #6d7b8c;
}
.booking-list-v11-head .booking-list-mode-btn.active {
  color: #4c78a8;
  background: #fff;
  box-shadow: 0 3px 10px rgba(30,41,59,.07);
}
.booking-list-v11-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #7a8797;
  font-size: 10.5px;
  font-weight: 700;
}
.booking-list-v11-summary span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid #e6ebf0;
  border-radius: 9px;
  background: #fafbfd;
  white-space: nowrap;
}
.booking-list-v11-summary strong {
  color: #39495d;
  font-size: 12px;
  font-weight: 850;
}

/* ----- Modern filter bar ----- */

.booking-list-v11-toolbar {
  display: grid;
  grid-template-columns: minmax(260px,1fr) 170px 190px auto;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.booking-list-v11-toolbar .booking-list-search, .booking-filter-control, .booking-v11-filter-toggle {
  min-height: 42px;
  height: 42px;
  border: 1px solid #e0e6ed;
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(30,41,59,.02);
}
.booking-list-v11-toolbar .booking-list-search { display: flex; align-items: center; }
.booking-list-v11-toolbar .booking-list-search input { height: 40px; font-size: 12px; }
.booking-list-v11-toolbar .booking-list-search svg {
  width: 16px;
  height: 16px;
  color: #8190a1;
}
.booking-filter-control {
  position: relative;
  display: flex;
  padding: 0 10px;
}
.booking-filter-control > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: #7790ad;
  stroke-width: 1.8;
}
.booking-filter-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #709bd4;
}
.booking-filter-control input, .booking-filter-control select {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: #405166;
  font-size: 11.5px;
  font-weight: 730;
  box-shadow: none !important;
}
.booking-v11-filter-toggle {
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: #5c6c80;
  font-size: 11.5px;
  font-weight: 790;
  cursor: pointer;
}
.booking-v11-filter-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.booking-v11-filter-toggle:hover, .booking-v11-filter-toggle.active {
  border-color: #cfdceb;
  background: #f2f7fc;
  color: #557eab;
}
.booking-filter-count {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 4px;
  background: #709bd4;
  font-size: 9px;
  font-weight: 850;
}

/* Active filter chips */

.booking-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  margin-top: -2px;
}
.booking-filter-chip, .booking-filter-clear-all {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 9px;
  font-weight: 740;
  cursor: pointer;
}
.booking-filter-chip {
  border: 1px solid #dbe6f1;
  background: #f1f6fb;
  color: #526f8e;
}
.booking-filter-chip b {
  color: #8b9caf;
  font-size: 13px;
  line-height: 1;
}
.booking-filter-chip:hover { border-color: #c8d9e9; background: #eaf2f9; }
.booking-filter-clear-all {
  border: 0;
  background: transparent;
  color: #7b8797;
}
.booking-filter-clear-all:hover { color: #526174; background: #f4f6f8; }

/* Advanced filters */

.booking-v11-advanced-filters {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid #e5eaf0;
  border-radius: 13px;
  background: #f8fafc;
  box-shadow: none;
}
.booking-advanced-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.booking-advanced-field > span {
  color: #7b8898;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.booking-advanced-field .select-control {
  width: 100%;
  height: 39px;
  padding: 0 10px;
  border: 1px solid #e0e6ed;
  border-radius: 9px;
  background: #fff;
  color: #435267;
  font-size: 11px;
  font-weight: 700;
}
.booking-advanced-field .select-control:focus {
  border-color: #bcd1e8;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(112,155,212,.10);
}

/* ----- Responsive ----- */

@media (max-width:1100px) {
  .page-stat-pill { padding: 0 8px; }
  .page-stat-pill em { font-size: 9.5px; }
  .booking-v11-commandbar { grid-template-columns: auto minmax(250px,1fr) auto; }
  .booking-list-v11-toolbar { grid-template-columns: minmax(220px,1fr) 205px 175px auto; }
}

@media (max-width:900px) {
  .bookings-mode .app-page-header .topbar-left { gap: 9px; }
  .page-quick-stats { gap: 4px; }
  .page-stat-pill {
    min-height: 31px;
    padding: 0 7px;
    border-radius: 9px;
  }
  .page-stat-pill strong { font-size: 12px; }
  .page-stat-pill em { font-size: 8.5px; }
  .booking-v11-commandbar {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "date add" "view view";
    gap: 6px;
  }
  .booking-v11-date-nav { grid-area: date; }
  .booking-v11-view-switch { grid-area: view; width: 100%; }
  .booking-v11-add-btn { grid-area: add; }
  .booking-list-v11-head { align-items: stretch; flex-direction: column; }
  .booking-list-v11-summary { overflow-x: auto; padding-bottom: 1px; }
  .booking-list-v11-toolbar { grid-template-columns: minmax(0,1fr) 205px 175px auto; }
  .booking-v11-advanced-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:780px) {
  .bookings-mode .app-page-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "booking-title booking-actions" "booking-stats booking-stats";
    min-height: 86px;
    padding: 7px 9px 6px;
    row-gap: 5px;
  }
  .bookings-mode .app-page-header .topbar-left { display: contents; }
  .bookings-mode .app-page-title {
    grid-area: booking-title;
    max-width: none;
    align-self: center;
    font-size: 12.5px !important;
  }
  .bookings-mode .page-quick-stats {
    grid-area: booking-stats;
    width: 100%;
    overflow: hidden;
    gap: 4px;
  }
  .bookings-mode .page-stat-pill {
    min-width: 0;
    flex: 1 1 0;
    min-height: 30px;
    justify-content: center;
    padding: 0 5px;
    box-shadow: none;
  }
  .bookings-mode .page-stat-pill strong { font-size: 11.5px; }
  .bookings-mode .page-stat-pill em {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 7.7px;
  }
  .bookings-mode .app-page-header .topbar-actions { grid-area: booking-actions; align-self: center; }
  .bookings-mode .content-area { padding: 8px 8px 18px; }
  #bookingsPage { gap: 8px; }
  .booking-v11-commandbar {
    min-height: 0;
    padding: 5px;
    border-radius: 12px;
  }
  .booking-v11-date-nav .booking-nav-arrow {
    width: 34px;
    flex-basis: 34px;
    height: 36px;
  }
  .booking-v11-date-nav .booking-today-btn {
    height: 36px;
    padding: 0 8px;
    font-size: 9px;
  }
  .booking-v11-date-nav input {
    min-width: 124px;
    height: 36px;
    padding: 0 7px;
    font-size: 9px;
  }
  .booking-v11-add-btn {
    min-width: 38px;
    min-height: 36px;
    width: 38px;
    padding: 0;
  }
  .booking-v11-add-btn span { display: none; }
  .booking-v11-add-btn svg { width: 15px; height: 15px; }
  .booking-v11-view-switch { border-radius: 10px; }
  .booking-v11-view-switch .booking-view-btn { height: 33px; font-size: 9.5px; }
  .booking-list-v11-head { gap: 7px; }
  .booking-list-v11-head .booking-list-mode-switch { width: 100%; }
  .booking-list-v11-head .booking-list-mode-btn {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 7px;
    font-size: 8.5px;
  }
  .booking-list-v11-summary { gap: 4px; }
  .booking-list-v11-summary span {
    min-height: 27px;
    padding: 0 7px;
    font-size: 7.8px;
  }
  .booking-list-v11-summary strong { font-size: 9.5px; }
  .booking-list-v11-toolbar { gap: 6px; }
  .booking-filter-control.booking-list-month-field, .booking-filter-control.booking-list-status-field {
    min-width: 0;
    height: 38px;
    min-height: 38px;
  }
  .booking-list-month-field { min-width: 0; }
  .booking-list-month-field .booking-filter-stack { min-width: 0; }
  .booking-filter-control input, .booking-filter-control select { height: 36px; font-size: 9px; }
  .booking-list-month-field { grid-column: 1; }
  .booking-list-status-field { grid-column: 1; }
  .booking-v11-filter-toggle {
    min-height: 38px;
    min-width: 86px;
    font-size: 9px;
  }
  .booking-v11-filter-toggle svg { width: 13px; height: 13px; }
  .booking-active-filters { gap: 4px; }
  .booking-filter-chip, .booking-filter-clear-all {
    min-height: 26px;
    padding: 0 7px;
    font-size: 8px;
  }
  .booking-v11-advanced-filters {
    grid-template-columns: 1fr 1fr;
    padding: 8px;
    gap: 7px;
  }
  .booking-advanced-field > span { font-size: 7.5px; }
  .booking-advanced-field .select-control { height: 36px; font-size: 9px; }
}

@media (max-width:560px) {
  .bookings-mode .app-page-header .date-chip { display: none; }
  .bookings-mode .page-stat-pill.ending em { display: none; }
  .booking-v11-date-nav .booking-today-btn { display: none; }
  .booking-v11-date-nav input { min-width: 128px; }
  .booking-v11-advanced-filters { grid-template-columns: 1fr; }
}

@media (max-width:430px) {
  .bookings-mode .page-stat-pill em { font-size: 7px; }
  .bookings-mode .page-stat-pill strong { font-size: 10.5px; }
  .bookings-mode .page-stat-pill { padding: 0 4px; }
}

.finance-v12-shell { display: grid; gap: 10px; }
.finance-v12-commandbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  border: 1px solid #e4e9ef;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(30,41,59,.03);
}
.finance-v12-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
}
.finance-v12-tabs {
  flex: 0 0 auto;
  padding: 4px;
  gap: 3px;
  border-radius: 11px;
  background: #f4f7fa;
}
.finance-v12-tabs .finance-tab-btn {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: #6f7e8f;
  font-size: 11.5px;
  font-weight: 790;
}
.finance-v12-tabs .finance-tab-btn.active {
  color: #4f79a9;
  background: #fff;
  box-shadow: 0 3px 10px rgba(30,41,59,.07);
}
.finance-filter-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
}
.finance-search-control, .finance-filter-control {
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #e0e6ed;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(30,41,59,.018);
}
.finance-search-control {
  min-width: 180px;
  flex: 1 1 220px;
  max-width: 300px;
}
.finance-filter-control { flex: 0 1 175px; min-width: 130px; }
.finance-month-control { flex-basis: 150px; }
.finance-search-control svg, .finance-filter-control svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: #7890aa;
  stroke-width: 1.8;
}
.finance-filter-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #709bd4;
}
.finance-filter-dot.status { background: #d4a94c; }
.finance-search-control input, .finance-filter-control input, .finance-filter-control select {
  min-width: 0;
  width: 100%;
  height: 38px;
  padding: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  color: #405166;
  font-size: 11.3px;
  font-weight: 710;
  box-shadow: none !important;
}
.finance-reset-btn {
  height: 40px;
  padding: 0 9px;
  border-radius: 9px;
  color: #7a8797;
  background: transparent;
  font-size: 10px;
  font-weight: 760;
}
.finance-reset-btn:hover { background: #f4f6f8; color: #56667a; }
.finance-v12-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.finance-v12-actions .btn {
  min-height: 40px;
  height: 40px;
  padding: 0 13px;
  font-size: 11.5px;
}
.finance-v12-actions .btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.finance-settings-btn { color: #56687d; }

/* Header stats: compact, same language as Lịch thuê */

.finance-mode .app-page-header .topbar-left { gap: 10px; }
.finance-mode .page-quick-stats { gap: 5px; }
.finance-header-stat {
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #e2e8ef;
  border-radius: 9px;
  background: #fff;
  color: #617085;
  box-shadow: 0 2px 7px rgba(30,41,59,.02);
  font: inherit;
}
button.finance-header-stat { cursor: pointer; }
.finance-header-stat strong {
  color: #34465b;
  font-size: 12px;
  font-weight: 870;
  white-space: nowrap;
}
.finance-header-stat em {
  color: #7b8898;
  font-size: 9.3px;
  font-style: normal;
  font-weight: 730;
  white-space: nowrap;
}
.finance-header-stat i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 6px;
}
.finance-header-stat.forecast strong { color: #4f78a6; }
.finance-header-stat.paid i { background: #2da76a; }
.finance-header-stat.paid strong { color: #287c56; }
.finance-header-stat.remaining { border-color: #eadfbe; background: #fffdf7; }
.finance-header-stat.remaining i { background: #d4a94c; }
.finance-header-stat.remaining strong { color: #8e6815; }
.finance-header-stat.remaining:hover { background: #fff9e8; border-color: #dec98a; }
.finance-mode .booking-header-stat { display: none !important; }
.bookings-mode .finance-header-stat { display: none !important; }
.finance-active-filters {
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.finance-filter-chip, .finance-filter-clear-all {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 9.8px;
  font-weight: 730;
}
.finance-filter-chip {
  border: 1px solid #dbe6f1;
  background: #f1f6fb;
  color: #526f8e;
}
.finance-filter-chip b { color: #8b9caf; font-size: 12px; }
.finance-filter-clear-all { color: #7c8796; background: transparent; }
.finance-view { gap: 10px; }
.finance-summary-strip {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 3px;
  color: #7a8797;
  font-size: 10.5px;
  font-weight: 700;
}
.finance-summary-strip span {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid #e6ebf0;
  border-radius: 9px;
  background: #fafbfd;
}
.finance-summary-strip strong {
  color: #3d4d61;
  font-size: 12px;
  font-weight: 850;
}
.finance-summary-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr);
  gap: 10px;
}
.finance-table-card {
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(30,41,59,.025);
}
.finance-table-head-v12 { align-items: center; margin-bottom: 10px; }
.finance-table-head-v12 h3 { margin-top: 3px; font-size: 15px; }
.finance-table-head-v12 .panel-kicker { font-size: 8px; }
.finance-view-switch {
  padding: 3px;
  border-radius: 10px;
  background: #f4f7fa;
}
.finance-view-btn {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 10px;
}
.finance-view-btn.active { color: #527da9; background: #fff; }
.finance-total-inline {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 11px;
  border-radius: 10px;
  background: #f4f8fc;
  border: 1px solid #e1eaf3;
}
.finance-total-inline span {
  color: #728197;
  font-size: 10px;
  font-weight: 740;
}
.finance-total-inline strong {
  color: #4f79a8;
  font-size: 17px;
  letter-spacing: -.02em;
}
.forecast-group { border-radius: 11px; }
.forecast-group summary { min-height: 50px; padding: 9px 11px; }
.forecast-group summary > div strong { font-size: 11.5px; }
.forecast-group summary > div span { font-size: 9px; }
.forecast-group summary > strong { color: #4f79a8; font-size: 12px; }
.forecast-detail-row {
  min-height: 38px;
  padding: 6px 10px;
  font-size: 9.5px;
}
.forecast-detail-row strong { font-size: 9.5px; }
.finance-debt-list { display: grid; gap: 6px; }
.finance-debt-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid #e9edf1;
  border-radius: 10px;
  background: #fffdf8;
}
.finance-debt-row div strong, .finance-debt-row div span { display: block; }
.finance-debt-row div strong { font-size: 11px; }
.finance-debt-row div span {
  margin-top: 3px;
  color: #8792a0;
  font-size: 8.8px;
}
.finance-debt-row > strong { color: #916b19; font-size: 11.5px; }
.finance-invoice-v12-grid, .finance-payments-grid {
  display: grid;
  grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr);
  gap: 10px;
}
.finance-payments-grid { grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); }
.finance-count-badge, .finance-inline-counts span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #e6ebf0;
  border-radius: 8px;
  color: #798696;
  background: #fafbfd;
  font-size: 9px;
  font-weight: 720;
}
.finance-inline-counts { display: flex; gap: 5px; }
.finance-count-badge strong, .finance-inline-counts strong { color: #435267; font-size: 10.5px; }
.finance-revenue-inline { color: #287c56; font-size: 14px; }
.invoice-customer-card-v12, .invoice-card-v12 { border-color: #e7ebf0; border-radius: 12px; }
.invoice-customer-card-v12 { padding: 11px; }
.invoice-customer-card-v12 .invoice-card-main strong { font-size: 11.5px; }
.invoice-customer-card-v12 .invoice-card-main span { font-size: 9px; }
.invoice-customer-card-v12 .invoice-card-main small { color: #a67825; font-size: 8.5px; }
.invoice-status-dot.soft { background: #709bd4; box-shadow: 0 0 0 4px #edf4fb; }
.invoice-card-v12 { padding: 12px; }
.invoice-card-v12 .invoice-card-head strong { font-size: 11.5px; }
.invoice-card-v12 .invoice-no { font-size: 8px; }
.invoice-card-v12 .invoice-status-badge {
  min-height: 24px;
  padding: 0 7px;
  font-size: 8px;
}
.invoice-card-v12 .invoice-card-meta {
  margin-top: 8px;
  gap: 8px;
  font-size: 8.5px;
}
.invoice-card-v12 .invoice-money-grid { gap: 6px; margin-top: 9px; }
.invoice-card-v12 .invoice-money-grid > div { padding: 7px 8px; }
.invoice-card-v12 .invoice-money-grid span { font-size: 7.8px; }
.invoice-card-v12 .invoice-money-grid strong { font-size: 10px; }
.invoice-card-v12 .money-paid { color: #287c56; }
.invoice-card-v12 .money-remaining { color: #916b19; }
.invoice-card-actions-v12 {
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}
.invoice-card-actions-v12 .btn {
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  font-size: 9.5px;
  border-radius: 8px;
}
.invoice-more-menu { position: relative; margin-left: auto; }
.invoice-more-menu summary {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  list-style: none;
  cursor: pointer;
  border: 1px solid #e1e6ec;
  border-radius: 8px;
  color: #758397;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}
.invoice-more-menu summary::-webkit-details-marker { display: none; }
.invoice-more-menu > div {
  position: absolute;
  right: 0;
  top: 39px;
  z-index: 20;
  min-width: 170px;
  display: grid;
  gap: 3px;
  padding: 5px;
  border: 1px solid #e2e7ed;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(30,41,59,.14);
}
.invoice-more-menu button {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 7px;
  color: #536478;
  background: transparent;
  font-size: 9.5px;
  font-weight: 720;
  text-align: left;
}
.invoice-more-menu button:hover { background: #f4f7fa; }
.payment-history-list { display: grid; gap: 5px; }
.payment-history-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 96px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e9edf1;
  border-radius: 10px;
  background: #fff;
}
.payment-history-date strong, .payment-history-date span, .payment-history-main strong, .payment-history-main span { display: block; }
.payment-history-date strong { font-size: 9.5px; }
.payment-history-date span {
  margin-top: 3px;
  color: #8692a0;
  font-size: 8px;
}
.payment-history-main strong { font-size: 10.5px; }
.payment-history-main span {
  margin-top: 3px;
  color: #8390a0;
  font-size: 8.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.payment-history-amount {
  color: #287c56;
  font-size: 10.5px;
  white-space: nowrap;
}
.invoice-customer-select-v12 { display: block; padding: 12px; }
.invoice-customer-select-v12 label {
  display: block;
  margin-bottom: 6px;
  color: #68778a;
  font-size: 10px;
  font-weight: 760;
}
.invoice-customer-select-v12 select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #e0e6ed;
  border-radius: 10px;
  color: #34465b;
  background: #fff;
  font-size: 11.5px;
  font-weight: 720;
}
.invoice-booking-row input { accent-color: #709bd4; }
.invoice-booking-row strong { color: #4f79a8; }
.invoice-total-bar strong { color: #4f79a8; }

/* Payment settings */

.payment-settings-modal { max-width: 620px; }
.payment-settings-note {
  margin: 4px 0 14px;
  padding: 10px 11px;
  border: 1px solid #e2eaf2;
  border-radius: 10px;
  color: #65758a;
  background: #f5f8fb;
  font-size: 10px;
  line-height: 1.45;
}
.payment-settings-preview {
  margin-top: 14px;
  padding: 11px;
  border: 1px solid #e5eaf0;
  border-radius: 10px;
  background: #fafbfd;
}
.payment-settings-preview span, .payment-settings-preview strong, .payment-settings-preview small { display: block; }
.payment-settings-preview span { color: #7c8898; font-size: 8.5px; }
.payment-settings-preview strong {
  margin-top: 4px;
  color: #405166;
  font-size: 10.5px;
}
.payment-settings-preview small {
  margin-top: 5px;
  color: #8a96a4;
  font-size: 8.5px;
  line-height: 1.4;
}

/* Payment receipt preview */

.receipt-modal-backdrop {
  align-items: flex-start;
  overflow-y: auto;
  padding: 24px 12px;
}
.receipt-modal-card {
  width: min(900px,96vw);
  max-width: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  background: #eef2f6;
}
.receipt-modal-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #dde3e9;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.receipt-modal-actions { display: flex; gap: 7px; }
.payment-receipt-paper { padding: 18px; }
.payment-receipt {
  width: min(760px,100%);
  min-height: 1000px;
  margin: 0 auto;
  padding: 42px 44px 34px;
  color: #202838;
  box-shadow: 0 10px 34px rgba(30,41,59,.10);
}
.receipt-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dde4eb;
}
.receipt-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.receipt-brand img { width: 48px; height: 48px; }
.receipt-brand strong, .receipt-brand span, .receipt-code span, .receipt-code strong { display: block; }
.receipt-brand strong { font-size: 13px; letter-spacing: .025em; }
.receipt-brand span, .receipt-code span {
  margin-top: 3px;
  color: #7d8998;
  font-size: 8.5px;
}
.receipt-code { text-align: right; }
.receipt-code strong { margin-top: 4px; font-size: 10.5px; }
.receipt-title-block { padding: 22px 0 18px; text-align: center; }
.receipt-title-block h2 {
  margin: 0;
  color: #263447;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .015em;
}
.receipt-title-block p {
  margin: 7px 0 0;
  color: #738195;
  font-size: 9.5px;
}
.receipt-section { margin-top: 17px; }
.receipt-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.receipt-section-title strong { font-size: 9px; letter-spacing: .055em; }
.receipt-section-title span { color: #7f8b99; font-size: 8.5px; }
.receipt-table-wrap { overflow-x: auto; }
.receipt-table { border-collapse: collapse; font-size: 9px; }
.receipt-table th {
  padding: 8px 7px;
  text-align: left;
  color: #647387;
  background: #f1f5f8;
}
.receipt-table td { padding: 8px 7px; border-bottom: 1px solid #e9edf1; }
.receipt-empty-row { color: #8a96a4; text-align: center !important; }
.receipt-total-due { font-size: 11.5px !important; }
.receipt-total-due strong { color: #916b19; }
.receipt-payment-section {
  display: grid;
  grid-template-columns: minmax(0,1fr) 170px;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #dde5ed;
  border-radius: 12px;
  background: #fbfcfd;
}
.receipt-section-kicker {
  display: block;
  color: #6b8098;
  font-size: 8px;
  font-weight: 800;
}
.receipt-bank-info h3 { margin: 5px 0 10px; font-size: 13.5px; }
.receipt-bank-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: 9px;
}
.receipt-transfer-note {
  margin-top: 11px;
  padding: 8px;
  border-radius: 8px;
  background: #edf4fb;
}
.receipt-transfer-note span, .receipt-transfer-note strong { display: block; }
.receipt-transfer-note span { color: #748398; font-size: 8px; }
.receipt-transfer-note strong {
  margin-top: 4px;
  color: #405d7c;
  font-size: 9px;
}
.receipt-qr-box img { width: 152px; max-height: 180px; }
.receipt-qr-box span {
  display: block;
  margin-top: 4px;
  color: #66768a;
  font-size: 8px;
  line-height: 1.35;
}
.receipt-paid-stamp {
  padding: 17px 8px;
  border: 1px solid #bde2cf;
  border-radius: 10px;
  color: #287c56;
  background: #eff9f4;
  font-size: 10px;
  font-weight: 850;
}
.receipt-settings-missing, .receipt-qr-missing {
  color: #8d6c22;
  font-size: 9px;
  line-height: 1.5;
}
.receipt-footer {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid #e5eaf0;
  color: #8c97a4;
  text-align: center;
  font-size: 8px;
}

@media (max-width:1220px) {
  .finance-v12-commandbar { align-items: stretch; flex-direction: column; }
  .finance-v12-left { width: 100%; }
  .finance-v12-actions { align-self: flex-end; }
  .finance-summary-grid { grid-template-columns: 1fr; }
}

@media (max-width:960px) {
  .finance-v12-left { align-items: stretch; flex-direction: column; }
  .finance-filter-bar { width: 100%; }
  .finance-invoice-v12-grid, .finance-payments-grid { grid-template-columns: 1fr; }
}

@media (max-width:780px) {
  .finance-mode .app-page-header {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "finance-title finance-actions" "finance-stats finance-stats";
    min-height: 86px;
    padding: 7px 9px 6px;
    row-gap: 5px;
  }
  .finance-mode .app-page-header .topbar-left { display: contents; }
  .finance-mode .app-page-title {
    grid-area: finance-title;
    align-self: center;
    font-size: 12.5px !important;
  }
  .finance-mode .page-quick-stats {
    grid-area: finance-stats;
    width: 100%;
    gap: 4px;
    overflow: hidden;
  }
  .finance-mode .finance-header-stat {
    min-width: 0;
    flex: 1 1 0;
    min-height: 30px;
    justify-content: center;
    padding: 0 5px;
  }
  .finance-mode .finance-header-stat strong { font-size: 10.5px; }
  .finance-mode .finance-header-stat em { font-size: 7.5px; }
  .finance-mode .app-page-header .topbar-actions { grid-area: finance-actions; }
  .finance-mode .content-area { padding: 8px 8px 18px; }
  .finance-v12-commandbar {
    padding: 6px;
    gap: 7px;
    border-radius: 12px;
  }
  .finance-v12-tabs { width: 100%; }
  .finance-v12-tabs .finance-tab-btn {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    font-size: 9px;
  }
  .finance-filter-bar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 6px;
  }
  .finance-search-control { max-width: none; min-width: 0; }
  .finance-filter-control { min-width: 0; width: 100%; }
  .finance-month-control { grid-column: 1; }
  #financeCustomerFilter { font-size: 9px; }
  #financeStatusFilterWrap { grid-column: 1; }
  .finance-reset-btn {
    grid-column: 2;
    grid-row: 2 / span 2;
    height: auto;
    min-height: 40px;
    border: 1px solid #e0e6ed;
    background: #fff;
  }
  .finance-v12-actions { width: 100%; align-self: stretch; }
  .finance-v12-actions .btn {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    font-size: 9px;
  }
  .finance-v12-actions .btn svg { width: 13px; height: 13px; }
  .finance-summary-strip {
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 1px;
  }
  .finance-summary-strip span { flex: 0 0 auto; font-size: 8px; }
  .finance-summary-strip strong { font-size: 9.5px; }
  .finance-table-card { padding: 10px; }
  .finance-table-head-v12 h3 { font-size: 12px; }
  .finance-view-switch .finance-view-btn { font-size: 8px; padding: 0 7px; }
  .invoice-customer-card-v12 { align-items: stretch; flex-direction: column; }
  .invoice-customer-card-v12 .btn { width: 100%; }
  .invoice-card-v12 .invoice-money-grid { grid-template-columns: repeat(3,1fr); }
  .invoice-card-actions-v12 { flex-wrap: wrap; }
  .invoice-more-menu { margin-left: 0; }
  .payment-history-row {
    grid-template-columns: 78px minmax(0,1fr) auto;
    gap: 7px;
    padding: 7px;
  }
  .receipt-modal-backdrop { padding: 0; }
  .receipt-modal-card {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }
  .receipt-modal-toolbar { min-height: 56px; padding: 7px; }
  .receipt-modal-toolbar .btn {
    min-height: 37px;
    height: 37px;
    padding: 0 9px;
    font-size: 9px;
  }
  .payment-receipt-paper { padding: 8px; }
  .payment-receipt {
    width: 100%;
    min-height: auto;
    padding: 26px 20px;
  }
}

@media (max-width:520px) {
  .finance-mode .app-page-header .date-chip { display: none; }
  .finance-mode .finance-header-stat em { display: none; }
  .finance-mode .finance-header-stat strong { font-size: 10px; }
  .finance-v12-actions .finance-settings-btn span { display: none; }
  .finance-v12-actions .finance-settings-btn { flex: 0 0 42px; }
  .receipt-modal-actions { gap: 4px; }
  .receipt-modal-actions .btn { padding: 0 7px; }
  .receipt-payment-section { grid-template-columns: 1fr; }
  .receipt-qr-box { padding-top: 4px; }
}

.payment-bank-hint {
  display: block;
  margin-top: 6px;
  color: #8390a0;
  font-size: 10px;
  line-height: 1.4;
}
#paymentBankSelect {
  min-height: 42px;
  font-size: 12.5px;
  font-weight: 720;
}

/* Finance typography: easier to read without making the page bulky */

.finance-v12-tabs .finance-tab-btn { font-size: 12.5px; }
.finance-search-control input, .finance-filter-control input, .finance-filter-control select { font-size: 12.2px; }
.finance-reset-btn { font-size: 11px; }
.finance-v12-actions .btn { font-size: 12.2px; }
.finance-summary-strip { font-size: 11.2px; }
.finance-summary-strip strong { font-size: 13px; }
.finance-table-head-v12 h3 { font-size: 16.5px; }
.finance-table-head-v12 .panel-kicker { font-size: 9px; }
.finance-view-btn { font-size: 10.8px; }
.finance-total-inline span { font-size: 11px; }
.finance-total-inline strong { font-size: 18px; }
.finance-debt-row div strong { font-size: 12.5px; }
.finance-debt-row div span { font-size: 9.8px; }
.finance-debt-row > strong { font-size: 12.8px; }
.invoice-customer-card-v12 .invoice-card-main strong { font-size: 13px; }
.invoice-customer-card-v12 .invoice-card-main span { font-size: 10.2px; }
.invoice-customer-card-v12 .invoice-card-main small { font-size: 9.5px; }

/* Invoice card: status is now the whole title bar, not a floating badge */

.invoice-card-v12 {
  padding: 0;
  overflow: visible;
  border: 1px solid #e3e8ee;
  background: #fff;
  box-shadow: 0 5px 16px rgba(30,41,59,.035);
}
.invoice-card-v12 .invoice-status-titlebar {
  min-height: 58px;
  margin: 0;
  padding: 10px 13px;
  align-items: center;
  border-bottom: 1px solid transparent;
}
.invoice-card-v12.pending .invoice-status-titlebar { background: #edf4fb; border-bottom-color: #d8e7f5; }
.invoice-card-v12.partial .invoice-status-titlebar { background: #fff4d9; border-bottom-color: #eedda8; }
.invoice-card-v12.paid .invoice-status-titlebar { background: #edf8f2; border-bottom-color: #d3eadf; }
.invoice-card-v12 .invoice-card-head > div { min-width: 0; }
.invoice-card-v12 .invoice-no {
  color: #708095;
  font-size: 9.6px;
  font-weight: 830;
  letter-spacing: .055em;
}
.invoice-card-v12 .invoice-card-head strong {
  margin-top: 4px;
  color: #243246;
  font-size: 14px;
  line-height: 1.25;
}
.invoice-card-v12 .invoice-status-badge {
  min-width: 108px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent !important;
  font-size: 10.8px;
  font-weight: 850;
  white-space: nowrap;
}
.invoice-card-v12 .invoice-status-badge.pending { color: #527dae; }
.invoice-card-v12 .invoice-status-badge.partial { color: #916b19; }
.invoice-card-v12 .invoice-status-badge.paid { color: #287c56; }
.invoice-card-v12 .invoice-card-body { padding: 11px 13px 12px; }
.invoice-card-v12 .invoice-card-meta {
  margin-top: 0;
  gap: 10px;
  color: #718095;
  font-size: 10.2px;
}
.invoice-card-v12 .invoice-money-grid { gap: 7px; margin-top: 10px; }
.invoice-card-v12 .invoice-money-grid > div {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid #edf0f3;
  border-radius: 9px;
  background: #fafbfd;
}
.invoice-card-v12 .invoice-money-grid span { font-size: 9.5px; }
.invoice-card-v12 .invoice-money-grid strong { margin-top: 5px; font-size: 12.3px; }
.invoice-card-actions-v12 { margin-top: 10px; }
.invoice-card-actions-v12 .btn {
  min-height: 36px;
  height: 36px;
  padding: 0 11px;
  font-size: 10.8px;
}
.invoice-complete-label {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 8px;
  color: #287c56;
  background: #edf8f2;
  font-size: 10.8px;
  font-weight: 840;
}
.invoice-more-menu summary {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.invoice-more-menu > div {
  top: 41px;
  transform-origin: top right;
  animation: seaMenuIn .15s cubic-bezier(.2,.8,.2,1);
}
.invoice-more-menu button { font-size: 10.5px; }

/* QR error state is explicit instead of showing a broken-image icon */

.receipt-qr-error {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px dashed #dfc985;
  border-radius: 10px;
  color: #87671e;
  background: #fffaf0;
  text-align: center;
}
.receipt-qr-error strong { font-size: 10.5px; }
.receipt-qr-error span {
  margin: 0;
  font-size: 8.5px;
  line-height: 1.45;
}
.receipt-qr-error.hidden { display: none !important; }

/* Soft, consistent movement throughout the web */

html { scroll-behavior: smooth; }
.btn, .icon-btn, .nav-item, .page-stat-pill, .room-card, .customer-card, .booking-card, .dashboard-room-card, .room-library-card, .finance-table-card, .invoice-card-v12, .finance-search-control, .finance-filter-control, .finance-tab-btn, .finance-view-btn, .invoice-more-menu summary {
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s cubic-bezier(.2,.8,.2,1),
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    opacity .18s ease;
}
.btn:hover, .icon-btn:hover, .invoice-more-menu summary:hover { transform: translateY(-1px); }
.finance-table-card:hover, .invoice-card-v12:hover, .room-library-card:hover { box-shadow: 0 9px 24px rgba(30,41,59,.065); }
.page:not(.hidden) { animation: seaPageIn .2s cubic-bezier(.2,.8,.2,1); }
.modal-backdrop:not(.hidden) { animation: seaFadeIn .17s ease both; }
.modal-backdrop:not(.hidden) .modal-card { animation: seaModalIn .2s cubic-bezier(.2,.8,.2,1) both; }

@keyframes seaPageIn {
  from { opacity: .55; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes seaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes seaModalIn {
  from { opacity: .75; transform: translateY(6px) scale(.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes seaMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width:780px) {
  .finance-v12-tabs .finance-tab-btn { font-size: 10.5px; }
  .finance-search-control input, .finance-filter-control input, .finance-filter-control select { font-size: 10.8px; }
  .finance-v12-actions .btn { font-size: 10.5px; }
  .finance-summary-strip { font-size: 9.3px; }
  .finance-summary-strip strong { font-size: 10.8px; }
  .finance-table-head-v12 h3 { font-size: 13.5px; }
  .invoice-card-v12 .invoice-status-titlebar { min-height: 54px; padding: 9px 10px; }
  .invoice-card-v12 .invoice-card-head strong { font-size: 12.5px; }
  .invoice-card-v12 .invoice-status-badge { min-width: 96px; font-size: 9.5px; }
  .invoice-card-v12 .invoice-card-body { padding: 10px; }
  .invoice-card-v12 .invoice-card-meta { font-size: 9.3px; }
  .invoice-card-v12 .invoice-money-grid span { font-size: 8.5px; }
  .invoice-card-v12 .invoice-money-grid strong { font-size: 11px; }
  .invoice-card-actions-v12 .btn, .invoice-complete-label { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.finance-header-stat strong { font-size: 13px; }
.finance-header-stat em { font-size: 10px; }
.forecast-group summary > div strong { font-size: 12.5px; }
.forecast-group summary > div span { font-size: 10px; }
.forecast-group summary > strong { font-size: 13px; }
.forecast-detail-row { font-size: 10.5px; }
.forecast-detail-row strong { font-size: 10.5px; }
.finance-count-badge, .finance-inline-counts span { font-size: 10px; }
.finance-count-badge strong, .finance-inline-counts strong { font-size: 11.5px; }
.finance-revenue-inline { font-size: 15px; }
.payment-history-row { font-size: 10.5px; }

@media (max-width:780px) {
  .finance-mode .finance-header-stat strong { font-size: 11px; }
  .finance-mode .finance-header-stat em { font-size: 8.2px; }
}

:root {
  --v13-blue: #5b88c4;
  --v13-blue-dark: #436fa9;
  --v13-blue-soft: #eaf1f9;
  --v13-green: #238a59;
  --v13-green-soft: #e6f4ed;
  --v13-gray: #8798a8;
  --v13-warning: #c78f28;
  --v13-warning-soft: #fff4d8;
  --v13-danger: #c84b4b;
  --v13-text: #1f2937;
  --v13-muted: #667085;
  --v13-line: #d8e0e8;
  --v13-page: #f3f6f9;
  --v13-card: #ffffff;
}
body { color: var(--v13-text); background: var(--v13-page); }
.page-title, #pageTitle {
  color: #172033;
  font-weight: 780;
  letter-spacing: .012em;
}
.page-header, .topbar { border-color: #d5dde6; }
.panel-kicker {
  color: #58687b;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .075em;
}
.btn { font-size: 13.8px; letter-spacing: .005em; }
.btn-primary { background: var(--v13-blue); box-shadow: 0 3px 8px rgba(67,111,169,.18); }
.btn-primary:hover { background: var(--v13-blue-dark); box-shadow: 0 6px 14px rgba(67,111,169,.22); }
.btn-secondary { color: #344054; border: 1px solid #ccd6e0; }
.btn-secondary:hover { border-color: #aebdcb; background: #f8fafc; }
.action-btn {
  min-height: 34px;
  padding: 0 11px;
  font-size: 12.5px;
}
.icon-btn { color: #44546a; }
input, select, textarea {
  color: #1f2937;
  border-color: #cfd8e3 !important;
  background: #fff;
  font-size: 13.5px;
  font-weight: 520;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--v13-blue) !important;
  box-shadow: 0 0 0 3px rgba(91,136,196,.13) !important;
}
.form-field label { color: #344054; font-size: 12.4px; }
.field-help, .form-field small { color: #667085; font-size: 11.5px; }
.room-library-card, .customer-card, .booking-card, .finance-table-card, .invoice-card-v12, .dashboard-room-card, .booking-group-card, .booking-series-row, .booking-single-row {
  border-color: var(--v13-line) !important;
  box-shadow: 0 2px 8px rgba(31,41,55,.045);
  background: #fff;
}
.finance-table-card:hover, .invoice-card-v12:hover, .room-library-card:hover, .booking-group-card:hover {
  box-shadow: 0 8px 20px rgba(31,41,55,.085);
}
.nav-item.active { color: #fff; }

/* Booking readability */

.booking-operation-badge { font-size: 11.2px; }
.booking-operation-badge.upcoming { color: #436fa9; background: #eaf1f9; }
.booking-operation-badge.ongoing { color: #1f744b; background: #e4f3eb; }
.booking-operation-badge.completed { color: #5f6f7f; background: #edf1f4; }
.booking-operation-badge.cancelled { color: #9d4040; background: #faecec; }
.booking-time, .booking-main strong, .booking-series-main > strong { font-size: 14px; }
.booking-main span, .booking-note-line, .booking-series-main p, .booking-series-main small { font-size: 12px; color: #5d6b7c; }

/* Booking detail — obvious edit path */

.booking-detail-modal-card { width: min(560px, calc(100vw - 28px)); }
.booking-detail-content { display: grid; gap: 14px; }
.booking-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid var(--v13-line);
  border-radius: 12px;
  background: #f8fafc;
}
.booking-detail-hero h4 {
  margin: 7px 0 0;
  font-size: 20px;
  color: #172033;
}
.booking-detail-hero > strong { font-size: 16px; color: #344054; }
.booking-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.booking-detail-grid > div {
  padding: 12px 13px;
  border: 1px solid #dde4eb;
  border-radius: 10px;
  background: #fff;
}
.booking-detail-grid > div.wide { grid-column: 1/-1; }
.booking-detail-grid span {
  display: block;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}
.booking-detail-grid strong {
  display: block;
  margin-top: 5px;
  color: #1f2937;
  font-size: 13.5px;
  line-height: 1.45;
}
.booking-detail-grid small {
  display: block;
  margin-top: 6px;
  color: #667085;
  font-size: 11.5px;
  line-height: 1.45;
}
.booking-detail-invoice { border-left: 4px solid var(--v13-blue) !important; background: #f6f9fd !important; }
.booking-detail-actions { padding-top: 4px; }

/* Fixed edit scope */

.booking-edit-scope { border-color: #c8d6e5; background: #f2f6fb; }
.booking-edit-scope strong { font-size: 13px; color: #23344b; }
.booking-edit-scope span { font-size: 11.5px; color: #607085; }

/* Invoice mode selector */

.invoice-billing-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.invoice-billing-mode-btn {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #cfd9e4;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  text-align: left;
  transition: all .16s ease;
}
.invoice-billing-mode-btn strong { font-size: 14px; font-weight: 800; }
.invoice-billing-mode-btn span {
  margin-top: 3px;
  font-size: 11px;
  color: #667085;
}
.invoice-billing-mode-btn.active {
  border-color: var(--v13-blue);
  background: var(--v13-blue-soft);
  box-shadow: inset 0 0 0 1px var(--v13-blue);
}
.invoice-billing-mode-btn.active strong { color: #315f97; }
.invoice-mode-help {
  margin: -2px 0 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--v13-blue);
  color: #526173;
  background: #f7f9fc;
  font-size: 11.5px;
  line-height: 1.45;
}
.invoice-no-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.invoice-billing-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 8.8px;
  font-weight: 850;
  letter-spacing: .05em;
}
.invoice-billing-badge.prepaid { color: #315f97; background: #dfeaf7; }
.invoice-billing-badge.postpaid { color: #566574; background: #e8edf2; }
.invoice-menu-divider {
  height: 1px;
  margin: 5px 0;
  background: #e3e8ee;
}
.invoice-more-menu button.danger { color: #a53737; }

/* Finance stronger */

.finance-v12-tabs .finance-tab-btn { font-size: 13.2px; font-weight: 750; }
.finance-search-control input, .finance-filter-control input, .finance-filter-control select { font-size: 13px; font-weight: 600; }
.finance-reset-btn { font-size: 12px; font-weight: 700; }
.finance-summary-strip { color: #526173; font-weight: 600; }
.finance-summary-strip strong { color: #1f2937; font-size: 14px; }
.finance-table-head-v12 h3 {
  color: #172033;
  font-size: 17px;
  font-weight: 780;
}
.finance-total-inline span { font-size: 12px; font-weight: 650; }
.finance-total-inline strong { font-size: 20px; color: #172033; }
.invoice-card-v12 { border-color: #d7e0e8 !important; }
.invoice-card-v12 .invoice-status-titlebar { min-height: 64px; }
.invoice-card-v12.pending .invoice-status-titlebar { background: #dfeaf7; border-bottom-color: #bfd2e6; }
.invoice-card-v12.partial .invoice-status-titlebar { background: #faecc7; border-bottom-color: #e5cc8d; }
.invoice-card-v12.paid .invoice-status-titlebar { background: #dcefe5; border-bottom-color: #b9dbc9; }
.invoice-card-v12 .invoice-no { color: #526173; font-size: 10.2px; }
.invoice-card-v12 .invoice-card-head strong {
  color: #172033;
  font-size: 15px;
  font-weight: 780;
}
.invoice-card-v12 .invoice-status-badge {
  min-width: 116px;
  min-height: 32px;
  font-size: 11.5px;
}
.invoice-card-v12 .invoice-status-badge.pending { color: #315f97; }
.invoice-card-v12 .invoice-status-badge.partial { color: #805e12; }
.invoice-card-v12 .invoice-status-badge.paid { color: #1d7048; }
.invoice-card-v12 .invoice-card-meta { color: #5d6b7c; font-size: 11.5px; }
.invoice-card-v12 .invoice-money-grid > div {
  min-height: 58px;
  border-color: #dfe5eb;
  background: #f9fbfc;
}
.invoice-card-v12 .invoice-money-grid span { color: #637083; }
.invoice-card-v12 .invoice-money-grid strong { font-size: 13.5px; }
.invoice-card-actions-v12 .btn, .invoice-complete-label {
  min-height: 38px;
  height: 38px;
  font-size: 12px;
}
.invoice-more-menu summary { width: 38px; height: 38px; }
.invoice-more-menu button { font-size: 11.8px; }

/* QR: large, crisp, clear states */

.receipt-payment-section {
  grid-template-columns: minmax(0,1fr) 230px !important;
  gap: 24px !important;
  align-items: center !important;
}
.receipt-qr-box { min-height: 230px; display: flex; }
.receipt-qr-box img {
  width: 210px !important;
  height: 210px !important;
  max-height: none !important;
  image-rendering: auto;
  background: #fff;
}
.receipt-qr-caption {
  margin-top: 8px !important;
  color: #344054 !important;
  font-size: 10.5px !important;
  font-weight: 700;
}
.receipt-qr-loading {
  color: #5f6f7f;
  font-size: 11px;
  font-weight: 700;
}
.receipt-qr-error {
  min-height: 150px;
  border-color: #d4a641;
  background: #fff8e8;
}
.receipt-qr-error strong { font-size: 12.5px; color: #805e12; }
.receipt-qr-error span { font-size: 10.5px; color: #715f39; }
.receipt-qr-retry {
  margin-top: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  color: #315f97;
  border: 1px solid #9fb9d5;
  font-size: 11px;
  font-weight: 750;
}
.receipt-bank-line { font-size: 11px !important; }
.receipt-bank-info h3 { font-size: 16px !important; }
.receipt-transfer-note strong { font-size: 10.5px !important; }

/* Motion: smooth but crisp — no blur */

.btn, .icon-btn, .nav-item, .room-library-card, .customer-card, .booking-card, .dashboard-room-card, .finance-table-card, .invoice-card-v12, .booking-group-card, input, select, textarea {
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}
.btn:active, .action-btn:active { transform: translateY(0) scale(.985); }

@media (max-width:780px) {
  .btn { font-size: 12.6px; }
  .action-btn { font-size: 11.6px; }
  .panel-kicker { font-size: 9.8px; }
  .booking-detail-grid { grid-template-columns: 1fr; }
  .booking-detail-grid > div.wide { grid-column: auto; }
  .booking-detail-hero h4 { font-size: 17px; }
  .invoice-billing-mode { gap: 7px; }
  .invoice-billing-mode-btn { min-height: 58px; padding: 8px 10px; }
  .invoice-billing-mode-btn strong { font-size: 12.5px; }
  .invoice-billing-mode-btn span { font-size: 9.8px; }
  .finance-v12-tabs .finance-tab-btn { font-size: 11.5px; }
  .finance-search-control input, .finance-filter-control input, .finance-filter-control select { font-size: 12px; }
  .finance-summary-strip strong { font-size: 12px; }
  .finance-table-head-v12 h3 { font-size: 15px; }
  .invoice-card-v12 .invoice-card-head strong { font-size: 13.5px; }
  .invoice-card-v12 .invoice-status-badge { min-width: 102px; }
  .invoice-card-v12 .invoice-card-meta { font-size: 10.4px; }
  .invoice-card-v12 .invoice-money-grid span { font-size: 9.6px; }
  .receipt-qr-box img { width: 190px !important; height: 190px !important; }
}

.app-page-title, #pageTitle {
  font-size: 18px !important;
  line-height: 1.15;
  font-weight: 800;
}
.page-quick-stats, .page-stat-pill { font-size: 12.5px; font-weight: 700; }
.page-stat-pill strong { font-size: 13.5px; }

@media (max-width:780px) {
  .app-page-title, #pageTitle { max-width: none !important; font-size: 14.5px !important; }
  .page-quick-stats, .page-stat-pill { font-size: 10.5px; }
  .page-stat-pill strong { font-size: 11.5px; }
}

:root {
  --v14-navy: #172235;
  --v14-navy-2: #22344b;
  --v14-blue: #3f6fa8;
  --v14-blue-dark: #315a88;
  --v14-blue-soft: #e6eef8;
  --v14-green: #1f7a4f;
  --v14-green-soft: #dcefe5;
  --v14-gray: #64748b;
  --v14-warning: #a96b14;
  --v14-warning-soft: #f7e7bf;
  --v14-danger: #b42318;
  --v14-danger-soft: #fbe6e4;
  --v14-text: #172033;
  --v14-muted: #526173;
  --v14-line: #cbd5df;
  --v14-page: #edf1f5;
  --v14-card: #ffffff;
  --action-primary: var(--v14-blue);
  --action-primary-dark: var(--v14-blue-dark);
  --action-primary-soft: var(--v14-blue-soft);
  --status-upcoming: var(--v14-blue);
  --status-ongoing: var(--v14-green);
  --status-completed: #7b8794;
  --status-warning: var(--v14-warning);
  --status-warning-soft: #fff3d8;
  --ink-900: var(--v14-text);
  --ink-800: #27364a;
  --ink-700: #3e4e63;
  --ink-600: var(--v14-muted);
  --ink-500: #6b7888;
  --line: var(--v14-line);
  --surface-soft: var(--v14-page);
  --shadow-sm: 0 2px 7px rgba(15,23,42,.07);
  --shadow-md: 0 8px 20px rgba(15,23,42,.11);
  --shadow-lg: 0 18px 44px rgba(15,23,42,.16);
}
body {
  color: var(--v14-text);
  background: var(--v14-page);
  font-family: "Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
strong, b, h1, h2, h3, h4 { color: var(--v14-text); }
.muted, .field-help, .form-field small { color: var(--v14-muted); }

/* Navigation: high contrast, clear current location */

.sidebar {
  background: linear-gradient(180deg,var(--v14-navy) 0%,#1b2a3e 100%);
  border-right: 1px solid #26384d;
  box-shadow: 6px 0 22px rgba(15,23,42,.08);
}
.brand-box-simple {
  margin: 0 0 15px;
  padding: 9px 10px;
  min-height: 62px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0,0,0,.13);
}
.brand-logo-main { width: 112px; height: 44px; }
.nav-label { color: #8293aa; font-size: 10.5px; }
.nav-item {
  color: #d9e2ec;
  font-size: 14.5px;
  border-radius: 10px;
}
.nav-item svg { color: #aebed0; stroke-width: 2; }
.nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.08);
}
.nav-item:hover svg { color: #fff; }
.nav-item.active {
  color: #fff !important;
  background: linear-gradient(90deg,#315b8c 0%,#3f6fa8 100%) !important;
  border-color: #557eaa;
  box-shadow: inset 4px 0 0 #9fc0e5,0 5px 13px rgba(0,0,0,.14) !important;
  font-weight: 760;
}
.nav-item.active svg { color: #fff; }
.nav-badge {
  color: #eaf2fb;
  background: #31445c;
  border: 1px solid #465a73;
}
.nav-item.active .nav-badge {
  color: #24466d;
  background: #fff;
  border-color: #fff;
}
.sidebar-footer { border-top-color: #304259; }
.logout-btn { color: #d8e2ed; }
.logout-btn:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Header + page hierarchy */

.app-page-header, .topbar, .dashboard-mode .app-page-header {
  min-height: 70px;
  border-bottom: 1px solid #cbd5df;
  box-shadow: 0 2px 8px rgba(15,23,42,.045);
}
.app-page-title, .page-title, #pageTitle {
  color: #111b2c !important;
  font-size: 21px !important;
  letter-spacing: .035em !important;
}
.panel-kicker, .eyebrow {
  color: #43546a;
  font-size: 11px;
  letter-spacing: .085em;
}
.date-chip, .user-chip, .app-page-header .date-chip, .app-page-header .user-chip {
  color: #334155;
  background: #f4f7fa;
  border: 1px solid #d4dce5;
}
.app-page-header .date-chip { font-size: 12px; font-weight: 600; }
.app-page-header .user-chip strong {
  color: #1e293b;
  font-size: 12.5px;
  font-weight: 750;
}
.app-page-header .user-chip span { color: #64748b; font-size: 10.5px; }
.content-area { background: var(--v14-page); }

/* Typography + controls */

.btn {
  padding: 0 16px;
  font-size: 14px;
  letter-spacing: 0;
}
.btn-primary {
  background: var(--v14-blue);
  border: 1px solid var(--v14-blue);
  box-shadow: 0 3px 8px rgba(49,90,136,.20);
}
.btn-primary:hover {
  background: var(--v14-blue-dark);
  border-color: var(--v14-blue-dark);
  box-shadow: 0 6px 14px rgba(49,90,136,.24);
}
.btn-secondary { color: #27364a; border: 1px solid #bdc8d4; }
.btn-secondary:hover { background: #f3f6f9; border-color: #9eacbb; }
.btn-danger-v14 {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #9f1e16;
  border-radius: 9px;
  color: #fff;
  background: var(--v14-danger);
  font-size: 14px;
  font-weight: 750;
}
.btn-danger-v14:hover { background: #8f1b14; }
.action-btn {
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
}
.action-btn:not(.danger) {
  color: #315a88;
  background: #e7eef7;
  border: 1px solid #cbd9e8;
}
.action-btn:not(.danger):hover { background: #dce8f5; }
.icon-btn { color: #344054; border: 1px solid transparent; }
.icon-btn:hover { background: #edf2f6; border-color: #d5dee7; }
input, select, textarea, .finance-search-control, .finance-filter-control, .booking-list-status-field {
  color: #182230;
  border-color: #bdc8d4 !important;
}
input, select, textarea { font-size: 14px; font-weight: 500; }
input::placeholder, textarea::placeholder { color: #8491a1; opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--v14-blue) !important;
  box-shadow: 0 0 0 3px rgba(63,111,168,.14) !important;
}
.form-field label, .auth-form label {
  color: #26364a;
  font-size: 12.8px;
  font-weight: 700;
}

/* Cards: clear separation from page background */

.room-library-card, .customer-card, .booking-card, .finance-table-card, .invoice-card-v12, .dashboard-room-card, .booking-group-card, .booking-series-row, .booking-single-row, .dashboard-room-board, .rooms-overview-strip, .finance-v12-commandbar {
  background: #fff;
  border-color: var(--v14-line) !important;
  box-shadow: var(--shadow-sm);
}
.finance-table-card, .room-library-card, .customer-card, .invoice-card-v12, .booking-group-card { border-radius: 12px; }
.finance-table-card:hover, .invoice-card-v12:hover, .room-library-card:hover, .customer-card:hover, .booking-group-card:hover {
  border-color: #b9c5d1 !important;
}

/* Compact status pills, stronger text */

.page-stat-pill {
  color: #344054;
  background: #f2f5f8;
  border: 1px solid #d0d8e2;
  border-radius: 8px;
}
.page-stat-pill strong {
  color: #172033;
  font-size: 14px;
  font-weight: 800;
}
.page-stat-pill em {
  color: #526173;
  font-size: 10.5px;
  font-weight: 650;
}
.page-stat-pill.occupied strong { color: var(--v14-green); }
.page-stat-pill.available strong { color: var(--v14-blue-dark); }
.page-stat-pill.ending strong { color: #8c5b12; }

/* Segmented controls + filters */

.booking-view-switch, .booking-list-mode-switch, .finance-tab-switch, .finance-view-switch {
  background: #e3e9ef;
  border: 1px solid #c5cfda;
  border-radius: 9px;
}
.booking-view-btn, .booking-list-mode-btn, .finance-tab-btn, .finance-view-btn {
  color: #46576c;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 7px;
}
.booking-view-btn.active, .booking-list-mode-btn.active, .finance-tab-btn.active, .finance-view-btn.active {
  background: var(--v14-blue) !important;
  border-color: var(--v14-blue) !important;
  box-shadow: 0 3px 7px rgba(49,90,136,.18) !important;
}
.finance-filter-chip {
  color: #30465f;
  background: #e6edf5;
  border: 1px solid #c7d4e2;
  font-weight: 650;
}

/* Booking — keep layout, improve legibility */

.booking-status-legend span {
  color: #46576c;
  border: 1px solid #d0d8e2;
  font-size: 11.2px;
  font-weight: 700;
}
.booking-status-legend .upcoming i { background: var(--v14-blue); }
.booking-status-legend .ongoing i { background: var(--v14-green); }
.booking-status-legend .completed i { background: #7b8794; }
.booking-timeline-block.upcoming {
  background: #e8f0f9;
  color: #315a88;
  border-color: #bcd0e5;
}
.booking-timeline-block.ongoing {
  background: #e2f1e9;
  color: #176640;
  border-color: #b8d9c7;
}
.booking-timeline-block.completed {
  background: #e9edf1;
  color: #526173;
  border-color: #ccd4dc;
}
.week-booking-chip.upcoming {
  background: #e8f0f9;
  color: #315a88;
  border-color: #bcd0e5;
}
.week-booking-chip.ongoing {
  background: #e2f1e9;
  color: #176640;
  border-color: #b8d9c7;
}
.week-booking-chip.completed {
  background: #e9edf1;
  color: #526173;
  border-color: #ccd4dc;
}
.booking-operation-badge { font-size: 11.5px; font-weight: 800; }

/* Dashboard — remove tiny-looking labels */

.dashboard-mode .dashboard-room-board-head > .panel-kicker { color: #34465b; font-size: 10.2px; }
.dashboard-mode .legend-chip {
  color: #435267;
  background: #f2f5f8;
  border-color: #d1d9e2;
  font-size: 9.2px;
}
.dashboard-mode .dashboard-floor-section { background: #f5f7fa; border-color: #d5dde6; }
.dashboard-mode .dashboard-floor-head { background: #eaf0f6; border-right-color: #ccd6e0; }
.dashboard-mode .dashboard-floor-head strong {
  color: #2e4056;
  font-size: 12px;
  font-weight: 800;
}
.dashboard-mode .dashboard-floor-head span { color: #68788a; font-size: 9.2px; }
.dashboard-mode .dashboard-room-card { border-width: 1px; box-shadow: 0 2px 6px rgba(15,23,42,.06); }
.dashboard-mode .dashboard-room-card h4 {
  color: #172033;
  font-size: 14px;
  font-weight: 800;
}
.dashboard-mode .dashboard-room-state { font-size: 8.8px; font-weight: 850; }
.dashboard-mode .dashboard-room-current-line strong {
  color: #27364a;
  font-size: 11.5px;
  font-weight: 750;
}
.dashboard-mode .dashboard-room-current-line span {
  color: #56667a;
  font-size: 9.8px;
  font-weight: 600;
}
.dashboard-mode .dashboard-countdown-label { font-size: 9px; font-weight: 850; }
.dashboard-mode .dashboard-countdown { font-size: 11px !important; }
.dashboard-mode .dashboard-next-inline, .dashboard-mode .dashboard-next-inline strong { font-size: 9px; }

/* Rooms / Customers */

.room-library-card h3, .room-library-card h4, .customer-card h3, .customer-card h4 { color: #172033; font-weight: 800; }
.equipment-chip {
  color: #31445a;
  background: #eef2f6;
  border-color: #d3dbe4;
  font-weight: 650;
}
.room-status.active { color: #176640; background: #e2f1e9; }
.room-status.inactive { color: #526173; background: #e9edf1; }

/* Finance — stronger, business-like */

.finance-v12-commandbar { border-radius: 11px; background: #fff; }
.finance-summary-strip {
  color: #435267;
  font-size: 12px;
  font-weight: 650;
  background: #fff;
  border-color: #cbd5df;
}
.finance-summary-strip strong {
  color: #172033;
  font-size: 14.5px;
  font-weight: 800;
}
.finance-table-head h3, .finance-table-head-v12 h3 {
  color: #172033;
  font-size: 17px;
  font-weight: 800;
}
.finance-count-badge, .finance-inline-counts span {
  color: #44556a;
  font-size: 11px;
  font-weight: 650;
}
.finance-count-badge strong, .finance-inline-counts strong { color: #172033; font-size: 12px; }
.finance-revenue-inline {
  color: var(--v14-green);
  font-size: 16px;
  font-weight: 800;
}
.finance-debt-row { border-color: #d6dee7; }
.invoice-card-v12 { border: 1px solid #c8d2dd !important; overflow: hidden; }
.invoice-card-v12 .invoice-status-titlebar {
  min-height: 66px;
  padding: 12px 14px;
  border-bottom: 1px solid;
}
.invoice-card-v12.pending .invoice-status-titlebar { background: #d7e5f5; border-bottom-color: #aec6e0; }
.invoice-card-v12.partial .invoice-status-titlebar { background: #f3dfad; border-bottom-color: #d9b96e; }
.invoice-card-v12.paid .invoice-status-titlebar { background: #d1e8dc; border-bottom-color: #a5ceb8; }
.invoice-card-v12 .invoice-no {
  color: #41536a;
  font-size: 10.5px;
  font-weight: 750;
}
.invoice-card-v12 .invoice-card-head strong {
  color: #142033;
  font-size: 15.5px;
  font-weight: 800;
}
.invoice-card-v12 .invoice-status-badge {
  min-width: 122px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(20,32,51,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.58);
  font-size: 11.8px;
  font-weight: 800;
  text-align: center;
}
.invoice-card-v12 .invoice-status-badge.pending { color: #284f7d; }
.invoice-card-v12 .invoice-status-badge.partial { color: #76500d; }
.invoice-card-v12 .invoice-status-badge.paid { color: #17623f; }
.invoice-card-v12 .invoice-card-body { padding: 12px 14px 13px; }
.invoice-card-v12 .invoice-card-meta {
  color: #536277;
  font-size: 11.8px;
  font-weight: 600;
}
.invoice-card-v12 .invoice-money-grid > div {
  background: #f4f7f9;
  border: 1px solid #d9e0e7;
  border-radius: 8px;
}
.invoice-card-v12 .invoice-money-grid span {
  color: #5a687b;
  font-size: 10.8px;
  font-weight: 650;
}
.invoice-card-v12 .invoice-money-grid strong {
  color: #172033;
  font-size: 13.8px;
  font-weight: 800;
}
.invoice-card-v12 .money-paid { color: var(--v14-green) !important; }
.invoice-card-v12 .money-remaining { color: #8c5b12 !important; }
.invoice-complete-label {
  color: var(--v14-green);
  font-size: 12px;
  font-weight: 800;
}
.invoice-more-menu > summary {
  color: #34465b;
  background: #edf2f6;
  border-color: #c9d3dd;
}
.invoice-more-menu > div { border-color: #c6d0dc; box-shadow: 0 12px 30px rgba(15,23,42,.18); }
.invoice-more-menu button {
  color: #2e3f54;
  font-size: 12.5px;
  font-weight: 650;
}
.invoice-more-menu button:hover { background: #edf2f6; }
.invoice-more-menu button.danger { color: #a5261e; }

/* Safe invoice deletion */

.delete-invoice-modal-card { width: min(610px,calc(100vw - 28px)); }
.danger-kicker { color: var(--v14-danger) !important; }
.delete-invoice-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.delete-invoice-summary > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #d4dce5;
  border-radius: 9px;
  background: #f5f7fa;
}
.delete-invoice-summary span, .delete-invoice-summary strong { display: block; }
.delete-invoice-summary span {
  color: #607084;
  font-size: 10.5px;
  font-weight: 650;
}
.delete-invoice-summary strong {
  margin-top: 4px;
  color: #172033;
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.delete-invoice-warning {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid #e8b5af;
  border-left: 4px solid var(--v14-danger);
  border-radius: 9px;
  color: #6f2a25;
  background: var(--v14-danger-soft);
}
.delete-invoice-warning strong { color: #8f2018; font-size: 13px; }
.delete-invoice-warning span { font-size: 12px; line-height: 1.45; }
.delete-invoice-confirm {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid #d6dee7;
  border-radius: 9px;
  color: #34465b;
  background: #f7f9fb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.delete-invoice-confirm input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--v14-danger);
}

/* Modal + toast crispness */

.modal-backdrop { background: rgba(15,23,42,.54); backdrop-filter: none; }
.modal-card {
  border: 1px solid #cbd5df;
  border-radius: 13px;
  box-shadow: 0 22px 54px rgba(15,23,42,.23);
}
.modal-head { border-bottom-color: #d7dfe7; }
.modal-head h3 { color: #172033; font-weight: 800; }
.toast { border-color: #c7d2dd; box-shadow: 0 12px 30px rgba(15,23,42,.18); }

/* Crisp, restrained motion */

.btn, .icon-btn, .nav-item, .page-stat-pill, .room-card, .customer-card, .booking-card, .dashboard-room-card, .room-library-card, .finance-table-card, .invoice-card-v12, .finance-search-control, .finance-filter-control, .finance-tab-btn, .finance-view-btn, .invoice-more-menu summary, input, select, textarea {
  transition: transform .16s cubic-bezier(.2,.75,.25,1),box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover, .icon-btn:hover { transform: translateY(-1px); }
.page:not(.hidden) { animation: v14PageIn .16s ease-out; }
.modal-backdrop:not(.hidden) .modal-card { animation: v14ModalIn .18s cubic-bezier(.2,.75,.25,1); }

@keyframes v14PageIn {
  from { opacity: .72; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

@keyframes v14ModalIn {
  from { opacity: .82; transform: translateY(5px) scale(.996); }
  to { opacity: 1; transform: none; }
}

/* Mobile/tablet: keep navigation clear and readable */

@media (max-width:980px) {
  .sidebar {
    background: var(--v14-navy);
    border-bottom: 1px solid #293c54;
    box-shadow: 0 4px 13px rgba(15,23,42,.10);
  }
  .brand-box-simple {
    width: max-content;
    min-width: 118px;
    margin: 0 0 10px;
    padding: 5px 8px;
    min-height: 48px;
  }
  .brand-logo-main { width: 94px; height: 36px; }
  .sidebar-nav { gap: 6px; }
  .nav-item {
    min-height: 42px;
    color: #d9e2ec;
    background: #22344b;
    border-color: #2d425a;
    font-size: 13px;
  }
  .nav-item.active { background: #3f6fa8 !important; border-color: #6189b6; }
}

@media (max-width:780px) {
  body { font-size: 13.5px; }
  .app-page-header, .topbar, .dashboard-mode .app-page-header { min-height: 60px; padding: 7px 10px; }
  .app-page-title { font-size: 17px !important; }
  .btn { min-height: 40px; font-size: 13px; }
  .page-stat-pill strong { font-size: 12.2px; }
  .page-stat-pill em { font-size: 9px; }
  .dashboard-mode .dashboard-floor-head strong { font-size: 9.5px; }
  .dashboard-mode .dashboard-floor-head span { font-size: 8px; }
  .dashboard-mode .dashboard-room-card { min-height: 92px; padding: 7px; }
  .dashboard-mode .dashboard-room-card h4 { font-size: 12px; }
  .dashboard-mode .dashboard-room-state { font-size: 7.8px; }
  .dashboard-mode .dashboard-room-current-line strong { font-size: 10px; }
  .dashboard-mode .dashboard-room-current-line span { font-size: 8.5px; }
  .dashboard-mode .dashboard-countdown-label { font-size: 7.7px; }
  .dashboard-mode .dashboard-countdown { font-size: 9px !important; }
  .dashboard-mode .dashboard-next-inline, .dashboard-mode .dashboard-next-inline strong { font-size: 7.8px; }
  .finance-v12-tabs .finance-tab-btn { font-size: 12px; }
  .finance-summary-strip { font-size: 10.5px; }
  .finance-summary-strip strong { font-size: 12.5px; }
  .invoice-card-v12 .invoice-card-head strong { font-size: 14px; }
  .invoice-card-v12 .invoice-status-badge {
    min-width: 104px;
    min-height: 30px;
    font-size: 10.3px;
  }
  .invoice-card-v12 .invoice-card-meta { font-size: 10.5px; }
  .invoice-card-v12 .invoice-money-grid span { font-size: 9.5px; }
  .invoice-card-v12 .invoice-money-grid strong { font-size: 12px; }
  .delete-invoice-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:520px) {
  .delete-invoice-summary { grid-template-columns: 1fr 1fr; }
  .delete-invoice-modal-card .modal-actions { gap: 8px; }
  .delete-invoice-modal-card .modal-actions .btn, .delete-invoice-modal-card .modal-actions .btn-danger-v14 {
    flex: 1;
    padding: 0 10px;
    font-size: 12.5px;
  }
}

/* Professional S.E.A brand lockup — use the existing brand asset without a large white tile */

.brand-box-simple.brand-lockup {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  padding: 8px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.brand-lockup .brand-mark {
  width: 78px;
  height: 40px;
  flex: 0 0 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  overflow: hidden;
}
.brand-lockup .brand-logo-main {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.brand-identity {
  min-width: 0;
  display: grid;
  gap: 1px;
  line-height: 1.12;
}
.brand-identity strong {
  color: #fff;
  font-size: 15px;
  letter-spacing: .015em;
}
.brand-identity span {
  color: #aebdd0;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sidebar footer now contains only the destructive sign-out action */

.sidebar-footer.sidebar-footer-compact { padding-top: 14px; border-top: 1px solid #304259; }
.logout-btn.logout-btn-danger {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 13px;
  color: #fff !important;
  background: #b42318 !important;
  border: 1px solid #8f1b14 !important;
  box-shadow: 0 4px 11px rgba(180,35,24,.24);
  font-size: 13.5px;
}
.logout-btn.logout-btn-danger svg {
  width: 17px;
  height: 17px;
  color: #fff;
  stroke: #fff;
}
.logout-btn.logout-btn-danger:hover {
  color: #fff !important;
  background: #941d15 !important;
  border-color: #7f1711 !important;
  box-shadow: 0 6px 14px rgba(180,35,24,.30);
  transform: translateY(-1px);
}

/* Single user identity in the top-right header */

.user-chip.user-chip-profile {
  min-width: 220px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px 6px 7px;
  background: #f5f7fa;
  border: 1px solid #cbd5df;
}
.user-chip-profile .avatar-small {
  font-size: 12px;
  font-weight: 800;
  background: #315a88;
  border: 1px solid #294d76;
}
.user-chip-profile .user-chip-copy {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1px;
  line-height: 1.12;
}
.user-chip-profile .user-chip-copy strong {
  display: block;
  color: #172033;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip-profile .user-chip-copy > span {
  display: block !important;
  max-width: 170px;
  color: #5d6b7d;
  font-size: 9.8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-user-role {
  display: block;
  margin-top: 1px;
  color: #315a88;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .025em;
}

/* Booking list — refined filter bar */

.booking-list-v11-toolbar {
  grid-template-columns: minmax(280px,1fr) 232px 214px auto;
  gap: 9px;
  align-items: stretch;
}
.booking-list-v11-toolbar .booking-list-search, .booking-filter-control, .booking-v11-filter-toggle {
  min-height: 48px;
  height: 48px;
  border: 1px solid #c7d1dc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.04);
}
.booking-list-v11-toolbar .booking-list-search { padding-left: 3px; }
.booking-list-v11-toolbar .booking-list-search input {
  height: 46px;
  color: #1f2b3a;
  font-size: 13.2px;
  font-weight: 600;
}
.booking-list-v11-toolbar .booking-list-search svg {
  width: 17px;
  height: 17px;
  color: #60758d;
}
.booking-filter-control {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 6px;
  margin: 0;
  cursor: pointer;
}
.booking-filter-control:hover, .booking-list-v11-toolbar .booking-list-search:hover, .booking-v11-filter-toggle:hover {
  border-color: #9fb3c8;
  box-shadow: 0 4px 10px rgba(49,90,136,.09);
}
.booking-filter-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  background: #edf3f9;
}
.booking-filter-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #315a88;
  stroke-width: 1.9;
}
.booking-filter-icon-status { background: #edf6f1; border-color: #d3e6dc; }
.booking-filter-icon-status .booking-filter-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: #1f7a4f;
  box-shadow: 0 0 0 4px rgba(31,122,79,.10);
}
.booking-filter-stack {
  min-width: 0;
  display: grid;
  gap: 0;
}
.booking-list-month-field { min-width: 232px; }
.booking-list-month-field .booking-filter-stack { min-width: 170px; }
.booking-list-month-field input[type="month"] {
  min-width: 170px;
  width: 100%;
  font-size: 12.3px;
  letter-spacing: -.01em;
}

/* 24-hour time controls — fixed 15-minute increments, independent of OS AM/PM locale */

.time-24-select { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.form-field .time-24-select, .availability-field .time-24-select { width: 100%; }
.booking-filter-stack > small {
  display: block;
  margin: 0 0 -1px;
  color: #6a798b;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .075em;
}
.booking-filter-control .booking-filter-stack input, .booking-filter-control .booking-filter-stack select {
  width: 100%;
  height: 28px;
  min-height: 28px;
  padding: 0 20px 0 0;
  color: #172033;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12.7px;
  line-height: 28px;
  font-weight: 750;
  cursor: pointer;
}
.booking-filter-control .booking-filter-stack input:focus, .booking-filter-control .booking-filter-stack select:focus {
  box-shadow: none !important;
}
.booking-v11-filter-toggle {
  min-width: 116px;
  padding: 0 13px;
  color: #315a88;
  background: #eef3f8;
  border-color: #c7d2dd;
  font-size: 12.5px;
  font-weight: 800;
}
.booking-v11-filter-toggle svg { width: 16px; height: 16px; }
.booking-v11-filter-toggle[aria-expanded="true"] { background: #3f6fa8; border-color: #315a88; }
.booking-filter-count {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #315a88;
  font-size: 10px;
  font-weight: 800;
}
.booking-v11-filter-toggle[aria-expanded="true"] .booking-filter-count { color: #315a88; background: #fff; }
.booking-active-filters { margin-top: 1px; padding: 2px 0 1px; }
.booking-filter-chip, .booking-filter-clear-all {
  min-height: 30px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
}

/* Consistent compact controls in application toolbars */

.booking-v11-date-nav input, .finance-search-control, .finance-filter-control { border-color: #c7d1dc !important; }

@media (max-width:1180px) {
  .booking-list-v11-toolbar { grid-template-columns: minmax(240px,1fr) 174px 190px auto; }
  .user-chip.user-chip-profile { min-width: 195px; }
  .user-chip-profile .user-chip-copy > span { max-width: 145px; }
}

@media (max-width:980px) {
  .brand-box-simple.brand-lockup {
    min-width: 196px;
    width: auto;
    margin: 0 8px 10px 0;
    padding: 3px 4px 3px 0;
  }
  .brand-lockup .brand-mark {
    width: 66px;
    height: 36px;
    flex-basis: 66px;
    padding: 5px 6px;
  }
  .brand-identity strong { font-size: 13px; }
  .brand-identity span { font-size: 8px; }
  .user-chip.user-chip-profile {
    min-width: 188px;
    min-height: 48px;
    padding: 5px 8px 5px 6px;
  }
  .user-chip-profile .avatar-small {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  .user-chip-profile .user-chip-copy { display: grid !important; }
  .user-chip-profile .user-chip-copy > span {
    display: block !important;
    max-width: 130px;
    font-size: 8.8px;
  }
  .top-user-role { font-size: 8.2px; }
}

@media (max-width:780px) {
  .booking-list-v11-toolbar { grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .booking-list-v11-toolbar .booking-list-search {
    grid-column: 1 / -1;
    min-height: 44px;
    height: 44px;
  }
  .booking-list-v11-toolbar .booking-list-search input { height: 42px; font-size: 12.2px; }
  .booking-filter-control.booking-list-month-field, .booking-filter-control.booking-list-status-field {
    grid-column: 1;
    min-height: 44px;
    height: 44px;
    grid-template-columns: 30px minmax(0,1fr);
    padding: 4px 7px 4px 5px;
  }
  .booking-filter-icon { width: 30px; height: 30px; }
  .booking-filter-control .booking-filter-stack input, .booking-filter-control .booking-filter-stack select {
    height: 25px;
    min-height: 25px;
    font-size: 11.3px;
  }
  .booking-filter-stack > small { font-size: 7.4px; }
  .booking-v11-filter-toggle {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: stretch;
    min-width: 91px;
    min-height: 44px;
    height: auto;
    font-size: 10.5px;
  }
  .user-chip.user-chip-profile { width: auto; max-width: 185px; }
  .user-chip-profile .user-chip-copy { display: grid !important; }
  .user-chip-profile .user-chip-copy strong { font-size: 10.8px; }
  .user-chip-profile .user-chip-copy > span {
    display: block !important;
    max-width: 118px;
    font-size: 8.2px;
  }
  .top-user-role { font-size: 7.8px; }
}

@media (max-width:560px) {
  .brand-identity { display: none; }
  .brand-box-simple.brand-lockup { min-width: auto; width: 72px; }
  .user-chip.user-chip-profile { max-width: 150px; padding-right: 6px; }
  .user-chip-profile .avatar-small { display: none; }
  .user-chip-profile .user-chip-copy > span { max-width: 138px; }
}

/* Receipt preview: stronger, cleaner paper look */

.payment-receipt { color: #1d2939; background: #fff; }
.receipt-brand-row { border-bottom: 2px solid #344054 !important; padding-bottom: 12px !important; }
.receipt-brand img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
}
.receipt-brand strong {
  color: #101828 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}
.receipt-brand span, .receipt-code span {
  color: #667085 !important;
  font-size: 9.5px !important;
  font-weight: 650;
}
.receipt-code strong {
  color: #101828 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.receipt-title-block { padding: 18px 0 14px !important; }
.receipt-title-block h2 {
  color: #101828 !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  letter-spacing: .025em;
}
.receipt-title-block p {
  color: #667085 !important;
  font-size: 10px !important;
  font-weight: 600;
}

/* Key customer/payment information is now a ruled table */

.receipt-info-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid #98a2b3;
  font-size: 10.5px;
}
.receipt-info-table th, .receipt-info-table td {
  border: 1px solid #c7ced8;
  padding: 8px 9px;
  vertical-align: middle;
}
.receipt-info-table th {
  width: 19%;
  background: #f2f4f7;
  color: #475467;
  text-align: left;
  font-size: 9.5px;
  font-weight: 750;
}
.receipt-info-table td { color: #101828; font-weight: 700; }
.receipt-section { margin-top: 15px !important; }
.receipt-section-title { margin-bottom: 6px !important; color: #101828; }
.receipt-section-title strong {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
}
.receipt-section-title span {
  color: #667085 !important;
  font-size: 9.5px !important;
  font-weight: 650;
}
.receipt-table {
  width: 100%;
  border-collapse: collapse !important;
  border: 1px solid #98a2b3;
  font-size: 10px !important;
}
.receipt-table th, .receipt-table td { border: 1px solid #c7ced8 !important; padding: 7px 8px !important; }
.receipt-table th {
  background: #e9eef5 !important;
  color: #344054 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: none;
}
.receipt-table td { color: #1d2939; font-weight: 600; }
.receipt-table th:first-child, .receipt-table td:first-child { width: 8%; text-align: center; }
.receipt-table th:nth-child(2), .receipt-table td:nth-child(2) { width: 20%; }
.receipt-table th:nth-child(3), .receipt-table td:nth-child(3) { width: 25%; }
.receipt-table th:nth-child(4), .receipt-table td:nth-child(4) { width: 19%; }
.receipt-table th:last-child, .receipt-table td:last-child { width: 28%; text-align: right; }

/* Totals are shown as a compact ruled table */

.receipt-total-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.receipt-total-table {
  width: 52%;
  border-collapse: collapse;
  border: 1px solid #98a2b3;
  font-size: 10.5px;
}
.receipt-total-table th, .receipt-total-table td { border: 1px solid #c7ced8; padding: 7px 9px; }
.receipt-total-table th {
  background: #f8fafc;
  text-align: left;
  color: #475467;
  font-weight: 700;
}
.receipt-total-table td {
  text-align: right;
  color: #101828;
  font-weight: 800;
}
.receipt-total-table .receipt-total-due th, .receipt-total-table .receipt-total-due td {
  background: #fff7e6;
  color: #8a5a00;
  font-weight: 850;
}

/* Payment block: line-based, balanced QR instead of oversized QR */

.receipt-payment-section {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 168px !important;
  gap: 0 !important;
  margin-top: 15px !important;
  padding: 0 !important;
  border: 1px solid #98a2b3 !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow: hidden;
}
.receipt-bank-info { padding: 12px 14px; border-right: 1px solid #c7ced8; }
.receipt-section-kicker {
  color: #475467 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .045em;
}
.receipt-bank-info h3 {
  margin: 5px 0 9px !important;
  color: #101828;
  font-size: 14px !important;
  font-weight: 850;
}
.receipt-bank-line {
  display: grid !important;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 10px;
  margin-top: 5px !important;
  font-size: 10.5px !important;
}
.receipt-bank-line span { color: #667085; font-weight: 650; }
.receipt-bank-line strong {
  color: #101828;
  text-align: left;
  font-weight: 800;
}
.receipt-transfer-note {
  margin-top: 10px !important;
  padding: 8px 9px !important;
  border: 1px solid #d0d5dd;
  border-radius: 0 !important;
  background: #f8fafc !important;
}
.receipt-transfer-note span {
  color: #667085 !important;
  font-size: 8.8px !important;
  font-weight: 700;
}
.receipt-transfer-note strong {
  margin-top: 3px !important;
  color: #101828;
  font-size: 9.7px !important;
  font-weight: 800;
  word-break: break-word;
}
.receipt-qr-box {
  min-height: 168px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
}
.receipt-qr-box img {
  width: 138px !important;
  height: 138px !important;
  max-width: 138px !important;
  max-height: 138px !important;
  object-fit: contain;
}
.receipt-qr-caption {
  margin-top: 5px !important;
  color: #475467 !important;
  font-size: 8.8px !important;
  font-weight: 700 !important;
  line-height: 1.3;
}
.receipt-qr-loading { font-size: 10px !important; }
.receipt-qr-error { min-height: 120px !important; padding: 9px !important; }
.receipt-qr-error strong { font-size: 10.5px !important; }
.receipt-qr-error span { font-size: 8.8px !important; }
.receipt-paid-stamp {
  padding: 12px 9px !important;
  border-radius: 0 !important;
  font-size: 10px !important;
}
.receipt-footer {
  margin-top: 17px !important;
  padding-top: 9px !important;
  border-top: 1px solid #98a2b3 !important;
  color: #667085 !important;
  font-size: 8.5px !important;
}

/* Dedicated print root. It never appears on screen. */

.print-receipt-root { display: none; }

@media print {
  @page {
    size:A4 portrait; margin:10mm;
  }

  html, body { background: #fff !important; }
  body.printing-receipt > *:not(#printReceiptRoot) { display: none !important; }
  body.printing-receipt #printReceiptRoot {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.printing-receipt #printReceiptRoot .payment-receipt {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  body.printing-receipt #printReceiptRoot .receipt-brand-row { break-inside: avoid; }
  body.printing-receipt #printReceiptRoot .receipt-info-table, body.printing-receipt #printReceiptRoot .receipt-total-table, body.printing-receipt #printReceiptRoot .receipt-payment-section {
    break-inside: avoid;
  }
  body.printing-receipt #printReceiptRoot .receipt-table tr { break-inside: avoid; }
  body.printing-receipt #printReceiptRoot .receipt-qr-retry, body.printing-receipt #printReceiptRoot .receipt-qr-loading, body.printing-receipt #printReceiptRoot .receipt-qr-error {
    display: none !important;
  }
}

@media (max-width:780px) {
  .receipt-info-table th, .receipt-info-table td { padding: 6px; font-size: 9px; }
  .receipt-total-table { width: 100%; }
  .receipt-payment-section { grid-template-columns: 1fr !important; }
  .receipt-bank-info { border-right: 0; border-bottom: 1px solid #c7ced8; }
  .receipt-qr-box { min-height: 154px !important; }
  .receipt-qr-box img { width: 132px !important; height: 132px !important; }
}

/* Prevent the page behind the receipt preview from scrolling. */

body.receipt-preview-open { overflow: hidden !important; }

/* Full-screen receipt preview instead of a small modal card. */

.receipt-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #e9eef4 !important;
}
.receipt-modal-backdrop.hidden { display: none !important; }
.receipt-modal-card {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #e9eef4 !important;
  box-shadow: none !important;
}
.receipt-modal-toolbar {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto;
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 9px 18px !important;
  border-bottom: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.08) !important;
}
.receipt-modal-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.receipt-preview-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.receipt-preview-heading strong {
  color: #172033;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}
.receipt-preview-heading span {
  color: #667085;
  font-size: 10.5px;
  font-weight: 600;
}
.receipt-modal-actions {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
}
.payment-receipt-paper {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 22px 16px 44px !important;
  background: #e9eef4 !important;
}
.payment-receipt-paper .payment-receipt {
  width: min(794px,calc(100vw - 32px)) !important;
  min-height: auto !important;
  margin: 0 auto !important;
  box-shadow: 0 18px 50px rgba(15,23,42,.14) !important;
}

/* Keep invoice action menus outside the card clipping area. */

.invoice-card-v12 { overflow: visible !important; }
.invoice-card-v12 .invoice-status-titlebar { border-radius: 11px 11px 0 0; }
.invoice-card-v12 .invoice-card-body { border-radius: 0 0 11px 11px; background: #fff; }
.invoice-more-menu { z-index: 80; }
.invoice-more-menu > div { z-index: 500 !important; }

/* Bank information and QR always share one horizontal row on desktop/print. */

.receipt-payment-section { grid-template-columns: minmax(0,1fr) 156px !important; align-items: stretch !important; }
.receipt-bank-info { min-width: 0; }
.receipt-qr-box { min-height: 148px !important; padding: 9px 8px !important; }
.receipt-qr-box img {
  width: 122px !important;
  height: 122px !important;
  max-width: 122px !important;
  max-height: 122px !important;
}
.receipt-qr-caption {
  margin-top: 4px !important;
  max-width: 138px;
  font-size: 8.3px !important;
  line-height: 1.25 !important;
}

/* Print: preserve the compact two-column payment block. */

@media print {
  body.receipt-preview-open { overflow: visible !important; }
  body.printing-receipt #printReceiptRoot .receipt-payment-section {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 145px !important;
    gap: 0 !important;
    align-items: stretch !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  body.printing-receipt #printReceiptRoot .receipt-bank-info {
    border-right: 1px solid #c7ced8 !important;
    border-bottom: 0 !important;
    padding: 10px 12px !important;
  }
  body.printing-receipt #printReceiptRoot .receipt-qr-box { min-height: 136px !important; padding: 7px !important; }
  body.printing-receipt #printReceiptRoot .receipt-qr-box img {
    width: 112px !important;
    height: 112px !important;
    max-width: 112px !important;
    max-height: 112px !important;
  }
  body.printing-receipt #printReceiptRoot .receipt-qr-caption { font-size: 7.8px !important; margin-top: 3px !important; }
  body.printing-receipt #printReceiptRoot .receipt-footer { margin-top: 12px !important; }
}

@media (max-width:780px) {
  .receipt-modal-toolbar {
    min-height: 58px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .receipt-preview-heading span { display: none; }
  .receipt-preview-heading strong { font-size: 11.5px; }
  .receipt-modal-toolbar .btn {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 10px !important;
  }
  .receipt-modal-actions .btn { padding: 0 9px !important; }
  .payment-receipt-paper { padding: 10px 6px 28px !important; }
  .payment-receipt-paper .payment-receipt { width: 100% !important; padding: 24px 16px !important; }
  .receipt-payment-section { grid-template-columns: minmax(0,1fr) 132px !important; }
  .receipt-bank-info {
    border-right: 1px solid #c7ced8 !important;
    border-bottom: 0 !important;
    padding: 10px !important;
  }
  .receipt-bank-line {
    grid-template-columns: 88px minmax(0,1fr) !important;
    gap: 6px !important;
    font-size: 9.5px !important;
  }
  .receipt-qr-box { min-height: 132px !important; padding: 6px !important; }
  .receipt-qr-box img {
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
  }
  .receipt-qr-caption { max-width: 116px; font-size: 7.5px !important; }
}

@media (max-width:520px) {
  .receipt-preview-heading { display: none; }
  .receipt-modal-toolbar { padding: 7px !important; }
  .receipt-modal-actions { gap: 5px !important; }
  .receipt-modal-actions .btn { padding: 0 7px !important; font-size: 9px !important; }
  .receipt-payment-section { grid-template-columns: minmax(0,1fr) 116px !important; }
  .receipt-bank-info { padding: 8px !important; }
  .receipt-bank-info h3 { font-size: 12px !important; }
  .receipt-bank-line { grid-template-columns: 70px minmax(0,1fr) !important; font-size: 8.6px !important; }
  .receipt-transfer-note { padding: 6px !important; }
  .receipt-transfer-note strong { font-size: 8.4px !important; }
  .receipt-qr-box img {
    width: 92px !important;
    height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
  }
  .receipt-qr-caption { max-width: 102px; font-size: 7px !important; }
}

.data-integrity-warning {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #e3b8b8;
  background: #fff7f7;
  border-radius: 12px;
  display: grid;
  gap: 5px;
  color: #7d2f2f;
  font-size: 13px;
  line-height: 1.55;
}
.data-integrity-warning strong { font-size: 14px; color: #9f2f2f; }
.data-health-modal-card { width: min(620px,calc(100vw - 28px)); }
.data-health-content { display: grid; gap: 10px; }
.data-health-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #d7e0ea;
  background: #f7f9fc;
}
.data-health-summary strong { font-size: 16px; }
.data-health-summary span { font-size: 12px; color: #5f6f82; }
.data-health-summary.warn { border-color: #e4c687; background: #fffaf0; }
.data-health-summary.ok { border-color: #b9d8c8; background: #f4fbf7; }
.data-health-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fff;
}
.data-health-row>span { font-size: 18px; }
.data-health-row div { display: grid; gap: 2px; }
.data-health-row strong { font-size: 14px; }
.data-health-row small { font-size: 12px; color: #667085; }
.data-health-row b { font-size: 15px; }
.data-health-row.warn { border-color: #ead09b; background: #fffdf7; }
.data-health-row.ok>span { color: #238a59; }
.data-health-row.warn>span { color: #c78f28; }
.data-health-note {
  padding: 12px 14px;
  border-left: 3px solid #5b88c4;
  background: #f4f7fb;
  color: #44566b;
  font-size: 12.5px;
  line-height: 1.55;
}
.booking-detail-actions #bookingDetailDeleteBtn { margin-right: auto; }

@media (max-width:700px) {
  .data-health-summary { align-items: flex-start; flex-direction: column; }
  .booking-detail-actions { flex-wrap: wrap; }
  .booking-detail-actions #bookingDetailDeleteBtn { width: 100%; margin-right: 0; }
}

.customer-card.archived {
  opacity: .84;
  background: #f5f7fa;
  border-style: dashed;
}
.delete-booking-impact {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 12px 0;
}
.delete-booking-impact > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 10px;
  background: #f7f9fb;
}
.delete-booking-impact span { color: #647386; font-size: 11px; }
.delete-booking-impact strong { color: #172033; font-size: 12px; }
.danger-text { color: #b63d3d !important; }
.invoice-card-v12.revoked .invoice-status-titlebar { background: #e9edf1; border-bottom-color: #cfd6dd; }
.invoice-card-v12 .invoice-status-badge.revoked {
  color: #5b6673;
  background: #f4f6f8;
  border-color: #cbd3dc;
}
.revoked-label {
  color: #5b6673 !important;
  background: #eef1f4 !important;
  border-color: #cbd3dc !important;
}
.receipt-revoked-banner {
  margin: 8px 0 14px;
  padding: 9px 12px;
  border: 2px solid #8f99a6;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.receipt-revoked-banner strong { color: #4d5967; letter-spacing: .08em; }
.receipt-revoked-banner span {
  color: #667381;
  font-size: 11px;
  text-align: right;
}
.receipt-revoked-stamp {
  width: 138px;
  min-height: 92px;
  border: 2px dashed #7f8a97;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  color: #596573;
  letter-spacing: .06em;
  border-radius: 8px;
}

@media (max-width:640px) {
  .delete-booking-impact { grid-template-columns: 1fr; }
  .receipt-revoked-banner { align-items: flex-start; flex-direction: column; }
  .receipt-revoked-banner span { text-align: left; }
}

.customer-class-editor {
  border: 1px solid #d8e0e8;
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
}
.customer-class-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.customer-class-add-row input { flex: 1; }
.customer-classes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.customer-class-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid #d5dee8;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
  color: #334155;
}
.customer-class-chip button {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
}
.customer-class-empty { font-size: 12px; color: #8290a0; }
.usage-badge.internal { background: #e7f4ed; color: #23744b; }
.usage-badge {
  display: inline-flex;
  width: max-content;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.internal-zero-rate {
  background: #f0f5f2 !important;
  color: #23744b !important;
  font-weight: 750;
}
.dashboard-room-identity { display: flex; flex-direction: column; }
.dashboard-room-class {
  font-size: 15px;
  line-height: 1.2;
  color: #172033;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-room-identity .dashboard-room-customer {
  font-size: 12px;
  color: #667689;
  margin-top: 2px;
  font-weight: 650;
}
.dashboard-next-inline small {
  display: block;
  font-size: 11px;
  color: #748396;
  margin-top: 2px;
}
.booking-teacher-line {
  display: block;
  font-size: 12px;
  color: #667689;
  margin-top: 2px;
}
.booking-timeline-block.internal { box-shadow: inset 0 0 0 1px rgba(35,116,75,.22); }

@media (max-width:720px) {
  .customer-class-add-row { flex-direction: column; align-items: stretch; }
  .dashboard-room-class { font-size: 14px; }
}

.approval-nav-badge.hidden { display: none !important; }
.approvals-toolbar { align-items: center; }
.approval-summary-pills {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.approval-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #d4dde7;
  border-radius: 10px;
  background: #fff;
  color: #526174;
  font-size: 11px;
  font-weight: 700;
}
.approval-summary-pill strong { font-size: 14px; color: #172033; }
.approval-summary-pill.pending strong { color: #c78f28; }
.approval-summary-pill.processed strong { color: #315f97; }
.approval-policy-note {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid #d5dfeb;
  border-left: 3px solid #5b88c4;
  border-radius: 10px;
  background: #f7f9fc;
  color: #536273;
  font-size: 11.5px;
  line-height: 1.45;
}
.approval-requests-list { display: grid; gap: 10px; }
.approval-request-card {
  padding: 13px 14px;
  border: 1px solid #d8e0e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(31,48,69,.045);
}
.approval-request-card.pending { border-left: 3px solid #c78f28; }
.approval-request-card.approved { border-left: 3px solid #238a59; }
.approval-request-card.rejected, .approval-request-card.blocked, .approval-request-card.invalid {
  border-left: 3px solid #8798a8;
  background: #fafbfc;
}
.approval-request-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.approval-request-top>div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.approval-request-top strong {
  font-size: 14px;
  color: #172033;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.approval-type-badge, .approval-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .035em;
  white-space: nowrap;
}
.approval-type-badge {
  background: #edf3fa;
  color: #315f97;
  border: 1px solid #d4e0ee;
}
.approval-status-badge.pending {
  background: #fff7e8;
  color: #9a6916;
  border: 1px solid #ead09b;
}
.approval-status-badge.approved {
  background: #edf8f2;
  color: #238a59;
  border: 1px solid #c9e4d5;
}
.approval-status-badge.rejected, .approval-status-badge.blocked, .approval-status-badge.invalid {
  background: #eef1f4;
  color: #5d6977;
  border: 1px solid #d6dce3;
}
.approval-request-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: #6b7788;
  font-size: 10.5px;
}
.approval-request-reason {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #f7f9fb;
}
.approval-request-reason span, .approval-impact span { font-size: 10px; color: #748195; }
.approval-request-reason strong, .approval-impact strong { font-size: 11.5px; color: #283548; }
.approval-request-scope {
  margin-top: 7px;
  color: #5d6c7e;
  font-size: 10.5px;
}
.approval-impact {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #dce4ed;
  border-radius: 9px;
  background: #fbfcfd;
}
.approval-impact.danger { border-color: #ebc0c0; background: #fff7f7; }
.approval-impact.danger strong { color: #a34040; }
.approval-impact.ok strong { color: #315f97; }
.approval-review-note {
  margin-top: 8px;
  color: #667381;
  font-size: 10.5px;
}
.approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #edf0f4;
}
.approval-actions .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11px;
}
.approval-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.delete-request-modal-card { width: min(600px,calc(100vw - 28px)); }

/* Customers: replace oversized cards with compact business list */

.customer-modal-card { width: min(720px,calc(100vw - 28px)); }
.customer-modal-card .form-grid { gap: 11px; }
.customer-modal-card .form-field textarea { min-height: 72px; }
.customer-modal-card .customer-class-editor { padding: 10px; }
.customer-modal-card .modal-head { padding-bottom: 12px; }

/* Week view: time range is a first-class line */

.week-booking-chip strong {
  font-size: 8.5px;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.week-booking-chip span { font-size: 7.7px; line-height: 1.2; }
.week-booking-chip small {
  display: block;
  margin-top: 2px;
  color: inherit;
  opacity: .78;
  font-size: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width:760px) {
  .approval-request-top, .approval-request-meta, .approval-impact { align-items: flex-start; flex-direction: column; }
  .approval-request-reason { grid-template-columns: 1fr; }
  .approval-actions .btn { flex: 1; }
}

.request-delete-booking {
  border-color: #e5c7c7 !important;
  color: #9f4545 !important;
  background: #fffafa !important;
}
.request-delete-booking:hover { background: #fff1f1 !important; }
.booking-charge-preview {
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid #d7e2ee;
  border-radius: 10px;
  background: #f7faff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #526174;
  font-size: 11px;
  line-height: 1.35;
}
.booking-charge-preview strong {
  color: #172033;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}
.booking-charge-preview span { text-align: right; }
.booking-session-rate { max-width: 100%; line-height: 1.35; }
.finance-rate-note {
  display: block;
  margin-top: 2px;
  color: #718096;
  font-size: 9px;
  font-weight: 650;
}
.receipt-rate-note {
  display: block;
  margin-top: 2px;
  color: #667085;
  font-size: 7.5px;
  font-weight: 650;
}

@media (max-width:640px) {
  .booking-charge-preview {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .booking-charge-preview span { text-align: left; }
}

:root {
  --sea-green-800: #086343;
  --sea-green-700: #087A4E;
  --sea-green-600: #0B8F59;
  --sea-green-500: #16A36A;
  --sea-green-100: #DCF5E8;
  --sea-green-50: #EEF9F3;
  --app-bg: #F6F9F7;
  --surface: #FFFFFF;
  --surface-soft: #F8FAF9;
  --text-primary: #12201B;
  --text-secondary: #53635D;
  --text-muted: #8A9993;
  --border: #E1EAE5;
  --border-strong: #D4E0D9;
  --status-blue: #4C8FD8;
  --status-blue-soft: #EDF5FD;
  --status-green: #15935D;
  --status-green-soft: #E8F7EF;
  --status-warning: #D89A22;
  --status-warning-soft: #FFF5DD;
  --status-inactive: #82908A;
  --status-inactive-soft: #F0F3F2;
  --danger: #D92D20;
  --danger-soft: #FFF1F0;
  --shadow-sm: 0 4px 16px rgba(20,50,35,.04);
  --shadow-md: 0 8px 24px rgba(20,50,35,.07);
  --sidebar: 240px;
  --v14-navy: #ffffff;
  --v14-navy-2: #F8FAF9;
  --v14-blue: var(--sea-green-700);
  --v14-blue-dark: var(--sea-green-800);
  --v14-blue-soft: var(--sea-green-50);
  --v14-green: var(--status-green);
  --v14-green-soft: var(--status-green-soft);
  --v14-gray: var(--text-secondary);
  --v14-warning: #A96D10;
  --v14-warning-soft: var(--status-warning-soft);
  --v14-danger: var(--danger);
  --v14-danger-soft: var(--danger-soft);
  --v14-text: var(--text-primary);
  --v14-muted: var(--text-secondary);
  --v14-line: var(--border);
  --v14-page: var(--app-bg);
  --v14-card: #fff;
  --action-primary: var(--sea-green-700);
  --action-primary-dark: var(--sea-green-800);
  --action-primary-soft: var(--sea-green-50);
  --status-upcoming: var(--status-blue);
  --status-ongoing: var(--status-green);
}
html { color-scheme: light; }
body {
  color: var(--text-primary);
  background: var(--app-bg);
  font-family: Inter,"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
strong, b, h1, h2, h3, h4 { color: var(--text-primary); }
.muted, .field-help, .form-field small { color: var(--text-secondary); }

/* Login follows the same restrained green system. */

.eyebrow, .panel-kicker { color: var(--sea-green-700); }
.input-wrap:focus-within { border-color: var(--sea-green-600); box-shadow: 0 0 0 4px rgba(11,143,89,.09); }
.form-message { color: var(--danger); }

/* Core layout */

.main-area { background: var(--app-bg); }
.content-area { padding: 22px 24px 30px; background: var(--app-bg); }
.content-area>.page { width: min(100%,1680px); margin: 0 auto; }

/* Sidebar */

.sidebar { padding: 18px 14px 14px; border-right: 1px solid var(--border); }
.brand-box-simple.brand-lockup {
  min-height: 62px;
  margin: 0 0 12px;
  padding: 6px 7px 14px;
  gap: 9px;
  border-bottom: 1px solid var(--border);
}
.brand-lockup .brand-mark {
  width: 72px;
  height: 38px;
  flex: 0 0 72px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
.brand-identity strong {
  color: var(--text-primary);
  font-size: 14px;
  letter-spacing: 0;
}
.brand-identity span {
  color: var(--text-secondary);
  font-size: 9px;
  letter-spacing: .055em;
}
.sidebar-nav { padding: 2px 1px 8px; }
.nav-label {
  padding: 10px 10px 7px;
  color: var(--text-muted);
  font-size: 9.5px;
  letter-spacing: .12em;
}
.nav-label-spaced { margin-top: 10px; }
.nav-item {
  min-height: 46px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #405049;
  font-size: 13.5px;
}
.nav-item svg {
  width: 19px;
  height: 19px;
  color: #687970;
  stroke-width: 1.9;
}
.nav-item:hover {
  color: var(--sea-green-800);
  background: var(--sea-green-50);
  border-color: transparent;
}
.nav-item:hover svg { color: var(--sea-green-700); }
.nav-item.active {
  color: var(--sea-green-700) !important;
  background: #EAF7F0 !important;
  border-color: #D7EEE2 !important;
  box-shadow: inset 3px 0 0 var(--sea-green-600) !important;
  font-weight: 750;
}
.nav-item.active svg { color: var(--sea-green-700); }
.nav-badge {
  min-width: 22px;
  color: var(--sea-green-800);
  background: var(--sea-green-100);
  font-size: 10px;
}
.nav-item.active .nav-badge {
  color: #fff;
  background: var(--sea-green-700);
  border: 0;
}
.secure-dot { background: var(--sea-green-600); box-shadow: 0 0 0 3px var(--sea-green-100); }
.sidebar-footer.sidebar-footer-compact {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sidebar-brand-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #DDEFE5;
  border-radius: 11px;
  background: var(--sea-green-50);
}
.sidebar-brand-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  color: var(--sea-green-700);
  border: 1px solid #DCEBE3;
}
.sidebar-brand-note-icon svg { width: 17px; height: 17px; }
.sidebar-brand-note>span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.sidebar-brand-note strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--sea-green-900);
}
.sidebar-brand-note small { font-size: 9px; color: #628074; }
.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar-avatar {
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--sea-green-800);
  font-size: 12px;
  font-weight: 800;
}
.sidebar-user-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.sidebar-user-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}
.sidebar-user-copy span { font-size: 10px; color: var(--text-secondary); }
.logout-btn.logout-btn-danger {
  min-height: 40px;
  color: var(--danger) !important;
  background: #fff !important;
  border: 1px solid #F0CECB !important;
  border-radius: 9px;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 750;
}
.logout-btn.logout-btn-danger svg { color: var(--danger); stroke: var(--danger); }
.logout-btn.logout-btn-danger:hover {
  color: #B42318 !important;
  background: var(--danger-soft) !important;
  border-color: #E9B3AE !important;
  box-shadow: none;
  transform: none;
}

/* Header */

.app-page-header, .topbar, .dashboard-mode .app-page-header {
  min-height: 64px;
  height: 64px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
}
.app-page-title, .page-title, #pageTitle {
  color: var(--text-primary) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
}
.dashboard-mode #pageTitle {
  visibility: hidden;
  width: 1px;
  overflow: hidden;
}
.topbar-actions { gap: 10px; }
.date-chip, .user-chip, .app-page-header .date-chip, .app-page-header .user-chip {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--text-secondary);
}
.date-chip { height: 40px; border-radius: 10px; }
.date-chip svg { color: var(--sea-green-700); }
.user-chip.user-chip-profile {
  min-width: 210px;
  min-height: 44px;
  padding: 4px 9px 4px 5px;
  background: #fff;
  border-color: var(--border);
  border-radius: 10px;
}
.user-chip-profile .avatar-small {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #fff;
  background: var(--sea-green-800);
  border: 0;
}
.user-chip-profile .user-chip-copy strong { color: var(--text-primary); }
.user-chip-profile .user-chip-copy>span { color: var(--text-secondary); }
.top-user-role { color: var(--sea-green-700); }
.mobile-menu-btn {
  color: var(--sea-green-800);
  background: var(--sea-green-50);
  border: 1px solid #DDEFE5;
}

/* Controls and shared surfaces */

.btn {
  min-height: 42px;
  border-radius: 10px;
  font-weight: 720;
}
.btn-primary {
  color: #fff;
  background: var(--sea-green-700);
  border: 1px solid var(--sea-green-700);
  box-shadow: 0 5px 13px rgba(8,122,78,.13);
}
.btn-primary:hover {
  background: var(--sea-green-800);
  border-color: var(--sea-green-800);
  box-shadow: 0 6px 15px rgba(8,122,78,.16);
}
.btn-secondary {
  color: #31443B;
  background: #fff;
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  color: var(--sea-green-800);
  background: var(--sea-green-50);
  border-color: #BFDACB;
}
.action-btn:not(.danger) {
  color: var(--sea-green-800);
  background: var(--sea-green-50);
  border-color: #CEE7DA;
}
.action-btn:not(.danger):hover { background: #E2F4EA; border-color: #B9DCCB; }
.action-btn.danger, .btn-danger, .btn-danger-v14 {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
.icon-btn:hover {
  color: var(--sea-green-800);
  background: var(--sea-green-50);
  border-color: #D9EDE3;
}
input, select, textarea, .finance-search-control, .finance-filter-control, .booking-list-status-field {
  color: var(--text-primary);
  background: #fff;
  border-color: var(--border-strong) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--sea-green-600) !important;
  box-shadow: 0 0 0 3px rgba(11,143,89,.10) !important;
}
.form-field label, .auth-form label { color: #31443B; }
.modal-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(20,50,35,.18);
}
.modal-head { border-bottom-color: var(--border); }
.modal-backdrop { background: rgba(15,35,27,.48); }
.room-library-card, .customer-card, .booking-card, .finance-table-card, .invoice-card-v12, .booking-group-card, .booking-series-row, .booking-single-row, .rooms-overview-strip, .finance-v12-commandbar, .approval-request-card {
  background: #fff;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm);
}
.finance-table-card:hover, .invoice-card-v12:hover, .room-library-card:hover, .customer-card:hover, .booking-group-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong) !important;
}
.booking-view-switch, .booking-list-mode-switch, .finance-tab-switch, .finance-view-switch {
  background: #F0F4F2;
  border-color: var(--border);
  box-shadow: none;
}
.booking-view-btn, .booking-list-mode-btn, .finance-tab-btn, .finance-view-btn { color: var(--text-secondary); }
.booking-view-btn.active, .booking-list-mode-btn.active, .finance-tab-btn.active, .finance-view-btn.active {
  color: #fff !important;
  background: var(--sea-green-700) !important;
  border-color: var(--sea-green-700) !important;
  box-shadow: none !important;
}

/* Booking state colors */

.booking-status-legend span {
  color: var(--text-secondary);
  background: #fff;
  border-color: var(--border);
}
.booking-status-legend .upcoming i { background: var(--status-blue); }
.booking-status-legend .ongoing i { background: var(--status-green); }
.booking-status-legend .completed i { background: var(--status-inactive); }
.booking-timeline-block.upcoming, .week-booking-chip.upcoming {
  background: var(--status-blue-soft);
  color: #316EA8;
  border-color: #CFE3F5;
}
.booking-timeline-block.ongoing, .week-booking-chip.ongoing {
  background: var(--status-green-soft);
  color: #0E7147;
  border-color: #C8E8D7;
}
.booking-timeline-block.completed, .week-booking-chip.completed {
  background: var(--status-inactive-soft);
  color: #66736E;
  border-color: #DCE3E0;
}
.booking-timeline-block { box-shadow: none; }
.rooms-overview-item.active strong, .room-status.active, .invoice-complete-label, .money-paid { color: var(--status-green) !important; }
.rooms-add-btn, .booking-v11-add-btn { background: var(--sea-green-700); border-color: var(--sea-green-700); }
.rooms-search-box:focus-within, .search-box:focus-within { border-color: var(--sea-green-600); box-shadow: 0 0 0 3px rgba(11,143,89,.09); }
.approval-request-card.pending { border-left-color: var(--status-warning); }
.approval-request-card.approved { border-left-color: var(--status-green); }
.approval-status-badge.pending {
  background: var(--status-warning-soft);
  color: #94620D;
  border-color: #EED6A5;
}
.approval-status-badge.approved {
  background: var(--status-green-soft);
  color: var(--status-green);
  border-color: #C9E9D8;
}
.finance-summary-strip .money-paid, .invoice-card-v12 .money-paid { color: var(--status-green) !important; }
.finance-summary-strip .money-remaining, .invoice-card-v12 .money-remaining { color: #A66D0E !important; }
.dashboard-v16-shell { display: grid; gap: 15px; }
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
}
.dashboard-kpi-card {
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 19px;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.dashboard-kpi-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border-radius: 12px;
}
.dashboard-kpi-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
}
.dashboard-kpi-card.occupied .dashboard-kpi-icon { color: var(--status-green); background: var(--status-green-soft); }
.dashboard-kpi-card.available .dashboard-kpi-icon { color: var(--status-blue); background: var(--status-blue-soft); }
.dashboard-kpi-card.total .dashboard-kpi-icon { color: #52645D; background: #F0F3F2; }
.dashboard-kpi-card.ending .dashboard-kpi-icon { color: #B87B13; background: var(--status-warning-soft); }
.dashboard-kpi-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  align-items: baseline;
}
.dashboard-kpi-copy strong {
  font-size: 31px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
}
.dashboard-kpi-copy>span {
  color: #32443D;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}
.dashboard-kpi-copy small {
  grid-column: 1/-1;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-quick-section {
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.dashboard-section-heading.compact {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dashboard-section-heading.compact>div { display: grid; gap: 1px; }
.dashboard-section-heading.compact span {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}
.dashboard-section-heading.compact small { font-size: 9.5px; color: var(--text-muted); }
.dashboard-action-buttons-v16 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin: 0;
}
.dashboard-action-btn {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 10px 13px;
  text-align: left;
  color: #31443B;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  box-shadow: none;
}
.dashboard-action-btn:hover {
  transform: translateY(-1px);
  color: var(--sea-green-800);
  background: var(--sea-green-50);
  border-color: #C9E4D6;
}
.dashboard-action-btn.primary {
  color: #fff;
  background: var(--sea-green-700);
  border-color: var(--sea-green-700);
  box-shadow: 0 6px 16px rgba(8,122,78,.15);
}
.dashboard-action-btn.primary:hover { background: var(--sea-green-800); border-color: var(--sea-green-800); }
.dashboard-action-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 9px;
  color: var(--sea-green-700);
  background: var(--sea-green-50);
}
.dashboard-action-icon svg { width: 17px; height: 17px; }
.dashboard-action-btn.primary .dashboard-action-icon { color: #fff; background: rgba(255,255,255,.15); }
.dashboard-action-btn strong {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}
.dashboard-action-btn small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  white-space: normal;
}
.dashboard-action-btn.primary strong { color: #fff; }
.dashboard-action-btn.primary small { color: rgba(255,255,255,.80); }
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(350px,.82fr) minmax(650px,1.65fr);
  gap: 15px;
  align-items: start;
}
.dashboard-panel-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
}
.dashboard-panel-head, .room-board-head.dashboard-room-board-head {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.dashboard-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dashboard-panel-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  border-radius: 10px;
  color: var(--sea-green-700);
  background: var(--sea-green-50);
}
.dashboard-panel-icon svg { width: 18px; height: 18px; }
.dashboard-panel-title>div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.dashboard-panel-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.dashboard-panel-title span {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: none;
}
.dashboard-text-link {
  min-height: 34px;
  padding: 0 8px;
  color: var(--sea-green-700);
  background: transparent;
  font-size: 10.5px;
  font-weight: 750;
  white-space: nowrap;
}
.dashboard-text-link:hover {
  color: var(--sea-green-900);
  background: var(--sea-green-50);
  border-radius: 8px;
}

/* Today's schedule */

.dashboard-today-panel { overflow: hidden; }
.dashboard-today-schedule {
  padding: 10px 14px 5px;
  max-height: 570px;
  overflow: auto;
}
.dashboard-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 49px 16px minmax(0,1fr);
  gap: 7px;
  min-height: 74px;
  padding: 4px 0 7px;
}
.dashboard-timeline-time {
  padding-top: 8px;
  text-align: right;
  line-height: 1.15;
}
.dashboard-timeline-time strong {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #273A32;
}
.dashboard-timeline-time span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 9px;
}
.dashboard-timeline-marker {
  position: relative;
  display: flex;
  justify-content: center;
}
.dashboard-timeline-marker::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -12px;
  width: 1px;
  background: #E2EAE6;
}
.dashboard-timeline-item:last-child .dashboard-timeline-marker::before { bottom: 26px; }
.dashboard-timeline-marker i {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin-top: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--status-inactive);
  box-shadow: 0 0 0 1px #C7D3CD;
}
.dashboard-timeline-item.ongoing .dashboard-timeline-marker i { background: var(--status-green); box-shadow: 0 0 0 2px #CBEAD9; }
.dashboard-timeline-item.upcoming .dashboard-timeline-marker i { background: var(--status-blue); box-shadow: 0 0 0 2px #D8E9F8; }
.dashboard-timeline-card {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.dashboard-timeline-item.ongoing .dashboard-timeline-card { background: var(--status-green-soft); border-color: #CBE8D8; }
.dashboard-timeline-item.upcoming .dashboard-timeline-card { background: var(--status-blue-soft); border-color: #D4E6F6; }
.dashboard-timeline-item.completed .dashboard-timeline-card { background: #FAFBFA; color: #74827C; }
.dashboard-timeline-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dashboard-timeline-card-head>strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}
.dashboard-schedule-status {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-schedule-status.ongoing { color: #0E7147; background: #D7F0E2; }
.dashboard-schedule-status.upcoming { color: #326EA7; background: #DDECF9; }
.dashboard-schedule-status.completed { color: #68766F; background: #EAEFEC; }
.dashboard-timeline-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 9.3px;
}
.dashboard-timeline-meta>span:not(:last-child)::after {
  content: "•";
  margin-left: 5px;
  color: #B0BBB6;
}
.dashboard-timeline-meta .dashboard-schedule-internal {
  padding: 2px 5px;
  border-radius: 999px;
  color: var(--sea-green-800);
  background: #DDF2E7;
  font-weight: 750;
}
.dashboard-timeline-meta .dashboard-schedule-internal::after { display: none; }
.dashboard-today-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}
.dashboard-today-empty svg {
  width: 33px;
  height: 33px;
  margin-bottom: 10px;
  color: #8BA39A;
}
.dashboard-today-empty strong { font-size: 12px; }
.dashboard-today-empty span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 9.5px;
}
.dashboard-today-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 15px;
  border-top: 1px solid var(--border);
  background: #FBFCFB;
}
.dashboard-today-summary strong { font-size: 10px; }
.dashboard-today-summary span {
  color: var(--text-muted);
  font-size: 9px;
  text-align: right;
}

/* Room board */

.dashboard-room-board {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm);
}
.room-board-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  background: #fff;
  font-size: 8.5px;
  font-weight: 700;
}
.legend-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.legend-chip.occupied i { background: var(--status-green); }
.legend-chip.available i { background: var(--status-blue); }
.legend-chip.ending i { background: var(--status-warning); }
.legend-chip.inactive i { background: var(--status-inactive); }
.dashboard-floor-groups {
  display: grid;
  gap: 0;
  padding: 0;
}
.dashboard-floor-section {
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  gap: 0;
  padding: 0;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.dashboard-floor-section:last-child { border-bottom: 0; }
.dashboard-floor-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 15px 13px;
  background: #F8FAF9;
  border: 0;
  border-right: 1px solid var(--border);
}
.dashboard-floor-head>div {
  display: grid;
  gap: 3px;
  align-items: start;
}
.dashboard-floor-head strong {
  color: #31443B;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dashboard-floor-head span { color: var(--text-muted); font-size: 8.5px; }
.dashboard-floor-room-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  padding: 10px;
}
.dashboard-room-card {
  min-width: 0;
  min-height: 116px;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid var(--border) !important;
  border-radius: 11px;
}
.dashboard-room-card:only-child { max-width: 430px; }
.dashboard-room-card.occupied {
  background: var(--status-green-soft);
  border-color: #CBE8D8 !important;
  border-top: 1px solid #CBE8D8 !important;
}
.dashboard-room-card.available {
  background: #FBFDFF;
  border-color: #D7E7F5 !important;
  border-top: 1px solid #D7E7F5 !important;
}
.dashboard-room-card.inactive {
  background: var(--status-inactive-soft);
  border-color: #DDE3E0 !important;
  border-top: 1px solid #DDE3E0 !important;
}
.dashboard-room-card.ending-soon {
  background: var(--status-warning-soft);
  border-color: #ECD6AA !important;
  border-top: 1px solid #ECD6AA !important;
}
.dashboard-room-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.dashboard-room-name-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.dashboard-room-symbol {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  border-radius: 7px;
  color: var(--sea-green-700);
  background: #fff;
  border: 1px solid rgba(8,122,78,.11);
}
.dashboard-room-symbol svg { width: 13px; height: 13px; }
.dashboard-room-card h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-room-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}
.dashboard-room-state.occupied { color: #0E7147; background: #D4EDDF; }
.dashboard-room-state.available { color: #326EA7; background: #DFEDF9; }
.dashboard-room-state.inactive { color: #65746D; background: #E2E7E4; }
.dashboard-room-state.occupied.ending-soon { color: #94620D; background: #F6E3B8; }
.dashboard-room-main { display: grid; gap: 6px; }
.dashboard-room-current-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dashboard-room-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.dashboard-room-class, .dashboard-room-current-line>strong {
  color: #1D3128;
  font-size: 12px;
  font-weight: 800;
}
.dashboard-room-customer, .dashboard-room-current-line>span {
  color: var(--text-secondary);
  font-size: 9.5px;
  font-weight: 600;
}
.dashboard-room-time { flex: 0 0 auto; white-space: nowrap; }
.dashboard-countdown-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
}
.dashboard-countdown-label {
  color: #6C7E76;
  font-size: 7.8px;
  font-weight: 850;
  letter-spacing: .06em;
}
.dashboard-countdown {
  color: #2F4A3E;
  font-size: 10.5px !important;
  font-weight: 850;
}
.dashboard-countdown-block.warning .dashboard-countdown-label, .dashboard-countdown.warning, .dashboard-countdown-block.critical .dashboard-countdown-label, .dashboard-countdown.critical {
  color: #A66909 !important;
}
.dashboard-countdown-block.next .dashboard-countdown-label, .dashboard-countdown.next { color: #326EA7 !important; }
.dashboard-next-inline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 6px;
  padding-top: 5px;
  border-top: 1px dashed rgba(83,99,93,.18);
  font-size: 8.5px;
}
.dashboard-next-inline span { color: var(--text-muted); }
.dashboard-next-inline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #43564D;
  font-size: 8.7px;
}
.dashboard-next-inline small {
  grid-column: 2;
  color: #7F8F88;
  font-size: 8px;
}
.dashboard-next-inline.transition-next strong { color: #93630D; }
.dashboard-room-main.inactive-copy strong { font-size: 11px; }
.dashboard-room-main.inactive-copy span, .dashboard-room-main.available-copy.no-next span { font-size: 9px; color: var(--text-muted); }
.usage-badge.internal { color: var(--sea-green-800); background: #D7EFE2; }
.dashboard-mobile-actions { display: none; }

/* Responsive */

@media (max-width:1180px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .dashboard-today-schedule { max-height: 390px; }
  .dashboard-action-buttons-v16 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width:980px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(290px,86vw);
    height: 100vh;
    z-index: 80;
    transform: translateX(-105%);
    background: #fff;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    box-shadow: 12px 0 34px rgba(20,50,35,.14);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .brand-box-simple { width: auto; }
  .nav-item {
    color: #405049;
    background: transparent;
    border-color: transparent;
    font-size: 13.5px;
  }
  .nav-item.active {
    color: var(--sea-green-700) !important;
    background: #EAF7F0 !important;
    border-color: #D7EEE2 !important;
  }
  .app-page-header, .topbar, .dashboard-mode .app-page-header { padding: 0 16px; }
  .content-area { padding: 18px; }
}

@media (max-width:780px) {
  .app-page-header, .topbar, .dashboard-mode .app-page-header {
    min-height: 58px;
    height: 58px;
    padding: 0 11px;
  }
  .app-page-title { font-size: 16px !important; }
  .dashboard-mode #pageTitle { display: none; }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .date-chip {
    margin-left: auto;
    height: 36px;
    font-size: 10px;
  }
  .user-chip.user-chip-profile {
    min-width: 0;
    min-height: 36px;
    padding: 2px 5px;
    border: 0;
    background: transparent;
  }
  .user-chip-profile .avatar-small {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  .user-chip-profile .user-chip-copy { display: none !important; }
  .content-area { padding: 12px 10px 24px; }
  .dashboard-v16-shell { gap: 11px; }
  .dashboard-kpi-grid { gap: 8px; }
  .dashboard-kpi-card {
    min-height: 91px;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
  }
  .dashboard-kpi-icon {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
    border-radius: 10px;
  }
  .dashboard-kpi-icon svg { width: 18px; height: 18px; }
  .dashboard-kpi-copy { column-gap: 6px; }
  .dashboard-kpi-copy strong { font-size: 25px; }
  .dashboard-kpi-copy>span { font-size: 10.5px; }
  .dashboard-kpi-copy small { margin-top: 5px; font-size: 8px; }
  .dashboard-quick-section { padding: 12px; border-radius: 12px; }
  .dashboard-section-heading.compact { margin-bottom: 8px; }
  .dashboard-action-buttons-v16 { gap: 7px; }
  .dashboard-action-btn {
    min-height: 58px;
    padding: 8px 9px;
    gap: 8px;
  }
  .dashboard-action-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .dashboard-action-btn strong { font-size: 10.5px; }
  .dashboard-action-btn small { font-size: 8px; }
  .dashboard-panel-head, .room-board-head.dashboard-room-board-head {
    align-items: flex-start;
    min-height: 58px;
    padding: 11px 12px;
  }
  .dashboard-panel-icon {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }
  .dashboard-panel-title h3 { font-size: 13px; }
  .dashboard-panel-title span { font-size: 8.5px; }
  .room-board-head.dashboard-room-board-head { flex-direction: column; }
  .room-board-legend { justify-content: flex-start; }
  .dashboard-floor-section { grid-template-columns: 82px minmax(0,1fr); }
  .dashboard-floor-head { padding: 12px 9px; }
  .dashboard-floor-head strong { font-size: 9px; }
  .dashboard-floor-head span { font-size: 7.5px; }
  .dashboard-floor-room-grid {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px;
  }
  .dashboard-room-card:only-child { max-width: none; }
  .dashboard-room-card { min-height: 103px; padding: 10px; }
  .dashboard-room-card h4 { font-size: 13px; }
  .dashboard-today-schedule { padding: 8px 10px 4px; }
  .dashboard-timeline-item { grid-template-columns: 45px 14px minmax(0,1fr); gap: 5px; }
  .dashboard-timeline-card { padding: 9px; }
  .dashboard-timeline-card-head>strong { font-size: 11px; }
  .dashboard-today-summary { padding: 10px 12px; }
}

@media (max-width:520px) {
  .date-chip span { max-width: 120px; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-kpi-card {
    min-height: 86px;
    display: grid;
    grid-template-columns: 32px minmax(0,1fr);
    gap: 8px;
    padding: 10px;
  }
  .dashboard-kpi-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .dashboard-kpi-icon svg { width: 16px; height: 16px; }
  .dashboard-kpi-copy { display: grid; grid-template-columns: 1fr; }
  .dashboard-kpi-copy strong { font-size: 22px; }
  .dashboard-kpi-copy>span { font-size: 9.5px; }
  .dashboard-kpi-copy small {
    grid-column: auto;
    font-size: 7.4px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dashboard-action-buttons-v16 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-action-btn { min-width: 0; }
  .dashboard-action-btn small { display: none; }
  .dashboard-floor-section { grid-template-columns: 1fr; }
  .dashboard-floor-head {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
  }
  .dashboard-floor-head>div {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dashboard-timeline-meta { font-size: 8.5px; }
  .dashboard-today-summary { align-items: flex-start; flex-direction: column; }
  .dashboard-today-summary span { text-align: left; }
  .legend-chip { font-size: 7.6px; padding: 0 6px; }
  .dashboard-mobile-actions { display: none; }
}

@media (prefers-reduced-motion:reduce) {
  .dashboard-action-btn, .nav-item, .btn { transition: none; }
}

.booking-list-v11-toolbar .booking-list-search, .booking-filter-control, .booking-v11-filter-toggle {
  border-color: var(--border-strong);
  box-shadow: none;
}
.booking-filter-control:hover, .booking-list-v11-toolbar .booking-list-search:hover, .booking-v11-filter-toggle:hover {
  border-color: #BFDACB;
  box-shadow: 0 0 0 3px rgba(11,143,89,.06);
}
.booking-filter-icon {
  color: var(--sea-green-700);
  background: var(--sea-green-50);
  border-color: #D5EADF;
}
.booking-filter-icon svg { stroke: var(--sea-green-700); }
.booking-v11-filter-toggle {
  color: var(--sea-green-800);
  background: #fff;
  border-color: var(--border-strong);
}
.booking-v11-filter-toggle[aria-expanded="true"] {
  color: #fff;
  background: var(--sea-green-700);
  border-color: var(--sea-green-700);
}
.booking-filter-count {
  color: #fff;
  background: var(--sea-green-700);
  box-shadow: none;
}
.booking-type-option.active, .booking-type-option[data-booking-type="fixed"].active {
  color: var(--sea-green-900);
  background: var(--sea-green-50);
  border-color: #CBE5D7;
  box-shadow: 0 0 0 3px rgba(11,143,89,.06);
}
.booking-type-icon, .booking-type-icon.purple { color: var(--sea-green-700); }
.booking-step-label>span { background: var(--sea-green-700); }
.finance-search-control svg, .finance-filter-control svg { stroke: var(--sea-green-700); }
.finance-filter-dot { background: var(--sea-green-600); }
.finance-filter-dot.status { background: var(--status-warning); }
.finance-reset-btn:hover { color: var(--sea-green-800); background: var(--sea-green-50); }
.finance-settings-btn { color: var(--sea-green-800); }
.booking-time svg, .forecast-group summary>strong, .invoice-total-bar strong { color: var(--sea-green-700); }
.booking-type-badge.single { color: var(--sea-green-800); background: var(--sea-green-50); }
.form-field label span { color: #A66D0E; }

/* Desktop dashboard header */

.dashboard-top-welcome { display: none; min-width: 0; }
.dashboard-mode .topbar { justify-content: space-between !important; }
.dashboard-mode .topbar-left {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}
.dashboard-mode .dashboard-top-welcome {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.dashboard-top-welcome strong {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.015em;
  white-space: nowrap;
}
.dashboard-top-welcome strong span { color: var(--sea-green-700); }
.dashboard-top-welcome small {
  font-size: 9.5px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-mode #pageTitle { display: none !important; }

/* KPI and quick actions share the same first dashboard row */

.dashboard-v16-shell {
  grid-template-columns: minmax(0,1fr) 226px;
  gap: 12px 14px;
  align-items: start;
}
.dashboard-kpi-grid {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  gap: 10px;
}
.dashboard-kpi-card { min-height: 96px; padding: 14px 16px; }
.dashboard-kpi-icon {
  width: 41px;
  height: 41px;
  flex-basis: 41px;
}
.dashboard-kpi-copy strong { font-size: 29px; }
.dashboard-quick-section {
  grid-column: 2;
  grid-row: 1;
  padding: 8px;
  background: #fff;
  border-radius: 13px;
}
.dashboard-quick-section .dashboard-section-heading.compact { display: none; }
.dashboard-action-buttons-v16 { grid-template-columns: 1fr; gap: 6px; }
.dashboard-action-btn {
  min-height: 40px;
  padding: 6px 9px;
  gap: 8px;
  border-radius: 9px;
}
.dashboard-action-icon {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border-radius: 7px;
}
.dashboard-action-icon svg { width: 14px; height: 14px; }
.dashboard-action-btn strong { font-size: 10.5px; }
.dashboard-action-btn small {
  margin-top: 0;
  font-size: 7.7px;
  line-height: 1.2;
}
.dashboard-main-grid {
  grid-column: 1/-1;
  grid-row: 2;
  gap: 14px;
}

/* Mobile operations summary is intentionally hidden on larger screens. */

.dashboard-mobile-priority { display: none; }

@media (max-width:1180px) and (min-width:781px) {
  .dashboard-v16-shell { grid-template-columns: minmax(0,1fr) 210px; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-kpi-card { min-height: 86px; }
  .dashboard-main-grid { grid-template-columns: 1fr; }
}

@media (max-width:980px) {
  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(292px,86vw) !important;
    height: 100dvh !important;
    padding: 16px 13px 14px !important;
    transform: translateX(-105%) !important;
    z-index: 90 !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 0 !important;
    box-shadow: 12px 0 34px rgba(20,50,35,.16) !important;
    transition: transform .2s ease !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .sidebar .brand-box-simple.brand-lockup {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 6px 7px 14px !important;
  }
  .sidebar .sidebar-nav {
    display: grid !important;
    gap: 3px !important;
    overflow: visible !important;
    padding: 2px 1px 8px !important;
    scrollbar-width: auto !important;
  }
  .sidebar .nav-label { display: block !important; }
  .sidebar .nav-item {
    display: grid !important;
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    grid-template-columns: 22px minmax(0,1fr) auto !important;
    flex: none !important;
    padding: 0 10px !important;
    white-space: normal !important;
    color: #405049 !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .sidebar .nav-item.active {
    color: var(--sea-green-700) !important;
    background: #EAF7F0 !important;
    border-color: #D7EEE2 !important;
  }
  .sidebar .sidebar-footer { display: grid !important; }
  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 85 !important;
    background: rgba(15,35,27,.42) !important;
    backdrop-filter: blur(2px) !important;
  }
  .sidebar-backdrop.hidden { display: none !important; }
}

@media (max-width:780px) {
  /* Compact mobile top bar: menu + date + avatar. */

  .dashboard-mode .app-page-header, .dashboard-mode .topbar {
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 9px !important;
  }
  .dashboard-mode .topbar-left { display: none !important; }
  .dashboard-mode .topbar-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0,1fr) 36px !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .dashboard-mode .mobile-menu-btn {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    order: initial !important;
  }
  .dashboard-mode .date-chip {
    display: flex !important;
    justify-self: center !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
    border-color: transparent !important;
    background: var(--sea-green-50) !important;
  }
  .dashboard-mode .date-chip span {
    max-width: 180px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-mode .user-chip.user-chip-profile {
    justify-self: end !important;
    order: initial !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .dashboard-mode .user-chip-profile .avatar-small {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }
  .dashboard-mode .user-chip-profile .user-chip-copy { display: none !important; }

  /* Operations-first content order. */

  .dashboard-mode .content-area { padding: 8px 8px 28px !important; }
  .dashboard-v16-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
  }
  .dashboard-mobile-priority {
    display: block;
    order: 1;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .dashboard-main-grid { display: contents !important; }
  .dashboard-today-panel { order: 2; }
  .dashboard-kpi-grid { order: 3; }
  .dashboard-room-board { order: 4; }
  .dashboard-quick-section { order: 5; }
  .dashboard-mobile-actions { order: 6; }

  /* Immediate class operations block */

  .dashboard-mobile-priority-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px 9px;
    border-bottom: 1px solid var(--border);
    background: #FBFDFC;
  }
  .dashboard-mobile-priority-head>div {
    display: grid;
    gap: 1px;
    min-width: 0;
  }
  .dashboard-mobile-priority-kicker {
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: .105em;
    color: var(--sea-green-700);
  }
  .dashboard-mobile-priority-head strong {
    font-size: 13px;
    font-weight: 850;
    color: var(--text-primary);
  }
  .dashboard-mobile-now-time {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--sea-green-900);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
  }
  .dashboard-mobile-priority-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .dashboard-mobile-priority-group { min-width: 0; padding: 9px; }
  .dashboard-mobile-priority-group+ .dashboard-mobile-priority-group { border-left: 1px solid var(--border); }
  .dashboard-mobile-priority-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
  }
  .dashboard-mobile-priority-label span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-green);
  }
  .dashboard-mobile-priority-group.upcoming .dashboard-mobile-priority-label span { background: var(--status-blue); }
  .dashboard-mobile-priority-label strong {
    font-size: 8.5px;
    font-weight: 850;
    color: #40534A;
  }
  .dashboard-mobile-priority-list { display: grid; gap: 6px; }
  .dashboard-mobile-live-card {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
  }
  .dashboard-mobile-live-card.ongoing { background: var(--status-green-soft); border-color: #CBE8D8; }
  .dashboard-mobile-live-card.ending { background: var(--status-warning-soft); border-color: #ECD6AA; }
  .dashboard-mobile-live-card.upcoming { background: var(--status-blue-soft); border-color: #D2E5F6; }
  .dashboard-mobile-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
  }
  .dashboard-mobile-live-head>strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 900;
    color: #20362C;
  }
  .dashboard-mobile-live-badge {
    flex: 0 0 auto;
    padding: 3px 5px;
    border-radius: 999px;
    font-size: 6.8px;
    font-weight: 900;
    white-space: nowrap;
  }
  .dashboard-mobile-live-badge.ongoing { color: #0D7047; background: #D4EDDF; }
  .dashboard-mobile-live-badge.ending { color: #93610C; background: #F3DFAF; }
  .dashboard-mobile-live-badge.upcoming { color: #316EA8; background: #DCEBFA; }
  .dashboard-mobile-live-class {
    display: grid;
    gap: 1px;
    margin-top: 5px;
    min-width: 0;
  }
  .dashboard-mobile-live-class b {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-mobile-live-class small {
    font-size: 7.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-mobile-live-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-top: 6px;
  }
  .dashboard-mobile-live-foot>span {
    font-size: 7.6px;
    font-weight: 750;
    color: #52665D;
    white-space: nowrap;
  }
  .dashboard-mobile-live-foot .dashboard-countdown-block {
    margin: 0;
    padding: 2px 4px;
    gap: 3px;
    border-radius: 6px;
  }
  .dashboard-mobile-live-foot .dashboard-countdown-label { font-size: 5.8px; }
  .dashboard-mobile-live-foot .dashboard-countdown { font-size: 7px !important; }
  .dashboard-mobile-transition {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed rgba(126,101,36,.22);
    font-size: 6.8px;
    color: #86651F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dashboard-mobile-transition strong { font-size: 7px; color: #6F571D; }
  .dashboard-mobile-priority-empty {
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 7px;
    text-align: center;
    border: 1px dashed var(--border-strong);
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 7.8px;
    background: #FAFCFB;
  }
  .dashboard-mobile-more-note {
    padding: 2px 2px 0;
    color: var(--text-muted);
    font-size: 6.7px;
    line-height: 1.3;
  }

  /* Full day schedule directly follows the priority block. */

  .dashboard-today-panel { border-radius: 13px; }
  .dashboard-today-panel .dashboard-panel-head { min-height: 49px; padding: 8px 10px; }
  .dashboard-today-panel .dashboard-panel-icon {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }
  .dashboard-today-panel .dashboard-panel-title h3 { font-size: 12px; }
  .dashboard-today-panel .dashboard-text-link { font-size: 8px; }
  .dashboard-today-schedule { padding: 6px 8px 3px; max-height: none; }
  .dashboard-timeline-item { grid-template-columns: 41px 11px minmax(0,1fr); gap: 4px; }
  .dashboard-timeline-card { padding: 7px 8px; }
  .dashboard-timeline-time strong { font-size: 9px; }
  .dashboard-timeline-time span { font-size: 7px; }
  .dashboard-timeline-card-head>strong { font-size: 10px; }
  .dashboard-schedule-status { font-size: 6.6px; padding: 3px 5px; }
  .dashboard-timeline-meta { font-size: 7.8px; }
  .dashboard-today-summary { padding: 8px 10px; }

  /* KPI becomes a compact status strip after the schedule. */

  .dashboard-kpi-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 5px !important; }
  .dashboard-kpi-card {
    min-height: 58px !important;
    padding: 7px 5px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    border-radius: 10px !important;
  }
  .dashboard-kpi-icon { display: none !important; }
  .dashboard-kpi-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  .dashboard-kpi-copy strong { font-size: 19px !important; line-height: 1 !important; }
  .dashboard-kpi-copy>span {
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  .dashboard-kpi-copy small { display: none !important; }

  /* Room information remains rich but compact after the schedule. */

  .room-board-head.dashboard-room-board-head {
    min-height: 48px !important;
    padding: 8px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .room-board-head .room-board-legend { display: none !important; }
  .dashboard-floor-section { grid-template-columns: 1fr !important; }
  .dashboard-floor-head {
    padding: 7px 9px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .dashboard-floor-head>div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
  }
  .dashboard-floor-room-grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 6px !important;
  }
  .dashboard-room-card {
    min-height: 78px !important;
    padding: 8px 9px !important;
    border-radius: 9px !important;
  }
  .dashboard-room-card-head { margin-bottom: 5px !important; }
  .dashboard-room-symbol {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }
  .dashboard-room-card h4 { font-size: 12px !important; }
  .dashboard-room-state { min-height: 20px !important; font-size: 7px !important; }
  .dashboard-room-main { gap: 4px !important; }
  .dashboard-room-class, .dashboard-room-current-line>strong { font-size: 10px !important; }
  .dashboard-room-customer, .dashboard-room-current-line>span { font-size: 7.8px !important; }
  .dashboard-next-inline { padding-top: 4px !important; font-size: 7.2px !important; }

  /* Quick actions are deliberately last on mobile. */

  .dashboard-quick-section { padding: 9px !important; border-radius: 11px !important; }
  .dashboard-action-buttons-v16 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
  .dashboard-action-btn { min-height: 44px !important; padding: 6px 8px !important; }
  .dashboard-action-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
  .dashboard-action-btn strong { font-size: 9.5px !important; }
  .dashboard-action-btn small { display: none !important; }
}

@media (max-width:430px) {
  .dashboard-mobile-priority-columns { grid-template-columns: 1fr; }
  .dashboard-mobile-priority-group+ .dashboard-mobile-priority-group { border-left: 0; border-top: 1px solid var(--border); }
  .dashboard-mobile-priority-group { padding: 8px; }
  .dashboard-mobile-priority-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .dashboard-mobile-priority-empty, .dashboard-mobile-more-note { grid-column: 1/-1; }
  .dashboard-kpi-copy>span { font-size: 7px !important; }
}

@media (max-width:350px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .dashboard-mobile-priority-list { grid-template-columns: 1fr; }
}

.dashboard-desktop-header { display: none; }

@media (min-width:981px) {
  .dashboard-mode .topbar { display: none !important; }
  .dashboard-mode .content-area { padding-top: 12px !important; }
  .dashboard-v16-shell {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 226px !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
    align-items: start !important;
  }
  .dashboard-desktop-header {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 62px;
    height: 100%;
    align-self: stretch;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    box-shadow: var(--shadow-sm);
  }
  .dashboard-desktop-header .dashboard-top-welcome {
    display: grid !important;
    gap: 2px;
    min-width: 0;
  }
  .dashboard-desktop-header .dashboard-top-welcome strong { font-size: 16px; line-height: 1.15; }
  .dashboard-desktop-header .dashboard-top-welcome small { max-width: 620px; font-size: 9px; }
  .dashboard-desktop-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    flex: 0 0 auto;
  }
  .dashboard-desktop-user { display: none !important; }
  .dashboard-desktop-date, .dashboard-desktop-user {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FBFDFC;
    color: var(--text-secondary);
  }
  .dashboard-desktop-date svg {
    width: 16px;
    height: 16px;
    color: var(--sea-green-700);
  }
  .dashboard-desktop-date span {
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
  }
  .dashboard-desktop-user { padding: 5px 8px 5px 5px; }
  .dashboard-desktop-avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    border-radius: 8px;
    background: var(--sea-green-800);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
  }
  .dashboard-desktop-user-copy {
    display: grid;
    gap: 0;
    min-width: 0;
  }
  .dashboard-desktop-user-copy strong {
    font-size: 9.5px;
    line-height: 1.15;
    color: var(--text-primary);
    font-weight: 800;
  }
  .dashboard-desktop-user-copy small {
    font-size: 7.5px;
    line-height: 1.15;
    color: var(--sea-green-700);
    font-weight: 750;
    white-space: nowrap;
  }

  /* Left row 2: KPI. */

  .dashboard-kpi-grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 10px !important;
    align-self: stretch !important;
  }
  .dashboard-kpi-card { min-height: 94px !important; padding: 12px 14px !important; }
  .dashboard-kpi-icon {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important;
  }
  .dashboard-kpi-copy strong { font-size: 28px !important; }
  .dashboard-kpi-copy small { margin-top: 5px !important; }

  /* Independent action rail spans exactly the welcome + KPI stack. */

  .dashboard-quick-section {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
    min-height: 0 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 13px !important;
    box-shadow: var(--shadow-sm) !important;
  }
  .dashboard-quick-section .dashboard-section-heading.compact { display: none !important; }
  .dashboard-action-buttons-v16 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(4,minmax(0,1fr)) !important;
    gap: 6px !important;
    height: 100% !important;
    flex: 1 1 auto !important;
  }
  .dashboard-action-btn {
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    border-radius: 9px !important;
  }
  .dashboard-action-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
  .dashboard-action-btn strong { font-size: 10px !important; }
  .dashboard-action-btn small { font-size: 7px !important; line-height: 1.1 !important; }

  /* Main information starts immediately after the two top rows and regains the full content width once the action rail ends. */

  .dashboard-main-grid {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-columns: minmax(320px,.72fr) minmax(650px,1.6fr) !important;
    gap: 12px !important;
    align-items: start !important;
    margin: 0 !important;
  }
  .dashboard-today-panel, .dashboard-room-board { min-width: 0; }
}

@media (min-width:781px) and (max-width:980px) {
  .dashboard-desktop-header { display: none !important; }
  .dashboard-v16-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .dashboard-kpi-grid {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .dashboard-quick-section { grid-column: 1 !important; grid-row: auto !important; }
  .dashboard-action-buttons-v16 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .dashboard-main-grid {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
  }
}

@media (min-width:781px) and (max-width:980px) {
  .dashboard-mode #pageTitle { display: block !important; }
  .dashboard-mode .topbar-left { display: flex !important; }
}

/* Quick actions are equal-weight choices; none looks permanently active. */

.dashboard-action-btn, .dashboard-action-btn.primary {
  color: var(--text-primary) !important;
  background: #fff !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
}
.dashboard-action-btn:hover, .dashboard-action-btn.primary:hover {
  color: var(--sea-green-800) !important;
  background: var(--sea-green-50) !important;
  border-color: #BFDCCD !important;
  box-shadow: 0 4px 12px rgba(8,99,67,.06) !important;
}
.dashboard-action-btn .dashboard-action-icon, .dashboard-action-btn.primary .dashboard-action-icon {
  color: var(--sea-green-700) !important;
  background: var(--sea-green-50) !important;
}
.dashboard-action-btn strong, .dashboard-action-btn.primary strong { color: var(--text-primary) !important; }
.dashboard-action-btn small, .dashboard-action-btn.primary small { color: var(--text-muted) !important; }

/* User management page */

.users-admin-shell {
  display: grid;
  gap: 14px;
  max-width: 1500px;
  margin: 0 auto;
}
.users-admin-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.users-admin-commandbar .page-subtitle {
  font-weight: 800;
  color: var(--text-primary);
  font-size: 15px;
}
.users-admin-note {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}
.users-admin-command-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.users-admin-command-actions .btn { min-height: 40px; }
.users-admin-command-actions .btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.users-admin-summary {
  display: grid;
  grid-template-columns: 160px 140px 180px minmax(260px,1fr);
  gap: 10px;
  align-items: stretch;
}
.users-admin-summary>article, .users-admin-search {
  min-height: 72px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
}
.users-admin-summary>article {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.users-admin-summary>article span {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 750;
}
.users-admin-summary>article strong {
  font-size: 24px;
  line-height: 1;
  color: var(--text-primary);
  font-weight: 850;
}
.users-admin-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
}
.users-admin-search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--sea-green-700);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.users-admin-search input {
  width: 100%;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: 42px;
}
.users-admin-search input:focus { outline: none !important; }
.users-admin-list { display: grid; gap: 10px; }
.user-account-card {
  display: grid;
  grid-template-columns: minmax(280px,1.25fr) minmax(250px,.9fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.user-account-card.inactive { background: #FBFCFC; opacity: .8; }
.user-account-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.user-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  background: var(--sea-green-800);
  color: #fff;
  font-weight: 850;
  font-size: 15px;
}
.user-account-card.inactive .user-account-avatar { background: var(--status-inactive); }
.user-account-identity>div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.user-account-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.user-account-name-row strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-account-email {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-account-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}
.user-role-badge, .user-status-badge, .user-self-badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
.user-role-badge.admin { color: var(--sea-green-800); background: var(--sea-green-100); }
.user-role-badge.employee { color: #3F668F; background: var(--status-blue-soft); }
.user-status-badge.active { color: var(--status-green); background: var(--status-green-soft); }
.user-status-badge.locked { color: var(--status-inactive); background: var(--status-inactive-soft); }
.user-self-badge {
  color: #735A12;
  background: var(--status-warning-soft);
  flex: 0 0 auto;
}
.user-account-meta {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.user-account-meta span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-soft);
}
.user-account-meta small {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 700;
}
.user-account-meta strong {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-secondary);
}
.user-account-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 430px;
}
.user-account-actions .btn {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 10px;
  white-space: nowrap;
}
.user-account-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-danger-outline {
  color: var(--danger) !important;
  background: #fff !important;
  border: 1px solid #F0C4BF !important;
  box-shadow: none !important;
}
.btn-danger-outline:hover { background: var(--danger-soft) !important; border-color: #E6A29A !important; }
.user-account-loading {
  padding: 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 12px;
}
.user-account-loading.error { color: var(--danger); background: var(--danger-soft); }
.user-account-modal-card { max-width: 620px; }
.user-account-create-help {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sea-green-50);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
  border: 1px solid #D9EEE3;
}
.user-account-form-message {
  min-height: 20px;
  margin-top: 6px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width:1100px) {
  .users-admin-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .users-admin-search { grid-column: 1 / -1; min-height: 52px; }
  .user-account-card { grid-template-columns: 1fr 1fr; }
  .user-account-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }
}

@media (max-width:780px) {
  .users-admin-commandbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 13px;
  }
  .users-admin-command-actions { width: 100%; }
  .users-admin-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .users-admin-summary>article { min-height: 62px; padding: 9px 10px; }
  .users-admin-summary>article span { font-size: 8px; }
  .users-admin-summary>article strong { font-size: 20px; }
  .user-account-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  .user-account-meta { grid-template-columns: 1fr 1fr; }
  .user-account-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .user-account-actions .btn:last-child { grid-column: 1 / -1; }
  .user-account-actions .btn { white-space: normal; line-height: 1.25; }
}

@media (max-width:480px) {
  .users-admin-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .users-admin-summary>article span { min-height: 20px; }
  .user-account-meta { grid-template-columns: 1fr; }
  .user-account-actions { grid-template-columns: 1fr; }
  .user-account-actions .btn:last-child { grid-column: auto; }
}

:root {
  --sea-primary: #0B8F59;
  --sea-primary-dark: #087A4E;
  --sea-primary-deep: #075C41;
  --sea-primary-soft: #EAF8F1;
  --sea-primary-soft-2: #F4FBF7;
  --sea-blue: #3978D4;
  --sea-blue-soft: #EEF5FF;
  --sea-purple: #7558D6;
  --sea-purple-soft: #F1EEFF;
  --sea-amber: #D79614;
  --sea-amber-soft: #FFF5DA;
  --sea-danger: #D92D20;
  --sea-danger-soft: #FFF1F0;
  --sea-neutral-950: #132019;
  --sea-neutral-800: #27362F;
  --sea-neutral-650: #52645B;
  --sea-neutral-500: #77877F;
  --sea-neutral-350: #B7C2BC;
  --sea-line: #DFE8E3;
  --sea-line-strong: #CFDDD5;
  --sea-page: #F5F8F6;
  --sea-card: #FFFFFF;
  --sea-card-soft: #F8FBF9;
  --sea-shadow: 0 6px 22px rgba(19,50,36,.055);
  --sea-shadow-hover: 0 10px 28px rgba(19,50,36,.08);
  --sidebar: 220px;
  --radius-card: 12px;
  --radius-control: 9px;
  --app-bg: var(--sea-page);
  --surface: var(--sea-card);
  --surface-soft: var(--sea-card-soft);
  --text-primary: var(--sea-neutral-950);
  --text-secondary: var(--sea-neutral-650);
  --text-muted: var(--sea-neutral-500);
  --border: var(--sea-line);
  --border-strong: var(--sea-line-strong);
  --sea-green-900: #064E3B;
  --sea-green-800: var(--sea-primary-deep);
  --sea-green-700: var(--sea-primary-dark);
  --sea-green-600: var(--sea-primary);
  --sea-green-500: #18A86B;
  --sea-green-100: #DFF4E8;
  --sea-green-50: var(--sea-primary-soft);
  --status-blue: var(--sea-blue);
  --status-blue-soft: var(--sea-blue-soft);
  --status-green: var(--sea-primary);
  --status-green-soft: var(--sea-primary-soft);
  --status-warning: var(--sea-amber);
  --status-warning-soft: var(--sea-amber-soft);
  --status-inactive: #7D8B84;
  --status-inactive-soft: #F0F3F1;
  --danger: var(--sea-danger);
  --danger-soft: var(--sea-danger-soft);
}
html, body { background: var(--sea-page); color: var(--sea-neutral-950); }
body, button, input, select, textarea {
  font-family: Inter,"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}
body { font-size: 13px; letter-spacing: -.008em; }
button, input, select, textarea { font-size: 13px; }
h1, h2, h3, h4, strong { letter-spacing: -.018em; }

/* ---- Global app shell ---- */

.app-shell { grid-template-columns: var(--sidebar) minmax(0,1fr); background: var(--sea-page); }
.main-area { min-width: 0; background: var(--sea-page); }
.content-area { padding: 16px 18px 26px; background: var(--sea-page); }
.content-area>.page { width: min(100%,1760px); margin-inline: auto; }

/* ---- Sidebar: compact, calm, consistent ---- */

.sidebar {
  width: var(--sidebar);
  padding: 10px 10px 12px;
  background: #fff;
  border-right: 1px solid var(--sea-line);
  box-shadow: none;
}
.brand-box {
  min-height: 64px;
  padding: 7px 7px 12px;
  margin: 0 0 8px;
  border-bottom: 1px solid #EDF2EF;
}
.brand-logo-main { max-width: 78px; max-height: 42px; }
.brand-identity strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--sea-neutral-950);
}
.brand-identity span {
  font-size: 8.5px;
  letter-spacing: .075em;
  color: var(--sea-neutral-650);
}
.sidebar-nav { gap: 3px; }
.nav-label {
  margin: 10px 8px 4px;
  font-size: 8.5px;
  letter-spacing: .14em;
  color: #8A9991;
  font-weight: 800;
}
.nav-label-spaced { margin-top: 14px; }
.nav-item {
  min-height: 42px;
  padding: 0 10px;
  gap: 10px;
  border-radius: 9px;
  color: #3A4A42;
  font-size: 12.5px;
  font-weight: 650;
  background: transparent;
  box-shadow: none;
}
.nav-item svg {
  width: 18px;
  height: 18px;
  color: #64776D;
  stroke-width: 1.75;
}
.nav-item:hover { background: #F4F9F6; color: var(--sea-primary-dark); }
.nav-item.active {
  color: var(--sea-primary-dark) !important;
  background: #EAF8F1 !important;
  box-shadow: inset 3px 0 0 var(--sea-primary) !important;
}
.nav-item.active svg { color: var(--sea-primary-dark); }
.nav-badge {
  min-width: 28px;
  height: 22px;
  padding: 0 7px;
  border: 0;
  background: #DDF4E7;
  color: var(--sea-primary-deep);
  font-size: 9px;
  font-weight: 800;
}
.secure-dot {
  width: 7px;
  height: 7px;
  background: var(--sea-primary);
  box-shadow: 0 0 0 3px #E6F7EE;
}
.sidebar-footer {
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid #EDF2EF;
}
.sidebar-brand-note {
  padding: 9px;
  border-radius: 10px;
  background: #F0FAF5;
  border: 1px solid #D9EDE3;
}
.sidebar-brand-note-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: #fff;
  color: var(--sea-primary);
}
.sidebar-brand-note strong { font-size: 10.5px; }
.sidebar-brand-note small { font-size: 8.5px; color: #72847B; }
.sidebar-user-card {
  padding: 7px 8px;
  min-height: 48px;
  border-radius: 9px;
}
.sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg,#0A8154,#076342);
}
.sidebar-user-copy strong { font-size: 11.5px; }
.sidebar-user-copy span { font-size: 9px; color: #7A8982; }
.logout-btn {
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid #F0C7C3;
  background: #fff;
  color: var(--sea-danger);
  font-size: 11px;
  font-weight: 750;
}
.logout-btn:hover { background: var(--sea-danger-soft); }

/* ---- Top bar ---- */

.app-page-header {
  min-height: 60px;
  padding: 0 18px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--sea-line);
  box-shadow: none;
  backdrop-filter: saturate(140%) blur(8px);
}
.app-page-title {
  font-size: 17px;
  font-weight: 780;
  color: var(--sea-neutral-950);
}
.topbar-actions { gap: 8px; }
.date-chip, .user-chip {
  min-height: 38px;
  border: 1px solid var(--sea-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.date-chip {
  padding: 0 11px;
  color: #42564C;
  font-size: 11px;
  font-weight: 650;
}
.date-chip svg {
  width: 16px;
  height: 16px;
  color: var(--sea-primary);
}
.user-chip { padding: 4px 9px 4px 5px; }
.avatar-small {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--sea-primary-deep);
}
.user-chip-copy strong { font-size: 10.5px; }
.user-chip-copy span, .top-user-role { font-size: 8.5px; }
.page-quick-stats { gap: 5px; }
.page-stat-pill {
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid var(--sea-line);
  background: #fff;
  box-shadow: none;
}

/* ---- Unified surfaces / controls across every page ---- */

.page-toolbar, .filter-bar, .rooms-overview-strip, .users-admin-commandbar, .users-admin-summary, .finance-v12-commandbar, .finance-summary-strip, .booking-board-card, .booking-list-v11-head, .booking-list-v11-toolbar, .finance-table-card, .room-library-card, .customer-card, .approval-request-card, .approval-policy-note, .users-admin-list {
  border-color: var(--sea-line) !important;
  box-shadow: var(--sea-shadow);
}
.page-toolbar, .filter-bar, .rooms-overview-strip, .users-admin-commandbar, .finance-v12-commandbar, .booking-list-v11-head, .booking-list-v11-toolbar, .finance-summary-strip {
  border-radius: var(--radius-card);
  background: #fff;
}
.page-subtitle {
  color: var(--sea-neutral-650);
  font-size: 12px;
  line-height: 1.5;
}
.panel-kicker, .eyebrow {
  color: var(--sea-primary-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.btn {
  min-height: 40px;
  border-radius: 9px;
  font-weight: 700;
  box-shadow: none;
}
.btn-primary {
  background: var(--sea-primary-dark) !important;
  color: #fff !important;
  border-color: var(--sea-primary-dark) !important;
}
.btn-primary:hover {
  background: var(--sea-primary-deep) !important;
  border-color: var(--sea-primary-deep) !important;
  transform: none;
}
.btn-secondary {
  background: #fff !important;
  color: #405349 !important;
  border: 1px solid var(--sea-line-strong) !important;
}
.btn-secondary:hover {
  background: #F5FAF7 !important;
  border-color: #BFD7CA !important;
  color: var(--sea-primary-deep) !important;
}
.btn-danger { background: var(--sea-danger) !important; color: #fff !important; }
.icon-btn { border-radius: 8px; color: #607168; }
.icon-btn:hover { background: #F1F7F4; color: var(--sea-primary-dark); }
input, select, textarea, .select-control {
  border-color: var(--sea-line-strong) !important;
  border-radius: 9px !important;
  color: var(--sea-neutral-950) !important;
  background: #fff !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus, .select-control:focus {
  border-color: #62B68C !important;
  box-shadow: 0 0 0 3px rgba(11,143,89,.085) !important;
}
.search-box {
  border-color: var(--sea-line-strong);
  border-radius: 9px;
  background: #fff;
}
.search-box svg { color: var(--sea-primary); }
.empty-state {
  border-color: var(--sea-line) !important;
  background: #fff !important;
  border-radius: 12px !important;
}
.empty-icon { background: var(--sea-primary-soft) !important; color: var(--sea-primary-dark) !important; }
.modal-card {
  border-radius: 14px !important;
  border: 1px solid var(--sea-line) !important;
  box-shadow: 0 24px 80px rgba(15,35,25,.17) !important;
}
.modal-head { border-bottom-color: #EAF0ED !important; }
.modal-actions { border-top-color: #EAF0ED !important; }
.form-field label {
  color: #405148;
  font-size: 11.5px;
  font-weight: 700;
}
.form-field label span { color: var(--sea-danger); }
.dashboard-v16-shell { gap: 10px; }
.dashboard-desktop-header, .dashboard-kpi-card, .dashboard-panel-card, .dashboard-quick-section {
  border-color: var(--sea-line) !important;
  box-shadow: var(--sea-shadow) !important;
}
.dashboard-kpi-card { border-radius: 11px; background: #fff; }
.dashboard-kpi-card:hover { box-shadow: var(--sea-shadow-hover) !important; transform: none; }
.dashboard-action-btn {
  border-color: var(--sea-line-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--sea-neutral-950) !important;
}
.dashboard-action-btn:hover { background: var(--sea-primary-soft-2) !important; border-color: #BFDCCB !important; }
.dashboard-action-icon { color: var(--sea-primary-dark); background: var(--sea-primary-soft); }
.dashboard-room-card { border-color: var(--sea-line) !important; box-shadow: none !important; }
.bookings-mode .page-quick-stats { display: none !important; }
.bookings-mode .app-page-title { font-size: 15px; color: #607168; }
.booking-v16-page { display: grid; gap: 10px; }
.booking-v16-page-head {
  display: grid;
  grid-template-columns: minmax(220px,.72fr) minmax(620px,2fr);
  align-items: stretch;
  gap: 12px;
}
.booking-v16-title-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
  padding: 13px 16px;
  border: 1px solid var(--sea-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sea-shadow);
}
.booking-v16-eyebrow {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--sea-primary-dark);
}
.booking-v16-title-block h2 {
  margin: 3px 0 2px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 790;
  text-transform: none;
  color: #12231A;
}
.booking-v16-title-block p {
  margin: 0;
  color: #718078;
  font-size: 10.5px;
  line-height: 1.4;
}
.booking-v16-kpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.booking-v16-kpi {
  min-width: 0;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid var(--sea-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sea-shadow);
}
.booking-v16-kpi-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 10px;
}
.booking-v16-kpi-icon svg { width: 17px; height: 17px; }
.booking-v16-kpi.sessions .booking-v16-kpi-icon { color: #356FD0; background: #EDF4FF; }
.booking-v16-kpi.active .booking-v16-kpi-icon { color: var(--sea-primary-dark); background: var(--sea-primary-soft); }
.booking-v16-kpi.available .booking-v16-kpi-icon { color: #456BCB; background: #F0F3FF; }
.booking-v16-kpi.utilization .booking-v16-kpi-icon { color: #7558D6; background: #F3F0FF; }
.booking-v16-kpi>div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
}
.booking-v16-kpi strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  color: #101E17;
}
.booking-v16-kpi span:not(.booking-v16-kpi-icon) {
  font-size: 10.5px;
  font-weight: 700;
  color: #32463B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-v16-kpi small {
  grid-column: 1/-1;
  font-size: 8.5px;
  color: #87968E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-v16-workspace {
  display: grid;
  grid-template-columns: minmax(0,1fr) 292px;
  gap: 10px;
  align-items: start;
}
.booking-v16-main {
  min-width: 0;
  display: grid;
  gap: 9px;
}
.booking-v11-commandbar {
  min-height: 52px;
  margin: 0;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: minmax(285px,1fr) minmax(180px,220px) auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--sea-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: var(--sea-shadow) !important;
}
.booking-v11-date-nav { justify-self: start; min-width: 0; }
.booking-v11-date-nav .booking-nav-arrow, .booking-v11-date-nav .booking-today-btn, .booking-v11-date-nav input {
  min-height: 36px !important;
  border-color: var(--sea-line) !important;
  background: #fff !important;
  border-radius: 8px !important;
  color: #42554B !important;
}
.booking-v11-date-nav .booking-nav-arrow:hover, .booking-v11-date-nav .booking-today-btn:hover, .booking-v11-date-nav input:hover {
  border-color: #BFD7CA !important;
  background: #F7FBF9 !important;
}
.booking-v11-view-switch {
  justify-self: end;
  padding: 3px;
  border: 1px solid var(--sea-line);
  border-radius: 9px;
  background: #F4F7F5 !important;
}
.booking-v11-view-switch .booking-view-btn {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 7px;
  color: #52645B;
  font-size: 10.5px;
  font-weight: 700;
  background: transparent !important;
}
.booking-v11-view-switch .booking-view-btn.active {
  color: #fff !important;
  background: var(--sea-primary-dark) !important;
  border-color: transparent !important;
}
.booking-v11-add-btn {
  min-height: 38px;
  padding-inline: 13px;
  white-space: nowrap;
}
.booking-v11-add-btn svg { width: 15px; height: 15px; }
.booking-v16-customer-filter {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--sea-line);
  border-radius: 9px;
  background: #fff;
  color: #52645B;
}
.booking-v16-customer-filter-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  border-radius: 8px;
  background: var(--sea-primary-soft);
  color: var(--sea-primary-dark);
}
.booking-v16-customer-filter-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.booking-v16-customer-filter-copy {
  min-width: 0;
  display: grid;
  gap: 0;
}
.booking-v16-customer-filter-copy small {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .07em;
  color: #89968F;
}
.booking-v16-customer-filter-copy select {
  width: 100%;
  min-width: 0;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 20px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 750;
  color: #24372D !important;
  cursor: pointer;
  text-overflow: ellipsis;
}
.booking-v16-customer-filter-copy select:focus { box-shadow: none !important; }
.booking-v16-customer-filter-mobile { display: none; }
.booking-timeline-block.filtered-other {
  cursor: not-allowed;
  background: #F0F3F2 !important;
  border-color: #DDE5E1 !important;
  color: #84928B !important;
  opacity: .82;
  box-shadow: none !important;
}
.booking-timeline-block.filtered-other strong { color: #6F7D76 !important; }
.booking-timeline-block.filtered-other span { color: #8C9992 !important; }
.booking-week-filtered-busy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 25px;
  padding: 3px 5px;
  border: 1px dashed #D5DFDA;
  border-radius: 6px;
  background: #F5F7F6;
  color: #7A8981;
  font-size: 8px;
  font-weight: 700;
}
.booking-week-filtered-busy b {
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E5EBE8;
  color: #5D6D65;
  font-size: 8px;
}

/* Mobile customer filter bottom sheet. */

.booking-v16-filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
}
.booking-v16-filter-sheet:not(.hidden) { display: block; }
.booking-v16-filter-sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(18,31,24,.42);
}
.booking-v16-filter-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(72vh,620px);
  display: flex;
  flex-direction: column;
  padding: 8px 12px 14px;
  border-radius: 18px 18px 0 0;
  background: #fff;
  box-shadow: 0 -18px 60px rgba(20,45,30,.18);
}
.booking-v16-filter-sheet-handle {
  width: 44px;
  height: 4px;
  margin: 1px auto 8px;
  border-radius: 999px;
  background: #D8E2DD;
}
.booking-v16-filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 2px 10px;
}
.booking-v16-filter-sheet-head>div { display: grid; gap: 1px; }
.booking-v16-filter-sheet-head small {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--sea-primary-dark);
}
.booking-v16-filter-sheet-head h3 { margin: 0; font-size: 17px; }
.booking-v16-filter-sheet-search {
  flex: 0 0 auto;
  margin-bottom: 8px;
  min-height: 42px;
}
.booking-v16-filter-sheet-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 5px;
  padding-bottom: max(4px,env(safe-area-inset-bottom));
}
.booking-v16-filter-customer-option {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sea-line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  color: #24372D;
}
.booking-v16-filter-customer-option>span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.booking-v16-filter-customer-option strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-v16-filter-customer-option small {
  font-size: 9px;
  color: #7B8A82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-v16-filter-customer-option i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  color: var(--sea-primary-dark);
}
.booking-v16-filter-customer-option.selected { border-color: #B9DCC8; background: #F2FAF6; }
.booking-v16-filter-customer-option.selected i { background: #DDF3E7; }
body.booking-filter-sheet-open { overflow: hidden; }
.booking-work-view { min-width: 0; }
.booking-board-card {
  overflow: hidden;
  border: 1px solid var(--sea-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: var(--sea-shadow) !important;
}
.booking-board-head {
  min-height: 66px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--sea-line);
  background: #fff;
}
.booking-board-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 780;
  color: #17251E;
}
.booking-board-head p {
  margin: 3px 0 0;
  font-size: 9.5px;
  color: #7A8A82;
}
.booking-status-legend { gap: 5px; }
.booking-status-legend span {
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 9px !important;
  background: #fff !important;
  border: 1px solid var(--sea-line) !important;
  color: #586A61 !important;
}
.booking-status-legend i { width: 6px; height: 6px; }

/* Week grid: clean, compact, status-led color logic. */

.booking-week-board { overflow: auto; background: #fff; }
.booking-week-grid { min-width: 930px; background: #fff; }
.booking-week-corner, .booking-week-day-head {
  background: #F7FAF8 !important;
  border-color: var(--sea-line) !important;
  color: #53645B !important;
}
.booking-week-corner { font-size: 9.5px; font-weight: 800; }
.booking-week-day-head { padding: 8px 5px; min-height: 48px; }
.booking-week-day-head strong { font-size: 9.5px; font-weight: 800; }
.booking-week-day-head span { font-size: 9px; color: #728078; }
.booking-week-day-head.today { background: #F0FAF5 !important; box-shadow: inset 0 -2px 0 var(--sea-primary); }
.booking-week-room-label {
  min-height: 96px;
  align-items: flex-start !important;
  gap: 8px !important;
  background: #fff !important;
  border-color: var(--sea-line) !important;
}
.booking-week-room-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 8px;
  background: #F0F7F3;
  color: var(--sea-primary-dark);
}
.booking-week-room-icon svg { width: 14px; height: 14px; }
.booking-week-room-label>div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.booking-week-room-label strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-week-room-label span:not(.booking-week-room-icon) { font-size: 9px !important; color: #687970 !important; }
.booking-week-room-label small { font-size: 8px; color: #96A29C; }
.booking-week-day-cell {
  min-height: 96px;
  padding: 5px !important;
  gap: 4px !important;
  border-color: var(--sea-line) !important;
  background: #fff !important;
}
.week-booking-chip {
  min-height: 38px !important;
  padding: 5px 6px !important;
  border-radius: 7px !important;
  border-width: 1px !important;
  box-shadow: none !important;
  text-align: left;
}
.week-booking-chip strong { font-size: 8.5px !important; line-height: 1.15; }
.week-booking-chip span {
  font-weight: 700 !important;
  line-height: 1.15;
  margin-top: 1px;
}
.week-booking-chip small {
  line-height: 1.15;
  margin-top: 1px;
  opacity: .76;
}
.week-booking-chip.upcoming, .booking-timeline-block.upcoming {
  background: var(--sea-blue-soft) !important;
  color: #285FAD !important;
  border-color: #CFE0F7 !important;
}
.week-booking-chip.ongoing, .booking-timeline-block.ongoing {
  background: var(--sea-primary-soft) !important;
  color: #087348 !important;
  border-color: #C7E7D6 !important;
}
.week-booking-chip.ending-soon, .booking-timeline-block.ending-soon {
  background: var(--sea-amber-soft) !important;
  color: #98660B !important;
  border-color: #F0D69B !important;
}
.week-booking-chip.completed, .booking-timeline-block.completed {
  background: #F1F4F2 !important;
  color: #718079 !important;
  border-color: #DFE5E2 !important;
}
.week-booking-chip.internal { box-shadow: inset 3px 0 0 #6D58CE !important; }
.booking-week-empty-action {
  min-height: 74px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  color: #93A099;
  border: 1px dashed #D9E3DE;
  border-radius: 7px;
  background: #FBFCFB;
  pointer-events: none;
}
.booking-week-empty-action b {
  font-size: 18px;
  line-height: 1;
  color: #66857A;
  font-weight: 500;
}
.booking-week-empty-action span { font-size: 9px; font-weight: 700; }
.booking-week-empty-action small { font-size: 8px; }
.week-more { font-size: 8px !important; color: #697A71 !important; }

/* Day timeline */

.booking-day-board { background: #fff; }
.booking-day-time-head { background: #F7FAF8 !important; border-color: var(--sea-line) !important; }
.booking-day-room-row { border-color: var(--sea-line) !important; }
.booking-day-room-label { background: #fff !important; border-color: var(--sea-line) !important; }
.booking-day-room-label strong { font-size: 10.5px !important; }
.booking-day-room-label span { font-size: 8.5px !important; color: #74847B !important; }
.booking-room-timeline { background: #FCFDFC !important; }
.booking-grid-line { background: #E9EFEC !important; }
.booking-hour-mark { font-size: 8px !important; color: #84928B !important; }
.booking-timeline-block { border-radius: 7px !important; box-shadow: none !important; }
.booking-timeline-block strong { font-size: 9px !important; }
.booking-timeline-block span { font-size: 8px !important; }

/* Right insight rail */

.booking-v16-rail {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.booking-v16-rail-card {
  border: 1px solid var(--sea-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sea-shadow);
  overflow: hidden;
}
.booking-v16-rail-head {
  min-height: 38px;
  padding: 10px 11px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.booking-v16-rail-head strong {
  font-size: 10.5px;
  font-weight: 780;
  color: #26382F;
}
.booking-v16-rail-head span { font-size: 8px; color: #89968F; }
.booking-v16-usage-card { padding-bottom: 8px; }
.booking-v16-usage-bars {
  height: 94px;
  padding: 5px 10px 0;
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 5px;
  align-items: end;
  border-top: 1px solid #F0F3F1;
  background: linear-gradient(to bottom,transparent 32%,#F1F4F2 33%,transparent 34%,transparent 65%,#F1F4F2 66%,transparent 67%);
}
.booking-v16-usage-bar {
  height: 82px;
  display: grid;
  grid-template-rows: 1fr 14px;
  align-items: end;
  gap: 2px;
  text-align: center;
}
.booking-v16-usage-bar>span {
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.booking-v16-usage-bar i {
  display: block;
  width: 13px;
  min-height: 2px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg,#2ABC78,#0B8F59);
}
.booking-v16-usage-bar.today i { background: linear-gradient(180deg,#22A96E,#087A4E); }
.booking-v16-usage-bar small { font-size: 7.5px; color: #849189; }
.booking-v16-find-room {
  min-height: 58px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 32px 1fr 18px;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  background: linear-gradient(135deg,#11945E,#087A4E);
  color: #fff;
  box-shadow: 0 7px 18px rgba(8,122,78,.16);
  text-align: left;
}
.booking-v16-find-room:hover { background: linear-gradient(135deg,#0B8756,#076A45); }
.booking-v16-find-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
}
.booking-v16-find-icon svg { width: 17px; height: 17px; }
.booking-v16-find-arrow { width: 15px; height: 15px; }
.booking-v16-find-room>span:nth-child(2) { display: grid; gap: 1px; }
.booking-v16-find-room strong { color: #fff; font-size: 11px; }
.booking-v16-find-room small { font-size: 7.8px; color: rgba(255,255,255,.77); }
.booking-v16-status-overview {
  padding: 3px 11px 10px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 9px;
  align-items: center;
}
.booking-v16-donut {
  --booking-use: 0%;
  width: 82px;
  height: 82px;
  margin: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--sea-primary) var(--booking-use),#E7ECE9 0);
  position: relative;
}
.booking-v16-donut::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff;
}
.booking-v16-donut>span {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  gap: 1px;
}
.booking-v16-donut strong { font-size: 15px; }
.booking-v16-donut small { font-size: 7px; color: #77877F; }
.booking-v16-status-lines { display: grid; gap: 8px; }
.booking-v16-status-lines>div {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 8.5px;
  color: #607168;
}
.booking-v16-status-lines i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.booking-v16-status-lines i.busy { background: var(--sea-primary); }
.booking-v16-status-lines i.free { background: var(--sea-blue); }
.booking-v16-status-lines i.total { background: #7A8B83; }
.booking-v16-status-lines strong { font-size: 9px; }
.booking-v16-available-head {
  padding: 8px 11px 6px;
  border-top: 1px solid #EDF2EF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.booking-v16-available-head strong { font-size: 9.5px; }
.booking-v16-available-head button {
  padding: 0;
  background: transparent;
  color: var(--sea-primary-dark);
  font-size: 8px;
  font-weight: 700;
}
.booking-v16-available-list {
  display: grid;
  padding: 0 8px 8px;
  gap: 3px;
}
.booking-v16-available-row {
  min-height: 30px;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-radius: 7px;
  background: #F8FBF9;
}
.booking-v16-room-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #EEF6F2;
  color: var(--sea-primary-dark);
}
.booking-v16-room-dot svg { width: 12px; height: 12px; }
.booking-v16-available-row strong {
  font-size: 8.7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking-v16-available-row small { font-size: 7.6px; color: #7B8B83; }
.booking-v16-available-row em {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #E8F7EF;
  color: #087348;
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
}
.booking-v16-available-row em i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0B8F59;
}
.booking-v16-no-room {
  padding: 9px;
  color: #7E8C85;
  font-size: 8.5px;
  text-align: center;
}
.booking-v16-today-card>p {
  margin: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid #EDF2EF;
  color: #84928B;
  font-size: 7.8px;
  text-align: center;
}
.booking-v16-today-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px;
  padding: 0 8px 9px;
}
.booking-v16-today-grid>div {
  min-width: 0;
  padding: 6px 2px;
  text-align: center;
  border-radius: 7px;
  background: #F7FAF8;
}
.booking-v16-today-grid strong { display: block; font-size: 12px; }
.booking-v16-today-grid span {
  display: block;
  margin-top: 2px;
  font-size: 6.8px;
  color: #7F8E86;
  white-space: nowrap;
}

/* Mobile day agenda: intentionally separate from desktop timeline. */

.booking-v16-mobile-agenda { display: none; }

/* Booking list stays dense but uses the unified hierarchy. */

.booking-list-v11-head { padding: 8px 10px; box-shadow: var(--sea-shadow) !important; }
.booking-list-mode-switch { background: #F3F7F5 !important; border-color: var(--sea-line) !important; }
.booking-list-mode-btn.active { background: var(--sea-primary-dark) !important; color: #fff !important; }
.booking-list-v11-toolbar { padding: 8px; gap: 7px; }
.booking-list-v11-toolbar .booking-list-search, .booking-filter-control, .booking-v11-filter-toggle {
  min-height: 40px;
  border-color: var(--sea-line-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
}
.booking-filter-icon {
  background: var(--sea-primary-soft) !important;
  color: var(--sea-primary-dark) !important;
  border-color: #D5EADF !important;
}
.booking-v11-filter-toggle[aria-expanded="true"] { background: var(--sea-primary-dark) !important; color: #fff !important; }
.booking-group-card, .booking-series-row, .booking-single-row { border-color: var(--sea-line) !important; box-shadow: none !important; }
.booking-operation-badge.upcoming { background: var(--sea-blue-soft) !important; color: #2F67B3 !important; }
.booking-operation-badge.ongoing { background: var(--sea-primary-soft) !important; color: #087348 !important; }
.booking-operation-badge.completed { background: #F0F3F1 !important; color: #6E7D75 !important; }
.booking-operation-badge.cancelled { background: var(--sea-danger-soft) !important; color: #AE342B !important; }

/* ---- Rooms ---- */

.rooms-overview-strip { padding: 10px 12px !important; }
.rooms-overview-item strong { font-size: 23px !important; }
.rooms-overview-item span { font-size: 9px !important; color: #78877F !important; }
.room-library-card, .room-card {
  border-radius: 11px !important;
  border-color: var(--sea-line) !important;
  box-shadow: var(--sea-shadow) !important;
  background: #fff !important;
}
.room-library-card:hover, .room-card:hover {
  transform: none !important;
  box-shadow: var(--sea-shadow-hover) !important;
  border-color: #C9DDD2 !important;
}
.usage-badge.available { background: var(--sea-primary-soft) !important; color: #087348 !important; }

/* ---- Customers ---- */

.filter-bar { padding: 8px 10px !important; margin-bottom: 10px !important; }

/* ---- Approvals ---- */

.approval-policy-note {
  border-left-color: var(--sea-amber) !important;
  background: #FFFCF4 !important;
  color: #66756E !important;
}
.approval-request-card.pending { border-left-color: var(--sea-amber) !important; }
.approval-request-card.approved { border-left-color: var(--sea-primary) !important; }
.approval-status-badge.pending { background: var(--sea-amber-soft) !important; color: #93620F !important; }
.approval-status-badge.approved { background: var(--sea-primary-soft) !important; color: #087348 !important; }
.approval-actions { border-top-color: #EDF2EF !important; }

/* ---- Account management ---- */

.users-admin-shell { gap: 10px !important; }
.users-admin-commandbar { padding: 11px 12px !important; }
.users-admin-note { color: #7D8C84 !important; }
.users-admin-summary {
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.users-admin-summary>article, .users-admin-search {
  border: 1px solid var(--sea-line) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: var(--sea-shadow) !important;
}
.users-admin-summary>article strong { font-size: 22px !important; }
.users-admin-summary>article span { color: #7A8982 !important; }
.users-admin-list { gap: 8px !important; }

/* ---- Availability ---- */

.availability-equipment-chips span { border-color: var(--sea-line) !important; }

/* ---- Finance ---- */

.finance-v12-shell { gap: 10px !important; }
.finance-v12-commandbar { padding: 8px !important; }
.finance-v12-tabs { background: #F3F7F5 !important; border-color: var(--sea-line) !important; }
.finance-v12-tabs .finance-tab-btn.active { background: var(--sea-primary-dark) !important; color: #fff !important; }
.finance-search-control, .finance-filter-control {
  border-color: var(--sea-line-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
}
.finance-search-control svg, .finance-filter-control svg { stroke: var(--sea-primary) !important; }
.finance-summary-strip { background: #fff !important; border-radius: 11px !important; }
.finance-table-card { border-radius: 12px !important; background: #fff !important; }
.finance-table-card:hover { box-shadow: var(--sea-shadow) !important; }
.finance-table-head-v12 h3 { color: #17251E !important; }
.finance-total-inline strong { color: var(--sea-primary-deep) !important; }
.finance-debt-row { border-color: var(--sea-line) !important; }
.finance-debt-row>strong { color: #98660B !important; }
.finance-revenue-inline { color: var(--sea-primary-dark) !important; }

/* ---- Login: same product language ---- */

@media (max-width:1280px) {
  :root { --sidebar: 210px; }
  .content-area { padding: 14px; }
  .booking-v16-page-head { grid-template-columns: 230px 1fr; }
  .booking-v16-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .booking-v16-kpi { min-height: 68px; padding: 8px 10px; }
  .booking-v16-kpi strong { font-size: 20px; }
  .booking-v16-workspace { grid-template-columns: minmax(0,1fr) 260px; }
}

@media (max-width:1080px) and (min-width:781px) {
  .booking-v16-page-head { grid-template-columns: 1fr; }
  .booking-v16-title-block { min-height: 72px; }
  .booking-v16-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .booking-v16-workspace { grid-template-columns: 1fr; }
  .booking-v16-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .booking-v16-find-room { grid-column: 1/-1; }
  .booking-v16-usage-card, .booking-v16-room-status-card { min-height: 180px; }
  .booking-v16-today-card { grid-column: 1/-1; }
  .booking-v11-commandbar { grid-template-columns: minmax(0,1fr) auto; }
  .booking-v11-date-nav { grid-column: 1; grid-row: 1; }
  .booking-v11-add-btn { grid-column: 2; grid-row: 1; }
  .booking-v16-customer-filter-desktop {
    grid-column: 1;
    grid-row: 2;
    max-width: 280px;
  }
  .booking-v11-view-switch { grid-column: 2; grid-row: 2; }
}

@media (max-width:780px) {
  :root { --sidebar: 272px; }
  body { font-size: 13px; background: #F6F9F7; }
  .app-shell { display: block !important; }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 272px !important;
    z-index: 1000 !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    padding: 9px !important;
    box-shadow: 18px 0 50px rgba(16,35,25,.14) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .sidebar-nav { display: grid !important; overflow: visible !important; }
  .sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(18,31,24,.34) !important;
    z-index: 999 !important;
  }
  .sidebar-backdrop.hidden { display: none !important; }
  .main-area { width: 100% !important; margin: 0 !important; }
  .app-page-header {
    position: sticky;
    top: 0;
    z-index: 70;
    min-height: 56px;
    padding: 0 10px;
    background: rgba(255,255,255,.97);
  }
  .topbar-left { min-width: 0; }
  .app-page-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-actions { margin-left: auto; }
  .date-chip {
    min-height: 34px;
    padding: 0 8px;
    font-size: 9.5px;
  }
  .date-chip svg { width: 14px; height: 14px; }
  .user-chip { display: none !important; }
  .mobile-menu-btn {
    display: grid !important;
    width: 36px;
    height: 36px;
    border: 1px solid var(--sea-line);
    border-radius: 9px;
    background: #fff;
    color: var(--sea-primary-dark);
  }
  .content-area { padding: 9px 9px 82px; }
  .content-area>.page { width: 100%; max-width: none; }
  .page-toolbar {
    padding: 9px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .page-toolbar .btn { min-height: 38px; }
  .dashboard-mobile-priority { border-color: var(--sea-line) !important; box-shadow: var(--sea-shadow) !important; }

  /* Booking mobile: title + controls + agenda first. */

  .bookings-mode .app-page-title { font-size: 14px; color: var(--sea-neutral-950); }
  .booking-v16-page { gap: 7px; }
  .booking-v16-page-head { display: block; }
  .booking-v16-title-block {
    min-height: auto;
    padding: 8px 10px;
    border-radius: 10px;
  }
  .booking-v16-eyebrow { display: none; }
  .booking-v16-title-block h2 { font-size: 17px; margin: 0; }
  .booking-v16-title-block p { display: none; }
  .booking-v16-kpis { display: none; }
  .booking-v16-workspace { display: block; }
  .booking-v16-rail { display: none; }
  .booking-v16-main { gap: 7px; }
  .booking-v11-commandbar {
    position: sticky;
    top: 62px;
    z-index: 55;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(20,50,35,.07) !important;
  }
  .booking-v11-date-nav {
    width: 100%;
    display: grid !important;
    grid-template-columns: 36px 74px minmax(0,1fr) 36px;
    gap: 4px;
  }
  .booking-v11-date-nav .booking-nav-arrow, .booking-v11-date-nav .booking-today-btn, .booking-v11-date-nav input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 35px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  .booking-v16-customer-filter-desktop { display: none !important; }
  .booking-v16-customer-filter-mobile {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr) 18px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--sea-line);
    border-radius: 9px;
    background: #fff;
    text-align: left;
    color: #25382E;
  }
  .booking-v16-customer-filter-mobile.active { border-color: #B6DCC7; background: #F2FAF6; }
  .booking-v16-customer-filter-mobile>span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  .booking-v16-customer-filter-mobile small {
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .07em;
    color: #8A9991;
  }
  .booking-v16-customer-filter-mobile strong {
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .booking-v16-filter-chevron {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #7A8981;
    stroke-width: 1.8;
  }
  .booking-v11-view-switch {
    width: 100%;
    justify-self: stretch;
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
    padding: 3px;
  }
  .booking-v11-view-switch .booking-view-btn {
    min-height: 32px;
    padding: 0 6px;
    font-size: 10px;
  }
  .booking-v11-add-btn {
    position: fixed !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 90 !important;
    width: auto !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 28px rgba(8,122,78,.25) !important;
  }
  .booking-v11-add-btn svg { width: 18px; height: 18px; }
  .booking-v16-mobile-agenda {
    display: block;
    border: 1px solid var(--sea-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--sea-shadow);
    overflow: hidden;
  }
  .booking-v16-mobile-agenda-head {
    padding: 9px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #EDF2EF;
    background: #FBFDFC;
  }
  .booking-v16-mobile-agenda-head>div { display: grid; gap: 1px; }
  .booking-v16-mobile-agenda-head span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--sea-primary-dark);
  }
  .booking-v16-mobile-agenda-head strong { font-size: 12px; }
  .booking-v16-mobile-agenda-head>small { font-size: 9px; color: #73837B; }
  .booking-v16-mobile-agenda-list { display: grid; }
  .booking-v16-mobile-agenda-item {
    min-height: 66px;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: 51px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-bottom: 1px solid #EDF2EF;
    text-align: left;
  }
  .booking-v16-mobile-agenda-item:last-child { border-bottom: 0; }
  .booking-v16-mobile-agenda-item.ongoing { background: #F3FBF7; }
  .booking-v16-mobile-agenda-item.ending-soon { background: #FFF9EA; }
  .booking-v16-mobile-agenda-item.upcoming { background: #F5F9FF; }
  .booking-v16-mobile-agenda-item.completed { background: #FAFBFA; opacity: .72; }
  .booking-v16-mobile-time { display: grid; gap: 1px; }
  .booking-v16-mobile-time strong { font-size: 13px; }
  .booking-v16-mobile-time small { font-size: 9px; color: #839088; }
  .booking-v16-mobile-agenda-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .booking-v16-mobile-agenda-copy strong {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .booking-v16-mobile-agenda-copy span {
    font-size: 9.5px;
    color: #697A71;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .booking-v16-mobile-agenda-item em {
    justify-self: end;
    max-width: 92px;
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-style: normal;
    font-weight: 750;
    text-align: center;
    background: #EFF3F1;
    color: #62736A;
  }
  .booking-v16-mobile-agenda-item.ongoing em { background: #DFF4E9; color: #087348; }
  .booking-v16-mobile-agenda-item.ending-soon em { background: #FCEAC2; color: #92620F; }
  .booking-v16-mobile-agenda-item.upcoming em { background: #E8F2FF; color: #3268B2; }
  .booking-v16-mobile-empty {
    padding: 18px;
    text-align: center;
    display: grid;
    gap: 3px;
  }
  .booking-v16-mobile-empty strong { font-size: 12px; }
  .booking-v16-mobile-empty span { font-size: 9.5px; color: #78877F; }
  #bookingDayView>.booking-board-card { display: none !important; }
  #bookingWeekView .booking-board-head, #bookingListView .booking-list-v11-summary { display: none !important; }
  #bookingWeekView .booking-board-card { border-radius: 10px !important; }
  .booking-week-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .booking-week-grid { min-width: 940px; }
  .booking-list-v11-head { padding: 6px !important; }
  .booking-list-mode-switch {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3,1fr);
  }
  .booking-list-mode-btn { min-height: 34px !important; font-size: 9px !important; }
  .booking-list-v11-toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 6px !important;
  }
  .booking-list-v11-toolbar .booking-list-search { grid-column: 1/-1 !important; }
  .booking-list-v11-toolbar .booking-v11-filter-toggle { width: 100% !important; }
  .booking-v11-advanced-filters { grid-template-columns: 1fr !important; }

  /* Mobile lists/cards across the app. */

  .rooms-overview-strip { grid-template-columns: repeat(2,1fr) !important; }
  .rooms-floor-groups { grid-template-columns: 1fr !important; }
  .users-admin-commandbar { display: grid !important; gap: 9px !important; }
  .users-admin-command-actions { justify-content: stretch; }
  .users-admin-command-actions .btn { flex: 1; }
  .users-admin-summary { grid-template-columns: repeat(2,1fr) !important; }
  .users-admin-search { grid-column: 1/-1; }
  .approval-request-top, .approval-request-meta, .approval-impact { align-items: flex-start !important; flex-direction: column !important; }
  .approval-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .approval-actions .btn { width: 100% !important; }
  .finance-v12-commandbar { display: grid !important; }
  .finance-v12-left { display: grid !important; }
  .finance-filter-bar { display: grid !important; grid-template-columns: 1fr 1fr; }
  .finance-search-control { grid-column: 1/-1; max-width: none !important; }
  .finance-v12-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .finance-v12-actions .btn:last-child { grid-column: 1/-1; }
  .finance-summary-grid, .finance-invoice-v12-grid, .finance-payments-grid { grid-template-columns: 1fr !important; }
  .modal-card, .modal-card-wide {
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 12px !important;
  }
  .modal-backdrop { padding: 8px !important; }
  .modal-head { padding: 13px !important; }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 10px 12px !important;
  }
}

@media (max-width:520px) {
  .content-area { padding-inline: 7px; }
  .date-chip span {
    max-width: 102px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .users-admin-summary { grid-template-columns: 1fr 1fr !important; }
  .finance-filter-bar { grid-template-columns: 1fr !important; }
  .finance-search-control { grid-column: auto; }
  .dashboard-mobile-priority-columns { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width:780px) {
  #bookingDayView>.booking-board-card { display: block !important; margin-top: 7px; }
  #bookingDayView .booking-board-head p { display: none; }
  #bookingDayView .booking-day-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #bookingDayView .booking-day-time-head, #bookingDayView .booking-day-scroll-body { min-width: 880px; }
}

.booking-week-day-cell.filtered-no-match { background: #FBFCFB !important; }
.booking-week-day-cell.filtered-no-match::after { content: none !important; }

/* Stronger, faster-to-scan time hierarchy in Day and Week views. */

.booking-hour-mark {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #52645B !important;
  letter-spacing: -.01em;
}
.booking-timeline-block strong { line-height: 1.18 !important; color: inherit; }
.booking-timeline-block span {
  font-weight: 620 !important;
  line-height: 1.18 !important;
  opacity: .94;
}
.week-booking-chip strong {
  font-size: 9.2px !important;
  font-weight: 820 !important;
  line-height: 1.16 !important;
  letter-spacing: -.01em;
}
.week-booking-chip span {
  font-size: 8.8px !important;
  font-weight: 720 !important;
  line-height: 1.16 !important;
}
.week-booking-chip small {
  font-size: 7.9px !important;
  font-weight: 560 !important;
  line-height: 1.15 !important;
  opacity: .82;
}
.booking-day-room-label strong { font-weight: 760 !important; }
.booking-day-room-label span { color: #65776E !important; }

/* Donut labels now display hourly capacity values, so allow slightly more width. */

.booking-v16-status-lines>div { grid-template-columns: 7px minmax(0,1fr) auto !important; }
.booking-v16-status-lines strong { font-size: 9px !important; font-variant-numeric: tabular-nums; }
.booking-v16-donut strong { font-variant-numeric: tabular-nums; }

@media (max-width: 779px) {
  .booking-hour-mark { font-size: 9px !important; }
  .booking-timeline-block strong { font-size: 9.5px !important; }
  .booking-timeline-block span { font-size: 8.5px !important; }
  .week-booking-chip strong { font-size: 9px !important; }
}

.customers-mode .app-page-title { display: none !important; }
.customer-v162-page {
  --customer-green: #0A8A55;
  --customer-green-dark: #087348;
  --customer-green-soft: #EAF8F1;
  --customer-line: #DDE7E1;
  --customer-text: #17261F;
  --customer-muted: #718078;
}
.customer-v162-shell {
  display: grid;
  gap: 12px;
  max-width: 1700px;
  margin: 0 auto;
}
.customer-v162-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px;
}
.customer-v162-pagehead h2 {
  margin: 5px 0 2px;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 780;
  letter-spacing: -.03em;
  color: #16261F;
}
.customer-v162-pagehead p {
  margin: 0;
  font-size: 11.5px;
  color: #6D7E75;
}
.customer-v162-head-actions { display: flex; gap: 8px; }
.customer-v162-head-actions .btn { min-height: 40px; padding-inline: 16px; }
.customer-v162-tabs {
  display: inline-flex;
  width: max-content;
  padding: 3px;
  border: 1px solid var(--customer-line);
  border-radius: 10px;
  background: #F5F8F6;
}
.customer-v162-tab {
  min-height: 33px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #607068;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.customer-v162-tab.active {
  background: #fff;
  color: var(--customer-green-dark);
  box-shadow: 0 1px 4px rgba(16,50,34,.08);
}
.customer-v162-directory, .customer-v162-organizations { display: grid; gap: 12px; }
.customer-v162-kpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.customer-v162-kpi {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--customer-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(20,50,35,.035);
}
.customer-v162-kpi-icon {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.customer-v162-kpi-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.customer-v162-kpi-icon.green { background: #E7F7EF; color: #07824E; }
.customer-v162-kpi-icon.mint { background: #EAF8F2; color: #17845A; }
.customer-v162-kpi-icon.blue { background: #EAF5FF; color: #3679D4; }
.customer-v162-kpi-icon.coral { background: #FFF0EF; color: #E24B43; }
.customer-v162-kpi>div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 7px;
  align-items: baseline;
}
.customer-v162-kpi strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  color: #101E18;
  font-variant-numeric: tabular-nums;
}
.customer-v162-kpi span {
  font-size: 11px;
  font-weight: 700;
  color: #35463E;
}
.customer-v162-kpi small {
  grid-column: 1/-1;
  margin-top: 2px;
  font-size: 8.5px;
  color: #84918B;
}
.customer-v162-filter-card {
  border: 1px solid #BFE5D1;
  border-radius: 11px;
  background: linear-gradient(115deg,#F2FBF6 0%,#FBFEFC 62%,#F3FBF6 100%);
  overflow: hidden;
}
.customer-v162-filter-collapse {
  border: 0;
  background: transparent;
  color: var(--customer-green-dark);
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}
.customer-v162-filter-body {
  grid-template-columns: minmax(210px,1.05fr) 24px minmax(350px,1.35fr) minmax(280px,1fr);
  gap: 9px 12px;
  padding: 5px 14px 14px;
}
.customer-v162-filter-body.collapsed { display: none; }
.customer-v162-filter-field, .customer-v162-member-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.customer-v162-filter-field>span, .customer-v162-member-field>span {
  font-size: 9px;
  font-weight: 720;
  color: #43564C;
}
.customer-v162-filter-field select, .customer-v162-filter-field input, .customer-v162-list-tools select, .customer-v162-list-footer select, .customer-v162-org-summary input {
  height: 35px;
  border: 1px solid #D2E0D8;
  border-radius: 7px;
  background: #fff;
  padding: 0 10px;
  font: 500 10px/1 Inter,system-ui,sans-serif;
  color: #34483E;
  outline: 0;
}
.customer-v162-filter-field select:focus, .customer-v162-filter-field input:focus, .customer-v162-list-tools select:focus, .customer-v162-org-summary input:focus {
  border-color: #75BE98;
  box-shadow: 0 0 0 3px rgba(11,143,89,.08);
}
.customer-v162-member-chips {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid #D2E0D8;
  border-radius: 7px;
  background: #fff;
  scrollbar-width: thin;
}
.customer-v162-member-chips em {
  padding: 0 6px;
  font-size: 9px;
  font-style: normal;
  color: #8A9891;
  white-space: nowrap;
}
.customer-v162-member-chip {
  flex: 0 0 auto;
  min-height: 25px;
  border: 1px solid #DDE7E2;
  border-radius: 999px;
  background: #F8FBF9;
  color: #506159;
  font-size: 9px;
  font-weight: 650;
  cursor: pointer;
}
.customer-v162-member-chip.active {
  border-color: #0B8F59;
  background: #0B8F59;
  color: #fff;
}
.customer-v162-keyword { grid-column: 4; }
.customer-v162-search-input { position: relative; }
.customer-v162-search-input svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #839189;
  stroke-width: 1.7;
}
.customer-v162-search-input input { width: 100%; padding-left: 30px; }
.customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(3) { grid-column: 1; }
.customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(4) { grid-column: 2/4; max-width: 190px; }
.customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(5) { grid-column: 3/4; max-width: 190px; }
.customer-v162-filter-actions {
  grid-column: 4;
  display: flex;
  justify-content: flex-end;
}
.customer-v162-filter-actions .btn {
  min-height: 35px;
  padding: 0 17px;
  font-size: 9.5px;
}
.customer-v162-workspace {
  display: grid;
  grid-template-columns: minmax(0,1.72fr) minmax(340px,.78fr);
  gap: 12px;
  align-items: stretch;
}
.customer-v162-list-panel, .customer-v162-detail-panel {
  border: 1px solid var(--customer-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(20,50,35,.035);
  min-width: 0;
}
.customer-v162-list-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.customer-v162-list-headbar {
  min-height: 44px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #E8EFEB;
}
.customer-v162-list-headbar>div:first-child {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.customer-v162-list-headbar strong { font-size: 11.5px; color: #1C2C24; }
.customer-v162-list-headbar span { font-size: 9px; color: #7A8981; }
.customer-v162-list-tools {
  display: flex;
  align-items: center;
  gap: 7px;
}
.customer-v162-list-tools select { height: 31px; }
.customer-v162-table, .customer-v162-org-table { display: block; min-width: 0; }
.customer-v162-table-head, .customer-v162-row {
  display: grid;
  grid-template-columns: minmax(165px,1.25fr) minmax(125px,1fr) minmax(130px,1fr) 76px 92px 78px 36px;
  align-items: center;
}
.customer-v162-table-head {
  min-height: 31px;
  padding: 0 11px;
  background: #FAFCFB;
  border-bottom: 1px solid #E8EFEB;
  color: #718078;
  text-transform: uppercase;
  font-size: 7.5px;
  font-weight: 760;
  letter-spacing: .04em;
}
.customer-v162-row {
  position: relative;
  min-height: 57px;
  padding: 6px 11px;
  border-bottom: 1px solid #EAF0ED;
  cursor: pointer;
  transition: .15s ease;
}
.customer-v162-row:last-child { border-bottom: 0; }
.customer-v162-row:hover { background: #F7FBF9; }
.customer-v162-row.selected { background: #EAF8F1; }
.customer-v162-row.selected::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #0B8F59;
}
.customer-v162-row.archived { opacity: .63; background: #FAFBFA; }
.customer-v162-person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.customer-v162-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #DFF5E9;
  color: #087A4E;
  font-size: 12px;
  font-weight: 800;
}
.customer-v162-person>div, .customer-v162-contact {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.customer-v162-person strong, .customer-v162-contact strong {
  font-size: 9.6px;
  color: #24352D;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-v162-person small, .customer-v162-contact small {
  font-size: 7.8px;
  color: #718078;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-v162-org span { font-size: 8.6px; color: #46584F; }
.customer-v162-class-count span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 23px;
  padding: 0 7px;
  border-radius: 999px;
  background: #F1FAF5;
  border: 1px solid #CEE8D9;
  color: #16774F;
  font-size: 8.4px;
  font-weight: 700;
}
.customer-v162-status span, .customer-v162-detail-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
}
.customer-v162-status .teaching, .customer-v162-status .active, .customer-v162-detail-status.active { background: #DFF5E9; color: #0D7A4B; }
.customer-v162-status .archived, .customer-v162-detail-status.archived { background: #FFF2D7; color: #9A6813; }
.customer-v162-updated { font-size: 8.3px; color: #596B62; }
.customer-v162-row-menu { position: relative; justify-self: end; }
.customer-v162-row-menu summary {
  list-style: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #65776E;
  cursor: pointer;
}
.customer-v162-row-menu summary::-webkit-details-marker { display: none; }
.customer-v162-row-menu[open] summary { background: #EFF6F2; color: #087A4E; }
.customer-v162-row-menu>div {
  position: absolute;
  z-index: 40;
  right: 0;
  top: 31px;
  width: 145px;
  padding: 5px;
  border: 1px solid #DDE7E2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23,54,38,.14);
  display: grid;
}
.customer-v162-row-menu button {
  border: 0;
  background: transparent;
  padding: 8px 9px;
  text-align: left;
  border-radius: 5px;
  font-size: 9px;
  color: #36483F;
  cursor: pointer;
}
.customer-v162-row-menu button:hover { background: #F2F8F5; }
.customer-v162-row-menu button.danger { color: #C83A31; }
.customer-v162-row-menu button.danger:hover { background: #FFF2F1; }
.customer-v162-list-footer {
  min-height: 48px;
  margin-top: auto;
  padding: 7px 12px;
  border-top: 1px solid #E8EFEB;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.customer-v162-list-footer>span {
  font-size: 8.5px;
  color: #7B8982;
  text-align: center;
}
.customer-v162-list-footer>label {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
  color: #65756D;
}
.customer-v162-list-footer select { height: 30px; }
.customer-v162-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.customer-v162-pagination button {
  width: 29px;
  height: 29px;
  border: 1px solid #DDE7E2;
  border-radius: 6px;
  background: #fff;
  color: #56675E;
  font-size: 9px;
  cursor: pointer;
}
.customer-v162-pagination button.active {
  background: #0B8F59;
  border-color: #0B8F59;
  color: #fff;
}
.customer-v162-pagination button:disabled { opacity: .4; cursor: default; }
.customer-v162-pagination span { padding: 0 2px; color: #89958F; }
.customer-v162-detail-panel {
  position: relative;
  overflow: hidden;
  min-height: 430px;
}
.customer-v162-detail-empty {
  height: 100%;
  min-height: 300px;
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
  color: #74847B;
}
.customer-v162-detail-empty strong { font-size: 12px; color: #42554A; }
.customer-v162-detail-empty span { font-size: 9px; }
.customer-v162-detail-head {
  min-height: 92px;
  padding: 14px 16px 10px;
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
}
.customer-v162-detail-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #DFF5E9;
  color: #087A4E;
  font-size: 22px;
  font-weight: 800;
}
.customer-v162-detail-avatar.organization { font-size: 18px; }
.customer-v162-detail-head>div:nth-child(2) { min-width: 0; }
.customer-v162-profile-badge {
  display: inline-flex;
  margin-bottom: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #EEF3FB;
  color: #5C6E87;
  font-size: 7.5px;
  font-weight: 650;
}
.customer-v162-detail-head h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.1;
  color: #182820;
}
.customer-v162-detail-head p {
  margin: 2px 0 0;
  font-size: 8.5px;
  color: #6E7F76;
}
.customer-v162-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.customer-v162-detail-actions .btn {
  min-height: 31px;
  padding: 0 10px;
  font-size: 8.5px;
}
.customer-v162-detail-actions details { position: relative; }
.customer-v162-detail-actions summary {
  list-style: none;
  min-height: 31px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border: 1px solid #D7E2DC;
  border-radius: 7px;
  font-size: 8.5px;
  font-weight: 650;
  cursor: pointer;
}
.customer-v162-detail-actions summary::-webkit-details-marker { display: none; }
.customer-v162-detail-actions details>div {
  position: absolute;
  right: 0;
  top: 35px;
  z-index: 35;
  width: 140px;
  padding: 5px;
  border: 1px solid #DDE7E2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23,54,38,.14);
  display: grid;
}
.customer-v162-detail-actions details button {
  border: 0;
  background: transparent;
  padding: 8px;
  text-align: left;
  border-radius: 5px;
  font-size: 8.5px;
  cursor: pointer;
}
.customer-v162-detail-actions details button:hover { background: #F3F8F5; }
.customer-v162-detail-actions details button.danger { color: #C83A31; }
.customer-v162-detail-tabs {
  display: flex;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid #E5ECE8;
  overflow-x: auto;
}
.customer-v162-detail-tabs button {
  position: relative;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #66776E;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.customer-v162-detail-tabs button.active { color: #087A4E; }
.customer-v162-detail-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #0B8F59;
}
.customer-v162-detail-body { padding: 10px 16px 16px; }
.customer-v162-detail-section { padding: 9px 0; border-bottom: 1px solid #EEF2F0; }
.customer-v162-detail-section:last-child { border-bottom: 0; }
.customer-v162-detail-section h4 {
  margin: 0 0 9px;
  font-size: 10px;
  color: #263830;
}
.customer-v162-detail-section dl {
  margin: 0;
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 7px 10px;
}
.customer-v162-detail-section dt { font-size: 8.5px; color: #76857D; }
.customer-v162-detail-section dd {
  margin: 0;
  font-size: 8.8px;
  font-weight: 560;
  color: #32453B;
  min-width: 0;
  overflow-wrap: anywhere;
}
.customer-v162-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.customer-v162-detail-section-head button {
  border: 0;
  background: transparent;
  color: #087A4E;
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
}
.customer-v162-detail-classes, .customer-v162-detail-bookings { display: grid; gap: 6px; }
.customer-v162-detail-classes>div, .customer-v162-detail-bookings>div {
  padding: 8px 9px;
  border: 1px solid #E3EBE7;
  border-radius: 7px;
  background: #FAFCFB;
  display: grid;
  gap: 2px;
}
.customer-v162-detail-classes>div.archived { opacity: .58; }
.customer-v162-detail-classes strong, .customer-v162-detail-bookings strong { font-size: 9px; }
.customer-v162-detail-classes span, .customer-v162-detail-bookings span { font-size: 8px; color: #6E7F76; }
.customer-v162-note {
  margin: 0;
  white-space: pre-wrap;
  font-size: 9px;
  line-height: 1.55;
  color: #4F6258;
}
.customer-v162-detail-mobile-close { display: none; }
.customer-organization-picker-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
}
.customer-organization-picker-row .action-btn { min-height: 42px; white-space: nowrap; }
.organization-modal-card { max-width: 620px; }

/* Organizations tab */

.customer-v162-org-summary {
  display: grid;
  grid-template-columns: 160px 160px 190px minmax(260px,1fr);
  gap: 10px;
}
.customer-v162-org-summary>div, .customer-v162-org-summary>label {
  min-height: 58px;
  padding: 10px 13px;
  border: 1px solid var(--customer-line);
  border-radius: 10px;
  background: #fff;
}
.customer-v162-org-summary>div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 7px;
}
.customer-v162-org-summary strong { font-size: 20px; color: #16261F; }
.customer-v162-org-summary span { font-size: 9px; color: #66766E; }
.customer-v162-org-summary label {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.customer-v162-org-summary label svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #788980;
  stroke-width: 1.7;
}
.customer-v162-org-summary input { width: 100%; padding-left: 26px; }
.customer-v162-legacy-notice {
  padding: 9px 12px;
  border: 1px solid #F0D9A9;
  border-radius: 9px;
  background: #FFF9EA;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8.8px;
  color: #795B1A;
}
.customer-v162-legacy-notice strong { font-size: 9px; }
.customer-v162-org-head, .customer-v162-org-row {
  display: grid;
  grid-template-columns: minmax(190px,1.4fr) minmax(130px,1fr) 80px 70px 88px 36px;
  align-items: center;
}
.customer-v162-org-head {
  min-height: 31px;
  padding: 0 11px;
  background: #FAFCFB;
  border-bottom: 1px solid #E8EFEB;
  color: #718078;
  text-transform: uppercase;
  font-size: 7.5px;
  font-weight: 760;
}
.customer-v162-org-row {
  position: relative;
  min-height: 58px;
  padding: 6px 11px;
  border-bottom: 1px solid #EAF0ED;
  cursor: pointer;
}
.customer-v162-org-row:hover, .customer-v162-org-row.selected { background: #F0FAF5; }
.customer-v162-org-row.archived { opacity: .62; }
.customer-v162-org-row>div:first-child, .customer-v162-org-row>div:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.customer-v162-org-row>div:nth-child(2) { display: grid; gap: 1px; }
.customer-v162-org-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #E7F7EF;
  color: #087A4E;
}
.customer-v162-org-row strong {
  font-size: 9.5px;
  color: #283B31;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-v162-org-row small {
  font-size: 7.8px;
  color: #74847C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-v162-org-row>div:nth-child(3) span, .customer-v162-org-row>div:nth-child(4) span { font-size: 8.5px; color: #53655B; }
.customer-v162-org-members { display: grid; gap: 5px; }
.customer-v162-org-members button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #E4ECE8;
  border-radius: 7px;
  background: #FAFCFB;
  text-align: left;
  cursor: pointer;
}
.customer-v162-org-members button>span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #E6F7EE;
  color: #087A4E;
  font-weight: 800;
}
.customer-v162-org-members button>div { display: grid; gap: 1px; }
.customer-v162-org-members strong { font-size: 9px; }
.customer-v162-org-members small { font-size: 7.8px; color: #76867D; }

@media (max-width:1180px) {
  .customer-v162-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-v162-filter-body { grid-template-columns: 1fr 20px 1.2fr; }
  .customer-v162-keyword { grid-column: 1/-1; }
  .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(3) { grid-column: 1; }
  .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(4) { grid-column: 2/3; max-width: none; }
  .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(5) { grid-column: 3; max-width: none; }
  .customer-v162-filter-actions { grid-column: 1/-1; }
  .customer-v162-workspace { grid-template-columns: minmax(0,1.45fr) minmax(310px,.75fr); }
  .customer-v162-table-head, .customer-v162-row {
    grid-template-columns: minmax(150px,1.2fr) minmax(115px,1fr) minmax(110px,1fr) 68px 84px 0 34px;
  }
  .customer-v162-table-head span:nth-child(6), .customer-v162-updated { display: none; }
  .customer-v162-org-summary { grid-template-columns: repeat(3,1fr); }
  .customer-v162-org-summary label { grid-column: 1/-1; }
  .customer-v162-org-head, .customer-v162-org-row { grid-template-columns: minmax(170px,1.4fr) minmax(120px,1fr) 70px 62px 82px 34px; }
}

@media (max-width:900px) {
  .customer-v162-workspace { grid-template-columns: 1fr; }
  .customer-v162-detail-panel { min-height: 340px; }
  .customer-v162-filter-body { grid-template-columns: 1fr 1fr; }
  .customer-v162-member-field { grid-column: 2; }
  .customer-v162-keyword { grid-column: 1/-1; }
  .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(3), .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(4), .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(5) {
    grid-column: auto;
    max-width: none;
  }
  .customer-v162-filter-actions { grid-column: 1/-1; }
}

@media (max-width:780px) {
  .customers-mode .app-page-title { display: block !important; font-size: 14px; }
  .customer-v162-shell { gap: 8px; }
  .customer-v162-pagehead { align-items: center; padding: 1px 2px; }
  .customer-v162-pagehead h2 { font-size: 20px; }
  .customer-v162-pagehead p { display: none; }
  .customer-v162-head-actions .btn { min-height: 38px; padding: 0 11px; }
  .customer-v162-head-actions .btn svg { width: 15px; height: 15px; }
  .customer-v162-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .customer-v162-tab { width: 100%; }
  .customer-v162-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .customer-v162-kpi {
    min-height: 66px;
    padding: 9px 10px;
    gap: 8px;
  }
  .customer-v162-kpi-icon { width: 34px; height: 34px; }
  .customer-v162-kpi-icon svg { width: 17px; height: 17px; }
  .customer-v162-kpi strong { font-size: 18px; }
  .customer-v162-kpi span { font-size: 9px; }
  .customer-v162-kpi small { font-size: 7.5px; }
  .customer-v162-filter-card { border-radius: 9px; }
  .customer-v162-filter-body {
    grid-template-columns: 1fr;
    padding: 5px 9px 10px;
    gap: 7px;
  }
  .customer-v162-filter-org, .customer-v162-member-field, .customer-v162-keyword, .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(3), .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(4), .customer-v162-filter-body>.customer-v162-filter-field:nth-of-type(5), .customer-v162-filter-actions {
    grid-column: 1;
  }
  .customer-v162-member-field { display: none; }
  .customer-v162-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .customer-v162-filter-actions .btn { width: 100%; }
  .customer-v162-workspace { display: block; }
  .customer-v162-list-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .customer-v162-list-headbar {
    min-height: 38px;
    padding: 5px 2px;
    border: 0;
  }
  .customer-v162-list-tools select { height: 31px; max-width: 150px; }
  .customer-v162-table-head { display: none; }
  .customer-v162-table { display: grid; gap: 7px; }
  .customer-v162-row {
    min-height: 82px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 5px 8px;
    padding: 10px;
    border: 1px solid var(--customer-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--sea-shadow);
  }
  .customer-v162-row.selected { background: #fff; }
  .customer-v162-row.selected::before { display: none; }
  .customer-v162-person { grid-column: 1; }
  .customer-v162-row-menu { grid-column: 2; grid-row: 1; }
  .customer-v162-contact {
    grid-column: 1/-1;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .customer-v162-contact strong, .customer-v162-contact small { font-size: 8.5px; }
  .customer-v162-org { grid-column: 1; }
  .customer-v162-class-count {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }
  .customer-v162-status { grid-column: 1; }
  .customer-v162-updated { display: none; }
  .customer-v162-person strong { font-size: 11px; }
  .customer-v162-person small { font-size: 8px; }
  .customer-v162-avatar { width: 34px; height: 34px; }
  .customer-v162-org span { font-size: 8.5px; }
  .customer-v162-list-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    border: 0;
    padding: 9px 2px;
  }
  .customer-v162-list-footer>label { justify-self: center; }
  .customer-v162-pagination { justify-content: center; }
  .customer-v162-detail-panel {
    position: fixed;
    z-index: 115;
    inset: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
    transform: translateX(105%);
    transition: transform .22s ease;
    overflow-y: auto;
    min-height: 100vh;
  }
  .customer-v162-detail-panel.mobile-open { transform: translateX(0); }
  .customer-v162-detail-mobile-close {
    display: grid;
    position: sticky;
    top: 8px;
    margin: 8px 8px -38px auto;
    z-index: 8;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #DDE7E2;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    color: #53655C;
  }
  .customer-v162-detail-head { padding-top: 52px; grid-template-columns: 52px minmax(0,1fr); }
  .customer-v162-detail-actions { grid-column: 1/-1; justify-content: flex-end; }
  .customer-v162-detail-tabs {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
  }
  .customer-v162-detail-body { padding-bottom: 90px; }
  .customer-v162-detail-section dl { grid-template-columns: 105px minmax(0,1fr); }
  .customer-organization-picker-row { grid-template-columns: 1fr; }
  .customer-organization-picker-row .action-btn { width: 100%; }
  .customer-v162-org-summary { grid-template-columns: repeat(2,1fr); gap: 6px; }
  .customer-v162-org-summary>div { min-height: 54px; }
  .customer-v162-org-summary label { grid-column: 1/-1; }
  .customer-v162-org-head { display: none; }
  .customer-v162-org-table { display: grid; gap: 7px; }
  .customer-v162-org-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 6px 8px;
    padding: 10px;
    border: 1px solid var(--customer-line);
    border-radius: 10px;
    background: #fff;
  }
  .customer-v162-org-row>div:first-child { grid-column: 1; }
  .customer-v162-org-row>div:nth-child(2) { grid-column: 1/-1; }
  .customer-v162-org-row>div:nth-child(3), .customer-v162-org-row>div:nth-child(4), .customer-v162-org-row>div:nth-child(5) {
    grid-column: auto;
    font-size: 8px;
  }
  .customer-v162-org-row .customer-v162-row-menu { grid-column: 2; grid-row: 1; }
  .customer-v162-legacy-notice { align-items: flex-start; flex-direction: column; }
  .customer-v162-org-workspace .customer-v162-list-headbar { padding-inline: 2px; }
}

@media (max-width:520px) {
  .customer-v162-pagehead h2 { font-size: 18px; }
  .customer-v162-head-actions .btn span { display: none; }
  .customer-v162-head-actions .btn {
    width: 39px;
    padding: 0;
    display: grid;
    place-items: center;
  }
  .customer-v162-kpis { grid-template-columns: 1fr 1fr; }
  .customer-v162-kpi { padding: 8px; }
  .customer-v162-kpi span { font-size: 8.5px; }
  .customer-v162-list-headbar>div:first-child { display: grid; gap: 1px; }
  .customer-v162-org-summary { grid-template-columns: 1fr 1fr; }
  .customer-v162-detail-head h3 { font-size: 14px; }
}

.customer-v162-filter-card { border-color: #BFDCCB; background: linear-gradient(112deg,#F6FBF8 0%,#FFFFFF 58%,#F7FBF9 100%); }
.customer-v162-filter-body {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 10px 12px;
  align-items: end;
  padding: 7px 14px 14px;
}
.customer-v162-filter-org { grid-column: 1/4 !important; }
.customer-v162-member-field { grid-column: 4/9 !important; }
.customer-v162-keyword { grid-column: 9/13 !important; }
.customer-v162-filter-profile { grid-column: 1/4 !important; max-width: none !important; }
.customer-v162-filter-class { grid-column: 4/7 !important; max-width: none !important; }
.customer-v162-filter-status { grid-column: 7/10 !important; max-width: none !important; }
.customer-v162-filter-actions {
  grid-column: 10/13 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-self: end;
}
.customer-v162-filter-field, .customer-v162-member-field { gap: 6px; }
.customer-v162-filter-field>span, .customer-v162-member-field>span {
  font-size: 9.5px;
  font-weight: 760;
  color: #3F5449;
}
.customer-v162-filter-field select, .customer-v162-filter-field input, .customer-v162-member-chips, .customer-v162-filter-actions .btn {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 9px !important;
}
.customer-v162-filter-field select, .customer-v162-filter-field input {
  padding-inline: 11px;
  font-size: 10.5px !important;
  background: #fff;
}
.customer-v162-search-input input { padding-left: 33px !important; }
.customer-v162-search-input svg {
  left: 11px;
  width: 15px;
  height: 15px;
}
.customer-v162-member-chips {
  padding: 4px 7px;
  gap: 6px;
  overflow-x: auto;
}
.customer-v162-member-chip {
  min-height: 28px;
  padding: 0 10px;
  font-size: 9.3px;
}
.customer-v162-filter-actions .btn {
  padding: 0 12px !important;
  font-size: 10px !important;
  justify-content: center;
}
.customer-v162-filter-actions .btn svg { width: 14px; height: 14px; }
.customer-v162-org-row.legacy { background: #FFFCF5; }
.customer-v162-org-row.legacy:hover, .customer-v162-org-row.legacy.selected { background: #FFF8E8; }
.customer-v162-org-icon.legacy {
  background: #FFF0CF;
  color: #B57911;
  font-weight: 900;
}
.customer-v162-detail-status.legacy { background: #FFF0CF; color: #98640F; }
.customer-v162-legacy-notice { justify-content: space-between; line-height: 1.35; }
.customer-v162-org-member-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 6px;
}
.customer-v162-org-member-row>button:first-child { margin: 0; }
.customer-v162-org-member-edit {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #D7E3DC;
  border-radius: 7px;
  background: #fff;
  color: #176B49;
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
}
.customer-v162-org-member-edit:hover { background: #F1FAF5; border-color: #BFDCCB; }
.organization-members-modal-card {
  width: min(760px,calc(100vw - 28px));
  max-height: min(84vh,760px);
  display: flex;
  flex-direction: column;
}
.organization-members-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  margin: 2px 0 8px;
}
.organization-member-search { position: relative; display: block; }
.organization-member-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #718079;
  stroke-width: 1.8;
}
.organization-member-search input {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid #D8E4DD;
  border-radius: 9px;
  outline: none;
  font-size: 12px;
}
.organization-member-search input:focus { border-color: #72BE97; box-shadow: 0 0 0 3px rgba(11,143,89,.08); }
.organization-members-help {
  padding: 9px 11px;
  margin-bottom: 8px;
  border: 1px solid #DCEAE2;
  border-radius: 9px;
  background: #F6FBF8;
  color: #617269;
  font-size: 9px;
  line-height: 1.45;
}
.organization-members-list {
  min-height: 180px;
  max-height: 430px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 2px 2px 4px;
}
.organization-member-option {
  min-height: 58px;
  display: grid;
  grid-template-columns: 20px 38px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #E0E8E4;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.organization-member-option:hover { background: #FAFCFB; }
.organization-member-option.selected { border-color: #AFD9C2; background: #F1FAF5; }
.organization-member-option input {
  width: 16px;
  height: 16px;
  accent-color: #0B8F59;
}
.organization-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #E2F6EB;
  color: #087A4E;
  font-size: 13px;
  font-weight: 800;
}
.organization-member-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.organization-member-copy strong { font-size: 11px; color: #24372D; }
.organization-member-copy small {
  font-size: 8.5px;
  color: #74847B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organization-member-copy em {
  width: max-content;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  background: #EEF8F3;
  color: #327255;
  font-size: 7.8px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.organization-member-copy em.other { background: #FFF5DF; color: #9A6813; }
.customer-v162-detail-empty.compact { min-height: 150px; }
.legacy-organization-modal-card { width: min(620px,calc(100vw - 28px)); }
.legacy-organization-source {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid #EBD7AA;
  border-radius: 10px;
  background: #FFF9EB;
}
.legacy-organization-source small {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #9B6B16;
}
.legacy-organization-source strong { font-size: 15px; color: #493612; }
.legacy-organization-source span { font-size: 9px; color: #7D6A43; }
.legacy-organization-warning {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #F7FAF8;
  border: 1px solid #E0E9E4;
  color: #66776E;
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width:1200px) {
  .customer-v162-filter-body { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .customer-v162-filter-org { grid-column: 1/3 !important; }
  .customer-v162-member-field { grid-column: 3/7 !important; }
  .customer-v162-keyword { grid-column: 1/4 !important; }
  .customer-v162-filter-profile { grid-column: 4/7 !important; }
  .customer-v162-filter-class { grid-column: 1/3 !important; }
  .customer-v162-filter-status { grid-column: 3/5 !important; }
  .customer-v162-filter-actions { grid-column: 5/7 !important; }
}

@media (max-width:900px) {
  .customer-v162-filter-body { grid-template-columns: 1fr 1fr !important; }
  .customer-v162-filter-org, .customer-v162-member-field, .customer-v162-keyword, .customer-v162-filter-profile, .customer-v162-filter-class, .customer-v162-filter-status, .customer-v162-filter-actions {
    grid-column: auto !important;
  }
  .customer-v162-member-field, .customer-v162-keyword { grid-column: 1/-1 !important; }
  .customer-v162-filter-actions { grid-column: 1/-1 !important; justify-content: stretch !important; }
}

@media (max-width:780px) {
  .customer-v162-filter-body {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 6px 9px 11px !important;
  }
  .customer-v162-filter-org, .customer-v162-member-field, .customer-v162-keyword, .customer-v162-filter-profile, .customer-v162-filter-class, .customer-v162-filter-status, .customer-v162-filter-actions {
    grid-column: 1 !important;
  }
  .customer-v162-member-field { display: none !important; }
  .customer-v162-filter-field select, .customer-v162-filter-field input, .customer-v162-filter-actions .btn {
    min-height: 43px !important;
    height: 43px !important;
  }
  .organization-members-modal-card, .legacy-organization-modal-card {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    overflow: auto;
  }
  .organization-members-toolbar { grid-template-columns: 1fr; }
  .organization-members-toolbar .btn { width: 100%; }
  .organization-members-list { max-height: none; overflow: visible; }
  .organization-member-option { min-height: 64px; }
  .customer-v162-org-member-edit { min-height: 34px; }
}

/* Login is intentionally isolated from global form rules. */

#loginView.login-shell { min-height: 100dvh; grid-template-columns: minmax(500px,1.12fr) minmax(430px,.88fr); }
#loginView .auth-form {
  width: 100%;
  min-width: 0;
  margin-top: 28px;
  gap: 10px;
}
#loginView .auth-form label {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 720;
  color: #2C4136;
}
#loginView .auth-form label:not(:first-child) { margin-top: 8px; }
#loginView .input-wrap {
  width: 100%;
  height: 48px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  overflow: hidden;
  border: 1px solid #D5E2DB !important;
  border-radius: 10px;
  background: #fff;
  box-shadow: none !important;
}
#loginView .input-wrap:focus-within { border-color: #0B8F59 !important; box-shadow: 0 0 0 3px rgba(11,143,89,.10) !important; }
#loginView .input-wrap svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #6E8076;
}
#loginView .input-wrap input, #loginView .input-wrap input:hover, #loginView .input-wrap input:focus, #loginView .input-wrap input:active {
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #182820;
  font-size: 14px;
  font-weight: 520;
  line-height: normal;
}
#loginView .input-wrap input::placeholder { color: #91A098; opacity: 1; }
#loginView .auth-form .btn-block {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
  border-radius: 10px;
  box-sizing: border-box;
}
#loginView .form-message {
  min-height: 20px;
  margin: 3px 0 0;
  font-size: 12px;
}
#loginView .login-foot { margin-top: 24px; }

/* Booking calendar: readable at normal desktop viewing distance. */

.booking-hour-mark {
  font-size: 11px !important;
  font-weight: 760 !important;
  color: #43584D !important;
  letter-spacing: 0 !important;
}
.booking-day-room-label strong { font-size: 12.5px !important; font-weight: 780 !important; }
.booking-day-room-label span {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  color: #687A70 !important;
}
.booking-timeline-block { padding: 6px 7px !important; }
.booking-timeline-block strong {
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1.22 !important;
}
.booking-timeline-block span {
  margin-top: 2px !important;
  font-size: 10.5px !important;
  font-weight: 590 !important;
  line-height: 1.22 !important;
  opacity: .96 !important;
}
.booking-week-corner { font-size: 11px !important; }
.booking-week-day-head strong { font-size: 11.5px !important; font-weight: 800 !important; }
.booking-week-day-head span { font-size: 10.5px !important; font-weight: 680 !important; }
.booking-week-room-label strong { font-size: 12.5px !important; font-weight: 800 !important; }
.booking-week-room-label span:not(.booking-week-room-icon) { font-size: 10.5px !important; }
.booking-week-room-label small { font-size: 9.5px !important; }
.week-booking-chip { padding: 6px 7px !important; }
.week-booking-chip strong {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.week-booking-chip span {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}
.week-booking-chip small {
  font-size: 9.5px !important;
  font-weight: 540 !important;
  line-height: 1.18 !important;
  opacity: .9 !important;
}
.booking-week-empty-action span { font-size: 10.5px !important; }
.booking-week-empty-action small { font-size: 9.5px !important; }
.week-more { font-size: 10px !important; }

/* Customer + Organization module: replace the old 8–10px micro typography. */

.customer-v162-filter-field>span, .customer-v162-member-field>span { font-size: 11.5px !important; line-height: 1.25 !important; }
.customer-v162-filter-field select, .customer-v162-filter-field input { font-size: 12.5px !important; }
.customer-v162-member-chip { font-size: 11px !important; }
.customer-v162-filter-actions .btn { font-size: 11.5px !important; }
.customer-v162-table-head, .customer-v162-org-head { font-size: 10px !important; letter-spacing: .025em; }
.customer-v162-person strong, .customer-v162-contact strong, .customer-v162-org-row strong {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}
.customer-v162-person small, .customer-v162-contact small, .customer-v162-org-row small {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}
.customer-v162-org span, .customer-v162-org-row>div:nth-child(3) span, .customer-v162-org-row>div:nth-child(4) span {
  font-size: 11px !important;
}
.customer-v162-class-count span, .customer-v162-status span, .customer-v162-detail-status, .customer-v162-updated {
  font-size: 10.5px !important;
}
.customer-v162-row-menu button, .customer-v162-detail-actions .btn, .customer-v162-detail-actions summary, .customer-v162-detail-actions details button {
  font-size: 11px !important;
}
.customer-v162-detail-empty strong { font-size: 14px !important; }
.customer-v162-detail-empty span { font-size: 11.5px !important; }
.customer-v162-profile-badge { font-size: 10px !important; }
.customer-v162-detail-head h3 { font-size: 17px !important; }
.customer-v162-detail-head p { font-size: 11.5px !important; }
.customer-v162-detail-tabs button { min-height: 42px; font-size: 12px !important; }
.customer-v162-detail-section h4 { font-size: 13px !important; margin-bottom: 10px; }
.customer-v162-detail-section dt { font-size: 11.5px !important; line-height: 1.35 !important; }
.customer-v162-detail-section dd { font-size: 12px !important; line-height: 1.4 !important; }
.customer-v162-detail-section-head button { font-size: 11.5px !important; }
.customer-v162-detail-classes>div, .customer-v162-detail-bookings>div { padding: 10px 11px; gap: 3px; }
.customer-v162-detail-classes strong, .customer-v162-detail-bookings strong { font-size: 12.5px !important; line-height: 1.3 !important; }
.customer-v162-detail-classes span, .customer-v162-detail-bookings span { font-size: 11px !important; line-height: 1.35 !important; }
.customer-v162-note { font-size: 11.5px !important; line-height: 1.6 !important; }
.customer-v162-org-members strong { font-size: 12px !important; }
.customer-v162-org-members small { font-size: 10.5px !important; line-height: 1.3 !important; }
.customer-v162-org-member-edit { font-size: 10.5px !important; }
.organization-members-help { font-size: 11px !important; }
.organization-member-copy strong { font-size: 12px !important; }
.organization-member-copy small { font-size: 10.5px !important; }
.organization-member-copy em { font-size: 9.5px !important; }
.customer-v162-legacy-notice, .legacy-organization-source span, .legacy-organization-warning { font-size: 10.5px !important; }
.customer-v162-legacy-notice strong { font-size: 11px !important; }

@media (max-width:980px) {
  #loginView.login-shell {
    display: block;
    min-height: 100dvh;
    background: #F6F9F7;
  }
}

@media (max-width:780px) {
  #loginView .auth-form { margin-top: 24px; }
  #loginView .input-wrap { height: 50px; }
  #loginView .input-wrap input { font-size: 16px !important; }

  /* prevents iOS zoom */

  .booking-hour-mark { font-size: 10.5px !important; }
  .booking-timeline-block strong { font-size: 11.5px !important; }
  .booking-timeline-block span { font-size: 10.2px !important; }
  .week-booking-chip strong { font-size: 11px !important; }
  .week-booking-chip span { font-size: 10.2px !important; }
  .week-booking-chip small { font-size: 9.3px !important; }
  .customer-v162-person strong, .customer-v162-org-row strong { font-size: 13px !important; }
  .customer-v162-person small, .customer-v162-contact strong, .customer-v162-contact small, .customer-v162-org-row small {
    font-size: 11px !important;
  }
  .customer-v162-org span { font-size: 11.5px !important; }
  .customer-v162-detail-head h3 { font-size: 18px !important; }
  .customer-v162-detail-tabs button { font-size: 12.5px !important; }
  .customer-v162-detail-section h4 { font-size: 13.5px !important; }
  .customer-v162-detail-section dt { font-size: 11.5px !important; }
  .customer-v162-detail-section dd { font-size: 12.5px !important; }
  .customer-v162-detail-classes strong, .customer-v162-detail-bookings strong { font-size: 13px !important; }
  .customer-v162-detail-classes span, .customer-v162-detail-bookings span { font-size: 11.5px !important; }
}

#loginView.login-shell-v163 {
  display: grid;
  grid-template-columns: 240px minmax(540px,1fr) minmax(430px,520px);
  min-height: 100vh;
  background: #F5F9F6;
  color: #11231C;
}
#loginView.login-shell-v163 .login-hero-eyebrow {
  font-size: 15px;
  letter-spacing: .18em;
  margin-bottom: 18px;
}
#loginView.login-shell-v163 .auth-form {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#loginView.login-shell-v163 .auth-form label {
  font-size: 16px;
  font-weight: 800;
  color: #133026;
  margin: 0;
}
#loginView.login-shell-v163 .login-inline-link {
  border: none;
  background: none;
  padding: 0;
  color: #13955C;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
#loginView.login-shell-v163 .login-inline-link:hover { text-decoration: underline; }
#loginView.login-shell-v163 .input-wrap {
  height: 58px;
  border: 1px solid #D8E6DE;
  border-radius: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #F7FAF8;
}
#loginView.login-shell-v163 .input-wrap:focus-within {
  border-color: #0D8E5B;
  box-shadow: 0 0 0 4px rgba(13,142,91,.10);
  background: #fff;
}
#loginView.login-shell-v163 .input-wrap svg {
  width: 22px;
  height: 22px;
  margin-left: 18px;
  flex: 0 0 auto;
  stroke: #6E8177;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginView.login-shell-v163 .input-wrap input, #loginView.login-shell-v163 .input-wrap input:hover, #loginView.login-shell-v163 .input-wrap input:focus, #loginView.login-shell-v163 .input-wrap input:active {
  flex: 1;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 18px 0 16px;
  font-size: 16px !important;
  font-weight: 600;
  color: #18352A;
}
#loginView.login-shell-v163 .input-wrap input::placeholder {
  color: #90A29A;
  opacity: 1;
  font-weight: 500;
}
#loginView.login-shell-v163 .login-submit-btn {
  margin-top: 14px;
  height: 60px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 16px 28px rgba(8,122,78,.18);
}
#loginView.login-shell-v163 .login-submit-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginView.login-shell-v163 .form-message {
  min-height: 22px;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #C0392B;
}
#loginView.login-shell-v163 .login-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #70827B;
  font-size: 15px;
  font-weight: 600;
  margin-top: 0;
}
#loginView.login-shell-v163 .login-foot svg {
  width: 22px;
  height: 22px;
  stroke: #6A867A;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1520px) {
  #loginView.login-shell-v163 { grid-template-columns: 220px minmax(460px,1fr) minmax(390px,470px); }
}

@media (max-width: 1280px) {
  #loginView.login-shell-v163 { grid-template-columns: 200px minmax(380px,1fr) minmax(360px,430px); }
}

@media (max-width: 1100px) {
  #loginView.login-shell-v163 { grid-template-columns: 180px 1fr minmax(340px,400px); }
}

@media (max-width: 920px) {
  #loginView.login-shell-v163 {
    display: block;
    min-height: 100dvh;
    background: #F3F8F5;
  }
}

@media (max-width: 560px) {
  #loginView.login-shell-v163 .input-wrap { height: 54px; }
  #loginView.login-shell-v163 .input-wrap input, #loginView.login-shell-v163 .input-wrap input:hover, #loginView.login-shell-v163 .input-wrap input:focus, #loginView.login-shell-v163 .input-wrap input:active {
    font-size: 16px !important;
  }

  /* prevent iOS zoom */

  #loginView.login-shell-v163 .login-submit-btn { height: 56px; }
}

#loginView.login-shell-v163 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  grid-template-columns: clamp(172px,13.5vw,240px) minmax(0,1fr) clamp(390px,29vw,520px) !important;
}

/* Middle column: content scales with viewport height instead of pushing page taller. */

#loginView.login-shell-v163 .login-hero-eyebrow {
  font-size: clamp(12px,1.15vw,15px) !important;
  margin-bottom: clamp(10px,1.6vh,16px) !important;
}

/* Decorative scene is now out of normal flow so it can never create vertical overflow. */

/* Right card is also height-aware and never exceeds the viewport. */

#loginView.login-shell-v163 .auth-form { margin-top: clamp(16px,2.5vh,24px) !important; gap: clamp(7px,1.1vh,10px) !important; }
#loginView.login-shell-v163 .auth-form label { font-size: clamp(13px,1.05vw,15px) !important; }
#loginView.login-shell-v163 .login-inline-link { font-size: clamp(12px,1vw,14px) !important; }
#loginView.login-shell-v163 .input-wrap {
  height: clamp(48px,6.4vh,56px) !important;
  background: #FFFFFF !important;
  border-color: #D8E6DE !important;
}
#loginView.login-shell-v163 .input-wrap:focus-within { background: #FFFFFF !important; }
#loginView.login-shell-v163 .login-submit-btn { height: clamp(50px,6.5vh,58px) !important; margin-top: clamp(8px,1.5vh,12px) !important; }
#loginView.login-shell-v163 .form-message {
  min-height: 18px !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}
#loginView.login-shell-v163 .login-foot { font-size: clamp(11px,1vw,14px) !important; gap: 8px !important; }

/* Force browser/autofill backgrounds to stay white. */

#loginView.login-shell-v163 .input-wrap input, #loginView.login-shell-v163 .input-wrap input:hover, #loginView.login-shell-v163 .input-wrap input:focus, #loginView.login-shell-v163 .input-wrap input:active {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #18352A !important;
  -webkit-text-fill-color: #18352A !important;
  caret-color: #087A4E !important;
}
#loginView.login-shell-v163 .input-wrap input:-webkit-autofill, #loginView.login-shell-v163 .input-wrap input:-webkit-autofill:hover, #loginView.login-shell-v163 .input-wrap input:-webkit-autofill:focus, #loginView.login-shell-v163 .input-wrap input:-webkit-autofill:active {
  -webkit-text-fill-color: #18352A !important;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  transition: background-color 9999s ease-out 0s !important;
  border-radius: 0 !important;
}
#loginView.login-shell-v163 .input-wrap input:autofill {
  background: #FFFFFF !important;
  color: #18352A !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
}

/* Short desktop screens: preserve one-screen layout by compacting/hiding decoration, not by scrolling. */

@media (min-width:921px) and (max-height:820px) {
  #loginView.login-shell-v163 .auth-form { margin-top: 14px !important; }
  #loginView.login-shell-v163 .input-wrap { height: 48px !important; }
  #loginView.login-shell-v163 .login-submit-btn { height: 50px !important; }
}

/* Tablet/mobile: still full viewport, but allow only the login card to fit compactly. */

@media (max-width:920px) {
  #loginView.login-shell-v163 {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width:560px) and (max-height:700px) {
  #loginView.login-shell-v163 .auth-form { margin-top: 12px !important; }
  #loginView.login-shell-v163 .input-wrap { height: 46px !important; }
  #loginView.login-shell-v163 .login-submit-btn { height: 48px !important; }
}

:root {
  --sea-green-950: #063d30;
  --sea-green-900: #075642;
  --sea-green-800: #086b4d;
  --sea-green-700: #078652;
  --sea-green-600: #00945c;
  --sea-mint-100: #ddf4e7;
  --sea-mint-50: #f1faf5;
  --sea-bg: #f8fbf9;
  --sea-white: #ffffff;
  --sea-text: #12352d;
  --sea-text-secondary: #667b74;
  --sea-border: #d5e4dd;
}
#loginView.login-shell-v1634 {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #f8fbf9;
  color: #12352d;
  font-family: "Inter","Manrope","Plus Jakarta Sans",sans-serif;
}
#loginView.login-shell-v1634 * { box-sizing: border-box; }
#loginView.login-shell-v1634 .login-page-header {
  height: 96px;
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 34px 16px 34px;
  background: rgba(255,255,255,.97);
}
#loginView.login-shell-v1634 .login-header-brand {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
}
#loginView.login-shell-v1634 .login-header-logo-box {
  width: 154px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(19,90,66,.06);
}
#loginView.login-shell-v1634 .login-header-logo {
  width: 118px;
  height: auto;
  display: block;
}
#loginView.login-shell-v1634 .login-header-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#loginView.login-shell-v1634 .login-header-brand-name {
  font-size: 16px;
  letter-spacing: 4px;
  color: #193b31;
  white-space: nowrap;
}
#loginView.login-shell-v1634 .login-header-brand-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #55736a;
  white-space: nowrap;
}
#loginView.login-shell-v1634 .login-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #39584d;
}
#loginView.login-shell-v1634 .login-header-quote {
  font-family: Georgia,serif;
  font-size: 18px;
  line-height: 1.35;
  color: #39584d;
  text-align: left;
}
#loginView.login-shell-v1634 .login-page-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1.9fr) minmax(420px,.92fr);
  gap: 32px;
  padding: 22px 34px 26px;
  overflow: hidden;
}
#loginView.login-shell-v1634 .login-showcase-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
}
#loginView.login-shell-v1634 .login-hero-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-top-right-radius: 220px;
  background: linear-gradient(100deg,#075e46 0%,#086f50 58%,#16875e 100%);
  display: flex;
  box-shadow: 0 12px 40px rgba(8,90,62,.10);
}
#loginView.login-shell-v1634 .login-hero-copy {
  position: relative;
  z-index: 2;
  width: 54%;
  padding: 60px 0 52px 64px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#loginView.login-shell-v1634 .login-hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 6px;
  color: rgba(255,255,255,.86);
  margin-bottom: 24px;
}
#loginView.login-shell-v1634 .login-hero-title {
  margin: 0;
  font-size: clamp(54px,4.2vw,78px);
  line-height: 1.02;
  letter-spacing: -2.2px;
  color: #f7fffb;
}
#loginView.login-shell-v1634 .login-hero-title span { color: #b8f0cd; }
#loginView.login-shell-v1634 .login-hero-desc {
  margin: 30px 0 0;
  max-width: 590px;
  font-size: 18px;
  line-height: 1.62;
  color: rgba(255,255,255,.9);
}
#loginView.login-shell-v1634 .login-hero-tagline {
  margin-top: auto;
  padding-top: 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  line-height: 1.95;
  color: rgba(255,255,255,.92);
}
#loginView.login-shell-v1634 .login-hero-visual {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  height: 100%;
  z-index: 1;
}
#loginView.login-shell-v1634 .login-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(7,94,70,.78) 0%,rgba(7,94,70,.34) 25%,rgba(7,94,70,.06) 55%,rgba(7,94,70,0) 100%);
}
#loginView.login-shell-v1634 .login-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%,rgba(255,255,255,.12),rgba(255,255,255,0) 34%);
}
#loginView.login-shell-v1634 .login-hero-script {
  position: absolute;
  top: 58px;
  left: 120px;
  font-family: Georgia,serif;
  font-size: 26px;
  line-height: 1.1;
  color: rgba(243,255,248,.82);
  transform: rotate(-10deg);
  z-index: 4;
}
#loginView.login-shell-v1634 .login-hero-poster {
  position: absolute;
  right: 54px;
  top: 138px;
  width: 186px;
  height: 268px;
  background: linear-gradient(180deg,#f6f1e5 0%,#f5f2ea 100%);
  border: 1px solid rgba(92,86,57,.12);
  box-shadow: 0 16px 40px rgba(18,31,25,.18);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 30px;
  z-index: 3;
  transform: rotate(1.5deg);
}
#loginView.login-shell-v1634 .login-hero-poster-line {
  font-family: Georgia,serif;
  font-size: 28px;
  line-height: 1.06;
  color: #4d4d3f;
  margin: 4px 0;
}
#loginView.login-shell-v1634 .login-hero-poster::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  height: 3px;
  border-radius: 999px;
  background: #a7bc9e;
}
#loginView.login-shell-v1634 .login-hero-plant {
  position: absolute;
  border-radius: 50%;
  filter: drop-shadow(0 16px 22px rgba(17,55,34,.26));
  z-index: 4;
}
#loginView.login-shell-v1634 .login-hero-plant::before, #loginView.login-shell-v1634 .login-hero-plant::after {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 40% 40%,#79cf67 0%,#317c2f 72%);
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
}
#loginView.login-shell-v1634 .login-hero-plant.plant-back {
  width: 168px;
  height: 168px;
  left: 182px;
  bottom: 124px;
}
#loginView.login-shell-v1634 .login-hero-plant.plant-back::before {
  width: 88px;
  height: 118px;
  left: 18px;
  top: 18px;
  transform: rotate(-18deg);
}
#loginView.login-shell-v1634 .login-hero-plant.plant-back::after {
  width: 96px;
  height: 124px;
  right: 6px;
  top: 28px;
  transform: rotate(20deg);
}
#loginView.login-shell-v1634 .login-hero-plant.plant-front {
  width: 210px;
  height: 210px;
  left: 238px;
  bottom: 74px;
}
#loginView.login-shell-v1634 .login-hero-plant.plant-front::before {
  width: 112px;
  height: 152px;
  left: 16px;
  top: 30px;
  transform: rotate(-22deg);
}
#loginView.login-shell-v1634 .login-hero-plant.plant-front::after {
  width: 122px;
  height: 164px;
  right: 8px;
  top: 18px;
  transform: rotate(22deg);
}
#loginView.login-shell-v1634 .login-hero-desk {
  position: absolute;
  left: 52px;
  right: -8px;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg,#f6f0df 0%,#efe3c5 100%);
}
#loginView.login-shell-v1634 .login-hero-desk::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(224,211,176,.8);
}
#loginView.login-shell-v1634 .login-hero-books {
  position: absolute;
  left: 102px;
  bottom: 42px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#loginView.login-shell-v1634 .login-hero-book {
  width: 258px;
  border-radius: 8px 6px 6px 8px;
  padding: 16px 22px;
  font-family: Georgia,serif;
  font-size: 22px;
  line-height: 1.08;
  box-shadow: 0 20px 30px rgba(22,28,25,.2);
}
#loginView.login-shell-v1634 .login-hero-book.book-top {
  background: linear-gradient(180deg,#184f3f 0%,#0c382e 100%);
  color: #f2eedf;
  transform: translateX(20px);
}
#loginView.login-shell-v1634 .login-hero-book.book-bottom { background: linear-gradient(180deg,#f0eadb 0%,#ece2cc 100%); color: #3b463f; }
#loginView.login-shell-v1634 .login-hero-mug {
  position: absolute;
  left: 386px;
  bottom: 36px;
  width: 76px;
  height: 102px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg,#fcf9ef 0%,#f4ecda 100%);
  color: #4a4a41;
  font-family: Georgia,serif;
  font-size: 16px;
  line-height: 1.03;
  padding: 14px 12px;
  z-index: 5;
  box-shadow: 0 18px 26px rgba(22,29,22,.16);
}
#loginView.login-shell-v1634 .login-hero-mug::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 28px;
  width: 22px;
  height: 30px;
  border: 4px solid #ece4d0;
  border-left: none;
  border-radius: 0 14px 14px 0;
}
#loginView.login-shell-v1634 .login-auth-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg,rgba(255,255,255,.35),rgba(241,250,245,.58));
  border-radius: 0 26px 26px 0;
  overflow: hidden;
}
#loginView.login-shell-v1634 .login-auth-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#loginView.login-shell-v1634 .login-auth-rings::before, #loginView.login-shell-v1634 .login-auth-rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 35px solid rgba(56,190,120,.08);
}
#loginView.login-shell-v1634 .login-auth-rings::before {
  width: 240px;
  height: 240px;
  right: -96px;
  top: 84px;
}
#loginView.login-shell-v1634 .login-auth-rings::after {
  width: 190px;
  height: 190px;
  right: -64px;
  top: 104px;
  border-width: 22px;
}
#loginView.login-shell-v1634 .login-auth-card {
  position: relative;
  width: min(540px,100%);
  min-height: 690px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(27,133,91,.16);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(19,90,66,.08);
  padding: 42px 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
}
#loginView.login-shell-v1634 .login-auth-welcome {
  position: absolute;
  top: 42px;
  right: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: #7bb694;
  font-size: 16px;
  line-height: 1.3;
  z-index: 3;
}
#loginView.login-shell-v1634 .login-auth-welcome i {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: #4ba66e;
  margin-top: 10px;
}
#loginView.login-shell-v1634 .login-auth-copy { padding-top: 72px; }
#loginView.login-shell-v1634 .login-auth-copy .eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  color: #058551;
  margin-bottom: 12px;
}
#loginView.login-shell-v1634 .login-auth-copy h2 {
  margin: 0;
  font-size: 42px;
  color: #12352d;
  letter-spacing: -1px;
}
#loginView.login-shell-v1634 .login-auth-copy .muted {
  margin: 14px 0 28px;
  font-size: 16px;
  color: #61756f;
  line-height: 1.55;
}
#loginView.login-shell-v1634 .auth-form-v1634 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#loginView.login-shell-v1634 .auth-form-v1634 label {
  font-size: 15px;
  font-weight: 600;
  color: #17372f;
  margin: 0;
}
#loginView.login-shell-v1634 .input-wrap-v1634 {
  position: relative;
  height: 56px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #cadbd4;
  background: #f6f9ff;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: border-color .18s ease,box-shadow .18s ease;
}
#loginView.login-shell-v1634 .input-wrap-v1634:focus-within { border-color: #87c9aa; box-shadow: 0 0 0 4px rgba(7,134,82,.08); }
#loginView.login-shell-v1634 .input-wrap-v1634 .input-leading {
  width: 56px;
  min-width: 56px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #d9e4df;
  background: rgba(255,255,255,.36);
}
#loginView.login-shell-v1634 .input-wrap-v1634 .input-leading svg {
  width: 20px;
  height: 20px;
  stroke: #7d9088;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginView.login-shell-v1634 .input-wrap-v1634 input, #loginView.login-shell-v1634 .input-wrap-v1634 input:hover, #loginView.login-shell-v1634 .input-wrap-v1634 input:focus, #loginView.login-shell-v1634 .input-wrap-v1634 input:active {
  flex: 1 1 auto;
  width: auto;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 18px;
  color: #294138;
  font-size: 15px !important;
  font-weight: 500;
  box-shadow: none !important;
  -webkit-text-fill-color: #294138 !important;
  caret-color: #294138;
}
#loginView.login-shell-v1634 .input-wrap-v1634 input::placeholder { color: #8fa09c; opacity: 1; }
#loginView.login-shell-v1634 input:-webkit-autofill, #loginView.login-shell-v1634 input:-webkit-autofill:hover, #loginView.login-shell-v1634 input:-webkit-autofill:focus, #loginView.login-shell-v1634 input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #294138 !important;
  transition: background-color 9999s ease-out 0s;
  background-clip: content-box !important;
}
#loginView.login-shell-v1634 .password-toggle-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 4px;
  color: #7a8c85;
  cursor: pointer;
  display: grid;
  place-items: center;
}
#loginView.login-shell-v1634 .password-toggle-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginView.login-shell-v1634 .password-toggle-btn .hidden { display: none; }
#loginView.login-shell-v1634 .login-password-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
  margin-bottom: 10px;
}
#loginView.login-shell-v1634 .login-inline-link {
  border: none;
  background: none;
  padding: 0;
  color: #007c4e;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
#loginView.login-shell-v1634 .login-inline-link:hover { text-decoration: underline; }
#loginView.login-shell-v1634 .v1634-btn {
  height: 56px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(90deg,#078652 0%,#00945c 100%);
  font-size: 17px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0,130,80,.15);
}
#loginView.login-shell-v1634 .v1634-btn:hover { transform: translateY(-1px); }
#loginView.login-shell-v1634 .v1634-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginView.login-shell-v1634 .form-message {
  min-height: 20px;
  margin: 2px 0 0;
  color: #c8523b;
  font-size: 13px;
  font-weight: 600;
}
#loginView.login-shell-v1634 .login-foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: #69867d;
  text-align: center;
  border-top: 1px solid #dbe7e1;
}
#loginView.login-shell-v1634 .login-foot svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginView.login-shell-v1634 .login-auth-footer-brand {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7a9e90;
  opacity: .92;
  z-index: 2;
}
#loginView.login-shell-v1634 .login-auth-footer-brand svg {
  width: 24px;
  height: 24px;
  stroke: #3da56b;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#loginView.login-shell-v1634 .login-auth-footer-brand span {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  color: #6e9788;
}
#loginView.login-shell-v1634 .login-auth-footer-brand strong {
  display: block;
  font-size: 11px;
  letter-spacing: 2.2px;
  color: #6c8e82;
}

@media (max-width: 1540px) {
  #loginView.login-shell-v1634 .login-page-content {
    grid-template-columns: minmax(0,1.6fr) minmax(390px,.92fr);
    gap: 22px;
    padding: 18px 24px 20px;
  }
  #loginView.login-shell-v1634 .login-hero-copy { width: 56%; padding: 48px 0 36px 42px; }
  #loginView.login-shell-v1634 .login-auth-card {
    width: min(500px,100%);
    min-height: 650px;
    padding: 38px 28px 26px;
  }
}

@media (max-height: 930px) {
  #loginView.login-shell-v1634 .login-page-content {
    padding-top: 14px;
    padding-bottom: 18px;
    gap: 20px;
  }
  #loginView.login-shell-v1634 .login-hero-copy { padding-top: 46px; padding-bottom: 28px; }
  #loginView.login-shell-v1634 .login-hero-title { font-size: clamp(44px,4vw,64px); }
  #loginView.login-shell-v1634 .login-hero-desc { margin-top: 24px; font-size: 17px; }
  #loginView.login-shell-v1634 .login-auth-card { min-height: 610px; padding: 34px 26px 24px; }
}

@media (max-height: 820px) {
  #loginView.login-shell-v1634 .login-page-header {
    height: 82px;
    flex-basis: 82px;
    padding: 14px 22px;
  }
  #loginView.login-shell-v1634 .login-header-logo-box { width: 142px; height: 48px; }
  #loginView.login-shell-v1634 .login-header-logo { width: 108px; }
  #loginView.login-shell-v1634 .login-page-content { padding: 12px 18px 16px; gap: 16px; }
  #loginView.login-shell-v1634 .login-hero-card { border-top-right-radius: 180px; }
  #loginView.login-shell-v1634 .login-hero-copy { padding: 34px 0 20px 34px; width: 56%; }
  #loginView.login-shell-v1634 .login-hero-eyebrow { margin-bottom: 16px; }
  #loginView.login-shell-v1634 .login-hero-title { font-size: clamp(36px,3.6vw,54px); }
  #loginView.login-shell-v1634 .login-hero-desc {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.5;
    max-width: 500px;
  }
  #loginView.login-shell-v1634 .login-hero-tagline { padding-top: 22px; font-size: 11px; }
  #loginView.login-shell-v1634 .login-hero-visual { width: 52%; }
  #loginView.login-shell-v1634 .login-hero-poster {
    top: 112px;
    right: 18px;
    width: 144px;
    height: 210px;
    padding: 20px 22px;
  }
  #loginView.login-shell-v1634 .login-hero-poster-line { font-size: 23px; }
  #loginView.login-shell-v1634 .login-hero-script {
    top: 32px;
    left: 90px;
    font-size: 22px;
  }
  #loginView.login-shell-v1634 .login-hero-plant.plant-back {
    left: 116px;
    bottom: 86px;
    width: 130px;
    height: 130px;
  }
  #loginView.login-shell-v1634 .login-hero-plant.plant-front {
    left: 168px;
    bottom: 56px;
    width: 170px;
    height: 170px;
  }
  #loginView.login-shell-v1634 .login-hero-desk { height: 92px; }
  #loginView.login-shell-v1634 .login-hero-books {
    left: 54px;
    bottom: 28px;
    gap: 6px;
  }
  #loginView.login-shell-v1634 .login-hero-book {
    width: 198px;
    font-size: 18px;
    padding: 12px 16px;
  }
  #loginView.login-shell-v1634 .login-hero-mug {
    left: 272px;
    bottom: 26px;
    width: 64px;
    height: 86px;
    font-size: 13px;
    padding: 12px 9px;
  }
  #loginView.login-shell-v1634 .login-auth-card { min-height: 552px; padding: 28px 22px 20px; }
  #loginView.login-shell-v1634 .login-auth-welcome { top: 26px; right: 24px; }
  #loginView.login-shell-v1634 .login-auth-copy { padding-top: 58px; }
  #loginView.login-shell-v1634 .login-auth-copy h2 { font-size: 36px; }
  #loginView.login-shell-v1634 .login-auth-copy .muted { margin: 10px 0 20px; font-size: 15px; }
}

@media (max-width: 1240px) {
  #loginView.login-shell-v1634 .login-page-content {
    grid-template-columns: minmax(0,1.3fr) minmax(360px,.95fr);
    gap: 16px;
    padding: 14px 16px 18px;
  }
  #loginView.login-shell-v1634 .login-hero-copy { width: 58%; padding-left: 28px; }
  #loginView.login-shell-v1634 .login-header-brand-name { letter-spacing: 2.8px; font-size: 15px; }
  #loginView.login-shell-v1634 .login-header-brand-tag { letter-spacing: 3px; }
  #loginView.login-shell-v1634 .login-auth-card { min-height: 520px; }
}

@media (max-width: 1023px) {
  #loginView.login-shell-v1634 {
    position: relative;
    overflow: auto;
    min-height: 100dvh;
    height: auto;
  }
  #loginView.login-shell-v1634 .login-page-header {
    height: auto;
    flex-basis: auto;
    padding: 18px 20px;
    gap: 16px;
    flex-wrap: wrap;
  }
  #loginView.login-shell-v1634 .login-header-right { width: 100%; justify-content: flex-end; }
  #loginView.login-shell-v1634 .login-page-content {
    display: flex;
    flex-direction: column;
    padding: 0 18px 24px;
    height: auto;
    overflow: visible;
  }
  #loginView.login-shell-v1634 .login-showcase-stage { order: 2; }
  #loginView.login-shell-v1634 .login-auth-stage {
    order: 1;
    background: transparent;
    border-radius: 0;
    padding-top: 8px;
  }
  #loginView.login-shell-v1634 .login-auth-card { width: min(100%,560px); min-height: 0; }
  #loginView.login-shell-v1634 .login-hero-card { min-height: 520px; flex: 0 0 auto; }
}

@media (max-width: 767px) {
  #loginView.login-shell-v1634 .login-page-header { padding: 18px 16px 10px; justify-content: center; }
  #loginView.login-shell-v1634 .login-header-brand {
    width: 100%;
    justify-content: center;
    gap: 14px;
  }
  #loginView.login-shell-v1634 .login-header-logo-box { width: 132px; height: 46px; }
  #loginView.login-shell-v1634 .login-header-logo { width: 102px; }
  #loginView.login-shell-v1634 .login-header-brand-copy { gap: 6px; }
  #loginView.login-shell-v1634 .login-header-brand-name { font-size: 13px; letter-spacing: 2px; }
  #loginView.login-shell-v1634 .login-header-brand-tag { font-size: 9px; letter-spacing: 2.5px; }
  #loginView.login-shell-v1634 .login-header-right { display: none; }
  #loginView.login-shell-v1634 .login-page-content { padding: 6px 12px 20px; }
  #loginView.login-shell-v1634 .login-showcase-stage { display: none; }
  #loginView.login-shell-v1634 .login-auth-stage { min-height: auto; justify-content: flex-start; }
  #loginView.login-shell-v1634 .login-auth-rings::before {
    width: 180px;
    height: 180px;
    right: -90px;
    top: 40px;
    border-width: 28px;
  }
  #loginView.login-shell-v1634 .login-auth-rings::after {
    width: 130px;
    height: 130px;
    right: -60px;
    top: 60px;
    border-width: 16px;
  }
  #loginView.login-shell-v1634 .login-auth-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 22px 18px 20px;
    border-radius: 20px;
  }
  #loginView.login-shell-v1634 .login-auth-welcome { display: none; }
  #loginView.login-shell-v1634 .login-auth-copy { padding-top: 0; }
  #loginView.login-shell-v1634 .login-auth-copy h2 { font-size: 34px; }
  #loginView.login-shell-v1634 .login-auth-copy .muted { font-size: 15px; margin: 10px 0 18px; }
  #loginView.login-shell-v1634 .input-wrap-v1634, #loginView.login-shell-v1634 .v1634-btn { height: 52px; }
  #loginView.login-shell-v1634 .login-auth-footer-brand { margin-top: 18px; }
}

#loginView.login-shell-v1634 {
  font-family: "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings: "liga" 1,"kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Header brand: compact, premium, less mechanical */

#loginView.login-shell-v1634 .login-header-brand-name {
  font-family: "Manrope",sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.25;
  color: #173b30;
}
#loginView.login-shell-v1634 .login-header-brand-tag {
  font-family: "Manrope",sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .26em;
  line-height: 1.3;
  color: #617a70;
}
#loginView.login-shell-v1634 .login-header-quote {
  font-family: "Lora",Georgia,serif;
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.01em;
  line-height: 1.38;
  color: #3e5f53;
}

/* Hero typography */

#loginView.login-shell-v1634 .login-hero-eyebrow {
  font-family: "Manrope",sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.3;
}
#loginView.login-shell-v1634 .login-hero-title {
  font-family: "Manrope",sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.035;
}
#loginView.login-shell-v1634 .login-hero-desc {
  font-family: "Manrope",sans-serif;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.65;
}
#loginView.login-shell-v1634 .login-hero-tagline {
  font-family: "Manrope",sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.7;
  text-transform: none;
  color: rgba(255,255,255,.84);
}
#loginView.login-shell-v1634 .login-hero-script {
  font-family: "Lora",Georgia,serif;
  font-size: 25px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.025em;
  line-height: 1.12;
}
#loginView.login-shell-v1634 .login-hero-poster-line, #loginView.login-shell-v1634 .login-hero-book, #loginView.login-shell-v1634 .login-hero-mug {
  font-family: "Lora",Georgia,serif;
}

/* Login card typography */

#loginView.login-shell-v1634 .login-auth-welcome {
  font-family: "Lora",Georgia,serif;
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.01em;
  color: #75ad8d;
}
#loginView.login-shell-v1634 .login-auth-copy .eyebrow {
  font-family: "Manrope",sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.35;
}
#loginView.login-shell-v1634 .login-auth-copy h2 {
  font-family: "Manrope",sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}
#loginView.login-shell-v1634 .login-auth-copy .muted, #loginView.login-shell-v1634 .auth-form-v1634 label, #loginView.login-shell-v1634 .input-wrap-v1634 input, #loginView.login-shell-v1634 .login-inline-link, #loginView.login-shell-v1634 .v1634-btn, #loginView.login-shell-v1634 .login-foot, #loginView.login-shell-v1634 .login-auth-footer-brand {
  font-family: "Manrope",sans-serif;
}
#loginView.login-shell-v1634 .auth-form-v1634 label { font-weight: 650; letter-spacing: -.005em; }
#loginView.login-shell-v1634 .input-wrap-v1634 input { font-weight: 500; letter-spacing: -.012em; }
#loginView.login-shell-v1634 .login-inline-link { font-weight: 600; letter-spacing: -.01em; }
#loginView.login-shell-v1634 .v1634-btn { font-weight: 700; letter-spacing: -.012em; }
#loginView.login-shell-v1634 .login-foot { font-weight: 500; letter-spacing: -.008em; }
#loginView.login-shell-v1634 .login-auth-footer-brand span {
  font-family: "Manrope",sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
}
#loginView.login-shell-v1634 .login-auth-footer-brand strong {
  font-family: "Manrope",sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

@media (max-width: 1240px) {
  #loginView.login-shell-v1634 .login-header-brand-name { font-size: 14px; letter-spacing: .10em; }
  #loginView.login-shell-v1634 .login-header-brand-tag { letter-spacing: .20em; }
}

@media (max-width: 767px) {
  #loginView.login-shell-v1634 .login-header-brand-name { font-size: 12px; letter-spacing: .085em; }
  #loginView.login-shell-v1634 .login-header-brand-tag { font-size: 8.5px; letter-spacing: .16em; }
}

.booking-board-head { align-items: stretch !important; }
.booking-board-head>div:first-child { min-width: 0; align-self: center; }
.booking-board-tools {
  width: 300px;
  min-width: 300px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 10px;
  align-items: stretch;
}
.booking-status-legend.booking-status-legend-stack {
  display: grid !important;
  grid-template-rows: repeat(3,25px);
  gap: 5px !important;
  align-content: center;
}
.booking-status-legend.booking-status-legend-stack span {
  width: 100%;
  min-height: 25px !important;
  justify-content: flex-start;
  padding: 0 9px !important;
  border-radius: 8px !important;
  font-size: 9.5px !important;
  font-weight: 720 !important;
  white-space: nowrap;
}
.booking-board-actions {
  display: grid;
  grid-template-rows: repeat(2,40px);
  gap: 10px;
  align-content: center;
}
.booking-board-action-btn {
  width: 100%;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #CFE0D7;
  border-radius: 9px;
  background: #fff;
  color: #315348;
  font: inherit;
  font-size: 10.5px;
  font-weight: 780;
  cursor: pointer;
  transition: background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.booking-board-action-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.booking-board-action-btn:hover {
  transform: translateY(-1px);
  border-color: #9BCBB3;
  box-shadow: 0 5px 14px rgba(8,122,78,.08);
}
.booking-board-action-btn.fullscreen { background: #F7FBF9; color: #176846; }
.booking-board-action-btn.print {
  background: #0B8654;
  border-color: #0B8654;
  color: #fff;
}
.booking-board-action-btn.print:hover { background: #087649; border-color: #087649; }
.booking-board-action-btn.active {
  background: #E8F7EF;
  border-color: #86C7A7;
  color: #0A6B45;
}

/* Room separation – day view. */

.booking-day-board { background: #F3F7F5 !important; }
.booking-day-time-head {
  position: relative;
  z-index: 3;
  box-shadow: 0 1px 0 #DDE6E1;
}
.booking-day-scroll-body {
  display: grid;
  gap: 8px;
  padding: 8px;
  background: #F3F7F5;
}
.booking-day-room-row {
  min-height: 72px !important;
  border: 1px solid #D7E2DC !important;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 7px rgba(28,61,46,.035);
}
.booking-day-room-row:last-child { border-bottom: 1px solid #D7E2DC !important; }
.booking-day-room-row .booking-day-room-label {
  position: relative;
  padding-left: 17px !important;
  border-right: 1px solid #D7E2DC !important;
  background: #F9FBFA !important;
  box-shadow: inset 4px 0 0 #16865A;
}
.booking-day-room-row:nth-child(even) .booking-day-room-label { background: #F3F8F5 !important; }
.booking-day-room-row .booking-room-timeline { min-height: 72px !important; background: #fff !important; }
.booking-day-room-row:nth-child(even) .booking-room-timeline { background: #FCFEFD !important; }
.booking-day-room-row .booking-grid-line { background: #E3EAE6 !important; }

/* Room separation – week view. */

.booking-week-board { background: #F3F7F5 !important; }
.booking-week-grid {
  row-gap: 8px !important;
  padding-bottom: 8px;
  background: #F3F7F5 !important;
}
.booking-week-corner, .booking-week-day-head { border-bottom: 1px solid #CBD9D2 !important; }
.booking-week-room-label, .booking-week-day-cell {
  border-top: 1px solid #D7E2DC !important;
  border-bottom: 1px solid #D7E2DC !important;
  background: #fff !important;
}
.booking-week-room-label {
  border-left: 4px solid #16865A !important;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 2px 7px rgba(28,61,46,.03);
}
.booking-week-day-cell { box-shadow: 0 2px 7px rgba(28,61,46,.025); }
.booking-week-grid>.booking-week-day-cell:nth-child(8n) { border-right: 1px solid #D7E2DC !important; border-radius: 0 10px 10px 0; }
.booking-week-room-label .booking-week-room-icon { background: #E9F5EE !important; box-shadow: inset 0 0 0 1px #D4E9DE; }

/* True fullscreen + fallback fullscreen. */

body.schedule-pseudo-fullscreen-open { overflow: hidden !important; }
.booking-board-card:fullscreen, .booking-board-card.schedule-pseudo-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: #F3F7F5 !important;
}
.booking-board-card.schedule-pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
}
.booking-board-card:fullscreen .booking-board-head, .booking-board-card.schedule-pseudo-fullscreen .booking-board-head {
  flex: 0 0 auto;
  min-height: 94px;
  padding: 14px 18px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(23,54,40,.05);
  z-index: 10;
}
.booking-board-card:fullscreen .booking-board-head h3, .booking-board-card.schedule-pseudo-fullscreen .booking-board-head h3 {
  font-size: 20px !important;
}
.booking-board-card:fullscreen .booking-board-head p, .booking-board-card.schedule-pseudo-fullscreen .booking-board-head p {
  font-size: 11px !important;
}
.booking-board-card:fullscreen .booking-day-board, .booking-board-card.schedule-pseudo-fullscreen .booking-day-board, .booking-board-card:fullscreen .booking-week-board, .booking-board-card.schedule-pseudo-fullscreen .booking-week-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
}
.booking-board-card:fullscreen .booking-day-time-head, .booking-board-card.schedule-pseudo-fullscreen .booking-day-time-head {
  position: sticky;
  top: 0;
  z-index: 20;
}
.booking-board-card:fullscreen .booking-day-room-row, .booking-board-card.schedule-pseudo-fullscreen .booking-day-room-row {
  min-height: max(76px,calc((100vh - 155px) / var(--schedule-room-count,7))) !important;
}
.booking-board-card:fullscreen .booking-room-timeline, .booking-board-card.schedule-pseudo-fullscreen .booking-room-timeline {
  min-height: max(76px,calc((100vh - 155px) / var(--schedule-room-count,7))) !important;
}
.booking-board-card:fullscreen .booking-week-room-label, .booking-board-card:fullscreen .booking-week-day-cell, .booking-board-card.schedule-pseudo-fullscreen .booking-week-room-label, .booking-board-card.schedule-pseudo-fullscreen .booking-week-day-cell {
  min-height: max(86px,calc((100vh - 175px) / var(--schedule-room-count,7))) !important;
}
.booking-board-card:fullscreen .booking-week-grid, .booking-board-card.schedule-pseudo-fullscreen .booking-week-grid {
  min-width: 100% !important;
}
.booking-board-card:fullscreen .booking-week-corner, .booking-board-card:fullscreen .booking-week-day-head, .booking-board-card.schedule-pseudo-fullscreen .booking-week-corner, .booking-board-card.schedule-pseudo-fullscreen .booking-week-day-head {
  position: sticky;
  top: 0;
  z-index: 20;
}
.booking-board-card:fullscreen .booking-week-room-label, .booking-board-card.schedule-pseudo-fullscreen .booking-week-room-label {
  position: sticky;
  left: 0;
  z-index: 12;
}
.booking-board-card:fullscreen .booking-week-corner, .booking-board-card.schedule-pseudo-fullscreen .booking-week-corner {
  left: 0;
  z-index: 24;
}

@media (max-width:900px) {
  .booking-board-head { flex-direction: column; gap: 10px !important; }
  .booking-board-tools {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:560px) {
  .booking-board-tools { grid-template-columns: 1fr; gap: 8px; }
  .booking-status-legend.booking-status-legend-stack {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: 30px;
    gap: 5px !important;
  }
  .booking-status-legend.booking-status-legend-stack span {
    justify-content: center;
    padding: 0 5px !important;
    font-size: 8.5px !important;
  }
  .booking-board-actions {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 42px;
    gap: 8px;
  }
  .booking-board-action-btn { height: 42px; font-size: 10px; }
  .booking-day-scroll-body { gap: 6px; padding: 6px; }
}

.booking-board-tools {
  width: 240px !important;
  min-width: 240px !important;
  gap: 8px !important;
}
.booking-status-legend.booking-status-legend-stack { grid-template-rows: repeat(3,24px) !important; gap: 4px !important; }
.booking-status-legend.booking-status-legend-stack span {
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 9px !important;
}
.booking-board-actions { grid-template-rows: repeat(2,36px) !important; gap: 8px !important; }
.booking-board-action-btn {
  height: 36px !important;
  font-size: 10px !important;
  gap: 7px !important;
}
.booking-board-action-btn svg { width: 15px !important; height: 15px !important; }
.booking-day-time-head, .booking-day-room-row { grid-template-columns: 160px minmax(980px,1fr) !important; }
.booking-day-room-label.head { justify-content: center !important; text-align: center !important; }
.booking-day-room-label { padding: 0 !important; }
.booking-room-label-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  text-align: center;
}
.booking-room-label-icon, .booking-week-room-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #EAF5EF;
  color: #11744A;
  box-shadow: inset 0 0 0 1px #D4E7DC;
}
.booking-room-label-icon svg, .booking-week-room-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.booking-room-label-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.booking-day-room-label strong { font-size: 11px !important; }
.booking-day-room-label span { font-size: 8.8px !important; }
.booking-hour-mark {
  font-size: 9px !important;
  color: #6F7F77 !important;
  font-weight: 700;
}
.booking-time-scale { background: #F7FAF8 !important; }
.booking-room-timeline { background: #FFFFFF !important; }
.booking-timeline-block strong { font-size: 10px !important; }
.booking-timeline-block span { font-size: 8.8px !important; }
.booking-week-grid { grid-template-columns: 148px repeat(7,minmax(150px,1fr)) !important; }
.booking-week-room-label {
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-align: center !important;
}
.booking-week-room-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.booking-week-room-label strong { font-size: 11px !important; }
.booking-week-room-label span:not(.booking-week-room-icon) { font-size: 8.8px !important; }
.booking-week-room-label small { font-size: 7.8px !important; }
.booking-week-day-head.today { background: #EEF7F2 !important; box-shadow: inset 0 -2px 0 #8FD1AF !important; }
.booking-week-day-head.selected { background: #DFF4E8 !important; box-shadow: inset 0 -3px 0 #0B8F59 !important; }
.booking-week-day-head.today.selected { background: #D4EFDF !important; box-shadow: inset 0 -3px 0 #087A4E !important; }
.booking-week-day-cell.today { background: #FBFEFC !important; }
.booking-week-day-cell.selected {
  background: #F3FBF7 !important;
  box-shadow: inset 0 0 0 2px rgba(11,143,89,.13), 0 2px 7px rgba(28,61,46,.025) !important;
}
.week-booking-chip strong { font-size: 8.8px !important; }
.week-booking-chip span { font-size: 8.6px !important; }
.week-booking-chip small { font-size: 7.6px !important; }

@media (max-width:900px) {
  .booking-board-tools { width: 100% !important; min-width: 0 !important; }
}

@media (max-width:560px) {
  .booking-status-legend.booking-status-legend-stack span { font-size: 8.4px !important; }
  .booking-board-action-btn { height: 40px !important; }
  .booking-day-time-head, .booking-day-room-row { grid-template-columns: 120px minmax(760px,1fr) !important; }
  .booking-room-label-content { padding: 8px 6px; gap: 5px; }
  .booking-room-label-icon, .booking-week-room-icon { width: 26px; height: 26px; }
  .booking-room-label-icon svg, .booking-week-room-icon svg { width: 14px; height: 14px; }
}

/* Hiện lại tiêu đề KHÁCH HÀNG trên topbar giống PHÒNG HỌC */

.customers-mode .app-page-title { display: block !important; }

/* Khung tổng */

.customer-v1733-shell {
  max-width: none;
  margin: 0;
  gap: 12px;
}
.customer-v1733-view { display: grid; gap: 12px; }
.customer-v1733-overview-strip { min-height: 64px; }
.customer-v1733-overview-metrics { flex: 1 1 auto; min-width: 0; }
.customer-v1733-overview-metrics .rooms-overview-item { min-width: 138px; }
.customer-v1733-overview-metrics .rooms-overview-item strong { font-family: inherit; }
.customer-v1733-overview-metrics .rooms-overview-item span { font-size: 10.5px; }

/* Nút Thêm khách hàng / Thêm tổ chức giống kích thước nút Thêm phòng */

.customer-v1733-add-btn {
  flex: 0 0 auto;
  min-width: 145px;
  justify-content: center;
}
.customer-v1733-add-btn svg { width: 16px; height: 16px; }
.customer-v1733-tools { grid-template-columns: minmax(220px, 1fr) 250px; gap: 9px; }
.customer-v1733-search { min-width: 0; }
.customer-v1733-search input { width: 100%; font-family: inherit; }

/* Khung Khách hàng | Tổ chức / Trường */

.customer-v1733-tabs { min-width: 0; min-height: 41px; }
.customer-v1733-tabs .customer-v162-tabs {
  width: 100%;
  height: 41px;
  display: flex;
  padding: 3px;
  border: 1px solid #e4e9ef;
  border-radius: 10px;
  background: #fff;
}
.customer-v1733-tabs .customer-v162-tab {
  flex: 1 1 50%;
  width: auto;
  min-width: 0;
  min-height: 33px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 10.5px;
  white-space: nowrap;
}
.customer-v1733-tabs .customer-v162-tab.active {
  background: #eef8f3;
  color: #087a4e;
  box-shadow: none;
}
.customer-v1733-filter-card {
  border: 1px solid #e5eaf0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden;
}

/* Nút mở Bộ lọc thêm */

.customer-v1733-filter-toggle {
  width: 100%;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  color: #68786f;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}
.customer-v1733-filter-toggle:hover { background: #f8fbf9; color: #087a4e; }

/* Nội dung bộ lọc */

.customer-v1733-filter-card .customer-v1733-filter-body {
  padding: 10px 12px 12px !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  border-top: 1px solid #edf1ef;
}

/* Hàng 1 */

.customer-v1733-filter-card .customer-v162-filter-org { grid-column: 1 / 4 !important; }
.customer-v1733-filter-card .customer-v162-member-field { grid-column: 4 / 9 !important; }
.customer-v1733-filter-card .customer-v162-filter-profile { grid-column: 9 / 13 !important; max-width: none !important; }

/* Hàng 2 */

.customer-v1733-filter-card .customer-v162-filter-class { grid-column: 1 / 5 !important; max-width: none !important; }
.customer-v1733-filter-card .customer-v162-filter-status { grid-column: 5 / 9 !important; max-width: none !important; }
.customer-v1733-filter-card .customer-v1733-filter-actions {
  grid-column: 9 / 13 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Đồng nhất chiều cao control */

.customer-v1733-filter-card select, .customer-v1733-filter-card input { min-height: 36px; font-size: 10.5px; }
.customer-v1733-filter-actions .btn { min-height: 36px; font-size: 10.5px; }
.customer-v162-table-head { font-size: 8.5px; }
.customer-v162-person strong, .customer-v162-contact strong { font-size: 10.5px; }
.customer-v162-person small, .customer-v162-contact small { font-size: 8.5px; }
.customer-v162-org span, .customer-v162-updated { font-size: 9px; }
.customer-v162-class-count span, .customer-v162-status span, .customer-v162-detail-status { font-size: 8.8px; }

@media (max-width: 780px) {
  .customer-v1733-shell, .customer-v1733-view { gap: 8px; }

  /* KPI giống responsive Phòng học */

  .customer-v1733-overview-strip { min-height: 54px; }
  .customer-v1733-overview-metrics .rooms-overview-item {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  .customer-v1733-overview-metrics .rooms-overview-item strong { font-size: 16px; }
  .customer-v1733-overview-metrics .rooms-overview-item span {
    font-size: 7.5px;
    line-height: 1.15;
    white-space: normal;
  }

  /* Search + tabs */

  .customer-v1733-tools { grid-template-columns: minmax(0, 1fr) 145px; gap: 6px; }
  .customer-v1733-tabs, .customer-v1733-tabs .customer-v162-tabs { min-height: 36px; height: 36px; }
  .customer-v1733-tabs .customer-v162-tab {
    min-height: 28px;
    padding: 0 5px;
    font-size: 8px;
  }

  /* Bộ lọc thêm về 1 cột */

  .customer-v1733-filter-card .customer-v1733-filter-body { grid-template-columns: 1fr !important; padding: 8px !important; }
  .customer-v1733-filter-card .customer-v162-filter-org, .customer-v1733-filter-card .customer-v162-member-field, .customer-v1733-filter-card .customer-v162-filter-profile, .customer-v1733-filter-card .customer-v162-filter-class, .customer-v1733-filter-card .customer-v162-filter-status, .customer-v1733-filter-card .customer-v1733-filter-actions {
    grid-column: 1 !important;
  }
  .customer-v1733-filter-card .customer-v162-member-field { display: none; }
}

@media (max-width: 430px) {
  /* Giống Phòng học: mobile nhỏ chỉ hiện icon nút thêm */

  .customer-v1733-add-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
  .customer-v1733-add-btn span { display: none; }

  /* Giữ KPI đủ đọc */

  .customer-v1733-overview-metrics .rooms-overview-item {
    padding-left: 4px;
    padding-right: 4px;
    column-gap: 4px;
  }
  .customer-v1733-overview-metrics .rooms-overview-item strong { font-size: 15px; }
  .customer-v1733-overview-metrics .rooms-overview-item span { font-size: 6.8px; }

  /* Hai tab gọn hơn */

  .customer-v1733-tools { grid-template-columns: minmax(0, 1fr) 132px; }
  .customer-v1733-tabs .customer-v162-tab { font-size: 7.5px; padding: 0 3px; }
}