:root {
  /* Dialog sizes: S confirmations and credentials, M forms (default), L details and tables, XL wide tables. */
  --dlg-s: 520px;
  --dlg-m: 880px;
  --dlg-l: 1000px;
  --dlg-xl: 1120px;
  /* IRAQ CRS palette: indigo ramp from the logo colour #404094 (500). */
  --brand-50: #f4f4f9;
  --brand-100: #e6e6f1;
  --brand-200: #cdcde3;
  --brand-300: #a9a9cf;
  --brand-400: #7575b2;
  --brand-500: #404094;
  --brand-600: #373781;
  --brand-700: #2f2f6f;
  --brand-800: #26265d;
  --brand-900: #1e1e4c;
  --brand-950: #18183f;
  --ink: var(--brand-900);
  --muted: #686b85;
  --brand: var(--brand-500);
  --brand-soft: var(--brand-100);
  --line: var(--brand-100);
  --paper: #fafbfe;
  --white: #fff;
  --sidebar: 244px;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  color: var(--ink);
  font-size: 14px;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button,
a {
  transition:
    background 0.15s,
    color 0.15s;
}
button {
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #a9a9bc;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.muted {
  color: var(--muted);
  line-height: 1.65;
}
.eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: #727292;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.4px;
}
.brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 1.65px;
  font-weight: 500;
  color: #80809e;
  margin-top: 6px;
}
.brand-mark {
  background: var(--brand);
  color: white;
  border-radius: 10px;
  width: 37px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  letter-spacing: -3px;
  font-weight: 500;
  padding-right: 3px;
}
.brand-mark span {
  color: #ababbf;
}
.loading {
  height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}
.loading-dots {
  margin-top: 10px;
  color: var(--brand);
}
/* Sign in */
.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 46% 54%;
  /* Right half (sign-in form) is white; the left story panel has its own colour. */
  background: var(--white);
}
.login-story {
  padding: 44px 48px 28px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 760px;
}
.story-content {
  margin: auto 0;
  padding-top: 64px;
  position: relative;
}
.story-content h1 {
  font-family: 'Sansation', Inter, sans-serif;
  font-size: clamp(39px, 4.16vw, 62px);
  letter-spacing: -2px;
  font-weight: 500;
  line-height: 1.19;
  margin: 20px 0;
}
.story-content p {
  color: #6c6c8c;
  font-size: 14px;
  line-height: 1.9;
}
.story-footer {
  font-size: 11px;
  color: #717192;
  letter-spacing: 0.3px;
  margin-top: 28px;
}
.architecture {
  height: 245px;
  position: relative;
  margin-top: 36px;
  max-width: 390px;
}
.arch-back {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 62%;
  height: 215px;
  border: 1px solid #bfbfdc;
  border-radius: 100px 100px 0 0;
  background: linear-gradient(120deg, #dedeed, #d3d3e7);
  transform: skewY(-6deg);
}
.arch-front {
  position: absolute;
  bottom: 0;
  left: 9%;
  width: 55%;
  height: 182px;
  background: #dbdbec;
  border: 1px solid #bfbfcd;
  border-radius: 95px 95px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 65px 28px 20px;
  box-shadow: 12px 5px 30px #58764b0b;
}
.arch-front i {
  border-radius: 20px 20px 0 0;
  background: #c3c3df;
  border: 1px solid #b6b6c6;
}
.arch-ground {
  position: absolute;
  height: 1px;
  bottom: 0;
  width: 100%;
  background: #c2c2d0;
}
.login-form-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 60px 40px;
}
.login-form {
  width: 100%;
  max-width: 350px;
}
.login-form h2 {
  font-size: 34px;
  letter-spacing: -1.2px;
  font-weight: 550;
  margin: 15px 0 10px;
}
.login-form > .muted {
  margin: 0 0 34px;
  font-size: 13px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  margin: 20px 0 9px;
}
input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d8d8e6;
  border-radius: 7px;
  background: white;
  color: var(--ink);
  height: 46px;
}
/* Checkboxes and radios must not inherit the text-field box above. */
input:is([type='checkbox'], [type='radio']) {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--brand);
}
input::placeholder {
  color: #9898af;
  font-size: 12px;
}
.password-field {
  position: relative;
}
.password-field input {
  padding-right: 48px;
}
.password-field button {
  position: absolute;
  right: 8px;
  top: 5px;
  height: 36px;
  width: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: #7f7f9d;
}
.primary {
  border: 0;
  border-radius: 7px;
  background: var(--brand);
  color: white;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 550;
}
.primary:hover {
  background: var(--brand-600);
}
.primary:disabled {
  opacity: 0.6;
  cursor: wait;
}
.sign-in {
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}
.login-note {
  font-size: 11px;
  color: #7f7f9c;
  text-align: center;
  line-height: 1.6;
  margin-top: 24px;
}
.login-bottom {
  position: absolute;
  bottom: 28px;
  color: #9292ab;
  font-size: 10px;
}
.login-bottom span {
  padding: 0 10px;
}
.error {
  color: #af413d;
  font-size: 12px;
  line-height: 1.5;
}
/* Panel */
.workspace {
  min-height: 100vh;
  display: flex;
}
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar);
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 29px 18px 20px;
  z-index: 30;
}
.sidebar > .brand {
  padding: 0 8px;
}
.workspace-badge {
  font-size: 10px;
  color: #696989;
  letter-spacing: 0.3px;
  margin: 28px 9px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.workspace-badge:before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-400);
}
nav {
  flex: 1;
  overflow-y: auto;
  margin-top: 4px;
}
.nav-group-title {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: #9090aa;
  padding: 20px 13px 9px;
}
.nav-link {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  margin: 3px 0;
  border-radius: 7px;
  color: #5f5f7b;
  font-size: 12px;
  position: relative;
}
.nav-link:hover {
  background: #f4f4f9;
  color: var(--ink);
}
.nav-link.active {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}
.nav-link.active:after {
  content: '';
  height: 5px;
  width: 5px;
  background: var(--brand);
  border-radius: 50%;
  margin-left: auto;
}
.nav-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.sidebar-bottom {
  border-top: 1px solid var(--line);
  padding: 18px 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #8b8ba6;
}
.live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8686a2;
  flex-shrink: 0;
}
.version {
  margin-left: auto;
  font-size: 9px;
  color: #a3a3b8;
}
.workspace-body {
  width: calc(100% - var(--sidebar));
  margin-left: var(--sidebar);
}
.topbar {
  height: 86px;
  padding: 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #ffffffde;
  gap: 20px;
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.hotel-context {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hotel-context > div {
  min-width: 0;
}
.hotel-symbol {
  width: 35px;
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #737393;
}
.hotel-context label {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #8d8da8;
  margin: 0 0 5px;
}
.hotel-context select {
  max-width: 270px;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 550;
  padding: 0 22px 0 0;
  color: var(--ink);
  cursor: pointer;
  text-overflow: ellipsis;
}
.hotel-context select:disabled {
  opacity: 1;
  appearance: none;
  cursor: default;
}
.role-chip {
  font-size: 9px;
  color: #737393;
  border: 1px solid #dcdcec;
  border-radius: 5px;
  padding: 5px 8px;
  white-space: nowrap;
}
.profile-wrap {
  position: relative;
}
.profile-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 6px;
  border-radius: 8px;
}
.profile-toggle:hover {
  background: #f3f3f9;
}
.avatar {
  width: 34px;
  height: 34px;
  background: #e2e2f0;
  border: 1px solid #d2d2e7;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #4e4e66;
  font-size: 10px;
  font-weight: 600;
}
.profile-identity strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-identity small {
  display: block;
  color: #8787a3;
  font-size: 9px;
  margin-top: 4px;
}
.profile-toggle svg {
  width: 13px;
  color: #8686a1;
  margin-left: 7px;
}
.profile-menu {
  position: absolute;
  top: 54px;
  right: 0;
  width: 218px;
  background: white;
  box-shadow: 0 12px 42px #26382514;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  z-index: 40;
}
.menu-account {
  padding: 10px;
}
.menu-account strong {
  display: block;
  font-size: 12px;
}
.menu-account small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
}
.profile-menu button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
  font-size: 12px;
}
.profile-menu button:hover {
  background: var(--paper);
}
.menu-divider {
  height: 1px;
  background: var(--line);
  margin: 5px;
}
#logout {
  color: #a45c4e;
}
main {
  padding: 16px 40px 24px;
  max-width: 1500px;
  margin: auto;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 30px;
}
.page-heading h1 {
  font-weight: 550;
  letter-spacing: -1.25px;
  font-size: 31px;
  margin: 10px 0;
}
.page-heading .muted {
  font-size: 12px;
  margin: 0;
}
.context-pill {
  font-size: 10px;
  border: 1px solid #d8d8ea;
  border-radius: 6px;
  padding: 8px 10px;
  color: #696989;
  white-space: nowrap;
  background: #f8f8fb;
}
.canvas {
  border: 1px solid #dadaeb;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.canvas-top,
.canvas-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  color: #8f8fa8;
  font-size: 9px;
  gap: 12px;
}
.canvas-top {
  letter-spacing: 1.2px;
  border-bottom: 1px solid #ebebf5;
}
.canvas-top > span:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
}
.canvas-top > span:last-child {
  letter-spacing: 0.6px;
}
.canvas-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 42px 20px 55px;
  background: radial-gradient(ellipse at center, #f6f8f150 0, white 65%);
}
.canvas-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: #ececf5;
  color: #83839f;
  margin-bottom: 28px;
  border: 1px solid #ddddec;
  box-shadow: 0 0 0 9px #f6f6fa;
  transform: rotate(-5deg);
}
.canvas-icon svg {
  width: 30px;
  height: 30px;
  transform: rotate(5deg);
  stroke-width: 1.2;
}
.canvas-content > .eyebrow {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #8d8da7;
}
.canvas-content h2 {
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.7px;
  margin: 12px 0;
}
.canvas-content p {
  color: #8484a0;
  font-size: 12px;
  line-height: 1.85;
  max-width: 360px;
  margin: 0;
}
.coming-next {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #8b8ba5;
}
.coming-next span {
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: #acacbf;
}
.canvas-bottom {
  border-top: 1px solid #ebebf5;
  padding: 15px 24px;
  font-size: 9px;
}
.main-footer {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #9595ae;
  gap: 15px;
  padding: 22px 2px;
}
.icon-button {
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.icon-button:hover {
  background: #e9e9f3;
}
svg {
  width: 18px;
  height: 18px;
  display: block;
}
.mobile-toggle {
  display: none;
}
.nav-overlay {
  position: fixed;
  inset: 0;
  border: 0;
  background: #13271a66;
  z-index: 29;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  width: min(var(--dlg-s), calc(100% - 32px));
  color: var(--ink);
  box-shadow: 0 18px 80px #13251b25;
}
dialog::backdrop {
  background: #192e243d;
  backdrop-filter: blur(3px);
}
.dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-top h2 {
  font-size: 21px;
  letter-spacing: -0.5px;
  font-weight: 550;
  margin: 0;
}
.dialog-top button {
  font-size: 24px;
}
.profile-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.profile-row dt {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}
.profile-row dd {
  margin: 0;
  font-size: 13px;
}
.dialog-top + .muted,
#password-form > .muted {
  font-size: 12px;
}
#password-status {
  font-size: 12px;
  line-height: 1.5;
  color: #9a443d;
}
#password-form > .primary {
  width: 100%;
  margin-top: 8px;
}
.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: auto;
  left: calc(var(--sidebar) + 16px);
  transform: none;
  background: var(--ink);
  color: white;
  border-radius: 10px;
  padding: 18px 24px;
  font-size: 14px;
  line-height: 1.6;
  z-index: 1000;
  box-shadow: 0 8px 30px #0003;
}
@media (max-width: 760px) {
  .toast {
    left: 16px;
  }
}
@media (min-width: 1500px) {
  .canvas {
    min-height: 520px;
  }
  main {
    padding-top: 18px;
  }
  .page-heading {
    margin-top: 45px;
  }
}
@media (max-width: 1050px) {
  :root {
    --sidebar: 218px;
  }
  .sidebar {
    padding: 25px 12px;
  }
  .topbar {
    padding: 0 22px;
  }
  .topbar-right {
    gap: 12px;
  }
  .role-chip {
    display: none;
  }
  main {
    padding: 13px 24px 26px;
  }
  .hotel-context select {
    max-width: 220px;
  }
  .login-story {
    padding: 35px 30px;
  }
  .story-content h1 {
    font-size: 47px;
  }
}
@media (max-width: 760px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 244px;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .workspace-body {
    margin: 0;
    width: 100%;
  }
  .mobile-toggle {
    display: grid;
  }
  .topbar {
    height: 74px;
    padding: 0 16px;
  }
  .topbar-left {
    gap: 8px;
  }
  .hotel-symbol {
    display: none;
  }
  .hotel-context select {
    max-width: 180px;
    font-size: 11px;
  }
  .profile-identity {
    display: none;
  }
  .profile-toggle {
    gap: 2px;
  }
  .profile-toggle svg {
    margin: 0;
  }
  .topbar-right {
    gap: 5px;
  }
  .page-heading {
    align-items: flex-start;
  }
  .context-pill {
    display: none;
  }
  main {
    padding: 12px 20px 24px;
  }
  .page-heading h1 {
    font-size: 28px;
  }
  .canvas {
    min-height: 400px;
  }
  .canvas-top,
  .canvas-bottom {
    padding: 16px;
  }
  .canvas-bottom > span:last-child,
  .main-footer > span:last-child {
    display: none;
  }
  .canvas-content h2 {
    font-size: 21px;
  }
  .main-footer {
    font-size: 9px;
  }
  .login-layout {
    display: flex;
    flex-direction: column;
  }
  .login-story {
    min-height: 0;
    padding: 25px;
    background: var(--paper);
  }
  .story-content,
  .story-footer {
    display: none;
  }
  .login-form-area {
    flex: 1;
    padding: 45px 28px 95px;
    min-height: calc(100vh - 90px);
    align-items: flex-start;
  }
  .login-form {
    margin: auto;
  }
  .login-form h2 {
    font-size: 31px;
  }
  .login-bottom {
    bottom: 25px;
  }
  .brand {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* Master data */
.master-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 8px 0 20px;
}
.search-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding-left: 13px;
  width: 320px;
  max-width: 45%;
  gap: 5px;
}
.search-box > span {
  font-size: 24px;
  color: #8989a5;
}
.search-box input {
  border: 0;
  background: transparent;
  height: 40px;
  font-size: 12px;
  min-width: 0;
}
.toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.toolbar-actions select {
  border: 1px solid var(--line);
  background: white;
  border-radius: 7px;
  height: 41px;
  padding: 0 12px;
  font-size: 11px;
  color: #5a5a76;
}
.toolbar-actions .primary {
  padding: 12px 16px;
  font-size: 12px;
  white-space: nowrap;
}
.records-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
.records-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 21px 22px;
  border-bottom: 1px solid var(--line);
}
.records-card-heading strong {
  font-weight: 600;
  font-size: 13px;
}
.records-card-heading #record-count {
  font-size: 10px;
  color: #747494;
  background: #ededf6;
  border-radius: 5px;
  padding: 4px 7px;
  margin-left: 10px;
}
.records-scope {
  font-size: 10px;
  color: var(--muted);
}
.table-scroll {
  overflow: auto;
}
.records-table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
  text-align: left;
}
.records-table th {
  font-size: 10px;
  font-weight: 500;
  color: #7f7f9d;
  background: #fbfbfd;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.records-table td {
  padding: 17px 20px;
  border-bottom: 1px solid #e9e9f3;
  font-size: 12px;
  color: #595974;
}
.records-table tr:last-child td {
  border-bottom: 0;
}
.records-table tbody tr:hover {
  background: #f9f9fc;
}
.records-table small,
.record-code {
  display: block;
  font-size: 10px;
  color: #8b8ba5;
  margin-top: 6px;
}
.record-name {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: #373748;
  font-size: 12px;
  font-weight: 550;
}
.record-name:hover {
  text-decoration: underline;
}
.status-pill {
  font-size: 9px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: #595974;
  background: #eaeaf4;
  padding: 5px 8px;
  border-radius: 5px;
}
.status-pill:before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7f7f9d;
}
.status-pill.inactive {
  background: #ebebf5;
  color: #82829f;
}
.status-pill.inactive:before {
  background: #9191ab;
}
.row-actions {
  text-align: right;
}
.text-button {
  border: 0;
  background: transparent;
  font-size: 11px;
  color: #60607d;
  padding: 5px 7px;
  border-radius: 4px;
}
.text-button:hover {
  background: #e4e4f1;
}
.table-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 22px;
  font-size: 10px;
  color: #8484a0;
  border-top: 1px solid var(--line);
}
.master-empty,
.master-loading {
  text-align: center;
  padding: 65px 20px 75px;
  color: var(--muted);
}
.master-empty h2 {
  color: var(--ink);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.5px;
}
.master-empty p {
  font-size: 12px;
  line-height: 1.8;
}
.empty-symbol {
  font-size: 32px;
  color: #7e7e9c;
  background: #ededf5;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 15px;
  margin: 0 auto 25px;
}
.secondary {
  background: white;
  border: 1px solid #dcddeb;
  color: #4e4e66;
  border-radius: 7px;
  padding: 11px 16px;
  font-size: 12px;
}
.secondary:hover {
  background: #f0f0f7;
}
.master-empty .secondary {
  margin-top: 14px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.record-dialog {
  width: min(var(--dlg-m), calc(100% - 30px));
  padding: 0;
  max-height: 90vh;
  overflow: auto;
}
.record-dialog-header {
  padding: 26px 28px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.record-dialog-header h2 {
  font-size: 24px;
  letter-spacing: -0.7px;
  font-weight: 550;
  margin: 9px 0 0;
}
.record-dialog-header .muted {
  font-size: 11px;
  margin-bottom: 0;
}
.record-dialog-header .icon-button {
  font-size: 25px;
  color: #7e7e9c;
}
.record-dialog-body {
  padding: 5px 28px;
}
.field-section {
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
}
.field-section:last-child {
  border-bottom: 0;
}
.field-section h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 9px;
  color: #444459;
}
.field-section > p {
  font-size: 11px;
  line-height: 1.6;
  color: #80809e;
  margin: 0 0 16px;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px 20px;
  margin: 0;
}
.form-field label {
  font-size: 11px;
  margin: 0 0 8px;
  color: #5e5e79;
}
.form-field input,
.form-field select {
  height: 42px;
  width: 100%;
  border: 1px solid #dcddeb;
  border-radius: 6px;
  background: white;
  padding: 9px 12px;
  font-size: 12px;
  color: #232351;
}
.form-field select:disabled {
  background: #f2f2f8;
  color: #6e6e8e;
}
.form-field small {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  color: #8b8ba6;
  margin-top: 6px;
}
.required-dot {
  color: #7f7f9c;
  margin-left: 2px;
}
.check-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
}
.check-field label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 5px 0;
}
.check-field input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  padding: 0;
}
.record-dialog-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 17px 28px;
  z-index: 1;
}
.record-dialog-footer > div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.record-dialog-footer .error {
  margin: 0 0 12px;
}
.detail-field {
  padding: 9px 0;
}
.detail-field dt {
  font-size: 10px;
  color: #7a7a98;
  margin-bottom: 8px;
}
.detail-field dd {
  margin: 0;
  color: #3c3c4e;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 11px;
  color: #6d6d8e;
}
.record-timestamps {
  font-size: 10px;
  color: #8c8ca7;
  line-height: 1.9;
  padding: 20px 0;
}
.record-dialog .primary {
  font-size: 12px;
}
.record-dialog [dir='auto'] {
  text-align: start;
}
@media (max-width: 760px) {
  .master-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .search-box {
    width: 100%;
    max-width: none;
  }
  .toolbar-actions {
    justify-content: space-between;
  }
  .records-card-heading {
    padding: 17px;
  }
  .records-scope {
    display: none;
  }
  .records-table td,
  .records-table th {
    padding: 14px;
  }
  .record-dialog-header {
    padding: 22px 20px;
  }
  .record-dialog-body {
    padding: 0 20px;
  }
  .record-dialog-footer {
    padding: 16px 20px;
  }
  .field-grid {
    gap: 17px 12px;
  }
  .table-footer {
    padding: 15px;
  }
  .table-footer span {
    display: none;
  }
}
@media (max-width: 460px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
  .record-dialog-header h2 {
    font-size: 22px;
  }
}
/* ARI range calendar */
.ari-welcome {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 55px 35px;
  text-align: center;
}
.ari-welcome h2 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.7px;
}
.ari-welcome p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.ari-welcome select {
  width: 350px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--ink);
}
.ari-welcome > div {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}

