/* Futuresens CMS design system
   Presentation-only compatibility layer for the existing server-rendered UI. */
:root {
  --fs-green: #42d36b;
  --fs-green-dark: #25a94c;
  --fs-green-soft: #eafbf0;
  --fs-black: #111412;
  --fs-sidebar: #121613;
  --fs-sidebar-muted: #9da8a0;
  --fs-bg: #f4f6f5;
  --fs-surface: #ffffff;
  --fs-surface-muted: #f8faf9;
  --fs-border: #dfe5e1;
  --fs-border-strong: #cbd4ce;
  --fs-text: #17201a;
  --fs-text-muted: #667169;
  --fs-danger: #c93636;
  --fs-danger-dark: #a52525;
  --fs-danger-soft: #fff0f0;
  --fs-warning: #a76408;
  --fs-warning-soft: #fff7e6;
  --fs-info: #246b9e;
  --fs-radius-sm: 6px;
  --fs-radius: 10px;
  --fs-radius-lg: 16px;
  --fs-shadow: 0 8px 28px rgba(18, 32, 22, 0.08);
  --fs-sidebar-width: 256px;
  --fs-topbar-height: 78px;
  --fs-content-width: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--fs-bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fs-bg);
  color: var(--fs-text);
  font-family: Lato, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.cms-app {
  padding: calc(var(--fs-topbar-height) + 24px) 28px 40px calc(var(--fs-sidebar-width) + 28px);
}

a { color: var(--fs-green-dark); text-underline-offset: 2px; }
a:hover { color: #197f38; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--fs-text);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.3rem; }

/* Application shell */
.cms-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  width: var(--fs-sidebar-width);
  flex-direction: column;
  overflow: hidden;
  background: var(--fs-sidebar);
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.06);
}

.cms-brand, .cms-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cms-brand { min-height: 80px; padding: 16px 20px; }

.cms-brand-mark {
  display: inline-block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  padding: 3px;
  border-radius: 11px;
  background: #fff;
  line-height: 1;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.22));
}
.cms-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.cms-brand-mark:hover { transform: translateY(-1px); }
.cms-brand-mark:focus-visible { outline: 3px solid var(--fs-green); outline-offset: 3px; }

