:root {
    --pine: #0e2239;
    --pine-soft: #1c3a5c;
    --coral: #d4af37;
    --paper: #fffdf9;
    --sand: #f5f1e9;
    --line: #dfe3e7;
    --ink: #1c2733;
    --muted: #5f6d7b;
    --white: #fff;
    --danger: #b3452f;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--sand);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* LIVE-1 Part B — a general backstop found necessary during this
       gate's own 320px validation: two separate elements on the
       Approvals page (the top nav, the filter-chip row) each had
       overflow-x:auto that failed to actually constrain their own box
       to the available width, silently pushing the whole page wider
       than the viewport. A genuinely scrollable region (every existing
       `overflow-x:auto` wrapper around a wide table, already used
       throughout Admin/Partner) is unaffected by this — only content
       that would otherwise leak past the page's own right edge is
       clipped here, and everything currently wrapped for horizontal
       scroll stays scrollable within its own container. */
    overflow-x: hidden;
}
a { color: inherit; }
:where(a, button, summary):focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }

.ws-shell { display: flex; min-height: 100vh; }
.ws-nav {
    display: flex; flex-direction: column; gap: 4px;
    width: 232px; flex: 0 0 232px; padding: 24px 16px;
    background: var(--pine); color: #dbe4ec;
}
.ws-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 0 8px; font-weight: 750; font-size: 17px; color: var(--white); }
.ws-brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 8px; background: var(--coral); color: var(--pine); font-weight: 800; }
.ws-nav a { display: block; min-height: 40px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 650; text-decoration: none; }
.ws-nav a:hover { background: rgba(255,255,255,.06); }
.ws-nav a.is-active { background: rgba(255,255,255,.1); color: var(--white); }
.ws-nav-user { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #a9b8c6; }
.ws-nav form { margin-top: 8px; }
.ws-nav button.ws-logout { width: 100%; min-height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: transparent; color: #dbe4ec; font-size: 13px; font-weight: 700; cursor: pointer; }

/* P2.74C — the account-menu flyout: a small white popover regardless of
   which nav variant (dark sidebar or dark top-bar) it opens from — only
   the trigger itself (<summary>) inherits the surrounding nav's own
   text color. Built on a plain <details>/<summary> disclosure, so no
   JS is needed for open/close/keyboard/outside-dismiss behaviour. */
.ws-account-menu { position: relative; margin-top: auto; }
.ws-nav--partner-future .ws-account-menu, .ws-nav--admin-future .ws-account-menu { margin-top: 0; }
.ws-account-trigger { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: inherit; cursor: pointer; list-style: none; white-space: nowrap; }
.ws-account-trigger::-webkit-details-marker { display: none; }
.ws-account-trigger::after { content: "\25BE"; margin-left: 6px; font-size: 11px; }
.ws-account-trigger:hover { background: rgba(255,255,255,.08); }
.ws-account-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    display: flex; flex-direction: column; gap: 2px; min-width: 220px;
    padding: 10px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--white); box-shadow: 0 10px 28px rgba(14,34,57,.18);
}
.ws-account-identity { padding: 4px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ws-account-identity strong { display: block; font-size: 13px; color: var(--ink); }
.ws-account-identity span { display: block; font-size: 12px; color: var(--muted); word-break: break-all; }
.ws-account-panel a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ws-account-panel a:hover { background: var(--sand); }
.ws-account-switcher { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); max-height: 220px; overflow-y: auto; }
.ws-account-switcher-label { display: block; padding: 6px 10px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* Partner "Add another property" — sits immediately after the (possibly
   scrollable) switcher block; its own top border keeps it visually
   separated from the property list above it, matching that block's own
   separator treatment, without being inside the scrolling area itself. */
.ws-account-switcher-add { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); }
.ws-account-switcher-add:hover { color: var(--ink); }
.ws-account-panel form { margin: 4px 0 0; }
.ws-account-panel button.ws-logout { width: 100%; min-height: auto; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--danger); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.ws-account-panel button.ws-logout:hover { background: var(--sand); }

.ws-main { flex: 1; min-width: 0; padding: 28px 32px 64px; }
.ws-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.ws-header h1 { margin: 0; font-size: 26px; font-weight: 750; color: var(--pine); }
.ws-eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ws-back { font-size: 13px; font-weight: 700; color: var(--pine-soft); text-decoration: none; }