.month-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
}
.month-navigation h2 {
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.4px;
  margin: 0;
  min-width: 150px;
  text-align: center;
}
.month-navigation .icon-button {
  font-size: 23px;
  color: #6f6f91;
}

.legend-open {
  background: #b5cba0;
}
.legend-stop {
  background: #dfb9a4;
}
.legend-unset {
  background: #e2e2ef;
}

.ari-priority-help {
  margin: 17px 0 0 !important;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
}

#ari-form .field-section > p {
  margin-top: 12px;
}

@media (max-width: 600px) {
  .month-navigation {
    gap: 2px;
  }
  .month-navigation h2 {
    font-size: 15px;
    min-width: 130px;
  }

  .ari-welcome {
    padding: 35px 18px;
  }
  .ari-welcome > div {
    flex-wrap: wrap;
  }
}

.ari-mode-note {
  padding: 16px 0;
  font-size: 12px;
  line-height: 1.7;
  color: #646482;
  border-bottom: 1px solid var(--line);
}

.context-date {
  display: block;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #7c7c9a;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

#restrict-form input[type='number'] {
  margin-top: 9px;
}

.distribution-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  overflow-x: auto;
}
.distribution-tabs button {
  border: 0;
  background: transparent;
  padding: 14px 18px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.distribution-tabs button.selected {
  border-bottom-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}
.distribution-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 20px;
}
#distribution-page .toolbar-actions {
  flex-wrap: wrap;
}
#distribution-page code {
  overflow-wrap: anywhere;
}
#distribution-page .master-toolbar {
  flex-wrap: wrap;
}
.users-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 25px;
}
.users-summary > div {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
}
.users-summary strong {
  display: block;
  font-size: 26px;
  font-weight: 550;
}
.users-summary span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.user-hotels {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}
.user-hotels label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px;
  font-size: 12px;
}
.user-hotels input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.user-hotels small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.user-password {
  font-size: 16px;
  overflow-wrap: anywhere;
  user-select: all;
}
#users-page .master-toolbar,
#users-page .toolbar-actions {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .users-summary {
    gap: 8px;
  }
  .users-summary > div {
    padding: 14px;
  }
  .users-summary strong {
    font-size: 22px;
  }
}
.credential-password {
  margin-top: 20px;
}
.credential-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.credential-actions button {
  font-size: 12px;
}
#credential-status {
  min-height: 20px;
  font-size: 12px;
}
.mapping-info-toolbar {
  display: flex;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.mapping-info-toolbar .form-field {
  min-width: 260px;
  max-width: 100%;
}
.mapping-info-toolbar > .muted {
  font-size: 12px;
  padding-bottom: 12px;
}
.mapping-info-table th,
.mapping-info-table td {
  min-width: 210px;
  vertical-align: top;
}
.mapping-info-table thead th {
  padding-top: 18px;
  padding-bottom: 18px;
}
.mapping-info-table th small {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.mapping-info-table th strong {
  font-weight: 600;
}
.mapping-info-table .mapping-group th {
  background: var(--paper);
  font-size: 11px;
  color: var(--muted);
  padding-top: 12px;
  padding-bottom: 12px;
}
.mapping-info-table tbody th[scope='row'] {
  font-size: 12px;
  font-weight: 400;
}
.mapping-info-table code {
  white-space: normal;
  overflow-wrap: anywhere;
}
.mapping-missing {
  font-size: 12px;
  color: #a77c55;
}
.mapping-info-note {
  margin-top: 18px;
}
.mapping-info-table th:first-child:not([colspan]) {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}
.push-steps {
  display: flex;
  gap: 28px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 12px;
}
.push-steps .selected {
  color: var(--brand);
  font-weight: 600;
}
.push-selection > .field-grid {
  padding: 24px;
}
.push-form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 0 24px 24px;
}
.push-form-bottom p {
  font-size: 12px;
  max-width: 65%;
  margin: 0;
}
.push-form-bottom button {
  white-space: nowrap;
}
.push-selection > .error {
  padding: 0 24px 18px;
}
.push-send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  margin-top: 24px;
}
.push-send p {
  font-size: 12px;
  margin: 8px 0 0;
}
.push-send button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  white-space: nowrap;
}
.push-readiness,
.push-preview,
.push-gaps {
  margin-top: 24px;
}
.push-result-body {
  padding: 8px 24px 22px;
  font-size: 12px;
  line-height: 1.7;
}
.push-issues {
  padding: 12px 18px;
  border-radius: 8px;
  margin: 16px 0;
}
.push-issues h3 {
  font-size: 12px;
  margin: 0;
}
.push-issues ul {
  padding-left: 18px;
  margin-bottom: 0;
}
.push-errors {
  background: #fff2ed;
  color: #965941;
}
.push-warnings {
  background: #faf6e9;
  color: #8c743e;
}
.push-gaps summary {
  cursor: pointer;
  padding: 20px 24px;
  font-size: 12px;
}
.push-external-hotel {
  padding: 0 24px 14px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .push-steps {
    gap: 15px;
    font-size: 10px;
  }
  .push-form-bottom {
    align-items: stretch;
    flex-direction: column;
  }
  .push-form-bottom p {
    max-width: 100%;
  }
  .push-send {
    flex-direction: column;
    align-items: stretch;
  }
}
.config-selectors {
  padding: 24px;
  margin-bottom: 22px;
}
.config-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.config-summary > div {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px;
  background: white;
}
.config-summary strong {
  display: block;
  font-size: 14px;
  margin: 12px 0;
}
.config-summary small {
  display: block;
  line-height: 1.6;
  color: var(--muted);
  font-size: 11px;
}
.config-section {
  margin-bottom: 22px;
}
.config-body {
  padding: 22px;
}
.config-body > .muted,
.config-save > .muted {
  font-size: 12px;
  line-height: 1.7;
}
.config-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.config-toggle input,
.config-room input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}
.config-time-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 12px;
  font-size: 12px;
}
.config-time-heading > span {
  color: var(--muted);
}
.config-times {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.config-times > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.config-times input {
  width: 120px;
}
.config-room {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 14px;
  padding: 16px;
}
.config-room-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  margin: 0;
}
.config-room small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.config-plans {
  padding: 12px 0 0 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.config-plans label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  margin: 0;
}
.config-plans small {
  display: block;
  margin-top: 5px;
}
.config-plans label:has(input:disabled) {
  opacity: 0.45;
}
.config-save {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.config-save > p {
  width: 100%;
  margin: 0;
}
.push-config-choice {
  padding: 0 24px 18px;
  font-size: 12px;
}
.push-config-choice label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.push-config-choice input {
  width: 16px;
  height: 16px;
}
@media (max-width: 700px) {
  .config-summary {
    grid-template-columns: 1fr;
  }
  .config-plans {
    grid-template-columns: 1fr;
  }
  .config-time-heading {
    flex-wrap: wrap;
  }
}

/* Manual RG Bridge XML workspace */
.mock-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.mock-actions select {
  width: auto;
  min-width: 160px;
}
.push-products {
  padding: 4px 24px 20px; /* same side gutter as the field grid above */
}
.push-products fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  margin: 12px 0;
  overflow: hidden;
}
/* Legend is floated so it renders as a header row inside the box instead of
   sitting on the border. */
.push-room-heading {
  float: left;
  width: 100%;
  padding: 14px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.push-room-heading label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  margin: 0;
}
.push-room-plans {
  clear: both;
  padding: 12px 18px 12px 44px;
}
.mock-product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 22px 6px 0;
}
.mock-xml-list {
  padding: 0 24px 24px;
}
.mock-xml-list details,
#mock-attempts details {
  border-top: 1px solid #e1e1ef;
  padding: 16px 0;
}
.mock-xml-list summary,
#mock-attempts summary {
  cursor: pointer;
  font-weight: 600;
}
.mock-xml-list textarea {
  width: 100%;
  resize: vertical;
  min-height: 280px;
  font:
    12px/1.7 ui-monospace,
    monospace;
  background: #f6f6fa;
  white-space: pre;
  overflow: auto;
  padding: 14px;
  border: 1px solid #d9d9eb;
  border-radius: 8px;
}
.mock-xml-list p {
  overflow-wrap: anywhere;
}
#mock-attempts pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f6f6fa;
  padding: 12px;
  font-size: 12px;
}
.mock-snapshot {
  margin-top: 24px;
}
#mock-more {
  margin: 14px 24px;
}

/* IRAQ CRS branding and readable operational hierarchy */
:root {
  font-size: 15px;
  --sidebar: 264px;
  --muted: #5e5e7b;
}
.iraqcrs-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  letter-spacing: normal;
}
.iraqcrs-wordmark {
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -1px;
  color: var(--brand-500);
  line-height: 1.1;
}
.iraqcrs-brand .brand-logo {
  display: block;
  width: 205px;
  max-width: 100%;
  height: auto;
  max-height: 85px;
  object-fit: contain;
  object-position: left center;
}
.brand-tagline {
  font-size: 12px;
  line-height: 1.5;
  color: #585873;
  font-weight: 500;
  letter-spacing: 0;
}
.login-story .iraqcrs-brand {
  align-items: center;
}
.login-story .iraqcrs-brand .brand-logo {
  width: 444px;
  max-width: 100%;
  max-height: none;
  object-position: center;
}
.login-story .iraqcrs-wordmark {
  font-size: 42px;
}
.login-story .brand-tagline {
  font-size: 15px;
}
.workspace-badge {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 23px 8px 8px;
  line-height: 1.5;
}
.workspace-badge:before {
  display: none;
}
.sidebar-bottom {
  font-size: 12px;
  gap: 5px;
  flex-wrap: wrap;
  color: #5e5e79;
}
.sidebar-bottom a {
  font-weight: 700;
  color: var(--brand-500);
}
.sidebar-bottom a:hover {
  text-decoration: underline;
}
.nav-link {
  font-size: 14px;
  padding: 11px 13px;
}
.nav-group-title {
  font-size: 10px;
  color: #656584;
}
.nav-link svg {
  width: 19px;
  height: 19px;
}
.topbar {
  min-height: 94px;
  height: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  gap: 16px;
}
.topbar-right {
  gap: 14px;
}
.topbar-left {
  flex: 1;
}
.hotel-context {
  width: 100%;
}
.hotel-context > div {
  flex: 1;
}
.hotel-context label {
  font-size: 10px;
  color: #61617e;
}
.hotel-context select {
  font-size: 17px;
  font-weight: 650;
  width: 100%;
  max-width: 350px;
  min-height: 32px;
}
.hotel-context select option {
  font-size: 17px;
  font-weight: 500;
  padding: 10px;
}
.hotel-symbol {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: #ededf6;
  color: #323275;
  border-color: #d5d5e8;
}
.hotel-symbol svg {
  width: 24px;
  height: 24px;
}
.role-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 10px 13px;
  color: var(--brand-500);
  background: #ededf5;
  border: 1px solid #d4d4e8;
  border-radius: 8px;
}
.profile-identity strong {
  font-size: 14px;
}
.profile-identity small {
  font-size: 11px;
  color: #5f5f7b;
}
.avatar {
  font-size: 12px;
  width: 38px;
  height: 38px;
}
.page-heading {
  flex-wrap: wrap;
  align-items: center;
}
.page-heading h1 {
  font-size: 32px;
  margin: 0 0 10px;
}
.page-heading .muted {
  font-size: 14px;
}
.context-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  white-space: normal;
  max-width: 100%;
  padding: 11px 15px;
  background: #eeeef6;
  border: 1px solid #d5d5e9;
  color: var(--brand-700);
  border-radius: 11px;
}
.property-badge-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #d5d5e8;
  color: #2e2e6b;
  border-radius: 9px;
}
.property-badge-icon svg {
  width: 23px;
  height: 23px;
}
.records-table th {
  font-size: 13px;
  font-weight: 600;
  color: #5b5b76;
}
.records-table td {
  font-size: 14px;
  color: #434358;
}
.record-name {
  font-size: 16px;
  font-weight: 650;
  color: var(--brand-700);
  line-height: 1.4;
}
.records-table .hotel-name-cell {
  font-size: 15px;
  font-weight: 600;
}
.records-table small,
.record-code {
  font-size: 12px;
  font-weight: 400;
  color: #666685;
}
.records-card-heading strong {
  font-size: 16px;
}
.records-scope {
  font-size: 13px;
  font-weight: 550;
}
.status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 9px;
}
.record-count-link {
  display: inline-flex;
  box-sizing: border-box;
  width: 44px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6d6e9;
  border-radius: 8px;
  background: #efeff7;
  color: var(--brand-700);
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.record-count-link:hover {
  background: #dedeed;
  text-decoration: underline;
}
label,
.form-field label {
  font-size: 13px;
  color: #4e4e65;
}
.form-field input,
.form-field select {
  font-size: 15px;
  height: 46px;
}
.form-field select option,
select option {
  font-size: 15px;
}
.check-field input {
  width: 18px;
  height: 18px;
}
.form-field small {
  font-size: 12px;
  color: #636381;
}
.field-section h3 {
  font-size: 15px;
}
.field-section > p {
  font-size: 13px;
  color: #61617f;
}
.detail-field dt {
  font-size: 12px;
}
.detail-field dd {
  font-size: 15px;
}
.primary,
.secondary,
.record-dialog .primary,
.toolbar-actions .primary {
  font-size: 14px;
}
.text-button {
  font-size: 13px;
}
.search-box input,
.toolbar-actions select {
  font-size: 14px;
}
.records-card-heading #record-count {
  font-size: 12px;
}
.error {
  font-size: 14px;
}
.record-dialog-header .muted {
  font-size: 13px;
}

