/* Motel Now — BACKOFFICE. GERADO a partir do Design System (design-system/tokens.json + components.css + admin.css).
   Não edite à mão: altere design-system/ e rode node design-system/build-admin-css.mjs. O front-office usa mn.css. */

:root,
[data-theme="noite"] {
  color-scheme: dark;
  --bg: #0e0c12;
  --surface: #16131c;
  --surface-raised: #1f1b27;
  --surface-sunken: #0a090d;
  --line: #2e2839;
  --line-strong: #6f6680;
  --ink: #f5f2f9;
  --ink-muted: #b6aec2;
  --ink-subtle: #958da3;
  --brand: #30cce5;
  --brand-hover: #62dbee;
  --on-brand: #04262d;
  --brand-text: #5ad6ea;
  --brand-soft: #0d2f36;
  --accent: #fe7365;
  --on-accent: #2b0703;
  --accent-text: #ff948a;
  --accent-soft: #3a1714;
  --success: #7fdca2;
  --success-soft: #10301f;
  --warning: #f6c04e;
  --warning-soft: #33270b;
  --danger: #ff8078;
  --danger-soft: #3a1414;
  --focus-ring: #ffffff;
  --scrim: rgba(5, 4, 8, 0.72);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55);
}
[data-theme="dia"] {
  color-scheme: light;
  --bg: #f7f5fa;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f0edf4;
  --line: #e6e1ec;
  --line-strong: #8c8499;
  --ink: #17141e;
  --ink-muted: #595266;
  --ink-subtle: #6b647a;
  --brand: #30cce5;
  --brand-hover: #1fb8d1;
  --on-brand: #04262d;
  --brand-text: #0a7386;
  --brand-soft: #e0f7fb;
  --accent: #fe7365;
  --on-accent: #2b0703;
  --accent-text: #b3362a;
  --accent-soft: #ffebe8;
  --success: #126f35;
  --success-soft: #e3f6ea;
  --warning: #8a5300;
  --warning-soft: #fff3d6;
  --danger: #c02626;
  --danger-soft: #fde8e8;
  --focus-ring: #17141e;
  --scrim: rgba(23, 20, 30, 0.48);
  --shadow-card: 0 1px 2px rgba(23, 20, 30, 0.06), 0 4px 16px rgba(23, 20, 30, 0.06);
  --shadow-sheet: 0 -8px 32px rgba(23, 20, 30, 0.12);
  --shadow-pop: 0 12px 32px rgba(23, 20, 30, 0.16);
}
:root {
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --control-sm: 36px;
  --control-md: 48px;
  --control-lg: 56px;
  --tap-min: 44px;
  --topbar-h: 56px;
  --content-max: 1120px;
  --form-max: 440px;
  --checkout-aside: 380px;
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* Motel Now — front-office. Classes mn-*; valores sempre via tokens (tokens.css). */

/* ---------- base ---------- */
.mn, .mn-root { font-family: var(--font-text); font-size: 16px; line-height: 24px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.mn *, .mn-root * { box-sizing: border-box; }
.mn-ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.mn-ico svg { width: 100%; height: 100%; }
.mn-ico.mn-ico-sm { width: 16px; height: 16px; }
.mn-ico.mn-ico-lg { width: 24px; height: 24px; }
.mn-num { font-variant-numeric: tabular-nums; }
.mn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mn-focus:focus-visible, .mn :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* texto */
.mn-t-display-xl { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.mn-t-display-l { font-family: var(--font-display); font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.mn-t-title { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.mn-t-heading { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; margin: 0; }
.mn-t-subhead { font-size: 17px; line-height: 24px; font-weight: 600; margin: 0; }
.mn-t-body { font-size: 16px; line-height: 24px; margin: 0; }
.mn-t-body-s { font-size: 14px; line-height: 20px; margin: 0; }
.mn-t-label { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
.mn-t-caption { font-size: 12px; line-height: 16px; font-weight: 500; margin: 0; }
.mn-t-overline { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; color: var(--ink-muted); }
.mn-t-price-xl { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin: 0; }
.mn-t-price { font-size: 20px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.mn-t-price-s { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }
.mn-muted { color: var(--ink-muted); }
.mn-subtle { color: var(--ink-subtle); }
.mn-link { color: var(--brand-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.mn-strike { text-decoration: line-through; color: var(--ink-muted); font-weight: 500; }

/* layout */
.mn-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.mn-stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.mn-stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.mn-row { display: flex; align-items: center; gap: var(--space-2); }
.mn-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mn-divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.mn-section { padding: var(--space-6) var(--space-4); }
.mn-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.mn-pad { padding: var(--space-4); }

/* ---------- Button ---------- */
.mn-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-text); font-size: 16px; line-height: 20px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .1s; }
.mn-btn:active { transform: scale(.98); }
.mn-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mn-btn-primary { background: var(--brand); color: var(--on-brand); }
.mn-btn-primary:hover { background: var(--brand-hover); }
.mn-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.mn-btn-secondary:hover { background: var(--surface-sunken); }
.mn-btn-ghost { background: transparent; color: var(--brand-text); padding: 0 var(--space-3); }
.mn-btn-ghost:hover { background: var(--brand-soft); }
.mn-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.mn-btn-danger:hover { background: var(--danger-soft); }
.mn-btn-google { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.mn-btn-sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 14px; border-radius: var(--radius-sm); }
.mn-btn-lg { height: var(--control-lg); font-size: 17px; }
.mn-btn-block { display: flex; width: 100%; }
.mn-btn[disabled]:not(.is-loading), .mn-btn.is-disabled { background: var(--surface-sunken); color: var(--ink-subtle); border-color: var(--line); cursor: not-allowed; transform: none; }
.mn-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.mn-btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--on-brand); border-right-color: transparent; animation: mn-spin .8s linear infinite; }
@keyframes mn-spin { to { transform: rotate(360deg); } }
.mn-btn-cta { justify-content: space-between; }
.mn-btn-cta .mn-btn-cta-price { font-variant-numeric: tabular-nums; }

/* IconButton */
.mn-iconbtn { appearance: none; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; flex: none; }
.mn-iconbtn:hover { background: var(--surface-sunken); }
.mn-iconbtn-float { background: var(--surface-raised); box-shadow: var(--shadow-pop); width: 40px; height: 40px; }
.mn-iconbtn-outline { border: 1px solid var(--line-strong); width: var(--control-sm); height: var(--control-sm); }

/* ---------- TopBar ---------- */
.mn-topbar { height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-4); background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.mn-topbar-back { padding-left: var(--space-1); }
.mn-topbar-title { flex: 1; font-size: 17px; line-height: 24px; font-weight: 700; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-topbar-brand { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mn-topbar-logo { height: 28px; width: auto; display: block; }
.mn-topbar-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.mn-avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-text); display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.mn-avatar-lg { width: 64px; height: 64px; font-size: 24px; font-family: var(--font-display); }
.mn-topbar-transparent { background: transparent; border-bottom-color: transparent; position: absolute; left: 0; right: 0; }

/* ---------- SegmentedControl ---------- */
.mn-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.mn-seg-item { appearance: none; border: 0; background: transparent; color: var(--ink-muted); height: 40px; border-radius: var(--radius-pill); font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; }
.mn-seg-item[aria-pressed="true"], .mn-seg-item.is-active { background: var(--brand); color: var(--on-brand); }

/* ---------- Context pill (quando) ---------- */
.mn-when { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.mn-when-ico { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; flex: none; }
.mn-when-text { flex: 1; min-width: 0; }
.mn-when-text strong { display: block; font-size: 15px; line-height: 20px; }
.mn-when-text span { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---------- FilterChip ---------- */
.mn-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px var(--space-4); margin: 0 calc(var(--space-4) * -1); }
.mn-chips::-webkit-scrollbar { display: none; }
.mn-chip { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mn-chip[aria-pressed="true"], .mn-chip.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.mn-chip .mn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.mn-chip-count { box-sizing: border-box; min-width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-size: 12px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; padding: 0 6px; }

/* ---------- Badge ---------- */
.mn-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: 12px; line-height: 16px; font-weight: 700; background: var(--surface-sunken); color: var(--ink); white-space: nowrap; }
.mn-badge .mn-ico { width: 14px; height: 14px; }
.mn-badge-success { background: var(--success-soft); color: var(--success); }
.mn-badge-warning { background: var(--warning-soft); color: var(--warning); }
.mn-badge-danger { background: var(--danger-soft); color: var(--danger); }
.mn-badge-brand { background: var(--brand-soft); color: var(--brand-text); }
.mn-badge-promo { background: var(--accent); color: var(--on-accent); }
.mn-badge-neutral { background: var(--surface-sunken); color: var(--ink-muted); }
.mn-badge-onphoto { background: var(--scrim); color: #ffffff; backdrop-filter: blur(6px); }

/* ---------- Notice (banner) ---------- */
.mn-notice { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font-size: 14px; line-height: 20px; align-items: flex-start; }
.mn-notice > .mn-ico { margin-top: 2px; }
.mn-notice-body { flex: 1; min-width: 0; }
.mn-notice-body strong { display: block; font-size: 15px; }
.mn-notice-info > .mn-ico { color: var(--brand-text); }
.mn-notice-promo { background: var(--accent-soft); }
.mn-notice-promo > .mn-ico, .mn-notice-promo strong { color: var(--accent-text); }
.mn-notice-success { background: var(--success-soft); }
.mn-notice-success > .mn-ico { color: var(--success); }
.mn-notice-warning { background: var(--warning-soft); }
.mn-notice-warning > .mn-ico { color: var(--warning); }
.mn-notice-danger { background: var(--danger-soft); }
.mn-notice-danger > .mn-ico { color: var(--danger); }
.mn-notice-action { align-self: center; }
.mn-notice-brand { background: var(--brand); color: var(--on-brand); }
.mn-notice-brand .mn-ico, .mn-notice-brand strong { color: var(--on-brand); }

/* ---------- SuiteCard ---------- */
.mn-suite { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.mn-suite-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-sunken); overflow: hidden; }
.mn-suite-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-suite-media .mn-badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.mn-suite-media .mn-suite-count { position: absolute; bottom: var(--space-3); right: var(--space-3); }
.mn-dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.mn-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); display: block; }
.mn-dots i.is-active { background: #ffffff; width: 16px; border-radius: 3px; }
.mn-suite-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.mn-suite-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.mn-suite-name { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0; }
.mn-suite-from { font-size: 12px; color: var(--ink-muted); text-align: right; white-space: nowrap; }
.mn-suite-from b { display: block; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mn-amen { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.mn-amen span { display: inline-flex; align-items: center; gap: 5px; }
.mn-amen .mn-ico { width: 16px; height: 16px; color: var(--ink-muted); }
.mn-periods { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.mn-period-chip { appearance: none; flex: 1 0 auto; min-width: 84px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.mn-period-chip small { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-weight: 600; }
.mn-period-chip b { font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.mn-period-chip.is-promo small { color: var(--accent-text); }
.mn-suite.is-unavailable .mn-suite-media img { filter: grayscale(1) brightness(.6); }
.mn-suite.is-unavailable .mn-period-chip { color: var(--ink-subtle); border-style: dashed; cursor: not-allowed; }

/* ---------- AmenityList (detalhe) ---------- */
.mn-amenlist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: 0; padding: 0; list-style: none; }
.mn-amenlist li { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 20px; }
.mn-amenlist .mn-ico { color: var(--brand-text); }

/* ---------- FeatureIcon (atributos da suíte: IconHelper.RenderIcon(icon, "mn-feature")) ---------- */
.mn-feature { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 1; overflow: hidden; color: inherit; }
.nuu-icon.mn-feature { background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.mn-amen .mn-feature { color: var(--ink-muted); }
.mn-amenlist .mn-feature { width: 20px; height: 20px; font-size: 20px; color: var(--brand-text); }

/* ---------- PeriodOption (radio card) ---------- */
.mn-options { display: flex; flex-direction: column; gap: var(--space-2); }
.mn-option { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 64px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.mn-option input { position: absolute; opacity: 0; pointer-events: none; }
.mn-option-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center; }
.mn-option-main { flex: 1; min-width: 0; }
.mn-option-title { display: block; font-size: 16px; line-height: 22px; font-weight: 700; }
.mn-option-sub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.mn-option-price { text-align: right; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-option-price s { display: block; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.mn-option.is-selected, .mn-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.mn-option.is-selected .mn-option-radio, .mn-option:has(input:checked) .mn-option-radio { border-color: var(--brand); }
.mn-option.is-selected .mn-option-radio::after, .mn-option:has(input:checked) .mn-option-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.mn-option.is-disabled { opacity: .55; cursor: not-allowed; }
.mn-option-ico { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-sunken); display: grid; place-items: center; flex: none; }
.mn-option-ico img { width: 22px; height: 22px; }

/* ---------- DateStrip / TimeSlot ---------- */
.mn-dates { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.mn-date { appearance: none; flex: none; width: 64px; height: 72px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; cursor: pointer; }
.mn-date small { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); text-transform: capitalize; }
.mn-date b { font-size: 20px; line-height: 24px; font-variant-numeric: tabular-nums; }
.mn-date.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mn-date.is-active small { color: var(--on-brand); }
.mn-date[disabled] { color: var(--ink-subtle); border-style: dashed; cursor: not-allowed; }
.mn-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.mn-slot { appearance: none; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.mn-slot.is-active { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mn-slot[disabled] { color: var(--ink-subtle); text-decoration: line-through; border-style: dashed; cursor: not-allowed; }

/* ---------- QuantityStepper ---------- */
.mn-qty { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 3px; }
.mn-qty button { appearance: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-sunken); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.mn-qty button[disabled] { color: var(--ink-subtle); cursor: not-allowed; }
.mn-qty output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- ExtraItem ---------- */
.mn-extra { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; }
.mn-extra + .mn-extra { border-top: 1px solid var(--line); }
.mn-extra-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-sunken); flex: none; display: grid; place-items: center; color: var(--ink-muted); }
.mn-extra-main { flex: 1; min-width: 0; }
.mn-extra-name { font-size: 15px; line-height: 20px; font-weight: 700; margin: 0; }
.mn-extra-desc { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 2px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-extra-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-extra-add { appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }

/* ---------- TextField ---------- */
.mn-field { display: flex; flex-direction: column; gap: 6px; }
.mn-field-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.mn-field-label em { font-style: normal; color: var(--ink-muted); font-weight: 500; }
.mn-input-wrap { position: relative; display: flex; align-items: center; }
.mn-input { appearance: none; width: 100%; height: var(--control-md); padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 24px; }
.mn-input::placeholder { color: var(--ink-subtle); }
.mn-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.mn-input-wrap .mn-input.has-lead { padding-left: 44px; }
.mn-input-wrap .mn-input.has-trail { padding-right: 52px; }
.mn-input-lead { position: absolute; left: var(--space-3); color: var(--ink-muted); pointer-events: none; display: grid; }
.mn-input-trail { position: absolute; right: 4px; }
.mn-field-help { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.mn-field.is-error .mn-input { border-color: var(--danger); }
.mn-field.is-error .mn-field-help { color: var(--danger); display: flex; gap: 6px; align-items: flex-start; }
.mn-field.is-valid .mn-input { border-color: var(--success); }
.mn-input[disabled], .mn-input[readonly] { background: var(--surface-sunken); color: var(--ink-muted); }
.mn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.mn-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }

/* PasswordRules */
.mn-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.mn-rules li { display: flex; align-items: center; gap: 6px; }
.mn-rules .mn-ico { width: 16px; height: 16px; }
.mn-rules li.is-ok { color: var(--success); }
.mn-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mn-meter i { height: 4px; border-radius: 2px; background: var(--line); display: block; }
.mn-meter i.is-on { background: var(--success); }

/* Checkbox */
.mn-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 20px; cursor: pointer; }
.mn-check input { appearance: none; margin: 0; width: 22px; height: 22px; flex: none; border: 2px solid var(--line-strong); border-radius: 6px; background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.mn-check input:checked { background: var(--brand); border-color: var(--brand); }
.mn-check input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--on-brand); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.mn-check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Coupon */
.mn-coupon { display: flex; gap: var(--space-2); }
.mn-coupon .mn-input { text-transform: uppercase; letter-spacing: .04em; }
.mn-coupon-applied { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px dashed var(--accent); background: var(--accent-soft); }
.mn-coupon-applied b { color: var(--accent-text); letter-spacing: .04em; }

/* ---------- PriceSummary ---------- */
.mn-price { background: var(--surface-sunken); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.mn-price-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 15px; line-height: 20px; }
.mn-price-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-price-row.is-discount span:last-child { color: var(--accent-text); font-weight: 600; }
.mn-price-row.is-muted { color: var(--ink-muted); }
.mn-price-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); margin-top: var(--space-1); border-top: 1px solid var(--line); font-weight: 700; }
.mn-price-total b { font-size: 20px; font-variant-numeric: tabular-nums; }
.mn-price-now { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--brand-soft); font-weight: 700; }
.mn-price-now b { font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- CheckoutProgress ---------- */
.mn-progress { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.mn-progress-step { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-subtle); white-space: nowrap; }
.mn-progress-step i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.mn-progress-step.is-done { color: var(--ink-muted); }
.mn-progress-step.is-done i { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.mn-progress-step.is-current { color: var(--ink); }
.mn-progress-step.is-current i { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mn-progress-bar { flex: 1; height: 2px; background: var(--line); min-width: 12px; }
.mn-progress-bar.is-done { background: var(--brand); }

/* ---------- BottomBar (CTA fixa) ---------- */
.mn-bottombar { position: sticky; bottom: 0; background: var(--surface-raised); box-shadow: var(--shadow-sheet); border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--space-4); z-index: 10; }
.mn-bottombar-info { flex: 1; min-width: 0; }
.mn-bottombar-info small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.mn-bottombar-info b { display: block; font-size: 20px; line-height: 24px; font-variant-numeric: tabular-nums; }
.mn-bottombar .mn-btn { flex: none; }

/* ---------- Tabs ---------- */
.mn-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); padding: 0 var(--space-4); }
.mn-tab { appearance: none; background: none; border: 0; padding: var(--space-3) 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.mn-tab.is-active, .mn-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.mn-tab .mn-chip-count { background: var(--surface-sunken); color: var(--ink-muted); }
.mn-tab.is-active .mn-chip-count { background: var(--brand); color: var(--on-brand); }

/* ---------- ListRow ---------- */
.mn-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.mn-listrow { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); color: var(--ink); text-decoration: none; background: none; border: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; }
.mn-listrow + .mn-listrow { border-top: 1px solid var(--line); }
.mn-listrow-ico { color: var(--ink-muted); display: grid; }
.mn-listrow-main { flex: 1; min-width: 0; }
.mn-listrow-main b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.mn-listrow-main span { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.mn-listrow-end { color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.mn-listrow.is-danger, .mn-listrow.is-danger .mn-listrow-ico { color: var(--danger); }

/* ---------- ReservationCard ---------- */
.mn-resv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.mn-resv-top { display: flex; gap: var(--space-3); padding: var(--space-4); }
.mn-resv-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--surface-sunken); }
.mn-resv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mn-resv-name { font-size: 16px; line-height: 22px; font-weight: 700; margin: 0; }
.mn-resv-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.mn-resv-meta .mn-ico { width: 14px; height: 14px; }
.mn-resv-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }
.mn-resv-foot b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.mn-resv.is-past .mn-resv-thumb { filter: grayscale(.8); }
.mn-resv .mn-badge { white-space: normal; height: auto; min-height: 24px; padding-top: 4px; padding-bottom: 4px; }

/* ---------- CashbackCard ---------- */
.mn-cash { border-radius: var(--radius-lg); padding: var(--space-5); background: var(--brand); color: var(--on-brand); display: flex; flex-direction: column; gap: var(--space-3); position: relative; overflow: hidden; }
.mn-cash::after { content: ""; position: absolute; z-index: 0; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 24px solid rgba(255, 255, 255, .18); }
.mn-cash small { font-size: 13px; font-weight: 600; opacity: 1; }
.mn-cash b { font-size: 32px; line-height: 36px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mn-cash > * { position: relative; z-index: 1; }
.mn-cash-row { display: flex; gap: var(--space-2); position: relative; z-index: 1; }
.mn-cash .mn-btn { background: var(--on-brand); color: var(--brand); height: var(--control-sm); font-size: 14px; border-radius: var(--radius-sm); }
.mn-cash .mn-btn-ghostinv { background: transparent; color: var(--on-brand); border: 1px solid var(--on-brand); }
.mn-cash-join { background: var(--surface); color: var(--ink); border: 1px dashed var(--brand); }
.mn-cash-join::after { border-color: var(--brand-soft); }
.mn-ledger { display: flex; flex-direction: column; }
.mn-ledger-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.mn-ledger-row:first-child { border-top: 0; }
.mn-ledger-row b { font-variant-numeric: tabular-nums; }
.mn-ledger-row .is-credit { color: var(--success); }
.mn-ledger-row .is-debit { color: var(--ink-muted); }

/* ---------- PixPanel ---------- */
.mn-pix { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.mn-pix-qr { width: 208px; height: 208px; padding: 12px; background: #ffffff; border-radius: var(--radius-md); display: grid; place-items: center; }
.mn-pix-qr svg { width: 100%; height: 100%; }
.mn-pix-code { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--ink-muted); }
.mn-pix-code span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.mn-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: var(--space-3); text-align: left; width: 100%; }
.mn-steps li { counter-increment: s; display: flex; gap: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.mn-steps li::before { content: counter(s); width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.mn-live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.mn-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); animation: mn-pulse 1.4s ease-in-out infinite; }
@keyframes mn-pulse { 50% { opacity: .3; } }

/* Countdown */
.mn-countdown { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.mn-countdown.is-low { background: var(--danger-soft); color: var(--danger); }

/* ---------- ResultState / EmptyState ---------- */
.mn-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-4) var(--space-6); }
.mn-result-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.mn-result-ico .mn-ico { width: 36px; height: 36px; }
.mn-result-ico.is-warning { background: var(--warning-soft); color: var(--warning); }
.mn-result-ico.is-danger { background: var(--danger-soft); color: var(--danger); }
.mn-result-ico.is-brand { background: var(--brand-soft); color: var(--brand-text); }
.mn-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.mn-empty-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); display: grid; place-items: center; }

/* ---------- Toast ---------- */
.mn-toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 20px; max-width: 420px; }
.mn-toast .mn-toast-action { margin-left: auto; color: var(--bg); font-weight: 700; background: none; border: 0; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Skeleton ---------- */
.mn-skel { background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--line) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: mn-shimmer 1.4s linear infinite; border-radius: var(--radius-xs); }
@keyframes mn-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mn-skel, .mn-live i, .mn-btn.is-loading::after { animation: none; } }

/* ---------- BottomSheet ---------- */
.mn-sheet-scrim { background: var(--scrim); position: absolute; inset: 0; }
.mn-sheet { background: var(--surface-raised); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-sheet); padding: var(--space-2) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.mn-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto var(--space-1); }
.mn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* ---------- Gallery (detalhe) ---------- */
.mn-gallery { position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunken); overflow: hidden; }
.mn-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-gallery-bar { position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3); display: flex; justify-content: space-between; }
.mn-gallery-bar .mn-iconbtn-float { color: var(--ink); }
.mn-gallery .mn-suite-count { position: absolute; right: var(--space-3); bottom: var(--space-3); }

/* ---------- Switch (checkbox nativo; o rótulo é o <label> pai) ---------- */
.mn-switch { position: relative; flex: none; width: 48px; height: 28px; display: inline-block; }
.mn-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mn-switch i { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--line-strong); transition: background-color .15s, border-color .15s; }
.mn-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink-muted); transition: transform .15s, background-color .15s; }
.mn-switch input:checked + i { background: var(--brand); border-color: var(--brand); }
.mn-switch input:checked + i::after { transform: translateX(20px); background: var(--on-brand); }
.mn-switch input:focus-visible + i { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mn-switch input:disabled { cursor: not-allowed; }
.mn-switch input:disabled + i { opacity: .55; }

/* ---------- ConsentBanner (cookies / LGPD) ----------
   Não bloqueia a página (sem scrim). Celular: bottom sheet colado na base, por cima da barra de CTA — a decisão
   vem antes de continuar. Desktop: cartão flutuante no canto. Primeira camada curta: 1 ação principal
   ("Aceitar e continuar") + "Personalizar" (<details>, funciona sem JS) com as categorias desligadas por padrão. */
.mn-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; display: flex; justify-content: center; pointer-events: none; }
.mn-consent[hidden] { display: none; }
.mn-consent-card { pointer-events: auto; width: 100%; max-height: min(88dvh, 640px); overflow-y: auto; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-sheet); padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--space-4); animation: mn-consent-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.mn-consent-head { display: flex; align-items: center; gap: var(--space-3); }
.mn-consent-ico { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; flex: none; }
.mn-consent-title { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; margin: 0; }
.mn-consent-text { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.mn-consent-text a { color: var(--brand-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mn-consent-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.mn-consent-more > summary { list-style: none; }
.mn-consent-more > summary::-webkit-details-marker { display: none; }
.mn-consent-more[open] > summary { display: none; }
.mn-consent-prefs { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.mn-consent-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; margin: 0; }
.mn-consent-opt.is-locked { cursor: default; }
.mn-consent-opt strong { display: block; font-size: 15px; line-height: 20px; }
.mn-consent-opt span.mn-consent-desc { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; }
@keyframes mn-consent-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mn-consent-card { animation: none; } }
@media (min-width: 768px) {
  .mn-consent { left: var(--space-6); right: auto; bottom: var(--space-6); justify-content: flex-start; }
  .mn-consent-card { width: 400px; border-bottom: 1px solid var(--line); border-radius: var(--radius-lg); padding-bottom: var(--space-5); box-shadow: var(--shadow-pop); }
}


/* ==========================================================================
   Motel Now — camada do BACKOFFICE (equipe do motel). Fonte de mn-admin.css.
   mn-admin.css = tokens + components.css (os mesmos componentes mn-* do front-office) + este arquivo.
   Tema "Dia" (html[data-theme="dia"]). Carregado DEPOIS do Bootstrap, default.css e do CSS do tenant:
   repagina o Bootstrap 5.2 pelas variáveis --bs-* e remapeia as variáveis legadas (--main-color, --rc-*, --um-*)
   para os tokens, então as telas antigas ganham o visual novo sem mudar o markup.
   Padrões (Mobbin): sidebar fixa agrupada (Fresha, Jobber, Squarespace), topbar com título da tela.
   ========================================================================== */

/* ---------- Base ---------- */
body.adm {
  margin: 0;
  font-family: var(--font-text);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;

  /* Variáveis legadas de default.css → tokens do Design System */
  --main-color: var(--brand);
  --orange-color: var(--accent);
  --rc-accent: var(--brand);
  --rc-accent-ink: var(--brand-text);
  --rc-accent-soft: var(--brand-soft);
  --rc-surface-2: var(--surface-sunken);
  --rc-border: var(--line);
  --rc-text: var(--ink);
  --rc-text-muted: var(--ink-muted);
  --rc-radius: var(--radius-sm);

  /* Bootstrap 5.2 → tokens */
  --bs-body-font-family: var(--font-text);
  --bs-body-font-size: 15px;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-link-color: var(--brand-text);
  --bs-link-hover-color: var(--brand-hover);
  --bs-heading-color: var(--ink);
}
body.adm h1, body.adm h2, body.adm h3, body.adm .h1, body.adm .h2, body.adm .h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
body.adm h4, body.adm h5, body.adm h6, body.adm .h4, body.adm .h5, body.adm .h6 { font-family: var(--font-text); font-weight: 700; color: var(--ink); }
body.adm a { color: var(--brand-text); }
body.adm ::selection { background: var(--brand-soft); }

/* ---------- Shell: sidebar + topbar ---------- */
.adm-shell { display: flex; min-height: 100vh; }
.adm-sidebar { position: sticky; top: 0; height: 100vh; width: 248px; flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-3); background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; z-index: 1040; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-2) var(--space-2); color: var(--ink) !important; text-decoration: none; min-width: 0; }
.adm-brand img { height: 32px; width: auto; max-width: 196px; max-height: 44px; object-fit: contain; object-position: left center; flex: none; }
/* Com logo: o logo já traz o nome — "Backoffice" fica embaixo e o nome só para leitores de tela. */
.adm-brand.has-logo { flex-direction: column; align-items: flex-start; gap: 6px; }
.adm-brand.has-logo .adm-brand-mark { display: none; }
.adm-brand.has-logo .adm-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.adm-brand-text { min-width: 0; }
.adm-brand-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-brand-sub { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.adm-nav { flex: 1; }
.adm-nav-title { margin: var(--space-4) var(--space-2) var(--space-1); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.adm-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-nav-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--ink-muted) !important; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 18px; }
.adm-nav-item .mn-ico { width: 18px; height: 18px; flex: none; }
.adm-nav-item:hover { background: var(--surface-sunken); color: var(--ink) !important; }
.adm-nav-item.is-active { background: var(--brand-soft); color: var(--brand-text) !important; }
.adm-nav-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.adm-sidebar-foot { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.adm-user { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--space-2); min-width: 0; }
.adm-user .mn-avatar { width: 30px; height: 30px; font-size: 13px; }
.adm-user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 16px; color: var(--ink-muted); }
.adm-user .mn-iconbtn { width: 32px; height: 32px; flex: none; color: var(--ink-muted); }
.adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-topbar { position: sticky; top: 0; z-index: 1020; min-height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); background: var(--bg); border-bottom: 1px solid var(--line); }
.adm-title { flex: 1; min-width: 0; margin: 0; font-family: var(--font-display); font-size: 20px !important; line-height: 26px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-menu-btn { display: grid; flex: none; }
.adm-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-scrim { display: none; }
.adm-brand-mark { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand); color: var(--on-brand, #fff); font-family: var(--font-display); font-weight: 800; font-size: 16px; }

/* Menu recolhido (desktop): trilho só com ícones. html.adm-collapsed é aplicado no <head> a partir do localStorage. */
@media (min-width: 992px) {
  .adm-sidebar { transition: width .2s ease, padding .2s ease; overflow-x: hidden; }
  html.adm-collapsed .adm-sidebar { width: 72px; padding-left: var(--space-3); padding-right: var(--space-3); }
  html.adm-collapsed .adm-brand { justify-content: center; align-items: center; padding-left: 0; padding-right: 0; }
  html.adm-collapsed .adm-brand .adm-brand-logo { display: none; }
  html.adm-collapsed .adm-brand.has-logo .adm-brand-mark { display: grid; }
  html.adm-collapsed .adm-brand-text,
  html.adm-collapsed .adm-nav-item span,
  html.adm-collapsed .adm-user-name { display: none; }
  html.adm-collapsed .adm-nav-title { height: 1px; margin: var(--space-3) var(--space-2); overflow: hidden; font-size: 0; background: var(--line); }
  html.adm-collapsed .adm-nav-item { justify-content: center; padding: 0; }
  html.adm-collapsed .adm-user { flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0 0; }
}
@media (max-width: 991.98px) {
  .adm-sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-sheet); }
  body.adm-nav-open .adm-sidebar { transform: none; }
  body.adm-nav-open .adm-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 1039; }
  .adm-topbar { padding: 0 var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .adm-sidebar { transition: none; } }

