/* ============================================================
   SBooking core styles: tokens, base, brand lockup, forms,
   buttons, badges, toasts, admin, shell, host pages.
   Component styles live in ./components/ (bookings, property-card,
   chat, reviews, rooms, attractions, navbar, auth, footer, newsletter,
   map, empty-state, dashboard, charts, tour, listbar, confirm, properties, host-bookings, property-edit, messages, settings, support, stay, combobox, advanced-search, billing). Read docs/UI-GUIDE.md before adding UI.
   ============================================================ */
/* Imported files are not fingerprinted like site.css is: bump ?v= when you change a component file,
   or browsers keep serving their cached copy. */
@import url("components/client-pagination.css?v=20261103shared-pagination");
@import url("components/hero.css?v=20261031editorialv2");
@import url("components/hosting-page.css?v=20261103compact-hosts");
@import url("components/property-card.css?v=20261019d");
@import url("components/favorites.css?v=20261102sharedtabs");
@import url("components/chat.css?v=20261010");
@import url("components/reviews.css?v=20261103reviewfocus");
@import url("components/bookings.css?v=20261102accountcards");
@import url("components/empty-state.css");
@import url("components/map.css?v=20261019b");
@import url("components/newsletter.css?v=20261103focus");
@import url("components/footer.css?v=20261104navy-footer");
@import url("components/legal-pages.css?v=20261103notice-removed");
@import url("components/attractions.css?v=20261103art15");
@import url("components/rooms.css?v=20261019d");
@import url("components/navbar.css?v=20261019b");
@import url("components/brand.css?v=20261013a");
@import url("components/auth.css?v=20261104simple-registration");
@import url("components/charts.css?v=20261013a");
@import url("components/dashboard.css?v=20261013a");
@import url("components/tour.css?v=20261012a");
@import url("components/listbar.css?v=20261102sharedtabs");
@import url("components/confirm.css?v=20261010");
@import url("components/properties.css?v=20261102accountcards");
@import url("components/host-bookings.css?v=20261102accountcards");
@import url("components/property-edit.css?v=20261101direct");
@import url("components/property-setup.css?v=20261101direct");
@import url("components/messages.css?v=20261102sharedtabs");
@import url("components/settings.css?v=20261019a");
@import url("components/support.css?v=20261102tipsrow");
@import url("components/stay.css?v=20261103contacts");
@import url("components/combobox.css?v=20261010");
@import url("components/advanced-search.css?v=20261019b");
@import url("components/confirm-notice.css?v=20261013a");
@import url("components/billing.css?v=20261012");
@import url("components/blog.css?v=20261104blog-hero");
@import url("components/breadcrumbs.css?v=20261014a");
@import url("components/contact-host.css?v=20261103confirmed2");
@import url("components/client-system.css?v=20261104auth");
@import url("components/client-search.css?v=20261104toolbar-reset-removed");
@import url("components/search-filters.css?v=20261023a");
@import url("components/client-property.css?v=20261103shared-pagination");
@import url("components/client-redesign.css?v=20261104category-border");
@import url("components/client-save-prompt.css?v=20261024c");
@import url("components/property-proposal.css?v=20261103reviewfocus");
@import url("components/room-selector.css?v=20261022c");
@import url("components/auth-proposal.css?v=20261104simple-registration");
@import url("components/client-drafts.css?v=20261103map-note");
@import url("components/client-about.css?v=20261102equalcards");
@import url("components/client-illustrations.css?v=20261102support");
@import url("components/client-filter-proposal.css?v=20261031reset");
@import url("components/toasts.css?v=20261102fade");

:root {
    --sb-primary: #0b2d50;
    --sb-primary-dark: #071f38;
    --sb-primary-soft: #e6f4fa;
    --sb-accent: #00afa8;
    --sb-accent-dark: #00968f;
    --sb-bg: #f5f6f7;
    --sb-surface: #ffffff;
    --sb-text: #1a2332;
    --sb-muted: #6b7280;
    --sb-border: #e5e7eb;
    --sb-radius: 14px;
    --sb-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .06);
    --sb-shadow-lg: 0 12px 40px rgba(16, 24, 40, .14);

    /* Brand v3 (2026-10): additive tokens, the values above never change.
       The type face is only applied on the client side (see "Brand base" below), never in Admin. */
    --sb-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sb-accent-ink: #007c76;   /* teal as TEXT on a light surface: 5.07:1 on white (plain teal is 2.73:1) */
    --sb-on-accent: #0b2d50;    /* label on a teal fill: 5.11:1 (white on teal is 2.73:1) */
    --sb-accent-hover: #00bdb5; /* the lit teal of a hovered accent button: navy on it is 5.95:1 */
    --sb-tabbar-h: 0px;         /* height of the phone tab bar while it shows (tabbar.css), else nothing */
    --sb-placeholder: linear-gradient(135deg, #0b2d50 0%, #0e5f7a 100%); /* the cover of a property with no photo */
}