.ari-product-context {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #efeff6;
  border: 1px solid #dbdbeb;
  border-left: 4px solid #3b3b8b;
  border-radius: 8px;
  padding: 13px 16px;
  margin-top: 18px;
  line-height: 1.5;
}
.ari-product-context strong {
  font-size: 19px;
  color: var(--brand-700);
}
.ari-product-context > span {
  font-size: 16px;
  font-weight: 600;
  color: #4d4d65;
}
.inventory-input {
  display: flex;
  align-items: center;
  gap: 13px;
}
.inventory-input input {
  min-width: 0;
  flex: 1;
  width: 0;
  font-size: 19px;
  font-weight: 650;
}
.inventory-input strong {
  font-size: 23px;
  font-weight: 750;
  color: var(--brand-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-right: 8px;
}
.restriction-switches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.restriction-switches .check-field {
  min-height: 48px;
  background: #f5f5f9;
  border: 1px solid #dadaeb;
  border-radius: 8px;
  padding: 10px;
}
.restriction-switches label {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
  gap: 8px;
}
.restriction-switches input {
  flex-shrink: 0;
}
.stay-limits {
  margin-top: 19px;
}

.push-result-body {
  font-size: 14px;
}
.login-form > .muted {
  font-size: 15px;
}
.login-note {
  font-size: 12px;
}
.login-bottom {
  font-size: 12px;
}
@media (max-width: 1200px) {
  .topbar {
    padding-left: 22px;
    padding-right: 22px;
    flex-wrap: wrap;
  }
  .hotel-context select {
    max-width: 290px;
  }
  .role-chip {
    font-size: 11px;
    padding: 9px;
  }
  .profile-identity strong {
    max-width: 125px;
  }
  .topbar-right {
    gap: 9px;
  }
}
@media (max-width: 760px) {
  .sidebar {
    width: 264px;
  }
  .topbar {
    padding: 12px 16px;
    gap: 12px;
  }
  .topbar-left {
    min-width: 180px;
  }
  .topbar-right {
    margin-left: auto;
  }
  .role-chip {
    display: inline-flex;
    font-size: 10px;
    padding: 8px 9px;
  }
  .hotel-context select {
    font-size: 16px;
    max-width: 100%;
  }
  .context-pill {
    display: inline-flex;
    font-size: 15px;
    width: 100%;
  }
  .page-heading h1 {
    font-size: 29px;
  }
  .profile-identity {
    display: block;
  }
  .profile-identity strong {
    font-size: 13px;
    max-width: 125px;
  }
  .profile-identity small {
    font-size: 10px;
  }
  .page-heading {
    gap: 17px;
  }

  .records-scope {
    display: block;
  }
  .records-card-heading {
    flex-wrap: wrap;
  }
  .login-story .brand-logo {
    width: 205px !important;
  }
}
@media (max-width: 460px) {
  .restriction-switches {
    gap: 6px;
  }
  .restriction-switches .check-field {
    padding: 8px 6px;
  }
  .restriction-switches label {
    font-size: 12px;
    gap: 5px;
  }
  .ari-product-context strong {
    font-size: 17px;
  }
  .ari-product-context > span {
    font-size: 15px;
  }

  .topbar-left {
    flex-basis: 100%;
  }
  .topbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .profile-identity strong {
    max-width: 180px;
  }
  .records-scope {
    overflow-wrap: anywhere;
  }
  .context-pill {
    font-size: 14px;
  }
  .stay-limits {
    grid-template-columns: 1fr 1fr;
  }
}

/* ARI views share property, product and month filters. */

/* Shared error presentation for forms, loading failures and operational checks. */
.error:not(:empty),
.push-errors {
  background: #fff0f0;
  border: 1px solid #efb8b8;
  border-left: 4px solid #cc4545;
  border-radius: 9px;
  color: #922b2b;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.65;
  padding: 15px 18px !important;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}
.error:empty {
  display: none;
}
.push-errors h3 {
  font-size: 16px;
  color: inherit;
}
.push-errors li {
  margin: 6px 0;
}
.push-selection > .error {
  margin: 0 24px 20px;
}
#history-error:not(:empty) {
  margin: 16px 24px;
}

.toast.error {
  background: #8f1d1d;
  color: #fff !important;
  box-shadow: 0 8px 30px #6f20204d;
}
.record-dialog-footer .error {
  max-height: 30vh;
  overflow-y: auto;
}
@media (max-width: 460px) {
  .error:not(:empty),
  .push-errors {
    font-size: 15px !important;
    padding: 12px 14px !important;
  }
}

/* Customizable dropdowns (Chrome/Edge 135+). Other browsers keep the native
   select, so nothing breaks there. Font sizes come from typography.css. */
@supports (appearance: base-select) {
  select,
  ::picker(select) {
    appearance: base-select;
  }
  select {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dcddeb;
    border-radius: 7px;
    background-color: white;
    color: var(--ink);
    cursor: pointer;
  }
  select::picker-icon {
    color: var(--brand);
    transition: rotate 0.15s;
  }
  select:open::picker-icon {
    rotate: 180deg;
  }
  select:disabled {
    cursor: default;
  }
  ::picker(select) {
    margin-block: 6px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    box-shadow: 0 14px 34px rgb(30 30 76 / 16%);
    max-height: min(440px, 60vh);
  }
  select option {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 6px;
    gap: 10px;
    color: var(--ink);
    line-height: 1.35;
  }
  select option:hover,
  select option:focus-visible {
    background: var(--brand-soft);
    outline: none;
  }
  select option:checked {
    color: var(--brand);
    font-weight: var(--weight-semibold);
  }
  select option::checkmark {
    color: var(--brand);
  }
  select option:disabled {
    color: #9292ab;
    cursor: default;
  }
}

/* External channel codes in the mapping lists. */
.external-code {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #efe2a8;
  border-radius: 6px;
  background: #fff8db;
  color: #5c4a12;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* Mapping Status: "Not mapped", "No room types" etc. open the matching form. */
.mapping-action {
  padding: 2px 8px;
  border: 1px dashed currentColor;
  border-radius: 6px;
  background: transparent;
  color: #b3261e;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mapping-action:hover {
  background: #fdecea;
}

/* Standard message boxes: .error = light red (above), .alert = light yellow. */
.alert:not(:empty),
.push-warnings {
  background: #fff8e1;
  border: 1px solid #f0dc9a;
  border-left: 4px solid #d6a51c;
  border-radius: 9px;
  color: #6f5412;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  padding: 13px 16px;
  overflow-wrap: anywhere;
}
.alert:empty {
  display: none;
}

/* Status tags: small but readable. Build them with badge() in common.js. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 4px;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-success {
  background: #edf6ef;
  border-color: #c9e2cf;
  color: #2f6b45;
}
.badge-muted {
  background: #f0f0f6;
  border-color: #d9d9e6;
  color: #60607c;
}
.badge-warning {
  background: #fff8e1;
  border-color: #f0dc9a;
  color: #7a5a0f;
}
.badge-danger {
  background: #fdeeee;
  border-color: #f1c4c4;
  color: #a12f2f;
}

/* Channel integration settings (distribution channel form) */
.integration-section h4 {
  margin: 16px 0 8px;
  color: #444459;
}
.integration-section .distribution-tabs {
  margin-bottom: 12px;
}
.integration-actions {
  display: flex;
  justify-content: flex-end;
}

/* Push Config toolbar ("View ARI rules") */
.config-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 16px;
}

/* In-page help (help.js): round "?" button at the right of a card heading */
.card-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.help-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin-left: auto;
  padding: 5px 10px 5px 7px;
  border: 1px solid #d7d7ea;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.card-heading-actions .help-button {
  margin-left: 0;
}
.help-button:hover {
  background: #e0e0ee;
  border-color: #c0c0dd;
}
.help-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.help-button svg {
  display: block;
}
@media (max-width: 700px) {
  .help-button span {
    display: none;
  }
  .help-button {
    padding: 5px;
  }
}

/* Shared info dialog (help topics, ARI rules) */
.info-dialog {
  width: min(var(--dlg-m), calc(100% - 30px));
}
.info-body {
  line-height: 1.6;
  color: var(--ink);
}
.info-body h4 {
  margin: 20px 0 6px;
  color: #444459;
}
.info-body p {
  margin: 0 0 12px;
}
.info-body dl {
  margin: 0 0 12px;
}
.info-body dt {
  margin-top: 10px;
  color: var(--brand);
}
.info-body dd {
  margin: 2px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--brand-soft);
}
.info-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

/* Push Center gaps table: "Fill the gap" */
.gap-action {
  text-align: right;
  white-space: nowrap;
}
.secondary.compact {
  padding: 6px 12px;
}

/* Push History: Manual / Automatic tabs */
.history-tabs {
  margin-bottom: 18px;
}

/* Channel form: automatic push pause */
.auto-push-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.auto-push-controls input {
  flex: 1;
}
.auto-push-controls button {
  flex: none;
}

/* Push History → Automatic: period, dates and status filters */
.history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.period-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.period-chips button {
  border: 1px solid #dcddeb;
  background: white;
  color: #4e4e66;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.period-chips button:hover {
  background: #f0f0f7;
}
.period-chips button.selected {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.history-filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.history-filter-fields .form-field {
  margin: 0;
  min-width: 150px;
}
.history-filter-fields .form-field[hidden] {
  display: none;
}
.history-filter-fields input,
.history-filter-fields select {
  height: 38px;
  padding: 6px 10px;
}

/* Shared pager (common.js pager()) */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
}
.pager-range {
  color: var(--muted);
}
.pager > div {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pager button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #dcddeb;
  border-radius: 7px;
  background: white;
  color: #4e4e66;
  cursor: pointer;
}
.pager button:hover:not(:disabled) {
  background: #f0f0f7;
}
.pager button.selected {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.pager button:disabled {
  opacity: 0.4;
  cursor: default;
}
.pager-gap {
  padding: 0 4px;
  color: var(--muted);
}

/* Push Review (info dialog, wide) */
.info-dialog.info-dialog-wide {
  width: min(var(--dlg-xl), calc(100% - 30px));
}
.review-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.review-summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.info-body .review-summary dd {
  border: 0;
  padding: 0;
  margin: 4px 0 0;
}
.info-body .review-summary dt {
  margin: 0;
}
.review-attempt {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 12px;
  overflow: hidden;
}
.review-attempt summary {
  cursor: pointer;
  padding: 12px 14px;
  background: var(--paper);
  font-weight: 600;
}
.review-message {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.info-body .review-message h4 {
  margin: 0 0 10px;
}
.review-message h4 small {
  font-weight: 400;
  color: var(--muted);
}
.review-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 800px) {
  .review-pair {
    grid-template-columns: 1fr;
  }
}
.review-xml {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.review-xml-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fafafc;
}
.review-xml-heading a {
  margin-left: auto;
}
.review-xml pre {
  margin: 0;
  padding: 12px;
  height: 50vh;
  min-height: 340px;
  overflow: auto;
  background: #f6f6fa;
  white-space: pre;
}
.review-no-response {
  padding: 10px;
}
.review-errors {
  margin: 10px 0 0;
}

/* Reservations: list */
.res-filters .history-filter-fields {
  align-items: flex-end;
}
.res-search {
  min-width: 240px;
}
.res-review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0;
}
.res-row {
  cursor: pointer;
}
.res-row:hover,
.res-row:focus-visible {
  background: #f5f5fa;
  outline: none;
}

/* Reservations: detail */
.res-detail {
  display: grid;
  gap: 18px;
}
.res-detail .records-card {
  margin: 0;
}
.res-back {
  justify-self: start;
}
.res-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}
.res-summary {
  padding: 18px 22px 0;
  margin: 0;
}
.res-alert {
  margin: 16px 22px 0;
}
.res-ids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  padding: 18px 22px 22px;
  margin: 0;
}
.res-ids dt {
  color: var(--muted);
}
.res-ids dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}
.res-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) {
  .res-columns {
    grid-template-columns: 1fr;
  }
}
.res-guest {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.res-guest:last-child {
  border-bottom: 0;
}
.res-guest small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.res-extras {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}
.res-timeline {
  list-style: none;
  margin: 0;
  padding: 6px 22px 18px;
}
.res-timeline li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-left: 2px solid var(--line);
}
.res-timeline li::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
}
.res-timeline-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.res-timeline-head .text-button {
  margin-left: auto;
}
.res-changes {
  border-collapse: collapse;
}
.res-changes th,
.res-changes td {
  padding: 4px 10px 4px 0;
  text-align: left;
  vertical-align: top;
}
.res-changes th {
  color: var(--muted);
  font-weight: 500;
}
.res-before {
  color: #9a3b32;
  text-decoration: line-through;
}
.res-after {
  color: var(--brand);
  font-weight: 600;
}

/* Reservations: simulator */
.sim-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
}
.sim-room {
  position: relative;
  padding: 12px 40px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-bottom: 10px;
}
.sim-remove {
  position: absolute;
  top: 8px;
  right: 8px;
}
.sim-options {
  display: grid;
  gap: 8px;
}
.sim-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.sim-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.int-webhook-url {
  grid-column: 1 / -1;
}
.int-webhook-url input {
  background: var(--paper);
}

/* Record dialog: photos (photos.js) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.photo-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--paper);
}
.photo-card img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}
.photo-card figcaption {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 6px 8px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 4px 6px;
}
.photo-actions .text-button {
  padding: 3px 6px;
}
.danger-text {
  color: #b3261e;
}
.photo-upload {
  display: inline-flex;
  cursor: pointer;
}

/* Record dialog: rate plan agency sections (ratePlanExtras.js) */
.policy-mode,
.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 12px;
}
.policy-mode label,
.check-list label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.mini-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.mini-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  padding: 4px 6px 4px 0;
}
.mini-table td {
  padding: 4px 6px 4px 0;
  vertical-align: middle;
}
.mini-table input,
.mini-table select {
  height: 36px;
  padding: 4px 8px;
}
.mini-table input[type='number'] {
  width: 90px;
}
.penalty-cell,
.age-range,
.date-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-field.penalty-cell {
  flex-wrap: wrap;
}
.form-field.penalty-cell label {
  width: 100%;
}
.form-field.penalty-cell input {
  width: 110px;
}
.age-range input {
  width: 64px !important;
}
.date-range input {
  width: 150px;
}
.plain-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}
.form-field textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid #d8d8e6;
  border-radius: 7px;
  font: inherit;
  resize: vertical;
}
.record-photo-hint {
  padding: 0 22px;
}
.mini-table-scroll {
  overflow-x: auto;
  margin-bottom: 8px;
}
.mini-table-scroll .mini-table {
  min-width: 760px;
}
.mini-table select {
  min-width: 130px;
}
.country-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 12px;
  max-height: 320px;
  overflow: auto;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.country-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.country-list label[hidden] {
  display: none;
}

/* Agencies: wallets and access */
.wallet-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 18px 22px;
}
.wallet-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
}
.wallet-card.inactive {
  opacity: 0.6;
}
.wallet-currency {
  color: var(--muted);
  font-weight: 600;
}
.wallet-balance {
  font-size: 22px;
}
.wallet-balance.negative,
.amount-out {
  color: #b3261e;
}
.amount-in {
  color: var(--brand);
}
.wallet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ledger-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 22px;
  border-top: 1px solid var(--line);
}
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .access-grid {
    grid-template-columns: 1fr;
  }
}
.access-grid select[multiple] {
  width: 100%;
  height: auto;
  padding: 6px;
}
.wide-field {
  grid-column: 1 / -1;
}
.audit-json {
  max-width: 480px;
  max-height: 240px;
  overflow: auto;
  font-size: 11px;
  background: #f6f6fa;
  padding: 8px;
}

