:root {
  color-scheme: light;
  --ink: #151b23;
  --muted: #5d6673;
  --line: #cfd6df;
  --soft: #f5f6f8;
  --brand: #006b5f;
  --brand-dark: #004f47;
  --danger: #a6192e;
  --warning: #8a5a00;
  --panel: #ffffff;
  --shadow: 0 14px 34px rgba(21, 27, 35, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--soft);
  line-height: 1.5;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.topbar-inner,
.main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.nav-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-menu,
.account-menu {
  position: relative;
}

.nav-menu summary,
.account-menu summary {
  list-style: none;
  cursor: pointer;
}

.nav-menu summary::-webkit-details-marker,
.account-menu summary::-webkit-details-marker {
  display: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.nav-link:hover,
.nav-link.active {
  background: #e8f1ef;
  color: var(--brand-dark);
}

.nav-menu summary::after,
.account-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.nav-menu[open] summary::after,
.nav-menu:hover summary::after,
.nav-menu:focus-within summary::after,
.account-menu[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.nav-menu:not([open]):not(:hover):not(:focus-within) > .dropdown-menu {
  display: none;
}

.nav-menu:hover > .dropdown-menu,
.nav-menu:focus-within > .dropdown-menu,
.nav-menu[open] > .dropdown-menu {
  display: grid;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  min-width: 240px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(21, 27, 35, 0.14);
}

.admin-menu {
  right: 0;
  left: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 16px;
  min-width: min(640px, calc(100vw - 40px));
}
.nav-submenu {
  display: grid;
  gap: 14px;
  min-width: 240px;
}


.dropdown-menu section {
  display: grid;
  gap: 8px;
  align-content: start;
}

.dropdown-menu h2 {
  margin: 0 0 2px;
  color: #5d6673;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.dropdown-menu a:hover {
  background: #f2f4f7;
  color: var(--brand-dark);
}

.account-menu summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: #344054;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.account-label {
  display: grid;
  gap: 1px;
}

.account-label strong {
  max-width: 140px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.account-dropdown {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.mobile-profile-link {
  display: none;
}

.mobile-menu {
  display: none;
}

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu-button {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.mobile-menu-button span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: #344054;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.mobile-menu[open] .mobile-menu-button {
  border-color: rgba(0, 107, 95, 0.42);
  background: #e8f1ef;
}

.mobile-menu[open] .mobile-menu-button span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu[open] .mobile-menu-button span:nth-child(2) {
  opacity: 0;
}

.mobile-menu[open] .mobile-menu-button span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-dropdown {
  display: grid;
  gap: 4px;
}

.mobile-menu:not([open]) .mobile-dropdown {
  display: none;
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.mobile-menu-link:hover,
.mobile-menu-link.active {
  background: #e8f1ef;
  color: var(--brand-dark);
}

.mobile-menu-link.danger {
  color: var(--danger);
}

.mobile-menu-link.danger:hover {
  background: #fbe7ea;
  color: var(--danger);
}

.mobile-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #edf1f4;
  color: #5d6673;
  font-size: 11px;
  font-weight: 700;
}

.mobile-menu-link.active .mobile-menu-icon {
  background: var(--brand);
  color: #ffffff;
}

.mobile-menu-group-label {
  padding: 7px 10px 3px;
  color: #5d6673;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.mobile-menu-divider {
  height: 1px;
  margin: 7px 0;
  background: var(--line);
}

.main {
  padding: 42px 0 72px;
}

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.page-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
}

.page-heading p,
p {
  margin: 0;
  color: var(--muted);
}

.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}

.button:hover,
button.button:hover {
  background: var(--brand-dark);
}

.button.secondary {
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
}

.button.secondary:hover {
  background: #f7f8fa;
}

.button.danger {
  background: var(--danger);
}

.button.danger:hover {
  background: #991b1b;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.four {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card,
.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.card {
  min-height: 180px;
  padding: 22px;
}

.compact-card {
  min-height: 138px;
}

.link-card {
  display: block;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.link-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(21, 27, 35, 0.1);
}

.card h2,
.panel h2,
.room-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: 0;
}

.metric {
  display: block;
  margin-top: 18px;
  color: var(--brand-dark);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.panel {
  margin-top: 18px;
  padding: 24px;
}

.empty {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 26px 16px 12px;
  text-align: center;
}

.empty h2,
.empty p {
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
}

.room-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.rooms-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.rooms-grid .room-card {
  height: 100%;
}

.room-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: #edf1f4;
}

.room-card-media img,
.room-preview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-card-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  background: linear-gradient(135deg, #e8f1ef 0%, #f7f8fa 100%);
}

.room-card-placeholder span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
}

.room-card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 22px;
}

.room-card-content p {
  margin: 0;
  color: var(--muted);
}

.room-card-tags {
  align-content: flex-start;
  min-height: 68px;
}

.room-card-action {
  width: 100%;
  margin-top: auto;
}

.room-meta,
.booking-meta,
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-heading > .button,
.calendar-controls .button,
.panel > form .button,
.room-meta .button,
.filter-actions .button,
.empty .button,
.confirm-actions .button {
  width: 158px;
  max-width: 100%;
}

.tag,
.status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf1f4;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.status.pending {
  background: #fff4d6;
  color: var(--warning);
}

.status.open {
  background: #e7f4ee;
  color: #17634a;
}

.status.in_progress {
  background: #e8edf3;
  color: #35506f;
}

.status.approved {
  background: #e7f4ee;
  color: #17634a;
}

.status.resolved {
  background: #e7f4ee;
  color: #17634a;
}

.status.active {
  background: #e7f4ee;
  color: #17634a;
}

.status.inactive {
  background: #e5e8ec;
  color: #5d6673;
}

.status.disabled {
  background: #e5e8ec;
  color: #5d6673;
}

.status.rejected,
.status.cancelled {
  background: #fbe7ea;
  color: var(--danger);
}

.form {
  display: grid;
  gap: 16px;
}

.booking-layout {
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.85fr);
  align-items: start;
}

.booking-form-panel {
  gap: 20px;
}

.booking-flow-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.booking-flow-step {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 16px 10px;
  color: var(--muted);
  text-align: center;
}

.booking-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -20%;
  width: 40%;
  height: 2px;
  background: #d9dee5;
}

.booking-flow-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid #c6ced8;
  border-radius: 999px;
  background: #ffffff;
  color: #5d6673;
  font-weight: 700;
}

.booking-flow-step strong {
  color: #344054;
  font-size: 13px;
}