.ws-status { max-width: 720px; margin: 0 0 20px; padding: 12px 16px; border-radius: 10px; background: #eef7ee; border: 1px solid #bfe3bf; color: #285c28; font-size: 13px; font-weight: 650; }
.ws-status--error { background: #fbeceb; border-color: #e6b3ac; color: #7a2b1c; }

.ws-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.ws-card + .ws-card { margin-top: 16px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ws-task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.ws-task-grid > .ws-card + .ws-card { margin-top: 0; }
.ws-task-action, .ws-policy-choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.ws-task-action:first-of-type, .ws-policy-choice:first-of-type { border-top: 0; }
.ws-task-action p, .ws-policy-choice p { margin: 4px 0; }
.ws-review-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin: 16px 0; }
.ws-review-facts > div { padding: 12px; border-radius: 9px; background: var(--sand); overflow-wrap: anywhere; }
.ws-review-facts p { margin: 5px 0 0; }
.ws-policy-choice { margin: 0; }
.ws-inline-decision { min-width: min(100%, 280px); }

@media (max-width: 520px) {
    .ws-task-action, .ws-policy-choice { align-items: stretch; flex-direction: column; }
    .ws-task-action .ws-button, .ws-policy-choice .ws-button { width: 100%; text-align: center; }
}

.ws-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 750; }
.ws-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.ws-chip--complete { background: #eaf6ea; color: #256b25; }
.ws-chip--complete::before { background: #2f9e2f; }
.ws-chip--pending { background: #fdf3e2; color: #8a5a06; }
.ws-chip--pending::before { background: #d4af37; }
.ws-chip--attention { background: #fbeceb; color: #7a2b1c; }
.ws-chip--attention::before { background: #b3452f; }
.ws-chip--neutral { background: #eef0f2; color: #4a5560; }
.ws-chip--neutral::before { background: #8a97a3; }

/* P2.25 — an unconfigured/unavailable Finance amount is never rendered
   as a number (never "$0.00"); this label style makes that visually
   unmistakable from an actual, known-zero amount. */
.ws-amount-unknown { color: #6b7683; font-style: italic; font-size: 13px; }

.ws-section-title { margin: 0 0 4px; font-size: 15px; font-weight: 750; color: var(--pine); }
.ws-section-link { display: block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--pine-soft); text-decoration: none; }

table.ws-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ws-table th { padding: 8px 10px; border-bottom: 2px solid var(--line); text-align: left; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
table.ws-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* P0 — DataTable scroll-container system. A wide operational table
   (Admin Bookings/Finance, Partner Reservations/Finance) must never
   force the PAGE BODY to scroll horizontally — only the table itself,
   inside its own deliberate container, exactly as the brief's
   responsive Definition of Done requires. A wrapper div (not a
   CSS-only trick on the <table> itself) is used deliberately: applying
   overflow directly to a <table> element requires splitting
   thead/tbody into independently-flowed sub-tables to make `display:
   block` work, which lets header and body column widths drift out of
   alignment when their content lengths differ — a real, visible defect
   this avoids entirely. The sticky header/first-column modifiers below
   are opt-in per table (`data-sticky-first-col`) since not every table
   has an identity column worth freezing. */
.ws-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.ws-table-scroll table.ws-table { min-width: max-content; }
.ws-table-scroll thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--white);
    box-shadow: 0 1px 0 var(--line);
}
.ws-table-scroll[data-sticky-first-col] td:first-child,
.ws-table-scroll[data-sticky-first-col] th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--white);
    box-shadow: 1px 0 0 var(--line);
}
.ws-table-scroll[data-sticky-first-col] th:first-child { z-index: 3; }

.ws-form label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--pine); }
.ws-form label:first-child { margin-top: 0; }
.ws-form input[type="text"], .ws-form input[type="url"], .ws-form input[type="time"], .ws-form input[type="number"], .ws-form input[type="password"], .ws-form input[type="email"], .ws-form select, .ws-form textarea {
    width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #c9d0d7; border-radius: 9px; font: inherit; font-size: 14px; background: var(--white); color: var(--ink);
}
.ws-form textarea { min-height: 110px; resize: vertical; }
.ws-form .ws-hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
/* P0 — auto-fit rather than a hard 2-column grid: at typical
   laptop widths (~900-1279px) this still lays out as exactly 2 columns
   (each field comfortably exceeds the 220px minimum, so only 2 fit per
   row), preserving every existing form's current appearance pixel-for-
   pixel. At genuinely wide desktop (1440px+) it can flow to 3+ columns
   instead of leaving a tall, sparse 2-column form with excess empty
   width either side — "comfortable premium density," not a redesign
   of any field's own layout. */
.ws-fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.ws-checkbox { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ws-checkbox input { width: 20px; height: 20px; }

/* P0 — MoneyInput. The money boundary is enforced right here: the
   visible, editable field is always a major-unit decimal (e.g.
   "152.00"), matched by an adjacent hidden input carrying the actual
   minor-unit integer under the field's REAL name — the exact name the
   existing, unmodified backend route already validates/persists. No
   controller, request, or persisted-column ever sees a major-unit
   value; this is a pure presentation/input-edge substitution (see
   workspace-money.js). A field with JS disabled degrades to a plain
   labeled number input the visible label already says is in minor
   units — never silently broken. */
.ws-money-field { position: relative; }
.ws-money-field .ws-money-prefix {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 13px; font-weight: 700; pointer-events: none;
}
.ws-money-field input[data-money-major], .ws-money-field input[data-rc-price] { padding-left: 46px; }
.ws-money-presentation { font-variant-numeric: tabular-nums; }

.ws-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 20px; border: 0; border-radius: 9px; background: var(--pine); color: var(--white); font-size: 14px; font-weight: 750; cursor: pointer; text-decoration: none; }
.ws-button[hidden] { display: none; }
.ws-button:hover { background: var(--pine-soft); }
.ws-button--secondary { background: transparent; border: 1px solid var(--pine); color: var(--pine); }
/* Background and text color are changed together, never independently — a dark hover/focus/active
   background must never be paired with the base state's dark text (the contrast defect this closes). */
.ws-button--secondary:is(:hover, :focus-visible, :active) { background: var(--pine-soft); color: var(--white); }
.ws-button--danger { background: var(--danger); }
.ws-button--small { min-height: 36px; padding: 0 14px; font-size: 13px; }
/* Client-side-only safety: a disabled primary action is supplementary
   guidance while a scope/field is incomplete, never a substitute for
   server-side validation, which stays authoritative either way. */
.ws-button:disabled { opacity: .45; cursor: not-allowed; }
.ws-button:disabled:hover { background: var(--pine); }
.ws-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.ws-empty { padding: 24px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* P2.74A — small generic form-field/error primitives; previously every
   form in this workspace inlined its own one-off error styling, so
   these are added here (not a feature-specific stylesheet) precisely
   so future forms can reuse them instead of repeating inline styles. */
.ws-field { margin-bottom: 14px; }
.ws-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.ws-field input:not([type="checkbox"]):not([type="radio"]), .ws-field select, .ws-field textarea {
    width: 100%; box-sizing: border-box; min-height: 40px; border: 1px solid var(--line); border-radius: 8px;
    padding: 0 11px; font: inherit; font-size: 13.5px;
}
.ws-field textarea { min-height: 60px; padding: 8px 11px; }
/* A checkbox/radio row (e.g. "Allow the property to specify whether it
   is complimentary or chargeable.") reads as one aligned inline row —
   checkbox beside its text, never a stretched full-width box — whether
   or not it follows a .ws-field-question heading above it. */
.ws-field-question { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.ws-field label:has(> input[type="checkbox"]),
.ws-field label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 0; }
.ws-field input[type="checkbox"], .ws-field input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; }
.ws-error { color: var(--danger, #b3261e); font-size: 12.5px; margin: 0 0 12px; }

.ws-review-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ws-review-item:last-child { border-bottom: 0; }
.ws-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.ws-diff h4 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ws-diff-block { padding: 10px 12px; border-radius: 8px; background: var(--sand); font-size: 13px; word-break: break-word; }

/* P2.21 — Partner Reservations */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ws-reservation-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ws-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-filter-tab {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 99px;
    border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--pine-soft); text-decoration: none;
}
.ws-filter-tab:hover { border-color: var(--pine-soft); }
.ws-filter-tab.is-active { background: var(--pine); border-color: var(--pine); color: var(--white); }
.ws-search { flex: 1 1 220px; min-width: 180px; }
.ws-search input {
    width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
    font-size: 14px; font-family: var(--sans); color: var(--ink);
}

/* P2.46 — reservation-list arrival/departure date-range search, sits
   inside the same .ws-reservation-filters flex row/column as the
   filter tabs and text search above. */
.ws-reservation-date-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-reservation-date-filters label { display: flex; flex-direction: column; gap: 3px; }
.ws-reservation-date-filters input[type="date"] {
    min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px;
    font-size: 13px; font-family: var(--sans); color: var(--ink);
}
.ws-checkbox-filter {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
    font-size: 13px; font-weight: 600; color: var(--pine-soft);
}
.ws-checkbox-filter input { width: 18px; height: 18px; }

.ws-reservation-reference { font-weight: 750; color: var(--pine); text-decoration: none; }
.ws-reservation-reference:hover { text-decoration: underline; }
.ws-reservation-guest { color: var(--muted); font-size: 12px; }

.ws-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.ws-pagination-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    border-radius: 9px; border: 1px solid var(--line); color: var(--pine-soft); text-decoration: none; font-weight: 700; font-size: 13px;
}
.ws-pagination-link.is-active { background: var(--pine); border-color: var(--pine); color: var(--white); }
.ws-pagination-link:hover { border-color: var(--pine-soft); }

.ws-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px 24px; margin: 0; }
.ws-detail-grid dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 3px; }
.ws-detail-grid dd { margin: 0; font-size: 14px; word-break: break-word; }
.ws-hint { margin: 0; color: var(--muted); font-size: 12px; }

/* P2.22 — Booking-scoped conversation */
.ws-message-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ws-message-new-badge {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px;
    background: var(--coral); color: var(--pine); font-size: 11px; font-weight: 800; letter-spacing: .02em;
}

.ws-message-thread { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; }
.ws-message { max-width: 72%; padding: 10px 14px; border-radius: 12px; background: var(--sand); }
.ws-message--property { align-self: flex-end; background: #e7f0ea; border: 1px solid #cfe0d6; }
.ws-message--traveller { align-self: flex-start; background: var(--white); border: 1px solid var(--line); }
.ws-message-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.ws-message-sender { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pine-soft); }
.ws-message-time { font-size: 11px; color: var(--muted); }
.ws-message-body { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.ws-message-composer { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ws-message-composer textarea {
    width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid #c9d0d7; border-radius: 9px;
    font: inherit; font-size: 14px; color: var(--ink); resize: vertical;
}
.ws-message-composer .ws-button { align-self: flex-end; }
.ws-message-closed-note { margin-top: 16px; padding: 12px 14px; border-radius: 9px; background: var(--sand); }

/* P2.26 — Guest Reviews. */
.ws-review-summary { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.ws-review-score-tile { display: grid; justify-items: center; gap: 4px; padding: 18px 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--sand); text-align: center; }
.ws-review-score-tile .value { font-size: 32px; font-weight: 800; color: var(--pine); line-height: 1; }
.ws-review-score-tile .count { color: var(--muted); font-size: 12px; }
.ws-review-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 24px; }
.ws-review-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ws-review-category span:last-child { font-weight: 750; color: var(--pine); }
.ws-sort-tabs { display: flex; gap: 6px; margin: 18px 0; }
.ws-sort-tabs a { padding: 6px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--sand); min-height: 44px; display: inline-flex; align-items: center; }
.ws-sort-tabs a.is-active { color: var(--white); background: var(--pine); }
.ws-review-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; }
.ws-review-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ws-review-score-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 4px 9px; border-radius: 8px; background: var(--pine); color: var(--white); font-weight: 800; font-size: 13px; }
.ws-review-body { margin: 10px 0 0; color: var(--ink); font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.ws-review-response { margin-top: 12px; padding: 12px 14px; border-radius: 9px; background: var(--sand); }
.ws-review-response p { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.ws-review-respond-form { margin-top: 12px; display: grid; gap: 8px; }
.ws-review-respond-form textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--ink); resize: vertical; min-height: 70px; }
.ws-review-respond-form .ws-button { align-self: flex-start; }