* { box-sizing: border-box; }

body {
    background: var(--sb-bg);
    color: var(--sb-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

/* Links are never underlined (design rule); components keep their own styles. */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Brand base (client side only) ----------
   Scope = `.sb-site` (public pages, set on the anonymous body), `.sb-shell` (signed-in guest and host)
   and `.sb-auth-body` (account pages). The dark Admin body carries none of them, so the superadmin keeps
   its own look. `:where()` keeps these base rules at zero specificity: every component rule still wins. */
.sb-site,
.sb-shell,
.sb-auth-body { font-family: var(--sb-font); }

:where(.sb-site, .sb-shell, .sb-auth-body) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    letter-spacing: -.015em;
}

/* A link with no class is body copy: brand ink, not Bootstrap blue. */
:where(.sb-site, .sb-shell, .sb-auth-body) a:where(:not([class])) { color: var(--sb-accent-ink); }
:where(.sb-site, .sb-shell, .sb-auth-body) a:where(:not([class])):hover { color: var(--sb-primary); }

/* Focus ring in the brand teal instead of Bootstrap's blue glow. */
:where(.sb-site, .sb-shell, .sb-auth-body) .form-control:focus,
:where(.sb-site, .sb-shell, .sb-auth-body) .form-select:focus {
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 .2rem rgba(0, 175, 168, .22);
}
:where(.sb-site, .sb-shell, .sb-auth-body) .btn:focus,
:where(.sb-site, .sb-shell, .sb-auth-body) .btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(0, 175, 168, .35);
}
:where(.sb-site, .sb-shell, .sb-auth-body) .btn-primary:active,
:where(.sb-site, .sb-shell, .sb-auth-body) .btn-primary.active {
    background: var(--sb-primary-dark);
    border-color: var(--sb-primary-dark);
}
:where(.sb-site, .sb-shell, .sb-auth-body) .btn-primary:disabled,
:where(.sb-site, .sb-shell, .sb-auth-body) .btn-primary.disabled {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
}

/* ---------- Brand lockup (the navbar itself lives in components/navbar.css) ---------- */
.sb-brand {
    color: #fff !important;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -.02em;
}
.sb-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--sb-accent);
    color: #1a2332;
    font-weight: 900;
    margin-right: .4rem;
    vertical-align: -6px;
}

/* Footer styles live in components/footer.css. */

.sb-py { padding-top: 3rem; padding-bottom: 3rem; }

/* The home hero and the search card live in components/hero.css. */

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--sb-primary-dark);
    border-color: var(--sb-primary-dark);
}
/* The teal fill takes a NAVY label: white on #00afa8 is 2.73:1, navy is 5.11:1 (the board shows white). */
.btn-accent {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: var(--sb-on-accent);
    font-weight: 700;
}
.btn-accent:hover,
.btn-accent:focus-visible,
.btn-accent:active { background: var(--sb-accent-hover); border-color: var(--sb-accent-hover); color: var(--sb-on-accent); }