.booking-flow-step.active span {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.booking-flow-step.active strong {
  color: var(--brand-dark);
}

.booking-step {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.booking-step-header {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}

.booking-step-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.booking-step-header p {
  color: var(--muted);
  font-size: 14px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.room-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
  align-items: end;
}

.room-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.room-choice-card {
  overflow: hidden;
  display: grid;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.room-choice-card:hover,
.room-choice-card.selected {
  border-color: var(--brand);
  box-shadow: 0 14px 28px rgba(21, 27, 35, 0.1);
  transform: translateY(-1px);
}

.room-choice-card.selected {
  box-shadow: 0 0 0 2px rgba(0, 107, 95, 0.16), 0 14px 28px rgba(21, 27, 35, 0.1);
}

.room-choice-media {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 16 / 10;
  background: #edf1f4;
}

.room-choice-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-choice-placeholder {
  display: grid;
  height: 100%;
  place-items: center;
  background: linear-gradient(135deg, #e8f1ef 0%, #f7f8fa 100%);
  color: var(--brand-dark);
  font-size: 30px;
  font-weight: 700;
}

.room-choice-check {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.room-choice-card.selected .room-choice-check {
  display: inline-flex;
}

.room-choice-body {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.room-choice-body strong,
.room-choice-body span,
.room-choice-body small {
  display: block;
}

.room-choice-body strong {
  font-size: 16px;
}

.room-choice-body span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.room-choice-meta {
  color: var(--brand-dark) !important;
}

.room-choice-body small {
  color: #5d6673;
  font-size: 12px;
  line-height: 1.35;
}

.room-select-fallback {
  margin-top: 2px;
}

.booking-submit-step .button {
  width: 100%;
}

.booking-submit-note {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #ead18a;
  border-radius: 8px;
  background: #fff8e6;
}

.booking-submit-note strong {
  color: var(--warning);
}

.booking-submit-note span {
  color: #5d6673;
  font-size: 14px;
}

.selected-room-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #b9d8cf;
  border-radius: 8px;
  background: #eef8f5;
}

.selected-room-strip span,
.selected-room-strip em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.selected-room-strip strong {
  display: block;
  color: var(--brand-dark);
  font-size: 18px;
}

.selected-room-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #b9d8cf;
  border-radius: 8px;
  background: #ffffff;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.room-time-blocks {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ead18a;
  border-radius: 8px;
  background: #fffaf0;
}

.room-time-blocks-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.room-time-blocks-heading strong,
.room-time-blocks-heading span {
  display: block;
}

.room-time-blocks-heading strong {
  color: #78350f;
}

.room-time-blocks-heading span,
.room-time-blocks-note,
.room-time-block-empty {
  color: #8a5a00;
  font-size: 13px;
  font-weight: 700;
}

.room-time-block-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.room-time-block-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff4d6;
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}

.room-time-block-chip.approved {
  background: #fbe7ea;
  color: var(--danger);
}

.room-time-block-chip.pending {
  background: #fff4d6;
  color: var(--warning);
}

.room-time-block-chip.maintenance {
  background: #e5e8ec;
  color: #344054;
}

/* Top navigation shell override */
.app-shell {
  display: block;
  min-height: 100vh;
}

.sidebar {
  display: none;
}

.app-body {
  min-height: 100vh;
}

.app-body .topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.app-body .topbar-inner {
  width: min(1360px, calc(100% - 40px));
  min-height: 76px;
  margin: 0 auto;
  padding: 12px 0;
  gap: 16px;
}

.app-body .topbar .brand {
  display: flex;
  flex: 0 0 auto;
}

.top-nav-actions {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.top-nav-actions .nav-link {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 9px;
  color: var(--body);
  font-size: 13px;
  font-weight: 700;
}

.top-nav-actions .nav-link:hover,
.top-nav-actions .nav-link.active,
.top-nav-actions .nav-menu[open] > .nav-link {
  background: var(--accent-soft);
  color: var(--accent-d);
}

.top-nav-actions .nav-svg {
  width: 17px;
  height: 17px;
}

.top-nav-actions .dropdown-menu {
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  min-width: 260px;
  border-color: var(--card-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(20, 28, 50, 0.24), 0 1px 3px rgba(20, 28, 50, 0.08);
}

.topbar-search {
  width: min(270px, 22vw);
  flex: 0 1 270px;
}

.topbar-tools {
  flex: 0 0 auto;
}

.app-body .account-menu {
  flex: 0 0 auto;
}

.content {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

@media (max-width: 1180px) {
  .app-body .topbar-inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .top-nav-actions {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 960px) {
  .app-body .topbar-inner {
    width: min(100% - 28px, 1120px);
    min-height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(21, 27, 35, 0.1);
  }

  .top-nav-actions,
  .topbar-search,
  .topbar-tools,
  .app-body .account-menu {
    display: none;
  }

  .mobile-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 999px;
  }

  .mobile-menu {
    position: relative;
    display: block;
    flex: 0 0 auto;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .content {
    width: min(100% - 28px, 1120px);
    padding: 24px 0 42px;
  }
}

/* Final spacious top navigation refinement - keep last */
@media (min-width: 961px) {
  .app-body .topbar {
    background: rgba(255, 255, 255, 0.98);
  }

  .app-body .topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto auto;
    grid-template-areas:
      "brand search tools account"
      "nav nav nav nav";
    align-items: center;
    row-gap: 13px;
    column-gap: 20px;
    width: min(1240px, calc(100% - 48px));
    min-height: 118px;
    padding: 16px 0 14px;
  }

  .app-body .topbar .brand {
    grid-area: brand;
    gap: 13px;
  }

  .app-body .topbar .brand img {
    width: 44px;
    height: 44px;
  }

  .app-body .topbar .brand span {
    color: var(--heading);
    font-size: 16px;
    white-space: nowrap;
  }

  .topbar-search {
    grid-area: search;
    justify-self: end;
    width: min(380px, 100%);
    min-height: 42px;
    flex: none;
  }

  .topbar-tools {
    grid-area: tools;
    margin-left: 0;
  }

  .app-body .account-menu {
    grid-area: account;
  }

  .top-nav-actions {
    grid-area: nav;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 0 0;
    border-top: 1px solid var(--card-border);
    overflow: visible;
  }

  .top-nav-actions .nav-link {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
  }

  .top-nav-actions .nav-link:hover,
  .top-nav-actions .nav-link.active,
  .top-nav-actions .nav-menu[open] > .nav-link {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--card-border));
    background: var(--accent-soft);
  }

  .top-nav-actions .dropdown-menu {
    top: calc(100% + 8px);
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .app-body .topbar-inner {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    grid-template-areas:
      "brand search account"
      "tools tools tools"
      "nav nav nav";
    min-height: 158px;
  }

  .topbar-tools {
    justify-self: start;
  }
}

/* Spacious top navigation refinement */
@media (min-width: 961px) {
  .app-body .topbar {
    background: rgba(255, 255, 255, 0.98);
  }

  .app-body .topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto auto;
    grid-template-areas:
      "brand search tools account"
      "nav nav nav nav";
    align-items: center;
    row-gap: 13px;
    column-gap: 20px;
    width: min(1240px, calc(100% - 48px));
    min-height: 118px;
    padding: 16px 0 14px;
  }

  .app-body .topbar .brand {
    grid-area: brand;
    gap: 13px;
  }

  .app-body .topbar .brand img {
    width: 44px;
    height: 44px;
  }

  .app-body .topbar .brand span {
    color: var(--heading);
    font-size: 16px;
    white-space: nowrap;
  }

  .topbar-search {
    grid-area: search;
    justify-self: end;
    width: min(380px, 100%);
    min-height: 42px;
    flex: none;
  }

  .topbar-tools {
    grid-area: tools;
    margin-left: 0;
  }

  .app-body .account-menu {
    grid-area: account;
  }

  .top-nav-actions {
    grid-area: nav;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 0 0;
    border-top: 1px solid var(--card-border);
    overflow: visible;
  }

  .top-nav-actions .nav-link {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
  }

  .top-nav-actions .nav-link:hover,
  .top-nav-actions .nav-link.active,
  .top-nav-actions .nav-menu[open] > .nav-link {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--card-border));
    background: var(--accent-soft);
  }

  .top-nav-actions .dropdown-menu {
    top: calc(100% + 8px);
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .app-body .topbar-inner {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    grid-template-areas:
      "brand search account"
      "tools tools tools"
      "nav nav nav";
    min-height: 158px;
  }

  .topbar-tools {
    justify-self: start;
  }
}
.room-preview {
  position: sticky;
  top: 22px;
  align-self: start;
}

.room-preview-media {
  overflow: hidden;
  height: 210px;
  margin: 14px 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf1f4;
}


.booking-summary-panel h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 20px;
}

.booking-summary-panel p {
  color: var(--muted);
}

.booking-summary-list {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.booking-summary-list div {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  padding: 13px 14px;
}

.booking-summary-list div:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.booking-summary-list dt {
  color: #5d6673;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.booking-summary-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.room-preview .is-hidden,
.is-hidden {
  display: none;
}

.room-image-upload {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.room-image-preview {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 4 / 3;
  border: 1px solid #c6ced8;
  border-radius: 8px;
  background: #e8f1ef;
}

.room-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-image-preview span {
  color: var(--brand-dark);
  font-size: 34px;
  font-weight: 700;
}

.room-image-controls {
  display: grid;
  gap: 10px;
}

.image-status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #edf1f4;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.image-status.uploaded {
  background: #e7f4ee;
  color: #17634a;
}

.image-status.default {
  background: #e8f1ef;
  color: var(--brand-dark);
}

.image-status.missing {
  background: #fff4d6;
  color: var(--warning);
}

input[type="file"] {
  padding: 10px;
  border-style: dashed;
  background: #ffffff;
}

.room-table-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.room-thumb {
  overflow: hidden;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  height: 44px;
  border-radius: 8px;
  background: #e8f1ef;
}

.room-thumb.is-missing {
  background: #fff4d6;
}

.room-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-thumb span {
  color: var(--brand-dark);
  font-weight: 700;
}

.room-photo-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dashboard-heading {
  align-items: center;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-stat-grid-user {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-stat-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
  min-height: 126px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.dashboard-stat-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(21, 27, 35, 0.11);
}

.dashboard-stat-icon {
  grid-row: span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #e8f1ef;
  color: var(--brand-dark);
  font-size: 20px;
  font-weight: 800;
}

.dashboard-stat-label {
  color: #344054;
  font-size: 14px;
  font-weight: 800;
}

.dashboard-stat-card strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.dashboard-stat-note {
  color: var(--muted);
  font-weight: 700;
}

.stat-calendar .dashboard-stat-icon {
  background: #e8eefc;
  color: #175cd3;
}

.stat-pending .dashboard-stat-icon {
  background: #f2e8ff;
  color: #6f35b5;
}

.stat-users .dashboard-stat-icon {
  background: #fff4d6;
  color: var(--warning);
}

.dashboard-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 18px;
  align-items: start;
}

.dashboard-live-panel {
  display: grid;
  gap: 16px;
  min-height: 0;
  margin-top: 0;
  padding: 22px;
}

.dashboard-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-panel-heading h2 {
  margin: 0;
  font-size: 20px;
}

.dashboard-panel-heading a,
.dashboard-panel-link {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.dashboard-booking-list,
.dashboard-schedule-list {
  display: grid;
  gap: 10px;
}

.dashboard-booking-item,
.dashboard-request-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.dashboard-request-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #e8f1ef;
  color: var(--brand-dark);
  font-weight: 800;
}

.dashboard-booking-item h3,
.dashboard-request-item h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 16px;
}

.dashboard-booking-item p,
.dashboard-request-item p {
  margin: 0 0 5px;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-booking-item span:not(.dashboard-item-icon):not(.status),
.dashboard-request-item span:not(.status) {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-item-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.dashboard-item-actions .button {
  width: 92px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.dashboard-item-actions.compact {
  align-items: center;
  grid-template-columns: auto auto;
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-action-card {
  display: grid;
  gap: 10px;
  place-items: center;
  min-height: 128px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.dashboard-action-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(21, 27, 35, 0.1);
}

.dashboard-action-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #e8f1ef;
  color: var(--brand-dark);
  font-size: 17px;
}

.dashboard-schedule-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.dashboard-schedule-row:last-child {
  border-bottom: 0;
}

.dashboard-schedule-row span {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-schedule-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-schedule-row em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e8f1ef;
  color: var(--brand-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.dashboard-empty {
  min-height: 126px;
  align-content: center;
}

.next-booking-card {
  padding: 30px;
}

.next-booking-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.next-booking-title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.next-booking-icon {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e8f1ef;
}

.next-booking-icon::before,
.next-booking-icon::after {
  content: "";
  position: absolute;
  left: 17px;
  width: 20px;
  border: 2px solid var(--brand);
  border-radius: 4px;
}

.next-booking-icon::before {
  top: 17px;
  height: 18px;
}

.next-booking-icon::after {
  top: 22px;
  height: 0;
  border-bottom: 0;
}

.next-booking-card-header h2 {
  margin: 0 0 4px;
  font-size: 28px;
}

.next-status-row {
  margin-top: 28px;
}

.next-status-row .status {
  min-height: 38px;
  padding: 0 16px;
  font-size: 15px;
}

.next-booking-name {
  margin: 18px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
}

.next-booking-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 42px;
  margin-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.next-date-card {
  overflow: hidden;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
  text-align: center;
}

.next-date-day {
  display: block;
  padding: 10px;
  background: var(--brand);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.next-date-card strong {
  display: block;
  margin-top: 18px;
  color: var(--ink);
  font-size: 54px;
  line-height: 1;
}

.next-date-card span:last-of-type {
  display: block;
  margin: 10px 0 18px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.next-date-card a {
  display: block;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #e8f1ef;
  color: var(--brand-dark);
  font-weight: 700;
}

.next-booking-detail-list {
  display: grid;
  gap: 16px;
}

.next-detail-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
}

.next-detail-row span:not(.detail-dot) {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.next-detail-row strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}

.next-detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.6fr);
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detail-dot {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #e8f1ef;
}

.detail-dot.room {
  background: #e8f1ef;
}

.detail-dot.location {
  background: #eceff3;
}

.detail-dot.time,
.detail-dot.date {
  background: #e8edf3;
}

.detail-dot.duration {
  background: #fff4d6;
}

.next-booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.admin-booking-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.summary-card {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.summary-card:hover,
.summary-card.active {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(21, 27, 35, 0.1);
}

.summary-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.summary-card strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.summary-card.pending.active,
.summary-card.pending:hover {
  border-color: #b77900;
}

.summary-card.approved.active,
.summary-card.approved:hover,
.summary-card.open.active,
.summary-card.open:hover,
.summary-card.resolved.active,
.summary-card.resolved:hover {
  border-color: #17634a;
}

.summary-card.in_progress.active,
.summary-card.in_progress:hover {
  border-color: #35506f;
}

.summary-card.rejected.active,
.summary-card.cancelled.active,
.summary-card.rejected:hover,
.summary-card.cancelled:hover {
  border-color: var(--danger);
}

.filter-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.filter-heading-row h2 {
  margin-bottom: 4px;
}

.filter-heading-row p {
  margin: 0;
  color: var(--muted);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.active-filters span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e8f1ef;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
}
.filter-panel {
  margin-bottom: 18px;
}

.filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: end;
  margin-top: 14px;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.issue-board {
  display: grid;
  gap: 18px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.issue-board-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
}

.issue-board-top h1 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  text-transform: uppercase;
}

.issue-board-top p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.issue-filter-form {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(190px, 230px);
  gap: 18px;
  align-items: end;
}

.issue-filter-field {
  display: grid;
  gap: 9px;
}

.issue-filter-field label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.issue-filter-field select,
.issue-select-shell {
  min-height: 54px;
  border: 1px solid #cbd5df;
  border-radius: 10px;
  background: #ffffff;
}

.issue-filter-field select {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.issue-select-shell {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding-left: 16px;
}

.issue-select-shell select {
  min-height: 52px;
  border: 0;
  padding-left: 0;
}

.issue-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #8d9aa8;
}

.issue-status-dot.open {
  background: #28a66f;
}

.issue-status-dot.in_progress {
  background: #4d6f96;
}

.issue-status-dot.resolved {
  background: #17634a;
}

.issue-board-header {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.1fr .95fr 1.05fr;
  min-height: 74px;
  align-items: center;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f9fb;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.issue-list {
  display: grid;
  gap: 18px;
}

.issue-card {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.1fr .95fr 1.05fr;
  min-height: 292px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(21, 27, 35, 0.08);
}

.issue-card-section {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: 24px;
}

.issue-card-section + .issue-card-section {
  border-left: 1px solid var(--line);
}

.issue-main {
  align-content: start;
  gap: 20px;
  background: linear-gradient(180deg, #f5fbf8 0%, #ffffff 100%);
}

.issue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #e6f4ec;
  color: var(--brand);
}

.issue-icon .nav-svg {
  width: 28px;
  height: 28px;
}

.issue-main h2,
.issue-column-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.issue-main h2 {
  font-size: 22px;
}

.issue-main p,
.issue-column-copy p,
.issue-status-section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.issue-main p {
  font-size: 15px;
}

.issue-main-head {
  display: grid;
  gap: 12px;
}

.issue-description {
  padding: 14px;
  border: 1px solid #cfe5dc;
  border-left: 5px solid var(--brand);
  border-radius: 9px;
  background: #ffffff;
  color: #1f2d28 !important;
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.55 !important;
}

.issue-urgency-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e8f1ef;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.issue-urgency-chip.urgent {
  background: #fff0f2;
  color: var(--danger);
}

.issue-column-copy {
  display: grid;
  gap: 8px;
}

.issue-column-copy p {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.issue-meta-list {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.issue-meta-list span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}

.issue-meta-list .nav-svg {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.issue-meta-list strong {
  color: var(--ink);
  font-size: 14px;
}

.issue-meta-list em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.issue-mini-button {
  justify-self: start;
  min-height: 40px;
  padding: 0 14px;
  border-color: #77b99a;
  color: var(--brand-dark);
}

.issue-status-section {
  align-content: center;
}

.issue-status-section .status {
  justify-self: start;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 16px;
}

.issue-status-section .status i {
  display: inline-flex;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

.issue-status-section p {
  font-size: 14px;
}

.issue-actions-section {
  position: relative;
  align-content: start;
}

.issue-more {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
}

.issue-actions-section form {
  display: grid;
  gap: 12px;
  padding-top: 52px;
}

.issue-actions-section label {
  font-size: 13px;
}

.issue-actions-section select {
  min-height: 42px;
}

.issue-actions-section textarea {
  min-height: 116px;
}

.issue-actions-section .button {
  min-height: 46px;
  width: 100%;
}

.issue-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 42px 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #f8faf9;
  text-align: center;
}

.issue-empty h2,
.issue-empty p {
  margin: 0;
}

.issue-board-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
}

.issue-pager {
  display: flex;
  align-items: center;
  gap: 10px;
}

.issue-pager button,
.issue-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.issue-pager span {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.issue-pager button:disabled {
  color: #a7b0ba;
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .issue-board {
    padding: 22px;
  }

  .issue-board-top {
    grid-template-columns: 1fr;
  }

  .issue-filter-form {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issue-board-header,
  .issue-card {
    grid-template-columns: 1.25fr 1fr 1fr 1fr .9fr 1.1fr;
  }

  .issue-card-section {
    padding: 20px;
  }
}

@media (max-width: 900px) {
  .issue-board {
    padding: 18px;
    border-radius: 10px;
  }

  .issue-board-top h1 {
    font-size: 25px;
  }

  .issue-board-top p {
    font-size: 15px;
  }

  .issue-board-header {
    display: none;
  }

  .issue-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .issue-card-section {
    align-content: start;
    padding: 18px;
  }

  .issue-card-section + .issue-card-section {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .issue-card-section::before {
    content: attr(aria-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .issue-main::before {
    content: none;
  }

  .issue-icon {
    width: 48px;
    height: 48px;
  }

  .issue-icon .nav-svg {
    width: 23px;
    height: 23px;
  }

  .issue-main h2,
  .issue-column-copy h3 {
    font-size: 18px;
  }

  .issue-actions-section form {
    padding-top: 18px;
  }

  .issue-more {
    display: none;
  }
}

@media (max-width: 560px) {
  .issue-board {
    gap: 14px;
    padding: 14px;
    margin-right: -4px;
    margin-left: -4px;
  }

  .issue-filter-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .issue-filter-field select,
  .issue-select-shell {
    min-height: 48px;
  }

  .issue-select-shell select {
    min-height: 46px;
  }

  .issue-card-section {
    gap: 12px;
    padding: 15px;
  }

  .issue-main {
    gap: 14px;
  }

  .issue-main p,
  .issue-column-copy p,
  .issue-status-section p {
    font-size: 13px;
  }

  .issue-meta-list {
    gap: 12px;
    padding-top: 14px;
  }

  .issue-status-section .status {
    min-height: 38px;
    padding: 0 13px;
    font-size: 14px;
  }

  .issue-actions-section textarea {
    min-height: 100px;
  }

  .issue-board-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .issue-pager {
    justify-content: space-between;
  }

  .issue-pager button,
  .issue-pager span {
    min-width: 40px;
    height: 40px;
  }
}

.room-issues-page {
  width: min(1040px, calc(100% - 44px));
  margin: 0 auto;
  padding-bottom: 48px;
}

.room-issues-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.room-issues-heading h1 {
  margin: 0 0 6px;
  color: oklch(0.22 0.012 220);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.08;
}

.room-issues-heading p {
  max-width: 660px;
  margin: 0;
  color: oklch(0.48 0.014 220);
  font-size: 15px;
  line-height: 1.5;
}

.issue-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.issue-filter-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid oklch(0.90 0.006 220);
  border-radius: 10px;
  background: #ffffff;
  color: oklch(0.35 0.014 220);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.issue-filter-tab:hover {
  border-color: oklch(0.78 0.055 162);
  color: oklch(0.38 0.09 162);
  transform: translateY(-1px);
}

.issue-filter-tab strong {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: oklch(0.955 0.008 220);
  color: inherit;
  font-size: 12px;
}

.issue-filter-tab.active {
  border-color: oklch(0.47 0.082 162);
  background: oklch(0.47 0.082 162);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(21, 105, 76, .18);
}

.issue-filter-tab.active strong {
  background: rgba(255, 255, 255, .18);
}

.room-issues-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 42px 20px;
  border: 1px dashed oklch(0.88 0.008 220);
  border-radius: 16px;
  background: #ffffff;
  text-align: center;
}

.room-issues-empty h2,
.room-issues-empty p {
  margin: 0;
}

.room-issues-empty h2 {
  color: oklch(0.24 0.012 220);
  font-size: 20px;
}

.room-issues-empty p {
  color: oklch(0.50 0.014 220);
}

.issue-console {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 540px;
  overflow: hidden;
  border: 1px solid oklch(0.88 0.008 220);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 32, 26, .05);
}

.issue-master-list {
  max-height: 680px;
  overflow: auto;
  border-right: 1px solid oklch(0.90 0.006 220);
  background: oklch(0.985 0.003 220);
}

.issue-master-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid oklch(0.91 0.006 220);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.issue-master-row:hover {
  background: rgba(255, 255, 255, .72);
}

.issue-master-row.selected {
  background: #ffffff;
  box-shadow: inset 3px 0 0 oklch(0.47 0.082 162);
}

.issue-priority-dot {
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 999px;
  background: oklch(0.66 0.09 82);
  box-shadow: 0 0 0 4px rgba(212, 148, 42, .12);
}

.issue-priority-dot.high {
  background: oklch(0.58 0.18 28);
  box-shadow: 0 0 0 4px rgba(203, 70, 47, .12);
}

.issue-priority-dot.low {
  background: oklch(0.54 0.11 150);
  box-shadow: 0 0 0 4px rgba(52, 137, 86, .12);
}

.issue-row-main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.issue-row-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.issue-row-title strong {
  overflow: hidden;
  color: oklch(0.23 0.012 220);
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-row-main small,
.issue-row-main > span:last-child {
  overflow: hidden;
  color: oklch(0.50 0.014 220);
  font-size: 12.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-status-pill,
.issue-priority-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.issue-status-pill.open {
  border-color: oklch(0.84 0.045 250);
  background: oklch(0.94 0.03 250);
  color: oklch(0.45 0.12 250);
}

.issue-status-pill.in-progress {
  border-color: oklch(0.86 0.055 82);
  background: oklch(0.94 0.06 85);
  color: oklch(0.40 0.08 70);
}

.issue-status-pill.resolved {
  border-color: oklch(0.82 0.055 155);
  background: oklch(0.93 0.05 155);
  color: oklch(0.40 0.09 155);
}

.issue-detail-pane {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 24px;
  background: #ffffff;
}

.issue-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.issue-detail-header h2 {
  margin: 0 0 7px;
  color: oklch(0.22 0.012 220);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.18;
}

.issue-detail-header p {
  margin: 0;
  color: oklch(0.48 0.014 220);
  font-size: 14px;
  line-height: 1.5;
}

.issue-detail-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 8px;
}

.issue-priority-pill {
  border-color: oklch(0.86 0.055 82);
  background: oklch(0.965 0.032 82);
  color: oklch(0.43 0.10 82);
}

.issue-priority-pill.high {
  border-color: oklch(0.86 0.065 28);
  background: oklch(0.965 0.030 28);
  color: oklch(0.43 0.14 28);
}

.issue-priority-pill.low {
  border-color: oklch(0.86 0.055 150);
  background: oklch(0.965 0.025 150);
  color: oklch(0.38 0.10 150);
}

.issue-detail-description {
  margin: 0;
  padding: 18px;
  border: 1px solid oklch(0.89 0.008 220);
  border-left: 4px solid oklch(0.47 0.082 162);
  border-radius: 12px;
  background: oklch(0.985 0.003 220);
  color: oklch(0.24 0.012 220);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.issue-admin-note-block {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid oklch(0.88 0.025 162);
  border-radius: 12px;
  background: oklch(0.97 0.018 162);
}

.issue-admin-note-block[hidden] {
  display: none;
}

.issue-admin-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: oklch(0.47 0.082 162);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.issue-admin-note-block h3 {
  margin: 0 0 5px;
  color: oklch(0.28 0.07 162);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.issue-admin-note-block p {
  margin: 0;
  color: oklch(0.28 0.014 220);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
}

.issue-update-form {
  display: grid;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid oklch(0.90 0.006 220);
}

.issue-update-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.issue-update-fields label {
  display: grid;
  gap: 7px;
  color: oklch(0.24 0.012 220);
  font-size: 13px;
  font-weight: 850;
}

.issue-update-fields select,
.issue-update-fields textarea {
  width: 100%;
  border: 1px solid oklch(0.86 0.008 220);
  border-radius: 10px;
  background: #ffffff;
  color: oklch(0.24 0.012 220);
  font: inherit;
}

.issue-update-fields select {
  min-width: 180px;
  min-height: 44px;
}

.issue-note-field {
  flex: 1 1 360px;
}

.issue-note-field small {
  color: oklch(0.50 0.014 220);
  font-weight: 700;
}

.issue-update-fields textarea {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

.issue-update-fields select:focus,
.issue-update-fields textarea:focus {
  outline: none;
  border-color: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 4px oklch(0.93 0.035 162);
}

.issue-update-button {
  justify-self: end;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid oklch(0.47 0.082 162);
  border-radius: 10px;
  background: oklch(0.47 0.082 162);
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(21, 105, 76, .18);
}

.issue-update-button:disabled {
  border-color: oklch(0.82 0.01 220);
  background: oklch(0.82 0.01 220);
  color: oklch(0.50 0.014 220);
  box-shadow: none;
  cursor: not-allowed;
}

.issue-console-footer {
  margin-top: 16px;
}

@media (max-width: 820px) {
  .room-issues-heading {
    align-items: start;
    flex-direction: column;
  }

  .room-issues-heading h1 {
    font-size: 26px;
  }

  .issue-console {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .issue-master-list {
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid oklch(0.90 0.006 220);
  }

  .issue-detail-pane {
    padding: 20px;
  }

  .issue-detail-header {
    grid-template-columns: 1fr;
  }

  .issue-detail-pills {
    justify-content: start;
  }

  .issue-update-button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .room-issues-page {
    width: min(100%, calc(100% - 24px));
  }

  .issue-filter-tab {
    flex: 1 1 calc(50% - 8px);
    justify-content: space-between;
  }

  .issue-row-title {
    align-items: start;
    flex-direction: column;
    gap: 7px;
  }

  .issue-row-main small,
  .issue-row-main > span:last-child {
    white-space: normal;
  }

  .issue-detail-pane {
    padding: 18px;
  }

  .issue-detail-header h2 {
    font-size: 21px;
  }
}

.user-filter-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field.full {
  grid-column: 1 / -1;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.check-field.full {
  grid-column: 1 / -1;
}

.check-field input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

label {
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.field-help {
  font-size: 13px;
}

.field-warning {
  display: none;
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
}

.field-warning.show {
  display: block;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid var(--danger);
  border-radius: 8px;
  background: #fff0f2;
}

.field-status {
  display: none;
  margin: 0;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.field-status.show {
  display: block;
}

.field-status.checking {
  background: #edf1f4;
  color: #5d6673;
}

.field-status.success {
  background: #e7f4ee;
  color: #17634a;
}

.field-status.error {
  background: #fbe7ea;
  color: var(--danger);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #c6ced8;
  border-radius: 8px;
  color: var(--ink);
  background: #ffffff;
}

input[readonly] {
  background: #f7f8fa;
  color: #5d6673;
}

input,
select {
  min-height: 44px;
  padding: 0 12px;
}

input[type="datetime-local"] {
  width: 60%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #d8dde3;
  border-radius: 10px;
  color: var(--ink);
  background: #ffffff;
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

#maintenance-form,
#maintenance-form .form-grid,
#maintenance-form .field {
  min-width: 0;
  max-width: 100%;
}

#maintenance-form {
  overflow: hidden;
}

input[type="datetime-local"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  margin-left: auto;
}

textarea {
  min-height: 110px;
  padding: 12px;
  resize: vertical;
}

.uppercase-input {
  text-transform: uppercase;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(0, 107, 95, 0.18);
  border-color: var(--brand);
}

.message {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 700;
}

.message.error {
  background: #fbe7ea;
  color: var(--danger);
}

.message.success {
  background: #e7f4ee;
  color: #17634a;
}

.confirm-modal[hidden] {
  display: none;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
}

.confirm-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid #efc7cf;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.confirm-dialog-header {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
}

.confirm-dialog h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.confirm-note-field {
  display: grid;
  gap: 8px;
}

.confirm-note-field[hidden] {
  display: none;
}

.confirm-note-field textarea {
  min-height: 104px;
}

.confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fbe7ea;
  color: var(--danger);
  font-size: 24px;
  font-weight: 700;
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: #344054;
  background: #f7f8fa;
  font-size: 13px;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rooms-admin-table {
  min-width: 900px;
  table-layout: fixed;
}

.rooms-admin-table th:nth-child(1) {
  width: 30%;
}

.rooms-admin-table th:nth-child(2) {
  width: 12%;
}

.rooms-admin-table th:nth-child(3) {
  width: 25%;
}

.rooms-admin-table th:nth-child(4) {
  width: 13%;
}

.rooms-admin-table th:nth-child(5) {
  width: 20%;
}

.rooms-admin-table td {
  vertical-align: middle;
}

.rooms-admin-table .button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.rooms-admin-table .table-actions {
  align-items: center;
}

.time-range {
  display: grid;
  gap: 4px;
}

.admin-bookings-table {
  min-width: 980px;
  table-layout: fixed;
}

.admin-bookings-table th:nth-child(1) {
  width: 20%;
}

.admin-bookings-table th:nth-child(2) {
  width: 19%;
}

.admin-bookings-table th:nth-child(3) {
  width: 17%;
}

.admin-bookings-table th:nth-child(4) {
  width: 19%;
}

.admin-bookings-table th:nth-child(5) {
  width: 15%;
}

.admin-bookings-table th:nth-child(6) {
  width: 10%;
}

.admin-bookings-table th,
.admin-bookings-table td {
  padding: 16px 18px;
}

.admin-bookings-table td {
  vertical-align: middle;
}

.booking-request-cell strong,
.booking-user-cell strong,
.booking-room-cell strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  line-height: 1.3;
}

.booking-request-cell span,
.booking-user-cell span,
.booking-room-cell span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.35;
  text-overflow: ellipsis;
}

.booking-user-cell span {
  white-space: nowrap;
}

.booking-time-cell {
  white-space: nowrap;
}

.time-date {
  color: var(--ink);
  font-weight: 700;
}

.time-hours {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.time-item {
  display: grid;
  gap: 2px;
}

.time-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-bookings-table .status {
  min-height: 30px;
  padding: 4px 11px;
  line-height: 1.25;
}

.admin-bookings-table .table-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.admin-bookings-table .button {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.room-blocks-table {
  min-width: 820px;
}

.room-blocks-table td {
  vertical-align: middle;
}

.room-blocks-table td span {
  color: var(--muted);
}

.room-blocks-table .button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.affected-bookings-panel {
  padding: 22px;
  border-color: #ead18a;
  border-left: 5px solid #b77900;
  background: #ffffff;
}

.affected-bookings-panel .calendar-section-heading {
  align-items: center;
}

.affected-bookings-panel .calendar-section-heading h2 {
  font-size: 24px;
}

.affected-bookings-panel .calendar-section-heading p {
  max-width: 820px;
  font-size: 15px;
  line-height: 1.45;
}

.affected-bookings-panel .calendar-section-heading > .status {
  min-height: 34px;
  padding: 0 14px;
  font-size: 14px;
}

.affected-bookings-notice {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #ead18a;
  border-radius: 8px;
  background: #fffaf0;
}

.affected-bookings-notice strong {
  color: var(--warning);
  font-size: 16px;
  line-height: 1.3;
}

.affected-bookings-notice span {
  color: #667085;
  font-size: 14px;
  line-height: 1.4;
}

.affected-bookings-wrap {
  border-color: #ead18a;
  border-radius: 8px;
  box-shadow: none;
}

.affected-bookings-table {
  min-width: 1080px;
  table-layout: fixed;
}

.affected-bookings-table th:nth-child(1) {
  width: 19%;
}

.affected-bookings-table th:nth-child(2) {
  width: 24%;
}

.affected-bookings-table th:nth-child(3) {
  width: 21%;
}

.affected-bookings-table th:nth-child(4) {
  width: 14%;
}

.affected-bookings-table th:nth-child(5) {
  width: 22%;
}

.affected-bookings-table th {
  padding: 14px 16px;
  background: #f7f8fa;
  color: #263447;
  font-size: 12px;
  letter-spacing: 0;
}

.affected-bookings-table td {
  padding: 16px;
  vertical-align: middle;
  background: #ffffff;
}

.affected-bookings-table td strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
}

.affected-bookings-table td span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.affected-bookings-table .time-range {
  gap: 2px;
}

.affected-bookings-table .status {
  min-height: 32px;
  max-width: 150px;
  padding: 4px 11px;
  line-height: 1.2;
  white-space: normal;
}

.affected-bookings-table .table-actions {
  display: grid;
  gap: 10px;
}

.affected-bookings-table .button {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.relocation-form {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #b9d8cf;
  border-radius: 8px;
  background: #eef8f5;
}

.relocation-form label {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.relocation-form select {
  min-height: 40px;
  font-size: 13px;
}

.relocation-form .field-help {
  margin: 0;
  color: #35506f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.relocation-empty {
  padding: 11px 12px;
  border: 1px solid #efc7cf;
  border-radius: 8px;
  background: #fff5f6;
  color: var(--danger);
  font-size: 13px;
  font-weight: 800;
}

.inline-form {
  display: inline;
}

.booking-relocation-panel {
  border-left: 6px solid var(--brand);
}

.booking-relocation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.booking-relocation-heading h2 {
  margin-bottom: 4px;
}

.booking-relocation-form {
  gap: 16px;
}

.booking-relocation-form .button {
  width: min(220px, 100%);
}

.booking-history-panel {
  overflow: hidden;
}

.booking-history-list {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.booking-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
}

.booking-history-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 0;
  left: 16px;
  width: 2px;
  background: #cfd6df;
}

.booking-history-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: 4px solid #e8f1ef;
  border-radius: 999px;
  background: var(--brand);
}

.booking-history-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.booking-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.booking-history-head strong {
  color: var(--ink);
  font-size: 16px;
}

.booking-history-head span,
.booking-history-card p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.booking-history-room-change {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.booking-history-room-change div {
  padding: 10px 12px;
  border: 1px solid #d8e8e3;
  border-radius: 8px;
  background: #f5fbf8;
}

.booking-history-room-change dt {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.booking-history-room-change dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-weight: 800;
}

.booking-history-note {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f8fa;
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.booking-title-meta {
  margin-bottom: 10px;
}

.booking-overview {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.booking-overview.pending {
  border-left-color: #b77900;
}

.booking-overview.approved {
  border-left-color: #17634a;
}

.booking-overview.rejected,
.booking-overview.cancelled {
  border-left-color: var(--danger);
}

.booking-status-banner {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.booking-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.booking-overview.pending .booking-status-icon {
  background: #b77900;
}

.booking-overview.approved .booking-status-icon {
  background: #17634a;
}

.booking-overview.rejected .booking-status-icon,
.booking-overview.cancelled .booking-status-icon {
  background: var(--danger);
}

.booking-status-banner h2 {
  margin: 10px 0 4px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
}

.booking-status-banner p {
  margin: 0;
  color: var(--muted);
}

.booking-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.booking-fact {
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.booking-fact span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.booking-fact strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.booking-action-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.booking-action-strip h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.booking-action-strip p {
  margin: 0;
  color: var(--muted);
}

.booking-action-strip textarea {
  min-height: 86px;
}

.booking-action-strip .table-actions {
  justify-content: flex-end;
}

.booking-detail-grid {
  align-items: start;
}

.booking-progress {
  margin-bottom: 18px;
}

.progress-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.progress-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  min-height: 84px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.progress-dot {
  width: 28px;
  height: 28px;
  border: 3px solid #c6ced8;
  border-radius: 999px;
  background: #ffffff;
}

.progress-step strong,
.progress-step span {
  display: block;
}

.progress-step strong {
  color: var(--ink);
}

.progress-step span {
  color: var(--muted);
  font-size: 13px;
}

.progress-step.done .progress-dot {
  border-color: var(--brand);
  background: var(--brand);
}

.progress-step.current {
  border-color: #b77900;
  background: #fff8e6;
}

.progress-step.current .progress-dot {
  border-color: #b77900;
  background: #fff4d6;
}

.progress-step.waiting {
  color: #5d6673;
}

.progress-step.stopped {
  border-color: #efc7cf;
  background: #fff5f6;
}

.progress-step.stopped .progress-dot {
  border-color: var(--danger);
  background: #fbe7ea;
}

.detail-list {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(110px, 180px) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.detail-row:first-child {
  padding-top: 0;
}

.detail-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.detail-row dt {
  color: #344054;
  font-weight: 700;
}

.detail-row dd {
  margin: 0;
  color: var(--ink);
}

.detail-row dd span {
  color: var(--muted);
}

.preserve-lines {
  white-space: pre-wrap;
}

.gap-top {
  margin-top: 16px;
}

.gap-top-small {
  margin-top: 14px;
}

.calendar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.calendar-controls select {
  width: min(240px, 100%);
}

.calendar-frame {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.calendar-frame-compact {
  padding: 18px;
}

.calendar-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.calendar-section-heading h2 {
  margin: 0;
}

.calendar-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5d6673;
  font-size: 13px;
  font-weight: 700;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #c6ced8;
}

.legend-dot.available {
  background: var(--brand);
}

.legend-dot.pending {
  background: #b77900;
}

.legend-dot.approved {
  background: #17634a;
}

.legend-dot.maintenance {
  background: #64748b;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(170px, 1fr));
  gap: 12px;
  overflow-x: auto;
}

.slot-day {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}

.slot-day strong {
  font-size: 14px;
}

.slot-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.slot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #c6ced8;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}

.slot-button:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.slot-button.unavailable {
  border-color: #efc7cf;
  background: #fbe7ea;
  color: var(--danger);
}

.slot-button.unavailable.past {
  border-color: #c6ced8;
  background: #e5e8ec;
  color: #667085;
}

.slot-button.unavailable.maintenance {
  border-color: #ead18a;
  background: #fff8e6;
  color: var(--warning);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(180px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #edf1f4;
}

.calendar-day {
  min-height: 260px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.calendar-day.today {
  background: #edf7f4;
  border-color: var(--brand);
}

.calendar-day.past {
  background: #f0f2f4;
}

.calendar-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-date strong {
  font-size: 16px;
}

.calendar-date span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.calendar-events {
  display: grid;
  gap: 8px;
}

.calendar-empty {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 12px;
  border: 1px dashed #b8c1cc;
  border-radius: 8px;
  background: #f7f8fa;
  text-align: center;
}

.calendar-empty.past {
  border-color: #c6ced8;
  background: #e5e8ec;
}

.calendar-empty strong {
  color: var(--brand-dark);
  font-size: 14px;
}

.calendar-empty.past strong {
  color: #5d6673;
}

.calendar-empty span {
  color: var(--muted);
  font-size: 13px;
}

.calendar-event {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: #f7f8fa;
}

.calendar-event.pending {
  border-left-color: #b77900;
}

.calendar-event.approved {
  border-left-color: var(--brand);
}

.calendar-event.maintenance {
  border-left-color: #667085;
  background: #f7f8fa;
}


.slot-button.unavailable.booked {
  border-color: #efc7cf;
  background: #fbe7ea;
  color: var(--danger);
}

.calendar-event-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #edf1f4;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar-event.pending {
  border-left-color: #b77900;
  background: #fff8e6;
}

.calendar-event.pending .calendar-event-status {
  background: #fff4d6;
  color: var(--warning);
}

.calendar-event.approved {
  border-left-color: #17634a;
  background: #f0f8f4;
}

.calendar-event.approved .calendar-event-status {
  background: #e7f4ee;
  color: #17634a;
}

.calendar-event.maintenance {
  border-left-color: #667085;
  background: #f1f3f5;
}

.calendar-event.maintenance .calendar-event-status {
  background: #e5e8ec;
  color: #344054;
}
.calendar-event strong {
  font-size: 14px;
}

.calendar-event span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 820px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 0;
    background: rgba(245, 246, 248, 0.92);
    backdrop-filter: blur(10px);
  }

  .topbar-inner {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    min-height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(21, 27, 35, 0.1);
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-actions {
    display: none;
  }

  .account-menu {
    display: none;
  }

  .mobile-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 999px;
  }

  .mobile-profile-link:focus-visible {
    outline: 3px solid rgba(0, 107, 95, 0.22);
    outline-offset: 3px;
  }

  .mobile-profile-link .avatar {
    width: 42px;
    height: 42px;
  }

  .mobile-menu {
    position: relative;
    display: block;
    flex: 0 0 auto;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .mobile-dropdown {
    position: fixed;
    top: 72px;
    right: 14px;
    z-index: 70;
    width: min(292px, calc(100vw - 28px));
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(21, 27, 35, 0.14);
  }

  .mobile-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 18px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: #ffffff;
    transform: rotate(45deg);
  }

  .page-heading {
    flex-direction: column;
  }

  .grid,
  .grid.two,
  .grid.four,
  .form-grid,
  .filter-form {
    grid-template-columns: 1fr;
  }

  .dashboard-stat-grid,
  .dashboard-stat-grid-user {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-live-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-schedule-row {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .dashboard-schedule-row em {
    justify-self: start;
  }

  .booking-flow-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-flow-step:not(:last-child)::after {
    display: none;
  }

  .room-picker-controls {
    grid-template-columns: 1fr;
  }

  .room-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-summary-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .room-image-upload {
    grid-template-columns: 1fr;
  }

  .room-image-preview {
    width: 100%;
    max-width: 240px;
  }

  .filter-actions {
    flex-wrap: wrap;
  }

  .page-heading > .button,
  .calendar-controls .button,
  .panel > form .button,
  .room-meta .button,
  .filter-actions .button,
  .empty .button,
  .confirm-actions .button {
    flex: 1 1 158px;
  }

  .admin-booking-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .active-filters {
    justify-content: flex-start;
  }


  .booking-status-banner {
    grid-template-columns: 1fr;
  }

  .booking-action-strip {
    grid-template-columns: 1fr;
  }

  .booking-action-strip .table-actions {
    justify-content: stretch;
  }

  .booking-action-strip .button {
    width: 100%;
  }

  .booking-relocation-heading,
  .booking-history-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-relocation-form .button {
    width: 100%;
  }

  .booking-history-room-change {
    grid-template-columns: 1fr;
  }
  .booking-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .next-booking-layout,
  .next-detail-split {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .room-preview {
    position: static;
  }

  .progress-steps {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .admin-bookings-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .admin-bookings-table {
    display: block;
    min-width: 0;
    border-collapse: separate;
  }

  .admin-bookings-table thead {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin-bookings-table tbody {
    display: grid;
    gap: 14px;
  }

  .admin-bookings-table tr {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }

  .admin-bookings-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 0;
    border-bottom: 0;
  }

  .admin-bookings-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .admin-bookings-table td span {
    overflow-wrap: anywhere;
  }

  .admin-bookings-table .booking-request-cell {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .admin-bookings-table .booking-request-cell::before {
    content: none;
  }

  .admin-bookings-table .booking-request-cell strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
  }

  .admin-bookings-table .time-range {
    gap: 6px;
  }

  .admin-bookings-table .booking-user-cell span,
  .admin-bookings-table .booking-time-cell {
    white-space: normal;
  }

  .admin-bookings-table .status {
    justify-self: start;
    height: auto;
    min-height: 30px;
    padding: 5px 11px;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
  }

  .admin-bookings-table .booking-actions-cell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 4px;
  }

  .admin-bookings-table .booking-actions-cell::before {
    content: attr(data-label);
  }

  .admin-bookings-table .table-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-bookings-table .inline-form {
    display: block;
  }

  .admin-bookings-table .button {
    width: 100%;
  }

  .rooms-admin-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .rooms-admin-table {
    display: block;
    min-width: 0;
    border-collapse: separate;
  }

  .rooms-admin-table thead {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .rooms-admin-table tbody {
    display: grid;
    gap: 14px;
  }

  .rooms-admin-table tr {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }

  .rooms-admin-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 0;
    border-bottom: 0;
  }

  .rooms-admin-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .rooms-admin-table .room-admin-main-cell {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .rooms-admin-table .room-admin-main-cell::before {
    content: none;
  }

  .rooms-admin-table .room-table-cell {
    align-items: flex-start;
  }

  .rooms-admin-table .room-thumb {
    width: 86px;
    height: 64px;
  }

  .rooms-admin-table .room-actions-cell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 4px;
  }

  .rooms-admin-table .room-actions-cell::before {
    content: attr(data-label);
  }

  .rooms-admin-table .table-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rooms-admin-table .inline-form {
    display: block;
  }

  .rooms-admin-table .button {
    width: 100%;
  }

  .room-blocks-table {
    display: block;
    min-width: 0;
    border-collapse: separate;
  }

  .room-blocks-table thead {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .room-blocks-table tbody {
    display: grid;
    gap: 14px;
  }

  .room-blocks-table tr {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }

  .room-blocks-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 0;
    border-bottom: 0;
  }

  .room-blocks-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .room-blocks-table td span {
    overflow-wrap: anywhere;
  }

  .room-blocks-table .mobile-card-title {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .room-blocks-table .mobile-card-title::before {
    content: none;
  }

  .room-blocks-table .mobile-card-title strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
  }

  .affected-bookings-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .affected-bookings-table {
    display: block;
    min-width: 0;
    border-collapse: separate;
  }

  .affected-bookings-table thead {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .affected-bookings-table tbody {
    display: grid;
    gap: 14px;
  }

  .affected-bookings-table tr {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #ead18a;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }

  .affected-bookings-table th,
  .affected-bookings-table td {
    padding: 0;
    border-bottom: 0;
  }

  .affected-bookings-table td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .affected-bookings-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .affected-bookings-table .mobile-card-title {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid #ead18a;
  }

  .affected-bookings-table .mobile-card-title::before {
    content: none;
  }

  .affected-bookings-table .mobile-card-title strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
  }

  .affected-bookings-table .status {
    justify-self: start;
    height: auto;
    min-height: 30px;
    padding: 5px 11px;
    line-height: 1.25;
    white-space: normal;
  }

  .affected-bookings-table .mobile-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 4px;
  }

  .affected-bookings-table .mobile-card-actions::before {
    content: attr(data-label);
  }

  .affected-bookings-table .inline-form {
    display: block;
  }

  .room-blocks-table .mobile-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 4px;
  }

  .room-blocks-table .mobile-card-actions::before {
    content: attr(data-label);
  }

  .room-blocks-table .table-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .room-blocks-table .inline-form {
    display: block;
  }

  .room-blocks-table .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .topbar-inner,
  .main {
    width: min(100% - 28px, 1120px);
  }

  .brand span {
    font-size: 13px;
  }

  .brand img {
    width: 38px;
    height: 38px;
  }

  .account-label {
    display: none;
  }

  .avatar {
    width: 38px;
    height: 38px;
  }

  .booking-facts {
    grid-template-columns: 1fr;
  }

  .dashboard-stat-grid,
  .dashboard-stat-grid-user,
  .dashboard-action-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stat-card,
  .dashboard-booking-item,
  .dashboard-request-item,
  .dashboard-item-actions.compact,
  .dashboard-schedule-row {
    grid-template-columns: 1fr;
  }

  .dashboard-stat-icon,
  .dashboard-item-icon {
    grid-row: auto;
  }

  .dashboard-item-actions {
    justify-items: stretch;
  }

  .dashboard-item-actions .button {
    width: 100%;
  }

  .dashboard-schedule-row strong {
    white-space: normal;
  }

  .page-heading > .button,
  .calendar-controls .button,
  .panel > form .button,
  .room-meta .button,
  .filter-actions .button,
  .empty .button,
  .confirm-actions .button {
    width: 100%;
  }

  #maintenance-form {
    padding: 18px 14px;
  }

  #maintenance-form .form-grid {
    gap: 12px;
  }

  #maintenance-form h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  #maintenance-form label {
    font-size: 13px;
  }

  #maintenance-form input,
  #maintenance-form select {
    min-height: 42px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .admin-booking-summary {
    grid-template-columns: 1fr;
  }

  .summary-card {
    min-height: 86px;
  }


  .booking-flow-progress {
    grid-template-columns: 1fr;
  }

  .booking-flow-step {
    grid-template-columns: 34px 1fr;
    justify-items: start;
    text-align: left;
  }

  .booking-flow-step span {
    grid-row: 1 / span 1;
  }

  .room-choice-grid {
    grid-template-columns: 1fr;
  }
  .next-booking-card {
    padding: 22px;
  }

  .next-booking-card-header {
    flex-direction: column;
  }

  .next-booking-title-block {
    align-items: flex-start;
  }

  .next-booking-card-header h2,
  .next-booking-name {
    font-size: 24px;
  }

  .next-date-card strong {
    font-size: 46px;
  }

  .admin-bookings-table tr {
    padding: 14px;
  }

  .admin-bookings-table td {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
  }

  .rooms-admin-table tr {
    padding: 14px;
  }

  .rooms-admin-table td {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
  }

  .rooms-admin-table .room-table-cell {
    flex-direction: column;
  }

  .rooms-admin-table .room-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .room-blocks-table tr {
    padding: 14px;
  }

  .room-blocks-table td {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
  }

  .affected-bookings-table {
    min-width: 680px;
  }
}












/* Design handoff dashboard shell - 2026-06-25 */
:root,
.app {
  --accent: oklch(0.45 0.07 165);
  --accent-d: oklch(0.37 0.06 165);
  --accent-soft: oklch(0.95 0.022 165);
  --sidebar: oklch(0.27 0.038 165);
  --heading: oklch(0.24 0.01 250);
  --body: oklch(0.34 0.01 250);
  --muted-2: oklch(0.52 0.012 250);
  --faint: oklch(0.60 0.012 250);
  --page-bg: oklch(0.976 0.004 250);
  --card-border: oklch(0.92 0.006 250);
  --hairline: oklch(0.94 0.005 250);
  --available: oklch(0.42 0.09 158);
  --available-soft: oklch(0.96 0.035 158);
  --busy: oklch(0.50 0.10 65);
  --busy-soft: oklch(0.96 0.05 78);
  --alert: oklch(0.62 0.13 45);
  --ink: #2c2f36;
  --muted: #6e727c;
  --line: #e6e8ec;
  --soft: #f7f8f9;
  --brand: var(--accent);
  --brand-dark: var(--accent-d);
  --panel: #ffffff;
  --shadow: 0 1px 2px rgba(16, 30, 24, 0.04);
}

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--body);
  background: var(--page-bg);
}

.nav-svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--page-bg);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex: 0 0 240px;
  flex-direction: column;
  width: 240px;
  height: 100vh;
  padding: 18px 14px;
  background: var(--sidebar);
  color: rgba(255, 255, 255, 0.72);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-bottom: 22px;
  color: #ffffff;
}

.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
}

.sidebar-brand strong,
.sidebar-brand em,
.sidebar-user strong,
.sidebar-user em,
.sidebar-promo strong,
.sidebar-promo span {
  display: block;
}

.sidebar-brand strong {
  font-size: 15px;
  font-weight: 700;
}

.sidebar-brand em {
  color: rgba(255, 255, 255, 0.48);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: grid;
  gap: 5px;
  align-content: start;
}

.sidebar-section-label {
  margin: 14px 10px 6px;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sidebar-link,
.sidebar-menu summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.sidebar-link:hover,
.sidebar-menu summary:hover,
.sidebar-link.active,
.sidebar-menu summary.active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.sidebar-menu {
  position: relative;
}

.sidebar-menu summary {
  cursor: pointer;
  list-style: none;
}

.sidebar-menu summary::-webkit-details-marker {
  display: none;
}

.sidebar-menu summary .nav-svg:last-child {
  width: 15px;
  height: 15px;
  margin-left: auto;
  transition: transform 0.14s ease;
}

.sidebar-menu[open] summary .nav-svg:last-child {
  transform: rotate(180deg);
}

.sidebar-subnav {
  display: grid;
  gap: 2px;
  margin: 3px 0 6px 36px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.sidebar-subnav a {
  min-height: 30px;
  padding: 6px 8px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 600;
}

.sidebar-subnav a:hover,
.sidebar-subnav a.active {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--alert);
  color: #ffffff;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
}

.sidebar-bottom {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.sidebar-promo {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-promo strong {
  color: #ffffff;
  font-size: 14px;
}

.sidebar-promo span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.sidebar-promo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 3px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--accent-d);
  font-size: 13px;
  font-weight: 700;
}

.sidebar-user {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.sidebar-user .avatar {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--accent), oklch(0.57 0.08 190));
}

.sidebar-user strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user em {
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-style: normal;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 600;
}

.sidebar-logout:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.app-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.app-body .topbar {
  border-bottom: 1px solid var(--card-border);
  background: #ffffff;
}

.app-body .topbar-inner,
.app-body .main {
  width: auto;
  max-width: none;
  margin: 0;
}

.app-body .topbar-inner {
  min-height: 68px;
  padding: 14px 28px;
}

.app-body .topbar .brand {
  display: none;
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(340px, 42vw);
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  background: var(--page-bg);
  color: var(--faint);
}

.topbar-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--heading);
  font-size: 13px;
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.topbar-date {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  color: var(--muted-2);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
}

.topbar-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--heading);
}

.topbar-icon-button span {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--alert);
}

.topbar-book-button {
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--accent-d);
  box-shadow: 0 10px 26px -12px var(--accent);
  font-size: 13px;
}

.app-body .account-menu summary {
  min-height: 42px;
}

.app-body .account-menu .avatar {
  width: 38px;
  height: 38px;
}

.content {
  flex: 1;
  padding: 26px 28px 40px;
}

.app-dashboard-heading {
  margin-bottom: 18px;
}

.app-dashboard-heading h1 {
  margin: 0 0 4px;
  color: var(--heading);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
}

.app-dashboard-heading p,
.dashboard-panel-heading p {
  color: var(--muted-2);
  font-size: 13px;
}

.dashboard-heading-actions .button {
  min-height: 38px;
  width: auto;
  min-width: 142px;
  font-size: 13px;
}

.card,
.panel,
.dashboard-stat-card,
.dashboard-live-panel,
.handoff-kpi-card {
  border-color: var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.card:hover,
.panel:hover,
.handoff-kpi-card:hover {
  box-shadow: 0 2px 4px rgba(16, 30, 24, 0.05), 0 14px 30px -12px rgba(16, 30, 24, 0.16);
}

.dashboard-summary-band {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) minmax(260px, 1.4fr) minmax(150px, 0.7fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--accent-d), var(--accent));
  color: #ffffff;
  box-shadow: 0 10px 26px -12px var(--accent);
}

.summary-band-main,
.summary-band-next {
  display: flex;
  align-items: center;
  gap: 12px;
}

.summary-band-main strong,
.summary-band-main span,
.summary-band-next strong,
.summary-band-next span {
  display: block;
}

.summary-band-main strong,
.summary-band-next strong,
.employee-next-copy strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.summary-band-main span:not(.pulse-dot),
.summary-band-next span,
.employee-next-copy span,
.employee-next-copy em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-style: normal;
}

.pulse-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  animation: dashboardPulse 1.8s infinite;
}

@keyframes dashboardPulse {
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.summary-band-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.room-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
}

.room-live-pill i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: oklch(0.72 0.14 150);
}

.room-live-pill.busy i {
  background: oklch(0.78 0.13 76);
}

.handoff-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.handoff-kpi-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 3px 13px;
  align-items: center;
  min-height: 132px;
  padding: 18px;
  overflow: hidden;
  background: #ffffff;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.handoff-kpi-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--card-border));
}

.kpi-icon {
  grid-row: span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-d);
}

.kpi-label {
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
}

.handoff-kpi-card strong {
  color: var(--heading);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.kpi-note {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 500;
}

.calendar-icon {
  background: oklch(0.95 0.03 268);
  color: oklch(0.5 0.12 268);
}

.pending-icon {
  background: oklch(0.96 0.04 310);
  color: oklch(0.52 0.13 305);
}

.utilization-icon {
  background: oklch(0.96 0.05 78);
  color: var(--busy);
}

.live-pill,
.action-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.live-pill {
  background: var(--available-soft);
  color: var(--available);
}

.action-pill {
  background: var(--busy-soft);
  color: var(--busy);
}

.room-segments,
.spark-bars,
.avatar-stack,
.donut {
  position: absolute;
  right: 18px;
  bottom: 16px;
}

.room-segments {
  display: flex;
  gap: 5px;
}

.room-segments i {
  width: 24px;
  height: 7px;
  border-radius: 999px;
  background: var(--available);
}

.room-segments i.busy {
  background: var(--busy);
}

.spark-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 46px;
}

.spark-bars i {
  width: 8px;
  border-radius: 999px 999px 0 0;
  background: var(--accent-soft);
}

.spark-bars i.today {
  background: var(--accent);
}

.avatar-stack {
  display: flex;
  flex-direction: row-reverse;
}

.avatar-stack i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: -7px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-d);
  font-style: normal;
  font-weight: 700;
}

.donut {
  width: 76px;
  height: 76px;
}

.donut circle {
  fill: none;
  stroke: oklch(0.93 0.01 165);
  stroke-width: 9;
}

.donut circle + circle {
  stroke: var(--accent);
  stroke-dasharray: 188.5;
  transform: rotate(-90deg);
  transform-origin: 40px 40px;
  stroke-linecap: round;
}

.donut text {
  fill: var(--heading);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
}

.utilization-card {
  grid-template-columns: 42px minmax(0, 1fr) 70px;
  column-gap: 13px;
}

.utilization-card .kpi-note {
  line-height: 1.3;
}

.utilization-card .donut {
  position: static;
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: end;
  width: 68px;
  height: 68px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.timeline-panel,
.pending-panel,
.activity-panel,
.room-now-panel,
.upcoming-panel,
.today-panel {
  margin-top: 0;
  padding: 18px;
}

.dashboard-panel-heading h2 {
  color: var(--heading);
  font-size: 16px;
  font-weight: 600;
}

.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.timeline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 600;
}

.timeline-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
}

.timeline-legend .pending {
  background: var(--busy);
}

.timeline-legend .maintenance {
  background: #64748b;
}

.timeline-board {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 18px;
  overflow-x: auto;
}

.timeline-axis,
.timeline-row {
  min-width: 720px;
}

.timeline-axis {
  display: grid;
  grid-template-columns: 118px repeat(6, 1fr);
  padding-bottom: 8px;
  color: var(--faint);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
}

.timeline-axis span:first-child {
  grid-column: 2;
}

.timeline-row {
  display: grid;
  grid-template-columns: 118px minmax(560px, 1fr);
  min-height: 54px;
  border-top: 1px solid var(--hairline);
}

.timeline-room-label {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding-right: 10px;
}

.timeline-room-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.timeline-room-icon.blue { background: linear-gradient(135deg, #4583d9, #235eaa); }
.timeline-room-icon.amber { background: linear-gradient(135deg, #c9953d, #806327); }
.timeline-room-icon.violet { background: linear-gradient(135deg, #8765c6, #5d3c96); }

.timeline-room-label strong,
.timeline-room-label small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-room-label strong {
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
}

.timeline-room-label small {
  color: var(--faint);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
}

.timeline-track {
  position: relative;
  min-height: 54px;
  background: repeating-linear-gradient(90deg, transparent, transparent calc(20% - 1px), var(--hairline) 20%);
}

.timeline-now {
  position: absolute;
  top: 26px;
  bottom: 0;
  z-index: 4;
  width: 2px;
  margin-left: 118px;
  background: var(--alert);
  pointer-events: none;
}

.timeline-now::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--alert);
}

.timeline-block {
  position: absolute;
  top: 11px;
  z-index: 2;
  display: block;
  min-width: 38px;
  max-width: 100%;
  min-height: 31px;
  padding: 6px 8px;
  overflow: hidden;
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-d);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: filter 0.14s ease, transform 0.14s ease;
}

.timeline-block:hover {
  filter: brightness(0.97);
  transform: translateY(-1px);
  z-index: 5;
}

.timeline-block.pending {
  border-left-color: var(--busy);
  background: var(--busy-soft);
  color: var(--busy);
}

.timeline-block.maintenance {
  border-left-color: #64748b;
  background: #f1f3f5;
  color: #344054;
}

.timeline-block span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-block em {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: none;
  width: max-content;
  max-width: 260px;
  padding: 7px 9px;
  border-radius: 7px;
  background: #1f2937;
  color: #ffffff;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.timeline-block:hover em {
  display: block;
}

.request-card-list,
.activity-list,
.upcoming-list,
.today-timeline-list {
  display: grid;
  gap: 10px;
}

.request-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  background: #ffffff;
}

.request-avatar,
.activity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-d);
  font-weight: 700;
}

.request-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.request-card h3,
.quick-room-card h3 {
  margin: 0 0 3px;
  color: var(--heading);
  font-size: 14px;
  font-weight: 700;
}

.request-card p,
.request-card span:not(.status),
.quick-room-card p,
.upcoming-row small,
.today-timeline-row span,
.today-timeline-row small {
  color: var(--muted-2);
  font-size: 12px;
}

.request-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.request-actions .button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.pending-more-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(0, 107, 95, 0.34);
  border-radius: 10px;
  background: #f4fbf8;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.pending-more-summary strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(0, 107, 95, 0.2);
}

.activity-panel {
  margin-top: 0;
}

.activity-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  border-radius: 10px;
}

.activity-row:hover {
  background: oklch(0.975 0.005 250);
}

.activity-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.activity-row span {
  color: var(--body);
  font-size: 13px;
}

.activity-row em {
  color: var(--faint);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-style: normal;
}

.employee-next-band {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}

.next-start-tile {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
}

.next-start-tile span {
  color: rgba(255, 255, 255, 0.68);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.next-start-tile strong {
  color: #ffffff;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
}

.employee-next-copy {
  display: grid;
  gap: 2px;
}

.button.light,
.employee-next-band .button.light {
  border: 0;
  background: #ffffff;
  color: var(--accent-d);
  box-shadow: none;
}

.employee-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-kpi {
  min-height: 92px;
}

.compact-kpi strong {
  font-size: 26px;
}

.employee-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

.employee-left-column,
.employee-right-column {
  display: grid;
  gap: 18px;
}

.quick-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-room-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  background: #ffffff;
}

.quick-room-card.busy {
  opacity: 0.78;
}

.quick-room-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
  color: #ffffff;
}