/* Admin two-factor dialogs (mfaAdmin.js) */
.mfa-form {
  display: grid;
  gap: 8px;
}
.mfa-remember {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.mfa-qr {
  display: block;
  margin: 8px auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.mfa-codes {
  columns: 2;
  line-height: 2;
}
.translation-table textarea {
  width: 100%;
  min-width: 260px;
  padding: 6px 8px;
  border: 1px solid #d8d8e6;
  border-radius: 6px;
  font: inherit;
  resize: vertical;
}
.translation-table td:nth-child(2) {
  max-width: 320px;
}

/* Travel agents → Agency bookings: status tabs inside the card */
#agencies-page .connected-tab-content .booking-filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}

/* Agencies → wallet active switch */
.wallet-currency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.switch-track {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: #c3c3df;
  transition: background 0.15s;
  flex: none;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  transition: transform 0.15s;
}
.switch input:checked + .switch-track {
  background: var(--brand);
}
.switch input:checked + .switch-track::after {
  transform: translateX(13px);
}
[dir='rtl'] .switch input:checked + .switch-track::after {
  transform: translateX(-13px);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.wallet-card.inactive .wallet-balance,
.wallet-card.inactive small {
  opacity: 0.55;
}

/* Agencies → pricing & access lists and picker */
.access-lists {
  display: grid;
  gap: 12px;
  align-content: start;
}
.access-list-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.access-list-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.access-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
}
.access-chip {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eaeaf3;
}
.access-chip small {
  display: inline;
  font-size: 11px;
}
.access-chip.more {
  background: transparent;
  border: 1px dashed var(--line);
}
.access-picker-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 140px;
  gap: 8px;
  margin: 12px 0 8px;
}
.access-picker-tools input,
.access-picker-tools select {
  height: 40px;
  border: 1px solid #dcddeb;
  border-radius: 6px;
  padding: 0 10px;
  background: white;
  min-width: 0;
}
.access-picker-bulk {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.access-picker-bulk span {
  margin-inline-end: auto;
}
.access-picker-list {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.access-picker-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.access-picker-item:last-child {
  border-bottom: 0;
}
.access-picker-item:hover {
  background: #f5f5f9;
}
.access-picker-item input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--brand);
}
.access-picker-item small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.access-picker-list > .muted {
  padding: 12px;
  margin: 0;
}
@media (max-width: 700px) {
  .access-picker-tools {
    grid-template-columns: 1fr;
  }
}

/* Agencies → agency users: filter tabs and permission checkboxes */
.user-filter-tabs {
  margin: 0;
  padding: 0 12px;
}
.form-field .permission-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
  margin: 4px 0 0;
}
.form-field .permission-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
}
.form-field .permission-list input[type='checkbox'] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: none;
  accent-color: var(--brand);
}

/* Travel agents → Agency bookings: filters, clickable rows, detail dialog */
.booking-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(200px, 1.5fr) 150px 150px auto;
  gap: 10px;
  align-items: end;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.booking-filters label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.booking-filters input,
.booking-filters select {
  height: 38px;
  border: 1px solid #dcddeb;
  border-radius: 6px;
  padding: 0 10px;
  background: white;
  min-width: 0;
  font-size: 13px;
}
.booking-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 38px;
}
.clickable-row {
  cursor: pointer;
}
.clickable-row:hover td,
.clickable-row:focus td {
  background: #f5f5f9;
}
.clickable-row:focus {
  outline: none;
}
.booking-detail .field-section h3 {
  font-size: 13px;
  margin: 0 0 8px;
}
.booking-detail dd small,
.booking-detail li small {
  color: var(--muted);
  font-size: 11px;
}
.booking-room {
  margin-bottom: 10px;
}
.booking-room ul {
  margin: 4px 0;
  padding-inline-start: 18px;
}
.booking-notice {
  background: #fff6e0;
  border: 1px solid #f0d99a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.booking-moves {
  width: 100%;
  font-size: 12px;
}
.booking-moves th {
  text-align: start;
  font-weight: 500;
  color: var(--muted);
}
@media (max-width: 1000px) {
  .booking-filters {
    grid-template-columns: 1fr 1fr;
  }
}

/* Travel agents → Agency wallet */
.wallet-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.wallet-page-head .res-back {
  margin: 0;
}
.wallet-agency-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-inline-start: auto;
}
.wallet-agency-pick select,
.wallet-search {
  height: 36px;
  border: 1px solid #dcddeb;
  border-radius: 6px;
  padding: 0 10px;
  background: white;
  font-size: 13px;
}
.wallet-search {
  width: 220px;
}
.button-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Travel agents → Agencies list: compact wallet balances */
.wallet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wallet-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaeaf3;
  font-size: 12px;
  white-space: nowrap;
}
.wallet-chip.negative {
  background: #fbecea;
  color: #af413d;
}
.wallet-chip.inactive {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Sidebar: tagline and today's date, bold and centred */
body aside.sidebar .brand-tagline {
  align-self: stretch;
  text-align: center;
  font-weight: var(--weight-bold, 700);
}
body aside.sidebar .workspace-badge {
  justify-content: center;
  text-align: center;
  font-weight: var(--weight-bold, 700);
}

/* Sign-in: "Iraq / Accommodation / Gateway", one word per line, flag after Iraq */
.story-title > span {
  display: block;
}
.story-title strong {
  font-weight: 700;
}
.story-title-first {
  display: flex !important;
  align-items: center;
  gap: 0.3em;
}
.iraq-flag {
  height: 0.8em;
  width: 1.2em;
  flex: none;
  border-radius: 3px;
}
.story-footer a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.story-footer a:hover {
  text-decoration: underline;
}

/* Dashboard: one screen, no scrolling on a laptop */
.dash-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.dash-periods {
  display: inline-flex;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.dash-periods button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.dash-periods button + button {
  border-inline-start: 1px solid var(--brand-200);
}
.dash-periods button.selected {
  background: var(--brand-500);
  color: #fff;
  font-weight: 600;
}
.dash-updated {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--muted);
}
.dash-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-600);
  cursor: pointer;
}
.dash-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dash-icon.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.dash-icon.spinning svg {
  animation: dash-spin 0.8s linear infinite;
}
@keyframes dash-spin {
  to {
    transform: rotate(360deg);
  }
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dash-kpi-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.dash-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}
.dash-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
a.dash-card:hover {
  border-color: var(--brand-300);
}
.dash-alert.warning {
  background: #fff8e1;
  border-color: #f0d99a;
}
.dash-alert.warning .dash-value {
  color: #7a5a0f;
}
.dash-alert.danger {
  background: #fdecea;
  border-color: #efb8b8;
}
.dash-alert.danger .dash-value {
  color: #a12f2f;
}
.dash-label,
.dash-note {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-up {
  color: #1f6b3f;
}
.dash-down {
  color: #a12f2f;
}
.dash-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.dash-columns .records-card,
.dash-occ {
  margin: 0;
}
.dash-columns .records-card-heading {
  padding: 10px 14px;
  min-height: 0;
}
.dash-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 8px;
}
.dash-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--brand-50);
  font-size: 12px;
  min-width: 0;
}
.dash-list li:first-child {
  border-top: 0;
}
.dash-list li > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-list small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-list a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.dash-list-side {
  text-align: end;
  flex: none;
}
.dash-occ {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 10px !important;
  padding: 8px 14px;
}
.dash-occ-head {
  display: grid;
  gap: 2px;
  font-size: 12px;
}
.dash-occ-head span {
  font-size: 11px;
  color: var(--muted);
}
.occ-chart {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px;
}
.occ-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.occ-pct {
  font-size: 10px;
  color: var(--muted);
}
.occ-bar {
  position: relative;
  width: 100%;
  height: 28px;
  background: var(--brand-50);
  border-radius: 4px;
  overflow: hidden;
}
.occ-bar i {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--brand-400);
}
.occ-date {
  font-size: 10px;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .dash-kpis,
  .dash-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-occ {
    grid-template-columns: 1fr;
  }
  .dash-updated {
    margin-inline-start: 0;
    width: 100%;
    order: 3;
  }
}
.dash-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-inline-end: 6px;
  vertical-align: 1px;
  background: #a9a9cf;
}
.dash-dot.success {
  background: #2f8f57;
}
.dash-dot.warning {
  background: #d6a51c;
}
.dash-dot.danger {
  background: #cc4545;
}
.dash-cur {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-inline-start: 3px;
}

#scheduler-page {
  display: grid;
  gap: 16px;
}
#scheduler-page .sch-body {
  padding: 18px 22px;
}
#scheduler-page .sch-body p {
  margin: 0 0 6px;
}
#scheduler-page .sch-body p:last-child {
  margin-bottom: 0;
}
#scheduler-page .sch-alerts {
  margin: 0;
  padding-left: 40px;
}

.snapshot-dialog {
  width: min(var(--dlg-l), calc(100% - 30px));
}
.snapshot-dialog .mock-snapshot {
  margin-top: 0;
  border: 0;
  border-radius: 0;
}
.snapshot-dialog .mock-actions a[href='#history'] {
  display: none;
}

/* Push Review buttons (Manual and Automatic history) */
.secondary.push-review,
.secondary.compact[data-review-run] {
  background: #d4a72c;
  border-color: #b98f1c;
  color: #2b2100;
  font-weight: 600;
}
.secondary.push-review:hover,
.secondary.compact[data-review-run]:hover {
  background: #e2b73c;
}

/* Push Review modal: fixed size so switching tabs or opening items never
   resizes it; only the body scrolls. */
.snapshot-dialog[open] {
  display: flex;
  flex-direction: column;
  height: min(88vh, 860px);
  overflow: hidden;
}
.snapshot-dialog .record-dialog-header {
  flex: none;
}
#snapshot-dialog-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 22px 20px;
  overflow: hidden;
}
.snapshot-dialog .mock-snapshot {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.snapshot-dialog .mock-snapshot > .records-card-heading {
  flex: none;
  padding: 14px 0;
  border-bottom: 0;
}
.snapshot-dialog .snap-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}
.snapshot-dialog .snap-content .push-result-body,
.snapshot-dialog .snap-content .mock-xml-list {
  padding: 0;
}
.snapshot-dialog .snap-content .mock-xml-list > details {
  border-top: 0;
  padding: 0;
}
.snapshot-dialog .mock-xml-list textarea {
  height: 52vh;
  min-height: 320px;
  resize: none;
}

.history-filters-compact {
  padding: 10px 22px;
}

/* Reservation modal: compact layout */
#info-dialog .info-body:has(.res-detail) {
  padding: 12px 20px 14px;
}
.res-detail {
  gap: 10px;
}
.res-detail .records-card-heading {
  padding: 10px 16px;
  gap: 10px;
}
.res-detail .records-card-heading .eyebrow {
  font-size: 10px;
}
.res-detail .res-title {
  margin: 2px 0 0;
  font-size: 18px;
  gap: 8px;
}
.res-detail .res-summary {
  padding: 10px 16px 0;
  gap: 8px;
}
.res-detail .config-summary > div {
  padding: 8px 12px;
}
.res-detail .config-summary strong {
  margin: 3px 0 2px;
}
.res-detail .config-summary small {
  line-height: 1.3;
}
.res-detail .res-alert {
  margin: 10px 16px 0;
}
.res-detail .res-ids {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 12px;
  padding: 10px 16px 12px;
}
.res-detail .res-ids dt {
  margin: 0;
  font-size: 11px;
}
.res-detail .res-ids dd {
  margin: 1px 0 0;
  padding-left: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.res-detail .records-table th,
.res-detail .records-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}
.res-detail .res-columns {
  gap: 10px;
}
.res-detail .push-result-body {
  padding: 8px 16px;
}
.res-detail .res-guest {
  padding: 6px 0;
}
.res-detail .res-timeline li {
  padding-top: 8px;
  padding-bottom: 8px;
}
#info-dialog:has(.res-detail) .record-dialog-header {
  padding: 12px 20px;
}
#info-dialog:has(.res-detail) .record-dialog-header h2 {
  font-size: 18px;
  margin-top: 3px;
}
#info-dialog:has(.res-detail) .record-dialog-footer {
  padding: 10px 20px;
}
.res-detail .records-table th,
.res-detail .records-table td {
  padding-left: 10px;
  padding-right: 10px;
}

.record-dialog-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdf-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
}
.pdf-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Reservation Inbox: resolve panel */
.res-resolve {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
  padding: 12px 14px;
  margin: 0 0 12px;
  display: grid;
  gap: 10px;
}
.res-resolve-head p {
  margin: 3px 0 4px;
}
.res-action {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.res-action textarea {
  width: 100%;
}
.res-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.res-map-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr);
  align-items: center;
  gap: 10px;
}
.res-resolved {
  margin: 0;
}

/* Agency modal: fixed size, tabs, grouped overview */
.agency-dialog {
  width: min(var(--dlg-l), calc(100% - 30px));
}
.agency-dialog[open] {
  display: flex;
  flex-direction: column;
  height: min(88vh, 860px);
  overflow: hidden;
}
.agency-dialog .record-dialog-header {
  flex: none;
  padding: 14px 22px;
}
.agency-dialog .record-dialog-header h2 {
  font-size: 20px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#agency-dialog-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 22px 20px;
  overflow: hidden;
}
.ag-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}
.ag-panel {
  display: grid;
  gap: 12px;
}
.ag-panel[hidden] {
  display: none;
}
.ag-panel.ag-groups {
  display: block;
  columns: 2;
  column-gap: 12px;
}
.ag-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 12px;
  break-inside: avoid;
}
.ag-group h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ag-group dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.ag-group dl > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px;
}
.ag-group dt {
  color: var(--muted);
  font-size: 12px;
}
.ag-group dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.ag-wide {
  column-span: all;
}
.ag-notes {
  margin: 0;
  white-space: pre-wrap;
}
@media (max-width: 800px) {
  .ag-panel.ag-groups {
    columns: 1;
  }
}

/* Agency modal → Pricing & access: three lists side by side, markups below */
#agency-dialog .access-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}
#agency-dialog .access-lists {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
#agency-dialog .access-list-row {
  flex-direction: column;
  justify-content: space-between;
}
#agency-dialog .access-list-row .compact {
  align-self: flex-start;
}
#agency-dialog #access-markups .mini-table td:first-child {
  width: 100%;
}
#agency-dialog #access-markups .mini-table select {
  width: 100%;
  min-width: 0;
  text-overflow: clip;
}
@media (max-width: 900px) {
  #agency-dialog .access-lists {
    grid-template-columns: 1fr;
  }
}
#agency-dialog .access-grid {
  padding-top: 18px;
}
#agency-dialog #access-markups .mini-table td:nth-child(2) {
  white-space: nowrap;
}

/* Small (i) icon with a tooltip on hover/focus */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 6px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  vertical-align: 1px;
  cursor: help;
}
.info-tip:hover,
.info-tip:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: -6px;
  top: calc(100% + 8px);
  z-index: 5;
  width: max-content;
  max-width: 230px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #23233a;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  box-shadow: 0 6px 20px #0003;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s;
}
.info-tip:hover::after,
.info-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.access-chip .chip-remove {
  border: 0;
  background: transparent;
  padding: 0 0 0 4px;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.access-chip .chip-remove:hover,
.access-chip .chip-remove:focus-visible {
  color: #b42318;
}

.markups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.markups-head .sim-heading {
  margin: 0;
}
.markup-add-button {
  padding: 6px 12px;
  border: 1px solid #ecd98a;
  border-radius: 8px;
  background: #fff7d6;
  color: #5c4500;
  font-weight: 600;
  cursor: pointer;
}
.markup-add-button:hover {
  background: #ffefb0;
}

/* Agency booking modal */
#record-dialog.booking-dialog {
  width: min(var(--dlg-l), calc(100% - 30px));
}
.booking-detail {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 18px;
}
.booking-detail .booking-notice {
  margin: 0;
}
.bk-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.bk-tiles > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  background: #fbfbfd;
}
.bk-tiles strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 15px;
}
.bk-tiles small {
  color: var(--muted);
}
.bk-grid {
  columns: 2;
  column-gap: 12px;
}
.bk-grid .ag-group {
  margin: 0 0 12px;
  break-inside: avoid;
}
.bk-grid .ag-wide {
  column-span: all;
}
.bk-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.bk-rooms .booking-room {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
}
.bk-rooms .booking-room ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.bk-grid .booking-moves {
  width: 100%;
}
@media (max-width: 800px) {
  .bk-tiles {
    grid-template-columns: 1fr;
  }
  .bk-grid {
    columns: 1;
  }
}

/* Two explicit columns of cards (no CSS columns, so spacing stays even) */
.ag-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.ag-col {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.ag-cols .ag-group,
.bk-grid .ag-group,
.ag-panel.ag-groups .ag-group {
  margin: 0;
}
.ag-panel.ag-groups {
  display: grid;
  columns: auto;
  gap: 12px;
}
.bk-grid {
  columns: auto;
  display: grid;
  gap: 12px;
}
.bk-grid .ag-wide,
.ag-panel.ag-groups .ag-wide {
  column-span: none;
}
#settings-tab-body > .records-card + .records-card {
  margin-top: 16px;
}
@media (max-width: 800px) {
  .ag-cols {
    grid-template-columns: 1fr;
  }
}