.cms-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.cms-brand-copy strong { color: inherit; font-size: 18px; letter-spacing: -.02em; }
.cms-brand-copy small { margin-top: 4px; color: var(--fs-sidebar-muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.cms-property {
  margin: 0 14px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--fs-radius);
  background: rgba(255,255,255,.04);
}
.cms-property span { display: block; color: var(--fs-sidebar-muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.cms-property strong { display: block; margin-top: 3px; overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.cms-nav.w3-bar {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 4px 12px 14px;
  background: transparent !important;
  scrollbar-color: #37423a transparent;
  scrollbar-width: thin;
}

.cms-nav .w3-bar-item,
.cms-logout {
  position: relative;
  display: flex !important;
  width: 100% !important;
  min-height: 42px;
  align-items: center;
  gap: 13px;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 7px;
  background: transparent !important;
  color: #c6cec8 !important;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}

.cms-nav .w3-bar-item i, .cms-logout i { width: 18px; color: #818d84; font-size: 14px; text-align: center; }
.cms-nav .w3-bar-item:hover, .cms-logout:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.cms-nav .w3-dark-grey, .cms-logout.is-active { background: rgba(66,211,107,.13) !important; color: #fff !important; }
.cms-nav .w3-dark-grey::before, .cms-logout.is-active::before { position: absolute; inset: 9px auto 9px 0; width: 3px; border-radius: 3px; background: var(--fs-green); content: ""; }
.cms-nav .w3-dark-grey i, .cms-logout.is-active i { color: var(--fs-green); }

.cms-logout { width: auto !important; margin: 8px 12px 14px; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 7px 7px; }

.cms-topbar {
  position: fixed;
  inset: 0 0 auto var(--fs-sidebar-width);
  z-index: 40;
  display: flex;
  min-height: var(--fs-topbar-height);
  align-items: center;
  padding: 12px 30px;
  border-bottom: 1px solid var(--fs-border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
}
.cms-topbar div { display: flex; min-width: 0; flex-direction: column; }
.cms-topbar-eyebrow { color: var(--fs-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.cms-topbar strong { margin-top: 2px; color: var(--fs-text); font-size: 20px; }
.cms-back-link { display: inline-flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 7px; margin-left: 18px; padding: 7px 12px; border: 1px solid var(--fs-border-strong); border-radius: var(--fs-radius-sm); background: var(--fs-surface); color: var(--fs-text); font-size: 13px; font-weight: 800; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.cms-back-link:hover, .cms-back-link:focus { border-color: var(--fs-green); background: var(--fs-green-soft); color: var(--fs-green-dark); }
.cms-back-link i { font-size: 11px; }
.cms-menu-toggle, .cms-sidebar-backdrop { display: none; }

/* Existing page structures */
.cms-app > .w3-container,
.cms-app > .w3-row,
.cms-app > form,
.cms-app > .card,
.cms-app > div:not(.cms-sidebar-backdrop):not(.cms-sidebar):not(.cms-topbar) {
  width: 100%;
  max-width: var(--fs-content-width);
  margin-right: auto;
  margin-left: auto;
}

.cms-app > .w3-white.w3-text-white { display: none; }

.w3-container { padding-right: 22px; padding-left: 22px; }
.w3-padding { padding: 14px 16px !important; }
.w3-row.w3-tiny:empty, .w3-row.w3-small:empty { min-height: 6px; }

.w3-light-gray, .w3-light-grey {
  background: var(--fs-surface-muted) !important;
  color: var(--fs-text) !important;
}

.cms-app .w3-container > .w3-row.w3-light-gray.w3-border,
.cms-app .w3-container > .w3-row.w3-light-grey.w3-border,
.cms-app > .w3-bar.w3-light-gray,
.cms-app > .w3-bar.w3-light-grey {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 16px 20px !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: var(--fs-radius);
  background: var(--fs-surface) !important;
}
.cms-app .w3-container > .w3-row.w3-light-gray.w3-border::before,
.cms-app .w3-container > .w3-row.w3-light-gray.w3-border::after,
.cms-app .w3-container > .w3-row.w3-light-grey.w3-border::before,
.cms-app .w3-container > .w3-row.w3-light-grey.w3-border::after { display: none; }
.cms-app .w3-light-gray h3, .cms-app .w3-light-grey h3 { margin: 0; }

.w3-border { border-color: var(--fs-border) !important; }
.w3-card, .w3-card-2, .w3-card-4, .card {
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
  box-shadow: none;
}

/* Forms */
label, strong { color: var(--fs-text); }
label { font-size: 14px; font-weight: 700; }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.w3-input,
.w3-select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px !important;
  border: 1px solid var(--fs-border-strong) !important;
  border-radius: var(--fs-radius-sm) !important;
  outline: 0;
  background: var(--fs-surface) !important;
  color: var(--fs-text);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea, textarea.w3-input { min-height: 112px; resize: vertical; }

input:focus, select:focus, textarea:focus, .w3-input:focus, .w3-select:focus {
  border-color: var(--fs-green-dark) !important;
  box-shadow: 0 0 0 3px rgba(66,211,107,.18) !important;
}

input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; background: #edf0ee !important; color: #8a948d; }

input[type="checkbox"], input[type="radio"], .w3-check, .w3-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--fs-green-dark);
  vertical-align: middle;
}

/* Buttons */
.w3-btn, .w3-button, button, input[type="submit"], input[type="button"] {
  min-height: 36px;
  padding: 7px 12px !important;
  border: 1px solid var(--fs-border-strong) !important;
  border-radius: var(--fs-radius-sm) !important;
  background: var(--fs-surface);
  color: var(--fs-text) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.w3-btn:hover, .w3-button:hover, button:hover { transform: translateY(-1px); background: #f2f5f3 !important; }
.w3-btn:focus-visible, .w3-button:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgba(66,211,107,.38); outline-offset: 2px; }
.w3-blue, .w3-btn.w3-blue, .w3-button.w3-blue, button.w3-blue {
  border-color: var(--fs-green-dark) !important;
  background: var(--fs-green-dark) !important;
  color: #fff !important;
}
.w3-blue:hover, .w3-btn.w3-blue:hover, .w3-button.w3-blue:hover { border-color: #188d3b !important; background: #188d3b !important; }
.w3-red, .w3-btn.w3-red, .w3-button.w3-red, button.w3-red {
  border-color: var(--fs-danger) !important;
  background: var(--fs-danger) !important;
  color: #fff !important;
}
.w3-red:hover, .w3-btn.w3-red:hover, .w3-button.w3-red:hover { border-color: var(--fs-danger-dark) !important; background: var(--fs-danger-dark) !important; }
button[value="delete"], input[type="submit"][value="delete"] { border-color: var(--fs-danger) !important; background: var(--fs-danger) !important; color: #fff !important; }
button[value="delete"]:hover, input[type="submit"][value="delete"]:hover { border-color: var(--fs-danger-dark) !important; background: var(--fs-danger-dark) !important; }
button[value="cancel"].w3-red { border-color: var(--fs-border-strong) !important; background: var(--fs-surface) !important; color: var(--fs-text) !important; }
.w3-btn.w3-large, .w3-button.w3-large, .w3-btn.w3-xlarge, .w3-button.w3-xlarge,
button.w3-large, button.w3-xlarge { font-size: 13px !important; }
.button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 7px 12px !important;
  border: 1px solid var(--fs-border-strong) !important;
  border-radius: var(--fs-radius-sm) !important;
  background: var(--fs-surface) !important;
  background-image: none !important;
  color: var(--fs-text) !important;
  font: inherit;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: none !important;
}
.button.big { font-size: 13px !important; }
.button.danger { border-color: var(--fs-danger) !important; background: var(--fs-danger) !important; color: #fff !important; }
.button.danger:hover { border-color: var(--fs-danger-dark) !important; background: var(--fs-danger-dark) !important; }
.w3-green { background: var(--fs-green-soft) !important; color: #166b32 !important; }
.w3-black { background: var(--fs-black) !important; color: #fff !important; }

/* Tables and list-like grids */
.w3-table, table {
  width: 100%;
  border: 1px solid var(--fs-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
  overflow: hidden;
}
th {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--fs-border-strong);
  background: var(--fs-surface-muted);
  color: #59645d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}
td { padding: 13px 14px !important; border-bottom: 1px solid var(--fs-border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: #f7faf8 !important; }
.w3-striped tbody tr:nth-child(even) { background: #fbfcfb; }

/* Alerts, dialogs, media */
.cms-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px !important;
  border: 1px solid #efb8b8 !important;
  border-radius: var(--fs-radius-sm);
  background: var(--fs-danger-soft) !important;
  color: #8f2525 !important;
  font-size: 14px !important;
  font-weight: 700;
  text-align: left !important;
}
.cms-alert i { margin-top: 3px; }
.cms-alert-success {
  border-color: #a9dfb8 !important;
  background: var(--fs-green-soft) !important;
  color: #176b33 !important;
}
.w3-modal-content { border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); box-shadow: var(--fs-shadow); overflow: hidden; }
img { max-width: 100%; height: auto; border-radius: var(--fs-radius-sm); }
.mySlides { border: 1px solid var(--fs-border); }

/* Authentication */
.cms-auth {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 13% 82%, rgba(66,211,107,.15), transparent 31%),
    linear-gradient(118deg, var(--fs-sidebar) 0, var(--fs-sidebar) 49.5%, var(--fs-bg) 49.6%, var(--fs-bg) 100%);
}
.cms-auth::before { position: fixed; inset: 0 auto 0 49.5%; width: 1px; background: rgba(255,255,255,.08); content: ""; }
.cms-auth-brand { position: relative; z-index: 2; width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 28px 0; color: #fff; }
.cms-auth-main { position: relative; z-index: 1; display: grid; width: min(1180px, calc(100% - 64px)); flex: 1; grid-template-columns: 1fr 1fr; gap: clamp(70px, 11vw, 150px); align-items: center; margin: 0 auto; padding: 34px 0 70px; }
.cms-auth-intro { max-width: 490px; color: #fff; }
.cms-kicker { display: block; margin-bottom: 14px; color: var(--fs-green-dark); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.cms-auth-intro .cms-kicker { color: var(--fs-green); }
.cms-auth-intro h1 { margin-bottom: 20px; color: #fff; font-size: clamp(36px, 4vw, 54px); line-height: 1.08; }
.cms-auth-intro > p { max-width: 460px; color: #b7c0ba; font-size: 17px; }
.cms-auth-points { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 34px; color: #e4e9e5; font-size: 13px; font-weight: 700; }
.cms-auth-points span { display: flex; align-items: center; gap: 8px; }
.cms-auth-points i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: rgba(66,211,107,.14); color: var(--fs-green); font-size: 9px; }
.cms-login-card { width: 100%; max-width: 480px; justify-self: end; padding: clamp(28px, 4vw, 46px); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); background: var(--fs-surface); box-shadow: var(--fs-shadow); }
.cms-login-heading { margin-bottom: 28px; }
.cms-login-heading h2 { margin: 0 0 7px; font-size: 27px; }
.cms-login-heading p { margin: 0; color: var(--fs-text-muted); }
.cms-field { margin-bottom: 18px; }
.cms-field > label { display: block; margin-bottom: 7px; }
.cms-input-wrap { position: relative; }
.cms-input-wrap > i { position: absolute; top: 50%; left: 14px; z-index: 1; color: #8a958d; opacity: 1; transform: translateY(-50%); transition: opacity .14s ease; }
.cms-input-wrap input { height: 48px; }
.cms-auth .cms-input-wrap input.w3-input { padding-right: 12px !important; padding-left: 42px !important; }
.cms-input-wrap:has(input:not(:placeholder-shown)) > i { visibility: hidden; opacity: 0; }
.cms-auth .cms-input-wrap:has(input:not(:placeholder-shown)) input.w3-input { padding-left: 12px !important; }
.cms-remember { display: inline-flex; align-items: center; gap: 9px; margin: 1px 0 23px; color: var(--fs-text-muted); font-weight: 600; cursor: pointer; }
.cms-login-button { display: flex !important; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 10px; }
.cms-login-help { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 22px 0 0; color: #7a857d; font-size: 12px; text-align: center; }
.cms-login-help i { color: var(--fs-green-dark); }
.cms-auth-secondary { margin: 20px 0 0; color: var(--fs-text-muted); font-size: 13px; text-align: center; }
.cms-auth-secondary a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.cms-password-requirements { margin: -4px 0 22px; padding: 15px 17px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); background: var(--fs-surface-muted); }
.cms-password-requirements > strong { display: block; margin-bottom: 7px; font-size: 13px; }
.cms-password-requirements ul { margin: 0; padding-left: 19px; color: var(--fs-text-muted); font-size: 12px; }
.cms-password-requirements li + li { margin-top: 4px; }
.cms-auth-footer { position: relative; z-index: 1; width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 18px 0 25px; color: #78837b; font-size: 11px; letter-spacing: .06em; text-align: right; text-transform: uppercase; }

/* User activation */
.cms-activation-admin { width: 100%; max-width: 980px; margin: 0 auto; }
.cms-activation-panel { position: relative; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); background: var(--fs-surface); box-shadow: var(--fs-shadow); }
.cms-activation-panel--compact { max-width: 680px; }
.cms-activation-success-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 18px; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 20px; }
.cms-activation-heading { max-width: 690px; }
.cms-activation-heading h1 { margin-bottom: 8px; font-size: clamp(25px, 3vw, 34px); }
.cms-activation-heading p { margin: 0; color: var(--fs-text-muted); font-size: 16px; }
.cms-activation-deadline { display: flex; align-items: center; gap: 13px; margin: 24px 0; padding: 15px 17px; border: 1px solid #efd49c; border-radius: var(--fs-radius); background: var(--fs-warning-soft); color: #784d11; }
.cms-activation-deadline > i { font-size: 19px; }
.cms-activation-deadline strong, .cms-activation-deadline span { display: block; color: inherit; }
.cms-activation-deadline span { margin-top: 2px; font-size: 13px; }
.cms-activation-share { padding: 20px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface-muted); }
.cms-activation-share > label { display: block; margin: 0 0 7px; }
.cms-activation-share > label:not(:first-child) { margin-top: 18px; }
.cms-activation-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.cms-activation-copy-row .w3-button { min-width: 116px; justify-content: center; }
.cms-activation-share textarea { min-height: 154px; font-size: 13px; line-height: 1.45; }
.cms-activation-share > .w3-button { margin-top: 9px; }
.cms-copy-status { min-height: 20px; margin: 8px 0 0; color: var(--fs-green-dark); font-size: 12px; font-weight: 700; }
.cms-activation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.cms-activation-steps li { display: flex; gap: 12px; padding: 15px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); }
.cms-activation-steps li > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 12px; font-weight: 900; }
.cms-activation-steps strong { display: block; font-size: 13px; }
.cms-activation-steps p { margin: 4px 0 0; color: var(--fs-text-muted); font-size: 12px; }
.cms-activation-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cms-activation-actions .w3-button { display: inline-flex; align-items: center; gap: 7px; }

/* Second-pass shared page patterns */
.cms-module-page {
  width: 100%;
  max-width: var(--fs-content-width);
  margin: 0 auto;
}
.cms-module-header {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
  padding: 20px 22px;
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
}
.cms-module-header h1 { margin: 0 0 4px; font-size: 24px; }
.cms-module-header p, .cms-section-heading p { margin: 0; color: var(--fs-text-muted); }
.cms-module-header .cms-kicker { margin-bottom: 5px; }
.cms-header-actions, .cms-form-actions, .cms-row-actions { display: flex; align-items: center; gap: 8px; }
.cms-page-heading h3 { margin: 0; }

/* PMS section navigation */
.cms-pms-section-header {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 13px 16px;
  border: 1px solid var(--fs-border) !important;
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
  box-shadow: 0 3px 12px rgba(18,32,22,.04);
}
.cms-pms-section-header > .w3-col { width: auto !important; margin-top: 0 !important; }
.cms-pms-section-header > .w3-col:first-child { flex: 1 1 210px; }
.cms-pms-section-header h3, .cms-pms-section-header h4 { margin: 0; font-size: 20px; }
.cms-pms-section-header .w3-btn { width: auto !important; min-width: 96px; margin-top: 0 !important; }
.cms-pms-section-header[id], .cms-pms-section-header [id] { scroll-margin-top: calc(var(--fs-topbar-height) + 16px); }

.cms-data-card, .cms-module-section {
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
  overflow: visible;
}
.cms-table-scroll { width: 100%; overflow-x: auto; border-radius: inherit; }
.cms-module-table { border: 0; border-radius: inherit; }
.cms-module-table th { white-space: nowrap; }
.cms-module-table td { min-height: 58px; }
.cms-actions-column { width: 1%; text-align: right; }
.cms-row-actions { justify-content: flex-end; white-space: nowrap; }
.cms-status-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #edf1ee;
  color: #526057;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.cms-status-badge.is-active { background: var(--fs-green-soft); color: #177135; }
.cms-status-badge.is-inactive { background: #eef0ef; color: #69736c; }
.cms-status-badge i { margin-right: 5px; font-size: 10px; }
.cms-empty-state { padding: 56px 24px; border: 1px dashed var(--fs-border-strong); border-radius: var(--fs-radius); background: var(--fs-surface); text-align: center; }
.cms-empty-state > i { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 20px; }
.cms-empty-state h2 { margin-bottom: 5px; font-size: 19px; }
.cms-empty-state p { margin: 0; color: var(--fs-text-muted); }

/* Searchable hotel selector */
.cms-hotel-select-page { display: grid; gap: 18px; }
.cms-hotel-welcome { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 28px; align-items: center; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); background: linear-gradient(135deg, #fff 0%, #f4fbf6 100%); box-shadow: var(--fs-shadow); }
.cms-hotel-welcome-copy h1 { max-width: 650px; margin-bottom: 10px; font-size: clamp(28px, 3vw, 40px); }
.cms-hotel-welcome-copy p { max-width: 690px; margin: 0; color: var(--fs-text-muted); font-size: 16px; }
.cms-hotel-welcome-points { display: grid; gap: 9px; }
.cms-hotel-welcome-points > div { display: flex; align-items: flex-start; gap: 12px; padding: 12px 13px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: rgba(255,255,255,.86); }
.cms-hotel-welcome-points i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 13px; }
.cms-hotel-welcome-points span { display: flex; flex-direction: column; }
.cms-hotel-welcome-points strong { font-size: 14px; }
.cms-hotel-welcome-points small { margin-top: 2px; color: var(--fs-text-muted); font-size: 12px; }
.cms-hotel-selection-card { padding: 20px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); }
.cms-hotel-selection-card .cms-section-heading { max-width: 640px; margin: 0 0 4px; }
.cms-hotel-picker { max-width: 640px; padding: 12px 16px 18px; }
.cms-hotel-picker > label { display: block; margin-bottom: 7px; }
.cms-combobox { position: relative; }
.cms-combobox > i { position: absolute; top: 15px; left: 14px; z-index: 2; color: #7e8981; }
.cms-app .cms-hotel-picker .cms-combobox input#hotel-search { padding-right: 12px !important; padding-left: 42px !important; }
.cms-combobox-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--fs-border-strong);
  border-radius: var(--fs-radius);
  background: var(--fs-surface);
  box-shadow: var(--fs-shadow);
}
.cms-combobox-results button { display: block; width: 100%; min-height: 42px; padding: 9px 11px; border: 0 !important; border-radius: var(--fs-radius-sm); background: transparent; color: var(--fs-text); text-align: left; cursor: pointer; }
.cms-combobox-results button[hidden] { display: none; }
.cms-combobox-results button:hover, .cms-combobox-results button:focus, .cms-combobox-results button.is-active { background: var(--fs-green-soft) !important; color: var(--fs-green-dark); }
.cms-combobox-results button[aria-selected="true"] { font-weight: 800; }
.cms-combobox-empty { margin: 0; padding: 18px 12px; color: var(--fs-text-muted); text-align: center; }
.cms-helper-text { margin: 7px 0 0; color: var(--fs-text-muted); font-size: 12px; }
.cms-form-actions { max-width: 640px; padding: 0 16px 16px; }
.cms-no-hotel-page { display: grid; min-height: calc(100vh - var(--fs-topbar-height) - 90px); place-items: center; }
.cms-no-hotel-card { width: min(620px, 100%); padding: clamp(30px, 5vw, 52px); border: 1px solid var(--fs-border); border-radius: var(--fs-radius-lg); background: var(--fs-surface); box-shadow: var(--fs-shadow); text-align: center; }
.cms-no-hotel-icon { display: grid; width: 62px; height: 62px; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 24px; }
.cms-no-hotel-card .cms-kicker { margin-bottom: 8px; }
.cms-no-hotel-card h1 { margin-bottom: 10px; font-size: 28px; }
.cms-no-hotel-card p { max-width: 500px; margin: 0 auto; color: var(--fs-text-muted); }
.cms-no-hotel-actions { display: flex; justify-content: center; margin-top: 24px; }

/* Selected-property dashboard */
.cms-dashboard { display: grid; gap: 28px; }
.cms-dashboard-hero { display: flex; min-height: 190px; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(26px, 4vw, 44px); overflow: hidden; border: 1px solid #cdebd6; border-radius: var(--fs-radius-lg); background: linear-gradient(135deg, #fff 0%, #effbf3 62%, #dff7e7 100%); box-shadow: var(--fs-shadow); }
.cms-dashboard-hero h1 { margin: 5px 0 10px; font-size: clamp(28px, 3.5vw, 42px); }
.cms-dashboard-hero p { max-width: 680px; margin: 0; color: var(--fs-text-muted); font-size: 16px; }
.cms-dashboard-hero-icon { display: grid; width: 92px; height: 92px; flex: 0 0 92px; place-items: center; border: 1px solid rgba(37,169,76,.18); border-radius: 24px 24px 24px 7px; background: rgba(255,255,255,.82); color: var(--fs-green-dark); font-size: 36px; box-shadow: 0 12px 32px rgba(37,169,76,.12); }
.cms-dashboard-heading { margin-bottom: 14px; }
.cms-dashboard-heading h2 { margin: 0 0 3px; font-size: 20px; }
.cms-dashboard-heading p { margin: 0; color: var(--fs-text-muted); }
.cms-dashboard-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
.cms-dashboard-stats > a { display: flex; min-width: 0; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); color: var(--fs-text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cms-dashboard-stats > a:hover { border-color: #acd9b9; color: var(--fs-text); box-shadow: 0 8px 20px rgba(18,32,22,.07); transform: translateY(-1px); }
.cms-dashboard-stats > a > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); }
.cms-dashboard-stats span { display: flex; min-width: 0; flex-direction: column; }
.cms-dashboard-stats strong { font-size: 22px; line-height: 1.1; }
.cms-dashboard-stats small { margin-top: 3px; overflow: hidden; color: var(--fs-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.cms-dashboard-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cms-dashboard-links > a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 92px; padding: 17px 18px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); color: var(--fs-text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cms-dashboard-links > a:hover { border-color: #acd9b9; color: var(--fs-text); box-shadow: 0 8px 22px rgba(18,32,22,.07); transform: translateY(-1px); }
.cms-dashboard-links > a > i:first-child { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--fs-radius-sm); background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 16px; }
.cms-dashboard-links > a > i:last-child { color: #9aa59d; font-size: 12px; }
.cms-dashboard-links span { display: flex; min-width: 0; flex-direction: column; }
.cms-dashboard-links strong { font-size: 15px; }
.cms-dashboard-links small { margin-top: 3px; color: var(--fs-text-muted); line-height: 1.4; }
.cms-dashboard-footer { padding-top: 2px; color: var(--fs-text-muted); font-size: 12px; text-align: right; }

/* Membership overview */
.cms-members-page { display: grid; gap: 20px; }
.cms-members-page .cms-module-header { margin-bottom: 0; }
.cms-membership-summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 22px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: linear-gradient(135deg, var(--fs-surface) 0%, #f4fbf6 100%); box-shadow: 0 4px 18px rgba(18,32,22,.05); }
.cms-membership-summary-heading { display: flex; min-width: 220px; align-items: center; gap: 14px; }
.cms-membership-summary-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 18px; }
.cms-membership-summary-heading h2 { margin: 2px 0 0; font-size: 21px; }
.cms-membership-summary-details { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; }
.cms-membership-summary-details > div { min-width: 145px; padding: 10px 13px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); background: rgba(255,255,255,.88); }
.cms-membership-summary-details dt { margin-bottom: 4px; color: var(--fs-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cms-membership-summary-details dd { margin: 0; font-weight: 700; }
.cms-membership-levels { padding: 20px; }
.cms-membership-table-wrap { max-height: calc(100vh - 390px); min-height: 220px; overflow: auto; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); }
.cms-membership-table { min-width: 700px; margin: 0; overflow: visible; border: 0; border-radius: 0; }
.cms-membership-table thead th { position: sticky; z-index: 3; top: 0; padding: 11px 14px !important; background: #f1f5f2; box-shadow: inset 0 -1px 0 var(--fs-border-strong); }
.cms-membership-table td { padding: 11px 14px !important; background: var(--fs-surface); vertical-align: middle; }
.cms-membership-table tbody tr:hover td { background: #fbfdfb; }
.cms-membership-table .cms-row-actions { width: 1%; }
.cms-membership-blocked { background: var(--fs-danger-soft); color: var(--fs-danger-dark); }

/* Membership subpage editors */
.cms-member-token-panel { width: 100%; margin: 16px 0 4px; overflow: hidden; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface-muted); }
.cms-member-token-panel > summary { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 13px; color: var(--fs-text); font-weight: 700; cursor: pointer; list-style: none; }
.cms-member-token-panel > summary::-webkit-details-marker { display: none; }
.cms-member-token-panel > summary span { display: flex; align-items: center; gap: 8px; }
.cms-member-token-panel > summary span i { color: var(--fs-green-dark); }
.cms-member-token-panel[open] > summary > i { transform: rotate(180deg); }
.cms-member-token-content { padding: 0 13px 14px; border-top: 1px solid var(--fs-border); }
.cms-member-token-content p { margin: 12px 0; color: var(--fs-text-muted); font-size: 12px; }
.cms-member-token-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.cms-member-token-grid button { min-height: 36px; padding: 7px 9px; border: 1px solid var(--fs-border-strong); border-radius: var(--fs-radius-sm); background: #fff; color: var(--fs-text); font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.cms-member-token-grid button:hover { border-color: var(--fs-green-dark); background: var(--fs-green-soft); }
.cms-member-editor-page { display: grid; gap: 18px; }
.cms-member-editor-page .cms-module-header { margin-bottom: 0; }
.cms-member-card { padding: 20px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); }
.cms-member-card-heading { margin-bottom: 16px; }
.cms-member-card-heading h2 { margin: 0 0 3px; font-size: 19px; }
.cms-member-card-heading p { margin: 0; color: var(--fs-text-muted); }
.cms-member-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cms-member-field { display: grid; gap: 6px; }
.cms-member-field--wide { grid-column: 1 / -1; }
.cms-member-field label { font-size: 13px; font-weight: 700; }
.cms-member-field input, .cms-member-field select, .cms-member-field textarea { width: 100%; }
.cms-member-field small { color: var(--fs-text-muted); font-size: 12px; }
.cms-member-field--compact { width: min(360px, 100%); }
.cms-member-action-form .cms-member-form-grid { grid-template-columns: 1fr; }
.cms-member-action-form .cms-member-field--wide input, .cms-member-action-form .cms-member-field--wide textarea { max-width: none; }
.cms-member-message { min-height: 280px !important; resize: vertical !important; }
.cms-member-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); background: var(--fs-surface-muted); cursor: pointer; }
.cms-member-toggle input { flex: 0 0 auto; margin-top: 2px; }
.cms-member-toggle span { display: flex; flex-direction: column; }
.cms-member-toggle small { margin-top: 2px; color: var(--fs-text-muted); font-size: 12px; }
.cms-member-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fs-border); }
.cms-member-section { padding: 20px; }
.cms-member-table { margin: 0; }
.cms-member-table th { white-space: nowrap; }
.cms-member-table td { vertical-align: middle; }
.cms-member-add-row { display: flex; align-items: flex-end; gap: 12px; }
.cms-member-add-row .cms-member-field { width: min(360px, 100%); }
.cms-member-add-row button { flex: 0 0 auto; }
.cms-member-inline-form { margin: 0; padding: 0; border: 0; background: transparent; }
.cms-member-conditional-panel { margin-top: 16px; padding: 15px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); background: var(--fs-surface-muted); color: var(--fs-text-muted); }
.cms-member-conditional-panel[hidden] { display: none; }
.cms-member-conditional-panel .cms-member-form-grid { margin-top: 0; }

/* Shared destructive confirmations */
.cms-text-muted { color: var(--fs-text-muted); font-size: 12px; }
.cms-delete-page { max-width: 980px; }
.cms-delete-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 24px; border: 1px solid #efc1bd; border-radius: var(--fs-radius); background: #fff; }
.cms-delete-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: var(--fs-danger-soft); color: var(--fs-danger-dark); font-size: 21px; }
.cms-delete-content h2 { margin: 1px 0 5px; font-size: 22px; }
.cms-delete-content p { max-width: 680px; color: var(--fs-text-muted); }
.cms-delete-identity { margin-top: 0; color: var(--fs-text) !important; font-weight: 700; }
.cms-delete-dependencies { display: flex; gap: 12px; margin: 18px 0 0; }
.cms-delete-dependencies > div { min-width: 150px; padding: 12px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); background: var(--fs-surface-muted); }
.cms-delete-dependencies dt { color: var(--fs-text-muted); font-size: 12px; font-weight: 700; }
.cms-delete-dependencies dd { margin: 4px 0 0; color: var(--fs-text); font-size: 22px; font-weight: 800; }
.cms-delete-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--fs-border); }

/* Group administration */
.cms-group-editor { display: grid; gap: 18px; }
.cms-group-editor .cms-module-header { margin-bottom: 0; }
.cms-group-settings, .cms-group-assignment-card { padding: 20px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); }
.cms-group-settings-heading { margin-bottom: 16px; }
.cms-group-settings-heading h2, .cms-group-assignment-card h2 { margin: 0 0 3px; font-size: 19px; }
.cms-group-settings-heading p, .cms-group-assignment-card .cms-section-heading p { margin: 0; color: var(--fs-text-muted); }
.cms-group-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 16px; }
.cms-group-field { display: grid; align-content: start; gap: 6px; }
.cms-group-field label { font-size: 13px; font-weight: 700; }
.cms-group-field input, .cms-group-field select { width: 100%; }
.cms-group-field small { color: var(--fs-text-muted); font-size: 12px; }
.cms-group-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fs-border); }
.cms-count-badge { display: inline-grid; min-width: 27px; height: 27px; margin-left: 5px; padding: 0 8px; place-items: center; border-radius: 999px; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 12px; vertical-align: 2px; }
.cms-group-assignment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.cms-group-assignment-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); background: var(--fs-surface-muted); color: var(--fs-text); }
.cms-group-assignment-row > div { min-width: 0; }
.cms-group-assignment-row strong, .cms-group-assignment-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-group-assignment-row small { margin-top: 2px; color: var(--fs-text-muted); }
.cms-group-assignment-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--fs-green-soft); color: var(--fs-green-dark); }
.cms-group-assignment-link { grid-template-columns: 36px minmax(0, 1fr) auto; text-decoration: none; }
.cms-group-assignment-link:hover { border-color: var(--fs-green); background: #f4fbf6; }
.cms-group-assignment-link > i { color: var(--fs-text-muted); }

/* Data upload guidance */
.cms-upload-page { max-width: 1050px; }
.cms-upload-card { overflow: hidden; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); }
.cms-upload-requirements { padding: 22px; }
.cms-upload-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cms-upload-heading h2 { margin: 0 0 3px; font-size: 20px; }
.cms-upload-heading p { margin: 0; color: var(--fs-text-muted); }
.cms-upload-types { display: flex; gap: 6px; }
.cms-upload-types span { padding: 5px 9px; border-radius: 999px; background: var(--fs-green-soft); color: var(--fs-green-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.cms-upload-columns { overflow: hidden; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); }
.cms-upload-column-head, .cms-upload-column-row { display: grid; grid-template-columns: minmax(155px, .8fr) minmax(130px, .65fr) minmax(240px, 1.55fr); gap: 12px; align-items: center; padding: 10px 12px; }
.cms-upload-column-head { background: #eef3ef; color: var(--fs-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.cms-upload-column-row { min-height: 48px; border-top: 1px solid var(--fs-border); }
.cms-upload-column-row code, .cms-upload-example code { color: var(--fs-green-dark); font-weight: 800; }
.cms-upload-column-row .is-required { color: var(--fs-danger-dark); font-weight: 700; }
.cms-upload-example { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 12px; border-radius: var(--fs-radius-sm); background: var(--fs-surface-muted); }
.cms-upload-example strong { flex: 0 0 auto; font-size: 12px; }
.cms-upload-example code { overflow-x: auto; white-space: nowrap; }
.cms-upload-warning { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid #efd89d; border-radius: var(--fs-radius-sm); background: #fff9e8; color: #6d5413; }
.cms-upload-warning i { margin-top: 2px; }
.cms-upload-download { margin-top: 14px; }
.cms-upload-picker { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(250px, 1.4fr) auto; align-items: center; gap: 14px; padding: 18px 22px; border-top: 1px solid var(--fs-border); background: var(--fs-surface-muted); }
.cms-upload-picker label strong, .cms-upload-picker label span { display: block; }
.cms-upload-picker label span { margin-top: 2px; color: var(--fs-text-muted); font-size: 12px; }
.cms-upload-picker input[type="file"] { width: 100%; padding: 9px; border: 1px solid var(--fs-border-strong); border-radius: var(--fs-radius-sm); background: #fff; }

/* Feature viewing accordions */
.cms-accordion-list { display: grid; gap: 10px; }
.cms-accordion { border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); overflow: hidden; }
.cms-accordion summary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; padding: 13px 18px; color: var(--fs-text); font-size: 15px; font-weight: 800; cursor: pointer; list-style: none; }
.cms-accordion summary::-webkit-details-marker { display: none; }
.cms-accordion summary:hover { background: var(--fs-surface-muted); }
.cms-accordion summary i { color: #7c8880; transition: transform .18s ease; }
.cms-accordion[open] summary { border-bottom: 1px solid var(--fs-border); }
.cms-accordion[open] summary i { color: var(--fs-green-dark); transform: rotate(180deg); }
.cms-accordion-content { padding: 18px; }
.cms-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cms-feature-grid + .cms-feature-grid { margin-top: 10px; }
.cms-feature-value { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-sm); background: var(--fs-surface); color: var(--fs-text); transition: border-color .15s ease, background-color .15s ease; }
.cms-feature-value > i { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 50%; font-size: 11px; }
.cms-feature-value.is-enabled { border-color: #78d991; background: #e4f9ea; color: #125d2a; }
.cms-feature-value.is-enabled > i { background: #20b64b; color: #fff; box-shadow: 0 0 0 3px rgba(32,182,75,.12); }
.cms-feature-value.is-disabled { border-color: #dfe4e1; background: #f6f8f7; color: #657169; }
.cms-feature-value.is-disabled > i { background: #fde8e8; color: #d43b3b; box-shadow: inset 0 0 0 1px #f5caca; }
.cms-feature-value.is-info { border-color: #d9e1dc; background: #f8faf9; }
.cms-feature-value.is-info > i { background: #e8f4ec; color: var(--fs-green-dark); }
.cms-feature-info { display: flex; min-width: 0; flex-direction: column; line-height: 1.25; }
.cms-feature-info small { margin-bottom: 2px; color: var(--fs-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cms-feature-info strong { overflow-wrap: anywhere; color: var(--fs-text); font-size: 14px; }

/* Features edit form: shared fields inside the existing accordion cards. */
.cms-features-form input, .cms-features-form select, .cms-features-form summary { scroll-margin-top: calc(var(--fs-topbar-height) + 40px); }
.cms-features-form .cms-feature-grid { align-items: start; gap: 16px 20px; }
.cms-features-form .cms-feature-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.cms-features-form .cms-feature-field > label { margin: 0; font-size: 14px; font-weight: 600; }
.cms-features-form .cms-feature-field > input,
.cms-features-form .cms-feature-field > select { width: 100%; min-width: 0; margin: 0; }
.cms-features-form .cms-feature-checkbox { display: flex; min-width: 0; min-height: 44px; align-items: flex-start; gap: 10px; padding: 10px 0; }
.cms-features-form .cms-feature-checkbox > input { position: static; flex: 0 0 18px; margin: 2px 0 0; }
.cms-features-form .cms-feature-checkbox > label { margin: 0; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; cursor: pointer; }
.cms-features-form .cms-feature-field > label { overflow-wrap: anywhere; }
.cms-features-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.cms-features-actions > button { flex: 0 1 12em; }

/* Rooms */
.cms-actions-menu { position: relative; }
.cms-actions-menu > summary { list-style: none; }
.cms-actions-menu > summary::-webkit-details-marker { display: none; }
.cms-actions-popover { position: absolute; z-index: 35; top: calc(100% + 7px); right: 0; display: grid; width: 340px; padding: 7px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); box-shadow: var(--fs-shadow); }
.cms-actions-popover > a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--fs-radius-sm); color: var(--fs-text); text-decoration: none; }
.cms-actions-popover > a:hover { background: var(--fs-surface-muted); }
.cms-actions-popover > a > i { width: 22px; color: var(--fs-green-dark); text-align: center; }
.cms-actions-popover a span { display: flex; flex-direction: column; }
.cms-actions-popover a small { color: var(--fs-text-muted); font-size: 11px; }
.cms-action-submenu { margin-top: 5px; padding: 9px 10px; border-top: 1px solid var(--fs-border); }
.cms-action-submenu > span { display: block; margin-bottom: 7px; color: var(--fs-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cms-action-submenu > a { display: block; padding: 5px 0 5px 24px; color: var(--fs-text); font-size: 13px; }
.cms-summary-strip { display: flex; gap: 12px; margin-bottom: 20px; }
.cms-summary-strip > div { display: flex; min-width: 180px; align-items: baseline; justify-content: space-between; gap: 22px; padding: 13px 16px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); }
.cms-summary-strip span { color: var(--fs-text-muted); font-size: 12px; font-weight: 700; }
.cms-summary-strip strong { font-size: 21px; }
.cms-module-section { padding: 20px; }
.cms-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.cms-section-heading h2 { margin-bottom: 3px; font-size: 20px; }
.cms-tabs { display: flex; gap: 3px; margin-bottom: 14px; border-bottom: 1px solid var(--fs-border); }
.cms-tabs button, .cms-tabs a { min-height: 39px; padding: 8px 13px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--fs-text-muted) !important; font-weight: 700; text-decoration: none; }
.cms-tabs .is-active { border-bottom-color: var(--fs-green-dark) !important; color: var(--fs-text) !important; }
.cms-room-list { display: grid; gap: 10px; }
.cms-room-item { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: center; padding: 14px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); }
.cms-room-copy { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cms-room-title { display: flex; align-items: center; gap: 12px; }
.cms-room-title h3 { margin: 0; font-size: 16px; }
.cms-room-item img { width: 100%; max-height: 120px; object-fit: cover; }

/* Rate plan bulk editor */
.cms-package-form { padding-bottom: 12px; }
.cms-package-table-wrap { max-height: calc(100vh - 245px); min-height: 320px; overflow: auto; border: 1px solid var(--fs-border); border-radius: var(--fs-radius) var(--fs-radius) 0 0; background: var(--fs-surface); }
.cms-package-table { min-width: 1120px; margin: 0; overflow: visible; border: 0; border-radius: 0; }
.cms-package-table thead th { position: sticky; z-index: 5; top: 0; padding: 11px 12px !important; background: #f1f5f2; box-shadow: inset 0 -1px 0 var(--fs-border-strong); }
.cms-package-table td { padding: 9px 10px !important; background: var(--fs-surface); }
.cms-package-code-column { width: 180px; min-width: 180px; }
.cms-package-description-column { width: 340px; min-width: 340px; }
.cms-package-option-column { width: 105px; min-width: 105px; text-align: center; }
.cms-package-option-column .fa-check { color: var(--fs-green-dark); }
.cms-package-table input[type="text"] { min-width: 0; width: 100%; }
.cms-package-table .cms-row-actions { min-width: 105px; }

/* Analysis editor */
.cms-analysis-form { padding-bottom: 12px; }
.cms-analysis-page .cms-tabs { margin-bottom: 16px; }
.cms-analysis-mappings-card { margin-bottom: 16px; padding: 18px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); }
.cms-analysis-mappings-heading { margin-bottom: 14px; }
.cms-analysis-mappings-heading h2 { margin: 0 0 3px; font-size: 18px; }
.cms-analysis-mappings-heading p { margin: 0; color: var(--fs-text-muted); }
.cms-analysis-mappings { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 16px; max-width: 820px; }
.cms-analysis-mapping-field { display: grid; gap: 6px; }
.cms-analysis-mapping-field label { font-size: 13px; font-weight: 700; }
.cms-analysis-mapping-field select { width: 100%; }
.cms-analysis-table-wrap { max-height: calc(100vh - 325px); min-height: 360px; overflow: auto; border: 1px solid var(--fs-border); border-radius: var(--fs-radius) var(--fs-radius) 0 0; background: var(--fs-surface); }
.cms-analysis-table { min-width: 1280px; width: 100%; margin: 0; overflow: visible; border: 0; border-collapse: separate; border-spacing: 0; border-radius: 0; table-layout: fixed; }
.cms-analysis-table th, .cms-analysis-table td { height: 54px; padding: 8px 10px !important; border-bottom: 1px solid var(--fs-border); background: var(--fs-surface); vertical-align: middle; }
.cms-analysis-table thead th { position: sticky; z-index: 5; top: 0; height: 42px; background: #eef3ef; color: #445047; font-size: 11px; letter-spacing: .025em; text-align: center; text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--fs-border-strong); }
.cms-analysis-table tbody tr:nth-child(even) td { background: #fafcfb; }
.cms-analysis-table tbody tr:hover td { background: #f3f8f4; }
.cms-analysis-col-code { width: 80px; }
.cms-analysis-col-group { width: 90px; }
.cms-analysis-col-description { width: 210px; }
.cms-analysis-col-accommodation { width: 105px; }
.cms-analysis-col-breakfast { width: 90px; }
.cms-analysis-col-dinner { width: 80px; }
.cms-analysis-col-late { width: 105px; }
.cms-analysis-col-parking { width: 85px; }
.cms-analysis-col-payment, .cms-analysis-col-preauth { width: 130px; }
.cms-analysis-col-guest { width: 105px; }
.cms-analysis-col-days { width: 90px; }
.cms-analysis-table th:nth-child(1), .cms-analysis-table td:nth-child(1), .cms-analysis-table th:nth-child(2), .cms-analysis-table td:nth-child(2), .cms-analysis-table th:nth-child(3), .cms-analysis-table td:nth-child(3) { text-align: left; }
.cms-analysis-table th:nth-child(3), .cms-analysis-table td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.cms-analysis-table th:nth-child(1), .cms-analysis-table td:nth-child(1), .cms-analysis-table th:nth-child(2), .cms-analysis-table td:nth-child(2), .cms-analysis-table th:nth-child(3), .cms-analysis-table td:nth-child(3) { position: sticky; }
.cms-analysis-table th:nth-child(1), .cms-analysis-table td:nth-child(1) { left: 0; }
.cms-analysis-table th:nth-child(2), .cms-analysis-table td:nth-child(2) { left: 80px; }
.cms-analysis-table th:nth-child(3), .cms-analysis-table td:nth-child(3) { left: 170px; }
.cms-analysis-table thead th:nth-child(-n+3) { z-index: 8; background: #e8efea; }
.cms-analysis-table tbody td:nth-child(-n+3) { z-index: 2; }
.cms-analysis-table tbody tr:nth-child(even) td:nth-child(-n+3) { background: #fafcfb; }
.cms-analysis-table tbody tr:hover td:nth-child(-n+3) { background: #f3f8f4; }
.cms-analysis-checkbox-cell, .cms-analysis-state, .cms-analysis-setting { text-align: center; }
.cms-analysis-checkbox-cell .w3-check { display: block; margin: 0 auto; }
.cms-analysis-table td select { width: 100%; min-width: 0; height: 40px; padding: 7px 28px 7px 9px; }
.cms-analysis-table td input[type="number"] { width: 100%; min-width: 0; height: 40px; }
.cms-analysis-state i { display: inline-grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; font-size: 11px; }
.cms-analysis-state .is-enabled { background: var(--fs-green-soft); color: var(--fs-green-dark); }
.cms-analysis-state .is-disabled { background: #eef0ef; color: #8a948d; }
.cms-analysis-setting { color: #445047; font-weight: 600; }
.cms-product-table-wrap { max-height: calc(100vh - 270px); min-height: 320px; overflow: auto; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); }
.cms-product-table { min-width: 720px; width: 100%; margin: 0; overflow: visible; border: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cms-product-table th, .cms-product-table td { height: 54px; padding: 9px 12px !important; border-bottom: 1px solid var(--fs-border); background: var(--fs-surface); vertical-align: middle; }
.cms-product-table thead th { position: sticky; z-index: 4; top: 0; height: 42px; background: #eef3ef; color: #445047; font-size: 11px; letter-spacing: .025em; text-align: left; text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--fs-border-strong); }
.cms-product-table tbody tr:nth-child(even) td { background: #fafcfb; }
.cms-product-table tbody tr:hover td { background: #f3f8f4; }
.cms-product-col-code { width: 18%; }
.cms-product-col-group { width: 20%; }
.cms-product-col-description { width: auto; }
.cms-product-col-usage { width: 160px; }
.cms-product-table td:nth-child(1), .cms-product-table td:nth-child(2), .cms-product-table td:nth-child(3) { overflow-wrap: anywhere; }
.cms-product-usage { display: inline-flex; min-height: 28px; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cms-product-usage.is-accommodation { background: #e1f5e7; color: #156b32; }
.cms-product-usage.is-upsell { background: #e4efff; color: #245b9f; }
.cms-product-usage.is-deposit { background: #fff1cf; color: #7b5810; }
.cms-product-usage.is-other { background: #eef0ef; color: #626d66; }
.cms-sticky-actions { position: sticky; z-index: 8; bottom: 0; display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 16px; border: 1px solid var(--fs-border-strong); border-top: 0; border-radius: 0 0 var(--fs-radius) var(--fs-radius); background: rgba(255,255,255,.97); box-shadow: 0 -8px 20px rgba(18,32,22,.06); backdrop-filter: blur(8px); }
.cms-sticky-actions > span { color: var(--fs-text-muted); font-size: 12px; }
.cms-sticky-actions > div { display: flex; gap: 8px; }

@media (max-width: 1050px) {
  :root { --fs-sidebar-width: 224px; }
  body.cms-app { padding-right: 20px; padding-left: calc(var(--fs-sidebar-width) + 20px); }
  .cms-auth-main { gap: 60px; }
  .cms-auth-intro h1 { font-size: 40px; }
}

@media (max-width: 800px) {
  body.cms-app { padding: calc(var(--fs-topbar-height) + 18px) 16px 28px; }
  .cms-sidebar { width: min(290px, 86vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 16px 0 40px rgba(0,0,0,.2); }
  body.cms-nav-open { overflow: hidden; }
  body.cms-nav-open .cms-sidebar { transform: translateX(0); }
  .cms-sidebar-backdrop { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(5,10,7,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  body.cms-nav-open .cms-sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .cms-topbar { left: 0; padding-left: 68px; }
  .cms-menu-toggle { position: fixed; top: 19px; left: 16px; z-index: 60; display: grid; width: 42px; height: 42px; min-height: 42px; place-items: center; padding: 0 !important; border-color: var(--fs-border) !important; background: #fff !important; color: var(--fs-text) !important; }
  body.cms-nav-open .cms-menu-toggle { left: min(232px, calc(86vw - 58px)); }
  .cms-app [style*="width:"] { max-width: 100% !important; }
  .cms-app .w3-col[style*="width:"] { width: 100% !important; }
  .cms-app .cms-pms-section-header > .w3-col { width: auto !important; }
  .cms-app .w3-half, .cms-app .w3-third, .cms-app .w3-quarter, .cms-app .w3-twothird, .cms-app .w3-threequarter { width: 100% !important; }
  .cms-app table { display: block; overflow-x: auto; white-space: nowrap; }
  .cms-module-header, .cms-section-heading { align-items: flex-start; }
  .cms-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-analysis-mappings { grid-template-columns: 1fr; }
  .cms-analysis-table { display: table !important; }
  .cms-analysis-table td:nth-child(2), .cms-analysis-table td:nth-child(3) { position: static; }
  .cms-analysis-table th:nth-child(2), .cms-analysis-table th:nth-child(3) { left: auto; z-index: 5; background: #eef3ef; }
  .cms-hotel-welcome { grid-template-columns: 1fr; }
  .cms-dashboard-links { grid-template-columns: 1fr; }
  .cms-membership-summary { align-items: flex-start; flex-direction: column; }
  .cms-membership-summary-details { width: 100%; justify-content: flex-start; }
  .cms-membership-summary-details > div { flex: 1 1 145px; }
  .cms-member-form-grid { grid-template-columns: 1fr; }
  .cms-member-field--wide { grid-column: auto; }
  .cms-analysis-table-wrap { max-height: calc(100vh - 300px); }
  .cms-product-table-wrap { max-height: calc(100vh - 290px); }
  .cms-room-item { grid-template-columns: minmax(0, 1fr) 160px; }

  .cms-auth { background: var(--fs-bg); }
  .cms-auth::before { inset: 0 0 auto; width: 100%; height: 345px; background: var(--fs-sidebar); }
  .cms-auth-brand { width: min(620px, calc(100% - 40px)); padding: 22px 0; }
  .cms-auth-main { width: min(620px, calc(100% - 40px)); grid-template-columns: 1fr; gap: 26px; padding: 35px 0 45px; }
  .cms-auth-intro { max-width: none; }
  .cms-auth-intro h1 { max-width: 510px; margin-bottom: 12px; font-size: 32px; }
  .cms-auth-intro > p { margin-bottom: 0; font-size: 15px; }
  .cms-auth-points { display: none; }
  .cms-login-card { max-width: none; justify-self: stretch; }
  .cms-auth-footer { width: calc(100% - 40px); text-align: center; }
}

@media (max-width: 480px) {
  :root { --fs-topbar-height: 70px; }
  body.cms-app { padding-right: 10px; padding-left: 10px; }
  .cms-topbar { padding-right: 12px; padding-left: 64px; }
  .cms-topbar-eyebrow { display: none; }
  .cms-topbar strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
  .cms-back-link { min-height: 34px; margin-left: 10px; padding: 6px 9px; }
  .cms-menu-toggle { top: 14px; left: 12px; }
  .w3-container { padding-right: 10px; padding-left: 10px; }
  .w3-padding { padding: 11px 10px !important; }
  .w3-btn, .w3-button, button { min-height: 42px; }
  .cms-app .w3-container > .w3-row.w3-light-gray.w3-border,
  .cms-app .w3-container > .w3-row.w3-light-grey.w3-border { flex-wrap: wrap; gap: 12px; align-items: center; }
  .cms-app .w3-container > .w3-row.w3-light-gray.w3-border h3,
  .cms-app .w3-container > .w3-row.w3-light-grey.w3-border h3 { flex: 1 1 180px; }
  .cms-auth-main, .cms-auth-brand { width: calc(100% - 28px); }
  .cms-auth-main { padding-top: 25px; }
  .cms-auth-intro h1 { font-size: 27px; }
  .cms-login-card { padding: 25px 20px; border-radius: 12px; }
  .cms-login-heading h2 { font-size: 23px; }
  .cms-activation-panel { padding: 20px 16px; }
  .cms-activation-copy-row, .cms-activation-steps { grid-template-columns: 1fr; }
  .cms-activation-copy-row .w3-button { width: 100%; }
  .cms-activation-actions { flex-direction: column; }
  .cms-activation-actions .w3-button { justify-content: center; }
  .cms-module-header, .cms-section-heading { flex-direction: column; gap: 14px; }
  .cms-module-header > .w3-button, .cms-section-heading > .w3-button { width: 100%; justify-content: center; }
  .cms-header-actions { width: 100%; flex-wrap: wrap; }
  .cms-header-actions > .w3-button { flex: 1 1 auto; }
  .cms-feature-grid { grid-template-columns: 1fr; }
  .cms-summary-strip { flex-direction: column; }
  .cms-summary-strip > div { width: 100%; }
  .cms-module-section { padding: 14px; }
  .cms-hotel-selection-card { padding: 14px; }
  .cms-hotel-picker, .cms-form-actions { padding-right: 0; padding-left: 0; }
  .cms-dashboard { gap: 22px; }
  .cms-dashboard-hero { min-height: 0; padding: 24px 20px; }
  .cms-dashboard-hero-icon { display: none; }
  .cms-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-dashboard-links > a { min-height: 82px; padding: 14px; }
  .cms-dashboard-footer { text-align: left; }
  .cms-membership-levels { padding: 14px; }
  .cms-membership-table-wrap { max-height: calc(100vh - 340px); }
  .cms-member-token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-member-add-row { align-items: stretch; flex-direction: column; }
  .cms-member-add-row .cms-member-field { width: 100%; }
  .cms-delete-card { grid-template-columns: 1fr; padding: 18px; }
  .cms-delete-dependencies { flex-direction: column; }
  .cms-delete-actions { align-items: stretch; flex-direction: column-reverse; }
  .cms-group-form-grid, .cms-group-assignment-list { grid-template-columns: 1fr; }
  .cms-group-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .cms-upload-heading, .cms-upload-example { align-items: flex-start; flex-direction: column; }
  .cms-upload-column-head { display: none; }
  .cms-upload-column-row { grid-template-columns: 1fr; gap: 4px; }
  .cms-upload-picker { grid-template-columns: 1fr; }
  .cms-room-item { grid-template-columns: 1fr; }
  .cms-room-copy, .cms-room-title { align-items: flex-start; flex-direction: column; }
  .cms-room-item img { max-height: 180px; }
  .cms-actions-popover { position: fixed; top: 78px; right: 12px; left: 12px; width: auto; max-height: calc(100vh - 100px); overflow-y: auto; }
  .cms-sticky-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .cms-sticky-actions > div { justify-content: flex-end; }
  .cms-sticky-actions > span { display: none; }
}

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