/* ---------- Telas antigas: painel lateral laranja → painel da tela ---------- */
body.adm .backgroud-orange { background: var(--surface) !important; color: var(--ink) !important; border-right: 1px solid var(--line); }
body.adm .backgroud-orange.text-white, body.adm .backgroud-orange .text-white { color: var(--ink) !important; }
body.adm .backgroud-orange h1 { font-size: 24px; line-height: 30px; margin-bottom: var(--space-2); }
body.adm .backgroud-orange .btn.h4 { font-size: 15px; line-height: 20px; margin-top: var(--space-4) !important; padding-top: 10px; padding-bottom: 10px; }
body.adm .backgroud-color-main { background: var(--surface) !important; color: var(--ink); border-bottom: 1px solid var(--line); }
/* Caixas "escuro translúcido" (bg-dark + bg-opacity-*) e texto "branco 50%" foram desenhados para o painel laranja.
   No tema claro viram caixa neutra e texto secundário. Ex.: chave "Reservas Flex" (FlexRate) e "Bloquear Reservas" (RoomCategory). */
body.adm .bg-dark.bg-opacity-10, body.adm .bg-dark.bg-opacity-25, body.adm .bg-dark.bg-opacity-50, body.adm .bg-dark.bg-opacity-75 { background-color: var(--surface-sunken) !important; border: 1px solid var(--line); color: var(--ink); }
body.adm .text-white-50 { color: var(--ink-muted) !important; }
/* Reservas Flex (FlexRate/FlexSuiteBlock): seletor de suítes e legenda eram brancos sobre o laranja (default.css). */
body.adm .flex-suite-picker h6, body.adm .flex-legend h6 { color: var(--ink-muted); opacity: 1; font-size: 12px; line-height: 16px; letter-spacing: .08em; margin-bottom: var(--space-2); }
body.adm .flex-suite-picker .form-check { min-height: 30px; margin-bottom: 2px; }
body.adm .flex-suite-picker .form-check-label, body.adm .flex-legend .legend-item { color: var(--ink); }
body.adm .flex-suite-picker .form-check-input[type=radio] { background-color: var(--surface); border-color: var(--line-strong); }
body.adm .flex-suite-picker .form-check-input[type=radio]:checked { background-color: var(--surface); border-color: var(--brand); background-image: radial-gradient(circle, var(--brand) 0 42%, transparent 46%); }
body.adm .flex-suite-picker .form-check-input[type=radio]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
body.adm .flex-suite-picker .form-check-input:checked + .form-check-label { color: var(--brand-text); font-weight: 700; }
/* Calendário × Lista: o JS alterna btn-light (ativo) / btn-outline-light (inativo) → controle segmentado do DS. */
body.adm .flex-view-toggle .btn { --bs-btn-border-color: var(--line-strong); --bs-btn-hover-border-color: var(--line-strong); --bs-btn-active-border-color: var(--line-strong); }
body.adm .flex-view-toggle .btn.btn-light { background: var(--brand-soft); color: var(--brand-text); border-color: var(--line-strong); }
body.adm .flex-view-toggle .btn.btn-outline-light { background: var(--surface); color: var(--ink-muted); }
body.adm .flex-view-toggle .btn.btn-outline-light:hover { background: var(--surface-sunken); color: var(--ink); }