.quick-room-header.blue { background: linear-gradient(135deg, #4b86d9, #265ea7); }
.quick-room-header.amber { background: linear-gradient(135deg, #c5953d, #7d6527); }
.quick-room-header.violet { background: linear-gradient(135deg, #8b68c9, #5f3d97); }

.quick-room-header span {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: oklch(0.78 0.13 150);
}

.quick-room-card.busy .quick-room-header span {
  background: oklch(0.78 0.13 76);
}

.quick-room-card .button {
  width: 100%;
  min-height: 36px;
  font-size: 12px;
}

.button.disabled {
  cursor: default;
  background: #e5e8ec;
  color: #6e727c;
  pointer-events: none;
}

.upcoming-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 11px;
  background: #ffffff;
}

.date-chip {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 54px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-d);
}

.date-chip em {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-style: normal;
}

.date-chip strong {
  color: var(--heading);
  font-size: 22px;
  line-height: 1;
}

.upcoming-row > span:nth-child(2) strong,
.today-timeline-row strong {
  display: block;
  color: var(--heading);
  font-size: 14px;
}

.today-timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 104px 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-bottom: 16px;
}

.today-timeline-row:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 113px;
  width: 2px;
  background: var(--accent-soft);
}

.today-timeline-row i {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.today-timeline-row.pending i {
  background: var(--busy);
}

.today-timeline-row small {
  display: block;
  margin-top: 2px;
}

.booking-tip-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  background: var(--accent-d);
  color: #ffffff;
  box-shadow: 0 10px 26px -12px var(--accent);
}

.booking-tip-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
}

.booking-tip-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.booking-tip-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .handoff-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-main-grid,
  .employee-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .app-body .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 0;
    background: rgba(247, 248, 249, 0.92);
    backdrop-filter: blur(10px);
  }

  .app-body .topbar .brand {
    display: flex;
  }

  .topbar-search,
  .topbar-tools {
    display: none;
  }

  .content {
    padding: 24px 18px 42px;
  }
}

@media (max-width: 820px) {
  .app-body .topbar-inner {
    width: min(100% - 28px, 1120px);
    margin: 10px auto;
    padding: 9px 10px;
  }

  .dashboard-summary-band,
  .employee-next-band {
    grid-template-columns: 1fr;
  }

  .summary-band-rooms {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
  }

  .employee-kpi-grid,
  .quick-room-grid {
    grid-template-columns: 1fr;
  }

  .timeline-panel {
    padding: 16px 12px;
  }

  .activity-row,
  .upcoming-row,
  .request-card-body,
  .request-actions {
    grid-template-columns: 1fr;
  }

  .activity-row {
    justify-items: start;
  }

  .request-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .handoff-kpi-grid {
    grid-template-columns: 1fr;
  }

  .app-dashboard-heading {
    gap: 14px;
  }

  .dashboard-heading-actions,
  .dashboard-heading-actions .button {
    width: 100%;
  }

  .dashboard-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .upcoming-row .status {
    justify-self: start;
  }
}

/* Final top navigation override - keep this at the end */
.app-shell {
  display: block;
  min-height: 100vh;
}

.sidebar {
  display: none !important;
}

.app-body {
  min-height: 100vh;
}

.app-body .topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

.app-body .topbar-inner {
  width: min(1360px, calc(100% - 40px));
  max-width: none;
  min-height: 76px;
  margin: 0 auto;
  padding: 12px 0;
  gap: 16px;
}

.app-body .topbar .brand {
  display: flex;
  flex: 0 0 auto;
}

.top-nav-actions {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.top-nav-actions .nav-link {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 9px;
  color: var(--body);
  font-size: 13px;
  font-weight: 700;
}

.top-nav-actions .nav-link:hover,
.top-nav-actions .nav-link.active,
.top-nav-actions .nav-menu[open] > .nav-link {
  background: var(--accent-soft);
  color: var(--accent-d);
}

.top-nav-actions .dropdown-menu {
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  min-width: 260px;
  border-color: var(--card-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(20, 28, 50, 0.24), 0 1px 3px rgba(20, 28, 50, 0.08);
}

.topbar-search {
  width: min(270px, 22vw);
  flex: 0 1 270px;
}

.topbar-tools,
.app-body .account-menu {
  flex: 0 0 auto;
}

.content {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  margin: 0 auto;
  padding: 28px 0 44px;
}

@media (max-width: 1180px) {
  .app-body .topbar-inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .top-nav-actions {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 960px) {
  .app-body .topbar-inner {
    width: min(100% - 28px, 1120px);
    min-height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(21, 27, 35, 0.1);
  }

  .top-nav-actions,
  .topbar-search,
  .topbar-tools,
  .app-body .account-menu {
    display: none;
  }

  .mobile-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 999px;
  }

  .mobile-menu {
    position: relative;
    display: block;
    flex: 0 0 auto;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .content {
    width: min(100% - 28px, 1120px);
    padding: 24px 0 42px;
  }
}

/* Final spacious top navigation refinement - active */
@media (min-width: 961px) {
  .app-body .topbar {
    background: rgba(255, 255, 255, 0.98);
  }

  .app-body .topbar-inner {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto auto;
    grid-template-areas:
      "brand search tools account"
      "nav nav nav nav";
    align-items: center;
    row-gap: 13px;
    column-gap: 20px;
    width: min(1240px, calc(100% - 48px));
    min-height: 118px;
    padding: 16px 0 14px;
  }

  .app-body .topbar .brand {
    grid-area: brand;
    gap: 13px;
  }

  .app-body .topbar .brand img {
    width: 44px;
    height: 44px;
  }

  .app-body .topbar .brand span {
    color: var(--heading);
    font-size: 16px;
    white-space: nowrap;
  }

  .topbar-search {
    grid-area: search;
    justify-self: end;
    width: min(380px, 100%);
    min-height: 42px;
    flex: none;
  }

  .topbar-tools {
    grid-area: tools;
    margin-left: 0;
  }

  .app-body .account-menu {
    grid-area: account;
  }

  .top-nav-actions {
    grid-area: nav;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 10px 0 0;
    border-top: 1px solid var(--card-border);
    overflow: visible;
  }

  .top-nav-actions .nav-link {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
  }

  .top-nav-actions .nav-link:hover,
  .top-nav-actions .nav-link.active,
  .top-nav-actions .nav-menu[open] > .nav-link {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--card-border));
    background: var(--accent-soft);
  }

  .top-nav-actions .dropdown-menu {
    top: calc(100% + 8px);
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .app-body .topbar-inner {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    grid-template-areas:
      "brand search account"
      "tools tools tools"
      "nav nav nav";
    min-height: 158px;
  }

  .topbar-tools {
    justify-self: start;
  }
}

/* Final page gutter and mobile spacing refinement */
:root {
  --page-gutter-desktop: 32px;
  --page-gutter-tablet: 22px;
  --page-gutter-mobile: 16px;
}

.app-body {
  overflow-x: hidden;
}

.content {
  width: 100%;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 32px var(--page-gutter-desktop) 52px;
}

.app-dashboard-heading,
.page-heading {
  margin-right: 0;
  margin-left: 0;
}

.dashboard-summary-band,
.handoff-kpi-grid,
.dashboard-main-grid,
.activity-panel,
.employee-dashboard-grid,
.panel,
.calendar-frame,
.grid {
  max-width: 100%;
}

.dashboard-summary-band {
  margin-top: 4px;
}

.handoff-kpi-grid,
.dashboard-main-grid,
.employee-dashboard-grid {
  gap: 18px;
}

.dashboard-main-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.95fr);
}