/* Booking actions dialog (cancel, no-show, requests) */
.action-dialog {
  width: min(var(--dlg-s), calc(100% - 30px));
}
.action-body {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.action-body p {
  margin: 0;
}
.action-money {
  margin: 0;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  background: #fbfbfd;
}
.action-money > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.action-money dt {
  color: var(--muted);
}
.action-money dd {
  margin: 0;
}
.action-check {
  margin: 0;
}
button.danger {
  background: #b42318;
  color: #fff;
  border: 1px solid #b42318;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
button.danger:hover {
  background: #912018;
}
.action-body .action-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.action-body .action-check input {
  width: 16px;
  height: 16px;
}

.pay-form .field-grid {
  margin-bottom: 14px;
}
.pay-currencies {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.pay-webhook {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* Sign-in pages (admin, hotel, agency): background image and light text. */
.login-layout.has-bg .login-story {
  background: #f1f1f9;
  color: #2b2b6b;
}
.login-collage {
  display: none;
}
.login-top-logo {
  display: none;
}
.login-layout.has-bg .login-top-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 34px;
}
.login-layout.has-bg .login-story .brand {
  display: none;
}
@media (max-width: 760px) {
  .login-layout.has-bg .login-story .brand {
    display: block;
  }
  .login-layout.has-bg .login-story .brand-logo {
    display: none;
  }
}
.login-layout.has-bg .story-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
  padding-top: 22px;
}
.login-layout.has-bg .login-collage {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 340px;
  margin-top: 22px;
}
.login-collage i {
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: #d9d9ec;
}
.login-collage .lc-a {
  grid-row: 1 / 3;
  background-position: 60% 40%;
}
.login-collage .lc-tile {
  grid-column: 1 / 3;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between !important;
  border-radius: 16px;
  background: #404094;
  color: #fff;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.35;
}
.login-collage .lc-tile b,
.login-collage .lc-tile span {
  display: block;
}
.login-collage .lc-tile .iraq-flag {
  height: 38px;
  width: 57px;
  border-radius: 4px;
}
.login-collage .lc-tile b {
  font-size: 16px;
  font-weight: 600;
  color: #f5a623;
}
.login-collage .lc-tile span {
  font-size: 13px;
}
.login-layout.has-bg .story-content h1 {
  font-size: clamp(34px, 3.4vw, 54px);
  letter-spacing: -1.4px;
  margin: 0 0 8px;
}
.login-layout.has-bg .architecture {
  display: none;
}
.login-layout.has-bg .login-story .story-content h1,
.login-layout.has-bg .login-story .story-title strong {
  color: #404094;
}
.login-layout.has-bg .login-story .story-content p,
.login-layout.has-bg .login-story .story-footer,
.login-layout.has-bg .login-story .story-footer a {
  color: #5d5d85;
}
.login-layout.has-bg .login-story .brand-logo {
  width: auto;
  max-width: 240px;
  height: auto;
}

/* List standard (ListKit, common.js): toolbar above the card, chips, reset, empty and loading states */
.lk-toolbar {
  flex-wrap: wrap;
}
.lk-toolbar .search-box {
  flex: 1 1 260px;
  width: auto;
  max-width: 380px;
}
.lk-filters {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.lk-filters select {
  min-width: 140px;
  max-width: 200px;
}
.lk-chips {
  margin-right: 4px;
}
.lk-reset {
  white-space: nowrap;
}
.lk-empty {
  padding: 34px 22px;
  text-align: center;
  color: var(--muted);
}
.lk-empty p {
  margin: 0 0 12px;
}
.lk-skeleton td span {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eeeef6 25%, #f7f7fb 50%, #eeeef6 75%);
  background-size: 200% 100%;
  animation: lk-shimmer 1.2s infinite linear;
}
@keyframes lk-shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (max-width: 760px) {
  .lk-toolbar .search-box {
    max-width: none;
    flex-basis: 100%;
  }
  .lk-filters {
    justify-content: flex-start;
    margin-left: 0;
  }
  .lk-filters select {
    flex: 1 1 140px;
  }
}

.lk-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #5a5a76;
}
.lk-date input {
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  padding: 0 10px;
  font-size: 11px;
}

/* Users & Access groups */
.tab-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #ebebf5;
  color: #4e4e66;
  font-size: 10px;
  text-align: center;
}
.distribution-tabs button.selected .tab-count {
  background: var(--brand);
  color: white;
}
.users-note {
  margin: 0 0 14px;
  max-width: 760px;
  line-height: 1.6;
}

/* Notification service */
.rules-table th.rule-col,
.rules-table td.rule-col {
  text-align: center;
  width: 110px;
}
.rules-table .rule-group td {
  background: #f4f4fa;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rules-table td.rule-col input {
  width: 18px;
  height: 18px;
}
.channel-form .test-address {
  flex: 1;
  min-width: 200px;
}
.lk-staff-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 22px 16px;
}
.lk-staff-form input,
.lk-staff-form select {
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  background: white;
}
.lk-staff-form input#staff-address {
  flex: 1;
  min-width: 220px;
}

/* Boxes stacked on the agency/finance pages (including inside tabs) keep a gap. */
#agencies-page .records-card + .records-card,
#agencies-page .records-card + .lk-toolbar,
#agencies-page .records-card + .master-toolbar,
#agencies-page .distribution-tabs + .records-card,
#agencies-page .connected-tab-content > .records-card + .records-card {
  margin-top: 16px;
}
#notif-body > .lk-toolbar:first-child {
  margin-top: 0;
}
#notif-body .records-card + .records-card {
  margin-top: 16px;
}
.notif-tabs {
  margin-bottom: 0;
}

/* Message templates */
.tpl-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.tpl-editor {
  display: grid;
  gap: 16px;
}
.tpl-list {
  padding: 8px 0 12px;
}
.tpl-list h3 {
  margin: 12px 18px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tpl-list button {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 9px 18px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  font-size: 12.5px;
  cursor: pointer;
}
.tpl-list button:hover {
  background: #f4f4fa;
}
.tpl-list button.selected {
  background: var(--brand-soft);
  border-left-color: var(--brand);
  font-weight: 600;
}
.tpl-list button small {
  color: var(--muted);
  font-size: 10px;
}
.tpl-dot {
  color: #c98b00;
  font-size: 9px;
}
.tpl-channels {
  margin: 0 22px;
}
.tpl-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 4px 0 8px;
}
.tpl-var {
  border: 1px solid #dcddeb;
  background: #f7f7fb;
  border-radius: 6px;
  padding: 3px 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  cursor: pointer;
}
.tpl-var:hover {
  background: #ebebf7;
}
.tpl-note {
  margin: 0 0 10px;
  font-size: 11px;
}
.tpl-frame {
  width: 100%;
  height: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f1ea;
}
.tpl-bubble {
  margin: 0;
  padding: 14px 16px;
  max-width: 420px;
  background: #e8f1fb;
  border-radius: 12px;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.tpl-subject {
  margin: 0 0 10px;
}
@media (max-width: 900px) {
  .tpl-layout {
    grid-template-columns: 1fr;
  }
}

.success-line {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 7px;
  background: #e8f6ee;
  color: #1c6b3f;
  font-size: 12px;
}

.chat-list {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfbfd;
}
.chat-list code {
  font-size: 12px;
}

/* Secret fields look like password fields but are plain text inputs, so the
   browser's password manager does not fill them with a saved login. */
.secret-input {
  -webkit-text-security: disc;
  text-security: disc;
}

/* Payment method chooser (agency portal top-up) */
.pay-choices {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.pay-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.pay-choice:hover,
.pay-choice:focus-visible {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.pay-choice small {
  color: var(--muted);
}

/* Pages the account may only look at: hide the buttons that change things. */
body.read-only #main .primary,
body.read-only #record-dialog .primary,
body.read-only #ari-dialog .primary,
body.read-only #main .danger-text {
  display: none;
}

/* Users & Access: boxes stacked inside a tab keep a gap; inner (second-level) tabs are lighter pills. */
#users-page .connected-tab-content > * + * {
  margin-top: 16px;
}
.sub-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.sub-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  padding: 8px 2px;
  font-size: 12px;
}
.sub-tabs button.selected {
  border-bottom-color: var(--brand);
  color: var(--text, inherit);
  font-weight: 600;
}
.sub-tabs .tab-count {
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
}

/* Roles tables: fixed column widths; the permissions text wraps onto 2–3 lines. */
.roles-table {
  table-layout: fixed;
  width: 100%;
}
.roles-table th:first-child {
  width: 26%;
}
.roles-table th:nth-child(3) {
  width: 90px;
}
.roles-table th:nth-child(4) {
  width: 130px;
}
.roles-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* Notes and notices placed directly inside a card keep the card's padding. */
.records-card > .booking-notice,
.records-card > .settlement-note,
.records-card > p.muted {
  margin: 16px 22px;
}
.records-card > .booking-notice + .settlement-note,
.records-card > .settlement-note + .booking-notice {
  margin-top: 0;
}

/* Menu entries that group pages: the page strip is the MAIN tab row (boxed, like Mappings
   or Users), the page's own content sits in its connected box, and any tabs the page
   has itself become the lighter inner tabs. */
#page-tabs:not([hidden]) ~ section:not([hidden]) {
  position: relative;
  margin-top: -1px;
  border: 1px solid var(--brand-300);
  border-radius: 0 0 12px 12px;
  background: #fff;
  padding: 22px;
  min-width: 0;
}
#page-tabs:not([hidden]) ~ section .distribution-tabs {
  gap: 18px;
  padding: 0;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
#page-tabs:not([hidden]) ~ section .distribution-tabs button {
  min-height: 0;
  padding: 8px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
}
#page-tabs:not([hidden]) ~ section .distribution-tabs button.selected {
  border-bottom-color: var(--brand);
  color: var(--text, inherit);
  font-weight: 600;
}
#page-tabs:not([hidden]) ~ section .connected-tab-content {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.planned-body {
  padding: 18px 22px 22px;
  max-width: 760px;
}
.planned-body p {
  margin: 0 0 10px;
  line-height: 1.6;
}

/* Room Rate matrix and Channel Economics */
.rr-table td small,
.rr-table th small {
  display: block;
  color: var(--muted);
}
.rr-warn td:first-child {
  box-shadow: inset 3px 0 0 #d9a21b;
}
.rr-neg {
  color: #b42318;
  font-weight: 600;
}
.chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 1px 2px 1px 0;
  border-radius: 999px;
  background: #eef0fb;
  font-size: 11px;
  white-space: nowrap;
}
.rr-preview .kv-grid {
  margin-bottom: 12px;
}
.rr-warnings {
  margin: 12px 0 0;
  padding-left: 18px;
  line-height: 1.7;
}
.check-list label .rr-tool-pct {
  width: 90px;
  margin-left: auto;
}
.check-list label > span small {
  display: block;
  color: var(--muted);
}

/* Room Rate: typed cells like a spreadsheet, compact enough to fit one screen without scrolling */
.records-table.rr-sheet {
  table-layout: fixed;
  width: 100%;
  font-size: 12px;
}
.records-table.rr-sheet th,
.records-table.rr-sheet td {
  padding: 3px 5px;
  vertical-align: middle;
  line-height: 1.2;
  overflow: hidden;
}
.records-table.rr-sheet th {
  padding: 7px 5px;
  font-size: 11px;
  white-space: nowrap;
}
.records-table.rr-sheet small {
  font-size: 10px;
  line-height: 1.1;
}
.rr-sheet .rr-cell {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  text-align: right;
}
.rr-sheet select.rr-cell {
  width: 46%;
  text-align: left;
  padding: 2px 1px;
}
.rr-sheet .rr-markup {
  white-space: nowrap;
}
.rr-sheet .rr-markup input.rr-cell {
  width: 50%;
  margin-left: 2px;
}
.rr-sheet .rr-cell:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}
.rr-sheet .rr-cell:disabled {
  background: #f3f3f8;
}
.rr-sheet tr.rr-dirty-row td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}
.rr-sheet .chip {
  padding: 0 5px;
  margin: 1px 1px;
  font-size: 10px;
}
.rr-sheet .chip-x {
  margin-left: 2px;
  padding: 0 2px;
  font-size: 12px;
}
.rr-sheet .rr-toolcell {
  position: relative;
}
.chip-add {
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  padding: 1px 6px;
  cursor: pointer;
}
.chip-add:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.rr-sheet .rr-cell.rr-bad {
  border-color: #b42318;
  background: #fff5f4;
  color: #b42318;
}
.chip-x {
  margin-left: 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b6b86;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.chip-x:hover {
  background: #d9dcf0;
  color: #b42318;
}
.records-table.rr-sheet .rr-toolcell small {
  display: inline;
  margin: 0 4px 0 2px;
  color: var(--muted);
}
.records-table.rr-sheet td:first-child small {
  display: block;
}
.records-table.rr-sheet .rr-cell {
  height: 26px;
  min-height: 0;
}
.records-table.rr-sheet td,
.records-table.rr-sheet td * {
  line-height: 1.15 !important;
}

.records-card-heading .rr-head-left {
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}

.rr-sheet .rr-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.rr-sheet .rr-toolwrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
}
.rr-sheet .chip.chip-sum {
  background: #e3f6ea;
  color: #17673a;
  padding-right: 6px;
}

/* Page spacing standard: the gap above the page heading (title and hotel pill) equals the gap below it. */
:root {
  --page-gap: 24px;
}
main {
  padding-top: var(--page-gap) !important;
}
.page-heading {
  margin-top: 0 !important;
  margin-bottom: var(--page-gap) !important;
}

.rr-hist-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rr-hist-filters select {
  width: auto;
  min-width: 160px;
}
.rr-hist-tools {
  white-space: nowrap;
}

.record-dialog.rr-wide {
  width: min(var(--dlg-xl), calc(100% - 30px));
}

.ari-ref {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.ari-fill {
  cursor: pointer;
  border: 0;
  font: inherit;
}
.ari-fill:hover {
  filter: brightness(0.95);
  text-decoration: underline;
}
.ari-inv-msg {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.4;
}
.ari-inv-msg span {
  display: block;
  margin-top: 4px;
  color: #7f1d1d;
}

/* Allocation: compact matrix, Agency pool columns blue, CRS Pool columns green */
.al-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
}
.al-toolbar select {
  width: auto;
  min-width: 190px;
  height: 34px;
}
.al-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.al-nav input[type='date'] {
  width: 150px;
  height: 34px;
}
.al-nav button {
  height: 34px;
  padding: 0 10px;
}
.al-toolbar > button {
  height: 34px;
  padding: 0 14px;
}
.al-spacer {
  flex: 1;
}
.records-table.al-sheet {
  font-size: 12px;
  width: 100%;
  table-layout: fixed; /* column widths never change with the room type */
}
.records-table.al-sheet td:last-child {
  white-space: normal;
}
.records-table.al-sheet th,
.records-table.al-sheet td {
  padding: 4px 8px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.records-table.al-sheet th:first-child,
.records-table.al-sheet td:first-child {
  text-align: left;
}
.records-table.al-sheet small {
  display: inline;
  margin-left: 4px;
  font-size: 10px;
}
.al-sheet .al-a {
  background: #eef2ff;
}
.al-sheet .al-c {
  background: #ecfdf5;
}
.al-sheet th.al-agency-head {
  background: #c7d2fe;
  color: #312e81;
  border-left: 2px solid #a5b4fc;
}
.al-sheet th.al-channel-head {
  background: #a7f3d0;
  color: #065f46;
  border-left: 2px solid #6ee7b7;
}
.al-sheet th.al-a {
  background: #dbe4ff;
  color: #3730a3;
}
.al-sheet th.al-c {
  background: #d1fae5;
  color: #047857;
}

.al-sheet .al-cell {
  width: 64px;
  height: 24px;
  padding: 0 6px;
  text-align: center;
  font-size: 12px;
  border-radius: 6px;
  background: #fff;
}
.al-sheet .al-cell.al-bad {
  border-color: #dc2626;
  background: #fef2f2;
  color: #991b1b;
}

.al-sheet .al-rb {
  margin-left: 6px;
  font-size: 11px;
  white-space: nowrap;
}

.al-window-note {
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
}
.al-clock {
  display: inline-block;
  vertical-align: -3px;
  margin: 0 3px;
  flex: none;
}

/* Allocation: the two action icons of a row and in the toolbar buttons */
.al-icon {
  vertical-align: -3px;
  margin-right: 4px;
}
.al-toolbar > button .al-icon {
  margin-right: 6px;
}
.al-actions {
  display: inline-flex;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.al-actions .al-ico {
  width: 26px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #d9dbe8);
  border-radius: 6px;
  background: #fff;
  color: #3730a3;
  cursor: pointer;
}
.al-actions .al-ico:hover {
  background: #eef2ff;
}
.al-actions .al-icon {
  margin: 0;
}

/* Allocation: toolbar buttons big enough for icon + text on one line; the Action column starts at the left */
.al-toolbar > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  white-space: nowrap;
}
.al-toolbar > button .al-icon {
  margin: 0;
  flex: none;
}
.records-table.al-sheet th:last-child,
.records-table.al-sheet td:last-child {
  text-align: left;
  padding-left: 12px;
}
.al-actions {
  margin-right: 8px;
}

.al-blocks {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  margin: 6px 0 10px;
}
.al-blocks th,
.al-blocks td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #e5e7f2;
  vertical-align: top;
}
.al-blocks th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b6f8d;
}
.al-blocks small {
  display: block;
  font-size: 11px;
  color: #6b6f8d;
}
.al-blocks tfoot td {
  font-weight: 700;
  border-bottom: 0;
}