/* ---------- Bootstrap: botões ---------- */
body.adm .btn { --bs-btn-font-family: var(--font-text); --bs-btn-font-weight: 700; --bs-btn-font-size: 14px; --bs-btn-padding-x: 14px; --bs-btn-padding-y: 7px; --bs-btn-border-radius: var(--radius-sm); --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }
body.adm .btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 4px; --bs-btn-font-size: 13px; --bs-btn-border-radius: var(--radius-xs); }
body.adm .btn-lg { --bs-btn-padding-x: 20px; --bs-btn-padding-y: 11px; --bs-btn-font-size: 16px; --bs-btn-border-radius: var(--radius-md); }
body.adm .btn-primary { --bs-btn-color: var(--on-brand); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-color: var(--on-brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-active-color: var(--on-brand); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-disabled-color: var(--on-brand); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
body.adm .btn-outline-primary { --bs-btn-color: var(--brand-text); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: var(--brand-text); --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-color: var(--on-brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-disabled-color: var(--ink-subtle); --bs-btn-disabled-border-color: var(--line); }
body.adm .btn-secondary, body.adm .btn-light { --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-sunken); --bs-btn-hover-border-color: var(--line-strong); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-border-color: var(--ink-subtle); --bs-btn-disabled-color: var(--ink-subtle); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--line); }
body.adm .btn-outline-secondary, body.adm .btn-outline-dark, body.adm .btn-outline-light { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-sunken); --bs-btn-hover-border-color: var(--line-strong); --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--surface-sunken); --bs-btn-active-border-color: var(--ink-subtle); }
body.adm .btn-dark { --bs-btn-color: #ffffff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #000000; --bs-btn-hover-border-color: #000000; }
body.adm .btn-danger { --bs-btn-color: #ffffff; --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--danger) 75%, #000); --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger); }
body.adm .btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: color-mix(in srgb, var(--danger) 45%, transparent); --bs-btn-hover-color: var(--danger); --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-border-color: var(--danger); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--danger); --bs-btn-active-border-color: var(--danger); }
body.adm .btn-success { --bs-btn-color: #ffffff; --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: color-mix(in srgb, var(--success) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--success) 85%, #000); }
body.adm .btn-outline-success { --bs-btn-color: var(--success); --bs-btn-border-color: color-mix(in srgb, var(--success) 45%, transparent); --bs-btn-hover-color: var(--success); --bs-btn-hover-bg: var(--success-soft); --bs-btn-hover-border-color: var(--success); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--success); }
body.adm .btn-warning { --bs-btn-color: #1a1200; --bs-btn-bg: #f5b83d; --bs-btn-border-color: #f5b83d; --bs-btn-hover-color: #1a1200; --bs-btn-hover-bg: #e9a91f; --bs-btn-hover-border-color: #e9a91f; }
body.adm .btn-outline-warning { --bs-btn-color: var(--warning); --bs-btn-border-color: color-mix(in srgb, var(--warning) 45%, transparent); --bs-btn-hover-color: var(--warning); --bs-btn-hover-bg: var(--warning-soft); --bs-btn-hover-border-color: var(--warning); }
body.adm .btn-info { --bs-btn-color: var(--brand-text); --bs-btn-bg: var(--brand-soft); --bs-btn-border-color: var(--brand-soft); --bs-btn-hover-color: var(--brand-text); --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 22%, #fff); --bs-btn-hover-border-color: transparent; }
body.adm .btn-link { --bs-btn-color: var(--brand-text); --bs-btn-hover-color: var(--brand-hover); --bs-btn-active-color: var(--brand-hover); text-underline-offset: 3px; }
body.adm .btn-close:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent); }

/* ---------- Bootstrap: formulários ---------- */
body.adm .form-control, body.adm .form-select { border-color: var(--line-strong); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--ink); font-size: 15px; }
body.adm .form-control::placeholder { color: var(--ink-subtle); }
/* Rótulo flutuante (form-floating): o placeholder existe só para o :placeholder-shown do Bootstrap — fica invisível,
   senão aparece por baixo do rótulo (ex.: "0" sobre "Adicional (%)" no modal de tarifa Flex). */
body.adm .form-floating > .form-control::placeholder { color: transparent; }
body.adm .form-floating > label { color: var(--ink-muted); max-width: 100%; }
body.adm .form-control:focus, body.adm .form-select:focus, body.adm .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
body.adm .form-control:disabled, body.adm .form-select:disabled, body.adm .form-control[readonly] { background-color: var(--surface-sunken); color: var(--ink-muted); }
body.adm .form-label, body.adm .col-form-label { font-size: 14px; font-weight: 600; color: var(--ink); }
body.adm .form-text { color: var(--ink-muted); }
body.adm .form-floating > label { color: var(--ink-muted); }
body.adm .form-check-input { border-color: var(--line-strong); }
body.adm .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
body.adm .form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238c8499'/%3e%3c/svg%3e"); }
body.adm .input-group-text { background-color: var(--surface-sunken); border-color: var(--line-strong); color: var(--ink-muted); }
body.adm .is-invalid, body.adm .input-validation-error { border-color: var(--danger) !important; }
body.adm .text-danger, body.adm .field-validation-error { color: var(--danger) !important; }

