:root {
  --reserved-bg: #dceaff;
  --reserved-border: #4d83dc;
  --reserved-text: #2456a2;
  --occupied-bg: #ccebdc;
  --occupied-border: #2d9769;
  --occupied-text: #1c6847;
  --departed-bg: #e3e7eb;
  --departed-border: #8995a1;
  --departed-text: #526170;
}
.rooms-view .room-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.store-dashboard { border-top: 1px solid #dce7e0; padding-top: 16px; }
.store-memos-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 20px; }
@media (max-width:760px) { .store-memos-grid { grid-template-columns: minmax(0,1fr); gap: 16px; } }
.store-dashboard .section-bar { flex-wrap: wrap; gap: 8px; }
.store-dashboard .section-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.store-caption { font-size: 13px; color: #326b62; border-left: 3px solid #80b7aa; padding-left: 7px; }
.store-memo-preview { max-height: 310px; overflow: auto; }
.store-memo-section { margin-top: 24px; }
.memo-compose .field { max-width: 240px; }
.rooms-view .room-card { padding: 14px 16px; }
.rooms-view .room-card .big-room { font-size: 23px; }
.rooms-view .room-card h3 { margin: 8px 0 4px; font-size: 14px; }
.rooms-view .room-card p { margin: 4px 0; font-size: 12px; }
.rooms-view .room-card-bottom { margin-top: 10px; }
.rooms-view .room-card .clean-label { margin-top: 0; font-size: 10px; }
.rooms-view .room-card .icon-button { width: 29px; height: 29px; }
.room-type-select, .preset-add { display:flex; align-items:center; gap:8px; }
.room-type-select select, .preset-add input { flex:1; min-width:0; }
.room-type-select .icon-button, .preset-add .icon-button { flex-shrink:0; }
#room-type-manager { border-top:1px solid #e4ebe6; padding-top:12px; }
.preset-add { margin-bottom:8px; }
#room-type-presets { max-height:180px; overflow:auto; }
.preset-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid #edf1ee; }
.preset-row span { overflow-wrap:anywhere; min-width:0; font-size:12px; }
.preset-row .icon-button { border:0; color:#a17d70; }
.preset-error { color:#b56352; font-size:12px; margin-top:8px; }
@media (max-width:1100px) { .rooms-view .room-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .rooms-view .room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .rooms-view .room-card { padding:12px; } }
@media (max-width:380px) { .rooms-view .room-grid { grid-template-columns:1fr; } }

.brand-mark { flex-shrink: 0; }
.sidebar .brand { padding-left: 0; padding-right: 0; }
.sidebar .brand strong { font-size: 20px; white-space: nowrap; }
.sidebar { overflow-y: auto; transition: width .18s, transform .18s; }
.main { transition: margin-left .18s; }
.sidebar-toggle { flex-shrink: 0; }
.sidebar-backdrop, .mobile-sidebar-close { display: none; }

.calendar { min-width: calc(175px + var(--calendar-days, 7) * 76px); }
.store-divider { display: flex; align-items: stretch; border-top: 2px solid #b8cfc2; border-bottom: 1px solid #dce7e0; background: #f7faf8; }
.store-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 175px; flex-shrink: 0; padding: 7px 10px; }
.store-title svg { width: 16px; height: 16px; color: #617c6b; }
.store-title strong { font-size: 13px; overflow-wrap: anywhere; }
.store-title span { font-size: 11px; color: #75877d; }
.store-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); flex: 1; min-width: 0; }
.store-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-left: 3px solid #a8bbb0; color: #425e50; }
.store-stats > div:nth-child(2) { background: #edf4ff; border-color: #7aa7df; color: #3267a5; }
.store-stats > div:nth-child(3) { background: #fff3e2; border-color: #d8a159; color: #a36a27; }
.store-stats > div:nth-child(4) { background: #e9f5ed; border-color: #70ae8b; color: #2c7b53; }
.store-stats span { font-size: 12px; white-space: nowrap; }
.store-stats strong { font-size: 22px; line-height: 1.2; white-space: nowrap; }
.store-stats small { margin-left: 4px; font-size: 11px; font-weight: 400; }
.cal-header, .cal-row {
  grid-template-columns: 175px repeat(var(--calendar-days, 7), minmax(76px, 1fr));
}
.cal-row .booking {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 64px;
  align-self: center;
  margin: 10px 4px;
  padding: 8px 7px;
  gap: 3px;
  border: 1px solid var(--reserved-border);
  border-left-width: 3px;
  background: var(--reserved-bg);
  color: var(--reserved-text);
  overflow: visible;
}
.cal-row .booking:hover { background: #cbdfff; }
.cal-row .booking.checked_in {
  background: var(--occupied-bg);
  color: var(--occupied-text);
  border-color: var(--occupied-border);
}
.cal-row .booking.checked_in:hover { background: #b9e2ce; }
.cal-row .booking.checked_out {
  background: var(--departed-bg);
  color: var(--departed-text);
  border-color: var(--departed-border);
}
.cal-row .booking.checked_out:hover { background: #d6dde4; }
.booking strong {
  flex: 0 0 auto;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
}
.booking small {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1.5;
  opacity: 1;
}
.booking-status {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}
.legend { color: #64756b; }
.legend i { background: var(--reserved-border); }
.legend .in { background: var(--occupied-border); }
.legend .out { background: var(--departed-border); }
.legend .dirty { background: #d3934c; }
.status-pill {
  background: var(--reserved-bg);
  color: var(--reserved-text);
}
.status-pill.checked_in {
  background: var(--occupied-bg);
  color: var(--occupied-text);
}
.status-pill.checked_out {
  background: var(--departed-bg);
  color: var(--departed-text);
}
.clean-label { background: #e3f1e7; color: #397550; }
.clean-label.dirty { background: #fbe6ce; color: #966025; }

[hidden] { display: none !important; }
.view-switch { display: flex; border: 1px solid #dce5df; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.view-switch button { border: 0; border-radius: 0; font-size: 11px; padding: 6px 10px; }
.view-switch button[aria-pressed="true"] { background: #e3f0e9; color: #26766a; font-weight: 600; }
.multi-room-toggle { margin-bottom: 18px; color: #3b6954; font-size: 13px; }
.multi-room #channel-field { grid-column: 1 / -1; }
.order-modal { width: 660px; }
.order-modal .modal-head { padding: 18px 22px; }
.order-modal .modal-body { padding: 18px 22px; min-height: 0; }
.order-modal .form-grid { gap: 14px; }
.order-modal textarea { min-height: 62px; }
.order-modal .room-choices { max-height: 220px; }
.order-modal > .modal-actions { margin: 0; padding: 13px 22px; flex-shrink: 0; background: #fff; border-radius: 0 0 10px 10px; }
.stay-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.night-stepper { display: flex; align-items: center; height: 38px; border: 1px solid #dfe7e1; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.night-stepper button { width: 35px; height: 36px; padding: 8px; border: 0; border-radius: 0; background: #f6f9f7; }
.night-stepper input { width: 46px; min-height: 36px; height: 36px; padding: 6px 0; border: 0; border-radius: 0; text-align: center; appearance: textfield; }
.night-stepper input::-webkit-inner-spin-button { appearance: none; }
.night-stepper > span { font-size: 12px; color: #8a9a90; padding-right: 10px; }
.night-shortcuts { display: flex; gap: 6px; flex-wrap: wrap; }
.night-shortcuts button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.night-shortcuts button[aria-pressed="true"] { border-color: #7ba88f; background: #e9f4ee; color: #26766a; }
.room-choice-head, .room-choice { display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px; gap: 10px; align-items: center; }
.room-choice-head { padding: 0 10px 9px; color: #87998c; font-size: 11px; }
.room-choices { border: 1px solid #e1e9e3; border-radius: 6px; max-height: 265px; overflow-y: auto; }
.room-choice { padding: 10px; border-bottom: 1px solid #edf2ee; }
.room-choice:last-child { border: 0; }
.room-choice-label { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.room-choice-label > input { width: 15px; height: 15px; min-height: 0; accent-color: #26766a; flex-shrink: 0; }
.room-choice-label b { font-size: 12px; font-weight: 500; line-height: 1.5; display: block; overflow-wrap: anywhere; }
.room-choice-label small { display: block; font-size: 10px; color: #74a086; margin-top: 3px; }
.room-choice.conflict .room-choice-label small { color: #bb6856; }
.room-choice > input { min-width: 0; padding: 8px; }
.room-choice > input:disabled { background: #f5f7f5; color: #aab7ad; }
.order-summary { gap: 8px; flex-wrap: wrap; }
.related-booking { margin-bottom: 20px; color: #648374; font-size: 12px; }
.related-booking > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.order-action-dock { flex-shrink: 0; background: #fff; border-top: 1px solid #e0e9e3; border-radius: 0 0 10px 10px; padding: 12px 22px; box-shadow: 0 -4px 14px #28463108; }
.order-action-dock .order-status-actions { margin: 0 0 10px; gap: 10px; }
.order-action-dock .order-status-actions button { min-height: 42px; font-size: 14px; font-weight: 550; }
.order-action-dock #undo-in { color: #a36429; background: #fff5e6; border-color: #e5c798; }
.order-action-dock .modal-actions { border: 0; margin: 0; padding: 0; }
.order-action-dock .dock-error { margin: 0 0 10px; max-height: 64px; overflow: auto; }
.arrivals-scroll { max-height: 310px; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.arrivals-scroll th { position: sticky; top: 0; z-index: 2; background: #f8fbf9; }
.arrivals-scroll .arrival-action-cell { position: sticky; right: 0; background: #fff; border-left: 1px solid #edf1ee; }
.arrivals-scroll th.arrival-action-cell { z-index: 3; background: #f8fbf9; }
.arrivals-scroll .small-button { min-height: 32px; font-size: 12px; background: #edf6f0; color: #39745a; border-color: #cfe3d6; }
.arrivals-scroll .small-button:hover { background: #e1f0e7; border-color: #aecaB8; }
.arrivals-scroll td { padding: 12px 14px; }
.stat:nth-child(2) { background: #edf4ff; }
.stat:nth-child(2) .stat-label, .stat:nth-child(2) .stat-number { color: #3267a5; }
.stat:nth-child(3) { background: #fff3e2; }
.stat:nth-child(3) .stat-label, .stat:nth-child(3) .stat-number { color: #a36a27; }
.stat:nth-child(4) { background: #e9f5ed; }
.stat:nth-child(4) .stat-label, .stat:nth-child(4) .stat-number { color: #2c7b53; }

@media (min-width: 761px) {
  .calendar-view .topbar { height: 44px; }
  .calendar-view .content { padding: 8px 20px 20px; max-width: none; }
  .calendar-view .page-heading { min-height: 32px; margin-bottom: 8px; align-items: center; }
  .calendar-view .page-heading h1 { font-size: 21px; margin: 0; }
  .calendar-view .page-heading p { display: none; }
  .calendar-view .heading-actions button { padding: 7px 12px; }
  .calendar-view .stats { gap: 0; margin-bottom: 8px; min-height: 44px; }
  .calendar-view .stat { background: transparent; border: 0; border-right: 1px solid #dde6df; border-radius: 0; min-height: 44px; padding: 3px 18px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 22px 16px; gap: 0 8px; }
  .calendar-view .stat:first-child { padding-left: 4px; }
  .calendar-view .stat:last-child { border: 0; }
  .calendar-view .stat-label { font-size: 12px; color: #64796b; }
  .calendar-view .stat-number { font-size: 24px; margin: 0; grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .calendar-view .stat-foot { font-size: 10px; white-space: nowrap; }
  .calendar-view .stat-symbol { display: none; }
  .calendar-view .stat:nth-child(2) { background: #edf4ff; border-left: 3px solid #7aa7df; }
  .calendar-view .stat:nth-child(3) { background: #fff3e2; border-left: 3px solid #d8a159; }
  .calendar-view .stat:nth-child(4) { background: #e9f5ed; border-left: 3px solid #70ae8b; }
  .calendar-view .stat:nth-child(2) .stat-label, .calendar-view .stat:nth-child(2) .stat-number { color: #3267a5; }
  .calendar-view .stat:nth-child(3) .stat-label, .calendar-view .stat:nth-child(3) .stat-number { color: #a36a27; }
  .calendar-view .stat:nth-child(4) .stat-label, .calendar-view .stat:nth-child(4) .stat-number { color: #2c7b53; }
  .calendar-view .calendar-tools { padding: 3px 12px; min-height: 36px; }
  .calendar-view .legend { padding: 0 12px 6px; font-size: 10px; min-height: 18px; line-height: 12px; }
  .calendar-view .cal-header > div { height: 30px; flex-direction: row; gap: 7px; font-size: 11px; }
  .calendar-view .cal-header strong { font-size: 14px; }
  .calendar-view .cal-header .today strong { width: 23px; height: 23px; }
  .calendar-view .cal-header .room-heading { justify-content: flex-start; }
  .calendar-view .calendar-scroll { max-height: none; }
  .calendar-view .cal-row { min-height: 0; }
  .calendar-view .room-cell { padding: 2px 10px; align-items: center; }
  .calendar-view .room-details { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
  .calendar-view .room-details strong { font-size: 13px; line-height: 16px; }
  .calendar-view .room-number { font-size: 14px; padding: 0; }
  .calendar-view .room-details .clean-label { font-size: 10px; line-height: 12px; margin-top: 1px; padding: 1px 4px; }
  .calendar-view .cal-row .booking { min-height: 0; padding: 1px 6px; margin: 1px 4px; gap: 0; }
  .calendar-view .booking strong { font-size: 13px; line-height: 18px; }
  .calendar-view .booking small { font-size: 11px; line-height: 15px; }
  .calendar-view .booking-status { display: none; }
  .calendar-view .calendar-footer { padding: 4px 12px; font-size: 10px; line-height: 14px; }
  .calendar-view .bottom-grid { margin-top: 20px; }
  .sidebar-collapsed .sidebar { width: 72px; padding: 32px 12px 18px; }
  .sidebar-collapsed .main { margin-left: 72px; }
  .sidebar-collapsed .brand { justify-content: center; padding-bottom: 32px; }
  .sidebar-collapsed .brand-copy,
  .sidebar-collapsed .nav-caption,
  .sidebar-collapsed .nav button > span,
  .sidebar-collapsed .sync > span:last-child,
  .sidebar-collapsed .user-copy,
  .sidebar-collapsed .user > svg { display: none; }
  .sidebar-collapsed .nav { margin-bottom: 24px; }
  .sidebar-collapsed .nav button {
    justify-content: center;
    position: relative;
    padding: 0;
  }
  .sidebar-collapsed .nav button.active:after {
    position: absolute;
    right: 4px;
    width: 4px;
    height: 4px;
  }
  .sidebar-collapsed .sync { justify-content: center; margin: 20px 0; }
  .sidebar-collapsed .user { justify-content: center; padding-left: 0; padding-right: 0; }
}

@media (min-width: 761px) and (max-height: 800px) {
  .calendar-view .content { padding-top: 6px; }
  .calendar-view .heading-actions button { padding: 5px 10px; line-height: 18px; }
  .calendar-view .stats { min-height: 32px; }
  .calendar-view .stat { min-height: 32px; padding-top: 0; padding-bottom: 0; grid-template-rows: 32px; }
  .calendar-view .stat-foot { display: none; }
  .calendar-view .stat-number { font-size: 22px; grid-row: 1; }
  .calendar-view .legend { min-height: 16px; padding-bottom: 4px; }
  .calendar-view .cal-header > div { height: 28px; }
}

@media (max-width: 760px) {
  .order-action-dock { padding: 10px 14px; }
  .order-action-dock .order-status-actions button { min-height: 40px; font-size: 13px; padding: 8px 10px; }
  .order-action-dock .modal-actions { gap: 6px; }
  .order-action-dock .modal-actions button { padding: 8px 10px; font-size: 12px; }
  .night-shortcuts button { padding: 6px 9px; }
  .stay-controls { gap: 10px; }
  .room-choice-head, .room-choice { grid-template-columns: minmax(0, 1fr) 72px 72px; gap: 5px; }
  .room-choice-head { padding: 0 7px 9px; font-size: 10px; }
  .room-choice { padding: 8px 7px; }
  .room-choice-label { gap: 5px; }
  .room-choice-label b { font-size: 11px; }
  .room-choice > input { padding: 6px 4px; font-size: 12px; }
  .filters .view-switch { flex: 0 0 auto; }
  .view-switch button { padding: 6px; }
  .sidebar-mobile-open { overflow: hidden; }
  .sidebar-mobile-open .sidebar { transform: translateX(0); }
  .sidebar-mobile-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    border: 0;
    border-radius: 0;
    background: #203b2c55;
  }
  .mobile-sidebar-close { display: inline-flex; position: absolute; right: 6px; top: 6px; }
  .breadcrumb { min-width: 0; }
  .breadcrumb > span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumb b { white-space: nowrap; font-size: 11px; }
}