.al-blocks .al-x-cell {
  width: 34px;
  text-align: right;
}
.al-blocks .al-x {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #d9dbe8;
  border-radius: 6px;
  background: #fff;
  color: #6b6f8d;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.al-blocks .al-x:hover {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.al-blocks tr.al-skipped td:not(.al-x-cell) {
  opacity: 0.4;
  text-decoration: line-through;
}

/* Help assistant (HELP_BOT_DESIGN.md §7) */
.hb-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: #3f3d8f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(30, 27, 90, 0.35);
  cursor: pointer;
}
.hb-fab:hover {
  background: #312e81;
}
.hb-panel {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 901;
  width: 400px;
  max-width: calc(100vw - 24px);
  height: min(640px, calc(100vh - 110px));
  background: #fff;
  border: 1px solid #d9dbe8;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(30, 27, 90, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hb-panel[hidden] {
  display: none;
}
.hb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #eef2ff;
  border-bottom: 1px solid #d9dbe8;
}
.hb-quota {
  flex: 1;
  font-size: 11px;
  color: #6b6f8d;
}
.hb-tools button {
  border: 0;
  background: transparent;
  font-size: 16px;
  padding: 2px 7px;
  cursor: pointer;
  color: #3730a3;
}
.hb-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
}
.hb-q {
  margin: 10px 0 6px auto;
  max-width: 88%;
  padding: 7px 10px;
  background: #3f3d8f;
  color: #fff;
  border-radius: 12px 12px 2px 12px;
}
.hb-answer {
  margin: 4px 0 12px;
  padding: 9px 11px;
  background: #f6f7fb;
  border: 1px solid #e5e7f2;
  border-radius: 12px 12px 12px 2px;
}
.hb-answer p {
  margin: 0 0 6px;
}
.hb-answer ol {
  margin: 4px 0 8px 18px;
  padding: 0;
}
.hb-go {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: #3f3d8f;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}
.hb-where,
.hb-steps {
  margin-top: 8px;
}
.hb-where ul,
.hb-steps ol {
  margin: 2px 0 0 18px;
  padding: 0;
}
.hb-where li,
.hb-steps li {
  margin: 2px 0;
}
.hb-notes {
  margin-top: 6px;
  padding: 6px 9px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
}
.hb-notes ul {
  margin: 2px 0 0 16px;
  padding: 0;
}
.hb-sources {
  margin: 8px 0 0;
  font-size: 11px;
  color: #6b6f8d;
}
.hb-src {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
}
.hb-srctext {
  margin-top: 6px;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid #e5e7f2;
  border-radius: 8px;
  font-size: 12px;
  max-height: 180px;
  overflow: auto;
}
.hb-fb {
  margin: 6px 0 0;
}
.hb-fb button {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.55;
}
.hb-fb button.on,
.hb-fb button:hover {
  opacity: 1;
}
.hb-form {
  display: flex;
  gap: 8px;
  padding: 8px 10px 4px;
  border-top: 1px solid #e5e7f2;
}
.hb-form textarea {
  flex: 1;
  resize: none;
  font-size: 13px;
  padding: 6px 8px;
  height: 46px;
}
.hb-warn {
  display: block;
  padding: 0 12px 8px;
  font-size: 10.5px;
  color: #8a8ea8;
}
.hb-chip {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  padding: 7px 10px;
  border: 1px solid #d9dbe8;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 12.5px;
}
.hb-chip:hover {
  background: #eef2ff;
}
.hb-thread {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid #e5e7f2;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.hb-thread small {
  display: block;
  color: #6b6f8d;
}
.hb-set {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
}
.hb-set input[type='number'] {
  width: 110px;
}
.hb-list {
  margin: 4px 0 10px 16px;
  padding: 0;
}
.hb-list small {
  display: block;
  color: #6b6f8d;
}

.hb-note {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.hb-note textarea {
  flex: 1;
  font-size: 12px;
  resize: none;
}

/* Help assistant: mixed Persian / English text reads in its own direction, one step per line */
.hb-answer li,
.hb-answer p,
.hb-notes li {
  unicode-bidi: plaintext;
  text-align: start;
  line-height: 1.7;
}
.hb-answer ol,
.hb-answer ul {
  padding-inline-start: 22px;
  margin-inline-start: 0;
}
.hb-answer li {
  margin: 3px 0;
}
.hb-q {
  unicode-bidi: plaintext;
  text-align: start;
}

.hb-shot {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid #e5e7f2;
  background: #fffbeb;
  align-items: center;
}
.hb-shot img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #fde68a;
}
.hb-ok {
  display: block;
  font-size: 11.5px;
  color: #92400e;
  margin-bottom: 4px;
}
.hb-attach {
  border: 1px solid #d9dbe8;
  background: #fff;
  border-radius: 8px;
  width: 38px;
  cursor: pointer;
  font-size: 16px;
}

/* Sidebar: a little more compact (tighter rows and group titles) */
body aside.sidebar {
  padding-top: 24px;
}
body aside.sidebar .workspace-badge {
  margin: 20px 9px 4px;
}
body aside.sidebar .nav-link {
  padding: 7px 13px;
  margin: 1px 0;
}
body aside.sidebar .nav-group-title {
  padding: 14px 13px 6px;
}

/* Sidebar groups: an icon title in the brand colour, its entries indented under a thin guide line */
body aside.sidebar .nav-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 13px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  color: var(--brand);
}
body aside.sidebar .nav-group-title svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
body aside.sidebar .nav-group-items {
  margin: 0 0 0 21px;
  border-left: 1px solid var(--line);
}
body aside.sidebar .nav-group-items .nav-link {
  padding-left: 12px;
  gap: 10px;
}
body aside.sidebar .nav-group-items .nav-link svg {
  width: 17px;
  height: 17px;
  color: #a9a9bd;
}
body aside.sidebar .nav-group-items .nav-link:hover svg,
body aside.sidebar .nav-group-items .nav-link.active svg {
  color: currentColor;
}
/* the blue active box keeps a small gap from the guide line and the right edge */
body aside.sidebar .nav-group-items .nav-link {
  margin: 1px 6px 1px 6px;
}
body aside.sidebar nav > .nav-link {
  margin: 1px 6px;
}

/* Top bar: page title and description inside the bar, a compact property selector, Ask Beddy */
body .topbar {
  min-height: 78px;
  padding: 16px 32px;
  gap: 16px;
}
body .topbar-left {
  flex: 1;
  gap: 16px;
}
.topbar-title {
  width: 250px;
  flex: none;
}
.topbar-title h1 {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}
.topbar-title .muted {
  font-size: 12px;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
}
.topbar-divider {
  width: 1px;
  height: 30px;
  background: var(--line);
  flex-shrink: 0;
}
body .hotel-context {
  width: auto;
  flex: none;
  gap: 8px;
  border: 1px solid #dcdcec;
  border-radius: 8px;
  padding: 4px 10px;
}
body .hotel-context > div {
  flex: none;
}
body .hotel-context label {
  display: none;
}
body .hotel-symbol {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
}
body .hotel-symbol svg {
  width: 17px;
  height: 17px;
}
body .hotel-context select {
  font-size: 13px;
  font-weight: 550;
  min-height: 26px;
  width: auto;
  max-width: 240px;
}
body .role-chip {
  display: none;
}
body .profile-identity {
  display: none;
}
.page-heading {
  display: none;
}
@media (max-width: 900px) {
  .topbar-title .muted,
  .topbar-divider {
    display: none;
  }
}

/* The bell */
.bell-wrap {
  position: relative;
}
.bell-toggle {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dcdcec;
  border-radius: 8px;
  background: transparent;
  color: #5f5f7b;
  cursor: pointer;
}
.bell-toggle:hover {
  background: var(--brand-50);
  color: var(--brand);
}
.bell-toggle svg {
  width: 19px;
  height: 19px;
}
.bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d99a1e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.bell-count.urgent {
  background: #d0453f;
}
.bell-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(72vh, 560px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px #1b1b3a26;
  padding: 6px 0 8px;
  z-index: 60;
}
.bell-menu[hidden] {
  display: none;
}
.bell-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #6b6b88;
  text-transform: uppercase;
  padding: 12px 16px 6px;
}
.bell-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px;
  color: var(--ink);
  text-decoration: none;
}
.bell-item:hover {
  background: var(--brand-50);
}
.bell-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #d99a1e;
}
.bell-item.urgent .bell-dot {
  background: #d0453f;
}
.bell-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bell-text strong {
  font-size: 13px;
  font-weight: 600;
}
.bell-text small {
  font-size: 11.5px;
  color: #6b6b88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bell-n {
  font-size: 12px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 10px;
  background: #fbf0d9;
  color: #8a5a0a;
}
.bell-item.urgent .bell-n {
  background: #fbe3e1;
  color: #a3302b;
}
.bell-recent {
  padding: 6px 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12.5px;
}
.bell-recent small {
  font-size: 11px;
  color: #8a8aa5;
}
.bell-empty {
  text-align: center;
  color: #6b6b88;
  font-size: 13px;
  padding: 22px 16px;
  margin: 0;
}

@media (max-width: 1250px) {
  .topbar-title {
    width: 220px;
  }
}

/* The page icon in the top bar: a solid colour per menu group */
.page-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: #4c4cb8;
}
.page-icon svg {
  width: 23px;
  height: 23px;
}
.page-icon[data-group='operations'] {
  background: #0e8c8c;
}
.page-icon[data-group='inventory'] {
  background: #7a46d6;
}
.page-icon[data-group='distribution'] {
  background: #2a74dd;
}
.page-icon[data-group='agencies'] {
  background: #e07412;
}
.page-icon[data-group='finance'] {
  background: #1b9a5c;
}
.page-icon[data-group='administration'] {
  background: #c43a58;
}

/* Second bar: the hotel name as plain text, a few quiet numbers on the right */
.subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 6px 32px;
  background: #f7f7fc;
  border-bottom: 1px solid #eeeef6;
}
.subbar-hotel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.subbar-city {
  font-size: 13px;
  color: #686b85;
  white-space: nowrap;
}
.subbar-stars {
  font-size: 12px;
  color: #d99a1e;
  letter-spacing: 1px;
  white-space: nowrap;
}
.subbar-name {
  font-size: 20px;
  font-weight: 650;
  color: var(--brand-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hotel-stats {
  display: flex;
  align-items: stretch;
  flex: none;
}
.hstat {
  min-width: 92px;
  padding: 6px 18px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  border-left: 1px solid #e3e3ef;
}
.hstat:first-child {
  border-left: 0;
}
.hstat:hover b {
  color: var(--brand);
}
.hstat b {
  display: block;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}
.hstat small {
  display: block;
  font-size: 11px;
  color: #686b85;
  white-space: nowrap;
}
.hdot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: #7575b2;
}
.hdot.ok {
  background: #1b9a5c;
}
.hdot.warn {
  background: #d99a1e;
}
.hdot.danger {
  background: #d0453f;
}
@media (max-width: 900px) {
  .subbar {
    padding: 0 16px;
  }
  .hstat {
    min-width: 0;
    padding: 6px 10px;
  }
}

/* Dashboard: greeting strip, quick-action tiles, action rows, occupancy beside them */
.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 24px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
}
.dash-hero-date {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}
.dash-hero-hello {
  display: block;
  font-size: 20px;
  font-weight: 650;
  margin-top: 2px;
}
.dash-hero-stats {
  display: flex;
  gap: 34px;
}
.dash-hero-stats div {
  text-align: center;
}
.dash-hero-stats b {
  display: block;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.15;
}
.dash-hero-stats span {
  font-size: 12px;
  opacity: 0.8;
}
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.dash-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.dash-tile:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.dash-tile-ic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #4c4cb8;
}
.dash-tile-ic svg {
  width: 21px;
  height: 21px;
}
.dash-tile-ic[data-group='operations'] {
  background: #0e8c8c;
}
.dash-tile-ic[data-group='inventory'] {
  background: #7a46d6;
}
.dash-tile-ic[data-group='distribution'] {
  background: #2a74dd;
}
.dash-tile-ic[data-group='agencies'] {
  background: #e07412;
}
.dash-tile-ic[data-group='finance'] {
  background: #1b9a5c;
}
.dash-glance {
  margin-bottom: 14px;
}
.dash-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.dash-main .dash-occ {
  margin: 0;
}
.dash-arows {
  padding: 4px 8px 8px;
}
.dash-arow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.dash-arow:last-child {
  border-bottom: 0;
}
.dash-arow:hover {
  background: var(--brand-50);
}
.dash-adot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: #d99a1e;
}
.dash-arow.danger .dash-adot {
  background: #d0453f;
}
.dash-atext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dash-atext strong {
  font-size: 13px;
  font-weight: 600;
}
.dash-atext small {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-aval {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  background: #fbf0d9;
  color: #8a5a0a;
}
.dash-arow.danger .dash-aval {
  background: #fbe3e1;
  color: #a3302b;
}
.dash-abtn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--brand-200);
  border-radius: 7px;
  color: var(--brand-600);
  background: #fff;
}
.dash-arow:hover .dash-abtn {
  border-color: var(--brand);
}
.dash-clear {
  margin: 0;
  padding: 22px 12px;
  text-align: center;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .dash-main {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .dash-hero-stats {
    gap: 18px;
  }
}

/* Dashboard, second pass: period switch inside the greeting box, equal-height rows, new occupancy chart */
.dash-periods-v {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  border-color: #ffffff59;
  background: #ffffff1f;
}
.dash-periods-v button {
  color: #ffffffd9;
  padding: 4px 14px;
  font-size: 12px;
  white-space: nowrap;
}
.dash-periods-v button + button {
  border-inline-start: 0;
  border-top: 1px solid #ffffff40;
}
.dash-periods-v button.selected {
  background: #fff;
  color: var(--brand);
}
.dash-updated {
  margin-inline-start: auto;
}
.dash-main {
  align-items: stretch;
}
.dash-main > .records-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.dash-main .dash-arows {
  flex: 1;
}
.dash-more {
  margin: 0 12px 12px;
  padding: 7px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 600;
}
.dash-more:hover {
  border-color: var(--brand);
}
.dash-modal {
  width: min(var(--dlg-m), calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 14px;
}
.dash-modal::backdrop {
  background: #1b1b3a66;
}
.dash-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.dash-modal .dash-arows {
  max-height: 65vh;
  overflow-y: auto;
  padding: 6px 12px 12px;
}
.occ2-chart {
  flex: 1;
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 5px;
  padding: 10px 16px 14px;
}
.occ2-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.occ2-pct {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-600);
  height: 12px;
}
.occ2-bar {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 90px;
  background: var(--brand-50);
  border-radius: 5px;
  overflow: hidden;
}
.occ2-bar i {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--brand-400);
  border-radius: 4px 4px 0 0;
}
.occ2-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  line-height: 1.25;
  color: var(--muted);
}
.occ2-date b {
  font-size: 12px;
  font-weight: 650;
  color: var(--ink);
}
.dash-columns {
  align-items: stretch;
}
.dash-columns > .records-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dash-columns .dash-list {
  flex: 1;
}

/* Greeting box kept slim: the period switch is one horizontal control after a thin line */
.dash-hero {
  gap: 20px;
  flex-wrap: nowrap;
  padding: 12px 24px;
  min-height: 64px;
}
.dash-hero-hello {
  font-size: 18px;
}
.dash-hero-stats b {
  font-size: 20px;
}
.dash-hero-stats {
  margin-left: auto;
}
.dash-hero-divider {
  width: 1px;
  align-self: stretch;
  margin: 2px 0;
  background: #ffffff55;
}
.dash-periods.dash-periods-v {
  flex-direction: row;
  align-self: center;
}
.dash-periods-v button {
  padding: 5px 12px;
}
.dash-periods-v button + button {
  border-top: 0;
  border-inline-start: 1px solid #ffffff40;
}
@media (max-width: 900px) {
  .dash-hero {
    flex-wrap: wrap;
  }
  .dash-hero-divider {
    display: none;
  }
}