/* ---------- Bootstrap: cards, modais, dropdowns, toasts ---------- */
body.adm .card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); --bs-card-border-radius: var(--radius-md); --bs-card-inner-border-radius: calc(var(--radius-md) - 1px); --bs-card-cap-bg: var(--surface-sunken); color: var(--ink); }
body.adm .bg-light { background-color: var(--surface) !important; }
body.adm .bg-white { background-color: var(--surface) !important; }
body.adm .shadow-sm { box-shadow: var(--shadow-card) !important; }
body.adm .shadow { box-shadow: var(--shadow-pop) !important; }
body.adm .modal { --bs-modal-bg: var(--surface-raised); --bs-modal-border-color: transparent; --bs-modal-border-radius: var(--radius-lg); --bs-modal-inner-border-radius: var(--radius-lg); --bs-modal-box-shadow: var(--shadow-pop); --bs-modal-header-border-color: var(--line); --bs-modal-footer-border-color: var(--line); --bs-modal-header-padding: var(--space-4) var(--space-6); --bs-modal-padding: var(--space-6); }
body.adm .modal-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 26px; }
body.adm .modal-backdrop { --bs-backdrop-bg: #17141e; --bs-backdrop-opacity: .48; }
body.adm .dropdown-menu { --bs-dropdown-bg: var(--surface-raised); --bs-dropdown-border-color: var(--line); --bs-dropdown-border-radius: var(--radius-md); --bs-dropdown-box-shadow: var(--shadow-pop); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--surface-sunken); --bs-dropdown-link-active-bg: var(--brand-soft); --bs-dropdown-link-active-color: var(--brand-text); --bs-dropdown-header-color: var(--ink-subtle); --bs-dropdown-item-border-radius: var(--radius-xs); box-shadow: var(--shadow-pop); padding: var(--space-1); }
body.adm .dropdown-item { border-radius: var(--radius-xs); font-size: 14px; font-weight: 500; }
/* Toast no tema claro: superfície + texto escuro; a cor do status é a faixa lateral (showToast: is-success / is-error). */
body.adm .toast { --bs-toast-bg: var(--surface-raised); --bs-toast-color: var(--ink); --bs-toast-border-color: var(--line); --bs-toast-border-radius: var(--radius-md); --bs-toast-box-shadow: var(--shadow-pop); --bs-toast-font-size: 14px; z-index: 1090; overflow: hidden; }
body.adm .toast .toast-body { font-weight: 600; line-height: 20px; }
body.adm .toast.is-success { box-shadow: inset 4px 0 0 var(--success), var(--shadow-pop); }
body.adm .toast.is-error { box-shadow: inset 4px 0 0 var(--danger), var(--shadow-pop); }
body.adm .toast.is-success .toast-body::before, body.adm .toast.is-error .toast-body::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--success); }
body.adm .toast.is-error .toast-body::before { background: var(--danger); }
body.adm .tooltip { --bs-tooltip-bg: var(--ink); --bs-tooltip-border-radius: var(--radius-xs); --bs-tooltip-font-size: 12px; }
body.adm .popover { --bs-popover-border-color: var(--line); --bs-popover-border-radius: var(--radius-md); --bs-popover-box-shadow: var(--shadow-pop); --bs-popover-header-bg: var(--surface-sunken); }

/* ---------- Bootstrap: tabelas, badges, navegação, alertas ---------- */
body.adm .table { --bs-table-color: var(--ink); --bs-table-bg: transparent; --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--surface-sunken); --bs-table-striped-color: var(--ink); --bs-table-hover-bg: var(--surface-sunken); --bs-table-hover-color: var(--ink); --bs-table-active-bg: var(--brand-soft); font-size: 14px; }
body.adm .table > thead th, body.adm .table > thead td { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); border-bottom-color: var(--line); white-space: nowrap; }
body.adm .table-dark { --bs-table-color: var(--ink); --bs-table-bg: var(--surface-sunken); --bs-table-border-color: var(--line); }
body.adm .badge { font-weight: 700; border-radius: var(--radius-pill); padding: .35em .7em; letter-spacing: .01em; }
body.adm .bg-primary { background-color: var(--brand) !important; color: var(--on-brand) !important; }
body.adm .bg-secondary { background-color: var(--surface-sunken) !important; color: var(--ink-muted) !important; }
body.adm .bg-success { background-color: var(--success) !important; }
body.adm .bg-danger { background-color: var(--danger) !important; }
body.adm .bg-warning { background-color: var(--warning-soft) !important; color: var(--warning) !important; }
body.adm .bg-info { background-color: var(--brand-soft) !important; color: var(--brand-text) !important; }
body.adm .bg-dark { background-color: var(--ink) !important; }
body.adm .text-primary { color: var(--brand-text) !important; }
body.adm .text-success { color: var(--success) !important; }
body.adm .text-warning { color: var(--warning) !important; }
body.adm .text-muted, body.adm .text-secondary { color: var(--ink-muted) !important; }
body.adm .border-primary { border-color: var(--brand) !important; }
body.adm .nav { --bs-nav-link-color: var(--ink-muted); --bs-nav-link-hover-color: var(--ink); --bs-nav-link-font-weight: 600; }
body.adm .nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-hover-border-color: transparent; --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent; }
body.adm .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; }
body.adm .nav-tabs .nav-link.active { border-bottom-color: var(--brand); }
body.adm .nav-pills { --bs-nav-pills-border-radius: var(--radius-pill); --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-pills-link-active-color: var(--on-brand); }
body.adm .alert { --bs-alert-border-radius: var(--radius-md); border: 0; }
body.adm .alert-primary, body.adm .alert-info { --bs-alert-bg: var(--brand-soft); --bs-alert-color: var(--brand-text); }
body.adm .alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-color: var(--success); }
body.adm .alert-warning { --bs-alert-bg: var(--warning-soft); --bs-alert-color: var(--warning); }
body.adm .alert-danger { --bs-alert-bg: var(--danger-soft); --bs-alert-color: var(--danger); }
body.adm .alert-light, body.adm .alert-secondary { --bs-alert-bg: var(--surface-sunken); --bs-alert-color: var(--ink); }
body.adm .pagination { --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--surface-sunken); --bs-pagination-hover-color: var(--ink); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-active-color: var(--on-brand); --bs-pagination-border-radius: var(--radius-sm); --bs-pagination-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
body.adm .spinner-border { color: var(--brand); }
body.adm .progress { --bs-progress-bar-bg: var(--brand); --bs-progress-bg: var(--surface-sunken); }
body.adm .list-group { --bs-list-group-border-color: var(--line); --bs-list-group-active-bg: var(--brand); --bs-list-group-active-border-color: var(--brand); --bs-list-group-active-color: var(--on-brand); }

/* ---------- Widgets de terceiros ---------- */
/* flatpickr */
body.adm .flatpickr-calendar { background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-pop); border-radius: var(--radius-md); color: var(--ink); font-family: var(--font-text); }
body.adm .flatpickr-calendar.inline { box-shadow: none; }
body.adm .flatpickr-months .flatpickr-month, body.adm .flatpickr-weekdays, body.adm span.flatpickr-weekday, body.adm .flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; color: var(--ink); fill: var(--ink); }
body.adm span.flatpickr-weekday { color: var(--ink-muted); font-weight: 600; }
body.adm .flatpickr-months .flatpickr-prev-month svg, body.adm .flatpickr-months .flatpickr-next-month svg { fill: var(--ink); }
body.adm .flatpickr-day { color: var(--ink); border-radius: var(--radius-sm); }
body.adm .flatpickr-day:hover { background: var(--surface-sunken); border-color: var(--surface-sunken); }
body.adm .flatpickr-day.today { border-color: var(--brand); }
body.adm .flatpickr-day.selected, body.adm .flatpickr-day.startRange, body.adm .flatpickr-day.endRange, body.adm .flatpickr-day.selected:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
body.adm .flatpickr-day.inRange { background: var(--brand-soft); border-color: var(--brand-soft); box-shadow: -5px 0 0 var(--brand-soft), 5px 0 0 var(--brand-soft); }
body.adm .flatpickr-day.flatpickr-disabled, body.adm .flatpickr-day.prevMonthDay, body.adm .flatpickr-day.nextMonthDay { color: var(--ink-subtle); }
/* Intervalo de datas com dois calendários independentes (padrão Mixpanel): Início à esquerda, Fim à direita,
   cada um com a própria navegação; empilhados no celular. Usado no Dashboard (gráficos) e na Recepção. */