.dashboard-heading-actions {
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .content {
    max-width: none;
    padding-right: var(--page-gutter-tablet);
    padding-left: var(--page-gutter-tablet);
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .content {
    padding: 22px var(--page-gutter-mobile) 42px;
  }

  .page-heading,
  .app-dashboard-heading {
    gap: 16px;
    margin-bottom: 18px;
  }

  .dashboard-heading-actions,
  .room-meta {
    width: 100%;
  }

  .dashboard-heading-actions .button,
  .room-meta .button {
    flex: 1 1 150px;
  }

  .dashboard-summary-band,
  .handoff-kpi-card,
  .timeline-panel,
  .pending-panel,
  .activity-panel,
  .room-now-panel,
  .upcoming-panel,
  .today-panel,
  .panel {
    border-radius: 12px;
  }

  .dashboard-summary-band {
    padding: 16px;
  }

  .handoff-kpi-grid,
  .dashboard-main-grid,
  .employee-dashboard-grid {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .content {
    padding: 18px var(--page-gutter-mobile) 36px;
  }

  .app-dashboard-heading h1,
  .page-heading h1 {
    font-size: 25px;
    line-height: 1.2;
  }

  .app-dashboard-heading p,
  .page-heading p {
    font-size: 13px;
  }

  .dashboard-heading-actions,
  .room-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dashboard-heading-actions .button,
  .room-meta .button {
    width: 100%;
  }

  .dashboard-summary-band,
  .handoff-kpi-card,
  .timeline-panel,
  .pending-panel,
  .activity-panel,
  .room-now-panel,
  .upcoming-panel,
  .today-panel,
  .panel {
    padding: 16px;
  }
}

/* Mobile refinements for admin operation pages */
@media (max-width: 820px) {
  .pending-panel {
    overflow: hidden;
  }

  .pending-panel .request-card-list {
    overflow: hidden;
  }

  .request-card,
  .request-card-body,
  .request-actions {
    min-width: 0;
  }

  .pending-panel .request-card {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 40px minmax(0, 1fr);
    overflow: hidden;
  }

  .pending-panel .request-card-body {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .pending-panel .request-card-body > div {
    min-width: 0;
  }

  .pending-panel .request-card-body .status {
    justify-self: start;
    max-width: 100%;
  }

  .pending-panel .request-actions {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .pending-panel .request-actions .inline-form,
  .pending-panel .request-actions .button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .request-card h3,
  .request-card p,
  .request-card span:not(.status) {
    overflow-wrap: anywhere;
  }

  .request-actions .inline-form {
    display: block;
    min-width: 0;
  }

  .calendar-book-button {
    justify-content: center;
    width: 100%;
  }

  .calendar-frame-compact {
    padding: 16px;
  }

  .calendar-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .calendar-controls .button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
  }

  .calendar-controls label {
    grid-column: 1 / -1;
    margin-top: 4px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
  }

  .calendar-controls select {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
  }

  .calendar-controls .calendar-filter-button {
    grid-column: 1 / -1;
    min-height: 42px;
    font-size: 13px;
  }

  .admin-bookings-table .booking-user-cell,
  .admin-bookings-table .booking-request-cell,
  .admin-bookings-table .booking-room-cell,
  .admin-bookings-table .booking-time-cell {
    min-width: 0;
  }

  .admin-bookings-table .booking-user-cell strong,
  .admin-bookings-table .booking-user-cell span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 560px) {
  .request-card,
  .pending-panel .request-card {
    grid-template-columns: 1fr;
  }

  .request-avatar {
    width: 36px;
    height: 36px;
  }

  .request-card-body {
    grid-template-columns: 1fr;
  }

  .request-card-body .status {
    justify-self: start;
  }

  .request-actions,
  .pending-panel .request-actions {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .pending-more-summary {
    display: grid;
    justify-items: center;
    line-height: 1.35;
  }

  .calendar-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-controls .button {
    min-height: 42px;
    font-size: 11px;
  }

  .admin-bookings-table tr {
    gap: 10px;
  }

  .admin-bookings-table td {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .admin-bookings-table td::before {
    font-size: 11px;
  }
}

/* Dropdown hover forgiveness */
@media (hover: hover) and (pointer: fine) {
  .top-nav-actions .nav-menu,
  .nav-actions .nav-menu {
    position: relative;
  }

  .top-nav-actions .nav-menu::before,
  .nav-actions .nav-menu::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 18px;
    display: none;
  }

  .top-nav-actions .nav-menu:hover::before,
  .top-nav-actions .nav-menu[open]::before,
  .nav-actions .nav-menu:hover::before,
  .nav-actions .nav-menu[open]::before {
    display: block;
  }

  .top-nav-actions .dropdown-menu,
  .nav-actions .dropdown-menu {
    margin-top: -2px;
  }
}

/* Public account pages */
.public-auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(0, 107, 95, 0.12), transparent 34%),
    linear-gradient(135deg, #f7f8fa 0%, #edf1f4 100%);
}

.public-auth-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px 18px;
}

.public-auth-card {
  width: min(100%, 480px);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.public-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-weight: 800;
  color: var(--ink);
}

.public-auth-brand img {
  width: 52px;
  height: auto;
  display: block;
}

.public-auth-heading {
  margin-bottom: 22px;
}

.public-auth-heading h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.15;
}

.public-auth-heading p {
  margin: 0;
  color: var(--muted);
}

.public-auth-card .button {
  width: 100%;
}

.public-auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
  margin-top: 22px;
  color: var(--brand);
  font-weight: 800;
}

@media (max-width: 560px) {
  .public-auth-card {
    padding: 22px;
    border-radius: 10px;
  }

  .public-auth-brand img {
    width: 46px;
  }

  .public-auth-heading h1 {
    font-size: 26px;
  }
}
/* Compact admin live status strip */
.live-status-band {
  grid-template-columns: minmax(180px, 0.85fr) minmax(280px, 1.7fr) minmax(150px, 0.65fr);
  gap: 14px;
  min-height: 86px;
  padding: 14px 18px;
}

.live-status-band .summary-band-main,
.live-status-band .summary-band-next {
  display: grid;
  align-content: center;
  gap: 2px;
}

.live-summary-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.live-summary-label .pulse-dot {
  width: 8px;
  height: 8px;
}

.live-status-band .summary-band-main strong {
  font-size: 22px;
  line-height: 1.05;
}

.live-status-band .summary-band-next strong {
  font-size: 20px;
  line-height: 1.05;
}

.live-status-band .summary-band-main > span:last-child,
.live-status-band .summary-band-next > span:last-child {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 600;
}

.live-status-band .summary-band-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px;
}