/* Icon-only buttons (PDF) and the CSV button of lists */
.pdf-button.icon-only {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}
.csv-button {
  padding: 5px 11px 5px 8px;
}

/* Agency Bookings: a thin line between the work queues and the history tabs */
.distribution-tabs button.tab-group-start {
  margin-left: 14px;
  position: relative;
}
.distribution-tabs button.tab-group-start:before {
  content: '';
  position: absolute;
  left: -14px;
  top: 25%;
  height: 50%;
  border-left: 1px solid var(--brand-300);
}

/* Lookups: Settings tab, the amenity picker of the forms and read-only chips */
.lk-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.lk-types {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lk-types button {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lk-types button small {
  color: var(--muted);
  font-size: 11px;
}
.lk-types button.selected {
  border-color: var(--brand-300);
  background: var(--brand-100);
}
.lk-desc {
  display: block;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}
.lk-icon-cell {
  color: var(--brand);
}
.lk-off td {
  opacity: 0.55;
}
.lk-hint {
  padding: 8px 16px 14px;
  margin: 0;
  font-size: 12px;
}
.lk-lang {
  display: inline-block;
  min-width: 26px;
  margin-right: 3px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  background: #e4f1ea;
  color: #17703f;
}
.lk-lang.ai {
  background: #e4edfb;
  color: #1f4f99;
}
.lk-lang.missing {
  background: #f1f1f6;
  color: #9a9ab3;
}
.lk-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12px;
}
.lk-chip.off {
  opacity: 0.55;
}
.lk-picker {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.lk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.lk-bar .lk-search {
  width: 100%;
  max-width: 280px;
  height: 34px;
  margin: 0;
}
.lk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-600);
  white-space: nowrap;
}
.lk-grid {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 14px 14px;
}
.lk-group h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--brand-600);
}
.lk-group h4 small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}
.lk-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 5px;
}
.lk-group.folded .lk-options {
  display: none;
}
.lk-ghead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.lk-ghead svg {
  transition: transform 0.15s;
}
.lk-group.folded .lk-ghead svg {
  transform: rotate(-90deg);
}
.lk-fold {
  border: 0;
  background: transparent;
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.lk-fold:hover {
  text-decoration: underline;
}
.lk-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #5f5f7b;
  font-size: 12px;
  text-align: left;
}
.lk-option svg {
  width: 15px;
  height: 15px;
}
.lk-option svg {
  flex: none;
  color: #9a9ab3;
}
.lk-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lk-option:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.lk-option.selected {
  background: var(--brand-100);
  border-color: var(--brand);
  color: var(--brand-800);
  font-weight: 600;
}
.lk-option.selected svg {
  color: var(--brand);
}
.lk-option.off {
  opacity: 0.55;
}
.lk-icon-picker {
  margin-top: 12px;
}
.lk-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  margin-top: 8px;
  max-height: 230px;
  overflow-y: auto;
  padding: 2px;
}
.lk-icon-btn {
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #5f5f7b;
}
.lk-icon-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.lk-icon-btn.selected {
  background: var(--brand-100);
  border-color: var(--brand);
  color: var(--brand);
}
@media (max-width: 900px) {
  .lk-layout {
    grid-template-columns: 1fr;
  }
  .lk-types {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ARI Calendar */
#ari-page {
  min-width: 0;
}
.a2-top,
.a2-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.a2-filters {
  display: flex;
  gap: 8px;
}
.a2-filters select {
  height: 36px;
  min-width: 170px;
}
.a2-spacer {
  flex: 1;
}
.a2-seg {
  display: inline-flex;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.a2-seg button {
  border: 0;
  background: transparent;
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--muted);
}
.a2-seg button + button {
  border-left: 1px solid var(--brand-200);
}
.a2-seg button.selected {
  background: var(--brand-100);
  color: var(--brand-800);
  font-weight: 650;
}
.a2-seg button:disabled {
  opacity: 0.45;
}
.a2-nav h2 {
  margin: 0;
  font-size: 18px;
  min-width: 190px;
  text-align: center;
}
.a2-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.a2-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: -3px;
}
.a2-dot.ok {
  background: #7fbf96;
}
.a2-dot.stop {
  background: #e3b894;
}
.a2-dot.unset {
  background: #dcdce8;
}
.a2-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.a2-kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.a2-kpi b {
  display: block;
  font-size: 17px;
  font-weight: 650;
}
.a2-kpi span {
  font-size: 11.5px;
  color: var(--muted);
}
.a2-kpi.warn {
  border-color: #f1d6ad;
  background: #fffaf2;
}
.a2-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: #fff;
}
.a2-note.info {
  background: var(--brand-50);
}
.a2-note.warn {
  background: #fffaf2;
  border-color: #f1d6ad;
  color: #7a4f0b;
}
.a2-note.bad {
  background: #fdf1f0;
  border-color: #f2c4c1;
  color: #a3302b;
}
.a2-body {
  min-height: 300px;
}
.a2-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.a2-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: #eceef6;
  border: 1px solid #eceef6;
  border-radius: 10px;
  overflow: hidden;
}
.a2-weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding: 6px 0;
}
.a2-day {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 86px;
  padding: 7px 9px;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  user-select: none;
  touch-action: none;
}
.a2-days.two .a2-day {
  min-height: 112px;
}
.a2-day:hover {
  background: #f3f3fb;
}
.a2-day.open {
  background: #f6fbf8;
}
.a2-day.closed {
  background: #fdf3ec;
}
.a2-day.unset {
  background: #fbfbfd;
}
.a2-day.conflict {
  background: #fdf1f0;
}
.a2-day.weekend:not(.open):not(.closed):not(.conflict) {
  background: #f5f5fa;
}
.a2-day.weekend .a2-n {
  color: var(--brand-600);
}
.a2-day.is-today .a2-n {
  background: var(--brand);
  color: #fff;
  border-radius: 5px;
  padding: 0 5px;
}
.a2-day.selected {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: var(--brand-100);
}
.a2-n {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.a2-rate {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
}
.a2-rate.mu,
.mu {
  color: var(--muted);
  font-weight: 500;
}
.a2-rate.bad {
  color: #a3302b;
}
.a2-add {
  color: #b5b5cc;
  font-size: 15px;
  margin-top: 8px;
}
.a2-warn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d99a1e;
}
.a2-rooms {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.a2-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e3e3ee;
  overflow: hidden;
}
.a2-bar i {
  display: block;
  height: 100%;
  background: #6fb88a;
}
.a2-day.closed .a2-bar i {
  background: #d9a173;
}
.a2-pool {
  font-size: 10px;
  color: var(--brand-600);
}
.a2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.a2-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
  background: #e6e6f1;
  color: #44446f;
  line-height: 15px;
}
.a2-tag.s {
  background: #f1cbb0;
  color: #7a3f10;
}
.a2-blank {
  min-height: 86px;
  background: #fafafd;
}
.a2-actionbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 14px 12px 22px;
  background: var(--brand-900);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px #1b1b3a55;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
}
.a2-sel {
  font-size: 14px;
  white-space: nowrap;
}
.a2-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.a2-actions button {
  border: 1px solid #ffffff55;
  background: transparent;
  color: #fff;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
}
.a2-actions button:hover {
  background: #ffffff22;
}
.a2-actions .a2-x {
  border: 0;
  font-size: 18px;
  padding: 2px 8px;
}
.a2-gridwrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.a2-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.a2-grid th,
.a2-grid td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #f0f0f7;
  padding: 5px 6px;
  text-align: center;
  white-space: nowrap;
}
.a2-grid thead th {
  background: #fbfbfd;
  font-weight: 600;
}
.a2-grid thead th span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}
.a2-grid th.weekend {
  color: var(--brand-600);
}
.a2-grid th.is-today {
  background: var(--brand-100);
}
.a2-gh {
  text-align: left !important;
  min-width: 190px;
  position: sticky;
  left: 0;
  background: #fff;
}
.a2-gh small {
  display: block;
  color: var(--muted);
  font-weight: 400;
}
.a2-g {
  cursor: pointer;
  min-width: 70px;
}
.a2-g b {
  display: block;
  font-size: 12.5px;
}
.a2-g small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.a2-g.open {
  background: #f6fbf8;
}
.a2-g.closed {
  background: #fdf3ec;
}
.a2-g.conflict {
  background: #fdf1f0;
  color: #a3302b;
  font-weight: 700;
}
.a2-g:hover {
  outline: 2px solid var(--brand-300);
  outline-offset: -2px;
}
.a2-hint,
.a2-empty {
  margin: 8px 2px;
  font-size: 12px;
}
.a2-dialog.wide {
  width: min(var(--dlg-xl), calc(100vw - 32px));
}
@media (max-width: 1100px) {
  .a2-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ARI Grid */
#ari-grid-page {
  min-width: 0;
  position: relative;
}
.ag-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.ag-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ag-range input[type='date'] {
  height: 36px;
  width: 146px;
}
.ag-spacer {
  flex: 1;
}
.ag-pop-btn b {
  margin-left: 6px;
  color: var(--brand);
}
.ag-menu-wrap {
  position: relative;
}
.ag-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 290px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px #1b1b3a26;
}
.ag-legend {
  left: auto;
  right: 0;
  min-width: 340px;
}
.ag-popover[hidden] {
  display: none;
}
.ag-popover h4,
.ag-editor h4 {
  margin: 0 0 8px;
  font-size: 15px;
}
.ag-popover h5 {
  margin: 12px 0 4px;
  font-size: 12px;
  color: var(--brand-700);
}
.ag-popover p {
  margin: 3px 0;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ag-opt {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.ag-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.ag-body {
  min-height: 300px;
}
.ag-scroll {
  overflow: auto;
  max-height: calc(100vh - 250px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
table.ag {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 100%;
  font-size: 12.5px;
}
.ag th,
.ag td {
  border-bottom: 1px solid #eeeef6;
  padding: 0;
}
.ag col,
.ag .ag-day,
.ag td.ag-cell {
  width: 80px;
  min-width: 80px;
}
.ag-scroll.compact .ag-day,
.ag-scroll.compact td.ag-cell {
  width: 62px;
  min-width: 62px;
}
.ag .ag-label {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  padding: 7px 10px;
  background: #fff;
  text-align: left;
  font-weight: 500;
  border-right: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ag .ag-label.sub {
  padding-left: 30px;
  font-size: 12px;
  color: #3f3f5e;
}
.ag .ag-label.guest {
  padding-left: 44px;
  color: var(--muted);
}
.ag .ag-label.plan strong {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.ag .ag-label.plan small {
  display: block;
  margin: 2px 0 0 22px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.ag-head th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.ag-head .ag-label {
  z-index: 6;
}
.ag-day {
  padding: 6px 0 4px !important;
  text-align: center;
  font-weight: 500;
  color: var(--muted);
}
.ag-day b {
  display: block;
  font-size: 15px;
  color: var(--ink);
}
.ag-day .ag-wd {
  display: block;
  font-size: 12px;
}
.ag-day .ag-mon {
  display: block;
  min-height: 14px;
  font-size: 11px;
  color: var(--brand-700);
  white-space: nowrap;
  text-align: left;
  padding-left: 6px;
}
.ag-day.weekend,
.ag-cell.weekend {
  background: #f6f6fb;
}
.ag-day.is-today b {
  color: #fff;
  background: var(--brand);
  border-radius: 6px;
  display: inline-block;
  min-width: 26px;
}
.ag-day.weekend-end,
.ag-cell.weekend-end {
  border-right: 2px solid #c9c9dd;
}
.ag-room th,
.ag-room td {
  background: #fbfbfe;
  border-bottom: 1px solid var(--line);
}
.ag-room .ag-label {
  font-size: 15px;
  background: #fbfbfe;
}
.ag-room td {
  text-align: right;
  padding-right: 10px;
}
.ag-bulk {
  position: sticky;
  right: 10px;
  color: var(--brand);
  font-size: 12.5px;
}
.ag-fold {
  border: 0;
  background: transparent;
  width: 18px;
  margin-right: 6px;
  color: var(--muted);
  font-size: 12px;
  padding: 0;
}
.ag-cell {
  text-align: center;
  height: 34px;
  cursor: cell;
  user-select: none;
  vertical-align: middle;
}
.ag-cell:hover {
  outline: 1px solid var(--brand-300);
  outline-offset: -1px;
}
.ag-cell.ag-sel {
  background: #dfe4fb !important;
  outline: 1px solid #5a6ee0;
  outline-offset: -1px;
}
.ag-cell.soldout {
  background: #fde3e1;
}
.ag-cell.unset {
  color: var(--muted);
}
.ag-statuscell {
  padding: 3px 0 !important;
  height: 30px;
}
.ag-bar {
  display: block;
  margin: 0 2px;
  padding: 3px 9px;
  border-radius: 7px;
  color: #fff;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-bar.open {
  background: #12a05c;
}
.ag-bar.sold,
.ag-bar.closed {
  background: #d93a2f;
}
.ag-bar.unset {
  background: #d7d7e4;
  color: #5f5f7b;
}
.ag-cell b {
  font-weight: 650;
}
.ag-cell b.bad {
  color: #c4302b;
  font-size: 12px;
}
.ag-planrow .ag-cell {
  height: 50px;
}
.ag-cellin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
}
.ag-val {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}
.ag-price {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ag-price small {
  font-size: 10px;
  color: var(--muted);
}
.ag-selling {
  color: #2a66d4;
  font-weight: 600;
  font-size: 12px;
}
.ag-sw {
  display: inline-block;
  flex: none;
  width: 26px;
  height: 14px;
  border-radius: 8px;
  background: #cfcfdc;
  position: relative;
  cursor: pointer;
}
.ag-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.12s;
}
.ag-sw.on {
  background: #12a05c;
}
.ag-sw.on::after {
  left: 14px;
}
.ag-subrow .ag-cell {
  height: 28px;
  font-size: 12px;
}
.ag-tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: #e6e6f1;
  color: #44446f;
  font-size: 10px;
  font-weight: 700;
}
.ag-inline {
  width: 66px;
  height: 28px;
  padding: 2px 6px;
  text-align: center;
  border: 2px solid #3b5bdb;
  border-radius: 4px;
  font-size: 13px;
}
.ag-editor {
  position: fixed;
  z-index: 60;
  width: 300px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px #1b1b3a33;
}
.ag-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #e8f0fe;
  color: #1d4fa3;
  font-size: 12px;
}
.ag-radios {
  display: flex;
  gap: 22px;
  margin: 10px 0;
}
.ag-radios label,
.ag-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.ag-f {
  display: block;
  margin: 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-600);
}
.ag-f input,
.ag-f select {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 4px;
  font-weight: 400;
}
.ag-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ag-top {
  position: fixed;
  right: 28px;
  bottom: 90px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #5f5f7b;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 16px #1b1b3a40;
  z-index: 30;
}
.ag-top[hidden] {
  display: none;
}
.ag-shade {
  position: fixed;
  inset: 0;
  background: #1b1b3a55;
  z-index: 70;
}
.ag-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(430px, 100vw);
  background: #fff;
  box-shadow: -10px 0 30px #1b1b3a33;
  display: flex;
  flex-direction: column;
}
.ag-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.ag-drawer-head h3 {
  margin: 0;
  font-size: 18px;
}
.ag-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 30px;
  background: #fbfbfd;
}
.ag-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.ag-days label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}
.ag-sec {
  margin: 10px 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ag-sec summary {
  cursor: pointer;
  list-style: none;
}
.ag-sec summary small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.ag-dialog.wide {
  width: min(var(--dlg-l), calc(100vw - 32px));
}
.ag-picker {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
}
.ag-q {
  width: 100%;
  height: 38px;
}
.ag-pick-actions {
  display: flex;
  gap: 16px;
  margin: 8px 0;
}
.ag-tree {
  max-height: 46vh;
  overflow-y: auto;
}
.ag-tree-room {
  margin-bottom: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.ag-tree-room label,
.ag-tree-plan {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.ag-tree-plan {
  padding-left: 24px;
}
.ag-picked {
  border-left: 1px solid var(--line);
  padding-left: 16px;
  max-height: 52vh;
  overflow-y: auto;
}
.ag-picked-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}
.ag-picked-room strong {
  display: block;
  margin: 8px 0 2px;
}
.ag-picked-plan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  margin-bottom: 2px;
  background: var(--brand-50);
  border-radius: 6px;
  font-size: 12.5px;
}
.ag-lg {
  display: inline-block;
  width: 26px;
  height: 12px;
  border-radius: 4px;
}
.ag-lg.bar.ok {
  background: #12a05c;
}
.ag-lg.bar.bad {
  background: #d93a2f;
}
.ag-lg.bar.unset {
  background: #d7d7e4;
}
.ag-lg.cell {
  height: 16px;
  border: 1px solid #ddd;
}
.ag-lg.cell.sold {
  background: #fde3e1;
}
.ag-lg.cell.off {
  background: #f6f6fb;
}
@media (max-width: 900px) {
  .ag-picker {
    grid-template-columns: 1fr;
  }
  .ag-picked {
    border-left: 0;
    padding-left: 0;
  }
}

.login-layout.has-bg .story-title-first strong {
  font-size: 1.35em;
  line-height: 1;
}

.login-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #e3e3f0);
  color: #6c6c8c;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-decoration: none;
  text-align: left;
}
.login-credit img {
  width: 34px;
  height: auto;
  flex: none;
}
.login-credit b {
  color: #404094;
  font-weight: 600;
}
.login-credit:hover span {
  text-decoration: underline;
}