@media (max-width: 900px) {
    .ws-shell { flex-direction: column; }
    .ws-nav { width: 100%; flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 14px 16px; }
    .ws-brand { margin-bottom: 0; }
    .ws-nav-user { margin-top: 0; padding: 0; border-top: 0; }
    .ws-nav form { margin-top: 0; }
    .ws-main { padding: 20px 16px 48px; }
    .ws-fieldset { grid-template-columns: 1fr; }
    .ws-diff { grid-template-columns: 1fr; }
    .ws-reservation-filters { flex-direction: column; align-items: stretch; }
    /* .ws-search's 220px flex-basis is a main-axis (width) sizing hint
       for the default row layout; once the form stacks to a column here,
       the main axis flips to vertical and that same basis is read as a
       height, leaving a large empty gap below the input. Reset it. */
    .ws-search { flex: 1 1 auto; }
    .ws-reservation-date-filters { flex-direction: column; align-items: stretch; }
    .ws-reservation-date-filters input[type="date"] { width: 100%; }
    .ws-review-summary { grid-template-columns: 1fr; gap: 16px; }
    .ws-review-score-tile { justify-self: start; }
    .ws-sort-tabs { flex-wrap: wrap; }
}

/* P2.74A pre-commit correction — the shared Property context header +
   sub-navigation, previously copy-pasted identically into
   partner-property.css and partner-rooms.css (see those files' own
   removal notes). Centralised here — the one stylesheet every Partner
   workspace page already loads via the base layout — so it applies
   automatically to every current and future property page (including
   the new P2.74A Amenities pages, which is exactly the regression this
   correction closes: those pages never loaded either duplicate file,
   so the identical markup rendered as bare underlined links). Visual
   language: navy body text, restrained gold active-tab underline,
   matching the pre-existing Rooms/Property design exactly — this is a
   centralisation, not a redesign. */