/* ---------- Property detail ---------- */
.sb-detail-hero {
    background: linear-gradient(135deg, #0b2d50, #14456f);
    color: #fff;
    padding: 2.5rem 0;
}
.sb-detail-hero h1 { font-weight: 800; }
/* In the app shell the band is a block of the page, not edge to edge (there it was a few pixels wider than the photo
   above it and the columns below it): the gradient sits on .sb-detail-hero-in, inside the container, so its edges are
   theirs at every window width. The public site keeps the full-width band. */
.sb-shell .sb-detail-hero { background: none; padding: 0; margin: .85rem 0 .5rem; }
.sb-shell .sb-detail-hero-in {
    background: linear-gradient(135deg, #0b2d50, #14456f);
    border-radius: .75rem;
    padding: 2.25rem 1.5rem;
}
.sb-amenity-chip {
    display: inline-block;
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    margin: 0 .35rem .35rem 0;
}
/* Rooms & prices panel styles live in components/rooms.css. */

/* ---------- Badges ---------- */
.sb-badge {
    display: inline-block;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
}
.sb-badge-pending { background: #fff3d6; color: #92600a; }
.sb-badge-confirmed { background: #d9f2e3; color: #0f6b3a; }
.sb-badge-cancelled { background: #fde3e1; color: #b02a1d; }
.sb-badge-completed { background: #e7ecf3; color: #42526b; }
.sb-badge-entire { background: var(--sb-primary-soft, #e6f4fa); color: var(--sb-primary, #0b2d50); }

/* Shared toast structure and behavior: components/toasts.css and site.js. */

/* Auth pages live in components/auth.css. */

/* ---------- Admin ---------- */
.sb-admin-body { background: var(--sb-bg); }
.sb-admin { display: flex; min-height: 100vh; }
.sb-admin-sidebar {
    width: 240px;
    background: #0c2149;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sb-admin-brand {
    padding: 1.25rem 1.25rem 1rem;
    font-weight: 800;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sb-admin-nav { list-style: none; padding: .75rem 0; margin: 0; }
.sb-admin-nav a {
    display: block;
    padding: .65rem 1.25rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-weight: 500;
}
.sb-admin-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-admin-sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem .3rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sb-admin-account { padding: 0 .1rem .4rem; }
.sb-admin-account-mail {
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-admin-account-role {
    margin-top: .14rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.sb-admin-sidebar-footer a,
.sb-admin-logout {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.sb-admin-sidebar-footer a:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }
.sb-admin-logout:hover { border-color: rgba(255, 120, 120, .55); color: #ffb3ad; text-decoration: none; }

.sb-admin-main { flex: 1; display: flex; flex-direction: column; }
.sb-admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--sb-border);
    padding: 1rem 1.75rem;
}
.sb-admin-content { padding: 1.75rem; }

.sb-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; }
.sb-stat-card { background: #fff; border-radius: var(--sb-radius); box-shadow: var(--sb-shadow); padding: 1.25rem; }
.sb-stat-value { font-size: 2rem; font-weight: 800; color: var(--sb-primary); }
.sb-stat-label { color: var(--sb-muted); font-size: .9rem; }

/* ---------- tables (one modern treatment for every list screen) ---------- */
.sb-table {
    background: var(--sb-surface);
    border: 1px solid #e8ecf4;
    border-radius: 12px;
    overflow: auto;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.sb-table .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: #edf0f6;
    --bs-table-hover-bg: #f7f9fd;
    margin-bottom: 0;
}
.sb-table thead th {
    background: #f7f9fc;
    color: var(--sb-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .7rem 1rem;
    border-bottom: 1px solid #e8ecf4;
    white-space: nowrap;
}
.sb-table tbody td { padding: .8rem 1rem; vertical-align: middle; }
.sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-table tbody tr { transition: background-color .12s ease; }
.sb-table tbody tr:hover > * { background: #f7f9fd; }

.sb-panel { background: #fff; border-radius: var(--sb-radius); box-shadow: var(--sb-shadow); padding: 1.5rem; }

/* ---------- Flatpickr theme ---------- */
.flatpickr-calendar {
    border-radius: 12px;
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-lg);
    font-family: inherit;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
}
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--sb-primary-dark);
    border-color: var(--sb-primary-dark);
}
.flatpickr-day:hover {
    background: var(--sb-primary-soft);
}
.flatpickr-day.today {
    border-color: var(--sb-accent);
}
.flatpickr-day.today:hover {
    background: var(--sb-accent);
    color: #1a2332;
    border-color: var(--sb-accent);
}
/* A day that cannot be picked stays legible: flatpickr greys it to 10% black, which is invisible on white (the
   check-out calendar showed today, the day the stay starts on, as a ring around nothing). Muted navy, the
   not-allowed cursor stays, and the days of the month before and after are no lighter than the others. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay.flatpickr-disabled,
.flatpickr-day.nextMonthDay.flatpickr-disabled {
    color: rgba(11, 45, 80, .4);
}
/* today, even when it cannot be picked: a clear navy number inside the teal ring */
.flatpickr-day.today.flatpickr-disabled,
.flatpickr-day.today.flatpickr-disabled:hover {
    color: var(--sb-primary);
    font-weight: 700;
    border-color: var(--sb-accent);
    background: transparent;
}

/* The stay is picked as a range in one calendar (site.js): arrival and departure in navy, the days between in
   sky as one unbroken band (flatpickr draws that band with a grey box-shadow of its own, so it is recoloured). */
.flatpickr-day.inRange,
.flatpickr-day.inRange.prevMonthDay,
.flatpickr-day.inRange.nextMonthDay {
    background: var(--sb-primary-soft);
    border-color: var(--sb-primary-soft);
    color: var(--sb-primary);
    box-shadow: -5px 0 0 var(--sb-primary-soft), 5px 0 0 var(--sb-primary-soft);
}
.flatpickr-day.startRange { border-radius: 50px 0 0 50px; }
.flatpickr-day.endRange { border-radius: 0 50px 50px 0; }
.flatpickr-day.startRange.endRange { border-radius: 50px; }

/* the two date fields of a range (read-only text that opens the calendar): a hand, and no grey read-only fill */
.sb-date-show,
.sb-date-show[readonly] {
    cursor: pointer;
    background-color: #fff;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--sb-primary);
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--sb-primary);
}

/* ---------- Language switcher ---------- */
.sb-lang-form { display: inline-flex; align-items: center; }
.sb-lang {
    background: none;
    border: none;
    padding: 2px 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--sb-muted);
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.sb-lang:hover { color: var(--sb-primary); background: var(--sb-primary-soft); }
.sb-lang.active { color: var(--sb-primary); }
.sb-lang-sep { width: 1px; height: 13px; background: var(--sb-border); margin: 0 2px; display: inline-block; }

/* The pill variants on dark backgrounds (public navbar, auth pages) live in components/navbar.css and auth.css. */



.sb-gallery { padding-top: 1.25rem; }
.sb-gallery-main {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: .75rem;
    background: #eef2f8;
}
/* No photo yet: a quiet light block. It used to be the same deep blue as the band right under it, so a property without
   photos stacked two blue blocks (and, on a phone, the blue head of the rooms panel as a third). */
.sb-gallery-main--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 260px;
    background: var(--sb-primary-soft);
}
.sb-gallery-main--empty .sb-thumb-letter {
    font-size: 3.25rem;
    font-weight: 900;
    line-height: 1;
    color: var(--sb-primary);
    opacity: .3;
}
.sb-gallery-empty-note { color: var(--sb-muted); font-size: .85rem; }
.sb-gallery-thumbs {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}
.sb-gallery-thumb {
    width: 110px;
    height: 78px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: .5rem;
    cursor: pointer;
    opacity: .75;
    border: 2px solid transparent;
    transition: opacity .15s, border-color .15s;
}
.sb-gallery-thumb:hover { opacity: 1; }
.sb-gallery-thumb.is-active { opacity: 1; border-color: #0b2d50; }

@media (max-width: 991.98px) {
    .sb-gallery-main { height: 320px; }
    .sb-gallery-main--empty { height: 240px; }
    .sb-detail-hero { padding: 1.75rem 0; }
    .sb-shell .sb-detail-hero-in { padding: 1.75rem 1.25rem; }
}
@media (max-width: 767.98px) {
    .sb-gallery-main { height: 240px; }
    .sb-gallery-main--empty { height: 180px; }
}
@media (max-width: 575.98px) {
    .sb-shell .sb-detail-hero-in { padding: 1.4rem 1.1rem; }
}

/* Image manager (host + admin property edit) */
.sb-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}
.sb-image-card {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}
.sb-image-card img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}
.sb-image-badge {
    position: absolute;
    top: .4rem;
    left: .4rem;
    background: #0b2d50;
    color: #fff;
    font-size: .72rem;
    padding: .15rem .5rem;
    border-radius: 1rem;
}
.sb-image-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .5rem;
}


/* ---- admin chips, filters, pager (users + logs screens) ---- */
.sb-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.sb-chip-row-flags { margin-top: -.25rem; }
.sb-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px;
    border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text);
    text-decoration: none; font-size: .85rem; line-height: 1; box-shadow: var(--sb-shadow); }
.sb-chip:hover { border-color: var(--sb-primary); color: var(--sb-primary); }
.sb-chip strong { font-size: .95rem; font-weight: 700; color: var(--sb-primary); }
.sb-chip.is-active { border-color: var(--sb-primary); background: var(--sb-primary-soft); }
.sb-chip-flag { border-style: dashed; }
.sb-chip-note { color: var(--sb-muted); font-size: .8rem; margin-left: .25rem; }
.sb-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.sb-filter-bar input[type="search"] { max-width: 320px; }
.sb-filter-count { color: var(--sb-muted); font-size: .85rem; margin-left: auto; }
.sb-pager { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.sb-pager-label { color: var(--sb-muted); font-size: .85rem; }
.sb-role-admin { background: #e7e0ff; color: #4b2ea8; }
.sb-role-host { background: #d9f2e3; color: #0f6b3a; }
.sb-role-guest { background: #e7ecf3; color: #42526b; }
.sb-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.sb-actions-bar { display: flex; flex-wrap: wrap; gap: .5rem; }
.sb-section-title { text-transform: uppercase; letter-spacing: .04em; color: var(--sb-muted); margin-bottom: .6rem; }
.sb-empty { background: var(--sb-surface); border-radius: var(--sb-radius); box-shadow: var(--sb-shadow);
    padding: 2rem; text-align: center; }

/* ---- app logs ---- */
.sb-log-table td { vertical-align: top; }
.sb-log-time { color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-log-level { display: inline-block; padding: .15rem .5rem; border-radius: 6px; font-size: .72rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: #e7ecf3; color: #42526b; }
.sb-log-level-information { background: #e7ecf3; color: #365070; }
.sb-log-level-warning { background: #fff3d6; color: #92600a; }
.sb-log-level-error, .sb-log-level-fatal { background: #fde3e1; color: #b02a1d; }
.sb-log-level-debug, .sb-log-level-verbose { background: #eef2f7; color: #5b6b82; }
.sb-log-source { color: var(--sb-muted); font-size: .8rem; }
.sb-log-message { font-size: .875rem; word-break: break-word; }
.sb-log-path { display: inline-block; margin-left: .4rem; padding: .1rem .4rem; border-radius: 5px;
    background: var(--sb-primary-soft); color: var(--sb-primary); font-size: .72rem; }
.sb-log-details { margin-top: .35rem; }
.sb-log-details summary { cursor: pointer; font-size: .75rem; color: var(--sb-muted); }
.sb-log-pre { background: #0f172a; color: #e2e8f0; padding: .75rem; border-radius: 8px; font-size: .78rem;
    max-height: 320px; overflow: auto; white-space: pre-wrap; margin-top: .4rem; }


/* ---- superadmin settings ---- */
.sb-settings-group { margin-bottom: 2rem; }
.sb-settings-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sb-muted); }
.sb-settings-table td { vertical-align: middle; }
.sb-setting-label { font-weight: 600; }
.sb-setting-desc { color: var(--sb-muted); font-size: .8rem; }
.sb-setting-default { color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-setting-audit { color: var(--sb-muted); font-size: .75rem; margin-top: .25rem; }
.sb-setting-form { display: flex; gap: .4rem; align-items: center; max-width: 460px; }
.sb-setting-form input { max-width: 260px; }
.sb-restart-badge { display: inline-block; margin-top: .25rem; padding: .1rem .45rem; border-radius: 999px;
    border: 1px dashed var(--sb-border); color: var(--sb-muted); font-size: .72rem; }


/* ---- support messages + bans ---- */
.sb-nav-badge { display: inline-block; min-width: 1.35rem; margin-left: .15rem; padding: .06rem .42rem;
    border-radius: 999px; background: #dc3545; color: #fff; font-size: .72rem; font-weight: 700;
    text-align: center; line-height: 1.25; vertical-align: middle; }
.sb-badge-soft { display: inline-block; margin-left: .4rem; padding: .08rem .45rem; border-radius: .35rem;
    background: #eef1f6; border: 1px solid #dde3ec; color: #55637a; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.sb-support-body { white-space: pre-wrap; line-height: 1.55; }
.sb-chip-flag-danger { border-color: #e08592; }

/* ---------- honor chips (trust tiers) ---------- */
.sb-honor {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .16rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    vertical-align: 1px;
}
.sb-honor-star { font-size: .68rem; }
.sb-honor-reliable { background: var(--sb-primary-soft); color: var(--sb-primary); }
.sb-honor-distinguished { background: #e0f6f4; color: #006f6a; box-shadow: inset 0 0 0 1px #a9e8e4; }
.sb-honor-honored { background: linear-gradient(135deg, #00afa8, #00968f); color: #fff; box-shadow: 0 2px 6px rgba(0, 150, 143, .35); }
.sb-honor-plus { color: #1a7f37; font-weight: 600; }
.sb-honor-minus { color: #b42318; font-weight: 600; }






/* ---------- inline SVG icons (amenity chips) ---------- */
.sb-ico { display: inline-block; width: 16px; height: 16px; }
.sb-ico-mid .sb-ico { width: 14px; height: 14px; vertical-align: -2px; }
.sb-amenity-chip .sb-ico { width: 15px; height: 15px; flex: none; opacity: .8; }

/* ============================================================
   App shell (host area + signed-in client area). Scoped to
   .sb-shell, set on both bodies, so the dark admin theme
   (admin.css) stays untouched.
   ============================================================ */

/* ---------- shell: sidebar ---------- */
.sb-shell .sb-admin-sidebar {
    width: 264px;
    background: linear-gradient(180deg, var(--sb-primary) 0%, var(--sb-primary-dark) 100%);
}
/* From 992px the sidebar stays in the window while a long page scrolls, so the account block, Settings and
   Log out are always at the bottom of what you see, not at the far end of the page. Below 992px it is the
   off-canvas drawer further down. A window shorter than the sidebar scrolls the sidebar itself. */
@media (min-width: 992px) {
    .sb-shell .sb-admin-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}
.sb-shell .sb-admin-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 72px;
    padding: 0 1.25rem;
    font-size: 1.12rem;
    font-weight: 800;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sb-shell .sb-admin-brand .sb-brand-mark { margin-right: 0; }
.sb-host-tag {
    margin-left: auto;
    padding: .14rem .55rem;
    border-radius: 999px;
    background: rgba(0, 175, 168, .18);
    color: #8fe9e4;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sb-shell .sb-admin-nav { padding: .9rem .7rem 0; }
.sb-shell .sb-admin-nav-label {
    padding: .5rem .65rem .35rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .38);
}
.sb-shell .sb-admin-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .58rem .7rem;
    margin-bottom: 2px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .75);
    font-weight: 500;
    font-size: .92rem;
}
.sb-shell .sb-admin-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-shell .sb-admin-nav a.is-active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.sb-shell .sb-admin-nav a.is-active::before {
    content: "";
    position: absolute;
    left: -.7rem;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sb-accent);
}
.sb-shell .sb-admin-nav .sb-ico { flex: 0 0 auto; width: 18px; height: 18px; color: rgba(255, 255, 255, .45); }
.sb-shell .sb-admin-nav a:hover .sb-ico { color: rgba(255, 255, 255, .75); }
.sb-shell .sb-admin-nav a.is-active .sb-ico { color: var(--sb-accent); }
.sb-shell .sb-admin-nav .sb-nav-badge { margin-left: auto; }

/* The footer keeps the same gutter below the logout button as at its sides (it used to sit 5px from the edge). */
.sb-shell .sb-admin-sidebar-footer { padding-bottom: 1.35rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.sb-shell .sb-admin-account-mail { color: #fff; }
.sb-shell .sb-admin-account-role { color: rgba(255, 255, 255, .45); }
.sb-shell .sb-admin-sidebar-footer a,
.sb-shell .sb-admin-logout {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .85);
}
.sb-shell .sb-admin-sidebar-footer a:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }
.sb-shell .sb-admin-sidebar-footer .sb-ico { width: 16px; height: 16px; color: rgba(255, 255, 255, .45); }
/* Settings sits above Log out as the quiet one of the two; on its own page it stays lit. */
.sb-shell .sb-admin-sidebar-footer .sb-admin-settings.is-active { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); color: #fff; }
.sb-shell .sb-admin-sidebar-footer .sb-admin-settings:hover .sb-ico,
.sb-shell .sb-admin-sidebar-footer .sb-admin-settings.is-active .sb-ico { color: var(--sb-accent); }
/* Log out wears a soft translucent red: it reads as the way out without shouting on the navy. */
.sb-shell .sb-admin-sidebar-footer .sb-admin-logout {
    border-color: rgba(244, 114, 114, .3);
    background: rgba(220, 68, 78, .14);
    color: #f3b9b6;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.sb-shell .sb-admin-sidebar-footer .sb-admin-logout .sb-ico { color: rgba(244, 138, 134, .85); }
.sb-shell .sb-admin-sidebar-footer .sb-admin-logout:hover {
    border-color: rgba(244, 114, 114, .5);
    background: rgba(220, 68, 78, .22);
    color: #ffd3d0;
}
.sb-shell .sb-admin-sidebar-footer .sb-admin-logout:hover .sb-ico { color: #ffb0ab; }
.sb-shell .sb-admin-sidebar-footer .sb-admin-logout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(244, 114, 114, .3);
}

/* ---------- shell: topbar + content ---------- */
.sb-shell .sb-admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 72px;
    padding: .95rem 1.75rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sb-border);
}
.sb-shell .sb-admin-topbar h1 {
    margin: 0;
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.sb-shell .sb-topbar-right { display: flex; align-items: center; gap: 1rem; }
.sb-shell .sb-admin-content { padding: 1.6rem 1.75rem 2.5rem; }
.sb-shell .sb-admin-content .sb-py { padding-top: .4rem; padding-bottom: .4rem; }

/* ---------- stat cards ---------- */
.sb-shell .sb-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.sb-shell .sb-stat-card {
    --stat-accent: var(--sb-primary);
    --stat-soft: var(--sb-primary-soft);
    position: relative;
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: 1.1rem 1.25rem;
    background: var(--sb-surface);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    overflow: hidden;
    color: inherit;
}
.sb-shell .sb-stat-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--stat-accent);
    opacity: .85;
}
.sb-shell .sb-stat-card.is-attention { --stat-accent: #c8891a; --stat-soft: #fff3d6; }
.sb-shell .sb-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--stat-soft);
    color: var(--stat-accent);
}
.sb-shell .sb-stat-icon .sb-ico { width: 20px; height: 20px; }
.sb-shell .sb-stat-body { display: flex; flex-direction: column; }
.sb-shell .sb-stat-card .sb-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--sb-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sb-shell .sb-stat-card .sb-stat-label { font-size: .82rem; color: var(--sb-muted); }
.sb-shell .sb-stat-card.is-link { transition: transform .14s ease, box-shadow .14s ease; }
.sb-shell .sb-stat-card.is-link:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-lg); color: inherit; }

/* ---------- section heads, mini rows ---------- */
.sb-shell .sb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.sb-shell .sb-panel-head h2 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.sb-shell .sb-panel-head a { font-size: .85rem; }
.sb-shell .sb-mini-row { display: flex; align-items: center; gap: 1rem; padding: .7rem .1rem; border-bottom: 1px solid var(--sb-border); }
.sb-shell .sb-mini-row:last-child { border-bottom: none; padding-bottom: .1rem; }
.sb-shell .sb-mini-main { flex: 1; min-width: 0; }
.sb-shell .sb-mini-name { font-weight: 600; }
.sb-shell .sb-mini-sub { font-size: .8rem; color: var(--sb-muted); }
.sb-shell .sb-mini-dates { font-size: .85rem; color: var(--sb-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- tables (shell additions) ---------- */
.sb-shell .sb-num { font-variant-numeric: tabular-nums; }
.sb-shell .sb-actions { display: inline-flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.sb-shell .sb-row-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.sb-shell .sb-row-thumb-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: .35rem;
    background: var(--sb-placeholder);
    color: rgba(255, 255, 255, .9);
    font-weight: 800;
}
.sb-shell .sb-table .sb-stars { font-size: .78rem; }

/* ---------- availability calendar ---------- */
.sb-shell .sb-cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .sb-shell .sb-cal-layout { grid-template-columns: 1fr; } }
.sb-shell .sb-cal-panel { padding: 1.25rem 1.25rem 1.4rem; }
.sb-shell .sb-cal-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.sb-shell .sb-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--sb-border);
    border-radius: 9px;
    background: #fff;
    color: var(--sb-text);
    font-size: 1.05rem;
    line-height: 1;
}
.sb-shell .sb-cal-nav:hover { border-color: var(--sb-primary); color: var(--sb-primary); }
.sb-shell .sb-cal-title { min-width: 170px; text-align: center; font-weight: 700; font-size: 1.05rem; }
.sb-shell .sb-cal-sub { margin-left: auto; color: var(--sb-muted); font-size: .85rem; }
.sb-shell .sb-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .2rem 0 .9rem;
    border-bottom: 1px solid var(--sb-border);
    margin-bottom: .9rem;
    font-size: .82rem;
    color: var(--sb-muted);
}
.sb-shell .sb-legend-item { display: inline-flex; align-items: center; gap: .45rem; }
.sb-shell .sb-legend-item i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.sb-shell .lg-available { background: #fff; border: 1px solid var(--sb-border); }
.sb-shell .lg-pending { background: #fff3d6; border: 1px solid #f0dfb2; }
.sb-shell .lg-confirmed { background: #d9f2e3; border: 1px solid #bfe7d0; }
.sb-shell .lg-blocked { background: repeating-linear-gradient(135deg, #eef2ff 0 5px, #d9e3fa 5px 10px); border: 1px solid #c6d4f2; }
.sb-shell .sb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sb-shell .sb-cal-dow { text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--sb-muted); padding: .35rem 0; }
.sb-shell .sb-cal-day {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 64px;
    padding: .35rem .45rem .4rem;
    background: #fff;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    overflow: hidden;
}
.sb-shell .sb-cal-num { font-size: .78rem; color: var(--sb-muted); font-variant-numeric: tabular-nums; }
.sb-shell .sb-cal-tag { margin-top: auto; font-size: .68rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-shell .sb-cal-day.is-outside { opacity: .38; }
.sb-shell .sb-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--sb-accent); }
.sb-shell .sb-cal-day.is-today .sb-cal-num { color: var(--sb-text); font-weight: 700; }
.sb-shell .sb-cal-day.state-pending { background: #fff7e0; border-color: #f0dfb2; }
.sb-shell .sb-cal-day.state-pending .sb-cal-num,
.sb-shell .sb-cal-day.state-pending .sb-cal-tag { color: #92600a; }
.sb-shell .sb-cal-day.state-confirmed { background: #e2f6ea; border-color: #bfe7d0; }
.sb-shell .sb-cal-day.state-confirmed .sb-cal-num,
.sb-shell .sb-cal-day.state-confirmed .sb-cal-tag { color: #0f6b3a; }
.sb-shell .sb-cal-day.state-blocked { background: repeating-linear-gradient(135deg, #eef2ff 0 6px, #dde7fb 6px 12px); border-color: #c6d4f2; }
.sb-shell .sb-cal-day.state-blocked .sb-cal-num,
.sb-shell .sb-cal-day.state-blocked .sb-cal-tag { color: #0b2d50; }
.sb-shell .sb-cal-side .sb-panel { padding: 1.15rem 1.25rem; }
.sb-shell .sb-cal-side .form-label { font-size: .78rem; font-weight: 600; color: var(--sb-muted); margin-bottom: .25rem; }
.sb-shell .sb-block-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--sb-border); }
.sb-shell .sb-block-row:last-child { border-bottom: none; padding-bottom: 0; }
.sb-shell .sb-block-range { font-weight: 600; font-size: .86rem; font-variant-numeric: tabular-nums; }
.sb-shell .sb-block-note { font-size: .78rem; color: var(--sb-muted); }
.sb-shell .sb-block-row form { margin: 0; }

/* ============================================================
   Responsive: phones and narrow windows.
   ============================================================ */

/* ---------- host: burger button + off-canvas sidebar ---------- */
.sb-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    background: #fff;
    color: var(--sb-text);
}
.sb-burger:hover { border-color: var(--sb-primary); color: var(--sb-primary); }
.sb-burger .sb-ico { width: 18px; height: 18px; }
.sb-drawer-backdrop { display: none; }

@media (max-width: 991.98px) {
    .sb-shell .sb-admin { display: block; }
    .sb-shell .sb-admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 284px;
        max-width: 86vw;
        height: 100dvh;
        overflow-y: auto;
        transform: translateX(-104%);
        transition: transform .22s ease;
        z-index: 1045;
        box-shadow: 0 24px 60px rgba(2, 8, 23, .45);
    }
    .sb-shell.sb-drawer-open .sb-admin-sidebar { transform: translateX(0); }
    .sb-shell .sb-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(10, 16, 32, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .sb-shell.sb-drawer-open .sb-drawer-backdrop { opacity: 1; pointer-events: auto; }
    .sb-shell .sb-burger { display: inline-flex; }
    .sb-shell .sb-admin-topbar { padding: .7rem 1rem; }
    .sb-shell .sb-admin-topbar h1 {
        font-size: 1.02rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sb-shell .sb-admin-content { padding: 1.1rem 1rem 2.25rem; }
}

/* ---------- host: compact cards + panels ---------- */
@media (max-width: 640px) {
    .sb-shell .sb-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .sb-shell .sb-stat-card { padding: .85rem .95rem; gap: .6rem; }
    .sb-shell .sb-stat-card .sb-stat-value { font-size: 1.35rem; }
    .sb-shell .sb-stat-card .sb-stat-label { font-size: .76rem; }
    .sb-shell .sb-stat-icon { width: 34px; height: 34px; border-radius: 10px; }
    .sb-shell .sb-stat-icon .sb-ico { width: 17px; height: 17px; }
    .sb-shell .sb-mini-row { flex-wrap: wrap; gap: .3rem .8rem; }
    .sb-shell .sb-mini-main { flex: 1 1 100%; }
    .sb-shell .sb-mini-dates { font-size: .8rem; }
    .sb-shell .sb-mini-row .sb-badge { margin-left: auto; }
    .sb-shell .sb-panel { padding: 1rem; }
}

/* ---------- host: tables scroll, never squish ---------- */
@media (max-width: 767.98px) {
    .sb-shell .sb-table .table { min-width: 560px; }
    .sb-shell .sb-table thead th { padding: .65rem .8rem; }
    .sb-shell .sb-table tbody td { padding: .7rem .8rem; }
}

/* ---------- host: calendar on phones ---------- */
@media (max-width: 767.98px) {
    .sb-shell .sb-cal-panel { padding: .85rem .7rem 1rem; }
    .sb-shell .sb-cal-grid { gap: 3px; }
    .sb-shell .sb-cal-day { min-height: 52px; padding: .22rem .28rem .3rem; border-radius: 8px; }
    .sb-shell .sb-cal-num { font-size: .7rem; }
    .sb-shell .sb-cal-tag { font-size: .6rem; }
    .sb-shell .sb-cal-dow { font-size: .58rem; letter-spacing: .04em; padding: .25rem 0; }
    .sb-shell .sb-cal-head { flex-wrap: wrap; gap: .4rem; }
    .sb-shell .sb-cal-title { min-width: 0; }
    .sb-shell .sb-cal-sub { order: 3; flex-basis: 100%; margin-left: 0; text-align: center; font-size: .8rem; }
    .sb-shell .sb-cal-legend { gap: .5rem .9rem; font-size: .75rem; padding-bottom: .7rem; margin-bottom: .7rem; }
    .sb-shell .sb-cal-side .sb-panel { padding: 1rem; }
}

/* ---------- public site on phones ---------- */
@media (max-width: 767.98px) {
    .sb-detail-hero h1 { font-size: 1.5rem; }
    .sb-py { padding-top: 2rem; padding-bottom: 2rem; }
}
@media (max-width: 575.98px) {
    .row { --bs-gutter-x: 1rem; }
}

/* The public navbar (including its collapsed panel on phones and tablets) lives in components/navbar.css. */