.login-layout.has-bg .login-story .story-content p.story-text-box {
  align-self: stretch;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 16px 20px;
  background: rgba(64, 64, 148, 0.045);
  border: 1px solid rgba(64, 64, 148, 0.12);
  border-radius: 14px;
  color: #4a4a86;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}

/* TEMPORARY (local only): sign-in "Fill password" buttons, see src/devQaFill.js */
.qa-fill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 10px 0 0;
  padding: 0;
  border: 1px dashed #b9b9d8;
  border-radius: 8px;
  background: transparent;
  color: #8a8aa8;
  cursor: pointer;
}
.qa-fill:hover {
  background: #f1f1fa;
}

.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff1d6;
  border: 1px solid #f5c76b;
  color: #8a5a00;
  font-weight: 600;
  letter-spacing: 1.2px;
}
.login-badge svg {
  flex: none;
  color: #e08e00;
}
.login-form > .muted strong {
  font-weight: 700;
  color: var(--ink, #1f1f4d);
}

.a2-quick {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 41;
  width: min(420px, calc(100vw - 24px));
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 34px #1b1b3a44;
}
.a2-quick label {
  margin: 0 0 8px;
  font-size: 13px;
}
.a2-quick-row {
  display: flex;
  gap: 8px;
}
.a2-quick-row input {
  flex: 1;
  min-width: 0;
}
.a2-quick-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.a2-rate small {
  font-size: 11px;
  font-weight: 500;
}
.a2-seg button[aria-pressed='false'] {
  color: var(--muted);
}

.a2-rooms.ghost {
  visibility: hidden;
}

/* Size classes set by a screen on the shared dialog shells (removed again when the dialog closes). */
dialog.dlg-s {
  width: min(var(--dlg-s), calc(100% - 30px));
}
dialog.dlg-l {
  width: min(var(--dlg-l), calc(100% - 30px));
}
dialog.dlg-xl {
  width: min(var(--dlg-xl), calc(100% - 30px));
}

.a2-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #f5f5fa;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.a2-context span {
  display: flex;
  flex-direction: column;
}
.a2-context small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.ag-ref {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 -4px;
  min-height: 24px;
}
.ag-fill {
  cursor: pointer;
  border: 0;
  user-select: all;
}

.rr-validity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 22px 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  background: #eaf6ee;
  border: 1px solid #cfe8d8;
  color: #1f5a37;
}
.rr-validity.warn {
  background: #fdf3e1;
  border-color: #f2dcb0;
  color: #7a4f0b;
}
.rr-validity.bad {
  background: #fdecea;
  border-color: #f2c4c1;
  color: #a3302b;
}

.rr-validity button {
  flex: none;
  padding: 9px 16px;
}

/* Channels → Hotel connections: hotels on the left, channels on the right, lines between */
.conn-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) 110px minmax(0, 1.5fr);
  align-items: stretch;
  margin-top: 6px;
}
.conn-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.conn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  min-height: 62px;
}
.conn-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.conn-chips {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.conn-chips button {
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--ink);
}
.conn-chips button:first-child {
  border-left: 0;
}
.conn-chips button.selected {
  background: var(--brand-100);
  color: var(--brand-600);
  font-weight: 600;
}
.conn-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.conn-search input {
  height: 38px;
}
.conn-list {
  max-height: 520px;
  overflow-y: auto;
  min-height: 120px;
}
.conn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 14px;
  position: relative;
}
.conn-row:last-child {
  border-bottom: 0;
}
.conn-t {
  flex: 1;
  min-width: 0;
}
.conn-t b {
  display: block;
  font-weight: 600;
}
.conn-t small {
  color: var(--muted);
  font-size: 12px;
}
.conn-hotel.selected {
  background: var(--brand-100);
  box-shadow: inset 3px 0 0 var(--brand);
}
.conn-count {
  min-width: 26px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f0f7;
  font-size: 12px;
  color: var(--muted);
}
.conn-hotel.selected .conn-count {
  background: #fff;
  color: var(--brand-600);
}
.conn-row.dirty::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #e0a42b;
}
.conn-channel input[type='checkbox'] {
  width: 18px;
  height: 18px;
  flex: none;
}
.conn-channel.on {
  background: #f1faf4;
}
.conn-pill {
  padding: 2px 9px;
  border-radius: 999px;
  background: #f0f0f7;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.conn-pill.ok {
  background: #fff;
  color: #1d7a45;
  border: 1px solid #cfe8d8;
}
.conn-pill.warn {
  background: #fdf3e1;
  color: #7a4f0b;
}
.conn-ap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 74px;
  flex: none;
}
.conn-ap small {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.conn-sw {
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 1px solid #c9c9d9;
  border-radius: 999px;
  background: #ececf4;
}
.conn-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9a9ab0;
  transition: left 0.15s;
}
.conn-sw[aria-checked='true'] {
  background: #1d9a5b;
  border-color: #1d9a5b;
}
.conn-sw[aria-checked='true']::after {
  left: 22px;
  background: #fff;
}
.conn-sw:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.conn-gear,
.conn-gear-space {
  flex: none;
  width: 32px;
  height: 32px;
}
.conn-lines {
  position: relative;
}
.conn-lines svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.conn-dot {
  fill: var(--brand);
}
.conn-line {
  fill: none;
  stroke-width: 1.2;
}
.conn-line.on {
  stroke: #1d9a5b;
  stroke-width: 2.2;
}
.conn-line.manual {
  stroke: #1d9a5b;
  stroke-width: 2.2;
  stroke-dasharray: 7 4;
}
.conn-line.off {
  stroke: #c3c3d4;
  stroke-dasharray: 2 5;
}
.conn-end {
  fill: #fff;
  stroke: #c3c3d4;
}
.conn-end.on,
.conn-end.manual {
  fill: #1d9a5b;
  stroke: #1d9a5b;
}
.conn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.conn-actions {
  display: flex;
  gap: 8px;
}
.conn-errors {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fdecea;
  color: #a3302b;
  font-size: 13px;
}
.conn-errors p {
  margin: 2px 0;
}
.conn-none {
  padding: 18px 16px;
}
@media (max-width: 900px) {
  .conn-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .conn-lines {
    display: none;
  }
}

/* Mappings: inside IRAQ CRS on the left, the code on the channel on the right */
.map-top {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.map-hotel {
  min-width: 260px;
}
.map-missing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 0 0 8px auto;
}
.map-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.map-card {
  min-width: 190px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.map-card.on {
  border: 2px solid var(--brand);
  padding: 11px 15px;
  background: var(--brand-100);
}
.map-card b {
  display: block;
  font-size: 14.5px;
}
.map-card small {
  display: block;
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--muted);
}
.map-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #e8e8f1;
  overflow: hidden;
}
.map-bar i {
  display: block;
  height: 100%;
  background: #1d9a5b;
}
.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch;
}
.map-grp {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  background: #f6f6fb;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-row {
  height: 68px;
  min-height: 0;
  cursor: default;
}
.map-row.miss {
  background: #fff8ea;
}
.map-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: #e0a42b;
}
.map-dot.ok {
  background: #1d9a5b;
}
.map-code {
  flex: 1;
  min-width: 0;
  height: 38px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
}
.map-line {
  fill: none;
  stroke-width: 1.2;
}
.map-line.ok {
  stroke: #1d9a5b;
  stroke-width: 2;
}
.map-line.miss {
  stroke: #e0a42b;
  stroke-dasharray: 4 4;
}
.map-end {
  fill: #fff;
  stroke: #e0a42b;
}
.map-end.ok {
  fill: #1d9a5b;
  stroke: #1d9a5b;
}
.map-compare-group td {
  background: #f6f6fb;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-none {
  color: #a8730f;
}
@media (max-width: 900px) {
  .map-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .map-lines {
    display: none;
  }
}

.map-note {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.map-chip {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 9px;
  border-radius: 6px;
  background: #ecedfb;
  border: 1px solid #d3d5f3;
  color: var(--brand-600);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.map-row .conn-t b {
  font-size: 15px;
}

.map-row .conn-pill {
  display: inline-block;
  margin-top: 3px;
}
.map-row > .map-chip {
  margin: 0 0 0 auto;
  flex: none;
  font-size: 14px;
  padding: 4px 11px;
}

/* Push Config: the "Apply to many hotels" bar sits under the hotel/channel selectors, on its own row */
.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0;
}

/* Push Config bulk preview: the reason a connection cannot be changed is plain red text, not an alert box */
.bulk-err {
  color: #b3261e;
  font-size: 13px;
  line-height: 1.4;
}
#bk-rows td,
#bk-preview td {
  vertical-align: middle;
}

/* Price Flow: a narrow column (filters, five figures, checks) beside three stacked charts; compact, no scrolling */
.pf-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.pf-side,
#pf-side-result,
#pf-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.pf-box {
  margin: 0;
}
.pf-box .records-card-heading {
  padding: 8px 12px;
}
.pf-filters {
  display: grid;
  gap: 5px;
  padding: 2px 12px 10px;
}
.pf-filters .form-field {
  gap: 1px;
}
.pf-filters label {
  font-size: 11px;
}
.pf-filters select,
.pf-filters input {
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
}
.pf-tilebox {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  padding: 9px 14px 9px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid #888780;
  border-radius: 10px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(20, 20, 60, 0.05);
}
.pf-t-hotel {
  border-left-color: #1d9e75;
}
.pf-t-ib {
  border-left-color: #7f77dd;
}
.pf-tilebox span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.pf-tilebox strong {
  font-size: 18px;
  line-height: 1.2;
  text-align: right;
}
.pf-tilebox strong small {
  display: inline;
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}
.pf-tilebox > small {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
}
.pf-datebar {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  gap: 4px;
}
.pf-datebar button {
  height: 28px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.pf-tilegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pf-tilegrid .pf-tilebox {
  grid-template-columns: 1fr;
}
.pf-tilegrid .pf-tilebox strong {
  text-align: left;
}
.pf-warnline {
  margin: 0;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-chart {
  padding: 2px 12px 8px;
}
.pf-row {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr 66px;
  align-items: center;
  gap: 10px;
  padding: 1px 0;
  font-size: 12.5px;
}
.pf-row.pf-info {
  grid-template-columns: 1fr 66px;
}
.pf-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-label small {
  color: var(--muted);
  font-size: 11px;
}
.pf-track {
  position: relative;
  height: 13px;
  background: var(--surface-soft, rgba(0, 0, 0, 0.05));
  border-radius: 3px;
}
.pf-bar {
  position: absolute;
  top: 0;
  height: 13px;
  border-radius: 3px;
}
.pf-val {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}
.pf-info .pf-label {
  color: var(--muted);
}
.pf-empty {
  padding: 6px 0;
  font-size: 12px;
}
.pf-legendbox {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
}
.pf-legendbox i {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -2px;
}
.pf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--muted);
}
.pf-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
}
@media (max-width: 900px) {
  .pf-layout {
    grid-template-columns: 1fr;
  }
}
#pf-main {
  gap: 1px;
}

/* Workspace rail: one icon per product area (Home, Hotels, Villas, Platform). */
:root {
  --rail: 68px;
}
:root.no-rail {
  --rail: 0px;
}
.ws-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 68px;
  background: var(--brand-950);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  z-index: 31;
}
.ws-rail[hidden] {
  display: none;
}
.ws-rail button {
  width: 56px;
  border: 0;
  background: transparent;
  color: var(--brand-300);
  border-radius: 10px;
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.ws-rail button svg {
  width: 22px;
  height: 22px;
}
.ws-rail button:hover {
  color: #fff;
  background: #ffffff14;
}
.ws-rail button.selected {
  color: var(--brand-950);
  background: #fff;
}
.ws-rail button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.sidebar {
  left: var(--rail);
}
.workspace-body {
  width: calc(100% - var(--sidebar) - var(--rail));
  margin-left: calc(var(--sidebar) + var(--rail));
}
.toast {
  left: calc(var(--sidebar) + var(--rail) + 16px);
}
/* Villas are not hotels: no hotel picker or hotel summary there. */
#workspace[data-ws='villas'] .hotel-context,
#workspace[data-ws='villas'] .topbar-divider,
#workspace[data-ws='villas'] .subbar,
#workspace[data-ws='villas'] .page-heading {
  display: none;
}
@media (max-width: 760px) {
  :root,
  :root.no-rail {
    --rail: 0px;
  }
  .ws-rail {
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .ws-rail.open {
    transform: none;
  }
  .sidebar {
    left: 68px;
    transform: translateX(calc(-100% - 68px));
  }
  :root.no-rail .sidebar {
    left: 0;
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .workspace-body {
    width: 100%;
    margin-left: 0;
  }
  .toast {
    left: 16px;
  }
}
/* Platform: show all products or one. */
.home-kind {
  display: none;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
#workspace[data-ws='platform'] .home-kind {
  display: flex;
}
.home-kind button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.home-kind button.selected {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
/* The property picker is wide enough for a full hotel name on one line. */
body .hotel-context select {
  max-width: min(480px, 42vw);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Reservation detail: the property is the headline. */
.rd-card {
  overflow: hidden;
}
.rd-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 26px 18px;
  background: linear-gradient(135deg, var(--brand-50), #fff);
  border-bottom: 1px solid var(--line);
}
.rd-prop {
  min-width: 0;
}
.rd-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-400);
}
.rd-name {
  margin: 4px 0 4px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rd-via {
  font-size: 12px;
  color: var(--muted);
}
.rd-code {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.rd-code strong {
  font-size: 20px;
  color: var(--ink);
}
.rd-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 26px;
}
.rd-tile {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
}
.rd-tile strong,
.rd-guest-link {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
}
.rd-total strong {
  font-size: 20px;
  color: var(--brand);
}
.rd-guest-link {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-underline-offset: 3px;
}
.rd-guest-link:hover {
  text-decoration-color: var(--brand);
}
.res-prop {
  color: var(--ink);
  font-weight: 650;
}
@media (max-width: 760px) {
  .rd-hero {
    flex-direction: column;
  }
  .rd-code {
    align-items: flex-start;
    text-align: left;
  }
  .rd-tiles {
    grid-template-columns: 1fr;
  }
  .rd-name {
    font-size: 22px;
  }
}
/* Reservation detail of a villa: Reservation / Payments and ID. */
.rd-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 16px;
}
.rd-tabs button {
  border: 0;
  background: transparent;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.rd-tabs button.selected {
  color: var(--brand);
  font-weight: 600;
  border-bottom-color: var(--brand);
}

/* Buttons (docs/UI_BUTTONS.md): anything that does one specific thing looks like a button. */
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 12px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.text-button:hover {
  background: var(--brand-200);
}
.text-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.text-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.text-button.btn-ok {
  background: #e6f4ec;
  border-color: #bfe0cd;
  color: #17703f;
}
.text-button.btn-ok:hover {
  background: #d3ecdf;
}
.text-button.btn-danger {
  background: #fbe9e7;
  border-color: #f0c9c5;
  color: #a3302b;
}
.text-button.btn-danger:hover {
  background: #f6d5d2;
}
.text-button.btn-edit {
  background: #e4edfb;
  border-color: #c4d6f3;
  color: #1f4f9a;
}
.text-button.btn-edit:hover {
  background: #d3e2f7;
}
.text-button.btn-view {
  background: #f1f1f6;
  border-color: #dcdcec;
  color: #4a4a6a;
}
.text-button.btn-view:hover {
  background: #e6e6f1;
}
.vl-row > span:has(> .text-button) {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* A person's picture in a circle (owners). */
.avatar-circle {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 700;
  border: 1px solid var(--brand-200);
}
.avatar-circle.sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.avatar-circle.md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.avatar-circle.lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
}
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.record-dialog-header .who {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Identity papers: four slots with the picture. */
.id-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.id-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.id-thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 8 / 5;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  color: var(--muted);
  font-size: 12px;
}
.id-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.id-thumb.empty {
  border-style: dashed;
}
.vl-name {
  display: flex;
  align-items: center;
  gap: 10px;
}