.pr-property-context { margin: -10px 0 26px; border: 1px solid #d9e1e8; border-radius: 12px; background: #fff; }
.pr-property-context__identity { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px 8px; }
.pr-property-context__identity span { color: #758397; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pr-property-context__identity strong { font-size: 14px; color: #12304e; }
.pr-property-context nav { display: flex; gap: 4px; overflow-x: auto; padding: 0 10px; scrollbar-width: thin; }
.pr-property-context nav a { flex: 0 0 auto; padding: 11px 10px 12px; border-bottom: 3px solid transparent; color: #52657a; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pr-property-context nav a:hover { color: #173b61; }
.pr-property-context nav a.is-active { border-bottom-color: #d3a927; color: #112a46; }

@media (max-width: 768px) {
    .pr-property-context { margin-top: 0; }
    .pr-property-context__identity { padding-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* LIVE-3D correction — the "future" top-nav shell's own responsive
   collapse (≤1100px / ≤900px main-padding / ≤600px stacked layout) was
   previously maintained as two byte-for-byte identical copies, one in
   partner-shell.css and one in admin-shell.css (down to duplicated
   comments describing "the exact fix [the other file] applied" —
   confirmed while fixing the ≤390px clipping both files independently
   patched). Consolidated here, targeting the shared `.ws-nav--future`/
   `.ws-shell--future`/`.ws-nav-links` classes every future-shell page
   already carries alongside its role-specific class (see
   workspace.blade.php) — this is the ONE place either role's
   nav-collapse behaviour is defined; a fix here fixes both, forever,
   instead of two more parallel patches next time.

   Every selector below compounds THREE classes on one element
   (`.ws-nav.ws-nav--future`, `.ws-shell.ws-shell--future`) specifically
   to OUTRANK the two-class role-specific base rules in partner-shell.css/
   admin-shell.css (e.g. `.ws-shell--partner-future > .ws-main`) on
   specificity alone (0,3,0) beats (0,2,0) regardless of which
   stylesheet happens to load second — this override must never depend
   on `<link>` tag order in workspace.blade.php.

   Desktop layout (>1100px) is untouched — these rules only ever apply
   below it, and 1440px (the required desktop validation width) never
   reaches them. */
@media (max-width: 1100px) {
    .ws-nav.ws-nav--future {
        grid-template-columns: 1fr auto;
        gap: 8px 18px;
        padding: 10px 20px;
    }
    .ws-nav.ws-nav--future .ws-nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        overflow-x: auto;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        scrollbar-width: thin;
    }
    .ws-nav.ws-nav--future .ws-nav-user {
        grid-column: 2;
        grid-row: 1;
    }
    .ws-shell.ws-shell--future > .ws-main {
        padding: 22px 20px 56px;
    }
}

@media (max-width: 900px) {
    .ws-shell.ws-shell--future > .ws-main {
        padding: 20px 16px 48px;
    }
}

@media (max-width: 600px) {
    .ws-nav.ws-nav--future { padding: 9px 16px; }
    .ws-nav.ws-nav--future .ws-brand { font-size: 15px; }
    .ws-nav.ws-nav--future .ws-user-label { display: none; }
    .ws-nav.ws-nav--future button.ws-logout {
        min-height: 34px;
        padding: 0 11px;
        font-size: 12px;
    }

    /* The nav bar itself never scrolls the PAGE (hard `overflow-x: hidden`
       backstop — CSS Grid track sizing otherwise keeps deferring to the
       nav's intrinsic content width and leaks past the viewport). Every
       destination stays reachable by scrolling the link strip itself,
       which now also carries a right-edge fade so a partially-visible
       item (e.g. "Finance" cut mid-word at exactly this width) reads as
       "more to scroll", not as a rendering bug — the actual defect this
       correction fixes, not merely a re-statement of the pre-existing
       "scroll within the nav" pattern. */
    .ws-nav.ws-nav--future {
        display: block;
        overflow-x: hidden;
    }
    .ws-nav.ws-nav--future .ws-brand,
    .ws-nav.ws-nav--future .ws-nav-user {
        display: inline-flex;
    }
    .ws-nav.ws-nav--future .ws-nav-user { float: right; }
    .ws-nav.ws-nav--future .ws-nav-links {
        clear: both;
        display: flex;
        width: 100%;
        max-width: 100vw;
        margin-top: 8px;
        padding-top: 7px;
        padding-right: 28px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .ws-nav.ws-nav--future .ws-nav-links a,
    .ws-nav.ws-nav--future .ws-nav-links .ws-nav-future {
        flex-shrink: 0;
    }
}

/* Property Location onboarding — shared by Partner "Add your property"
   and Admin "New Property" (resources/views/workspace/partials/google-place-picker.blade.php). */
.ws-location-picker { margin: 4px 0 20px; }
.ws-location-search [data-place-autocomplete-mount] { min-height: 44px; }
.ws-location-search gmp-place-autocomplete { width: 100%; }
.ws-location-confirmation { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #f7faf8; }
.ws-location-confirmation-name { margin: 0; font-weight: 600; color: var(--pine, #1f3b30); }
.ws-location-confirmation-address { margin: 2px 0 10px; color: var(--muted); font-size: 13px; }
.ws-location-map { width: 100%; height: 160px; border-radius: 8px; overflow: hidden; background: #e9e5dc; }
.ws-location-confirmation [data-location-clear] { margin-top: 10px; }
.ws-location-current-address { margin: 0 0 10px; font-size: 14px; }
.ws-location-correct { margin-top: 4px; }
.ws-location-correct summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }

@media (max-width: 900px) {
    .ws-location-map { height: 140px; }
}

/* Show/Hide password toggle — the one shared pre-auth password field
   (Sign in, Create account, Set a new password). The button overlays
   the input rather than sitting beside it, so revealing/hiding the
   password never changes the input's own box size — no layout shift.
   `.ws-form .ws-password-field input` deliberately repeats `.ws-form`
   so this outranks `.ws-form input[type="password"]`'s own padding
   (same specificity, later in the file) without touching that shared
   rule, which every other plain text/number/url field on this page
   still relies on untouched. */
.ws-password-field { position: relative; }
.ws-form .ws-password-field input { padding-right: 44px; }
.ws-password-toggle {
    position: absolute; top: 0; right: 0; width: 44px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; color: var(--muted);
}
.ws-password-toggle:hover { color: var(--pine); }
.ws-password-toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: -3px; border-radius: 6px; }
.ws-password-toggle-icon { width: 20px; height: 20px; }
.ws-password-toggle-icon[hidden] { display: none; }

/* Customer Authentication Slice 2 — customer-only "Continue with Google". */
.ws-oauth-button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 650; text-decoration: none; }
.ws-oauth-button:is(:hover, :focus-visible) { border-color: var(--pine); }
.ws-oauth-button__mark { flex: none; }
.ws-social-auth { display: grid; gap: 10px; }
.ws-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 12px; }
.ws-divider::before, .ws-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Getting there — calm, card-based journey management (Admin + Partner). */
.gt-page { max-width: 880px; }
.gt-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.gt-page-head h1 { margin: 2px 0 0; }
.gt-card { background: #fff; border: 1px solid var(--line, #e3e6ea); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.gt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gt-card-title { margin: 0; font-size: 16px; font-weight: 750; color: var(--ink, #1c2733); }
.gt-section { margin-top: 26px; }
.gt-section-title { font-size: 13px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #66758a); margin: 0 0 12px; }
.gt-muted { color: var(--muted, #66758a); font-size: 13px; margin: 0; }
.gt-summary-route { font-size: 17px; font-weight: 700; margin: 6px 0 8px; color: var(--ink, #1c2733); }
.gt-summary-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: #33424f; }
.gt-summary-empty { margin-top: 6px; }
.gt-line { margin: 2px 0; font-size: 14px; color: #33424f; line-height: 1.5; }
.gt-line--price { font-weight: 650; color: var(--ink, #1c2733); }
.gt-line--review, .gt-review-text { color: #7a2b1c; font-size: 13.5px; line-height: 1.5; margin: 2px 0; }
.gt-review { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fbeceb; }
.gt-review-title { margin: 0 0 4px; font-weight: 750; color: #7a2b1c; }
.gt-link { color: #1d5fa8; font-weight: 650; font-size: 13.5px; text-decoration: none; }
.gt-link:hover { text-decoration: underline; }
.gt-edit, .gt-more { margin-top: 10px; }
.gt-edit > summary, .gt-more > summary, .gt-add-summary { cursor: pointer; list-style: none; }
.gt-edit > summary::-webkit-details-marker, .gt-more > summary::-webkit-details-marker, .gt-add-summary::-webkit-details-marker { display: none; }
.gt-button { display: inline-block; padding: 7px 16px; border-radius: 9px; border: 1px solid var(--line, #d6dbe1); font-weight: 650; font-size: 13.5px; background: #fff; }
.gt-edit[open] > summary.gt-button { background: #f2f4f7; }
.gt-more > summary { font-size: 13px; font-weight: 650; color: #44525f; }
.gt-more > summary::before { content: "▸ "; }
.gt-more[open] > summary::before { content: "▾ "; }
.gt-add-summary { font-weight: 700; font-size: 14.5px; color: #1d5fa8; }
.gt-form { margin-top: 14px; display: grid; gap: 14px; }
.gt-fieldset { border: 0; margin: 0; padding: 0; }
.gt-fieldset > legend { font-size: 13px; font-weight: 750; color: var(--ink, #1c2733); margin-bottom: 8px; padding: 0; }
.gt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; }
.gt-field { display: grid; gap: 4px; min-width: 0; }
.gt-field--wide { grid-column: 1 / -1; }
.gt-field label { font-size: 12.5px; font-weight: 650; color: #44525f; }
.gt-field input, .gt-field select, .gt-field textarea { width: 100%; box-sizing: border-box; }
.gt-optional { font-weight: 400; color: var(--muted, #66758a); }
.gt-checks { display: grid; gap: 8px; }
.gt-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: #33424f; }
.gt-check input[type=checkbox] { margin-top: 3px; }
.gt-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gt-hint { margin: 0; color: var(--muted, #66758a); font-size: 12.5px; line-height: 1.5; }
.gt-history { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: #33424f; }
.gt-history li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.gt-history-dates { font-weight: 650; min-width: 190px; }
.gt-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
@media (max-width: 640px) {
    .gt-card { padding: 14px 14px; border-radius: 12px; }
    .gt-summary-route { font-size: 16px; }
    .gt-grid { grid-template-columns: 1fr 1fr; }
    .gt-actions .ws-button { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 420px) {
    .gt-grid { grid-template-columns: 1fr; }
}
.gt-form input[type="text"], .gt-form input[type="number"], .gt-form input[type="date"], .gt-form select, .gt-form textarea {
    width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #c9d0d7; border-radius: 9px; font: inherit; font-size: 14px; background: var(--white, #fff); color: var(--ink, #1c2733); box-sizing: border-box;
}
.gt-form textarea { min-height: 90px; resize: vertical; }
.gt-preview { margin: 4px 0 0; padding: 10px 12px; border-radius: 9px; background: #f2f6fa; font-size: 13.5px; color: var(--ink, #1c2733); }
.gt-preview strong { font-weight: 700; }

/* Before you stay — Admin/Partner preview card (not an editor). */
.bys-card .bys-empty{margin:0;color:var(--muted,#66758a);font-size:13px}
.bys-card .bys-facts{margin:0;padding:0;list-style:none}
.bys-card .bys-facts li{padding:9px 0;border-top:1px solid #eef1f4;font-size:14px;font-weight:600}
.bys-card .bys-facts li:first-child{border-top:0;padding-top:0}
.bys-card .bys-groups{margin-top:12px}
.bys-card .bys-group{padding:10px 0;border-top:1px solid #eef1f4}
.bys-card .bys-group:first-child{border-top:0;padding-top:0}
.bys-card .bys-group-title{margin:0;color:var(--muted,#66758a);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bys-card .bys-group-summary{margin:3px 0 0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.bys-card .bys-more{margin-top:4px}
.bys-card .bys-more>summary{padding:10px 0 2px;font-size:13px;font-weight:700;cursor:pointer}
.bys-card .bys-problems{margin:14px 0 0;padding:12px 14px;list-style:none;border:1px solid #f0d9a4;border-radius:10px;background:#fff8e8}
.bys-card .bys-problems li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:4px 0;font-size:13px;color:#6b4a0c}
.bys-card .bys-problems a{font-weight:700;color:#6b4a0c}

/* Property Information: check-in / check-out controls. */
.ws-times{margin:16px 0 16px;padding:0;border:0;min-width:0}
.ws-times>legend{padding:0;margin:0 0 8px;font-size:13px;font-weight:800;color:var(--ink,#10243d)}
.ws-times .ws-optional{font-weight:600;color:var(--muted,#66758a)}
.ws-field-help{margin:6px 0 0;color:var(--muted,#66758a);font-size:12px;line-height:1.5}
.ws-field-error{margin:6px 0 0;color:#a63a2f;font-size:12.5px;font-weight:700}
.ws-legacy-time{margin-top:12px;padding:12px 14px;border:1px dashed #d8c58f;border-radius:10px;background:#fffaf0}
.ws-legacy-time p{margin:0 0 8px;font-size:13px}
.ws-legacy-time .ws-field-help{margin:8px 0 0}
.ws-pay-set{margin:0 0 18px;padding:0;border:0;min-width:0}
.ws-pay-set>legend,.ws-pay-set>label{display:block;margin:0 0 8px;padding:0;font-size:13px;font-weight:800;color:var(--ink,#10243d)}
.ws-pay-choices{display:flex;flex-wrap:wrap;gap:8px 18px}
.ws-pay-choices label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:600}
.ws-pay-choices--sub{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px 14px;margin:10px 0 0;padding-left:4px}
.ws-pay-submit{margin-top:16px}

/* Admin Property Onboarding — search, filters and sorting controls. */
.oq-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 12px; }
.oq-search { grid-column: 1 / -1; }
.oq-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.oq-search input[type="search"], .oq-field select {
    width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border: 1px solid #c9d0d7; border-radius: 9px;
    font: inherit; font-size: 14px; background: var(--white); color: var(--ink);
}
.oq-search input[type="search"] { min-height: 48px; font-size: 15px; }
.oq-search input[type="search"]:focus, .oq-field select:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--pine-soft); }
.oq-actions { display: flex; gap: 8px; align-items: center; min-height: 42px; }
.oq-count { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.oq-empty { padding: 28px 12px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }
a.oq-sort { color: inherit; text-decoration: none; white-space: nowrap; }
a.oq-sort:hover { color: var(--pine); text-decoration: underline; }
@media (max-width: 640px) { .oq-controls { grid-template-columns: 1fr 1fr; } }