.live-status-band .room-live-pill {
  min-height: 32px;
  padding: 0 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.live-status-band .room-live-pill strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-status-band .room-live-pill em {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.live-status-band .room-live-pill.free em {
  color: #a9f3bf;
}

.live-status-band .room-live-pill.busy em {
  color: #ffe0a3;
}

@media (max-width: 1100px) {
  .live-status-band {
    grid-template-columns: 1fr;
  }

  .live-status-band .summary-band-rooms {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .live-status-band {
    padding: 14px;
  }

  .live-status-band .summary-band-main strong,
  .live-status-band .summary-band-next strong {
    font-size: 20px;
  }

  .live-status-band .summary-band-rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Admin live status banner redesign */
.live-status-banner {
  grid-template-columns: minmax(210px, 230px) minmax(300px, 1fr) minmax(220px, 250px);
  gap: 0;
  min-height: 104px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(100deg, oklch(0.34 0.06 162), oklch(0.30 0.05 162));
  font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
}

.live-status-banner .live-count-block {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.live-use-ring {
  --ring-color: oklch(0.78 0.12 150);
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: conic-gradient(var(--ring-color) var(--live-use-pct), rgba(255, 255, 255, 0.17) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.live-use-ring.high {
  --ring-color: oklch(0.62 0.13 50);
}

.live-use-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: oklch(0.30 0.05 162);
}

.live-use-ring span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1px;
  line-height: 1;
}

.live-use-ring strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.live-use-ring em {
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-status-banner .summary-band-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.live-status-banner .live-summary-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.live-status-banner .summary-band-main strong {
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.05;
}

.live-status-banner .summary-band-main > span:last-child,
.live-status-banner .summary-band-next > span:last-child {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
}

.live-status-banner .summary-band-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 0 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.live-status-banner .room-live-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 37px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.live-status-banner .room-live-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
}

.live-status-banner .room-live-pill.busy {
  border-color: rgba(245, 170, 90, 0.34);
  background: rgba(245, 170, 90, 0.16);
}

.live-status-banner .room-live-pill i {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: oklch(0.82 0.13 150);
}

.live-status-banner .room-live-pill.busy i {
  background: oklch(0.74 0.15 55);
}

.live-status-banner .room-live-pill span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.live-status-banner .room-live-pill strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-status-banner .room-live-pill em {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-status-banner .room-live-pill.busy em {
  color: oklch(0.84 0.13 55);
}

.live-status-banner .summary-band-next {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding-left: 18px;
}

.live-next-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.live-next-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.summary-band-next.busy .live-next-pill {
  border-color: rgba(245, 170, 90, 0.34);
  background: rgba(245, 170, 90, 0.18);
  color: oklch(0.88 0.12 55);
}

.live-next-content strong,
.live-next-content em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-next-content strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}

.live-next-content em {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .live-status-banner {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .live-status-banner .summary-band-rooms,
  .live-status-banner .summary-band-next {
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 0;
    border-left: 0;
  }

  .live-status-banner .summary-band-next {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .live-status-banner {
    padding: 14px;
  }

  .live-status-banner .live-count-block {
    align-items: flex-start;
  }

  .live-use-ring {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }

  .live-status-banner .summary-band-main strong {
    font-size: 20px;
  }

  .live-status-banner .summary-band-rooms {
    grid-template-columns: 1fr;
  }
}

/* Calendar mobile control override - keep compact and ordered */
@media (max-width: 820px) {
  .page-heading .calendar-book-button.button {
    align-self: stretch;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 15px;
  }

  .calendar-frame-compact .calendar-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  .calendar-frame-compact .calendar-controls > .button {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    font-size: 13px;
    line-height: 1.2;
  }

  .calendar-frame-compact .calendar-controls > a:nth-of-type(3),
  .calendar-frame-compact .calendar-controls > label,
  .calendar-frame-compact .calendar-controls > select,
  .calendar-frame-compact .calendar-controls > .calendar-filter-button {
    grid-column: 1 / -1;
  }

  .calendar-frame-compact .calendar-controls > label {
    margin: 2px 0 -4px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
  }

  .calendar-frame-compact .calendar-controls > select {
    width: 100%;
    min-height: 44px;
  }

  .calendar-frame-compact .calendar-controls > .calendar-filter-button {
    min-height: 46px;
  }
}

@media (max-width: 420px) {
  .calendar-frame-compact .calendar-controls {
    grid-template-columns: 1fr;
  }
}

/* Admin bookings mobile cards - stack field values under labels */
@media (max-width: 820px) {
  .admin-bookings-table tr {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .admin-bookings-table td,
  .admin-bookings-table .booking-actions-cell {
    grid-template-columns: 1fr;
    gap: 5px;
    min-width: 0;
  }

  .admin-bookings-table td::before {
    display: block;
    margin-bottom: 1px;
    line-height: 1.1;
  }

  .admin-bookings-table .booking-request-cell {
    min-width: 0;
  }

  .admin-bookings-table .booking-user-cell strong,
  .admin-bookings-table .booking-user-cell span,
  .admin-bookings-table .booking-room-cell strong,
  .admin-bookings-table .booking-room-cell span,
  .admin-bookings-table .booking-time-cell,
  .admin-bookings-table .time-range,
  .admin-bookings-table .time-date,
  .admin-bookings-table .time-hours {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .admin-bookings-table .status {
    max-width: 100%;
  }
}

/* Dashboard pending cards - compact mobile action scale */
@media (max-width: 820px) {
  .pending-panel .request-card {
    gap: 12px;
    padding: 14px;
  }

  .pending-panel .request-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    overflow: visible;
  }

  .pending-panel .request-actions .inline-form {
    display: block !important;
    width: 100%;
    min-width: 0;
  }

  .pending-panel .request-actions .button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .pending-panel .request-card {
    grid-template-columns: 1fr;
  }

  .pending-panel .request-actions {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
  }
}

/* Dashboard pending request card redesign */
.pending-panel .dashboard-pending-card {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px 18px;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(16, 30, 24, 0.08);
}

.pending-panel .dashboard-pending-card .request-avatar {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.pending-panel .dashboard-pending-card .request-card-body {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.pending-panel .dashboard-pending-card h3 {
  margin-bottom: 2px;
  color: #061712;
  font-size: 22px;
  line-height: 1.1;
}

.pending-panel .dashboard-pending-card p {
  color: #12221d;
  font-size: 15px;
  line-height: 1.35;
}

.pending-panel .dashboard-pending-card p strong {
  color: #061712;
}

.pending-panel .dashboard-pending-card .status.pending {
  gap: 7px;
  justify-self: end;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: #fff0d0;
  color: #9a5c05;
  font-size: 14px;
}

.pending-panel .dashboard-pending-card .status.pending::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.request-time-pill {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  background: #f2f5f6;
  color: #13251f;
  font-size: 17px;
  font-weight: 700;
}

.request-time-pill .nav-svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--brand-dark);
}

.pending-panel .dashboard-pending-card .request-actions {
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pending-panel .dashboard-pending-card .request-actions .button {
  min-height: 62px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
}

.pending-panel .dashboard-pending-card .request-decline-button {
  border: 1px solid var(--line);
  background: #ffffff;
  color: #061712;
}

.request-action-check {
  width: 13px;
  height: 8px;
  margin-right: 9px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

@media (max-width: 820px) {
  .pending-panel .dashboard-pending-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px 16px;
    padding: 22px;
  }

  .pending-panel .dashboard-pending-card .request-avatar {
    width: 52px;
    height: 52px;
  }

  .pending-panel .dashboard-pending-card .request-card-body {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pending-panel .dashboard-pending-card h3 {
    font-size: 20px;
  }

  .request-time-pill,
  .pending-panel .dashboard-pending-card .request-actions {
    grid-column: 2 / -1 !important;
  }

  .pending-panel .dashboard-pending-card .request-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .pending-panel .dashboard-pending-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 18px;
    border-radius: 16px;
  }

  .pending-panel .dashboard-pending-card .request-avatar {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .pending-panel .dashboard-pending-card .request-card-body {
    gap: 8px;
  }

  .pending-panel .dashboard-pending-card h3 {
    font-size: 18px;
  }

  .pending-panel .dashboard-pending-card p,
  .request-time-pill {
    font-size: 14px;
  }

  .request-time-pill {
    min-height: 44px;
    padding: 0 13px;
  }

  .pending-panel .dashboard-pending-card .request-actions .button {
    min-height: 48px;
    font-size: 15px;
  }
}

/* Dashboard pending cards - phone fit */
@media (max-width: 640px) {
  .pending-panel {
    padding: 14px;
  }

  .pending-panel .request-card-list {
    gap: 12px;
  }

  .pending-panel .dashboard-pending-card {
    width: 100%;
    max-width: calc(100% - 2px);
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 14px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(16, 30, 24, 0.07);
  }

  .pending-panel .dashboard-pending-card .request-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .pending-panel .dashboard-pending-card .request-card-body {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    min-width: 0;
  }

  .pending-panel .dashboard-pending-card h3 {
    font-size: 17px;
  }

  .pending-panel .dashboard-pending-card p {
    font-size: 13px;
  }

  .pending-panel .dashboard-pending-card .status.pending {
    min-height: 26px;
    padding: 0 10px;
    font-size: 12px;
  }

  .request-time-pill,
  .pending-panel .dashboard-pending-card .request-actions {
    grid-column: 1 / -1 !important;
  }

  .request-time-pill {
    min-height: 40px;
    padding: 0 12px;
    gap: 8px;
    border-radius: 10px;
    font-size: 13px;
  }

  .request-time-pill .nav-svg {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }

  .pending-panel .dashboard-pending-card .request-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .pending-panel .dashboard-pending-card .request-actions .button {
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
  }

  .request-action-check {
    width: 10px;
    height: 7px;
    margin-right: 7px;
    border-bottom-width: 2px;
    border-left-width: 2px;
  }
}

@media (max-width: 380px) {
  .pending-panel .dashboard-pending-card .request-card-body {
    grid-template-columns: 1fr;
  }

  .pending-panel .dashboard-pending-card .status.pending {
    justify-self: start;
  }

  .pending-panel .dashboard-pending-card .request-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Pending cards: keep action buttons inside the card on phones */
@media (max-width: 640px) {
  .pending-panel,
  .pending-panel .request-card-list,
  .pending-panel .dashboard-pending-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pending-panel .dashboard-pending-card {
    overflow: hidden;
  }

  .pending-panel .dashboard-pending-card .request-actions {
    display: flex !important;
    flex-direction: row;
    gap: 9px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 2px;
    overflow: hidden;
  }

  .pending-panel .dashboard-pending-card .request-actions .inline-form {
    display: block !important;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .pending-panel .dashboard-pending-card .request-actions .button {
    display: inline-flex;
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .pending-panel .dashboard-pending-card .request-actions {
    flex-direction: column;
  }
}

/* Dashboard pending cards - compact mobile size */
@media (max-width: 640px) {
  .pending-panel {
    padding: 10px;
  }

  .pending-panel .request-card-list {
    gap: 9px;
  }

  .pending-panel .dashboard-pending-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 11px;
    border-radius: 12px;
  }

  .pending-panel .dashboard-pending-card .request-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .pending-panel .dashboard-pending-card h3 {
    font-size: 15px;
  }

  .pending-panel .dashboard-pending-card p {
    font-size: 12px;
    line-height: 1.25;
  }

  .pending-panel .dashboard-pending-card .status.pending {
    min-height: 23px;
    padding: 0 8px;
    font-size: 11px;
  }

  .pending-panel .dashboard-pending-card .status.pending::before {
    width: 5px;
    height: 5px;
  }

  .request-time-pill {
    min-height: 34px;
    padding: 0 10px;
    gap: 7px;
    border-radius: 8px;
    font-size: 12px;
  }

  .request-time-pill .nav-svg {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
  }

  .pending-panel .dashboard-pending-card .request-actions {
    gap: 7px;
  }

  .pending-panel .dashboard-pending-card .request-actions .button {
    min-height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 12px;
  }

  .request-action-check {
    width: 8px;
    height: 6px;
    margin-right: 6px;
  }
}

/* Dashboard mobile containment: keep panels and pending cards inside the screen */
@media (max-width: 820px) {
  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .timeline-panel,
  .pending-panel {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .timeline-board {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  .dashboard-main-grid {
    gap: 12px;
  }

  .pending-panel {
    padding: 10px !important;
  }

  .pending-panel .dashboard-panel-heading {
    gap: 6px;
    margin-bottom: 10px;
  }

  .pending-panel .request-card-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    overflow: hidden;
  }

  .pending-panel .dashboard-pending-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px 8px;
    padding: 10px;
    overflow: hidden;
  }

  .pending-panel .dashboard-pending-card .request-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .pending-panel .dashboard-pending-card .request-card-body,
  .pending-panel .dashboard-pending-card .request-card-body > div {
    min-width: 0;
  }

  .pending-panel .dashboard-pending-card h3 {
    font-size: 14px;
  }

  .pending-panel .dashboard-pending-card p {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pending-panel .dashboard-pending-card .status.pending {
    min-height: 22px;
    padding: 0 7px;
    font-size: 10px;
  }

  .request-time-pill {
    grid-column: 1 / -1 !important;
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 7px 9px;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
  }

  .pending-panel .dashboard-pending-card .request-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pending-panel .dashboard-pending-card .request-actions .inline-form {
    flex: 1 1 0;
    min-width: 0;
  }

  .pending-panel .dashboard-pending-card .request-actions .button {
    min-height: 34px;
    padding: 0 7px;
    font-size: 11px;
  }
}

/* ============================================================
   RE-SKIN + SPEC COMPONENTS (design/specs) — appended 2026-07
   Loaded last so it wins the cascade. Uses the emerald --accent
   token layer defined in the .app handoff block above.
   ============================================================ */

/* Re-skin foundation: Plus Jakarta Sans as the UI face; IBM Plex
   Mono stays for numeric/meta per the dashboard handoff. */
body {
  font-family: "Plus Jakarta Sans", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- datetime-local fix (fix-datetime-alignment.md) ---------- */
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { margin-left: auto; }

/* ---------- booking form: stepper (booking-form-mobile.md) ---------- */
.bk-page {                     /* mobile edge padding (fix-form-edge-padding.md) */
  box-sizing: border-box;
}
.bk-panel { padding: 26px 28px; }
.bk-steps { display: flex; flex-direction: column; }

.bk-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.bk-rail { display: flex; flex-direction: column; align-items: center; }
.bk-badge {
  position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--field, oklch(0.86 0.01 220));
  color: var(--muted, #6e727c); font-weight: 800; font-size: 13.5px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.bk-badge .bk-tick { display: none; }
.bk-step.is-done .bk-badge {
  background: var(--accent-d); border-color: var(--accent-d); color: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.bk-step.is-done .bk-badge .bk-num { display: none; }
.bk-step.is-done .bk-badge .bk-tick { display: block; }
.bk-connector { flex: 1; width: 2px; background: var(--hairline, oklch(0.91 0.005 220)); margin: 6px 0; min-height: 12px; }

.bk-content { min-width: 0; padding-bottom: 22px; }
.bk-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; padding: 3px 0; cursor: pointer; text-align: left; color: inherit;
}
.bk-head-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-head-titles strong { font-size: 15.5px; font-weight: 700; color: var(--heading, #2c2f36); }
.bk-head-titles small { font-size: 12.5px; color: var(--muted, #6e727c); }
.bk-head-status { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bk-chip {
  display: none; font-size: 11.5px; font-weight: 700; color: var(--accent-d);
  background: var(--accent-soft); padding: 3px 10px; border-radius: 999px;
}
.bk-step.is-done .bk-chip { display: inline-block; }
.bk-chev { color: var(--muted, #6e727c); transition: transform .2s ease; }
.bk-step.open .bk-chev { transform: rotate(180deg); }

.bk-body { display: none; flex-direction: column; gap: 16px; margin-top: 16px; }
.bk-step.open .bk-body { display: flex; }

.bk-field { display: flex; flex-direction: column; gap: 7px; }
.bk-field label { font-size: 13px; font-weight: 600; color: var(--label, #474b54); }
.bk-req { color: var(--accent-t, var(--accent-d)); }
.bk-body input,
.bk-body select,
.bk-body textarea {
  font-family: inherit; width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--field, oklch(0.88 0.006 220)); border-radius: 10px;
  font-size: 14px; color: var(--ink, #2c2f36); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-body textarea { min-height: 82px; resize: vertical; }
.bk-body input:focus,
.bk-body select:focus,
.bk-body textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---------- room picker image cards (booking-room-picker.md) ---------- */
.bk-picker { display: grid; gap: 10px; }
.bk-any {
  display: grid; grid-template-columns: 38px 1fr 22px; align-items: center; gap: 12px; width: 100%;
  background: #fff; border: 1px solid var(--field, oklch(0.9 0.006 220)); border-radius: 12px; padding: 12px;
  cursor: pointer; text-align: left; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.bk-zap {
  width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-d);
  display: inline-flex; align-items: center; justify-content: center;
}
.bk-any-txt b { font-size: 13.5px; font-weight: 700; display: block; color: var(--heading, #2c2f36); }
.bk-any-txt small { font-size: 11.5px; color: var(--muted, #6e727c); }
.bk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bk-card {
  position: relative; border: 1px solid var(--field, oklch(0.9 0.006 220)); border-radius: 12px; overflow: hidden;
  background: #fff; cursor: pointer; text-align: left; padding: 0; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease, opacity .15s ease;
}
.bk-card:active, .bk-any:active { transform: translateY(1px); }
.bk-media { position: relative; display: block; height: 96px; background: oklch(0.9 0.008 220); }
.bk-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-cap {
  position: absolute; right: 7px; bottom: 7px; background: rgba(16, 32, 26, .82); color: #fff;
  font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px;
}
.bk-card-body { display: block; padding: 9px 11px; }
.bk-card-body b { font-size: 13px; font-weight: 700; display: block; color: var(--heading, #2c2f36); }
.bk-card-body small { font-size: 11px; color: var(--muted, #6e727c); }
.bk-check {
  position: absolute; display: none; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--accent-d); color: #fff; top: 8px; left: 8px; z-index: 2;
}
.bk-any .bk-check { position: static; }
.bk-card.selected, .bk-any.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bk-card.selected .bk-check, .bk-any.selected .bk-check { display: inline-flex; }
.bk-unavail-tag {
  display: none; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .72); color: var(--muted, #6e727c); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
}
.bk-card.unavail { cursor: not-allowed; }
.bk-card.unavail .bk-media img { filter: grayscale(1); opacity: .5; }
.bk-card.unavail .bk-unavail-tag { display: flex; }
.bk-picker-msg { margin: 2px 0 0; font-size: 12.5px; color: var(--muted, #6e727c); }
.bk-picker-msg.warn { color: var(--busy, oklch(0.5 0.1 65)); font-weight: 600; }

/* ---------- submit row ---------- */
.bk-submit-row {
  display: flex; align-items: center; gap: 16px; margin-top: 8px; padding-top: 22px;
  border-top: 1px solid var(--line, #e6e8ec); flex-wrap: wrap;
}
.bk-submit { padding: 13px 26px; }
.bk-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted, #6e727c); }

@media (max-width: 1024px) { .bk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .bk-page { padding-left: 20px; padding-right: 20px; }
  .bk-panel { padding: 20px; }
  .bk-grid { grid-template-columns: repeat(2, 1fr); }
  .bk-media { height: 62px; }
}
@media (max-width: 380px) { .bk-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ADMIN DASHBOARD (admin-dashboard-improvements + admin-status-banner)
   ============================================================ */
.adash { display: flex; flex-direction: column; gap: 20px; }

/* header */
.adash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adash-greet h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--heading, #2c2f36); margin: 0; }
.adash-greet-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.adash-datepill { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 600; color: var(--accent-d);
  background: var(--accent-soft); padding: 4px 11px; border-radius: 999px; }
.adash-sub { font-size: 13.5px; color: var(--muted-2, #6e727c); }
.adash-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* live status banner */
.lsb { display: grid; grid-template-columns: 232px 1fr 248px; gap: 0; align-items: stretch;
  background: linear-gradient(100deg, oklch(0.34 0.06 162), oklch(0.30 0.05 162)); border-radius: 16px;
  box-shadow: 0 12px 30px -14px rgba(10, 40, 28, .5); color: #fff; overflow: hidden; }
.lsb-col { padding: 20px 22px; display: flex; }
.lsb-chips { border-left: 1px solid rgba(255,255,255,.14); border-right: 1px solid rgba(255,255,255,.14); }
.lsb-live { align-items: center; gap: 16px; }
.lsb-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 999px;
  background: conic-gradient(var(--ring, oklch(0.82 0.13 150)) var(--deg, 0deg), rgba(255,255,255,.16) 0); }
.lsb-ring.busy { --ring: oklch(0.74 0.14 55); }
.lsb-ring-inner { position: absolute; inset: 7px; border-radius: 999px; background: oklch(0.31 0.05 162);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lsb-ring-inner strong { font-size: 15px; font-weight: 800; line-height: 1; }
.lsb-ring-inner em { font-size: 7.5px; font-style: normal; letter-spacing: .1em; color: rgba(255,255,255,.6); margin-top: 2px; }
.lsb-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,255,255,.6); text-transform: uppercase; }
.lsb-dot { width: 7px; height: 7px; border-radius: 999px; background: oklch(0.82 0.13 150); box-shadow: 0 0 0 0 oklch(0.82 0.13 150 / .6);
  animation: lsbpulse 2s infinite; }
@keyframes lsbpulse { 0% { box-shadow: 0 0 0 0 rgba(140,220,180,.5); } 70% { box-shadow: 0 0 0 6px rgba(140,220,180,0); } 100% { box-shadow: 0 0 0 0 rgba(140,220,180,0); } }
.lsb-count { display: flex; flex-direction: column; gap: 3px; }
.lsb-count strong { font-size: 20px; font-weight: 800; line-height: 1.05; }
.lsb-count small { font-size: 12px; color: rgba(255,255,255,.62); }
.lsb-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-content: center; }
.lsb-chip { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.lsb-chip.busy { background: rgba(245,170,90,.16); border-color: rgba(245,170,90,.34); }
.lsb-chip i { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: oklch(0.82 0.13 150); }
.lsb-chip.busy i { background: oklch(0.78 0.14 60); }
.lsb-chip span { display: flex; flex-direction: column; min-width: 0; }
.lsb-chip b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsb-chip em { font-size: 10.5px; font-style: normal; color: rgba(255,255,255,.6); }
.lsb-chip.busy em { color: oklch(0.86 0.09 70); }
.lsb-next { flex-direction: column; justify-content: center; gap: 4px; }
.lsb-next-head { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.lsb-next-pill { align-self: flex-start; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.14); padding: 3px 10px; border-radius: 7px; margin: 3px 0; }
.lsb-next.free .lsb-next-pill { background: rgba(245,170,90,.2); color: oklch(0.9 0.09 70); }
.lsb-next strong { font-size: 16px; font-weight: 800; }
.lsb-next-title { font-size: 12px; color: rgba(255,255,255,.7); }
.lsb-next small { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 2px; }

/* KPI 4-up */
.kpi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi4 .kpi { background: #fff; border: 1px solid var(--card-border, #e6e8ec); border-radius: 15px; padding: 18px;
  box-shadow: 0 1px 2px rgba(16,30,24,.04); display: flex; flex-direction: column; gap: 8px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { font-size: 12.5px; font-weight: 600; color: var(--muted-2, #6e727c); }
.kpi-tile { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.kpi-tile.green { background: var(--accent-soft); color: var(--accent-d); }
.kpi-tile.blue { background: oklch(0.95 0.03 240); color: oklch(0.5 0.12 250); }
.kpi-tile.amber { background: var(--busy-soft, oklch(0.96 0.05 78)); color: oklch(0.55 0.11 65); }
.kpi4 .kpi strong { font-size: 29px; font-weight: 800; line-height: 1; color: var(--heading, #2c2f36); }
.kpi-of { font-size: 15px; font-weight: 600; color: var(--faint, #8a8e98); margin-left: 4px; }
.kpi-note { font-size: 11.5px; color: var(--muted-2, #6e727c); }
.kpi-note.pos { color: var(--accent-d); font-weight: 600; }
.kpi-link { font-size: 11.5px; font-weight: 700; color: var(--accent-d); }
.kpi-link:hover { text-decoration: underline; }

/* main grid */
.adash-grid { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start; }
.adash-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.adash-right { min-width: 0; }

/* timeline */
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.tl-head h2 { font-size: 16px; font-weight: 700; white-space: nowrap; min-width: 0; margin: 0; }
.tl-legend { display: flex; gap: 14px; flex-shrink: 0; }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted-2, #6e727c); }
.tl-legend .lg { width: 10px; height: 10px; border-radius: 3px; }
.tl-legend .lg.confirmed { background: var(--accent); }
.tl-legend .lg.pending { background: oklch(0.72 0.12 70); }
.tl-axis { position: relative; height: 16px; margin-left: 150px; margin-bottom: 4px; }
.tl-axis span { position: absolute; transform: translateX(-50%); font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; color: var(--faint, #8a8e98); }
.tl-axis span:first-child { transform: none; }
.tl-body { position: relative; }
.tl-row { display: flex; align-items: center; height: 46px; border-top: 1px solid var(--hairline, #eceef1); }
.tl-label { width: 150px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-right: 14px; }
.tl-label b { font-size: 13.5px; font-weight: 700; color: var(--heading, #2c2f36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.tl-label em { font-family: inherit; font-size: 11px; font-style: normal; color: var(--muted-2, #6e727c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.tl-track { position: relative; flex: 1; height: 30px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent, transparent calc(20% - 1px), var(--hairline, #eceef1) 20%); }
.tl-block { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: var(--accent-soft);
  border-left: 3px solid var(--accent); display: flex; align-items: center; padding: 0 7px; overflow: visible; cursor: default;
  transition: filter .14s ease, transform .14s ease; }
.tl-block:hover { filter: brightness(.97); transform: translateY(-1px); }
.tl-block.pending { background: var(--busy-soft, oklch(0.96 0.05 78)); border-left-color: oklch(0.72 0.12 70); }
.tl-block-label { font-size: 11px; font-weight: 600; color: var(--accent-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block.pending .tl-block-label { color: oklch(0.5 0.1 65); }
.tl-tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: none; white-space: nowrap;
  background: oklch(0.25 0.02 250); color: #fff; font-size: 11px; padding: 5px 9px; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.tl-block:hover .tl-tip { display: block; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--alert, oklch(0.62 0.13 45)); z-index: 3; }
.tl-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 999px; background: var(--alert, oklch(0.62 0.13 45)); }
.tl-empty { font-size: 13px; color: var(--muted-2, #6e727c); padding: 8px 0; }

/* recent activity */
.act-head { margin-bottom: 6px; }
.act-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.act-row { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border-radius: 8px;
  border-top: 1px solid var(--hairline, #eceef1); transition: background .12s ease; }
.act-row:first-of-type { border-top: none; }
.act-row:hover { background: oklch(0.975 0.005 250); }
.act-av { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-d)); }
.act-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--body, #474b54); line-height: 1.45; }
.act-txt b { color: var(--heading, #2c2f36); font-weight: 700; }
.act-time { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--faint, #8a8e98); flex-shrink: 0; }

/* pending requests */
.pend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pend-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.pend-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; color: oklch(0.5 0.1 65);
  background: var(--busy-soft, oklch(0.96 0.05 78)); padding: 2px 9px; border-radius: 999px; }
.request-card { box-sizing: border-box; width: 100%; overflow: hidden; border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 12px; padding: 13px; margin-bottom: 11px; }
.request-card:last-of-type { margin-bottom: 0; }
.rq-top { display: flex; align-items: center; gap: 10px; }
.rq-av { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, oklch(0.6 0.11 250), oklch(0.5 0.12 260)); }
.rq-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rq-meta b { font-size: 13.5px; font-weight: 700; color: var(--heading, #2c2f36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-meta em { font-size: 11.5px; font-style: normal; color: var(--muted-2, #6e727c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq-pill { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: oklch(0.5 0.1 65); background: var(--busy-soft, oklch(0.96 0.05 78));
  padding: 3px 8px; border-radius: 999px; }
.rq-when { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--faint, #8a8e98); margin: 9px 0 0; }
/* button overflow fix (fix-pending-button-overflow.md) */
.request-actions { display: flex; gap: 9px; width: 100%; margin-top: 13px; }
.request-actions > * { flex: 1 1 0; min-width: 0; display: flex; }
.rq-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.rq-btn.approve { background: var(--accent-d); color: #fff; }
.rq-btn.approve:hover { filter: brightness(1.05); }
.rq-btn.decline { background: #fff; color: var(--body, #474b54); border-color: var(--card-border, #e6e8ec); }
.rq-btn.decline:hover { background: var(--page-bg, #f7f8f9); }
.pend-more { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent-d); }
.pend-more:hover { text-decoration: underline; }

/* responsive */
@media (max-width: 1080px) {
  .adash-grid { grid-template-columns: 1fr; }
  .kpi4 { grid-template-columns: repeat(2, 1fr); }
  .lsb { grid-template-columns: 1fr; }
  .lsb-chips { border-left: none; border-right: none; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 560px) {
  .kpi4 { grid-template-columns: 1fr 1fr; }
  .lsb-live { flex-direction: row; }
  .request-actions { flex-direction: column; }
}

/* ============================================================
   GUEST / AUTH PAGES (Batch 1) — WESB Admin Login mockup + brand
   ============================================================ */
.auth-body { min-height: 100vh; margin: 0; background: var(--page-bg, #f7f8f9); display: flex; }
.auth-shell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }

/* --- brand lockup (shared) --- */
.auth-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.auth-brand .auth-mark { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-d)); display: flex; align-items: center; justify-content: center; }
.auth-brand b { font-size: 15px; font-weight: 800; color: var(--heading, #2c2f36); display: block; line-height: 1.1; }
.auth-brand small { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2, #6e727c); }

/* --- simple centered card (forgot / reset / support / cancel / issue) --- */
.auth-card { width: 100%; max-width: 430px; background: #fff; border: 1px solid var(--card-border, #e6e8ec); border-radius: 18px;
  padding: 32px; box-shadow: 0 1px 3px rgba(20,28,50,.06), 0 24px 50px -32px rgba(20,28,50,.28); }
.auth-card .auth-brand { margin-bottom: 22px; }
.auth-title { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--heading, #2c2f36); margin: 0; }
.auth-subtitle { font-size: 13.5px; color: var(--muted-2, #6e727c); margin: 8px 0 0; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 15px; margin-top: 24px; }
.auth-form .field { display: flex; flex-direction: column; gap: 7px; }
.auth-form .field > label { font-size: 12.5px; font-weight: 700; color: var(--label, #474b54); }
.auth-form input, .auth-form textarea, .auth-form select { font-family: inherit; width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--field, oklch(0.88 0.006 220)); border-radius: 11px; font-size: 14.5px; color: var(--ink, #2c2f36); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease; }
.auth-form textarea { min-height: 120px; resize: vertical; }
.auth-form input:focus, .auth-form textarea:focus, .auth-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-form .button { margin-top: 4px; }
.auth-links { display: flex; justify-content: space-between; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.auth-links a { font-size: 13px; font-weight: 700; color: var(--accent-d); }
.auth-links a:hover { text-decoration: underline; }

/* --- split login (WESB Admin Login.dc.html) --- */
.auth-split { width: 100%; max-width: 1000px; background: #fff; border-radius: 20px; overflow: hidden; display: grid;
  grid-template-columns: 1.05fr 1fr; box-shadow: 0 1px 3px rgba(20,28,50,.08), 0 30px 60px -34px rgba(20,28,50,.4); min-height: 600px; }
.auth-panel { position: relative; padding: 46px 44px; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: linear-gradient(150deg, oklch(0.32 0.05 162), oklch(0.24 0.04 162)); }
.auth-panel-brand { display: flex; align-items: center; gap: 12px; }
.auth-panel-brand .m { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-panel-brand b { font-weight: 800; font-size: 16px; display: block; line-height: 1.1; }
.auth-panel-brand small { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.auth-panel h2 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.auth-panel > div p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); margin-top: 13px; max-width: 360px; }
.auth-panel-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.auth-panel-list > div { display: flex; align-items: center; gap: 11px; font-size: 13px; color: rgba(255,255,255,.85); }
.auth-panel-list .c { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-panel-foot { font-size: 12px; color: rgba(255,255,255,.5); }
.auth-formside { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.auth-formside-brand { display: none; margin-bottom: 22px; }
.auth-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-d); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.auth-inp { position: relative; }
.auth-inp > .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: oklch(0.55 0.01 220); display: flex; }
.auth-inp input { padding-left: 40px !important; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-remember { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--label, #474b54); cursor: pointer; }
.auth-submit { width: 100%; margin-top: 6px; border: none; cursor: pointer; background: var(--accent-d); color: #fff; font-family: inherit;
  font-weight: 700; font-size: 15px; padding: 14px; border-radius: 12px; box-shadow: 0 3px 10px rgba(16,40,30,.22);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s ease, transform .05s ease; }
.auth-submit:hover { filter: brightness(1.07); }
.auth-submit:active { transform: translateY(1px); }
.auth-alt { font-size: 12.5px; color: var(--muted-2, #6e727c); text-align: center; margin-top: 24px; line-height: 1.5; }
.auth-alt a { color: var(--accent-d); font-weight: 700; }
.auth-forgot { font-size: 12.5px; font-weight: 700; color: var(--accent-d); }
.auth-forgot:hover { text-decoration: underline; }
.auth-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer;
  color: oklch(0.5 0.012 220); padding: 4px; display: flex; }
.auth-eye.on { color: var(--accent-d); }

/* --- split support page --- */
.support-page { width: 100%; display: flex; align-items: center; justify-content: center; }
.support-split { width: min(1080px, 100%); min-height: 674px; display: grid; grid-template-columns: .86fr 1.31fr; overflow: hidden;
  background: #fff; border: 1px solid rgba(16, 30, 24, .08); border-radius: 20px; box-shadow: 0 1px 3px rgba(20,28,50,.08), 0 30px 60px -34px rgba(20,28,50,.34); }
.support-panel { color: #fff; background: oklch(0.22 0.045 162); padding: 40px 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.support-brand { display: flex; align-items: center; gap: 12px; }
.support-mark { width: 45px; height: 45px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.support-brand b { display: block; font-size: 16px; font-weight: 800; line-height: 1.05; }
.support-brand small { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: oklch(0.82 0.075 170); }
.support-intro { margin-top: 34px; }
.support-intro h1 { margin: 0; color: #fff; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: 0; }
.support-intro p { margin: 12px 0 0; max-width: 360px; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.5; }
.support-faq h2 { margin: 0 0 10px; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.support-faq-list { display: flex; flex-direction: column; gap: 10px; }
.support-faq-list article { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px; background: rgba(255,255,255,.07); }
.support-faq-list article > span { width: 14px; height: 14px; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1.5px solid oklch(0.74 0.13 160); color: oklch(0.82 0.12 160); font-size: 9px; font-weight: 800; }
.support-faq-list h3 { margin: 0; color: #fff; font-size: 15px; line-height: 1.25; font-weight: 800; }
.support-faq-list p { margin: 3px 0 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.35; }
.support-contact { border-top: 1px solid rgba(255,255,255,.11); padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.support-contact a, .support-contact span { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.88); font-size: 14.5px; text-decoration: none; }
.support-contact a:hover { color: #fff; text-decoration: underline; }
.support-formside { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.support-form { display: flex; flex-direction: column; gap: 20px; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.support-field { display: flex; flex-direction: column; gap: 8px; }
.support-field label, .support-topic legend { color: oklch(0.19 0.02 230); font-size: 14px; font-weight: 800; }
.support-field input, .support-field textarea { width: 100%; box-sizing: border-box; border: 1px solid oklch(0.9 0.008 220); border-radius: 12px; background: #fff;
  color: oklch(0.24 0.02 230); font: inherit; font-size: 15px; padding: 14px 16px; transition: border-color .15s ease, box-shadow .15s ease; }
.support-field textarea { min-height: 148px; resize: vertical; line-height: 1.5; }
.support-field input::placeholder, .support-field textarea::placeholder { color: oklch(0.56 0.018 245); }
.support-field input:focus, .support-field textarea:focus { outline: none; border-color: oklch(0.45 0.1 158); box-shadow: 0 0 0 3px oklch(0.9 0.045 158); }
.support-topic { border: 0; padding: 0; margin: 0; }
.support-topic-options { display: flex; flex-wrap: wrap; gap: 11px 12px; margin-top: 9px; }
.support-topic label { cursor: pointer; }
.support-topic input { position: absolute; opacity: 0; pointer-events: none; }
.support-topic span { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 17px; border-radius: 999px;
  border: 1px solid oklch(0.9 0.008 220); color: oklch(0.22 0.02 230); background: #fff; font-size: 14.5px; font-weight: 700; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.support-topic input:checked + span { border-color: oklch(0.48 0.11 158); background: oklch(0.96 0.035 158); color: oklch(0.31 0.11 158); box-shadow: inset 0 0 0 1px oklch(0.48 0.11 158); }
.support-topic input:focus-visible + span { box-shadow: 0 0 0 3px oklch(0.9 0.045 158); }
.support-submit { width: 100%; min-height: 54px; border: 0; border-radius: 11px; background: oklch(0.43 0.105 158); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-size: 16px; font-weight: 800; box-shadow: 0 8px 18px -12px rgba(10,50,32,.55); transition: filter .15s ease, transform .05s ease; }
.support-submit:hover { filter: brightness(1.06); }
.support-submit:active { transform: translateY(1px); }
.support-links { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; }
.support-links a { display: inline-flex; align-items: center; gap: 8px; color: oklch(0.32 0.1 158); font-size: 14.5px; font-weight: 800; text-decoration: none; }
.support-links a:last-child { color: oklch(0.35 0.025 240); font-weight: 600; }
.support-links a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; max-width: 440px; min-height: 0; }
  .auth-panel { display: none; }
  .auth-formside { padding: 34px 28px; }
  .auth-formside-brand { display: inline-flex; }
  .support-split { max-width: 520px; grid-template-columns: 1fr; min-height: 0; }
  .support-panel { padding: 30px 26px; }
  .support-formside { padding: 30px 26px; }
  .support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .auth-shell { padding: 18px 12px; }
  .support-split { border-radius: 16px; }
  .support-panel { padding: 26px 20px; }
  .support-formside { padding: 26px 20px; }
  .support-intro h1 { font-size: 27px; }
  .support-intro p { font-size: 15px; }
  .support-links { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   EMPLOYEE DASHBOARD (Batch 2) — handoff "Employee Dashboard"
   ============================================================ */
.edash { display: flex; flex-direction: column; gap: 20px; }

/* next-meeting band */
.nmb { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(100deg, oklch(0.34 0.06 162), oklch(0.30 0.05 162)); box-shadow: 0 12px 30px -14px rgba(10,40,28,.5); }
.nmb-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
.nmb-tile em { font-size: 8.5px; font-style: normal; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.nmb-tile strong { font-size: 20px; font-weight: 800; }
.nmb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nmb-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.nmb-body > strong { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nmb-body small { font-size: 12.5px; color: rgba(255,255,255,.68); }
.nmb-action { flex-shrink: 0; background: #fff; color: var(--accent-d); font-weight: 700; font-size: 13.5px; padding: 11px 18px;
  border-radius: 10px; text-decoration: none; transition: filter .15s ease; }
.nmb-action:hover { filter: brightness(.96); }

/* KPI row (3-up, horizontal) */
.kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kpi3 .kpi { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 15px; padding: 18px; box-shadow: 0 1px 2px rgba(16,30,24,.04); }
.kpi3 .kpi .kpi-tile { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.kpi3 .kpi strong { font-size: 24px; font-weight: 800; color: var(--heading, #2c2f36); line-height: 1; display: block; }
.kpi3 .kpi .kpi-label { display: block; margin-top: 3px; }

/* main grid */
.edash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
.edash-left, .edash-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.edash-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.edash-cardhead h2 { font-size: 16px; font-weight: 700; margin: 0; }
.edash-viewall { font-size: 12.5px; font-weight: 700; color: var(--accent-d); }
.edash-viewall:hover { text-decoration: underline; }
.edash-daylabel { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--faint, #8a8e98); }

/* room cards */
.rbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rbook-card { border: 1px solid var(--card-border, #e6e8ec); border-radius: 13px; overflow: hidden; background: #fff;
  transition: box-shadow .18s ease, transform .18s ease; }
.rbook-card:hover { box-shadow: 0 2px 4px rgba(16,30,24,.05), 0 14px 30px -12px rgba(16,30,24,.18); transform: translateY(-2px); }
.rbook-card.is-busy { opacity: .78; }
.rbook-head { position: relative; height: 54px; display: flex; align-items: center; padding: 0 14px; color: #fff; }
.rbook-dot { position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 999px; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.rbook-dot.free { background: oklch(0.82 0.13 150); }
.rbook-dot.busy { background: oklch(0.78 0.14 60); }
.rbook-body { padding: 12px 14px; }
.rbook-body b { font-size: 14px; font-weight: 700; color: var(--heading, #2c2f36); display: block; }
.rbook-body small { font-size: 11.5px; color: var(--muted-2, #6e727c); display: block; margin-top: 2px; }
.rbook-btn { display: block; text-align: center; margin-top: 12px; padding: 10px; border-radius: 9px; font-size: 13px; font-weight: 700;
  text-decoration: none; background: var(--accent-d); color: #fff; transition: filter .15s ease; }
.rbook-btn:hover { filter: brightness(1.06); }
.rbook-btn.is-disabled { background: oklch(0.95 0.004 220); color: var(--muted-2, #6e727c); cursor: not-allowed; }

/* upcoming rows */
.ubk-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hairline, #eceef1); }
.ubk-row:first-of-type { border-top: none; }
.ubk-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 52px; flex-shrink: 0;
  border-radius: 11px; background: var(--accent-soft); }
.ubk-date em { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; font-style: normal; text-transform: uppercase; color: var(--accent-d); }
.ubk-date strong { font-size: 20px; font-weight: 800; color: var(--accent-d); line-height: 1; }
.ubk-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ubk-meta b { font-size: 14px; font-weight: 700; color: var(--heading, #2c2f36); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ubk-meta small { font-size: 12px; color: var(--muted-2, #6e727c); }
.ubk-time { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--faint, #8a8e98); }
.ubk-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.ubk-edit { padding: 6px 12px; font-size: 12.5px; }

/* today vertical timeline */
.etl { display: flex; flex-direction: column; }
.etl-row { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.etl-row:not(:last-child) .etl-node::after { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 2px; height: calc(100% - 4px); background: var(--accent-soft); }
.etl-time { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--body, #474b54);
  width: 46px; flex-shrink: 0; text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.etl-time em { font-size: 9px; font-style: normal; color: var(--faint, #8a8e98); }
.etl-node { position: relative; width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; margin-top: 3px; background: var(--accent); }
.etl-node.pending { background: oklch(0.72 0.12 70); }
.etl-body { min-width: 0; }
.etl-body b { font-size: 13.5px; font-weight: 700; color: var(--heading, #2c2f36); display: block; }
.etl-body small { font-size: 11.5px; color: var(--muted-2, #6e727c); }

/* tip card */
.tipcard { background: var(--accent-d); color: #fff; border-radius: 15px; padding: 20px; }
.tipcard-icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: #fff; }
.tipcard b { display: block; margin-top: 14px; font-size: 15px; font-weight: 800; }
.tipcard p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.82); margin-top: 7px; }
.tipcard-btn { display: inline-block; margin-top: 16px; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: 9px; text-decoration: none; transition: background .15s ease; }
.tipcard-btn:hover { background: rgba(255,255,255,.26); }

@media (max-width: 1080px) { .edash-grid { grid-template-columns: 1fr; } .kpi3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .rbook-grid { grid-template-columns: 1fr; } .nmb { flex-wrap: wrap; } .nmb-action { width: 100%; text-align: center; } }

/* ============================================================
   BATCH 3 — app-wide harmonization with the brand system
   (headings, cards, buttons, tables, chips, detail-list,
    list-row, room-grid, filter/panel forms, calendar, timeline)
   Appended last so it settles the cascade over legacy rules.
   ============================================================ */

/* headings */
.page-heading { margin-bottom: 22px; gap: 20px; align-items: flex-start; }
.page-heading h1 { font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; }
.page-heading > div > p, .page-heading p { font-size: 13.5px; color: var(--muted-2, #6e727c); }

/* cards / panels */
.panel, .card, .table-wrap, .summary-card, .issue-board { border-radius: 14px; border-color: var(--card-border, #e6e8ec); }
.panel { padding: 22px; box-shadow: 0 1px 2px rgba(16,30,24,.04); }
.panel h2, .card h2 { font-size: 16px; font-weight: 700; margin: 0 0 14px; letter-spacing: -.01em; }
.panel h3 { font-size: 14px; font-weight: 700; margin: 18px 0 10px; }

/* buttons */
.button, button.button { min-height: 40px; padding: 0 16px; border-radius: 9px; font-size: 14px; font-weight: 700; }
.button:not(.secondary):not(.danger) { box-shadow: 0 2px 8px rgba(16,40,30,.14); }
.button.secondary { border-color: var(--field, #d8dde3); color: var(--body, #474b54); }
.button.secondary:hover { background: var(--page-bg, #f7f8f9); }
.page-heading > .button, .room-meta .button, .panel > form .button, .filter-actions .button,
.empty .button, .calendar-controls .button, .table-actions .button, .adash-actions .button { width: auto; max-width: none; }

/* status chips */
.tag, .status { min-height: 0; padding: 4px 10px; font-size: 11.5px; font-weight: 700; border-radius: 999px; }
.status.rejected, .status.cancelled { background: oklch(0.95 0.03 25); color: oklch(0.52 0.16 25); }
.status.maintenance { background: oklch(0.95 0.03 240); color: oklch(0.46 0.1 250); }

/* tables */
.table-wrap { box-shadow: 0 1px 2px rgba(16,30,24,.04); }
th { font-size: 11px; letter-spacing: .04em; color: var(--muted-2, #6e727c); background: var(--page-bg, #f7f8f9); font-weight: 700; }
th, td { padding: 13px 16px; }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: oklch(0.985 0.004 250); }
td strong { color: var(--heading, #2c2f36); }
td small, .booking-user-cell small { color: var(--muted-2, #6e727c); }

/* detail list — markup uses plain <div> rows */
.detail-list { display: block; margin-top: 4px; }
.detail-list > div { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline, #eceef1); }
.detail-list > div:first-child { padding-top: 0; }
.detail-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-list dt { color: var(--muted-2, #6e727c); font-weight: 700; font-size: 12.5px; }
.detail-list dd { margin: 0; color: var(--ink, #2c2f36); font-size: 14px; line-height: 1.5; }

/* legacy list rows (room-blocks, misc) */
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hairline, #eceef1); }
.list-row:first-of-type { border-top: none; }
.list-row strong { color: var(--heading, #2c2f36); }
.list-row small { color: var(--muted-2, #6e727c); font-size: 12px; }

/* summary filter cards (admin bookings / issues) */
.admin-booking-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 18px; }
.summary-card { min-height: 0; padding: 14px 16px; border-radius: 12px; text-decoration: none; }
.summary-card span { font-size: 11px; letter-spacing: .03em; }
.summary-card strong { font-size: 24px; font-weight: 800; }

/* filter form + in-panel form fields */
.filter-form { align-items: end; }
.filter-form input, .filter-form select { font-family: inherit; min-height: 40px; padding: 0 12px; border: 1px solid var(--field, #d8dde3);
  border-radius: 9px; font-size: 14px; background: #fff; color: var(--ink, #2c2f36); }
.filter-form input:focus, .filter-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.panel .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.panel .field > label { font-size: 12.5px; font-weight: 700; color: var(--label, #474b54); }
.panel .field input, .panel .field select, .panel .field textarea { font-family: inherit; width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 1px solid var(--field, #d8dde3); border-radius: 10px; font-size: 14px; background: #fff; color: var(--ink, #2c2f36);
  transition: border-color .15s ease, box-shadow .15s ease; }
.panel .field textarea { min-height: 92px; resize: vertical; }
.panel .field input:focus, .panel .field select:focus, .panel .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-help { font-size: 12px; color: var(--muted-2, #6e727c); margin-top: 4px; }

/* room grid + cards (rooms/index) */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.room-card { display: flex; flex-direction: column; border: 1px solid var(--card-border, #e6e8ec); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 1px 2px rgba(16,30,24,.04); padding: 0; transition: box-shadow .18s ease, transform .18s ease; }
.room-card:hover { box-shadow: 0 2px 4px rgba(16,30,24,.05), 0 16px 34px -16px rgba(16,30,24,.2); transform: translateY(-2px); }
.room-card > img { width: 100%; height: 150px; object-fit: cover; display: block; background: oklch(0.9 0.008 220); }
.room-card-body { display: flex; flex-direction: column; gap: 5px; padding: 16px; }
.room-card-body strong { font-size: 15px; font-weight: 700; color: var(--heading, #2c2f36); }
.room-card-body > span { font-size: 12.5px; color: var(--muted-2, #6e727c); }
.room-card-body .room-meta { margin-top: 12px; }
.room-card-body .room-meta .button { flex: 1; }

/* history timeline (bookings/show) */
ul.timeline, .timeline { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.timeline > li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--hairline, #eceef1); }
.timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline > li::before { content: ""; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline > li > strong { font-size: 13.5px; font-weight: 700; color: var(--heading, #2c2f36); }
.timeline > li small { display: block; font-size: 11.5px; color: var(--faint, #8a8e98); margin-top: 2px; }
.timeline > li > div { font-size: 13px; color: var(--body, #474b54); margin-top: 4px; }

/* calendar */
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.calendar-day { border: 1px solid var(--card-border, #e6e8ec); border-radius: 12px; background: #fff; padding: 12px; min-height: 130px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(16,30,24,.04); }
.calendar-day > header { font-size: 11px; color: var(--muted-2, #6e727c); text-transform: uppercase; letter-spacing: .04em; }
.calendar-day > header strong { display: block; font-size: 16px; font-weight: 800; color: var(--heading, #2c2f36); text-transform: none; letter-spacing: 0; }
.calendar-event { border-radius: 9px; padding: 8px 9px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
.calendar-event strong { font-size: 11.5px; color: var(--accent-d); }
.calendar-event small { display: block; font-size: 10.5px; color: var(--muted-2, #6e727c); margin-top: 2px; }
.calendar-event.pending { background: var(--busy-soft, oklch(0.96 0.05 78)); border-left-color: oklch(0.72 0.12 70); }
.calendar-event.pending strong { color: oklch(0.5 0.1 65); }
.calendar-event.maintenance { background: oklch(0.95 0.03 240); border-left-color: oklch(0.55 0.11 250); }
.calendar-event.maintenance strong { color: oklch(0.45 0.1 250); }
.calendar-legend { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .calendar-grid { grid-template-columns: 1fr; } }

/* alerts (partials/flash) + wide guest card */
.message { border-radius: 11px; padding: 12px 15px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; border: 1px solid transparent; }
.message.success { background: var(--accent-soft); color: var(--accent-d); border-color: oklch(0.9 0.03 162); }
.message.error { background: oklch(0.96 0.03 25); color: oklch(0.5 0.16 25); border-color: oklch(0.88 0.06 25); }
.message ul { margin: 0; padding-left: 18px; }
.auth-card-wide { max-width: 560px; }
.auth-card-wide .detail-list { margin-top: 18px; }
.confirm-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.confirm-actions > form { display: flex; }
.confirm-actions .button { width: auto; }

/* Public booking confirmation */
.booking-confirmation-card {
  width: min(620px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(16,32,26,.08);
}

.booking-confirmation-hero {
  padding: 28px 32px;
  background: oklch(0.24 0.03 162);
  color: #fff;
}

.booking-confirmation-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.booking-confirmation-hero .auth-brand {
  min-width: 0;
}

.booking-confirmation-hero .auth-brand .auth-mark {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .16);
}

.booking-confirmation-hero .auth-brand b,
.booking-confirmation-hero .auth-brand small {
  color: #fff;
}

.booking-confirmation-hero .auth-brand small {
  opacity: .72;
}

.booking-confirmation-status {
  min-height: 28px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.booking-confirmation-status i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.booking-confirmation-status.pending {
  background: oklch(0.85 0.11 85);
  color: oklch(0.35 0.08 70);
}

.booking-confirmation-status.pending i {
  background: oklch(0.55 0.12 70);
}

.booking-confirmation-status.approved {
  background: oklch(0.955 0.02 162);
  color: oklch(0.34 0.05 162);
}

.booking-confirmation-status.approved i {
  background: oklch(0.47 0.082 162);
}

.booking-confirmation-status.rejected,
.booking-confirmation-status.cancelled {
  background: oklch(0.95 0.03 25);
  color: oklch(0.52 0.16 25);
}

.booking-confirmation-status.rejected i,
.booking-confirmation-status.cancelled i {
  background: oklch(0.55 0.16 30);
}

.booking-confirmation-hero-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 30px;
}

.booking-confirmation-check {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: oklch(0.47 0.082 162);
  color: #fff;
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .8);
}

.booking-confirmation-hero h1 {
  margin: 1px 0 0;
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.18;
}

.booking-confirmation-hero p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  line-height: 1.5;
}

.booking-confirmation-body {
  padding: 24px 32px 28px;
}

.booking-reference-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid oklch(0.92 0.005 220);
  border-radius: 12px;
  background: oklch(0.975 0.004 220);
}

.booking-reference-strip div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.booking-reference-strip div:last-child {
  text-align: right;
}

.booking-reference-strip span,
.booking-confirmation-info-row span:not(.booking-confirmation-info-icon) {
  color: oklch(0.55 0.012 220);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.booking-reference-strip strong {
  overflow-wrap: anywhere;
  color: oklch(0.22 0.012 220);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.booking-reference-strip div:last-child strong {
  color: oklch(0.32 0.012 220);
  font-size: 13px;
  font-weight: 700;
}

.booking-confirmation-meeting {
  margin-top: 21px;
}

.booking-confirmation-meeting h2 {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
}

.booking-confirmation-meeting p {
  margin: 5px 0 0;
  color: oklch(0.5 0.012 220);
  font-size: 13.5px;
  line-height: 1.5;
}

.booking-confirmation-summary {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.booking-confirmation-info-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.booking-confirmation-info-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: oklch(0.955 0.02 162);
  color: oklch(0.34 0.05 162);
}

.booking-confirmation-info-row div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.booking-confirmation-info-row strong {
  color: oklch(0.24 0.012 220);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.booking-confirmation-info-row small {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.booking-confirmation-card .booking-action-footer {
  margin-top: 24px;
}

/* Public cancel booking page */
.cancel-booking-card {
  width: min(600px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(16,32,26,.08);
}

.cancel-booking-header {
  padding: 24px 30px 20px;
  border-bottom: 1px solid oklch(0.93 0.005 220);
}

.cancel-booking-header .auth-brand {
  margin-bottom: 20px;
}

.cancel-booking-header h1 {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
}

.cancel-booking-header p {
  margin: 7px 0 0;
  color: oklch(0.5 0.012 220);
  font-size: 13.5px;
  line-height: 1.5;
}

.cancel-booking-body {
  padding: 22px 30px 28px;
}

.cancel-meeting-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid oklch(0.92 0.005 220);
  border-radius: 12px;
  background: oklch(0.975 0.004 220);
}

.cancel-meeting-strip div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cancel-meeting-strip div > span,
.cancel-info-row div > span {
  color: oklch(0.55 0.012 220);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.cancel-meeting-strip strong {
  overflow-wrap: anywhere;
  color: oklch(0.22 0.012 220);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.cancel-meeting-strip small {
  color: oklch(0.5 0.012 220);
  font-size: 12px;
  font-weight: 700;
}

.cancel-status-pill {
  min-height: 28px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.cancel-status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.cancel-status-pill.pending {
  background: oklch(0.93 0.08 85);
  color: oklch(0.38 0.08 70);
}

.cancel-status-pill.pending i {
  background: oklch(0.6 0.12 70);
}

.cancel-status-pill.approved {
  background: oklch(0.955 0.02 162);
  color: oklch(0.34 0.05 162);
}

.cancel-status-pill.approved i {
  background: oklch(0.47 0.082 162);
}

.cancel-status-pill.danger {
  background: oklch(0.98 0.01 25);
  color: oklch(0.42 0.09 25);
}

.cancel-status-pill.danger i {
  background: oklch(0.5 0.17 25);
}

.cancel-booking-summary {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.cancel-info-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.cancel-info-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: oklch(0.955 0.02 162);
  color: oklch(0.34 0.05 162);
}

.cancel-info-row div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.cancel-info-row strong {
  color: oklch(0.24 0.012 220);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cancel-info-row small {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cancel-booking-form {
  margin-top: 22px;
}

.cancel-danger-zone {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid oklch(0.90 0.03 25);
  border-radius: 13px;
  background: oklch(0.98 0.01 25);
}

.cancel-danger-warning {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.cancel-danger-warning > span {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: oklch(0.5 0.17 25);
}

.cancel-danger-warning p {
  margin: 0;
  color: oklch(0.42 0.09 25);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

.cancel-danger-warning strong {
  font-weight: 800;
}

.cancel-reason-field {
  display: grid;
  gap: 7px;
}

.cancel-reason-field > span {
  color: oklch(0.4 0.05 25);
  font-size: 12.5px;
  font-weight: 800;
}

.cancel-reason-field small {
  color: oklch(0.5 0.012 220);
  font-size: 12px;
  font-weight: 700;
}

.cancel-reason-field textarea {
  width: 100%;
  min-height: 82px;
  box-sizing: border-box;
  resize: vertical;
  padding: 12px 13px;
  border: 1px solid oklch(0.90 0.03 25);
  border-radius: 11px;
  background: #fff;
  color: oklch(0.24 0.012 220);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cancel-reason-field textarea:focus {
  outline: none;
  border-color: oklch(0.5 0.17 25);
  box-shadow: 0 0 0 3px oklch(0.5 0.17 25 / .12);
}

.cancel-confirm-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: oklch(0.4 0.05 25);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
}

.cancel-confirm-check input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: oklch(0.5 0.17 25);
}

.cancel-action-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid oklch(0.93 0.005 220);
}

.cancel-action-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.cancel-action-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 0 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

.cancel-action-link:active {
  transform: translateY(1px);
}

.cancel-action-icon {
  flex: 0 0 auto;
}

.cancel-action-keep {
  padding-left: 0;
  color: oklch(0.5 0.012 220);
}

.cancel-action-keep:hover {
  color: oklch(0.32 0.012 220);
}

.cancel-action-report {
  border-color: oklch(0.91 0.005 220);
  background: #fff;
  color: oklch(0.32 0.012 220);
}

.cancel-action-report:hover {
  background: oklch(0.975 0.004 220);
}

.cancel-action-submit {
  border-color: oklch(0.5 0.17 25);
  background: oklch(0.5 0.17 25);
  color: #fff;
}

.cancel-action-submit:hover {
  border-color: oklch(0.42 0.16 25);
  background: oklch(0.42 0.16 25);
}

.cancel-action-submit:disabled {
  border-color: oklch(0.82 0.03 25);
  background: oklch(0.82 0.03 25);
  color: #fff;
  cursor: not-allowed;
  transform: none;
}

.cancelled-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 22px;
  padding: 15px 16px;
  border: 1px solid oklch(0.90 0.03 25);
  border-radius: 13px;
  background: oklch(0.98 0.01 25);
}

.cancelled-state > span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: oklch(0.5 0.17 25);
  color: #fff;
}

.cancelled-state strong {
  color: oklch(0.42 0.09 25);
  font-size: 15px;
  font-weight: 800;
}

.cancelled-state p {
  margin: 4px 0 0;
  color: oklch(0.42 0.09 25);
  font-size: 13.5px;
  line-height: 1.5;
}

.booking-action-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid oklch(0.92 0.005 220);
}

.booking-action-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

.booking-action-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 0 15px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.booking-action-link:hover {
  transform: translateY(-1px);
}

.booking-action-icon {
  flex: 0 0 auto;
}

.booking-action-back {
  padding-left: 0;
  color: oklch(0.5 0.012 220);
}

.booking-action-back:hover {
  color: oklch(0.32 0.012 220);
  background: transparent;
}

.booking-action-cancel {
  border: 1px solid oklch(0.90 0.005 220);
  background: #fff;
  color: oklch(0.32 0.012 220);
}

.booking-action-cancel:hover {
  border-color: oklch(0.84 0.006 220);
  background: oklch(0.98 0.004 220);
}

.booking-action-report {
  border: 1px solid oklch(0.47 0.082 162);
  background: oklch(0.47 0.082 162);
  color: #fff;
  box-shadow: 0 10px 22px -16px oklch(0.47 0.082 162);
}

.booking-action-report:hover {
  border-color: oklch(0.40 0.082 162);
  background: oklch(0.40 0.082 162);
}

@media (max-width: 640px) {
  .booking-confirmation-card {
    width: 100%;
  }

  .booking-confirmation-hero,
  .booking-confirmation-body {
    padding-right: 24px;
    padding-left: 24px;
  }

  .booking-confirmation-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-reference-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .booking-reference-strip div:last-child {
    text-align: left;
  }

  .cancel-booking-card {
    width: 100%;
  }

  .cancel-booking-header {
    padding: 24px 22px 20px;
  }

  .cancel-booking-body {
    padding: 22px 22px 26px;
  }

  .cancel-meeting-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .cancel-action-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cancel-action-spacer {
    display: none;
  }

  .cancel-action-link {
    width: 100%;
    justify-content: center;
  }

  .cancel-action-keep {
    padding-left: 15px;
  }

  .booking-action-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .booking-action-spacer {
    display: none;
  }

  .booking-action-link {
    width: 100%;
    justify-content: center;
  }

  .booking-action-back {
    padding-left: 15px;
  }
}

/* Report room issue form */
.issue-report-card {
  box-sizing: border-box;
  width: min(600px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 28px);
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(16,32,26,.08);
}

.issue-report-card .auth-brand {
  max-width: 100%;
  margin-bottom: 18px;
}

.issue-report-card .auth-brand span:last-child {
  min-width: 0;
}

.issue-report-card .auth-brand b,
.issue-report-card .auth-brand small {
  overflow-wrap: anywhere;
}

.issue-report-card .message {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
}

.issue-report-card-success {
  width: min(520px, calc(100vw - 32px));
  padding: clamp(22px, 4vw, 30px);
}

.issue-report-card-app {
  margin: 0;
}

.issue-report-title {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
}

.issue-report-subtitle {
  margin: 7px 0 0;
  color: oklch(0.5 0.012 220);
  font-size: 13.5px;
  line-height: 1.5;
}

.issue-report-divider {
  height: 1px;
  margin: 18px 0 0;
  background: oklch(0.93 0.005 220);
}

.issue-booking-context {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid oklch(0.93 0.005 220);
  border-radius: 13px;
  background: oklch(0.975 0.004 220);
}

.issue-booking-context img {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  object-fit: cover;
  background: oklch(0.93 0.005 220);
}

.issue-booking-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.issue-booking-copy strong {
  color: oklch(0.24 0.012 220);
  font-size: 15px;
  font-weight: 800;
}

.issue-booking-copy span {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  line-height: 1.35;
}

.issue-booking-pill {
  align-self: start;
  border: 1px solid oklch(0.90 0.03 162);
  border-radius: 999px;
  background: oklch(0.955 0.02 162);
  color: oklch(0.34 0.05 162);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.issue-report-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}

.issue-fieldset {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.issue-fieldset legend,
.issue-description-label label {
  margin: 0;
  padding: 0;
  color: oklch(0.32 0.012 220);
  font-size: 13px;
  font-weight: 800;
}

.issue-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.issue-type-chip,
.issue-urgency-segment {
  cursor: pointer;
}

.issue-type-chip input,
.issue-urgency-segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.issue-type-chip span {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 8px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 12px;
  background: #fff;
  color: oklch(0.32 0.012 220);
  text-align: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.issue-type-chip b {
  font-size: 20px;
  line-height: 1;
}

.issue-type-chip small {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.issue-type-chip input:checked + span {
  border-color: oklch(0.90 0.03 162);
  background: oklch(0.955 0.02 162);
  color: oklch(0.34 0.05 162);
  box-shadow: 0 0 0 3px oklch(0.47 0.082 162 / .08);
}

.issue-urgency-segments {
  display: flex;
  gap: 8px;
}

.issue-urgency-segment {
  flex: 1 1 0;
}

.issue-urgency-segment small {
  min-height: 46px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 11px;
  background: #fff;
  color: oklch(0.32 0.012 220);
  font-size: 13px;
  font-weight: 800;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.issue-urgency-segment small span {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
}

.issue-dot-low { background: oklch(0.55 0.09 150); }
.issue-dot-normal { background: oklch(0.55 0.10 250); }
.issue-dot-high { background: oklch(0.55 0.16 30); }

.issue-urgency-segment input[value="Low"]:checked ~ small {
  border-color: oklch(0.82 0.06 150);
  background: oklch(0.96 0.03 150);
  color: oklch(0.42 0.09 150);
}

.issue-urgency-segment input[value="Normal"]:checked ~ small {
  border-color: oklch(0.84 0.06 250);
  background: oklch(0.96 0.025 250);
  color: oklch(0.45 0.10 250);
}

.issue-urgency-segment input[value="High"]:checked ~ small {
  border-color: oklch(0.84 0.09 30);
  background: oklch(0.96 0.035 30);
  color: oklch(0.48 0.16 30);
}

.issue-description-field {
  display: grid;
  gap: 8px;
}

.issue-description-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.issue-description-label span {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
}

.issue-description-label span.is-good {
  color: oklch(0.5 0.10 150);
}

.issue-description-field textarea {
  width: 100%;
  min-height: 112px;
  box-sizing: border-box;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 11px;
  background: #fff;
  color: oklch(0.24 0.012 220);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.issue-description-field textarea:focus {
  outline: none;
  border-color: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px oklch(0.47 0.082 162 / .15);
}

.issue-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.issue-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  padding: 0 16px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

.issue-button:active {
  transform: translateY(1px);
}

.issue-button-cancel {
  border-color: oklch(0.91 0.005 220);
  background: #fff;
  color: oklch(0.32 0.012 220);
}

.issue-button-cancel:hover {
  background: oklch(0.975 0.004 220);
}

.issue-button-primary {
  flex: 1 1 auto;
  border-color: oklch(0.47 0.082 162);
  background: oklch(0.47 0.082 162);
  color: #fff;
}

.issue-button-primary:hover {
  border-color: oklch(0.40 0.082 162);
  background: oklch(0.40 0.082 162);
}

.issue-button-primary:disabled {
  border-color: oklch(0.82 0.01 220);
  background: oklch(0.82 0.01 220);
  color: #fff;
  cursor: not-allowed;
  transform: none;
}

.issue-success-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 6px 0 2px;
  text-align: center;
}

.issue-success-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: oklch(0.47 0.082 162);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.issue-success-state h1 {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: clamp(20px, 5vw, 23px);
  font-weight: 800;
  line-height: 1.18;
}

.issue-success-state p {
  max-width: 420px;
  margin: 0;
  color: oklch(0.5 0.012 220);
  font-size: 13.5px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .issue-report-card {
    width: min(100% - 24px, 600px);
    padding: 20px 16px;
    border-radius: 16px;
  }

  .issue-report-card-success {
    width: min(100% - 24px, 520px);
  }

  .issue-report-card .auth-brand {
    gap: 10px;
    margin-bottom: 16px;
  }

  .issue-report-card .auth-brand .auth-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .issue-report-card .auth-brand b {
    font-size: 14px;
  }

  .issue-report-card .auth-brand small {
    font-size: 9.5px;
  }

  .issue-booking-context {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .issue-booking-pill {
    grid-column: 2;
    justify-self: start;
  }

  .issue-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .issue-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .issue-button {
    width: 100%;
  }
}

/* ============================================================
   TOP NAV app shell (admin/employee) — horizontal nav with
   dropdown submenus. Replaces the dark sidebar. Matches design/nav.png
   ============================================================ */
.tn-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--page-bg, #f7f8f9); }

.topnav { position: sticky; top: 0; z-index: 100; background: #fff; border-top: 3px solid var(--accent-d, #2f7a55); border-bottom: 1px solid var(--card-border, #e6e8ec); }
.topnav-inner { width: min(1360px, calc(100% - 36px)); margin: 0 auto; min-height: 64px; display: flex; align-items: center; gap: 12px; }

/* brand */
.tn-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.tn-logo { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-d, #2f7a55); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tn-brand-txt b { display: block; font-size: 15px; font-weight: 800; color: var(--heading, #2c2f36); line-height: 1.1; letter-spacing: -.01em; }
.tn-brand-txt small { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--accent-d, #2f7a55); text-transform: uppercase; }

/* nav links */
.tn-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.tn-item { position: relative; }
.tn-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--body, #474b54); text-decoration: none; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.tn-link:hover { background: var(--page-bg, #f4f6f7); color: var(--heading, #2c2f36); }
.tn-link svg { flex-shrink: 0; }
.tn-chev { opacity: .7; transition: transform .18s ease; }
.tn-link.active, .tn-item.active > .tn-link { background: var(--accent-soft, #e7f3ec); color: var(--accent-d, #2f7a55); }
.tn-item.open > .tn-link { background: var(--page-bg, #f4f6f7); color: var(--heading, #2c2f36); }
.tn-item.open .tn-chev { transform: rotate(180deg); }

/* dropdown menu */
.tn-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; background: #fff; border: 1px solid var(--card-border, #e6e8ec); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(16,30,24,.06), 0 20px 40px -20px rgba(16,30,24,.3); padding: 7px; display: none; z-index: 200; }
.tn-menu.tn-menu-right { left: auto; right: 0; }
.tn-item.open > .tn-menu { display: block; }
.tn-menu a, .tn-menu-logout { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--body, #474b54); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; }
.tn-menu a:hover, .tn-menu-logout:hover { background: var(--accent-soft, #e7f3ec); color: var(--accent-d, #2f7a55); }
.tn-menu-logout { color: var(--danger, #a6192e); }
.tn-menu-logout:hover { background: oklch(0.96 0.03 25); color: oklch(0.5 0.16 25); }
.tn-menu-badge { background: var(--accent-d, #2f7a55); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; }

/* right-side tools */
.tn-tools { display: flex; align-items: center; gap: 9px; margin-left: auto; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.tn-date, .tn-bell, .tn-book, .tn-user, .tn-brand, .tn-nav { flex-shrink: 0; }
.tn-logo-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; display: block; }
.tn-search { display: flex; align-items: center; gap: 8px; flex: 0 1 190px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--field, #d8dde3); border-radius: 10px; color: var(--muted-2, #8a8e98); background: var(--page-bg, #f7f8f9); }
.tn-search svg { flex-shrink: 0; }
.tn-search input { border: none; background: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--ink, #2c2f36); width: 100%; }
.tn-date { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--body, #474b54); border: 1px solid var(--field, #d8dde3); border-radius: 9px; padding: 8px 12px; white-space: nowrap; }
.tn-bell { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--field, #d8dde3); display: inline-flex; align-items: center; justify-content: center; color: var(--body, #474b54); text-decoration: none; }
.tn-bell:hover { background: var(--page-bg, #f4f6f7); }
.tn-bell.has-alert::after { content: ""; position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 999px; background: oklch(0.62 0.13 45); box-shadow: 0 0 0 2px #fff; }
.tn-book { min-height: 40px; padding: 0 15px; gap: 7px; white-space: nowrap; }
.tn-user > .tn-avatar { display: inline-flex; align-items: center; gap: 9px; padding: 5px 8px 5px 5px; border-radius: 999px; border: 1px solid var(--field, #d8dde3); background: #fff; cursor: pointer; font-family: inherit; }
.tn-user > .tn-avatar:hover { background: var(--page-bg, #f4f6f7); }
.tn-avatar-mark { width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, var(--accent, #3f9469), var(--accent-d, #2f7a55)); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tn-user-txt { display: flex; flex-direction: column; line-height: 1.15; }
.tn-user-txt b { font-size: 13px; font-weight: 700; color: var(--heading, #2c2f36); }
.tn-user-txt small { font-size: 10.5px; color: var(--muted-2, #8a8e98); }

/* mobile toggle */
.tn-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--field, #d8dde3); background: #fff; color: var(--body, #474b54); cursor: pointer; align-items: center; justify-content: center; }

/* content */
.tn-main { width: min(1360px, calc(100% - 36px)); margin: 0 auto; padding: 26px 0 64px; flex: 1; }

/* responsive */
@media (max-width: 1340px) {
  .tn-search, .tn-date, .tn-user-txt { display: none; }
}
@media (max-width: 980px) {
  .tn-toggle { display: inline-flex; margin-left: auto; }
  .tn-brand-txt { display: none; }
  .tn-search { display: none; }
  .tn-book { font-size: 0; padding: 0 12px; gap: 0; }
  .tn-book svg { width: 18px; height: 18px; }
  .tn-tools { flex: 0 0 auto; margin-left: 0; gap: 8px; }
  .topnav-inner { gap: 8px; }
  .tn-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; padding: 10px 16px 14px;
    background: #fff; border-bottom: 1px solid var(--card-border, #e6e8ec); box-shadow: 0 24px 34px -22px rgba(16,30,24,.4); display: none; z-index: 200; }
  .topnav.nav-open .tn-nav { display: flex; }
  .tn-nav .tn-item { width: 100%; }
  .tn-nav .tn-link { width: 100%; justify-content: flex-start; }
  .tn-nav .tn-item > .tn-link .tn-chev { margin-left: auto; }
  .tn-nav .tn-menu { position: static; display: block; box-shadow: none; border: none; padding: 2px 0 6px 30px; min-width: 0; }
  .tn-nav .tn-item:not(.open) > .tn-menu { display: none; }
}
@media (max-width: 560px) {
  .tn-book { padding: 0 10px; }
}

/* KPI row with utilization removed -> 3 columns */
.kpi4.is-3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .kpi4.is-3up { grid-template-columns: 1fr; } }

/* bell -> recent-activity dropdown */
.tn-bell-wrap { position: relative; }
.tn-bell { cursor: pointer; }
.tn-notif { width: 340px; max-width: calc(100vw - 28px); padding: 0; overflow: hidden; }
.tn-notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--hairline, #eceef1); }
.tn-notif-head b { font-size: 13.5px; font-weight: 700; color: var(--heading, #2c2f36); }
.tn-notif-hbadge { font-size: 10.5px; font-weight: 700; color: var(--accent-d, #2f7a55); background: var(--accent-soft, #e7f3ec); padding: 2px 9px; border-radius: 999px; text-decoration: none; }
.tn-notif-hbadge:hover { filter: brightness(.96); }
.tn-notif-list { max-height: 344px; overflow-y: auto; padding: 6px; }
.tn-notif-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px; border-radius: 9px; text-decoration: none; }
.tn-notif-row:hover { background: var(--page-bg, #f4f6f7); }
.tn-notif-av { width: 30px; height: 30px; border-radius: 999px; background: var(--accent-soft, #e7f3ec); color: var(--accent-d, #2f7a55); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tn-notif-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tn-notif-line { font-size: 12.5px; line-height: 1.45; color: var(--body, #474b54); }
.tn-notif-line b { color: var(--heading, #2c2f36); font-weight: 700; }
.tn-notif-body small { font-size: 11px; color: var(--faint, #8a8e98); }
.tn-notif-empty { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--muted-2, #6e727c); }
.tn-notif-foot { display: block; padding: 11px 15px; border-top: 1px solid var(--hairline, #eceef1); font-size: 12.5px; font-weight: 700; color: var(--accent-d, #2f7a55); text-decoration: none; text-align: center; }
.tn-notif-foot:hover { background: var(--accent-soft, #e7f3ec); }

/* ============================================================
   APP FORMS + MOBILE TIDY (app.css)
   Cap in-panel forms so inputs don't stretch across wide screens,
   and tidy the top-nav app pages on phones.
   ============================================================ */
/* keep settings/admin forms to a readable column instead of full-width */
.panel > form { max-width: 620px; }
.panel > form.filter-form { max-width: none; }

@media (max-width: 760px) {
  .tn-main { padding: 18px 0 48px; }
  .page-heading { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 18px; }
  .page-heading h1 { font-size: 21px; }
  .page-heading > div > p, .page-heading p { font-size: 13px; }
  .panel { padding: 18px 16px; }
  .panel > form { max-width: none; }
  .panel h2, .card h2 { font-size: 15px; }
  /* full-width primary actions in the page header on phones */
  .page-heading > .button,
  .page-heading .room-meta,
  .page-heading .room-meta .button,
  .room-meta > .button { width: 100%; }
  .page-heading .room-meta { display: flex; flex-direction: column; gap: 8px; }
  .filter-form { grid-template-columns: 1fr; }
  .table-actions { flex-wrap: wrap; }
  .admin-booking-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .admin-booking-summary { grid-template-columns: 1fr; }
}

/* pending requests card — refined to match the "New booking" dashboard mockup */
.pend-head { align-items: center; }
.pend-title { display: flex; align-items: center; gap: 10px; }
.pend-count { font-family: "Plus Jakarta Sans", inherit; font-size: 12.5px; font-weight: 800; color: var(--amber-text, oklch(0.5 0.1 65));
  background: var(--busy-soft, oklch(0.96 0.05 78)); padding: 2px 11px; border-radius: 999px; }
.pend-viewall { font-size: 13px; font-weight: 700; color: var(--accent-d); text-decoration: none; }
.pend-viewall:hover { text-decoration: underline; }
.request-card { padding: 14px; }
.rq-top { align-items: flex-start; gap: 11px; }
.rq-av { width: 38px; height: 38px; font-size: 12.5px; font-weight: 800; color: #fff; }
.rq-meta { gap: 2px; }
.rq-meta b { font-size: 14px; }
.rq-meta em { font-size: 12px; }
.rq-ago { flex-shrink: 0; font-size: 11.5px; font-weight: 500; color: var(--faint, #8a8e98); white-space: nowrap; margin-top: 1px; }
.rq-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0; padding: 9px 12px;
  background: var(--page-bg, #f4f6f7); border: 1px solid var(--hairline, #eceef1); border-radius: 10px; }
.rq-info span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--body, #474b54); }
.rq-info svg { color: var(--faint, #8a8e98); flex-shrink: 0; }
.rq-btn { gap: 7px; font-size: 13.5px; padding: 11px; }
.rq-btn svg { flex-shrink: 0; }

/* override the legacy .request-card grid so the dashboard pending card stacks correctly */
.pend-card .request-card { display: block; grid-template-columns: none; }
.pend-card .request-actions { grid-column: auto; }
.pend-card .rq-info span, .pend-card .rq-ago { font-size: 12.5px; }
.pend-card .request-card .rq-av { color: #fff; }
.pend-card .request-card .rq-ago { color: var(--faint, #8a8e98); }
.pend-card .request-card .rq-info span { color: var(--body, #474b54); }
.pend-card .request-card .rq-meta em { color: var(--muted-2, #6e727c); }

/* red KPI icon tile (Room issues) */
.kpi-tile.red { background: oklch(0.95 0.04 25); color: oklch(0.55 0.17 25); }

/* fix checkboxes/radios caught by the generic "input" rule (were full-width boxes) */
input[type="checkbox"], input[type="radio"] {
  width: auto; height: auto; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  appearance: auto; -webkit-appearance: auto; accent-color: var(--accent-d, #2f7a55); flex: none; vertical-align: middle;
}
input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 2px solid var(--accent-soft, #e7f3ec); outline-offset: 1px; }
.checkline { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--label, #474b54); cursor: pointer; }
.checkline input[type="checkbox"], .checkline input[type="radio"] { width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }

.booking-detail-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline, #eceef1);
}
.booking-detail-actions .button {
  min-width: 160px;
}

/* Admin rejected booking closed record */
.rejected-record-page {
  width: min(600px, 100%);
  margin: 0 auto;
  padding: 0 0 26px;
}

.rejected-record-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: oklch(0.5 0.012 220);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
}

.rejected-record-back:hover {
  color: oklch(0.24 0.012 220);
}

.rejected-record-card {
  overflow: hidden;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(16,32,26,.08);
}

.rejected-record-hero {
  padding: 28px 30px;
  background: oklch(0.32 0.09 25);
  color: #fff;
}

.rejected-record-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.rejected-record-topline > span {
  min-width: 0;
  overflow: hidden;
  color: oklch(0.82 0.06 25);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.rejected-record-topline strong {
  min-height: 28px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.rejected-record-topline i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
}

.rejected-record-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 26px;
}

.rejected-record-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
}

.rejected-record-main h1 {
  margin: 1px 0 0;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.18;
}

.rejected-record-main p {
  margin: 7px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 13.5px;
  line-height: 1.5;
}

.rejected-reason-box {
  margin-top: 22px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  background: rgba(255,255,255,.12);
}

.rejected-reason-box span {
  display: block;
  color: oklch(0.82 0.06 25);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.rejected-reason-box p {
  margin: 7px 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.rejected-record-body {
  padding: 24px 30px 28px;
}

.rejected-section h2 {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.rejected-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-top: 16px;
}

.rejected-fact {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.rejected-fact span {
  color: oklch(0.55 0.012 220);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rejected-fact strong {
  color: oklch(0.24 0.012 220);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rejected-fact small {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rejected-timeline-section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid oklch(0.92 0.005 220);
}

.rejected-timeline {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.rejected-timeline li {
  position: relative;
  padding: 0 0 18px 24px;
  border-left: 2px solid oklch(0.92 0.005 220);
}

.rejected-timeline li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.rejected-timeline li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px #fff;
}

.rejected-timeline li.danger::before {
  background: oklch(0.5 0.17 25);
}

.rejected-timeline strong {
  display: block;
  color: oklch(0.24 0.012 220);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
}

.rejected-timeline small {
  display: block;
  margin-top: 4px;
  color: oklch(0.5 0.012 220);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rejected-closed-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid oklch(0.92 0.005 220);
  border-radius: 12px;
  background: oklch(0.975 0.004 220);
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

.rejected-closed-note svg {
  flex: 0 0 auto;
  color: oklch(0.47 0.082 162);
}

.rejected-record-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  border-radius: 11px;
  background: oklch(0.24 0.03 162);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s ease, transform .05s ease;
}

.rejected-record-button:hover {
  background: oklch(0.20 0.03 162);
}

.rejected-record-button:active {
  transform: translateY(1px);
}

@media (max-width: 560px) {
  .rejected-record-hero {
    padding: 26px 22px;
  }

  .rejected-record-body {
    padding: 24px 22px 26px;
  }

  .rejected-record-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .rejected-record-topline > span {
    white-space: normal;
  }

  .rejected-fact-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin approve / reject booking review */
.admin-approval-page {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 0 0 26px;
}

.admin-approval-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.admin-approval-heading h1 {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
}

.admin-approval-heading p {
  margin: 7px 0 0;
  color: oklch(0.5 0.012 220);
  font-size: 13.5px;
  line-height: 1.45;
}

.admin-approval-status {
  min-height: 30px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: oklch(0.93 0.08 85);
  color: oklch(0.38 0.08 70);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.admin-approval-status i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: oklch(0.6 0.12 70);
}

.admin-approval-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.admin-approval-main {
  display: grid;
  gap: 18px;
}

.admin-approval-card,
.admin-decision-panel {
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 16px;
  background: #fff;
}

.admin-approval-card {
  padding: 22px;
  box-shadow: 0 1px 3px rgba(16,32,26,.05);
}

.admin-approval-card h2,
.admin-decision-panel h2 {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.admin-request-summary {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.admin-request-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.admin-request-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: oklch(0.955 0.02 162);
  color: oklch(0.34 0.05 162);
}

.admin-request-row div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-request-row div > span {
  color: oklch(0.55 0.012 220);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.admin-request-row strong {
  color: oklch(0.24 0.012 220);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-request-row small {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-request-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid oklch(0.92 0.005 220);
}

.admin-request-report {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 10px;
  background: #fff;
  color: oklch(0.32 0.012 220);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.admin-request-report:hover {
  border-color: oklch(0.86 0.008 220);
  background: oklch(0.975 0.004 220);
}

.admin-history-list {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.admin-history-list li {
  position: relative;
  padding: 0 0 18px 22px;
  border-left: 2px solid oklch(0.92 0.005 220);
}

.admin-history-list li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.admin-history-list li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px oklch(0.955 0.02 162);
}

.admin-history-list strong {
  display: block;
  color: oklch(0.24 0.012 220);
  font-size: 13.5px;
  font-weight: 800;
}

.admin-history-list small {
  display: block;
  margin-top: 3px;
  color: oklch(0.55 0.012 220);
  font-size: 11.5px;
  line-height: 1.4;
}

.admin-history-list p {
  margin: 6px 0 0;
  color: oklch(0.32 0.012 220);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}

.admin-decision-panel {
  position: sticky;
  top: 24px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(16,32,26,.07);
}

.admin-decision-panel > p {
  margin: 8px 0 18px;
  color: oklch(0.5 0.012 220);
  font-size: 13px;
  line-height: 1.45;
}

.admin-decision-form,
.admin-reject-form {
  display: grid;
  gap: 13px;
}

.admin-decision-form label,
.admin-reject-form label {
  display: grid;
  gap: 7px;
}

.admin-decision-form label > span,
.admin-reject-form label > span {
  color: oklch(0.32 0.012 220);
  font-size: 12.5px;
  font-weight: 800;
}

.admin-decision-form small {
  color: oklch(0.55 0.012 220);
  font-size: 12px;
  font-weight: 700;
}

.admin-reject-form b {
  color: oklch(0.5 0.17 25);
}

.admin-decision-form textarea,
.admin-reject-form textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 78px;
  padding: 12px 13px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 10px;
  background: #fff;
  color: oklch(0.24 0.012 220);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.admin-decision-form textarea:focus {
  outline: none;
  border-color: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px oklch(0.47 0.082 162 / .14);
}

.admin-reject-form textarea {
  border-color: oklch(0.88 0.04 25);
}

.admin-reject-form textarea:focus {
  outline: none;
  border-color: oklch(0.5 0.17 25);
  box-shadow: 0 0 0 3px oklch(0.5 0.17 25 / .13);
}

.admin-decision-approve,
.admin-reject-toggle,
.admin-reject-back,
.admin-reject-confirm {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 0 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}

.admin-decision-approve {
  width: 100%;
  border-color: oklch(0.47 0.082 162);
  background: oklch(0.47 0.082 162);
  color: #fff;
}

.admin-decision-approve:hover {
  border-color: oklch(0.40 0.082 162);
  background: oklch(0.40 0.082 162);
}

.admin-decision-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 18px 0;
  color: oklch(0.55 0.012 220);
  font-size: 11px;
  font-weight: 800;
}

.admin-decision-divider::before,
.admin-decision-divider::after {
  content: "";
  height: 1px;
  background: oklch(0.92 0.005 220);
}

.admin-reject-toggle {
  width: 100%;
  border-color: oklch(0.88 0.04 25);
  background: #fff;
  color: oklch(0.42 0.09 25);
}

.admin-reject-toggle:hover,
.admin-reject-back:hover {
  background: oklch(0.98 0.01 25);
}

.admin-reject-actions {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
}

.admin-reject-back {
  min-height: 44px;
  border-color: oklch(0.91 0.005 220);
  background: #fff;
  color: oklch(0.32 0.012 220);
}

.admin-reject-confirm {
  min-height: 44px;
  border-color: oklch(0.5 0.17 25);
  background: oklch(0.5 0.17 25);
  color: #fff;
}

.admin-reject-confirm:hover {
  border-color: oklch(0.44 0.17 25);
  background: oklch(0.44 0.17 25);
}

.admin-reject-confirm:disabled {
  border-color: oklch(0.82 0.03 25);
  background: oklch(0.82 0.03 25);
  color: #fff;
  cursor: not-allowed;
}

@media (max-width: 820px) {
  .admin-approval-page {
    width: 100%;
  }

  .admin-approval-heading {
    flex-direction: column;
  }

  .admin-approval-grid {
    grid-template-columns: 1fr;
  }

  .admin-decision-panel {
    position: static;
  }
}

@media (max-width: 520px) {
  .admin-approval-card,
  .admin-decision-panel {
    padding: 18px;
  }

  .admin-request-actions,
  .admin-request-report,
  .admin-decision-approve,
  .admin-reject-toggle {
    width: 100%;
  }

  .admin-reject-actions {
    grid-template-columns: 1fr;
  }
}

.affected-bookings-panel {
  margin-top: 18px;
}
.affected-bookings-panel .affected-bookings-notice {
  margin: 14px 0;
}
.affected-bookings-table .relocation-form select {
  width: 100%;
  min-height: 38px;
}

/* Admin bookings: calmer operations view */
.admin-bookings-heading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.admin-bookings-heading-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--hairline, #eceef1);
  border-radius: 999px;
  background: #fff;
  color: var(--body, #474b54);
  font-size: 12px;
  font-weight: 800;
}
.admin-bookings-status-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,30,24,.04);
}
.booking-status-filter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--body, #474b54);
  text-decoration: none;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.booking-status-filter::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--faint, #8a8e98);
  flex-shrink: 0;
}
.booking-status-filter span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.booking-status-filter strong {
  color: var(--heading, #2c2f36);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.booking-status-filter:hover,
.booking-status-filter.active {
  background: var(--page-bg, #f7f8f9);
}
.booking-status-filter.active {
  box-shadow: inset 0 0 0 1px var(--accent-d, #2f7a55);
}
.booking-status-filter.pending::before { background: var(--amber-text, #9a6500); }
.booking-status-filter.approved::before { background: var(--accent-d, #2f7a55); }
.booking-status-filter.rejected::before,
.booking-status-filter.cancelled::before { background: var(--danger, #a6192e); }

.admin-bookings-panel {
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,30,24,.04), 0 18px 44px -34px rgba(16,30,24,.28);
  overflow: hidden;
}
.admin-bookings-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(220px, .8fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid var(--hairline, #eceef1);
  background: linear-gradient(180deg, #fff 0%, var(--page-bg, #f7f8f9) 100%);
}
.admin-bookings-filter label {
  display: grid;
  gap: 6px;
}
.admin-bookings-filter label > span {
  color: var(--muted-2, #6e727c);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.admin-bookings-filter input,
.admin-bookings-filter select {
  min-height: 42px;
  border-radius: 10px;
  background-color: #fff;
}
.admin-bookings-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-bookings-panel .table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.admin-bookings-panel .admin-bookings-table {
  min-width: 1040px;
}
.admin-bookings-panel .admin-bookings-table th {
  background: #fff;
  border-bottom: 1px solid var(--hairline, #eceef1);
}
.admin-bookings-panel .admin-bookings-table td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.admin-bookings-table .booking-row.status-pending td:first-child {
  box-shadow: inset 3px 0 0 var(--amber-text, #9a6500);
}
.admin-bookings-table .booking-row.status-approved td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-d, #2f7a55);
}
.admin-bookings-table .booking-request-cell strong {
  text-transform: none;
}
.admin-bookings-table .booking-user-cell span,
.admin-bookings-table .booking-room-cell span,
.admin-bookings-table .time-hours {
  color: var(--muted-2, #6e727c);
  font-weight: 600;
}
.admin-bookings-table .table-actions {
  grid-template-columns: 1fr;
  gap: 7px;
}
.admin-bookings-table .button {
  min-height: 36px;
  border-radius: 10px;
}
.admin-bookings-panel nav,
.admin-bookings-panel .pagination {
  padding: 14px 16px 16px;
}
.admin-bookings-panel .empty {
  margin: 16px;
  box-shadow: none;
}

@media (max-width: 900px) {
  .admin-bookings-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-bookings-filter {
    grid-template-columns: 1fr;
  }
  .admin-bookings-panel .admin-bookings-table {
    min-width: 0;
  }
  .admin-bookings-filter-actions,
  .admin-bookings-filter-actions .button {
    width: 100%;
  }
  .admin-bookings-filter-actions {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .admin-bookings-heading-meta {
    justify-content: flex-start;
  }
  .admin-bookings-status-strip {
    grid-template-columns: 1fr;
  }
}

/* Rooms browse page: cleaner, less template-like cards */
.rooms-page {
  display: grid;
  gap: 22px;
}
.rooms-heading {
  align-items: center;
  margin-bottom: 0;
  padding: 18px 20px;
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,30,24,.04);
}
.rooms-heading h1 {
  font-size: 28px;
}
.rooms-search {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}
.rooms-search label {
  min-width: 0;
}
.rooms-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--field, #d8dde3);
  border-radius: 11px;
  background: var(--page-bg, #f7f8f9);
  color: var(--ink, #2c2f36);
  font-family: inherit;
  font-size: 14px;
}
.rooms-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: #fff;
}
.rooms-search .button {
  min-height: 42px;
}
.rooms-browse-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.room-browse-card {
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,30,24,.04);
}
.room-browse-card:hover {
  box-shadow: 0 2px 4px rgba(16,30,24,.05), 0 18px 38px -22px rgba(16,30,24,.26);
}
.room-card-media-link {
  position: relative;
  display: block;
  height: 178px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.room-card-media-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: oklch(0.9 0.008 220);
  transition: transform .22s ease;
}
.room-browse-card:hover .room-card-media-link img {
  transform: scale(1.025);
}
.room-capacity-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(18, 30, 24, .84);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
.room-browse-card .room-card-body {
  gap: 14px;
  padding: 18px;
}
.room-card-title-row {
  display: grid;
  gap: 4px;
}
.room-card-title-row strong {
  color: var(--heading, #2c2f36);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.room-card-title-row span {
  color: var(--muted-2, #6e727c);
  font-size: 13px;
  font-weight: 600;
}
.room-facility-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 27px;
}
.room-facility-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--page-bg, #f7f8f9);
  color: var(--body, #474b54);
  font-size: 11.5px;
  font-weight: 700;
}
.room-browse-card .room-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
}
.room-detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--field, #d8dde3);
  border-radius: 10px;
  color: var(--body, #474b54);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .14s ease, border-color .14s ease;
}
.room-detail-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-d);
}
.room-browse-card .room-meta .button {
  min-width: 112px;
  min-height: 40px;
}

@media (max-width: 780px) {
  .rooms-heading {
    padding: 16px;
  }
  .rooms-search {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .rooms-search .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .rooms-browse-grid {
    grid-template-columns: 1fr;
  }
  .room-card-media-link {
    height: 165px;
  }
}

/* Admin booking detail actions panel */
.admin-actions-panel {
  max-width: 640px;
  padding: 24px;
  border-color: oklch(0.91 0.005 220);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,32,26,.06);
  font-family: "Plus Jakarta Sans", inherit;
}
.admin-actions-panel h2 {
  margin: 0 0 18px;
  color: oklch(0.24 0.012 220);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
}
.admin-action-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.admin-action-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 10px;
  background: #fff;
  color: oklch(0.5 0.012 220);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.admin-action-tab svg {
  flex-shrink: 0;
}
.admin-action-tab:hover {
  border-color: oklch(0.80 0.015 220);
  color: oklch(0.24 0.012 220);
}
.admin-action-tab.is-relocate.is-active {
  border-color: oklch(0.47 0.082 162);
  background: oklch(0.955 0.02 162);
  color: oklch(0.47 0.082 162);
}
.admin-action-tab.is-cancel.is-active {
  border-color: oklch(0.88 0.04 25);
  background: oklch(0.98 0.01 25);
  color: oklch(0.5 0.17 25);
}
.admin-action-panel[hidden] {
  display: none;
}
.admin-action-form {
  display: grid;
  gap: 16px;
  max-width: none;
  margin: 0;
}
.admin-actions-panel .admin-action-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.admin-action-field label {
  color: oklch(0.24 0.012 220);
  font-size: 13px;
  font-weight: 700;
}
.admin-action-field label span {
  color: oklch(0.5 0.012 220);
  font-weight: 600;
}
.admin-action-field label .admin-required {
  color: oklch(0.5 0.17 25);
  font-weight: 800;
}
.admin-action-field input,
.admin-action-field select,
.admin-action-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 10px;
  background: #fff;
  color: oklch(0.24 0.012 220);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-action-field textarea {
  min-height: 94px;
  resize: vertical;
  line-height: 1.45;
}
.admin-action-field textarea[rows="2"] {
  min-height: 76px;
}
.admin-action-field input:focus,
.admin-action-field select:focus,
.admin-action-field textarea:focus {
  outline: none;
  border-color: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px oklch(0.47 0.082 162 / .15);
}
.admin-action-field select:disabled {
  background: oklch(0.97 0.004 220);
  color: oklch(0.58 0.012 220);
  cursor: not-allowed;
}
.admin-action-help {
  margin: 0;
  color: oklch(0.5 0.012 220);
  font-size: 12px;
  font-weight: 600;
}
.admin-action-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 2px;
}
.admin-actions-panel .admin-action-footer .button,
.admin-actions-panel .admin-danger-zone .button {
  width: auto;
  min-width: 180px;
  min-height: 44px;
  border-radius: 10px;
}
.admin-action-footer span {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  font-weight: 600;
}
.admin-actions-panel .button:not(.secondary):not(.danger) {
  background: oklch(0.47 0.082 162);
}
.admin-actions-panel .button:not(.secondary):not(.danger):hover {
  background: oklch(0.40 0.082 162);
}
.admin-actions-panel .button.danger {
  background: oklch(0.5 0.17 25);
}
.admin-actions-panel .button.danger:hover {
  background: oklch(0.44 0.17 25);
}
.admin-actions-panel .button:disabled {
  opacity: .48;
  box-shadow: none;
  cursor: not-allowed;
}
.admin-danger-zone {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid oklch(0.88 0.04 25);
  border-radius: 12px;
  background: oklch(0.98 0.01 25);
}
.admin-danger-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: oklch(0.44 0.17 25);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}
.admin-danger-warning svg {
  flex: 0 0 auto;
  margin-top: 1px;
}
.admin-danger-zone .admin-action-field textarea {
  border-color: oklch(0.88 0.04 25);
  background: #fff;
}
.admin-danger-zone .admin-action-field textarea:focus {
  border-color: oklch(0.5 0.17 25);
  box-shadow: 0 0 0 3px oklch(0.5 0.17 25 / .13);
}
.admin-danger-zone .button {
  justify-self: start;
}

@media (max-width: 640px) {
  .admin-actions-panel {
    max-width: none;
    padding: 18px;
  }
  .admin-action-switch {
    grid-template-columns: 1fr;
  }
  .admin-action-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-actions-panel .admin-action-footer .button,
  .admin-actions-panel .admin-danger-zone .button {
    width: 100%;
  }
}

/* Admin confirmed booking view */
.admin-confirmed-page {
  width: min(1040px, calc(100% - 44px));
  margin: 0 auto;
  padding: 2px 0 48px;
  font-family: "Plus Jakarta Sans", inherit;
}

.admin-confirmed-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid oklch(0.88 0.05 155);
  border-radius: 16px;
  background: oklch(0.96 0.04 155);
  color: oklch(0.38 0.09 155);
  box-shadow: 0 1px 3px rgba(16,32,26,.04);
}

.admin-confirmed-banner span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: oklch(0.4 0.09 155);
}

.admin-confirmed-banner p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.45;
}

.admin-confirmed-heading {
  margin-bottom: 22px;
}

.admin-confirmed-heading h1 {
  letter-spacing: -0.01em;
}

.admin-confirmed-page .admin-approval-card h2 {
  color: oklch(0.5 0.012 220);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

.admin-confirmed-page .admin-request-icon {
  background: oklch(0.955 0.02 162);
  color: oklch(0.42 0.06 162);
}

.admin-confirmed-page .admin-request-row div > span {
  color: oklch(0.55 0.012 220);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}

.admin-confirmed-page .admin-request-row strong {
  color: oklch(0.24 0.012 220);
  font-size: 15px;
  font-weight: 700;
}

.admin-confirmed-page .admin-request-row small {
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
}

.admin-confirmed-status {
  min-height: 30px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  background: oklch(0.93 0.05 155);
  color: oklch(0.4 0.09 155);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.admin-confirmed-status i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: oklch(0.45 0.12 155);
}

.admin-confirmed-page.is-rejected .admin-confirmed-banner,
.admin-confirmed-page.is-cancelled .admin-confirmed-banner {
  border-color: oklch(0.90 0.03 25);
  background: oklch(0.98 0.01 25);
  color: oklch(0.42 0.09 25);
}

.admin-confirmed-page.is-rejected .admin-confirmed-banner span,
.admin-confirmed-page.is-cancelled .admin-confirmed-banner span {
  color: oklch(0.42 0.09 25);
}

.admin-confirmed-page.is-rejected .admin-confirmed-status,
.admin-confirmed-page.is-cancelled .admin-confirmed-status {
  background: oklch(0.98 0.01 25);
  color: oklch(0.42 0.09 25);
}

.admin-confirmed-page.is-rejected .admin-confirmed-status i,
.admin-confirmed-page.is-cancelled .admin-confirmed-status i {
  background: oklch(0.5 0.17 25);
}

.admin-confirmed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.admin-confirmed-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 13px;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 14px;
  background: oklch(0.975 0.004 220);
}

.admin-confirmed-note > span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: oklch(0.24 0.03 162);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.admin-confirmed-note strong {
  display: block;
  color: oklch(0.55 0.012 220);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.admin-confirmed-note p {
  margin: 7px 0 0;
  color: oklch(0.32 0.012 220);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-line;
}

.admin-confirmed-page.is-rejected .admin-confirmed-note > span,
.admin-confirmed-page.is-cancelled .admin-confirmed-note > span {
  background: oklch(0.42 0.09 25);
}

.admin-confirmed-timeline li.is-success::before {
  background: oklch(0.45 0.12 155);
  box-shadow: 0 0 0 3px oklch(0.93 0.05 155);
}

.admin-confirmed-timeline li.is-danger::before {
  background: oklch(0.5 0.17 25);
  box-shadow: 0 0 0 3px oklch(0.98 0.01 25);
}

.admin-confirmed-timeline li.is-accent::before {
  background: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px oklch(0.955 0.02 162);
}

.admin-confirmed-page .admin-history-list li {
  padding-left: 24px;
}

.admin-confirmed-page .admin-history-list li::before {
  left: -7px;
  width: 12px;
  height: 12px;
}

.admin-confirmed-page .admin-history-list strong {
  color: oklch(0.24 0.012 220);
  font-size: 14px;
  font-weight: 700;
}

.admin-confirmed-page .admin-history-list small {
  color: oklch(0.55 0.012 220);
  font-size: 12px;
}

.admin-confirmed-page .admin-history-list p {
  color: oklch(0.4 0.012 220);
  font-size: 13px;
}

.admin-confirmed-actions.admin-actions-panel {
  position: sticky;
  top: 24px;
  max-width: none;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(16,32,26,.07);
}

.admin-confirmed-actions.admin-actions-panel h2 {
  margin-bottom: 0;
  color: oklch(0.24 0.012 220);
  font-size: 16px;
  font-weight: 800;
}

.admin-confirmed-actions-help {
  margin: 8px 0 18px;
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

.admin-confirmed-actions .admin-action-field label {
  color: oklch(0.32 0.012 220);
  font-size: 12.5px;
  font-weight: 700;
}

.admin-confirmed-actions .admin-action-field input,
.admin-confirmed-actions .admin-action-field select,
.admin-confirmed-actions .admin-action-field textarea {
  min-height: 44px;
  border-radius: 10px;
  font-size: 14px;
}

.admin-confirmed-actions .admin-action-field input:focus,
.admin-confirmed-actions .admin-action-field select:focus,
.admin-confirmed-actions .admin-action-field textarea:focus {
  border-color: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px oklch(0.47 0.082 162 / .14);
}

.admin-confirmed-actions .admin-action-footer .button,
.admin-confirmed-actions .admin-danger-zone .button {
  min-height: 46px;
  font-size: 14.5px;
  font-weight: 800;
}

.admin-closed-actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1px solid oklch(0.90 0.03 25);
  border-radius: 14px;
  background: oklch(0.98 0.01 25);
  text-align: center;
}

.admin-closed-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: oklch(0.42 0.09 25);
}

.admin-closed-actions strong {
  color: oklch(0.24 0.012 220);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.admin-closed-actions p {
  max-width: 260px;
  margin: 0;
  color: oklch(0.42 0.09 25);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.admin-closed-back {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 10px;
  background: #fff;
  color: oklch(0.32 0.012 220);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.admin-closed-back:hover {
  background: oklch(0.975 0.004 220);
}

.admin-confirmed-actions .admin-action-footer {
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}

.admin-confirmed-actions .admin-action-footer span {
  text-align: center;
}

.admin-confirmed-actions .admin-action-footer .button,
.admin-confirmed-actions .admin-danger-zone .button {
  width: 100%;
}

@media (max-width: 820px) {
  .admin-confirmed-page {
    width: 100%;
  }

  .admin-confirmed-grid {
    grid-template-columns: 1fr;
  }

  .admin-confirmed-actions.admin-actions-panel {
    position: static;
  }
}

@media (max-width: 520px) {
  .admin-confirmed-banner {
    align-items: flex-start;
  }

  .admin-confirmed-note {
    grid-template-columns: 1fr;
  }
}

/* Room Availability maintenance block tool */
.maintenance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
  max-width: 1040px;
  margin-top: 18px;
  font-family: "Plus Jakarta Sans", inherit;
}
.maintenance-card {
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,32,26,.06);
}
.maintenance-form-card {
  padding: 24px;
}
.maintenance-card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.maintenance-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: oklch(0.955 0.02 162);
  color: oklch(0.47 0.082 162);
  flex-shrink: 0;
}
.maintenance-card-heading h2,
.maintenance-conflict-heading h2 {
  margin: 0;
  color: oklch(0.22 0.012 220);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}
.maintenance-form {
  display: grid;
  gap: 16px;
  max-width: none;
  margin: 0;
}
.maintenance-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.maintenance-field label {
  color: oklch(0.24 0.012 220);
  font-size: 13px;
  font-weight: 700;
}
.maintenance-field label span {
  color: oklch(0.5 0.012 220);
  font-weight: 600;
}
.maintenance-field input,
.maintenance-field select,
.maintenance-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 10px;
  background: #fff;
  color: oklch(0.24 0.012 220);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.maintenance-field textarea {
  min-height: 94px;
  resize: vertical;
  line-height: 1.45;
}
.maintenance-field input:focus,
.maintenance-field select:focus,
.maintenance-field textarea:focus {
  outline: none;
  border-color: oklch(0.47 0.082 162);
  box-shadow: 0 0 0 3px oklch(0.47 0.082 162 / .15);
}
.maintenance-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.maintenance-checkline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: oklch(0.24 0.012 220);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.maintenance-checkline input {
  width: 18px;
  height: 18px;
  accent-color: oklch(0.47 0.082 162);
  flex: 0 0 auto;
}
.maintenance-form-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid oklch(0.91 0.005 220);
}
.maintenance-submit {
  gap: 8px;
  min-width: 150px;
  min-height: 44px;
  border-radius: 10px;
  background: oklch(0.47 0.082 162);
}
.maintenance-submit:hover {
  background: oklch(0.40 0.082 162);
}
.maintenance-submit:disabled {
  background: oklch(0.93 0.004 220);
  color: oklch(0.55 0.012 220);
  box-shadow: none;
  cursor: not-allowed;
}
.maintenance-cancel {
  color: oklch(0.5 0.012 220);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.maintenance-cancel:hover {
  color: oklch(0.40 0.082 162);
}
.maintenance-conflict-card {
  position: sticky;
  top: 84px;
  padding: 20px;
}
.maintenance-conflict-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}
.maintenance-conflict-heading p {
  margin: 0;
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  line-height: 1.45;
}
.maintenance-conflict-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid oklch(0.91 0.005 220);
  border-radius: 12px;
  background: oklch(0.975 0.004 220);
  color: oklch(0.5 0.012 220);
  font-size: 13px;
  font-weight: 800;
}
.maintenance-conflict-status.is-danger {
  border-color: oklch(0.90 0.03 25);
  background: oklch(0.985 0.008 25);
  color: oklch(0.45 0.17 25);
}
.maintenance-conflict-status.is-success {
  border-color: oklch(0.88 0.04 162);
  background: oklch(0.97 0.03 162);
  color: oklch(0.36 0.06 162);
}
.maintenance-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.maintenance-conflict-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.maintenance-conflict-empty {
  margin: 0;
  padding: 16px 12px;
  border: 1px dashed oklch(0.91 0.005 220);
  border-radius: 12px;
  color: oklch(0.5 0.012 220);
  background: oklch(0.975 0.004 220);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}
.maintenance-conflict-row {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid oklch(0.90 0.03 25);
  border-radius: 12px;
  background: oklch(0.985 0.008 25);
  color: oklch(0.24 0.012 220);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.maintenance-conflict-row:hover {
  transform: translateY(-1px);
  border-color: oklch(0.80 0.08 25);
  box-shadow: 0 10px 24px -18px rgba(70, 10, 10, .32);
}
.maintenance-conflict-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.maintenance-conflict-row strong {
  min-width: 0;
  overflow: hidden;
  color: oklch(0.22 0.012 220);
  font-size: 13.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maintenance-conflict-row em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff;
  color: oklch(0.45 0.17 25);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.maintenance-conflict-row span:not(.maintenance-conflict-row-top) {
  color: oklch(0.5 0.012 220);
  font-size: 12px;
  font-weight: 700;
}
.maintenance-conflict-row small {
  color: oklch(0.5 0.012 220);
  font-size: 12px;
  line-height: 1.4;
}
.maintenance-conflict-note {
  margin: 14px 0 0;
  color: oklch(0.5 0.012 220);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .maintenance-layout {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .maintenance-conflict-card {
    position: static;
  }
  .maintenance-time-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .maintenance-form-card,
  .maintenance-conflict-card {
    padding: 18px 16px;
  }
  .maintenance-form-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .maintenance-submit {
    width: 100%;
  }
  .maintenance-cancel {
    text-align: center;
  }
}

/* fix: page-header action buttons (Add Room, etc.) were flex-growing tall in the
   mobile column layout because flex:1 1 158px grows vertically once stacked.
   Keep them a normal-height, full-width button on phones. */
@media (max-width: 760px) {
  .page-heading > .button {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    min-height: 46px;
    height: auto;
    padding: 0 18px;
  }
}

/* ============================================================
   BACK LINK — booking detail pages
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 7px 12px 7px 9px;
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 999px;
  background: #fff;
  color: var(--muted-2, #6e727c);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.back-link svg {
  flex-shrink: 0;
  transition: transform .14s ease;
}
.back-link:hover {
  border-color: var(--accent-d, #2f7a55);
  background: var(--accent-soft, #e7f3ec);
  color: var(--accent-d, #2f7a55);
}
.back-link:hover svg {
  transform: translateX(-2px);
}

/* ============================================================
   ADMIN BOOKINGS — collapsible status strip on phones
   Desktop keeps the 5-up strip; phones fold it behind a summary
   button so the table isn't pushed below the fold.
   ============================================================ */
.status-strip-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 10px;
  padding: 0 14px;
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,30,24,.04);
  cursor: pointer;
  font: inherit;
  color: var(--body, #474b54);
}
.status-strip-toggle .sst-current {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.status-strip-toggle .sst-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--faint, #8a8e98);
  flex-shrink: 0;
}
.status-strip-toggle .sst-dot.pending { background: var(--amber-text, #9a6500); }
.status-strip-toggle .sst-dot.approved { background: var(--accent-d, #2f7a55); }
.status-strip-toggle .sst-dot.rejected,
.status-strip-toggle .sst-dot.cancelled { background: var(--danger, #a6192e); }
.status-strip-toggle .sst-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.status-strip-toggle .sst-current strong {
  color: var(--heading, #2c2f36);
  font-size: 15px;
  font-weight: 800;
}
.status-strip-toggle .sst-chevron {
  display: inline-flex;
  color: var(--faint, #8a8e98);
  transition: transform .16s ease;
}
.admin-bookings-status.open .status-strip-toggle .sst-chevron {
  transform: rotate(180deg);
}

@media (max-width: 560px) {
  .status-strip-toggle {
    display: flex;
  }
  .admin-bookings-status .admin-bookings-status-strip {
    display: none;
  }
  .admin-bookings-status.open .admin-bookings-status-strip {
    display: grid;
  }
}

/* ============================================================
   ADMIN BOOKINGS — mobile card fixes
   The desktop status stripe lives on td:first-child. Once the row
   becomes a card that cell is the *Request* block, so the inset
   shadow cut straight through the title. Move the accent to the
   card edge and give the content room to breathe.
   ============================================================ */
@media (max-width: 820px) {
  .admin-bookings-table .booking-row.status-pending td:first-child,
  .admin-bookings-table .booking-row.status-approved td:first-child {
    box-shadow: none;
  }
  .admin-bookings-table .booking-row {
    position: relative;
    overflow: hidden;
    padding-left: 19px;
  }
  .admin-bookings-table .booking-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: transparent;
  }
  .admin-bookings-table .booking-row.status-pending::before { background: var(--amber-text, #9a6500); }
  .admin-bookings-table .booking-row.status-approved::before { background: var(--accent-d, #2f7a55); }
  .admin-bookings-table .booking-row.status-rejected::before,
  .admin-bookings-table .booking-row.status-cancelled::before { background: var(--danger, #a6192e); }
}

/* ============================================================
   TOP NAV — recent activity list
   Tone-coded avatar + action chip, and the activity line is clamped
   so a long meeting title can't run the row to four lines.
   ============================================================ */
.tn-notif-body { flex: 1; gap: 5px; }
.tn-notif-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tn-notif-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.tn-notif-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tn-notif-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--page-bg, #f4f6f7);
  color: var(--muted-2, #6e727c);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tn-notif-tag.tone-pending { background: var(--busy-soft, oklch(0.96 0.05 78)); color: var(--amber-text, #9a6500); }
.tn-notif-tag.tone-approved { background: var(--accent-soft, #e7f3ec); color: var(--accent-d, #2f7a55); }
.tn-notif-tag.tone-rejected { background: oklch(0.95 0.04 25); color: oklch(0.5 0.17 25); }
.tn-notif-tag.tone-relocated { background: oklch(0.95 0.03 240); color: oklch(0.48 0.12 250); }
.tn-notif-av.tone-pending { background: var(--busy-soft, oklch(0.96 0.05 78)); color: var(--amber-text, #9a6500); }
.tn-notif-av.tone-approved { background: var(--accent-soft, #e7f3ec); color: var(--accent-d, #2f7a55); }
.tn-notif-av.tone-rejected { background: oklch(0.95 0.04 25); color: oklch(0.5 0.17 25); }
.tn-notif-av.tone-relocated { background: oklch(0.95 0.03 240); color: oklch(0.48 0.12 250); }

/* ============================================================
   DASHBOARD — KPI cards are whole-card links
   ============================================================ */
.kpi4 .kpi {
  color: inherit;
  text-decoration: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.kpi4 a.kpi:hover {
  border-color: var(--accent, #3f9469);
  box-shadow: 0 6px 18px rgba(16,30,24,.09);
  transform: translateY(-1px);
}
.kpi4 a.kpi:hover .kpi-link {
  text-decoration: underline;
}
.kpi4 a.kpi:focus-visible {
  outline: 2px solid var(--accent-d, #2f7a55);
  outline-offset: 2px;
}

/* ============================================================
   TOP NAV — keep the activity panel on screen on phones
   The panel is right-anchored to .tn-bell-wrap at a fixed 340px, so
   its left edge sits at (bell right - 340). On a narrow viewport
   there isn't 340px to the left of the bell and the panel hangs off
   the screen; max-width:calc(100vw - 28px) can't help because it
   measures the viewport, not the room beside the bell.

   Dropping .tn-bell-wrap to position:static hands the containing
   block to .topnav (sticky counts as positioned), so top:100% lands
   just under the bar and left/right gutter to the nav width — the
   same trick .tn-nav already uses for the mobile menu.
   ============================================================ */
@media (max-width: 560px) {
  .tn-bell-wrap {
    position: static;
  }
  .tn-bell-wrap .tn-menu.tn-notif {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

/* ============================================================
   TABLE ACTIONS — a <form> must look exactly like a bare button
   .table-actions lays out its children as flex/grid items. A bare
   <a class="button"> IS that item and stretches to the track, but a
   <button class="button"> is wrapped in a <form> — so the *form*
   stretched while the button inside kept width:auto and shrank to
   its label. That's why "Confirm" sat narrower than "View", and
   "Enable"/"Disable" narrower than "Edit", each a different width.
   ============================================================ */
.table-actions > form {
  display: flex;
  margin: 0;
  min-width: 0;
}
.table-actions > form > .button {
  width: 100%;
}

/* ============================================================
   TOP NAV — every control is the same 40px pill
   The bar mixed a 42px hamburger, a 38px bell, a 40px action and a
   ~42px avatar, each with its own radius. One size, one radius.
   ============================================================ */
.tn-toggle,
.tn-bell {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.tn-tools .tn-book {
  min-height: 40px;
  height: 40px;
  border-radius: 11px;
}
.tn-user > .tn-avatar {
  height: 40px;
  padding: 0 7px 0 4px;
  border-radius: 11px;
}
.tn-avatar-mark {
  width: 30px;
  height: 30px;
}
@media (max-width: 980px) {
  .tn-tools .tn-book {
    width: 40px;
    padding: 0;
  }
}

/* ============================================================
   PAGE HEADING META — chips stay chips, buttons share a row
   The mobile rule forced .room-meta to flex-direction:column, so
   `flex: 1 1 158px` became a *height* (the giant "Book this room"
   block) and align-items:stretch blew the Admin/Active status chips
   out to full-width bars. Keep it a wrapping row instead.
   ============================================================ */
@media (max-width: 760px) {
  .page-heading .room-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .page-heading .room-meta > .status,
  .page-heading .room-meta > .tag {
    flex: 0 0 auto;
    width: auto;
  }
  .page-heading .room-meta > .button,
  .page-heading .room-meta > form {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 46px;
    height: auto;
  }
}

/* ============================================================
   ROOM DETAIL — photo beside the facts instead of a bare <img>
   ============================================================ */
.room-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.room-show-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,30,24,.04);
}
.room-show-media img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}
.room-show-facts {
  margin: 0;
}
.room-show-facts .detail-list {
  margin-top: 4px;
}
@media (max-width: 900px) {
  .room-show-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .room-show-media img {
    max-height: 240px;
  }
}

/* ============================================================
   ROOM ISSUES — one pane at a time on phones
   The console is a master/detail: list left, report right. Stacked
   on a phone that became "the whole list, then a detail pane far
   below it" — tapping a row updated something off-screen, and the
   report appeared to be a duplicate of the row above it. Show the
   list OR the report, with a way back, like any mobile inbox.
   ============================================================ */
.issue-master-row:focus {
  outline: none;
}
.issue-master-row:focus-visible {
  outline: 2px solid var(--accent-d, #2f7a55);
  outline-offset: -3px;
}
.issue-master-row.selected {
  box-shadow: inset 3px 0 0 var(--accent-d, #2f7a55);
}

.issue-row-chevron {
  display: none;
  align-self: center;
  color: var(--faint, #8a8e98);
}

.issue-detail-back {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 7px 12px 7px 9px;
  border: 1px solid var(--card-border, #e6e8ec);
  border-radius: 999px;
  background: #fff;
  color: var(--muted-2, #6e727c);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.issue-detail-back:hover {
  border-color: var(--accent-d, #2f7a55);
  background: var(--accent-soft, #e7f3ec);
  color: var(--accent-d, #2f7a55);
}

@media (max-width: 820px) {
  .issue-master-row {
    grid-template-columns: 10px minmax(0, 1fr) 16px;
  }
  .issue-row-chevron {
    display: inline-flex;
  }
  /* The selected row is a scroll position on desktop; on a phone the
     list is a menu, so nothing in it should look pre-picked. */
  .issue-console:not(.detail-open) .issue-master-row.selected {
    background: transparent;
    box-shadow: none;
  }
  .issue-console:not(.detail-open) .issue-detail-pane {
    display: none;
  }
  .issue-console.detail-open .issue-master-list {
    display: none;
  }
  .issue-master-list {
    border-bottom: 0;
  }
  .issue-detail-back {
    display: inline-flex;
  }
}