.adm-range2 { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.adm-range2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.adm-range2-head strong { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.adm-range2-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.adm-range2-foot p { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
@media (min-width: 768px) {
  .dropdown-menu.adm-range2-menu { width: min-content; }
  .adm-range2 { grid-template-columns: repeat(2, 308px); gap: var(--space-4); }
}
/* Data e hora em modal (Anúncio, Produto extra, Cupom — site.js setUpDatetimePickerCalendars): flatpickr "static"
   embrulha o input num .flatpickr-wrapper dentro do .input-group; o wrapper ocupa o lugar do input. */
body.adm .input-group > .flatpickr-wrapper { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
body.adm .input-group > .flatpickr-wrapper > .form-control { width: 100%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.adm .input-group > .flatpickr-wrapper > .flatpickr-calendar.static { top: calc(100% + 4px); }
body.adm .input-group > [data-date-toggle] { cursor: pointer; }
body.adm .flatpickr-time input, body.adm .flatpickr-time .flatpickr-time-separator { color: var(--ink); }
body.adm .flatpickr-time input:hover, body.adm .flatpickr-time input:focus { background: var(--surface-sunken); }
/* tom-select */
body.adm .ts-control { border-color: var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); min-height: 38px; }
body.adm .focus .ts-control { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
body.adm .ts-dropdown { border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
body.adm .ts-dropdown .active { background: var(--brand-soft); color: var(--brand-text); }
body.adm .ts-wrapper.multi .ts-control > div { background: var(--brand-soft); color: var(--brand-text); border-radius: var(--radius-pill); }
/* DataTables */
body.adm .dataTables_wrapper .dataTables_filter input, body.adm .dataTables_wrapper .dataTables_length select { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
body.adm .dataTables_wrapper .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
body.adm .dt-buttons .btn, body.adm .dt-button { border-radius: var(--radius-sm) !important; }
/* FullCalendar (Reservas Flex) */
body.adm .fc { --fc-border-color: var(--line); --fc-button-bg-color: var(--surface); --fc-button-border-color: var(--line-strong); --fc-button-text-color: var(--ink); --fc-button-hover-bg-color: var(--surface-sunken); --fc-button-hover-border-color: var(--line-strong); --fc-button-active-bg-color: var(--brand); --fc-button-active-border-color: var(--brand); --fc-today-bg-color: var(--brand-soft); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--surface-sunken); font-family: var(--font-text); }
body.adm .fc .fc-button { border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; }
body.adm .fc .fc-button-primary:not(:disabled).fc-button-active, body.adm .fc .fc-button-primary:not(:disabled):active { color: var(--on-brand); }
body.adm .fc .fc-toolbar-title { font-family: var(--font-display); font-weight: 800; }
/* EasyMDE */
body.adm .EasyMDEContainer .CodeMirror, body.adm .editor-toolbar { border-color: var(--line-strong); }
body.adm .editor-toolbar { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
body.adm .EasyMDEContainer .CodeMirror { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* ==========================================================================
   Recepção (rx-*) — padrão Square "All orders" + Time2book (Mobbin):
   toolbar (abas com contagem, busca, período, tipo, filtros, ordenação), lista compacta agrupada por dia
   e painel lateral (offcanvas) com detalhes e ações.
   ========================================================================== */
.rx-page { width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.rx-toolbar { position: sticky; top: var(--topbar-h); z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 0 var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.rx-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.rx-tabs::-webkit-scrollbar { display: none; }
.rx-tab { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 14px 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.rx-tab:hover { color: var(--ink); }
.rx-tab.is-active { color: var(--ink); border-bottom-color: var(--brand); }
.rx-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; line-height: 1; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.rx-tab.is-active .rx-count { background: var(--brand-soft); color: var(--brand-text); }
/* Pagas e canceladas pela Sismotel depois do pagamento: erro que pede ação da recepção. */
.rx-tab-issue { color: var(--danger); }
.rx-tab-issue .mn-ico { width: 16px; height: 16px; }
.rx-tab-issue .rx-count, .rx-tab-issue.is-active .rx-count { background: var(--danger); color: #fff; }
.rx-tab-issue.is-active { color: var(--danger); border-bottom-color: var(--danger); }
.rx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rx-search { position: relative; flex: 1 1 260px; min-width: 220px; margin: 0; }
.rx-search .form-control { padding-left: 36px; height: 38px; }
.rx-search .rx-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-subtle); pointer-events: none; }
.rx-period-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; white-space: nowrap; }
.rx-period-menu { width: 336px; padding: var(--space-3) !important; }
.rx-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.rx-period-menu .flatpickr-calendar.inline { width: 100%; }
.rx-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; height: 38px; }
.rx-seg-item { appearance: none; border: 0; border-left: 1px solid var(--line); background: var(--surface); padding: 0 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.rx-seg-item:first-child { border-left: 0; }
.rx-seg-item:hover { background: var(--surface-sunken); color: var(--ink); }
.rx-seg-item.is-active { background: var(--brand-soft); color: var(--brand-text); }
.rx-select { min-width: 170px; }
.rx-select .ts-control { min-height: 38px; }
.rx-sort-wrap { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-muted); }
.rx-sort { width: auto; height: 32px; font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.rx-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rx-summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rx-clear { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand-text); cursor: pointer; }
.rx-updated { margin-left: auto; font-size: 12px; color: var(--ink-subtle); }

/* Lista + calendário "Reservas por dia" (fixo ao lado em telas largas; recolhível acima da lista nas menores) */
.rx-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.rx-main { min-width: 0; container: rx-main / inline-size; }
.rx-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.rx-cal-head { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-4); border: 0; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.rx-cal-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.rx-cal-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-text); }
.rx-cal-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rx-cal-title b { font-size: 14px; line-height: 18px; font-weight: 800; }
.rx-cal-title small { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rx-cal.has-selection .rx-cal-title small { color: var(--brand-text); font-weight: 700; }
.rx-cal-chev { display: grid; color: var(--ink-subtle); transition: transform .2s ease; }
.rx-cal.is-open .rx-cal-chev { transform: rotate(180deg); }
.rx-cal-body { display: none; padding: 0 var(--space-3) var(--space-3); }
.rx-cal.is-open .rx-cal-body { display: block; }
#rx-day-calendar + .flatpickr-calendar, .rx-cal-foot { max-width: 400px; margin-left: auto; margin-right: auto; }
.rx-cal .flatpickr-calendar.inline { width: 100%; border: 0; background: transparent; box-shadow: none; }
.rx-cal .flatpickr-innerContainer, .rx-cal .flatpickr-rContainer, .rx-cal .flatpickr-days, .rx-cal .flatpickr-weekdays { width: 100%; }
body.adm .rx-cal .flatpickr-current-month { font-size: 15px; font-weight: 800; padding-top: 6px; }
body.adm .rx-cal .flatpickr-current-month .flatpickr-monthDropdown-months, body.adm .rx-cal .flatpickr-current-month input.cur-year { font-weight: 800; color: var(--ink); }
.rx-cal .dayContainer { width: 100%; min-width: 0; max-width: none; row-gap: 2px; }
body.adm .rx-cal .flatpickr-day { max-width: none; height: 44px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
body.adm .rx-cal .flatpickr-day.flatpickr-disabled { color: var(--ink-subtle); opacity: .45; }
.rx-daycount { min-width: 18px; height: 15px; padding: 0 5px; border-radius: var(--radius-pill); font-size: 10px; line-height: 15px; font-weight: 800; text-align: center; pointer-events: none; }
.rx-lvl-1 .rx-daycount, i.rx-lvl-1 { background: var(--surface-sunken); color: var(--ink-muted); }
.rx-lvl-2 .rx-daycount, i.rx-lvl-2 { background: var(--brand-soft); color: var(--brand-text); }
.rx-lvl-3 .rx-daycount, i.rx-lvl-3 { background: var(--brand); color: var(--on-brand); }
body.adm .rx-cal .flatpickr-day.selected .rx-daycount { background: var(--surface); color: var(--brand-text); }
.rx-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-1); padding: var(--space-2) var(--space-1) 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rx-cal-legend { display: inline-flex; align-items: center; gap: 3px; }
.rx-cal-legend i { width: 14px; height: 8px; border-radius: var(--radius-pill); }
.rx-cal-legend i:last-of-type { margin-right: 6px; }
@media (min-width: 1200px) {
  .rx-body { grid-template-columns: 304px minmax(0, 1fr); }
  .rx-side { position: sticky; top: calc(var(--topbar-h) + var(--rx-toolbar-h, 0px) + var(--space-4)); max-height: calc(100vh - var(--topbar-h) - var(--rx-toolbar-h, 0px) - var(--space-6)); overflow-y: auto; border-radius: var(--radius-lg); }
  .rx-cal-head { cursor: default; pointer-events: none; }
  .rx-cal-chev { display: none; }
  .rx-cal-body { display: block; }
}

.rx-list { display: flex; flex-direction: column; gap: 6px; }
.rx-day { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-1) var(--space-1); }
.rx-day h2 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 800; }
.rx-day span { white-space: nowrap; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rx-row { display: grid; grid-template-columns: 64px minmax(150px, 1.3fr) minmax(190px, 1.6fr) minmax(150px, 1fr) minmax(90px, .6fr) 140px 16px; align-items: center; gap: var(--space-4); padding: 10px var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rx-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.rx-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rx-row.is-open { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.rx-time { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rx-time b { font-family: var(--font-display); font-size: 18px; line-height: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rx-flag { display: inline-block; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-size: 10.5px; line-height: 15px; font-weight: 800; }
.rx-flag.is-late { background: var(--danger-soft); color: var(--danger); white-space: nowrap; }
.rx-who { min-width: 0; }
.rx-name { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-sub { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-suite { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rx-thumb { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-sunken); }
.rx-thumb-empty { display: grid; place-items: center; color: var(--ink-subtle); }
.rx-suite-text { min-width: 0; display: flex; flex-direction: column; }
.rx-suite-text b { font-size: 14px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-suite-text small { font-size: 12px; line-height: 17px; color: var(--ink-muted); white-space: nowrap; }
.rx-type { display: inline-block; padding: 0 6px; border-radius: var(--radius-pill); font-size: 11px; line-height: 17px; font-weight: 800; background: var(--surface-sunken); color: var(--ink-muted); }
.rx-type-imediata { background: var(--brand-soft); color: var(--brand-text); }
.rx-type-flex { background: var(--accent-soft); color: var(--accent-text); }
.rx-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.rx-badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; background: var(--surface-sunken); color: var(--ink-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rx-badge.is-success { background: var(--success-soft); color: var(--success); }
.rx-badge.is-danger { background: var(--danger-soft); color: var(--danger); }
.rx-badge.is-warning { background: var(--warning-soft); color: var(--warning); }
.rx-badge.is-issue { display: inline-flex; align-items: center; gap: 4px; }
.rx-badge.is-issue .mn-ico { width: 13px; height: 13px; flex: none; }
.rx-row.is-issue { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); box-shadow: inset 3px 0 0 var(--danger); }
.rx-d-alert { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); }
.rx-d-alert > .mn-ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.rx-d-alert b { display: block; font-size: 14px; line-height: 20px; }
.rx-d-alert p { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink); }
.rx-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.rx-mini .mn-ico { width: 14px; height: 14px; }
.rx-pay { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.rx-money { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rx-money b { font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; }
.rx-money small { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rx-money small.is-due { color: var(--warning); font-weight: 700; }
.rx-money small.is-refund { color: var(--danger); font-weight: 600; }
.rx-go { color: var(--ink-subtle); display: grid; place-items: center; }
.rx-row:hover .rx-go, .rx-row.is-open .rx-go { color: var(--brand-text); }
.rx-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-4); text-align: center; color: var(--ink-muted); }
.rx-empty-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-sunken); display: grid; place-items: center; color: var(--ink-subtle); }
.rx-empty p { margin: 0; font-size: 14px; }
.rx-empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }

/* Painel lateral */
body.adm .rx-drawer { --bs-offcanvas-width: 440px; --bs-offcanvas-bg: var(--surface); --bs-offcanvas-border-color: var(--line); box-shadow: var(--shadow-sheet); }
.rx-drawer .offcanvas-header { padding: var(--space-3) var(--space-4) 0; justify-content: flex-end; }
.rx-drawer .offcanvas-body { padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; }
.rx-d-head { padding-bottom: var(--space-4); }
.rx-d-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.rx-d-name { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 800; }
.rx-d-sub { margin: 2px 0 0; font-size: 13px; color: var(--ink-muted); }
.rx-d-section { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.rx-d-section h3 { margin: 0 0 var(--space-2); font-family: var(--font-text); font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.rx-d-when { display: flex; align-items: center; gap: var(--space-3); }
.rx-d-when-ico { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; }
.rx-d-when b { display: block; font-size: 15px; line-height: 20px; }
.rx-d-when small { display: block; font-size: 12px; line-height: 16px; color: var(--warning); font-weight: 600; }
.rx-d-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px var(--space-3); margin: 0; font-size: 14px; line-height: 20px; }
.rx-d-kv dt { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-muted); }
.rx-d-kv dt .mn-ico { width: 16px; height: 16px; }
.rx-d-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rx-d-suite { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.rx-d-suite img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; }
.rx-d-suite b { display: block; font-size: 15px; line-height: 20px; }
.rx-d-suite small { display: block; font-size: 13px; color: var(--ink-muted); }
.rx-d-money { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-3); margin: 0; font-size: 14px; line-height: 20px; }
.rx-d-money dt { font-weight: 500; color: var(--ink-muted); }
.rx-d-money dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rx-d-money .rx-d-due { padding-top: 8px; margin-top: 2px; border-top: 1px dashed var(--line-strong); font-size: 15px; font-weight: 800; color: var(--ink); }
.rx-d-money dd.is-due { color: var(--warning); }
.rx-d-money dd.is-refund { color: var(--danger); }
.rx-d-discounts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.rx-chip { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 700; }
.rx-chip.is-success { background: var(--success-soft); color: var(--success); }
.rx-chip.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.rx-chip.is-info { background: var(--brand-soft); color: var(--brand-text); }
.rx-chip.is-warning { background: var(--warning-soft); color: var(--warning); }
.rx-d-actions { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.rx-d-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body.adm .btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
body.adm .btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--ink); animation: mn-spin .8s linear infinite; }

/* Linhas: o layout segue a largura da lista (que muda com o calendário ao lado e o menu recolhido), não a da tela. */
@container rx-main (max-width: 959.98px) {
  .rx-row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) auto 16px; grid-template-areas: "time who suite money go" "time state state money go"; row-gap: 6px; }
  .rx-time { grid-area: time; align-self: start; } .rx-who { grid-area: who; } .rx-suite { grid-area: suite; } .rx-state { grid-area: state; } .rx-money { grid-area: money; } .rx-go { grid-area: go; }
  .rx-pay { display: none; }
}
@container rx-main (max-width: 559.98px) {
  .rx-row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "time who money" "time suite suite" "time state state"; }
  .rx-go { display: none; }
}
@media (max-width: 699.98px) {
  .rx-page { padding: var(--space-3); }
  .rx-toolbar { position: static; }
  .rx-select, .rx-seg { flex: 1 1 auto; }
  .rx-updated { margin-left: 0; }
  body.adm .rx-drawer { --bs-offcanvas-width: 100vw; }
  .rx-d-kv { grid-template-columns: 110px 1fr; }
}

/* ======================================================================
   Dashboard (padrão Shopify / Wix / Klaviyo): filtros no topo, KPIs com variação,
   divisão por tipo, gráficos com ranking ao lado e a tabela detalhada.
   ====================================================================== */
.dsb-page { width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.dsb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dsb-period-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; white-space: nowrap; font-weight: 600; background: var(--surface) !important; }
.dsb-period-menu { width: 336px; padding: var(--space-3) !important; }
.dsb-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); }
.dsb-period-menu .flatpickr-calendar.inline { width: 100%; }
.dsb-period-hint { margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.dsb-compare { font-size: 13px; color: var(--ink-muted); }
.dsb-motels { margin-left: auto; flex: 1 1 260px; min-width: 240px; max-width: 520px; }

#kpi-cards { display: flex; flex-direction: column; gap: var(--space-4); }
#kpi-cards.is-loading { opacity: .5; pointer-events: none; }
.dsb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.dsb-kpi { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.dsb-kpi-label { margin: 0; font-family: var(--font-text); font-size: 13px !important; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.dsb-kpi-value { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsb-kpi-sub { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.dsb-delta { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dsb-delta .mn-ico { width: 14px; height: 14px; }
.dsb-delta.is-up { background: var(--success-soft); color: var(--success); }
.dsb-delta.is-down { background: var(--danger-soft); color: var(--danger); }
.dsb-delta.is-neutral { background: var(--surface-sunken); color: var(--ink-muted); }

.dsb-card { padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.dsb-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dsb-card-head-inline { margin-bottom: var(--space-2); }
.dsb-card-title { margin: 0; font-family: var(--font-display); font-size: 17px !important; line-height: 24px; font-weight: 800; }
.dsb-card-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.dsb-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dsb-empty { margin: 0; padding: var(--space-4) 0; font-size: 14px; color: var(--ink-muted); }
.dsb-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; }
.dsb-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--space-12) var(--space-4); color: var(--ink-muted); }

/* Segmentado (período dos gráficos) — setActivePreset() alterna .active */
.dsb-seg { display: inline-flex; height: 32px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.dsb-seg-item { appearance: none; border: 0; border-left: 1px solid var(--line); background: var(--surface); padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.dsb-seg-item:first-child { border-left: 0; }
.dsb-seg-item:hover { background: var(--surface-sunken); color: var(--ink); }
.dsb-seg-item.active { background: var(--brand-soft); color: var(--brand-text); }
.dsb-seg-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.dsb-seg-item:disabled { opacity: .6; cursor: progress; }
.dsb-custom-range { display: flex; align-items: center; gap: 6px; }
.dsb-custom-range .dsb-period-btn { height: 32px; font-size: 13px; }

/* Divisão por tipo: barra 100% (2px de respiro entre segmentos) + legenda com valores.
   Cores = 3 primeiros slots da paleta categórica dos gráficos (validada p/ daltonismo), fixas por tipo. */
.dsb-types .dsb-card-head { margin-bottom: var(--space-3); }
.dsb-typebar { display: flex; gap: 2px; height: 12px; margin-bottom: var(--space-3); border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-sunken); }
.dsb-typebar-seg { flex-basis: 0; min-width: 4px; }
.dsb-typebar-seg.is-now, .dsb-typedot.is-now { background: #2a78d6; }
.dsb-typebar-seg.is-flex, .dsb-typedot.is-flex { background: #eb6834; }
.dsb-typebar-seg.is-scheduled, .dsb-typedot.is-scheduled { background: #1baf7a; }
.dsb-typelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3) var(--space-5); }
.dsb-typelist li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.dsb-typedot { width: 10px; height: 10px; border-radius: 3px; }
.dsb-typename { font-size: 14px; font-weight: 700; }
.dsb-typeshare { font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dsb-typevalue { grid-column: 2 / 4; font-size: 17px; line-height: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dsb-typelist small { grid-column: 2 / 4; font-size: 12px; color: var(--ink-muted); }

/* Gráficos */
#charts-card .charts-body { position: relative; }
#charts-card .charts-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: var(--radius-md); }
.dsb-chart-title { margin: 0; font-family: var(--font-text); font-size: 14px !important; line-height: 20px; font-weight: 700; }
.dsb-chart-sub { min-height: 1.25rem; margin-bottom: .5rem; font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
#charts-card .chart-container { min-height: 320px; }
#charts-card .apexcharts-tooltip { border: 1px solid var(--line) !important; box-shadow: var(--shadow-pop) !important; background: var(--surface-raised) !important; color: var(--ink); }
#charts-card .chart-clear { margin-left: .5rem; }
#chart-ranking .rank-list { padding-top: .25rem; }
#chart-ranking .rank-row { display: grid; grid-template-columns: minmax(72px, 28%) 1fr auto; align-items: center; column-gap: .75rem; padding: .4rem 0; }
#chart-ranking .rank-name { font-size: 12.5px; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chart-ranking .rank-track { height: 20px; }
#chart-ranking .rank-bar { height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; transition: width .3s ease, filter .15s ease; }
#chart-ranking .rank-row:hover .rank-bar { filter: brightness(1.08); }
#chart-ranking .rank-value { min-width: 6.5rem; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
#chart-ranking .rank-delta { margin-left: .5rem; font-size: 11px; font-weight: 600; }
#chart-ranking .rank-row[role="button"] { cursor: pointer; border-radius: var(--radius-xs); padding-right: .25rem; }
#chart-ranking .rank-row[role="button"]:hover, #chart-ranking .rank-row[role="button"]:focus-visible { background: var(--surface-sunken); outline: none; }
#chart-ranking .rank-row.is-selected { background: var(--brand-soft); }
#chart-ranking .rank-list.has-selection .rank-row:not(.is-selected) .rank-bar { opacity: .35; }
#chart-ranking .rank-list.has-selection .rank-row:not(.is-selected) .rank-name,
#chart-ranking .rank-list.has-selection .rank-row:not(.is-selected) .rank-value { color: var(--ink-muted); }
#chart-stacked-table table { font-variant-numeric: tabular-nums; }
#chart-stacked-table th, #chart-stacked-table td { white-space: nowrap; }
#chart-stacked-table .legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
@media (prefers-reduced-motion: reduce) { #chart-ranking .rank-bar { transition: none; } }

/* Tabela */
.dsb-table { font-size: 13px; font-variant-numeric: tabular-nums; }
.dsb-table th { white-space: nowrap; }
.export-buttons .dt-buttons { display: flex; gap: 6px; }
.export-buttons .dt-buttons .btn { margin: 0; }
/* Tela cheia (dashboard.js alterna .fullscreen-table no card e .fullscreen-active no body) */
.dsb-card.fullscreen-table { position: fixed; inset: var(--space-3); z-index: 1060; margin: 0; overflow: auto; }
body.fullscreen-active { overflow: hidden; }

@media (max-width: 699.98px) {
  .dsb-page { padding: var(--space-3); }
  .dsb-motels { margin-left: 0; max-width: none; }
  .dsb-card { padding: var(--space-4); }
  .dsb-kpi-value { font-size: 22px; line-height: 28px; }
  .dsb-seg { max-width: 100%; overflow-x: auto; }
}

/* ======================================================================
   Simulação de preço: seletor (suíte + dia + horário, igual ao da Home) à esquerda e,
   à direita, um cartão por tipo de reserva (Ir agora / Períodos Flex / Diárias).
   ====================================================================== */
.sim-page { width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 992px) {
  .sim-page { grid-template-columns: 380px minmax(0, 1fr); }
  .sim-form { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); max-height: calc(100vh - var(--topbar-h) - var(--space-8)); overflow-y: auto; }
}
.sim-form { display: flex; flex-direction: column; gap: var(--space-5); }
.sim-field { display: flex; flex-direction: column; gap: var(--space-2); }
.sim-label { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--ink-muted); }
.sim-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sim-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-hint, .sim-now { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sim-hint small { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.sim-hint:hover, .sim-now:hover { background: var(--surface-sunken); }
.sim-hint.is-active, .sim-now.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.sim-hint.is-active small { color: var(--brand-text); }
.sim-now .mn-ico { width: 14px; height: 14px; }
.sim-hint:focus-visible, .sim-now:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sim-form .flatpickr-calendar.inline { width: 100%; }
.sim-form .flatpickr-innerContainer, .sim-form .flatpickr-rContainer, .sim-form .flatpickr-days { width: 100%; }
.sim-form .dayContainer { width: 100%; min-width: 0; max-width: none; }
body.adm .sim-form .flatpickr-day { max-width: none; }
/* Grade de horários: mesmas regras de .mn-slot-group do site */
.sim-slot-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.sim-slot-group > span { font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.sim-slot-group > span small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--ink-subtle); }
.sim-slot-group .mn-slots { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 420px) { .sim-slot-group .mn-slots { grid-template-columns: repeat(6, 1fr); } .sim-slot-group .mn-slot { height: 38px; font-size: 13px; } }

.sim-results { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); transition: opacity .15s; }
.sim-results.is-loading { opacity: .55; }
.sim-result-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); }
.sim-result-title { margin: 0; font-family: var(--font-display); font-size: 22px !important; line-height: 28px; font-weight: 800; }
.sim-result-sub { margin: 0; font-size: 14px; color: var(--ink-muted); }
.sim-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); align-items: start; }
.sim-type { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sim-type-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.sim-type-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-muted); }
.sim-type.is-now .sim-type-ico { background: var(--brand-soft); color: var(--brand-text); }
.sim-type.is-flex .sim-type-ico { background: var(--accent-soft); color: var(--accent-text); }
.sim-type-title { margin: 0; font-family: var(--font-display); font-size: 16px !important; line-height: 22px; font-weight: 800; }
.sim-type-desc { margin: 2px 0 0; font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.sim-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; line-height: 18px; font-weight: 600; }
.sim-tag .mn-ico { width: 13px; height: 13px; }
.sim-tag.is-rate { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
.sim-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sim-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.sim-row:first-child { border-top: 0; padding-top: 0; }
.sim-row-name { display: flex; flex-direction: column; min-width: 0; }
.sim-row-name b { font-size: 14px; line-height: 20px; }
.sim-row-name small { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sim-row-price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sim-row-price b { font-size: 16px; font-weight: 800; }
.sim-row-price s { font-size: 12.5px; color: var(--ink-subtle); }
.sim-row-note { grid-column: 1 / -1; font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.sim-row.is-disabled .sim-row-name b, .sim-row.is-disabled .sim-row-price b { color: var(--ink-subtle); text-decoration: line-through; }
.sim-row.is-disabled .sim-row-note { color: var(--danger); }
.sim-unavailable { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13px; color: var(--ink-muted); }
.sim-notes { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 6px; }
.sim-notes li { display: flex; gap: 6px; font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.sim-notes .mn-ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
@media (max-width: 699.98px) { .sim-page { padding: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { .sim-results { transition: none; } }

/* ======================================================================
   Listas de cadastro (Produtos extras, Códigos promocionais, Anúncios, Datas especiais) — padrão
   Squarespace/Shopify "Discounts", Kajabi/Plain (reordenar), Confluence "Announcements", Calendly "Holidays":
   cabeçalho com "Novo", busca + filtro por situação com contagem, uma linha por item com selo e ações.
   Views/Shared/_CrudHeader + wwwroot/scripts/crud.js.
   ====================================================================== */
.crud-page { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.crud-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.crud-head-text { min-width: 0; max-width: 720px; }
.crud-sub { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.crud-new { display: inline-flex; align-items: center; gap: 8px; }
.crud-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.crud-search { flex: 1 1 280px; max-width: 420px; }
body.adm .crud-filter { width: auto; min-width: 180px; max-width: 260px; }
body.adm .crud-filter.is-active { border-color: var(--brand); background-color: var(--brand-soft); color: var(--brand-text); }
.crud-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); }
.crud-seg-item { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.crud-seg-item:hover { color: var(--ink); }
.crud-seg-item.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.crud-seg-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.crud-count { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: 11.5px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.crud-seg-item.is-active .crud-count { background: var(--brand-soft); color: var(--brand-text); }
.crud-empty { padding: var(--space-12) var(--space-4); text-align: center; color: var(--ink-muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.crud-empty p { margin: 0; font-size: 14px; }

.crud-list { container: crud / inline-size; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.crud-list:empty { display: none; }
.crud-row { display: grid; align-items: center; gap: 6px var(--space-4); padding: 12px var(--space-4); border-top: 1px solid var(--line); background: var(--surface); }
.crud-row:first-child { border-top: 0; }
.crud-row:hover { background: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface)); }
.crud-row-ad { grid-template-columns: 48px minmax(0, 2fr) minmax(0, 1fr) 190px auto auto; }
.crud-row-extra { grid-template-columns: 20px 48px minmax(0, 2fr) minmax(0, 1.4fr) 96px auto auto; }
.crud-row-promo { grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.4fr) 150px auto auto; }
.crud-row-date { grid-template-columns: 56px minmax(0, 1fr) auto auto; }
.crud-row-date.is-past { opacity: .7; }
.crud-row-user { grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1.5fr) 190px auto; }
.crud-row-customer { grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr) 150px auto; }

.crud-thumb { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-subtle); overflow: hidden; }
.crud-thumb img { width: 100%; height: 100%; object-fit: cover; }
.crud-handle { display: grid; place-items: center; width: 20px; height: 32px; color: var(--ink-subtle); cursor: grab; touch-action: none; border-radius: var(--radius-xs); }
.crud-handle:hover { color: var(--ink); background: var(--surface-sunken); }
.crud-row.is-dragging { background: var(--brand-soft); opacity: .8; }
.crud-main { min-width: 0; }
.crud-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; line-height: 20px; font-weight: 700; }
.crud-desc { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crud-desc-eve { color: var(--ink-subtle); }
.crud-meta { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crud-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.crud-chip .mn-ico { width: 13px; height: 13px; }
.crud-chip.is-brand { background: var(--brand-soft); color: var(--brand-text); }
.crud-chip.is-accent { background: var(--accent-soft); color: var(--accent-text); }
.crud-chip.is-warning { background: var(--warning-soft); color: var(--warning); }
.crud-code { display: inline-block; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; letter-spacing: .03em; }
.crud-usage { min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.crud-usage small { font-size: 12px; color: var(--ink-muted); }
.crud-when { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12.5px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.crud-when-sep { color: var(--ink-subtle); }
.crud-price { font-size: 15px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crud-status { justify-self: start; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; background: var(--surface-sunken); color: var(--ink-muted); }
.crud-status.is-success { background: var(--success-soft); color: var(--success); }
.crud-status.is-info { background: var(--brand-soft); color: var(--brand-text); }
.crud-status.is-warning { background: var(--warning-soft); color: var(--warning); }
.crud-actions { display: flex; gap: 2px; justify-content: flex-end; }
.crud-actions .mn-iconbtn { width: 34px; height: 34px; color: var(--ink-muted); }
.crud-actions .mn-iconbtn:hover { background: var(--surface-sunken); color: var(--ink); }
.crud-actions .mn-iconbtn.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.crud-date { width: 56px; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-text); line-height: 1.1; text-transform: capitalize; }
.crud-date b { font-family: var(--font-display); font-size: 22px; line-height: 26px; font-weight: 800; }
.crud-date small { font-size: 11px; font-weight: 700; }
.crud-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); font-size: 13.5px; font-weight: 800; letter-spacing: .02em; }
.crud-row-user[data-state=super] .crud-avatar { background: var(--accent-soft); color: var(--accent-text); }
.crud-row-user[data-state=admin] .crud-avatar { background: var(--brand-soft); color: var(--brand-text); }
.crud-row-date.is-past .crud-date { background: var(--surface-sunken); color: var(--ink-muted); }

/* ======================================================================
   Tabelas de preço (etapa 1: visualização) — molde do /FlexRate: suíte e legenda à esquerda, abas por tipo,
   problemas, semana (FullCalendar), matriz de preços e painel lateral com os detalhes.
   ====================================================================== */
.pt-page { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1100px) {
  .pt-page { grid-template-columns: 260px minmax(0, 1fr); }
  .pt-side { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); max-height: calc(100vh - var(--topbar-h) - var(--space-8)); overflow-y: auto; }
}
.pt-side { display: flex; flex-direction: column; gap: var(--space-5); }
.pt-side-block { display: flex; flex-direction: column; gap: var(--space-2); }
.pt-side-title { margin: 0; font-family: var(--font-text); font-size: 12px !important; line-height: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.pt-side-hint { margin: -8px 0 0; font-size: 12px; color: var(--ink-subtle); text-align: center; }
.pt-suites { display: flex; flex-direction: column; gap: 2px; }
.pt-suite { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.pt-suite:hover { background: var(--surface-sunken); color: var(--ink); }
.pt-suite input { accent-color: var(--brand); }
.pt-suite:has(input:checked) { background: var(--brand-soft); color: var(--brand-text); }
.pt-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.pt-legend li { display: flex; align-items: center; gap: 8px; }
.pt-legend-empty { font-style: italic; }
.pt-legend-table { appearance: none; width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 0; border-radius: var(--radius-xs); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.pt-legend-table:hover { background: var(--surface-sunken); }
.pt-legend-name { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 700; }
.pt-legend-name small { font-size: 11.5px; font-weight: 500; color: var(--ink-muted); }
.pt-dot { width: 12px; height: 12px; flex: none; border-radius: 3px; display: inline-block; }
.pt-swatch { width: 22px; height: 14px; flex: none; border-radius: 3px; }
.pt-swatch-gap { background: repeating-linear-gradient(135deg, var(--danger-soft) 0 4px, color-mix(in srgb, var(--danger) 35%, transparent) 4px 6px); }
.pt-swatch-overlap { background: repeating-linear-gradient(45deg, var(--warning-soft) 0 4px, color-mix(in srgb, var(--warning) 45%, transparent) 4px 6px); }
.pt-swatch-invalid { border: 2px dashed var(--danger); background: var(--surface); }
.pt-swatch-special { background: repeating-linear-gradient(135deg, var(--brand-soft) 0 4px, color-mix(in srgb, var(--brand) 30%, transparent) 4px 6px); }

.pt-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pt-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tab { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.pt-tab .mn-ico { width: 16px; height: 16px; }
.pt-tab:hover { color: var(--ink); }
.pt-tab.is-active { color: var(--ink); border-bottom-color: var(--brand); }
.pt-tab-badge { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); font-size: 12px; line-height: 1; font-weight: 800; background: var(--surface-sunken); color: var(--ink-muted); }
.pt-tab-badge.is-warning { background: var(--warning-soft); color: var(--warning); }
.pt-tab-badge.is-ok { background: var(--success-soft); color: var(--success); }
.pt-note { margin: 0; font-size: 13.5px; color: var(--ink-muted); }
.pt-note-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.pt-flex-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pt-flex-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pt-issues { padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: var(--radius-md); background: var(--warning-soft); }
.pt-issues-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pt-issues-head > span { display: inline-flex; align-items: center; gap: 8px; color: var(--warning); font-size: 14px; }
.pt-issues-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; color: var(--ink); }
.pt-issues-list li.is-invalid, .pt-issues-list li.is-overlap { font-weight: 600; }
.pt-ok { display: flex; align-items: center; gap: 8px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--success-soft); color: var(--success); font-size: 14px; font-weight: 600; }
.pt-cal-card { position: relative; padding: var(--space-3); }
.pt-cal-card .charts-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: var(--radius-lg); }
body.adm #ptCalendar .fc-timegrid-slot { height: 2.1em; }
body.adm #ptCalendar .fc-event.pt-evt, body.adm #ptCalendar .fc-event.pt-evt-invalid { background: transparent; border: 0; box-shadow: none; }
.pt-evt-inner { height: 100%; display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; overflow: hidden; border-radius: 6px; border-left: 4px solid var(--tbl); background: color-mix(in srgb, var(--tbl) 16%, var(--surface)); color: var(--ink); font-size: 12px; line-height: 15px; cursor: pointer; }
.pt-evt-inner b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-evt-inner small { color: var(--ink-muted); font-size: 11px; white-space: nowrap; }
.pt-evt-invalid .pt-evt-inner { border: 2px dashed var(--danger); background: var(--danger-soft); }
.pt-evt-flex { height: 100%; display: flex; flex-direction: column; padding: 3px 6px; overflow: hidden; font-size: 11.5px; line-height: 14px; }
.pt-evt-flex b { font-weight: 800; }
body.adm #ptCalendar .fc-bg-event.pt-bg-gap { opacity: 1; background: repeating-linear-gradient(135deg, var(--danger-soft) 0 6px, color-mix(in srgb, var(--danger) 30%, transparent) 6px 8px); }
body.adm #ptCalendar .fc-bg-event.pt-bg-overlap { opacity: 1; background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--warning) 40%, transparent) 6px 8px); }
body.adm #ptCalendar .fc-bg-event.pt-bg-special { opacity: 1; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--brand) 22%, transparent) 6px 8px); }
body.adm #ptCalendar .fc-event.pt-evt-special { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.pt-evt-special-inner { padding: 1px 6px; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pt-matrix { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pt-matrix th, .pt-matrix td { white-space: nowrap; vertical-align: middle; }
.pt-matrix thead th { font-size: 12px; font-weight: 700; color: var(--ink-muted); background: var(--surface); }
.pt-matrix .pt-matrix-group { text-align: center; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--ink-subtle); border-bottom-color: var(--line); }
.pt-matrix .pt-matrix-col, .pt-matrix td { text-align: right; }
.pt-matrix td { font-weight: 700; color: var(--ink); }
.pt-matrix td.pt-matrix-empty { color: var(--ink-subtle); font-weight: 400; text-align: center; }
.pt-matrix-name { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.pt-matrix-name:hover { color: var(--brand-text); }

body.adm .pt-drawer { --bs-offcanvas-width: 420px; --bs-offcanvas-bg: var(--surface); box-shadow: var(--shadow-sheet); }
.pt-drawer .offcanvas-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.pt-drawer .offcanvas-body { display: flex; flex-direction: column; gap: 0; }
/* Editor lateral (editor.js) */
body.adm .pt-drawer { --bs-offcanvas-width: 500px; }
.pt-drawer .offcanvas-body { gap: var(--space-4); padding-bottom: var(--space-4); }
.pt-drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--surface); }
.pte-foot-spacer { flex: 1; }
.pte-field { display: flex; flex-direction: column; gap: 6px; }
.pte-field label, .pte-grid label { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
.pte-sec { display: flex; flex-direction: column; gap: 8px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.pte-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pte-sec-head h3 { margin: 0; font-family: var(--font-text); font-size: 12px !important; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.pte-presets { display: flex; gap: 4px; }
.pte-presets .btn-link { padding: 0 4px; font-size: 12.5px; font-weight: 700; text-decoration: none; }
.pte-hint { margin: 0; font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.pte-day { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); }
.pte-day:first-of-type { border-top: 0; }
.pte-day-name { padding-top: 6px; font-size: 13px; font-weight: 800; color: var(--ink); }
.pte-day.is-empty .pte-day-name { color: var(--ink-subtle); }
.pte-ranges { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pte-range { display: flex; align-items: center; gap: 6px; }
.pte-range .form-control { width: 108px; font-variant-numeric: tabular-nums; }
.pte-closed { padding-top: 6px; font-size: 13px; color: var(--ink-subtle); }
.pte-day-actions { display: flex; gap: 2px; }
.pte-icon { appearance: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-xs); background: none; font-size: 17px; line-height: 1; color: var(--ink-muted); cursor: pointer; }
.pte-icon:hover { background: var(--surface-sunken); color: var(--ink); }
.pte-range .pte-icon:hover { background: var(--danger-soft); color: var(--danger); }
.pte-copy-panel, .pte-confirm { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 6px 44px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13px; }
.pte-confirm { margin: 0; }
.pte-confirm p { margin: 0; color: var(--ink-muted); }
.pte-confirm.is-danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); }
.pte-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pte-chips-col { flex-direction: column; max-height: 220px; overflow-y: auto; }
.pte-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); font-weight: 600; cursor: pointer; }
.pte-chip input { accent-color: var(--brand); }
.pte-chip small { color: var(--ink-muted); font-weight: 500; }
.pte-panel-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pte-price-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 30px; gap: 8px; align-items: center; }
.pte-money { position: relative; display: flex; align-items: center; }
.pte-money > span { position: absolute; left: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-subtle); pointer-events: none; }
.pte-money .form-control { padding-left: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.pte-add { align-self: flex-start; }
.pte-switch { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding-left: 0; font-size: 14px; font-weight: 700; }
.pte-switch .form-check-input { float: none; margin: 0; }
.pte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pte-grid label { display: flex; flex-direction: column; gap: 4px; }
.pte-grid-3 { grid-template-columns: 1fr 1fr 1.3fr; }
.pte-sched { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.pte-sched.is-on { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface)); }
.pte-sched-toggle { display: flex; align-items: center; gap: 8px; margin: 0; padding-left: 0; font-size: 14px; font-weight: 700; }
.pte-sched-toggle .form-check-input { float: none; margin: 0; }
.pte-problems { padding: var(--space-3); border-radius: var(--radius-md); background: var(--success-soft); font-size: 13px; }
.pte-problems .pte-ok { color: var(--success); font-weight: 700; }
.pte-problems.has-errors { background: var(--danger-soft); color: var(--ink); }
.pte-problems.has-errors > b { color: var(--danger); }
.pte-problems ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
body.adm #ptCalendar .fc-event.pt-evt-draft .pt-evt-inner { border: 2px dashed var(--tbl); background: color-mix(in srgb, var(--tbl) 26%, var(--surface)); }
.pt-new-table { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pt-new-table-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
@media (max-width: 699.98px) { .pt-page { padding: var(--space-3); } body.adm .pt-drawer { --bs-offcanvas-width: 100vw; } }

/* Usuários (Equipe / Clientes): abas rx-tab sobre as listas crud-*. */
.um-tabs { margin-bottom: calc(-1 * var(--space-1)); }
.um-pane { display: flex; flex-direction: column; gap: var(--space-4); }
.um-pane.d-none { display: none; }
.um-customers { display: flex; flex-direction: column; gap: var(--space-3); }
.um-meta { font-variant-numeric: tabular-nums; }
.um-more { align-self: center; }

/* Lista estreita: miniatura/data à esquerda, ações no topo à direita, detalhes embaixo do nome. */
@container crud (max-width: 860px) {
  .crud-row-ad, .crud-row-date, .crud-row-user, .crud-row-customer { grid-template-columns: auto minmax(0, 1fr) auto; }
  .crud-row-extra { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .crud-row-promo { grid-template-columns: minmax(0, 1fr) auto; }
  .crud-row > .crud-thumb, .crud-row > .crud-handle, .crud-row > .crud-date, .crud-row > .crud-avatar { grid-row: 1 / span 5; align-self: start; }
  .crud-row > .crud-main { grid-row: 1; }
  .crud-row > .crud-actions { grid-row: 1; grid-column: -2; align-self: start; }
  .crud-row > .crud-meta, .crud-row > .crud-when, .crud-row > .crud-usage, .crud-row > .crud-price, .crud-row > .crud-status { grid-column: -3 / -1; }
  .crud-row-promo > .crud-meta, .crud-row-promo > .crud-when, .crud-row-promo > .crud-usage, .crud-row-promo > .crud-status { grid-column: 1 / -1; }
  .crud-price { text-align: left; }
}
@media (max-width: 699.98px) {
  .crud-page { padding: var(--space-3); }
  .crud-search { max-width: none; }
  .crud-new { width: 100%; justify-content: center; }
}

/* ======================================================================
   Reservas Flex (/FlexRate) — mesma estrutura da tela antiga (painel lateral + calendário/lista),
   no visual do DS: painel = superfície com seções pt-side-*, suítes/legenda como no /PriceTable,
   Calendário × Lista = crud-seg, calendário num dsb-card e lista no padrão crud-row.
   ====================================================================== */
body.adm .flx-side { width: 300px; min-width: 300px; gap: var(--space-5); padding: var(--space-5) var(--space-4); background: var(--surface); border-right: 1px solid var(--line); color: var(--ink); }
.flx-side-head { display: flex; flex-direction: column; gap: var(--space-2); }
.flx-side-heading { margin: 0; font-family: var(--font-display); font-size: 22px !important; line-height: 28px; font-weight: 800; }
.flx-side-text { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.flx-enable { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.flx-enable-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.flx-enable-status { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.flx-enable.is-off { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, var(--line)); }
.flx-enable.is-off .flx-enable-status { color: var(--warning); font-weight: 700; }
.flx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.flx-view-toggle { display: flex; }
.flx-view-toggle .crud-seg-item { flex: 1; justify-content: center; }
.flx-dot-block { background: #ef4444; box-shadow: inset 0 0 0 1px #dc2626; } /* = FlexCalendarColors.Block */
body.adm .flex-mini-cal .flatpickr-calendar.inline { border-radius: var(--radius-md); }
body.adm .flex-mini-cal .flatpickr-day { height: 32px; line-height: 32px; font-size: 13px; }

.flx-main { min-width: 0; padding: var(--space-6); }
.flx-cal-card { padding: var(--space-3); }
/* default.css pinta o #flexCalendar com a cor antiga (seletor por id): devolve para os tokens do DS. */
body.adm #flexCalendar { --fc-border-color: var(--line); --fc-button-bg-color: var(--surface); --fc-button-border-color: var(--line-strong); --fc-button-text-color: var(--ink); --fc-button-hover-bg-color: var(--surface-sunken); --fc-button-hover-border-color: var(--line-strong); --fc-button-active-bg-color: var(--brand); --fc-button-active-border-color: var(--brand); --fc-today-bg-color: var(--brand-soft); --fc-page-bg-color: var(--surface); --fc-now-indicator-color: var(--accent); background: transparent; }
body.adm #flexCalendar .fc-toolbar-title { font-size: 20px; line-height: 26px; }
body.adm #flexCalendar .fc-col-header-cell-cushion { padding: 8px 4px; font-size: 13px; font-weight: 700; color: var(--ink); text-transform: capitalize; }
body.adm #flexCalendar .fc-timegrid-slot-label-cushion, body.adm #flexCalendar .fc-timegrid-axis-cushion { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Evento = bloco com faixa lateral na cor da legenda (mesmo desenho do .pt-evt-inner). */
body.adm #flexCalendar .fc-event { border-radius: 6px; border-width: 0 0 0 4px; box-shadow: none; }
body.adm .fc-flex-evt { padding: 3px 6px; font-size: 12px; line-height: 15px; }
body.adm .fc-flex-evt .fc-evt-pct { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.adm .fc-flex-evt .fc-evt-title { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; }
body.adm .fc-flex-evt .fc-evt-title .mn-ico { width: 12px; height: 12px; }
body.adm .fc-flex-evt .fc-evt-time { font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums; }
body.adm .fc-flex-evt .fc-evt-badge { display: inline-flex; align-items: center; gap: 3px; margin: 3px 3px 0 0; padding: 0 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink); font-size: 10.5px; line-height: 16px; font-weight: 600; white-space: nowrap; }
body.adm .fc-flex-evt .fc-evt-badge .mn-ico { width: 11px; height: 11px; }
body.adm .fc-block-evt .fc-evt-badge { background: rgba(255, 255, 255, .22); color: #fff; }

/* Lista: resumo + tarifas e bloqueios (crud-row-flex). */
.flx-list { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.flx-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); }
.flx-list-title { margin: var(--space-3) 0 0 !important; }
.crud-row-flex { grid-template-columns: 116px minmax(0, 1.2fr) minmax(0, 1.4fr) auto 76px auto; }
.flx-adj { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flx-adj.is-fixed { background: var(--brand-soft); color: var(--brand-text); }
.flx-adj.is-block { background: var(--danger-soft); color: var(--danger); font-family: var(--font-text); font-size: 13px; }
.flx-rooms { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@container crud (max-width: 860px) {
  .crud-row-flex { grid-template-columns: auto minmax(0, 1fr) auto; }
  .crud-row-flex > .flx-adj { grid-row: 1 / span 5; align-self: start; }
}
@media (max-width: 991.98px) {
  .flx-page { flex-direction: column; }
  body.adm .flx-side { width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 699.98px) { .flx-main { padding: var(--space-3); } }

/* ======================================================================
   Suítes (/RoomCategory) — lista no padrão crud-* (Square "Items", Airbnb "Listings") + editor em abas
   (Airbnb "Listing editor"): Detalhes, Fotos (grade com capa + arrastar, Etsy/Turo) e Comodidades
   (lista ordenável + painel "Adicionar", Airbnb "Amenities"). Views/RoomCategory/*, scripts/RoomCategory/scripts.js.
   ====================================================================== */
.rc-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rc-head-actions .btn { display: inline-flex; align-items: center; gap: 8px; }

.rc-kill { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.rc-kill-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.rc-kill-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rc-kill-text b { font-size: 14px; line-height: 20px; }
.rc-kill-text small { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
.rc-kill .form-check-input { width: 2.5em; height: 1.35em; cursor: pointer; }
.rc-kill.is-blocked { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); }
.rc-kill.is-blocked .rc-kill-ico { background: var(--danger); color: #ffffff; }
.rc-kill.is-blocked .rc-kill-text small { color: var(--danger); font-weight: 600; }
.rc-kill.is-blocked .form-check-input:checked { background-color: var(--danger); border-color: var(--danger); }

.crud-row-suite { grid-template-columns: 72px minmax(0, 2fr) 170px auto auto; }
.crud-thumb.rc-thumb { width: 72px; height: 54px; border-radius: var(--radius-sm); }
.rc-meta { margin-top: 6px; }
.rc-prices { gap: 2px; }
.rc-prices span { display: flex; justify-content: space-between; gap: 8px; }
.rc-prices b { font-weight: 700; white-space: nowrap; }
.rc-tables { display: flex; flex-direction: column; gap: 4px; }
.rc-table-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.rc-table-status .mn-ico { width: 14px; height: 14px; }
.rc-table-status.is-ok { background: var(--success-soft); color: var(--success); }
.rc-table-status.is-warn { background: var(--warning-soft); color: var(--warning); }
.rc-table-status:hover { filter: brightness(.96); text-decoration: underline; }

@container crud (max-width: 860px) {
  .crud-row-suite { grid-template-columns: auto minmax(0, 1fr) auto; }
  .crud-row-suite > .rc-prices, .crud-row-suite > .rc-tables { grid-column: 2 / -1; }
  .crud-row-suite > .rc-tables { flex-direction: row; flex-wrap: wrap; }
  .rc-prices span { justify-content: flex-start; }
}

@container crud (max-width: 560px) {
  .crud-row-suite { grid-template-columns: 56px minmax(0, 1fr); }
  .crud-thumb.rc-thumb { width: 56px; height: 42px; }
  .crud-row-suite > .crud-actions { grid-row: auto; grid-column: 1 / -1; justify-content: flex-end; padding-top: 6px; border-top: 1px dashed var(--line); }
}

/* Modais */
.rc-modal .modal-header { align-items: flex-start; }
.rc-modal-sub { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rc-tabs { display: flex; gap: var(--space-5); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; }
.rc-tabs::-webkit-scrollbar { display: none; }
.rc-tab { appearance: none; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 0 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.rc-tab:hover { color: var(--ink); }
.rc-tab.is-active { color: var(--ink); border-bottom-color: var(--brand); }
.rc-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rc-tab-count { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: 11.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-tab.is-active .rc-tab-count { background: var(--brand-soft); color: var(--brand-text); }
.rc-pane-hint { margin: 0 0 var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rc-autosave { font-size: 12.5px; color: var(--ink-muted); }

/* Detalhes */
.rc-form { display: flex; flex-direction: column; gap: var(--space-4); }
.rc-form-row { display: grid; gap: var(--space-4); }
.rc-form-row-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.rc-form-row-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.rc-f { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rc-f > label { font-size: 13px; font-weight: 700; color: var(--ink); }
.rc-f > small { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rc-f > .rc-count { align-self: flex-end; font-variant-numeric: tabular-nums; }
.rc-f > .rc-count.is-over { color: var(--danger); font-weight: 700; }
.rc-f .EasyMDEContainer { margin-top: 4px; }
.rc-f .EasyMDEContainer .editor-toolbar { border-color: var(--line-strong); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rc-f .EasyMDEContainer .CodeMirror { border-color: var(--line-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-size: 14px; }
@media (max-width: 699.98px) { .rc-form-row-3 { grid-template-columns: 1fr 1fr; } .rc-form-row-3 > .rc-f:first-child { grid-column: 1 / -1; } }
@media (max-width: 899.98px) { .rc-form-row-4 { grid-template-columns: 1fr 1fr 1fr; } .rc-form-row-4 > .rc-f:first-child { grid-column: 1 / -1; } }
@media (max-width: 699.98px) { .rc-form-row-4 { grid-template-columns: 1fr 1fr; } .rc-form-row-4 > .rc-f:first-child { grid-column: 1 / -1; } }

/* Fotos */
.rc-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--ink-muted); text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rc-drop > .mn-ico { width: 28px; height: 28px; color: var(--ink-subtle); }
.rc-drop span { font-size: 14px; color: var(--ink); }
.rc-drop small { font-size: 12px; }
.rc-drop:hover, .rc-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.rc-drop.is-loading { pointer-events: none; opacity: .7; }
.rc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
.rc-photos:empty { display: none; }
.rc-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); cursor: grab; box-shadow: 0 0 0 1px var(--line); }
.rc-photo:first-child { grid-column: span 2; grid-row: span 2; }
.rc-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.rc-photo-cover { position: absolute; top: 8px; left: 8px; display: none; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: var(--shadow-card); }
.rc-photo:first-child .rc-photo-cover { display: inline-block; }
.rc-photo-grip, .rc-photo-del { position: absolute; top: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); box-shadow: var(--shadow-card); opacity: 0; transition: opacity .15s; }
.rc-photo-grip { right: 44px; }
.rc-photo-del { right: 8px; cursor: pointer; }
.rc-photo-del:hover { background: var(--danger); color: #ffffff; }
.rc-photo:hover .rc-photo-grip, .rc-photo:hover .rc-photo-del, .rc-photo:focus-within .rc-photo-del { opacity: 1; }
@media (hover: none) { .rc-photo-grip, .rc-photo-del { opacity: 1; } }
.rc-photo-confirm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: color-mix(in srgb, #000000 62%, transparent); color: #ffffff; font-size: 13px; font-weight: 700; cursor: default; }
.rc-photo-confirm.d-none { display: none; }
.rc-photo-confirm > div { display: flex; gap: 6px; }
.rc-photo.is-ghost { opacity: .35; }
.rc-photo.is-chosen { box-shadow: 0 0 0 2px var(--brand); }
.rc-empty-photos { margin: 0; padding: var(--space-3) 0; font-size: 13px; color: var(--ink-muted); text-align: center; }
@media (max-width: 499.98px) { .rc-photos { grid-template-columns: 1fr 1fr; } }

/* Comodidades */
.rc-feat { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
.rc-feat h4 { margin: 0; font-size: 14px !important; line-height: 20px; font-weight: 700; }
.rc-feat-head, .rc-feat-block { display: flex; flex-direction: column; gap: 2px; }
.rc-feat-head small, .rc-feat-block small { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.rc-feat-list { margin-top: var(--space-3); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.rc-feat-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line); background: var(--surface); }
.rc-feat-row:first-child { border-top: 0; }
.rc-feat-row:nth-child(-n+3) { background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); }
.rc-feat-row.is-ghost { opacity: .4; }
.rc-grip { width: 20px; height: 30px; flex: none; display: grid; place-items: center; color: var(--ink-subtle); cursor: grab; touch-action: none; }
.rc-grip:hover { color: var(--ink); }
.rc-feat-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.rc-feat-icon:hover { border-color: var(--brand); background: var(--brand-soft); }
.rc-feat-icon .icon-preview img { width: 20px; height: 20px; }
body.adm .rc-feat-name { flex: 1; min-width: 0; border-color: transparent; background: transparent; }
body.adm .rc-feat-name:hover { border-color: var(--line-strong); }
body.adm .rc-feat-name:focus { border-color: var(--brand); background: var(--surface); }
.rc-feat-badge { flex: none; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 700; }
.rc-feat-row .mn-iconbtn { width: 30px; height: 30px; flex: none; color: var(--ink-muted); }
.rc-feat-row .mn-iconbtn:hover { background: var(--surface-sunken); color: var(--ink); }
.rc-feat-row .mn-iconbtn.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.rc-feat-empty { margin: 0; padding: var(--space-5) var(--space-4); text-align: center; font-size: 13px; color: var(--ink-muted); }
.rc-feat-add { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); position: sticky; top: 0; }
.rc-feat-inline { margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.rc-feat-inline .form-select, .rc-feat-inline .form-control { flex: 1; min-width: 0; }
@media (max-width: 899.98px) { .rc-feat { grid-template-columns: 1fr; } .rc-feat-add { position: static; } }
@media (max-width: 699.98px) { .rc-head-actions { width: 100%; } .rc-head-actions .crud-new { width: auto; flex: 1; justify-content: center; } }

/* ======================================================================
   Configurações do motel (/MotelSettings, super admin) — "settings" com navegação por seção + um card por seção
   (Supabase "Project Settings", Plain, Ghost no Mobbin): linhas rótulo/ajuda | campo, segredos mascarados com
   olho + copiar (Clay) e barra de salvar que só aparece com alterações (Shopify). Views/MotelSettings/Index.cshtml.
   ====================================================================== */
.set-page { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--space-6); display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.set-nav { position: sticky; top: calc(var(--topbar-h) + var(--space-6)); display: flex; flex-direction: column; gap: 2px; }
.set-nav-title { margin: 0 0 var(--space-2); padding: 0 10px; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.set-nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.set-nav a .mn-ico { width: 16px; height: 16px; flex: none; }
.set-nav a:hover { background: var(--surface-sunken); color: var(--ink); }
.set-nav a.is-active { background: var(--brand-soft); color: var(--brand-text); }
.set-nav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.set-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.set-intro { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.set-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: hidden; }
.set-summary > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-left: 1px solid var(--line); }
.set-summary > div:first-child { border-left: 0; }
.set-summary small { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .05em; }
.set-summary b { font-size: 15px; line-height: 22px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.set-card { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); overflow: hidden; }
.set-card-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.set-card-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-text); }
.set-card-ico .mn-ico { width: 18px; height: 18px; }
.set-card-head h2 { margin: 0; font-family: var(--font-text); font-size: 16px !important; line-height: 22px; font-weight: 800; }
.set-card-head p { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-2) var(--space-6); align-items: start; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.set-row:first-child { border-top: 0; }
.set-label { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.set-label label, .set-label > span { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); }
.set-label small { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }
.set-control { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.set-control textarea.form-control { min-height: 96px; }
.set-hint { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.set-error { display: none; font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--danger); }
.set-row.is-error .set-error { display: block; }
body.adm .set-row.is-error .form-control, body.adm .set-row.is-error .form-select { border-color: var(--danger); }
.set-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 38px; font-size: 15px; font-weight: 600; }
.set-badge { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 700; }

/* Unidade dentro do campo ("horas") */
.set-unit { position: relative; max-width: 220px; }
body.adm .set-unit .form-control { padding-right: 64px; font-variant-numeric: tabular-nums; }
.set-unit > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-subtle); pointer-events: none; }

/* Linha com switch: rótulo à esquerda, switch à direita */
.set-row.set-toggle { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.set-row.set-toggle .set-label { padding-top: 0; }
.set-row.set-toggle .set-error { grid-column: 1 / -1; }

/* Kill switch: destaque vermelho quando bloqueado (mesma linguagem do .rc-kill) */
.set-row.set-kill.is-blocked { background: var(--danger-soft); }
.set-row.set-kill.is-blocked .set-label small { color: var(--danger); font-weight: 600; }
.set-row.set-kill.is-blocked .mn-switch input:checked + i { background: var(--danger); border-color: var(--danger); }

/* Segredo: input mascarado + olho + copiar */
.set-secret { display: flex; gap: 6px; }
body.adm .set-secret .form-control { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.set-secret .mn-iconbtn { width: 38px; height: 38px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-muted); }
.set-secret .mn-iconbtn:hover { background: var(--surface-sunken); color: var(--ink); }
.set-secret .mn-iconbtn .mn-ico { width: 16px; height: 16px; }

/* Barra de salvar: aparece só com alterações pendentes */
.set-savebar { position: sticky; bottom: var(--space-4); z-index: 1010; display: flex; align-items: center; gap: var(--space-3); padding: 10px 10px 10px var(--space-4); border-radius: var(--radius-lg); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-sheet); transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s ease; }
.set-savebar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.set-savebar-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.set-savebar-text .mn-ico { width: 16px; height: 16px; color: var(--warning); }
body.adm .set-savebar .btn-link { color: var(--bg); text-decoration: none; font-weight: 700; }
body.adm .set-savebar .btn-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .set-savebar { transition: none; } }

@media (max-width: 991.98px) {
  .set-page { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .set-nav { top: var(--topbar-h); z-index: 1015; flex-direction: row; gap: 4px; margin: 0 calc(var(--space-6) * -1); padding: var(--space-2) var(--space-6); background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav-title { display: none; }
  .set-nav a { flex: none; min-height: 32px; border-radius: var(--radius-pill); font-size: 13px; }
}
@media (max-width: 699.98px) {
  .set-page { padding: var(--space-3); }
  .set-nav { margin: 0 calc(var(--space-3) * -1); padding: var(--space-2) var(--space-3); }
  .set-row { grid-template-columns: minmax(0, 1fr); padding: var(--space-3) var(--space-4); }
  .set-label { padding-top: 0; }
  .set-card-head { padding: var(--space-3) var(--space-4); }
  .set-unit { max-width: none; }
  .set-summary > div { border-left: 0; border-top: 1px solid var(--line); }
  .set-summary > div:first-child { border-top: 0; }
}