@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #102a43;
  --muted: #62758a;
  --paper: #f5f8fc;
  --card: #fff;
  --line: #dce5ef;
  --blue: #0057b8;
  --blue-dark: #003f88;
  --blue-light: #e7f1ff;
  --yellow: #ffc928;
  --yellow-dark: #e8ad00;
  --danger: #b33a3a;
  --shadow: 0 18px 50px rgb(0 63 136 / 10%);
  font-family: "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* Admin overview metrics: 8 cards, laid out four-by-two so the row and the
   "Total/Bookings by Property Type" grids below it read as one family. */
.admin-content>.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.admin-content>.kpi-grid .kpi-card{min-width:0;padding:16px 14px}
.admin-content>.kpi-grid .kpi-value{overflow-wrap:anywhere}
.kpi-icon.green{color:#07864d;background:#e8f7ef}.kpi-icon.purple{color:#7145d6;background:#f0eafe}.kpi-icon.red{color:#d93650;background:#ffecef}
/* Four columns still doesn't leave "Rs. 461,663,237" (the longest value here)
   enough width to sit on one line once the 288px sidebar and the card's own
   icon column are subtracted from it - the same dead-zone lesson the KPI row
   already learned once at six columns. One size down avoids it at four. */
.admin-content>.kpi-grid .kpi-value{font-size:18px}
@media(max-width:1500px){.admin-content>.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Two columns per card is generous enough to go back to the full size. */
@media(max-width:1500px){.admin-content>.kpi-grid .kpi-value{font-size:20px}}
@media(max-width:640px){.admin-content>.kpi-grid{grid-template-columns:1fr}}

/* Same dead zone as .kpi-grid above, one section down - "Total/Bookings by
   Property Type" stayed at a flat 7 columns from any width above 980px, so
   it hit the same too-narrow-for-its-own-content squeeze well before that
   old breakpoint kicked in. Scoped under .admin-content for the same
   specificity reason: it needs to outrank the plain .type-grid rules
   further down this file rather than depend on source order. */
.admin-content>.type-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
@media(max-width:1600px){.admin-content>.type-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1200px){.admin-content>.type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.admin-content>.type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.admin-content>.type-grid{grid-template-columns:1fr}}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
a { color: inherit; }
button, input, select { font: inherit; }
.strong { font-weight: 750; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.is-hidden { display: none !important; }
.eyebrow { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.site-header, .site-footer { width: min(1240px, calc(100% - 40px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { height: 88px; }
.site-footer { padding: 26px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--blue-dark); background: var(--yellow); font-family: Georgia, serif; }
.brand.light { color: white; }
.brand.light .brand-mark { color: var(--blue-dark); background: var(--yellow); }
.header-note { color: var(--muted); font-size: .88rem; }
.landing { width: min(1240px, calc(100% - 40px)); margin: auto; padding: clamp(55px, 8vw, 110px) 0; }
.hero-copy { max-width: 760px; margin-bottom: 54px; }
.hero-copy h1 { margin: 12px 0 18px; font: 500 clamp(3rem, 7vw, 6.6rem)/.94 Georgia, serif; letter-spacing: -.055em; }
.lead { max-width: 600px; color: var(--muted); font-size: 1.15rem; line-height: 1.7; }
.portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.portal-card { min-height: 320px; padding: 30px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.portal-card:hover { transform: translateY(-5px); border-color: #b8d3f1; box-shadow: 0 25px 60px rgb(0 63 136 / 16%); }
.portal-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 42px; border-radius: 14px; color: var(--blue-dark); background: var(--yellow); font: 700 1.2rem Georgia, serif; }
.portal-kicker { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.portal-card h2 { margin: 7px 0; font: 500 2rem Georgia, serif; }
.portal-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.portal-link { margin-top: auto; color: var(--blue); font-weight: 750; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-page > .site-header, .auth-page > .site-footer { display: none; }
.auth-story { padding: 44px clamp(35px, 6vw, 90px); display: flex; flex-direction: column; color: white; background: linear-gradient(145deg, #003f88, #006bd6); }
.owner-theme .auth-story { background: linear-gradient(145deg, #003778, #005fc7); }
.customer-theme .auth-story { background: linear-gradient(145deg, #004a9c, #0878df); }
.story-content { max-width: 560px; margin: auto 0; padding: 80px 0; }
.story-content .eyebrow { color: var(--yellow); }
.story-content h1 { margin: 14px 0 22px; font: 500 clamp(3rem, 5.8vw, 5.7rem)/.98 Georgia, serif; letter-spacing: -.04em; }
.story-content p { max-width: 520px; color: rgb(255 255 255 / 74%); font-size: 1.08rem; line-height: 1.7; }
.trust-row { display: flex; gap: 12px; margin-top: 38px; color: rgb(255 255 255 / 65%); font-size: .85rem; }
.auth-panel { padding: 40px; display: grid; place-items: center; }
.auth-card { width: min(440px, 100%); }
.back-link { display: inline-block; margin-bottom: 42px; color: var(--muted); text-decoration: none; }
.role-pill, .status-pill { display: inline-flex; padding: 6px 10px; border-radius: 99px; color: var(--blue-dark); background: var(--blue-light); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.auth-card h2 { margin: 18px 0 7px; font: 500 2.25rem Georgia, serif; }
.auth-form { display: grid; gap: 10px; margin-top: 27px; }
.auth-form label { font-size: .86rem; font-weight: 750; }
.input { width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; }
.input:focus { outline: 3px solid rgb(0 87 184 / 14%); border-color: var(--blue); }
.password-field { position: relative; }
.password-field .input { padding-right: 44px; }
.password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.05rem; cursor: pointer; }
.password-toggle:hover { color: var(--blue); background: rgb(0 87 184 / 8%); }
.password-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.form-options { margin: 6px 0 10px; display: flex; justify-content: space-between; font-size: .83rem; }
.form-options a { color: var(--blue); text-decoration: none; }
.checkbox { display: flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 500 !important; }
/* White "Remember me" box on the admin sign-in page. */
.admin-theme .checkbox input[type="checkbox"], .owner-theme .checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; position: relative; }
.admin-theme .checkbox input[type="checkbox"]:checked, .owner-theme .checkbox input[type="checkbox"]:checked { border-color: var(--blue); background: var(--blue); }
.admin-theme .checkbox input[type="checkbox"]:checked::after, .owner-theme .checkbox input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.admin-theme .checkbox input[type="checkbox"]:focus-visible, .owner-theme .checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Bigger type on the admin sign-in form only; other portals' login pages share these base classes. */
.admin-theme .auth-card p.muted { font-size: 1rem; }
.admin-theme .auth-form label { font-size: 1.02rem; }
.admin-theme .input { font-size: 1.05rem; }
.admin-theme .form-options { font-size: .95rem; }
.admin-theme .primary-btn { font-size: 1.05rem; }
.admin-theme .brand { font-size: 1.9rem; }
.primary-btn, .secondary-btn { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: var(--blue-dark); background: var(--yellow); font-weight: 750; text-decoration: none; cursor: pointer; }
.primary-btn:hover { background: var(--yellow-dark); }
.secondary-btn { color: var(--blue); background: var(--blue-light); }
.alert { margin-top: 18px; padding: 12px 14px; border-radius: 9px; color: #8b2828; background: #fde9e7; font-size: .87rem; }
.demo-box { margin-top: 24px; padding: 15px; display: grid; gap: 4px; border: 1px dashed #b8cbe1; border-radius: 10px; color: var(--muted); background: #f1f6fc; font-size: .79rem; }

/* Customer vs. property owner picker on /login */
.role-options { display: grid; gap: 14px; margin-top: 26px; }
.role-option { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--card); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.role-option:hover, .role-option:focus-visible { border-color: var(--blue); box-shadow: var(--shadow); }
.role-option-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-dark); background: var(--blue-light); font-size: 1.3rem; }
.role-option-copy { display: grid; gap: 2px; }
.role-option-title { font-weight: 750; }
.role-option-desc { color: var(--muted); font-size: .84rem; }
.role-option-arrow { margin-left: auto; color: var(--muted); }

/* Dedicated property owner login */
.owner-login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .82fr) 1.18fr; background: #f4f7fa; }
.owner-login-aside { min-height: 100vh; padding: 42px clamp(32px, 5vw, 76px); display: flex; flex-direction: column; color: white; background: linear-gradient(155deg, #081d35 0%, #0b3559 58%, #0b5270 100%); }
.owner-welcome { max-width: 510px; margin: auto 0; }
.owner-label { color: #76d5c5; font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.owner-welcome h1 { margin: 18px 0; font: 500 clamp(2.8rem, 5vw, 5rem)/1 Georgia, serif; letter-spacing: -.035em; }
.owner-welcome > p { color: rgb(255 255 255 / 70%); line-height: 1.75; }
.owner-feature-list { margin-top: 38px; display: grid; gap: 15px; color: rgb(255 255 255 / 84%); font-size: .9rem; }
.owner-secure-note { margin: 35px 0 0; color: rgb(255 255 255 / 48%); font-size: .76rem; }
.owner-login-main { padding: 48px; display: grid; place-items: center; }
.owner-login-card { width: min(480px, 100%); padding: clamp(28px, 4vw, 48px); border: 1px solid #dce4eb; border-radius: 18px; background: white; box-shadow: 0 24px 65px rgb(15 36 58 / 9%); }
.owner-card-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.owner-card-top .back-link { margin: 0; }
.owner-account-badge { padding: 6px 9px; border-radius: 5px; color: #0a5264; background: #dcf4ef; font-size: .66rem; font-weight: 850; letter-spacing: .08em; }
.owner-login-card h2 { margin: 42px 0 8px; font-size: 2rem; }
.owner-submit { min-height: 50px; border: 0; border-radius: 8px; color: var(--blue-dark); background: var(--yellow); font-weight: 750; cursor: pointer; }
.owner-submit:hover { background: var(--yellow-dark); }
.owner-switch { margin-top: 28px; padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid #e5eaf0; color: var(--muted); font-size: .82rem; }
.owner-switch a { color: var(--blue); font-weight: 750; text-decoration: none; }

/* Dedicated customer login */
.customer-theme { background: #fff; color: #1a1a1a; }
.customer-auth-header { height: 58px; padding: 0 max(16px, calc((100vw - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; color: white; background: #003b95; }
.customer-auth-brand { color: white; font-size: 1.03rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.customer-language { width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; color: white; background: #174a94; font-size: .66rem; font-weight: 800; cursor: pointer; }
/* The card is the whole page on a phone and a column on a desktop, so its
   frame is written once in fluid units rather than as a size per breakpoint.
   dvh, not vh: on mobile browsers vh counts the address bar that is not there,
   which leaves the page scrollable by exactly the height of the toolbar. */
.customer-auth-main { min-height: calc(100dvh - 58px); padding: clamp(26px, 7vw, 64px) clamp(14px, 4vw, 20px) clamp(28px, 6vw, 40px); background: white; }
.customer-auth-card { width: min(440px, 100%); margin: 0 auto; }
.customer-auth-card h1 { margin: 0 0 14px; color: #1a1a1a; font: 700 clamp(1.15rem, 4.6vw, 1.35rem)/1.3 Arial, sans-serif; }
.customer-auth-lead { margin: 0 0 clamp(16px, 4vw, 20px); font-size: clamp(.82rem, 3.2vw, .88rem); line-height: 1.5; }
.customer-combined-form { margin-top: 0; gap: 8px; }
.customer-combined-form label, .customer-auth-step label { color: #1a1a1a; font: 600 .82rem Arial, sans-serif; }
.customer-auth-input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #868686; border-radius: 4px; color: #1a1a1a; background: white; font-size: .87rem; }
.customer-auth-input:focus { outline: 2px solid #006ce4; outline-offset: 1px; border-color: #006ce4; }
.customer-auth-input.is-readonly { color: #555; background: #f5f5f5; }
.customer-auth-step { display: grid; gap: 8px; }
.customer-change-email { justify-self: start; margin: 1px 0 3px; color: #006ce4; font-size: .78rem; text-decoration: none; }
.customer-selected-email { margin-bottom: 7px; padding: 11px 12px; display: grid; gap: 2px; border-radius: 4px; color: #333; background: #f2f6fa; font-size: .78rem; }
.customer-selected-email strong { overflow-wrap: anywhere; font-size: .86rem; }
.customer-seeder-login { margin-top: 13px; padding: 12px 14px; display: grid; gap: 3px; border: 1px dashed #b8cbe1; border-radius: 4px; color: #52677c; background: #f5f8fc; font-size: .76rem; }
.customer-seeder-login strong { color: #1d3852; font-size: .8rem; }
.customer-auth-submit { min-height: 48px; margin-top: 8px; border: 0; border-radius: 4px; color: white; background: #006ce4; font-weight: 700; cursor: pointer; }
.customer-auth-submit:hover { background: #0057b8; }
.customer-auth-divider { margin: clamp(18px, 5vw, 27px) 0 clamp(18px, 5vw, 26px); display: flex; align-items: center; gap: 9px; font-size: .79rem; white-space: nowrap; }
.customer-auth-divider::before, .customer-auth-divider::after { content: ""; width: 100%; height: 1px; background: #dedede; }
.customer-social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 6vw, 32px); }
/* Square, and never wider than half the card, so two of them always sit on
   one row however narrow the phone is. */
.customer-social-button { width: clamp(56px, 18vw, 72px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #dedede; border-radius: 4px; background: white; cursor: pointer; }
.customer-social-button:hover { border-color: #006ce4; background: #f5f9ff; }
.google-mark { color: #4285f4; font: 800 1.8rem Arial, sans-serif; }
.apple-mark { position: relative; color: #171717; font-size: 1.65rem; }
.facebook-mark { width: 22px; height: 22px; color: white; background: #4267a9; font: 700 1.35rem/1.35 Arial, sans-serif; }
.customer-recovery { margin: 31px 0 49px; font-size: .8rem; text-align: center; }
.customer-recovery a, .customer-auth-footer a { color: #006ce4; text-decoration: none; }
.customer-auth-footer { padding-top: 18px; border-top: 1px solid #dedede; font-size: .7rem; line-height: 1.55; text-align: center; }
.customer-auth-footer p { margin: 6px 0; }
.customer-auth-card > .alert { margin: 0 0 14px; }
/*
 * "Continuing your booking" recap - shown when a guest was sent here from the
 * vehicle listing's mobile "Book Now", so the vehicle, date and arrival time
 * they picked don't just vanish once that page is gone. Vehicle module only
 * (AuthController's vehicleBookingSummary only ever fills this in for a
 * /checkout/cars/... return_to) and mobile only: on desktop the vehicle
 * listing page's own booking form stays visible and in reach via the back
 * button, so this recap would only repeat what's already on screen there.
 */
.bh-vehicle-booking-summary { display: none; }

@media (max-width: 767px) {
  .bh-vehicle-booking-summary {
    display: block;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #d8dce5;
    border-radius: 6px;
    background: #f3f6fc;
  }

  .bh-vehicle-booking-summary__label {
    color: #52677c;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .bh-vehicle-booking-summary__name {
    margin-top: 4px;
    color: #1a1a1a;
    font-size: .95rem;
    font-weight: 700;
  }

  .bh-vehicle-booking-summary__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    color: #375074;
    font-size: .78rem;
  }

  .bh-vehicle-booking-summary__meta > span + span {
    padding-left: 10px;
    border-left: 1px solid #c6d0e0;
  }
}
/* Passwordless sign-in: the code step, and the "we sent it" line above it. */
.alert-notice { color: #14532d; background: #e7f6ec; }
.customer-auth-hint { margin: 9px 0 0; color: #52677c; font-size: .76rem; line-height: 1.5; }
.customer-code-input { font-size: 1.5rem; font-weight: 700; letter-spacing: .5em; text-align: center; }
.customer-code-input::placeholder { color: #c4ccd4; letter-spacing: .5em; }

/* One box per digit. The original single input is still the field that posts;
   otp-input.js moves it out of sight and mirrors the boxes into it, so this is
   only ever a display — without JavaScript the plain box above is what shows. */
.customer-code-input.otp-source { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* Six equal columns that shrink with the card rather than overflowing it:
   1fr with min-width 0 lets a 320px phone hold all six on one row. */
.otp-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(5px, 2vw, 10px); }
.otp-box {
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid #868686;
  border-radius: 6px;
  color: #1a1a1a;
  background: white;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.otp-box:focus { outline: 0; border-color: #006ce4; box-shadow: 0 0 0 3px rgba(0, 108, 228, .18); }
/* The row confirms itself once all six are in. */
.otp-group.is-complete .otp-box { border-color: #006ce4; }
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { margin: 0; appearance: none; }
.customer-code-resend { margin-top: 12px; display: grid; gap: 8px; justify-items: start; }
.customer-code-resend-button { padding: 0; border: 0; color: #006ce4; background: none; font-size: .78rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
.customer-login-shell { min-height: 100vh; padding: 55px clamp(22px, 5vw, 76px); background: radial-gradient(circle at 12% 18%, #fff4c7 0 9%, transparent 28%), radial-gradient(circle at 88% 75%, #ccecff 0 8%, transparent 28%), linear-gradient(135deg, #f9fbff, #eef7ff); }
.customer-login-content { min-height: calc(100vh - 110px); display: grid; grid-template-columns: 1fr minmax(380px, 470px); align-items: center; gap: clamp(40px, 8vw, 120px); width: min(1180px, 100%); margin: 0 auto; }
.customer-intro { max-width: 610px; }
.customer-kicker { color: #0878ba; font-size: .73rem; font-weight: 850; letter-spacing: .14em; }
.customer-intro h1 { margin: 17px 0 22px; color: #123a5d; font: 500 clamp(3.2rem, 6vw, 6rem)/.98 Georgia, serif; letter-spacing: -.045em; }
.customer-intro p { max-width: 550px; color: #5c7286; font-size: 1.05rem; line-height: 1.75; }
.customer-trip-chips { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 9px; }
.customer-trip-chips span { padding: 8px 12px; border-radius: 99px; color: #34627f; background: rgb(255 255 255 / 75%); box-shadow: 0 5px 18px rgb(28 85 126 / 7%); font-size: .76rem; }
.customer-login-card { padding: clamp(28px, 4vw, 46px); border: 1px solid rgb(255 255 255 / 80%); border-radius: 28px; background: rgb(255 255 255 / 88%); box-shadow: 0 30px 80px rgb(24 80 122 / 14%); backdrop-filter: blur(14px); }
.customer-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #835e00; background: #ffe28a; font-size: 1.2rem; }
.customer-login-card h2 { margin: 22px 0 8px; color: #173c5d; font: 500 2rem Georgia, serif; }
.customer-submit { min-height: 50px; border: 0; border-radius: 99px; color: white; background: linear-gradient(90deg, #0878ba, #065c9f); font-weight: 750; cursor: pointer; }
.customer-submit:hover { filter: brightness(.94); }
.customer-back { display: inline-block; margin-bottom: 25px; color: #647c90; font-size: .8rem; text-decoration: none; }
.customer-owner-switch { display: block; margin-top: 22px; color: #176596; font-size: .8rem; font-weight: 700; text-align: center; text-decoration: none; }
.demo-box .strong { color: var(--ink); }

.dashboard-page { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; background: var(--paper); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 22px; display: flex; flex-direction: column; color: white; background: var(--blue-dark); }
.owner-dashboard .sidebar { background: #004a9f; }
.customer-dashboard .sidebar { background: #0057b8; }
.side-nav { display: grid; gap: 5px; margin-top: 55px; }
.side-nav a { padding: 12px 14px; border-radius: 9px; color: rgb(255 255 255 / 68%); font-size: .9rem; font-weight: 600; text-decoration: none; }
.side-nav a:hover, .side-nav a.active { color: var(--blue-dark); background: var(--yellow); }
.logout-btn { width: 100%; margin-top: auto; padding: 12px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 9px; color: white; background: transparent; cursor: pointer; }
.dashboard-main { min-width: 0; padding: 38px clamp(24px, 4vw, 58px) 70px; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.dashboard-header h1 { margin: 8px 0 4px; font: 500 clamp(2rem, 4vw, 3rem) Georgia, serif; letter-spacing: -.03em; }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--blue-dark); background: var(--yellow); font-weight: 800; }
.stats-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card, .panel { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.stat-card { display: grid; gap: 8px; }
.stat-label { color: var(--muted); font-size: .78rem; font-weight: 700; }
.stat-card .strong { font: 600 clamp(1.65rem, 3vw, 2.25rem) Georgia, serif; }
.trend { color: var(--muted); font-size: .75rem; }
.trend.positive { color: var(--blue); }
.trend.warning { color: #ae6a15; }
.content-grid { margin-top: 16px; display: grid; grid-template-columns: 1.75fr 1fr; gap: 16px; }
.panel h2 { margin: 7px 0 18px; font: 500 1.55rem Georgia, serif; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.input.compact { width: auto; min-height: 38px; }
.chart-placeholder { height: 220px; padding: 28px 10px 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; border-bottom: 1px solid var(--line); background: linear-gradient(#fff, #f2f7fd); }
.bar { width: 9%; border-radius: 8px 8px 0 0; background: linear-gradient(#4f9ee8, var(--blue)); }
.task-list { margin: 0; padding: 0; display: grid; list-style: none; }
.task-list li { padding: 15px 0; display: grid; gap: 3px; border-bottom: 1px solid var(--line); }
.task-list span { color: var(--muted); font-size: .8rem; }
.booking-row { padding: 14px 0; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.booking-row .grow { display: grid; gap: 3px; }
.booking-row .muted { font-size: .8rem; }
.date-tile { width: 48px; padding: 6px; border-radius: 8px; color: var(--blue-dark); background: var(--blue-light); font-size: .68rem; font-weight: 800; text-align: center; }
.status-pill { font-size: .62rem; }
.status-pill.pending { color: #9b651f; background: #fff1d8; }
.rating-score { margin-top: 25px; font: 500 5rem Georgia, serif; color: var(--blue); }
.trip-banner { min-height: 220px; margin-top: 16px; padding: 30px; display: flex; justify-content: space-between; align-items: center; border-radius: 13px; color: white; background: linear-gradient(120deg, #00458f, #0878df); }
.trip-banner h2 { margin: 18px 0 8px; font-size: 2rem; }
.trip-banner p { color: rgb(255 255 255 / 75%); }
.trip-icon { font-size: 5rem; }
.trip-actions { display: flex; gap: 10px; margin-top: 16px; }
.progress { height: 9px; margin: 28px 0 16px; overflow: hidden; border-radius: 9px; background: #e2eaf3; }
.progress span { display: block; width: 82%; height: 100%; background: var(--yellow); }

@media (max-width: 900px) {
  .owner-login-shell, .customer-login-content { grid-template-columns: 1fr; }
  .owner-login-aside { min-height: 380px; }
  .owner-login-main { padding: 42px 22px; }
  .customer-login-content { padding-top: 45px; }
  .customer-intro { text-align: center; margin: 0 auto; }
  .customer-trip-chips { justify-content: center; }
  .customer-login-card { width: min(470px, 100%); margin: 0 auto; }
  .portal-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-story { min-height: 390px; }
  .story-content { padding: 70px 0 30px; }
  .dashboard-page { grid-template-columns: 82px 1fr; }
  .sidebar { padding-inline: 14px; align-items: center; }
  .sidebar .brand span:last-child, .side-nav a, .logout-btn { font-size: 0; }
  .side-nav a::first-letter, .logout-btn::first-letter { font-size: .9rem; }
}

@media (max-width: 640px) {
  /* Anything under 16px makes iOS Safari zoom the page in when the field is
     focused, and it never zooms back out - the form is then wider than the
     screen for the rest of the sign-in. The fields carry 16px on phones for
     that reason alone, and 44px of height so they can be hit with a thumb. */
  .customer-auth-input, .otp-box { font-size: 16px; }
  .customer-auth-input { min-height: 44px; }
  .customer-auth-submit { min-height: 50px; }
  .customer-code-resend-button, .customer-change-email { min-height: 34px; }
  .customer-recovery { margin-block: clamp(18px, 6vw, 31px) clamp(24px, 8vw, 49px); }
  .customer-seeder-login { font-size: .74rem; }
  .owner-login-aside { min-height: 330px; padding: 28px 22px; }
  .owner-feature-list, .owner-secure-note { display: none; }
  .owner-card-top, .owner-switch { align-items: flex-start; flex-direction: column; }
  .owner-login-card h2 { margin-top: 30px; }
  .customer-login-shell { padding-inline: 18px; }
  .customer-login-content { gap: 32px; }
  .customer-intro h1 { font-size: 2.8rem; }
  .site-header, .site-footer, .landing { width: min(100% - 28px, 1240px); }
  .header-note { display: none; }
  .portal-grid, .stats-grid, .content-grid { grid-template-columns: 1fr; }
  .auth-panel { padding: 30px 22px; }
  .auth-story { padding: 28px 22px; }
  .dashboard-page { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 15px 18px; flex-direction: row; justify-content: space-between; }
  .side-nav { margin: 0; display: block; }
  .side-nav a:not(.active) { display: none; }
  .logout-btn { width: auto; margin: 0; font-size: .8rem; }
  .dashboard-main { padding: 25px 16px 50px; }
  .dashboard-header { align-items: flex-start; }
  .dashboard-header .primary-btn { display: none; }
  .trip-banner { padding: 22px; }
  .trip-icon { display: none; }
}

/* Customer traveller dashboard */
.customer-portal{--cp-blue:#064b9e;--cp-action:#0877dc;--cp-ink:#102a43;--cp-muted:#718196;min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr);color:var(--cp-ink);background:#f4f7fb;font-family:"Inter",Arial,sans-serif}.customer-sidebar{position:sticky;top:0;height:100vh;padding:27px 18px;display:flex;flex-direction:column;color:#fff;background:linear-gradient(180deg,#063c82,#052b60)}.customer-dash-brand{padding:0 10px;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}.customer-dash-brand>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:#063c82;background:#ffd54a;font-weight:900}.customer-dash-brand strong{font-size:18px}.customer-dash-nav{margin-top:42px;display:grid;gap:4px}.customer-nav-label{margin:21px 12px 7px;color:rgb(255 255 255 / 45%);font-size:9px;font-weight:800;letter-spacing:.14em}.customer-dash-nav a{min-height:44px;padding:0 12px;display:flex;align-items:center;gap:12px;border-radius:8px;color:rgb(255 255 255 / 68%);text-decoration:none;font-size:13px}.customer-dash-nav a>span{width:20px;text-align:center;font-size:17px}.customer-dash-nav a strong{font-weight:600}.customer-dash-nav a em{min-width:20px;margin-left:auto;padding:3px 6px;border-radius:10px;color:#063c82;background:#ffd54a;font-size:10px;font-style:normal;text-align:center}.customer-dash-nav a:hover,.customer-dash-nav a.active{color:#fff;background:rgb(255 255 255 / 11%)}.customer-sidebar-account{margin-top:auto;padding:17px 9px 0;display:grid;grid-template-columns:38px minmax(0,1fr) 30px;align-items:center;gap:9px;border-top:1px solid rgb(255 255 255 / 12%)}.customer-avatar{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:#063c82;background:#ffd54a;font-size:0;font-weight:800}.customer-avatar::first-letter{font-size:14px}.customer-sidebar-account>div{min-width:0;display:grid;gap:3px}.customer-sidebar-account strong,.customer-sidebar-account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-sidebar-account strong{font-size:11px}.customer-sidebar-account>div span{color:rgb(255 255 255 / 50%);font-size:9px}.customer-sidebar-account button{border:0;color:#fff;background:transparent;font-size:18px;cursor:pointer}.customer-workspace{min-width:0}.customer-topbar{height:70px;padding:0 clamp(22px,4vw,54px);display:flex;align-items:center;gap:27px;border-bottom:1px solid #e0e6ed;background:#fff}.customer-topbar>a{color:#536b83;font-size:12px;text-decoration:none}.customer-topbar>a:hover{color:var(--cp-action)}.customer-menu{display:none;border:0;background:transparent;font-size:21px}.customer-top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.customer-top-actions .customer-help{color:#536b83;text-decoration:none;font-size:12px}.customer-explore{padding:11px 17px;border-radius:6px!important;color:#fff!important;background:var(--cp-action);font-weight:700}.customer-content{width:min(1240px,calc(100% - 48px));margin:auto;padding:38px 0 70px}.customer-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.customer-eyebrow{color:var(--cp-action);font-size:9px;font-weight:850;letter-spacing:.13em}.customer-welcome h1{margin:8px 0 7px;font-size:30px;letter-spacing:-.035em}.customer-welcome p{margin:0;color:var(--cp-muted);font-size:13px}.customer-welcome-date{min-width:160px;padding:12px 16px;display:grid;gap:3px;border:1px solid #dde5ee;border-radius:8px;background:#fff}.customer-welcome-date span{color:var(--cp-muted);font-size:9px}.customer-welcome-date strong{font-size:12px}.customer-kpis{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.customer-kpis article{min-height:108px;padding:19px;display:flex;align-items:center;gap:14px;border:1px solid #e0e6ed;border-radius:10px;background:#fff}.customer-kpi-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;font-size:19px}.customer-kpi-icon.blue{color:#1269bd;background:#e6f2ff}.customer-kpi-icon.green{color:#15835b;background:#e4f8ef}.customer-kpi-icon.rose{color:#b44e68;background:#fceaf0}.customer-kpi-icon.gold{color:#956a00;background:#fff3ca}.customer-kpis article>div{display:grid;gap:3px}.customer-kpis article span{color:var(--cp-muted);font-size:10px}.customer-kpis article strong{font-size:23px}.customer-kpis article small{color:#7890a5;font-size:8px}.customer-dashboard-grid{margin-top:15px;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.75fr);gap:15px}.customer-next-trip,.customer-quick-card,.customer-panel,.customer-saved-section{padding:24px;border:1px solid #e0e6ed;border-radius:11px;background:#fff}.customer-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.customer-section-heading h2,.customer-quick-card h2,.customer-panel h2{margin:6px 0 0;font-size:18px}.customer-section-heading>a,.customer-panel>a{color:var(--cp-action);font-size:10px;text-decoration:none}.customer-trip-hero{margin-top:18px;display:grid;grid-template-columns:240px 1fr;overflow:hidden;border-radius:9px;background:#f2f7fc}.customer-trip-photo{position:relative;min-height:205px}.customer-trip-photo img{width:100%;height:100%;object-fit:cover}.customer-trip-photo span{position:absolute;top:12px;left:12px;padding:5px 8px;border-radius:4px;color:#166242;background:#ddf7e9;font-size:8px;font-weight:800}.customer-trip-details{padding:23px;display:flex;flex-direction:column;align-items:flex-start}.customer-trip-details>span{color:var(--cp-action);font-size:9px;font-weight:800}.customer-trip-details h3{margin:8px 0 5px;font-size:20px}.customer-trip-details>p{margin:0;color:var(--cp-muted);font-size:10px}.customer-trip-details dl{width:100%;margin:18px 0;display:flex;gap:30px}.customer-trip-details dl div{display:grid;gap:3px}.customer-trip-details dt{color:var(--cp-muted);font-size:8px}.customer-trip-details dd{margin:0;font-size:9px;font-weight:700}.customer-trip-buttons{margin-top:auto;display:flex;gap:8px}.customer-trip-buttons a{padding:10px 13px;border-radius:5px;font-size:9px;font-weight:700;text-decoration:none}.customer-trip-buttons .primary{color:#fff;background:var(--cp-action)}.customer-trip-buttons .secondary{color:var(--cp-action);border:1px solid #bed4ea;background:#fff}.customer-quick-card h2{margin-bottom:17px}.customer-quick-card nav{display:grid}.customer-quick-card nav a{padding:15px 0;display:grid;grid-template-columns:36px 1fr 15px;align-items:center;gap:10px;border-top:1px solid #edf0f4;color:var(--cp-ink);text-decoration:none}.customer-quick-card nav a>span{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--cp-action);background:#eaf4ff}.customer-quick-card nav a div{display:grid;gap:3px}.customer-quick-card nav a strong{font-size:10px}.customer-quick-card nav a small{color:var(--cp-muted);font-size:8px}.customer-quick-card nav a em{color:var(--cp-action);font-style:normal}.customer-lower-grid{margin-top:15px;display:grid;grid-template-columns:1.5fr 1fr;gap:15px}.customer-booking-list{margin-top:14px}.customer-booking-row{padding:13px 0;display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:13px;border-top:1px solid #edf0f4}.customer-booking-date{width:40px;height:44px;display:grid;place-items:center;align-content:center;border-radius:6px;color:#0757a8;background:#e7f2ff}.customer-booking-date strong{font-size:16px}.customer-booking-date small{font-size:7px}.customer-booking-date.past{color:#66788c;background:#edf1f5}.customer-booking-row>div{display:grid;gap:4px}.customer-booking-row>div strong{font-size:10px}.customer-booking-row>div span{color:var(--cp-muted);font-size:8px}.customer-booking-row>em{padding:5px 8px;border-radius:10px;font-size:7px;font-style:normal}.customer-booking-row>em.confirmed{color:#147249;background:#e1f7eb}.customer-booking-row>em.completed{color:#64758a;background:#edf1f5}.customer-reward-head{display:flex;align-items:center;justify-content:space-between}.customer-reward-head p{margin:5px 0;color:var(--cp-muted);font-size:9px}.customer-reward-head>span{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;color:#986f00;background:#fff1bd;font-size:25px}.customer-reward-progress{height:7px;margin:20px 0 10px;overflow:hidden;border-radius:7px;background:#e5eaf0}.customer-reward-progress span{display:block;width:82%;height:100%;background:linear-gradient(90deg,#ffc930,#f3a900)}.customer-reward-card>small{display:block;color:var(--cp-muted);font-size:8px}.customer-reward-card>a{display:inline-block;margin-top:17px;color:var(--cp-action);font-size:9px;text-decoration:none}.customer-saved-section{margin-top:15px}.customer-saved-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.customer-saved-grid a{position:relative;height:150px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:8px;color:#fff;text-decoration:none}.customer-saved-grid a::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgb(2 21 48 / 78%))}.customer-saved-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.customer-saved-grid span,.customer-saved-grid strong{position:relative;z-index:1}.customer-saved-grid span{font-size:8px}.customer-saved-grid strong{margin-top:3px;font-size:13px}.customer-dashboard-footer{padding:18px clamp(22px,4vw,54px);display:flex;justify-content:space-between;border-top:1px solid #e0e6ed;color:#7c8997;background:#fff;font-size:9px}.customer-dashboard-footer div{display:flex;gap:18px}.customer-dashboard-footer a{color:inherit;text-decoration:none}
@media(max-width:1050px){.customer-kpis{grid-template-columns:repeat(2,1fr)}.customer-dashboard-grid{grid-template-columns:1fr}.customer-quick-card nav{grid-template-columns:repeat(3,1fr);gap:15px}.customer-quick-card nav a{border-top:0}.customer-trip-hero{grid-template-columns:210px 1fr}}
@media(max-width:760px){.customer-portal{display:block}.customer-sidebar{position:fixed;z-index:100;left:-260px;width:248px;transition:left .2s}.customer-nav-open .customer-sidebar{left:0;box-shadow:20px 0 50px rgb(0 20 50 / 30%)}.customer-menu{display:block}.customer-topbar>a:not(.customer-explore){display:none}.customer-content{width:min(100% - 28px,1240px);padding-top:25px}.customer-welcome{align-items:flex-start;flex-direction:column}.customer-welcome-date{width:100%}.customer-lower-grid{grid-template-columns:1fr}.customer-quick-card nav{grid-template-columns:1fr}.customer-trip-hero{grid-template-columns:1fr}.customer-trip-photo{min-height:190px}.customer-saved-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.customer-kpis,.customer-saved-grid{grid-template-columns:1fr}.customer-kpis article{min-height:90px}.customer-next-trip,.customer-quick-card,.customer-panel,.customer-saved-section{padding:18px}.customer-trip-details dl{align-items:flex-start;flex-direction:column;gap:10px}.customer-top-actions .customer-help{display:none}.customer-dashboard-footer{align-items:flex-start;flex-direction:column;gap:9px}}

/* Admin operations dashboard */
.admin-ui {
  --admin-blue: #00439b;
  --admin-action: #0874e8;
  --admin-bg: #f3f6f9;
  --admin-border: #dbe3ec;
  min-height: 100vh;
  color: #0c315f;
  background: var(--admin-bg);
  font-size: 13px;
  font-family: "Instrument Sans", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.admin-ui button,
.admin-ui input,
.admin-ui select,
.admin-ui textarea { font-family: inherit; }
.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 288px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--admin-border);
  background: #fff;
}
.admin-brand {
  min-height: 82px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: var(--admin-blue);
}
.admin-brand .brand-mark { width: 40px; height: 40px; font-size: 18px; }
.admin-brand div { display: grid; gap: 4px; }
.admin-brand .strong { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.admin-brand div span:last-child { color: #d6e6ff; font-size: 11px; }
.admin-nav {
  min-height: 0;
  padding: 16px 12px;
  display: grid;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b9c9dc transparent;
}
.admin-nav::-webkit-scrollbar { width: 6px; }
.admin-nav::-webkit-scrollbar-track { background: transparent; }
.admin-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #b9c9dc;
}
.admin-nav::-webkit-scrollbar-thumb:hover { background: #8ea7c2; }
.admin-nav a {
  min-height: 48px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  border-radius: 8px;
  color: #173d69;
  font-weight: 600;
  text-decoration: none;
}
.admin-nav a:hover, .admin-nav a.active { color: #006ee6; background: #eaf3ff; }
.admin-nav .nav-group { margin: 0; }
.admin-nav .nav-group summary {
  min-height: 48px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  border-radius: 8px;
  color: #173d69;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.admin-nav .nav-group summary::-webkit-details-marker { display: none; }
.admin-nav .nav-group summary:hover,
.admin-nav .nav-group.active > summary,
.admin-nav .nav-group[open] > summary { color: #006ee6; background: #eaf3ff; }
.admin-nav .nav-group .chevron { transition: transform .18s ease; }
.admin-nav .nav-group[open] .chevron { transform: rotate(90deg); }
.admin-nav .nav-toggle { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.admin-nav .nav-toggle + label {
  min-height: 48px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  border-radius: 8px;
  color: #173d69;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.admin-nav .nav-toggle + label:hover,
.admin-nav .nav-group.active > label,
.admin-nav .nav-toggle:checked + label { color: #006ee6; background: #eaf3ff; }
.admin-nav .nav-toggle:focus-visible + label { outline: 2px solid #0874e8; outline-offset: 2px; }
.admin-nav .nav-toggle + label:active { transform: scale(.985); }
.admin-nav .nav-toggle + label .chevron { transition: transform .25s ease; }
.admin-nav .nav-toggle:checked + label .chevron { transform: rotate(90deg); }
.admin-nav .nav-group .nav-submenu {
  display: grid;
  gap: 2px;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: max-height .3s ease, padding .3s ease, opacity .2s ease, transform .3s ease, visibility 0s linear .3s;
}
.admin-nav .nav-toggle:checked + label + .nav-submenu {
  max-height: 320px;
  padding-top: 4px;
  padding-bottom: 8px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.admin-nav a.nav-parent.expanded { color: #006ee6; background: #eaf3ff; }
.admin-nav a.nav-parent .chevron { transition: transform .18s ease; }
.admin-nav a.nav-parent.expanded .chevron { transform: rotate(180deg); }
.nav-submenu {
  display: none;
  padding: 4px 0 8px 41px;
}
.nav-submenu.open { display: grid; gap: 2px; }
.admin-nav .nav-submenu a {
  min-height: 35px;
  margin: 0;
  padding: 0 10px;
  display: grid;
  grid-template-columns: 16px 1fr;
  border-radius: 6px;
  color: #667f9d;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
}
.admin-nav .nav-submenu a:hover, .admin-nav .nav-submenu a.active {
  color: #0874e8;
  background: #f1f7ff;
}
.admin-nav .admin-nav-nested { display: grid; }
.admin-nav .admin-nav-nested > .nav-toggle + label {
  min-height: 38px;
  padding: 0 9px;
  grid-template-columns: 16px 1fr 16px;
  color: #315b88;
  font-size: 12px;
}
.admin-nav .admin-nav-nested .nav-dot { color: #75a7d8; font-size: 7px; }
.admin-nav .admin-nav-nested > .nav-submenu { padding-left: 17px; }
.admin-nav .admin-nav-nested > .nav-toggle:checked + label + .nav-submenu {
  max-height: 620px;
  padding-top: 3px;
  padding-bottom: 5px;
}
.admin-nav .nav-group > .nav-toggle:checked + label + .nav-submenu { max-height: 2400px; }
.nav-icon { color: #5f82aa; font-size: 17px; --fa-width: 22px; }
.admin-nav a.active .nav-icon { color: #006ee6; }
.admin-operation-module-boats { --module-accent:#0799aa; --module-dark:#056372; --module-soft:#e3f9fb; --module-shape:30px 30px 8px 8px; }
.admin-ui .admin-operation-row > .admin-operation-property-icon.fa-solid {
  --fa-display: grid;
  --fa-width: 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  align-items: center;
  justify-items: center;
  place-self: center;
  line-height: 1;
  text-align: center;
}
.admin-ui .admin-operation-hero > .admin-operation-hero-icon.fa-solid {
  --fa-display: grid;
  --fa-width: 82px;
  box-sizing: border-box;
  width: 82px;
  min-width: 82px;
  height: 82px;
  flex: 0 0 82px;
  place-items: center;
  margin-right: 4px;
  overflow: hidden;
  line-height: 1;
  text-align: center;
}
.chevron { color: #0874e8; text-align: right; }
.nav-rule { margin: 8px 0; border-top: 1px solid var(--admin-border); }
.nav-caption { padding: 12px 12px 4px; color: #102c51; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.admin-profile {
  margin: auto 12px 12px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 38px 1fr 28px;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: #f5f7fa;
}
.profile-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--admin-blue);
  background: var(--yellow);
  font-weight: 900;
}
.admin-profile div { display: grid; gap: 3px; }
.admin-profile div span:last-child { color: #8093aa; font-size: 10px; }
.profile-exit { border: 0; color: #7890aa; background: transparent; font-size: 22px; cursor: pointer; }
.admin-workspace { min-width: 0; margin-left: 288px; }
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  min-height: 82px;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--admin-border);
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(8px);
}
.admin-topbar h1 { margin: 0 0 4px; color: var(--admin-blue); font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.admin-topbar div > span { color: #758aa3; font-size: 12px; }
.admin-topbar-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #6482a2; font-size: 11px; font-weight: 700; text-decoration: none; }
.admin-topbar-back:hover { color: var(--admin-blue); }
.admin-dash-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; color: #45627f; font-size: 12px; font-weight: 700; text-decoration: none; }
.admin-dash-back:hover { border-color: #b9cfe3; color: var(--admin-blue); }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.admin-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  color: var(--admin-blue);
  background: #eaf3ff;
  font-size: 17px;
  cursor: pointer;
}
.search-box {
  width: min(320px, 26vw);
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  color: #7e93ac;
  background: #f8fafc;
}
.search-box input { width: 100%; border: 0; outline: 0; color: #25496f; background: transparent; }
.add-hotel {
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 11px;
  color: white;
  background: var(--admin-action);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
/* Quick-actions dropdown - the topbar's "+ Add hotel" button opens this
   instead of navigating straight to hotel creation, since owners open it
   just as often for a coupon or notification as for a new listing. Reuses
   .admin-quick-links' own colored rows (blue/green/purple/orange/red/teal
   per row, already themed below) rather than restyling each link here. */
.add-hotel-menu { position: relative; }
.add-hotel-menu .admin-quick-links {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  margin-top: 8px;
  width: 210px;
  padding: 10px;
  display: none;
  grid-template-columns: 1fr;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 15px 40px rgb(3 24 62 / 18%);
}
.add-hotel-menu .admin-quick-links.open { display: grid; }
.admin-content { padding: 28px 32px 60px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-reference-board + .kpi-grid { margin-top: 24px; }
/* The per-type cards below the KPI totals had no heading of their own, so the
   row read as an unlabeled continuation of the totals above it rather than
   its own section - this also carries the 24px gap every other section here
   opens with, since the two rows had no space between them at all before. */
.kpi-grid-title { margin: 24px 0 12px; color: var(--admin-blue); font-size: 16px; font-weight: 700; }
/* Same bare, un-carded section heading as .kpi-grid-title (Operational
   Summary sits directly above operations-widget-grid, not inside an
   .admin-panel), plus the Year/Quarter/Month/Week/Day filter beside it. */
.ops-grid-title { margin: 24px 0 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
.ops-grid-title h2 { margin: 0; color: var(--admin-blue); font-size: 16px; font-weight: 700; }
/* Sections hidden for now (kept in markup, not removed) */
.is-hidden-duplicate { display: none !important; }
.kpi-card {
  padding: 20px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-content: start;
  gap: 0 12px;
  border: 1px solid var(--admin-border);
  border-radius: 15px;
  background: white;
  box-shadow: 0 2px 3px rgb(25 54 88 / 12%);
  color: inherit;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* Each card is now a link into the admin section its number comes from, so
   it needs to read as clickable rather than as a plain stat tile. */
.kpi-card:hover { transform: translateY(-3px); border-color: var(--admin-action); box-shadow: 0 10px 24px rgb(25 54 88 / 16%); }
.kpi-card:focus-visible { outline: 2px solid var(--admin-action); outline-offset: 2px; }
.kpi-icon, .mini-icon, .list-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #0874e8;
  background: #eaf3ff;
  font-size: 18px;
  font-weight: 800;
}
.kpi-icon.yellow, .mini-icon.yellow { color: #b57900; background: #fff5da; }
/* Icons across the dashboard are FontAwesome glyphs (fa-solid), which need
   font-weight:900 to resolve to the solid glyph set - the shared 800 above
   left these rendering blank or as the wrong (regular-weight) glyph. */
.kpi-icon, .mini-icon, .operation-icon, .list-icon, .notice-icon, .ticket-icon { font-weight: 900; }
.kpi-card > div { display: grid; align-content: center; gap: 6px; }
.kpi-label-row { display: flex; align-items: center; gap: 6px; }
.kpi-period-badge { padding: 2px 7px; border-radius: 6px; color: #0874e8; background: #eef6ff; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.kpi-label { color: #496885; font-size: 11px; }
.kpi-value { color: #071538; font-size: 20px; font-weight: 900; line-height: 1; }
.kpi-note { grid-column: 1 / -1; align-self: end; margin-top: 13px; color: #8396ad; font-size: 10px; }
.kpi-note.up { color: #02933a; font-weight: 750; }
.kpi-note.down { color: #e50019; font-weight: 750; }
.admin-panel {
  min-width: 0;
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--admin-border);
  border-radius: 15px;
  background: white;
  box-shadow: 0 2px 3px rgb(25 54 88 / 11%);
}
.admin-panel h2 { margin: 0; color: var(--admin-blue); font-size: 16px; }
.type-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.type-card {
  min-height: 114px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  color: #496885;
  text-align: center;
}
.mini-icon { width: 37px; height: 37px; border-radius: 9px; font-size: 16px; }
/* "Total Property by Type" tiles: white glyph on a distinct colour per type. */
.type-grid--colorful .type-card .mini-icon { color: #fff; }
.type-grid--colorful .type-card:nth-child(1) .mini-icon { background: #2f6fed; }
.type-grid--colorful .type-card:nth-child(2) .mini-icon { background: #7c3aed; }
.type-grid--colorful .type-card:nth-child(3) .mini-icon { background: #0d9488; }
.type-grid--colorful .type-card:nth-child(4) .mini-icon { background: #16a34a; }
.type-grid--colorful .type-card:nth-child(5) .mini-icon { background: #ea8a0b; }
.type-grid--colorful .type-card:nth-child(6) .mini-icon { background: #e11d64; }
.type-grid--colorful .type-card:nth-child(7) .mini-icon { background: #0891b2; }
.type-grid--colorful .type-card:nth-child(8) .mini-icon { background: #4f46e5; }
.type-grid--colorful .type-card:nth-child(9) .mini-icon { background: #6366f1; }
.type-grid--colorful .type-card:nth-child(10) .mini-icon { background: #2563eb; }

/* The admin summary now contains nine property types. Keep all nine on one
   balanced row when the workspace has room; the old fixed eight-column grid
   left the ninth card by itself and created a large empty second row. */
.admin-content .admin-panel>.type-grid--colorful{grid-template-columns:repeat(10,minmax(0,1fr))}
.admin-content .admin-panel>.type-grid--colorful .type-card{height:122px;min-height:122px;padding:10px 7px;display:grid;grid-template-rows:37px 22px 32px;align-items:center;justify-items:center;align-content:center;gap:4px;box-sizing:border-box}.admin-content .admin-panel>.type-grid--colorful .mini-icon{display:grid;place-items:center;align-self:center}.admin-content .admin-panel>.type-grid--colorful .type-value{align-self:center;line-height:22px}.admin-content .admin-panel>.type-grid--colorful .type-card>span:last-child{min-height:32px;display:flex;align-items:center;justify-content:center;line-height:1.35}
@media(max-width:1200px){.admin-content .admin-panel>.type-grid--colorful{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-content .admin-panel>.type-grid--colorful .type-card:last-child{grid-column:1/-1}}
@media(max-width:760px){.admin-content .admin-panel>.type-grid--colorful{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-content .admin-panel>.type-grid--colorful .type-card:last-child{grid-column:auto}}
@media(max-width:480px){.admin-content .admin-panel>.type-grid--colorful{grid-template-columns:1fr}.admin-content .admin-panel>.type-grid--colorful .type-card:last-child{grid-column:auto}}
.type-value { color: var(--admin-blue); font-size: 20px; font-weight: 900; }
.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr) minmax(300px, 1fr);
  gap: 24px;
}
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-title > div:first-child { display: grid; gap: 6px; }
.panel-title div span, .panel-subtitle { color: #7188a4; font-size: 11px; }
.period-tabs { padding: 3px; display: flex; gap: 3px; border-radius: 8px; background: #f0f4f8; }
.period-tabs span { padding: 5px 9px; border-radius: 6px; color: #496885 !important; font-size: 10px !important; }
.period-tabs span.active { color: var(--admin-blue) !important; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.revenue-total { margin-top: 22px; display: flex; align-items: baseline; gap: 12px; }
.revenue-total span:first-child { color: var(--admin-blue); font-size: 24px; font-weight: 900; }
.revenue-total span:last-child { color: #04923c; font-size: 10px; font-weight: 800; }
.line-chart { height: 315px; margin-top: 14px; display: grid; grid-template-columns: 55px 1fr; }
.y-axis { padding-bottom: 28px; display: flex; flex-direction: column; justify-content: space-between; color: #8da0b8; font-size: 9px; text-align: right; }
.plot { position: relative; margin-left: 10px; overflow: hidden; }
.grid-line { position: absolute; right: 0; left: 0; border-top: 1px solid #e6edf4; }
.grid-line.one { top: 0; }
.grid-line.two { top: 23%; }
.grid-line.three { top: 46%; }
.grid-line.four { top: 69%; }
.chart-fill {
  position: absolute;
  inset: 10% 0 28px;
  transform-origin: bottom;
  transition: transform .2s ease;
  opacity: .18;
  background: #0874e8;
  clip-path: polygon(0 91%, 9% 80%, 18% 71%, 27% 61%, 36% 51%, 45% 41%, 54% 30%, 63% 27%, 72% 14%, 81% 7%, 90% 3%, 100% 0, 100% 100%, 0 100%);
}
.chart-line {
  position: absolute;
  inset: 10% 0 28px;
  transform-origin: bottom;
  transition: transform .2s ease;
  background: #0874e8;
  clip-path: polygon(0 90%, 9% 79%, 18% 70%, 27% 60%, 36% 50%, 45% 40%, 54% 29%, 63% 26%, 72% 13%, 81% 6%, 90% 2%, 100% 0, 100% 1.2%, 90% 3.2%, 81% 7.2%, 72% 14.2%, 63% 27.2%, 54% 30.2%, 45% 41.2%, 36% 51.2%, 27% 61.2%, 18% 71.2%, 9% 80.2%, 0 91.2%);
}
.point { display: none; }
.months { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; color: #8398b2; font-size: 9px; }
.booking-overview { display: flex; flex-direction: column; }
.donut {
  width: 126px;
  height: 126px;
  margin: 28px auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#0fa22f 0 46.4%, #eda400 46.4% 66.4%, #d94444 66.4% 80.3%, #0874e8 80.3% 97.3%, #979797 97.3%);
}
.donut-hole { width: 75px; height: 75px; display: grid; place-content: center; gap: 4px; border-radius: 50%; background: white; text-align: center; }
.donut-hole span:first-child { color: #8799ae; font-size: 9px; }
.donut-hole .strong { color: var(--admin-blue); font-size: 15px; }
.legend-list, .notification-list, .booking-list { margin: 0; padding: 0; display: grid; list-style: none; }
.legend-list { gap: 14px; }
.legend-list li { display: grid; grid-template-columns: 10px 1fr auto 38px; align-items: center; gap: 8px; color: #486582; }
.legend-list li span:last-child { color: #879bb4; text-align: right; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.green { background: #0fa22f; }
.dot.orange { background: #eda400; }
.dot.red { background: #d94444; }
.dot.blue { background: #0874e8; }
.dot.gray { background: #979797; }
.dot.teal { background: #16ae7b; }
.dot.purple { background: #7048d7; }
.dot.pink { background: #e674a5; }
.unread, .panel-badge { padding: 5px 10px; border-radius: 8px; color: #0874e8; background: #eef6ff; font-size: 10px; font-weight: 800; }
/* "Total/Bookings by Property Type" - the badge switches This Year/This
   Month, and whichever picker matches the current mode sits beside it: a
   year <select> in Year mode, a custom month/year popup in Month mode.
   Built in-house rather than <input type="month"> - native month-picker
   support is inconsistent across browsers (no calendar UI at all in
   Firefox, and it turned out unreliable even where it should have worked),
   so this follows the same custom-popup pattern the flight booking form
   already uses instead of trusting the browser to supply one. */
/* .panel-title normally uses space-between so a badge/tabs sit flush against
   the card's far edge - fine for a narrow card, but on a wide one it drags
   the This Year/Year-select filter far away from the title, leaving a
   stretched, broken-looking gap. Clustering it right after the title instead
   keeps their spacing constant no matter how wide the card is, without
   touching the card/grid widths themselves. */
.panel-title:has(.type-filter) { justify-content: flex-start; }
/* flex-wrap/min-width/max-width here (not just under the 700px breakpoint
   further down) so the badge+select pair always has room to wrap instead of
   overflowing - a native <select> won't shrink below its rendered content
   width in a flex row without an explicit min-width:0. */
.type-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.type-filter > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.type-year-select {
  padding: 5px 8px;
  border: 1px solid #d7e6fb;
  border-radius: 8px;
  color: #0874e8;
  background: #eef6ff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
/* This used to be a click-to-cycle badge on wide screens, swapped for this
   native <select> only below 700px (or below 1100px inside the narrower
   reference-board cards). The badge was still too easy to mis-tap and its
   popup too easy to overlap with the year <select> beside it even on
   desktop, and it kept overflowing its column at in-between widths the
   700/1100px thresholds didn't anticipate - so the reliable <select> is now
   the only control shown, at every width. See wireTypeFilter's modeSelect
   handling in admin-dashboard.js for how it drives the same state the badge
   used to. */
.type-filter [data-type-toggle] { display: none; }
.type-mode-select {
  display: inline-block;
  padding: 4px 6px;
  border: 1px solid #d7e6fb;
  border-radius: 8px;
  color: #0874e8;
  background: #eef6ff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
}
.type-month-picker { position: relative; }
.type-month-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid #d7e6fb;
  border-radius: 8px;
  color: #0874e8;
  background: #eef6ff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
/* This badge+select pair reads as one small control, not a page heading, so
   it stays at this compact size everywhere - not just below some viewport
   width - matching every other panel-badge's footprint on the page. Placed
   after .type-year-select/.type-month-trigger above so it wins the same-
   specificity tie-break by source order rather than getting overridden
   back to their 5px/10px defaults. */
/* white-space:nowrap so a squeezed .type-filter wraps the whole badge/select
   down to its own line (flex-wrap on the parent) rather than splitting
   "This Year" across two lines inside the badge itself and doubling its
   height - the exact "too tall on small screens" failure mode this exists
   to prevent. */
.type-filter .panel-badge, .type-year-select, .type-month-trigger { padding: 4px 6px; font-size: 9px; line-height: 1.3; white-space: nowrap; }
.type-month-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  margin-top: 6px;
  padding: 12px;
  display: none;
  width: 200px;
  border: 1px solid #e2e7ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 15px 40px rgb(3 24 62 / 18%);
}
.type-month-panel.open { display: block; }
.type-month-panel-head { display: flex; align-items: center; justify-content: space-between; }
.type-month-panel-head strong { color: var(--admin-blue); font-size: 12px; }
.type-month-nav {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  color: #0874e8;
  background: #eef6ff;
  font-size: 14px;
  cursor: pointer;
}
.type-month-nav:hover { background: #d7ecff; }
.type-month-list { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.type-month-list button {
  padding: 7px 0;
  border: 1px solid #e2e7ef;
  border-radius: 6px;
  color: #33465c;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.type-month-list button:hover { border-color: #0874e8; color: #0874e8; }
.type-month-list button.selected { border-color: #0874e8; color: #fff; background: #0874e8; }
.notification-list { margin-top: 16px; }
.notification-list li {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  border-bottom: 1px solid #e7edf4;
}
.notice-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 900;
}
.notice-icon.red { color: #e22; background: #fff0f0; }
.notice-icon.green { color: #029b47; background: #eafaf1; }
.notice-icon.blue { color: #0874e8; background: #edf5ff; }
.notice-icon.yellow { color: #b77c00; background: #fff6db; }
.notification-list div { display: grid; align-content: center; gap: 5px; color: #173d69; }
.notification-list div span:last-child { color: #8ca0b9; font-size: 10px; }
.utility-rail {
  min-width: 0;
  margin-top: 24px;
  display: grid;
  align-content: start;
  gap: 12px;
}
.utility-card {
  padding: 15px;
  border: 1px solid var(--admin-border);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 3px rgb(25 54 88 / 10%);
}
.utility-card h2 {
  margin: 0 0 13px;
  color: #102f59;
  font-size: 13px;
}
.quick-action-list { display: grid; gap: 6px; }
.quick-action-list a {
  min-height: 29px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 5px rgb(15 39 70 / 12%);
}
.quick-action-list a:hover { filter: brightness(.94); transform: translateY(-1px); }
.action-blue { background: linear-gradient(90deg, #1988f5, #0874e8); }
.action-green { background: linear-gradient(90deg, #31bd78, #22a966); }
.action-purple { background: linear-gradient(90deg, #7655e8, #6442d7); }
.action-orange { background: linear-gradient(90deg, #ffac2e, #f19b16); }
.action-red { background: linear-gradient(90deg, #f04f62, #df3e53); }
.action-cyan { background: linear-gradient(90deg, #22b9c8, #14a4b5); }
.status-list, .ticket-list { margin: 0; padding: 0; display: grid; list-style: none; }
.status-list { gap: 1px; }
.status-list li, .ticket-list li {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #354f6e;
  font-size: 10px;
}
.status-list li span:last-child { color: #08a34a; font-weight: 750; }
.ticket-list { gap: 5px; }
.ticket-list li { display: block; padding: 0; min-height: 0; }
.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 29px;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background .15s;
}
.ticket-row:hover, .ticket-row:focus-visible { background: #eef4fb; }
.ticket-row:focus-visible { outline: 2px solid var(--admin-action); outline-offset: -2px; }
.ticket-label { display: flex; align-items: center; gap: 8px; }
.ticket-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 11px;
  background: #eaf3ff;
  color: #0071c2;
}
.ticket-icon.orange { background: #fff2df; color: #c9790a; }
.ticket-icon.green { background: #e4f8ec; color: #159a56; }
.ticket-count {
  min-width: 28px;
  padding: 5px 7px;
  border-radius: 6px;
  color: #263e5a;
  background: #f1f4f8;
  font-weight: 850;
  text-align: center;
}
.view-tickets {
  min-height: 31px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #0874e8;
  background: #edf5ff;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.view-tickets:hover { background: #dcecff; }
.utility-feed {
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  list-style: none;
}
.utility-feed li {
  min-width: 0;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e7edf4;
}
.utility-feed li:last-child { border-bottom: 0; }
.utility-feed li > div { min-width: 0; display: grid; gap: 4px; }
.utility-feed li > div span:first-child {
  overflow-wrap: anywhere;
  color: #173d69;
  font-size: 10px;
  line-height: 1.35;
}
.utility-feed li > div span:last-child {
  overflow-wrap: anywhere;
  color: #8ca0b9;
  font-size: 9px;
  line-height: 1.3;
}
.utility-feed .notice-icon { width: 36px; height: 36px; }
.audit-feed li { padding-block: 9px; }
.utility-card > .panel-subtitle { display: block; margin-top: -8px; margin-bottom: 8px; }
.lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr);
  gap: 24px;
}
.data-table { margin-top: 18px; }
.table-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 24px 1.45fr .7fr 1fr .75fr;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #e8eef5;
}
.table-row > span { min-width: 0; }
.table-row > span:nth-child(2) { display: grid; gap: 4px; }
.table-head { min-height: 34px; color: #8799b2; font-size: 9px; font-weight: 800; }
.subtext { color: #8b9db4; font-size: 10px; }
.booking-list { margin-top: 15px; }
.booking-list li {
  min-height: 63px;
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e7edf4;
}
.list-icon { width: 38px; height: 38px; }
.booking-list li > div { min-width: 0; display: grid; gap: 5px; }
.booking-list li > div span:last-child { overflow: hidden; color: #879bb5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.status { padding: 4px 7px; border-radius: 6px; font-size: 9px; }
.status.pending { color: #9a6b00; background: #fff4ce; }
.status.confirmed { color: #067d36; background: #dff7e9; }
.status.cancelled { color: #c11c2c; background: #ffe5e7; }
.audit-panel .notification-list { margin-top: 8px; }
.module-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.module-grid a {
  min-height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  color: #24496f;
  font-weight: 750;
  text-decoration: none;
}
.module-grid a:hover { color: #0874e8; border-color: #92c4f5; background: #f5faff; }
.operations-widget-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
}
.operation-widget {
  min-width: 0;
  min-height: 148px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--admin-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 3px rgb(25 54 88 / 11%);
}
.operation-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #0874e8;
  background: #eaf3ff;
  font-size: 18px;
  font-weight: 800;
}
.operation-icon.yellow { color: #b57900; background: #fff5da; }
/* Operational summary tiles: white glyph on a distinct colour per metric. */
.operations-widget-grid .operation-widget .operation-icon { color: #fff; }
.operations-widget-grid .operation-widget:nth-child(1) .operation-icon { background: #4f46e5; }
.operations-widget-grid .operation-widget:nth-child(2) .operation-icon { background: #ea8a0b; }
.operations-widget-grid .operation-widget:nth-child(3) .operation-icon { background: #2f6fed; }
.operations-widget-grid .operation-widget:nth-child(4) .operation-icon { background: #e11d64; }
.operations-widget-grid .operation-widget:nth-child(5) .operation-icon { background: #0d9488; }
.operations-widget-grid .operation-widget:nth-child(6) .operation-icon { background: #16a34a; }
.operations-widget-grid .operation-widget:nth-child(7) .operation-icon { background: #f97316; }
.operations-widget-grid .operation-widget:nth-child(8) .operation-icon { background: #7c3aed; }
.operations-widget-grid .operation-widget:nth-child(9) .operation-icon { background: #059669; }
.operations-widget-grid .operation-widget:nth-child(10) .operation-icon { background: #0891b2; }
.operations-widget-grid .operation-widget:nth-child(11) .operation-icon { background: #db2777; }
.operations-widget-grid .operation-widget:nth-child(12) .operation-icon { background: #dc2626; }
.operations-widget-grid .operation-widget:nth-child(13) .operation-icon { background: #0284c7; }
.operations-widget-grid .operation-widget:nth-child(14) .operation-icon { background: #65a30d; }
.operations-widget-grid .operation-widget:nth-child(15) .operation-icon { background: #3b82f6; }
.operations-widget-grid .operation-widget:nth-child(16) .operation-icon { background: #9333ea; }
.operation-value {
  color: var(--admin-blue);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
}
.operation-label {
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #193f69;
  font-size: 11px;
  line-height: 1.25;
}
.operation-note {
  margin-top: 5px;
  color: #8aa0ba;
  font-size: 10px;
  line-height: 1.2;
}
/* Domestic/International Flights trail alone in row 3 of the 7-column grid
   (16 cards ÷ 7), leaving 5 empty column-tracks blank at desktop widths -
   same "widen the last row's leftover cards to fill it" fix already used
   for ref-payment/ref-support in the reference board above. Scoped to the
   >1350px breakpoint where the grid is actually 7 columns; the 4/3/2-column
   breakpoints below divide 16 cards evenly (or close to it) on their own. */
@media (min-width: 1351px) {
  .operations-widget-grid > .operation-widget:nth-last-child(2) { grid-column: span 4; }
  .operations-widget-grid > .operation-widget:last-child { grid-column: span 3; }
}
.insight-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.insight-widget-grid .admin-panel { min-height: 330px; }
.pending-count {
  min-width: 28px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #9c6a00;
  background: #fff3cf;
  font-weight: 850;
  text-align: center;
}
.approval-list { margin: 18px 0 0; padding: 0; display: grid; list-style: none; }
.approval-list li {
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e7edf4;
}
.approval-list .operation-icon { margin: 0; }
.approval-list li > div { display: grid; gap: 5px; }
.approval-list li > div span:last-child { color: #889db6; font-size: 10px; }
.approval-list a {
  padding: 6px 10px;
  border: 1px solid #d5e2ef;
  border-radius: 7px;
  color: #0874e8;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.approval-list a.approved { color: #087c3c; border-color: #b9e5ca; background: #eaf9f0; }
.user-type-donut {
  width: 130px;
  height: 130px;
  margin: 20px auto;
  background: conic-gradient(#0874e8 0 40.6%, #16ae7b 40.6% 75.5%, #eda400 75.5% 81.2%, #e674a5 81.2% 87.5%, #4b3bab 87.5% 100%);
}
.user-type-donut .donut-hole { width: 76px; height: 76px; }
.dot.indigo { background: #4b3bab; }
.weekdays, .heat-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.weekdays { margin-top: 20px; color: #8297b1; font-size: 9px; font-weight: 800; text-align: center; }
.heat-calendar { margin-top: 9px; }
.heat-calendar span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: white;
  font-size: 10px;
}
.heat-calendar span.empty { background: transparent; }
.heat-calendar span:not(.empty) {
  position: relative;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.heat-calendar span:not(.empty):hover {
  z-index: 1;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 5px 12px rgb(0 67 155 / 24%);
}
.heat-calendar span:not(.empty):focus-visible {
  z-index: 2;
  outline: 3px solid rgb(255 201 40 / 75%);
  outline-offset: 2px;
}
.heat-calendar span.selected-day {
  z-index: 2;
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  box-shadow: 0 6px 15px rgb(0 67 155 / 28%);
  transform: scale(1.06);
}
.level-1 { color: #4b6480 !important; background: #edf3fb; }
.level-2 { background: #c6dcf7; }
.level-3 { background: #2d7ed8; }
.level-4 { background: #1766bd; }
.level-5 { background: #00439b; }
.heat-legend { margin-top: 16px; display: flex; align-items: center; gap: 5px; color: #8196af; font-size: 9px; }
.heat-legend span:not(:first-child):not(:last-child) { width: 12px; height: 12px; border-radius: 4px; }
.rank-list { margin: 20px 0 0; padding: 0; display: grid; gap: 14px; list-style: none; }
.rank-list li { display: grid; gap: 6px; }
.rank-list li > div { display: flex; justify-content: space-between; color: #264c73; }
.rank-list .strong { color: var(--admin-blue); }
.rank-track { height: 8px; overflow: hidden; border-radius: 8px; background: #edf1f5; }
.rank-track > span { display: block; min-width: 12%; height: 100%; border-radius: inherit; background: #0874e8; }
.period-tabs span, .panel-badge, .legend-list li { cursor: pointer; user-select: none; }
.legend-list li { transition: opacity .18s ease; }
.legend-list li.muted-segment { opacity: .28; }
.search-hidden { display: none !important; }
.dashboard-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  max-width: min(360px, calc(100% - 32px));
  padding: 12px 17px;
  border-radius: 9px;
  color: #fff;
  background: #103b70;
  box-shadow: 0 12px 30px rgb(0 32 78 / 25%);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.dashboard-toast.show { opacity: 1; transform: translateY(0); }
.dashboard-toast.is-success { background: #12834f; box-shadow: 0 12px 30px rgb(18 131 79 / 28%); }
.dashboard-toast.is-error { background: #c93d4d; box-shadow: 0 12px 30px rgb(201 61 77 / 28%); }

/* Database-backed admin CRUD */
.crud-ui .admin-nav { display: block; }
.crud-ui .admin-nav a { margin-bottom: 4px; }
.crud-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.crud-heading h2, .crud-form-card h2 { margin: 0 0 7px; color: var(--admin-blue); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.crud-heading p, .crud-form-card p { margin: 0; color: #7289a4; }
.record-count { padding: 7px 11px; border-radius: 8px; color: #0874e8; background: #eaf3ff; font-weight: 800; white-space: nowrap; }
.crud-success, .crud-errors { margin: 20px 0; padding: 13px 15px; border-radius: 9px; }
.crud-success { color: #08783c; border: 1px solid #bee8d0; background: #eaf9f0; }
.crud-errors { color: #a52732; border: 1px solid #f1c3c8; background: #fff0f1; }
.crud-errors ul { margin: 7px 0 0; padding-left: 20px; }
.crud-search { margin: 24px 0 16px; display: flex; gap: 9px; }
.crud-search input {
  width: min(430px, 100%);
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--admin-border);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: #10264a;
}
.crud-search input::placeholder { color: #7a8ba5; }
.crud-search input:focus { border-color: #0874e8; box-shadow: 0 0 0 3px rgb(8 116 232 / 12%); }
.crud-search button, .crud-form-actions button {
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: white;
  background: #0874e8;
  font-weight: 800;
  cursor: pointer;
}
.crud-search a, .crud-form-actions a, .crud-back { display: inline-flex; align-items: center; color: #56718e; font-weight: 700; text-decoration: none; }
/* .crud-row used to be its own independent grid per row (display:grid on
   each row div), so every row - the header included - sized its columns
   from only its own cells. A value with no break point (an email, a slug)
   could push one row's column past its 1fr share while other rows stayed
   put, and the header's Actions cell (just the word "Actions") never
   matched the width data rows needed for a button group - two different
   symptoms of the same cause. Making .crud-table itself the grid and every
   .crud-row a display:contents pass-through puts all rows' cells into one
   shared set of column tracks, so the browser sizes every column from every
   cell across every row at once: header and data rows are then structurally
   incapable of disagreeing on where a column starts and ends. */
.crud-table {
  overflow-x: auto;
  border: 1px solid var(--admin-border);
  border-radius: 13px;
  background: white;
  box-shadow: 0 2px 3px rgb(25 54 88 / 9%);
  display: grid;
  /* The action cell sizes to its buttons - modules with "Login as" beside Edit
     and Delete need far more than the 120px two buttons used to fit in. */
  grid-template-columns: repeat(5, minmax(100px, 1fr)) minmax(120px, max-content);
  align-items: center;
}
.crud-row { display: contents; }
.crud-row > * {
  min-height: 52px;
  /* Half the old 12px inter-column gap on each side, since a real grid gap
     here would break the border/background into per-cell segments instead
     of one continuous line across the row. */
  padding: 0 6px;
  border-bottom: 1px solid #e7edf4;
}
.crud-row > *:first-child { padding-left: 18px; }
.crud-row > *:last-child { padding-right: 18px; }
.crud-row:last-child > * { border-bottom: 0; }
/* A value long enough to have no break point (an email, a slug) still
   shouldn't be able to widen its column past the others - grid items default
   to a content-based min-width regardless of the track's own minmax(), so
   min-width:0 plus a truncating ellipsis is what keeps the shared columns
   from being stretched by one long cell. */
.crud-row > span:not(.crud-actions):not(.crud-status):not(.crud-thumbs) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.crud-head > * { min-height: 44px; color: #748ba6; background: #f8fafc; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.crud-head > *:last-child { text-align: right; }
/* flex-wrap stays nowrap so the row's buttons never break onto a second
   line - but the actions grid track can still be squeezed narrower than
   their combined width when the table is tight for space (see the cols-N
   tracks in admin-tables-modern.css). Without its own overflow-x this cell
   would let its buttons visually spill out over the previous column instead
   of staying contained, since min-width:0 already lets it shrink below its
   content's natural width. Scoping the scroll to just this cell - rather
   than widening .crud-table itself - avoids fighting the enclosing
   .crud-panel's overflow:hidden, which would silently clip the row instead
   of scrolling it. justify-content is flex-start, not flex-end: with an
   LTR overflow:auto container scrollLeft can't go negative, so flex-end
   would strand the first buttons off-screen to the left with no way to
   scroll back to them once the row is wide enough to overflow. */
.crud-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.crud-actions::-webkit-scrollbar { height: 4px; }
.crud-actions::-webkit-scrollbar-thumb { background: #c8d2e0; border-radius: 4px; }
.crud-actions a, .crud-actions button { padding: 6px 9px; border-radius: 6px; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.crud-actions a { color: #0874e8; background: #eaf3ff; }
.crud-actions form { margin: 0; }
.crud-actions button { border: 0; color: #c22e3b; background: #fff0f1; cursor: pointer; }
.crud-status { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 99px; color: #087b3b; background: #e8f8ef; font-size: 10px; font-weight: 800; }
.crud-status.pending, .crud-status.draft, .crud-status.maintenance { color: #986700; background: #fff3d2; }
.crud-status.cancelled, .crud-status.rejected, .crud-status.expired { color: #b72e39; background: #ffecee; }
.crud-muted { color: #91a3b8; }
/* Image columns show the picture, not the path it is stored under. */
.crud-thumbs { display: flex; align-items: center; gap: 6px; }
.crud-thumb { display: inline-flex; width: 46px; height: 34px; border: 1px solid #e2eaf3; border-radius: 6px; background: #f2f6fb; overflow: hidden; }
.crud-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crud-thumb-more { color: #6f86a1; font-size: 10px; font-weight: 800; }
.crud-pagination {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.crud-page-summary { color: #6f86a1; font-size: 11px; font-weight: 700; }
.crud-page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crud-page {
  min-width: 32px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  color: #2b5680;
  background: white;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.crud-page:hover { border-color: #0874e8; color: #0874e8; }
.crud-page.active { border-color: #0874e8; color: white; background: #0874e8; }
.crud-page.is-disabled { color: #a9b8c9; background: #f4f7fb; pointer-events: none; }
.crud-page-gap { padding: 0 2px; color: #a9b8c9; font-size: 11px; font-weight: 800; }

/* The same strip under the property-owner listing and record tables. */
.owner-pagination {
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #e7edf5;
}
.owner-pagination-summary { color: #66758f; font-size: 12px; font-weight: 700; }
.owner-pagination-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.owner-page {
  min-width: 32px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6e0ed;
  border-radius: 7px;
  color: #003b95;
  background: white;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.owner-page:hover { border-color: #006ce4; color: #006ce4; }
.owner-page.active { border-color: #006ce4; color: white; background: #006ce4; }
.owner-page.is-disabled { color: #a4b2c2; background: #f4f7fa; pointer-events: none; }
.owner-page-gap { padding: 0 2px; color: #9fb0c5; font-size: 12px; font-weight: 700; }
.crud-empty { padding: 55px 20px; color: #7e93ab; text-align: center; }
.crud-back { margin-bottom: 18px; }
.crud-form-card { max-width: 880px; padding: 25px; border: 1px solid var(--admin-border); border-radius: 14px; background: white; box-shadow: 0 2px 3px rgb(25 54 88 / 9%); }
.crud-form { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.crud-form label { display: grid; gap: 7px; color: #294e73; font-size: 11px; font-weight: 600; }
.crud-form input, .crud-form select, .crud-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  outline: none;
  color: #173d69;
  background: white;
}
.crud-form textarea { resize: vertical; }
.crud-form input:focus, .crud-form select:focus, .crud-form textarea:focus { border-color: #0874e8; box-shadow: 0 0 0 3px rgb(8 116 232 / 12%); }
.crud-form label:has(textarea), .crud-form-actions { grid-column: 1 / -1; }
.crud-form-actions { padding-top: 18px; display: flex; justify-content: flex-end; gap: 15px; border-top: 1px solid #e7edf4; }
.crud-form-actions button { min-height: 42px; }

@media (max-width: 900px) and (min-width: 701px) {
  .crud-table { min-width: 850px; }
}
@media (max-width: 700px) {
  .crud-form { grid-template-columns: 1fr; }
  .crud-form label:has(textarea), .crud-form-actions { grid-column: auto; }
  .crud-ui .admin-topbar .add-hotel { display: inline-flex; }
  /* Below 700px the horizontal-scroll table leaves the actions column - or
     the owner's name - permanently out of view, so scrolling to click
     "Delete" means losing sight of whose row it was on. Each row becomes a
     card instead: the data-label attribute every cell already carries (added
     for this) supplies the field name via ::before, and Actions moves to a
     full-width row at the bottom of the card rather than a same-line column.
     That means abandoning the shared grid for this width only - .crud-table
     goes back to a plain block of stacked cards, and each .crud-row becomes
     its own single-column grid again rather than a contents pass-through. */
  .crud-table { display: block; overflow-x: visible; min-width: 0; }
  .crud-heading { flex-wrap: wrap; }
  .crud-row {
    display: grid;
    min-width: 0;
    padding: 14px 16px;
    grid-template-columns: 1fr;
    gap: 8px;
    border-bottom: 1px solid #e7edf4;
  }
  .crud-row:last-child { border-bottom: 0; }
  .crud-row > * { padding: 0; border-bottom: 0; min-height: 0; }
  /* .crud-row > *:first-child { padding-left: 18px } above is more specific
     than the reset just above (pseudo-class beats plain descendant), so it
     kept winning here and left the first field (Title) indented past every
     other field's label on the card. Reset it at equal specificity. */
  .crud-row > *:first-child { padding-left: 0; }
  .crud-head { display: none; }
  .crud-row > span:not(.crud-actions) {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
  }
  .crud-row > [data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: #7a8ba5;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
  }
  /* flex-wrap used to just left-align pills and wrap them, which left a
     ragged trailing row (e.g. 3 pills, then 2 tiny ones stranded on the
     left with empty space beside them) - the "ugly" mobile actions row.
     A grid with auto-fit + 1fr columns keeps every pill in a row the same
     width and lets a short trailing row stretch to fill it instead. The
     column width, gap and per-button padding/sizing live in
     admin-crud-actions-mobile.css (loaded after this file) so they can be
     tuned on their own - this block only sets up the grid mechanics. */
  .crud-actions {
    display: grid;
    /* Belt-and-braces: the pills wrap onto as many rows as they need and
       shouldn't overflow now (see min-width:0 below), but if a track ever
       still can't shrink enough, auto (not visible) turns that into a
       horizontal scroll on the row instead of clipping a pill off-screen. */
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
  }
  .crud-actions::-webkit-scrollbar { height: 4px; }
  .crud-actions::-webkit-scrollbar-thumb { background: #c8d2e0; border-radius: 4px; }
  /* min-width:0 + white-space:normal keep a long label (eg. "Review &
     Approve") from forcing its grid track past 1fr and shoving later pills
     (eg. Delete) off the edge of the screen - grid items default to a
     content-based automatic minimum size, and nowrap text has no smaller
     min-content to fall back on. */
  .crud-actions a,
  .crud-actions > button {
    justify-content: center;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
  .crud-actions form { display: flex; margin: 0; min-width: 0; }
  .crud-actions form button {
    flex: 1;
    justify-content: center;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}
.pie-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.pie-widget { min-height: 315px; }
.pie-layout {
  min-height: 235px;
  display: grid;
  grid-template-columns: minmax(130px, .9fr) minmax(180px, 1.1fr);
  align-items: center;
  gap: 18px;
}
.pie-layout .donut {
  width: 150px;
  height: 150px;
  margin: 20px auto;
}
.pie-layout .donut-hole { width: 88px; height: 88px; }
.pie-layout .donut-hole .strong { font-size: 17px; }
.pie-layout .donut-hole span:last-child:not(.strong) { color: #8095ae; font-size: 9px; }
.source-donut {
  background: conic-gradient(
    #0874e8 0 41.4%,
    #16ae7b 41.4% 68.9%,
    #eda400 68.9% 87.1%,
    #e674a5 87.1% 100%
  );
}
.country-donut {
  background: conic-gradient(
    #0874e8 0 34%,
    #eda400 34% 56%,
    #16ae7b 56% 72%,
    #979797 72% 100%
  );
}
.category-donut {
  background: conic-gradient(
    #0874e8 0 60%,
    #16ae7b 60% 80%,
    #eda400 80% 90%,
    #7048d7 90% 95%,
    #e674a5 95% 100%
  );
}
.payment-donut {
  background: conic-gradient(
    #0874e8 0 45%,
    #eda400 45% 75%,
    #d94444 75% 90%,
    #7048d7 90% 100%
  );
}
.pie-legend { gap: 12px; }
.pie-legend li { grid-template-columns: 10px minmax(90px, 1fr) auto 38px; font-size: 11px; }

/* Property owner workspace */
.owner-portal { --owner-navy:#12365d; --owner-blue:#0874e8; --owner-bg:#f4f7fb; min-height:100vh; color:#193b61; background:var(--owner-bg); }
.owner-sidebar { position:fixed; inset:0 auto 0 0; z-index:20; width:264px; padding:26px 18px 20px; display:flex; flex-direction:column; color:white; background:linear-gradient(180deg,#003b95 0%,#002b6f 100%); box-shadow:8px 0 30px rgb(4 40 82 / 10%); }
.owner-brand { padding:0 10px 24px; display:flex; align-items:center; gap:11px; color:white; text-decoration:none; }
.owner-sidebar-close { display:none; margin-left:auto; border:0; background:transparent; color:#fff; font-size:26px; line-height:1; cursor:pointer; padding:2px 6px; }
.owner-logo { width:39px; height:39px; display:block; flex:none; border-radius:11px; object-fit:cover; }
.owner-brand div,.owner-account div { min-width:0; display:grid; gap:3px; }.owner-brand strong{font-size:19px}.owner-brand small,.owner-account small{overflow:hidden;color:#a9c2de;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.owner-nav { display:grid; gap:5px; overflow:auto; scrollbar-width:none; }.owner-nav-caption{margin:20px 12px 5px;color:#7798bb;font-size:9px;font-weight:850;letter-spacing:.12em}
.owner-nav a { min-height:43px; padding:0 12px; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:9px; border-radius:9px; color:#bdd0e4; text-decoration:none; font-size:11px; }
.owner-nav a:hover,.owner-nav a.active{color:white;background:rgb(255 255 255 / 11%)}.owner-nav a.active{box-shadow:inset 3px 0 #ffd54d}.owner-nav a>span{font-size:16px}.owner-nav a strong{font-weight:700}.owner-nav em{min-width:20px;padding:3px 5px;border-radius:20px;color:#173b61;background:#ffd54d;font-size:9px;font-style:normal;text-align:center}
.owner-account { margin-top:auto; padding:17px 7px 0; display:grid; grid-template-columns:37px minmax(0,1fr) auto; align-items:center; gap:9px; border-top:1px solid rgb(255 255 255 / 12%); }.owner-avatar{width:37px;height:37px;display:grid;place-items:center;overflow:hidden;border-radius:50%;color:#094176;background:#ddebfa;font-size:0;font-weight:850}.owner-avatar::first-letter{font-size:12px}.owner-avatar.small{width:34px;height:34px}.owner-account strong{font-size:10px}.owner-account form{margin:0}.owner-account button{border:0;color:#bdd0e4;background:none;font-size:17px;cursor:pointer}
.owner-workspace{min-height:100vh;margin-left:264px}.owner-topbar{min-height:78px;padding:10px clamp(22px,3vw,44px);display:flex;align-items:center;gap:18px;border-bottom:1px solid #dde6f0;background:white}.owner-topbar>div:first-of-type{display:grid;gap:4px}.owner-topbar h1{margin:0;color:var(--owner-navy);font-size:18px}.owner-topbar>div>span{color:#8397ad;font-size:10px}.owner-topbar-back{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:10px 15px;border:1px solid #dce5ef;border-radius:10px;background:#fff;color:#45627f;font-size:12px;font-weight:700;text-decoration:none}.owner-topbar-back:hover{border-color:#b9cfe3;color:var(--owner-blue)}.owner-menu{display:none;border:0;background:none;font-size:22px}.owner-top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.owner-search{min-height:38px;padding:0 12px;display:flex;align-items:center;gap:7px;border:1px solid #dce5ef;border-radius:8px;background:#f8fafc}.owner-search input{width:190px;border:0;outline:0;background:transparent;font-size:11px}.owner-primary,.owner-secondary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800}.owner-primary{min-height:39px;padding:0 16px;border-radius:8px;color:white;background:var(--owner-blue);font-size:11px}.owner-primary:hover{background:#0564ca}
.owner-content{padding:30px clamp(20px,3vw,44px) 60px}.owner-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.owner-eyebrow{color:#8296ad;font-size:9px;font-weight:850;letter-spacing:.11em}.owner-welcome h2{margin:7px 0 6px;color:var(--owner-navy);font:600 30px Georgia,serif}.owner-welcome p{margin:0;color:#7990a8;font-size:12px}.owner-date{display:grid;gap:4px;text-align:right}.owner-date span{color:#90a2b5;font-size:9px}.owner-date strong{color:#355675;font-size:11px}
.owner-kpis{margin-top:25px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.owner-kpi,.owner-card{border:1px solid #dde6ef;border-radius:13px;background:white;box-shadow:0 4px 15px rgb(23 57 93 / 5%)}.owner-kpi{min-height:132px;padding:20px;display:grid;grid-template-columns:43px 1fr;align-items:start;gap:13px}.owner-kpi-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:11px;font-size:19px}.owner-kpi-icon.blue{color:#0874e8;background:#eaf3ff}.owner-kpi-icon.purple{color:#7048d7;background:#f0ebff}.owner-kpi-icon.green{color:#0a9b59;background:#e6f8ef}.owner-kpi-icon.orange{color:#c27c00;background:#fff3d8}.owner-kpi div{display:grid;gap:5px}.owner-kpi small{color:#8195aa;font-size:10px}.owner-kpi strong{color:var(--owner-navy);font-size:22px;line-height:1.2}.owner-kpi span:last-child{color:#7e94aa;font-size:9px;line-height:1.35}
.owner-main-grid{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,.7fr);gap:16px}.owner-card{padding:20px}.owner-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.owner-card-head h3,.owner-quick h3{margin:5px 0 0;color:var(--owner-navy);font-size:15px}.owner-card-head a{color:var(--owner-blue);font-size:10px;font-weight:800;text-decoration:none}.owner-booking-list{margin-top:14px}.owner-booking{min-height:64px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;border-bottom:1px solid #e8eef5}.owner-booking>div,.owner-property>div,.owner-message>div,.owner-payout>div{min-width:0;display:grid;gap:5px}.owner-booking strong,.owner-property strong,.owner-message strong,.owner-payout strong{overflow:hidden;color:#294e73;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.owner-booking small,.owner-property small,.owner-message small,.owner-payout small{overflow:hidden;color:#8aa0b7;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.owner-date-tile{width:44px;padding:7px 3px;border-radius:8px;color:#075eaf;background:#e9f4ff;font-size:9px;font-weight:850;text-align:center}.owner-status{padding:5px 8px;border-radius:20px;color:#087c3c;background:#e7f8ee;font-size:8px;font-weight:850}.owner-status.pending{color:#976500;background:#fff3d4}
.owner-rating{text-align:center}.owner-rating .owner-card-head{text-align:left}.owner-score{margin-top:20px;color:var(--owner-navy);font:600 52px Georgia,serif}.owner-stars{margin:1px 0 7px;color:#f4b400;letter-spacing:3px}.owner-rating p{color:#879caf;font-size:9px}.owner-secondary{min-height:33px;padding:0 13px;border:1px solid #cfe0ef;border-radius:7px;color:var(--owner-blue);background:#fff;font-size:9px}.owner-lower-grid{margin-top:16px;display:grid;grid-template-columns:1.15fr .9fr .9fr;gap:16px}.owner-property-list,.owner-message-list,.owner-payout-list{margin-top:13px}.owner-property{min-height:57px;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;border-bottom:1px solid #e8eef5}.owner-property-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:#0874e8;background:#edf5ff}.owner-message,.owner-payout{min-height:57px;display:grid;grid-template-columns:35px 1fr;align-items:center;gap:9px;border-bottom:1px solid #e8eef5}.owner-payout{grid-template-columns:1fr auto}.owner-count{padding:5px 8px;border-radius:7px;color:#0874e8;background:#edf5ff;font-size:8px;font-weight:800}.owner-empty{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.owner-empty>span{font-size:28px;color:#b6c7d8}.owner-empty strong{margin-top:8px;color:#385a78;font-size:11px}.owner-empty p{margin:6px 0;color:#91a4b7;font-size:9px}.owner-empty.compact{min-height:145px}.owner-empty .owner-secondary{margin-top:8px}
.owner-quick{margin-top:16px;padding:20px;border:1px solid #dde6ef;border-radius:13px;background:white}.owner-quick-links{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.owner-quick-links a{min-height:78px;padding:14px;display:grid;grid-template-columns:31px 1fr;align-items:center;column-gap:9px;border:1px solid #e2e9f1;border-radius:9px;color:#365778;text-decoration:none}.owner-quick-links a:hover{border-color:#8cbef0;background:#f6faff}.owner-quick-links span{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:#0874e8;background:#eaf3ff}.owner-quick-links strong{font-size:10px}.owner-quick-links small{color:#8ba0b5;font-size:8px}.owner-toast{position:fixed;right:24px;bottom:24px;z-index:40;padding:11px 15px;border-radius:8px;color:white;background:#12365d;font-size:10px;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s}.owner-toast.show{opacity:1;transform:none}.owner-hidden{display:none!important}.owner-settings-anchor{height:1px}
@media(max-width:1100px){.owner-kpis{grid-template-columns:repeat(2,1fr)}.owner-lower-grid{grid-template-columns:1fr 1fr}.owner-lower-grid article:first-child{grid-column:1/-1}.owner-quick-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.owner-sidebar{transform:translateX(-105%);transition:transform .22s}.owner-sidebar.open{transform:none}.owner-sidebar-close{display:block}.owner-workspace{margin-left:0}.owner-menu{display:block}.owner-search{display:none}.owner-topbar{padding-inline:16px}.owner-topbar-back{display:none}.owner-content{padding:23px 14px 45px}.owner-main-grid,.owner-lower-grid{grid-template-columns:1fr}.owner-lower-grid article:first-child{grid-column:auto}.owner-welcome{align-items:flex-start;flex-direction:column}.owner-date{text-align:left}.owner-kpis{grid-template-columns:1fr 1fr}.owner-kpi{min-height:120px;padding:15px;grid-template-columns:1fr}.owner-kpi-icon{width:35px;height:35px}.owner-primary{padding-inline:11px}.owner-quick-links{grid-template-columns:1fr}}
@media(max-width:440px){.owner-kpis{grid-template-columns:1fr}.owner-topbar>div:first-of-type span{display:none}.owner-primary{font-size:0}.owner-primary::after{content:'＋';font-size:16px}.owner-welcome h2{font-size:26px}}
.owner-brand .owner-small,.owner-account .owner-small{overflow:hidden;color:#a9c2de;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.owner-kpi .owner-small{color:#8195aa;font-size:10px}
.owner-booking .owner-small,.owner-property .owner-small,.owner-message .owner-small,.owner-payout .owner-small{overflow:hidden;color:#8aa0b7;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.owner-quick-links .owner-small{color:#8ba0b5;font-size:8px}

/* Public booking homepage */
.booking-home{--home-blue:#075db7;--home-navy:#12395e;--home-yellow:#ffc928;--home-muted:#6d8194;color:var(--home-navy);background:#fff;font-family:Inter,"Segoe UI",sans-serif}.booking-home::before{display:none}.home-header{position:sticky;top:0;z-index:30;border-bottom:1px solid #e7edf3;background:rgb(255 255 255 / 95%);backdrop-filter:blur(12px)}.home-nav{width:min(1180px,calc(100% - 36px));min-height:72px;margin:auto;display:flex;align-items:center;gap:35px}.home-brand{display:flex;align-items:center;gap:10px;color:#0c477e;font-weight:850;text-decoration:none}.home-brand-mark{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;color:#063f77;background:var(--home-yellow);font:900 18px Georgia,serif}.home-links{margin:auto;display:flex;align-items:center;gap:30px}.home-links a{padding:26px 0 22px;border-bottom:3px solid transparent;color:#5f7488;font-size:12px;font-weight:700;text-decoration:none}.home-links a:hover,.home-links a.active{color:var(--home-blue);border-color:var(--home-blue)}.home-actions{display:flex;align-items:center;gap:10px}.home-list,.home-signin{min-height:39px;padding:0 14px;display:flex;align-items:center;border-radius:8px;font-size:10px;font-weight:800;text-decoration:none}.home-list{color:#3a5b78}.home-signin{color:white;background:var(--home-blue)}.home-menu{display:none;border:0;color:var(--home-navy);background:none;font-size:22px}
.home-hero{position:relative;min-height:570px;padding:86px 20px 64px;overflow:hidden;color:white;background:linear-gradient(115deg,#052e5c 0%,#075dac 57%,#0b79c9 100%)}.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(2 30 64 / 35%),transparent 65%),radial-gradient(circle at 78% 55%,rgb(255 255 255 / 12%),transparent 28%)}.home-hero-glow{position:absolute;border-radius:50%;filter:blur(3px);opacity:.2}.home-hero-glow.one{width:430px;height:430px;right:4%;top:5%;border:70px solid #73c8ff}.home-hero-glow.two{width:220px;height:220px;right:21%;bottom:-90px;background:#ffd54a}.home-hero-content,.home-search,.home-trust-row{position:relative;z-index:2;width:min(1120px,100%);margin-inline:auto}.home-kicker{color:#1673ca;font-size:10px;font-weight:900;letter-spacing:.14em}.home-hero .home-kicker,.home-destination-section .home-kicker,.home-owner-cta .home-kicker{color:#9ed7ff}.home-hero h1{max-width:760px;margin:11px 0 14px;color:#fff;font:600 clamp(40px,6vw,68px)/1.02 Georgia,serif;letter-spacing:-.045em}.home-hero-content p{max-width:650px;color:rgb(255 255 255 / 77%);font-size:15px;line-height:1.7}.home-search{margin-top:38px;padding:9px;display:grid;grid-template-columns:1.45fr repeat(3,1fr) auto;border-radius:13px;background:#fff;box-shadow:0 22px 60px rgb(0 27 61 / 25%)}.home-search-field{min-width:0;min-height:62px;padding:8px 14px;display:grid;grid-template-columns:24px 1fr;align-items:center;gap:7px;border-right:1px solid #e4eaf0}.home-search-icon{color:#0b71ce;font-size:17px}.home-search-field>span:last-child{min-width:0;display:grid;gap:3px}.home-search-field strong{color:#234768;font-size:9px}.home-search-field input,.home-search-field select{width:100%;padding:0;border:0;outline:0;color:#6d8194;background:white;font-size:10px}.home-search-button{min-width:112px;border:0;border-radius:9px;color:#133c62;background:var(--home-yellow);font-size:11px;font-weight:900;cursor:pointer}.home-search-button:hover{background:#ffd95d}.home-trust-row{margin-top:18px;display:flex;gap:24px;color:rgb(255 255 255 / 72%);font-size:9px}
.home-section{width:min(1160px,calc(100% - 36px));margin:auto;padding:72px 0}.home-section-head{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.home-section-head h2,.home-benefit-copy h2,.home-owner-cta h2{margin:6px 0 0;color:var(--home-navy);font:600 clamp(27px,4vw,39px)/1.1 Georgia,serif;letter-spacing:-.03em}.home-section-head>p{max-width:440px;margin:0;color:var(--home-muted);font-size:11px;line-height:1.7}.home-category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.home-category{min-height:145px;padding:20px;display:flex;align-items:flex-end;justify-content:space-between;border-radius:13px;color:white;text-decoration:none;transition:transform .2s}.home-category:hover{transform:translateY(-4px)}.home-category.hotel{background:linear-gradient(135deg,#0874d9,#034687)}.home-category.apartment{background:linear-gradient(135deg,#5d43c5,#3b278f)}.home-category.house{background:linear-gradient(135deg,#078870,#045d4d)}.home-category.boarding{background:linear-gradient(135deg,#d07918,#9a4d06)}.home-category-art{font-size:44px;opacity:.4;order:2}.home-category div{display:grid;gap:5px}.home-category strong{font:600 18px Georgia,serif}.home-category div span{font-size:9px;opacity:.75}.home-view-all{color:var(--home-blue);font-size:11px;font-weight:800;text-decoration:none}
.home-listing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.home-listing{overflow:hidden;border:1px solid #e1e8ef;border-radius:13px;color:inherit;background:white;box-shadow:0 5px 20px rgb(22 57 91 / 6%);text-decoration:none;transition:transform .2s,box-shadow .2s}.home-listing:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgb(22 57 91 / 12%)}.home-listing-image{position:relative;height:180px;display:grid;place-items:center;overflow:hidden;color:white;background:linear-gradient(135deg,#5ea9d5,#124e7a)}.home-listing:nth-child(2n) .home-listing-image{background:linear-gradient(135deg,#b9a57e,#5e4a33)}.home-listing:nth-child(3n) .home-listing-image{background:linear-gradient(135deg,#7ba59a,#285c55)}.home-listing-image img{width:100%;height:100%;object-fit:cover}.home-listing-image>span{font:600 22px Georgia,serif;opacity:.85}.home-listing-image button{position:absolute;top:11px;right:11px;width:34px;height:34px;border:0;border-radius:50%;color:#20405d;background:rgb(255 255 255 / 92%);font-size:18px;cursor:pointer;appearance:none;-webkit-appearance:none;outline:0}.home-listing-image button.saved{color:#df304f}.home-listing-body{padding:15px}.home-listing-type{color:#768da3;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.home-listing h3{margin:5px 0 9px;overflow:hidden;color:#214766;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.home-listing-meta{display:flex;justify-content:space-between;color:#8297aa;font-size:8px}.home-listing-meta span:first-child{color:#a76d00}.home-listing-price{margin-top:13px;padding-top:11px;border-top:1px solid #e8edf2}.home-listing-price strong{color:#0b5fae;font-size:13px}.home-listing-price span{color:#879aac;font-size:8px}.home-no-listings{min-height:240px;display:grid;place-items:center;align-content:center;border:1px dashed #cad8e5;border-radius:14px;color:#8398ab;text-align:center}.home-no-listings>span{font-size:35px}.home-no-listings h3{margin:8px 0 2px;color:#365b78}.home-no-listings p{font-size:10px}
.home-destination-section{color:white;background:#092f59}.home-destination-section .home-section{padding-block:75px}.home-section-head.light h2{color:white}.home-section-head.light>p{color:#aac1d8}.home-destination-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:repeat(2,180px);gap:13px}.home-destination-grid a{position:relative;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:13px;color:white;text-decoration:none;background:linear-gradient(140deg,#287db8,#0b365e)}.home-destination-grid a::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgb(255 255 255 / 25%),transparent 25%),linear-gradient(0deg,rgb(0 18 41 / 55%),transparent 70%)}.home-destination-grid .galle{grid-row:1/3;background:linear-gradient(140deg,#2c9bb9,#075580)}.home-destination-grid .ella{background:linear-gradient(140deg,#4c9671,#174b3c)}.home-destination-grid .colombo{background:linear-gradient(140deg,#7565b6,#30376f)}.home-destination-grid .sigiriya{grid-column:2/4;background:linear-gradient(140deg,#bc7137,#6c351e)}.home-destination-grid span,.home-destination-grid strong,.home-destination-grid p{position:relative;z-index:1}.home-destination-grid span{font-size:8px;font-weight:900;letter-spacing:.12em}.home-destination-grid strong{margin-top:4px;font:600 27px Georgia,serif}.home-destination-grid p{margin:3px 0 0;color:rgb(255 255 255 / 70%);font-size:9px}
.home-benefits{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:70px}.home-benefit-copy>p{color:var(--home-muted);font-size:11px;line-height:1.8}.home-dark-button,.home-white-button{min-height:42px;padding:0 17px;display:inline-flex;align-items:center;border-radius:8px;font-size:10px;font-weight:850;text-decoration:none}.home-dark-button{margin-top:12px;color:white;background:var(--home-navy)}.home-benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.home-benefit-grid article{min-height:135px;padding:19px;display:grid;grid-template-columns:35px 1fr;align-items:start;gap:11px;border:1px solid #e0e8ef;border-radius:12px;background:#f9fbfd}.home-benefit-grid article>span{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;color:#0872cf;background:#e8f3fd}.home-benefit-grid h3{margin:2px 0 6px;font-size:12px}.home-benefit-grid p{margin:0;color:#778da1;font-size:9px;line-height:1.65}.home-owner-cta{width:min(1160px,calc(100% - 36px));margin:0 auto 72px;padding:46px;display:flex;align-items:center;justify-content:space-between;gap:40px;border-radius:18px;color:white;background:linear-gradient(115deg,#075cad,#093e76)}.home-owner-cta h2{max-width:700px;color:white}.home-owner-cta p{max-width:680px;margin:10px 0 0;color:#b7cee3;font-size:11px}.home-owner-cta>div:last-child{display:grid;gap:12px;flex:0 0 auto}.home-white-button{justify-content:center;color:#103c64;background:white}.home-text-link{color:#c7d9e9;font-size:9px;text-align:center;text-decoration:none}
.home-footer{padding:55px max(18px,calc((100vw - 1160px)/2));color:#adc0d3;background:#071f38}.home-footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px}.home-footer-brand p{max-width:300px;margin-top:16px;font-size:10px;line-height:1.8}.home-footer .home-brand{color:white}.home-footer-grid>div:not(:first-child){display:grid;align-content:start;gap:10px;font-size:9px}.home-footer-grid>div>strong{margin-bottom:5px;color:white;font-size:10px}.home-footer-grid a{color:#adc0d3;text-decoration:none}.home-footer-bottom{margin-top:45px;padding-top:20px;display:flex;justify-content:space-between;border-top:1px solid rgb(255 255 255 / 10%);font-size:8px}.home-footer-bottom div{display:flex;gap:18px}.home-toast{position:fixed;right:22px;bottom:22px;z-index:50;padding:11px 15px;border-radius:8px;color:white;background:#12395e;font-size:10px;opacity:0;transform:translateY(10px);transition:.2s}.home-toast.show{opacity:1;transform:none}
@media(max-width:960px){.home-listing-grid{grid-template-columns:repeat(2,1fr)}.home-search{grid-template-columns:1.5fr 1fr 1fr}.home-search-field:nth-of-type(4){display:none}.home-category-grid{grid-template-columns:repeat(2,1fr)}.home-benefits{gap:35px}.home-footer-grid{grid-template-columns:2fr repeat(2,1fr)}.home-footer-grid>div:last-child{display:none}}
@media(max-width:700px){.home-nav{min-height:64px}.home-menu{display:block;margin-left:auto}.home-links{position:absolute;top:64px;left:0;right:0;padding:12px 18px;display:none;flex-direction:column;align-items:stretch;gap:0;background:white;box-shadow:0 15px 30px rgb(9 47 84 / 12%)}.home-links.open{display:flex}.home-links a{padding:12px;border:0}.home-list{display:none}.home-actions{margin-left:0}.home-hero{padding-top:65px}.home-search{grid-template-columns:1fr;padding:10px}.home-search-field{border-right:0;border-bottom:1px solid #e4eaf0}.home-search-field:nth-of-type(4){display:grid}.home-search-button{min-height:50px}.home-trust-row{flex-wrap:wrap;gap:9px 17px}.home-section-head{align-items:flex-start;flex-direction:column}.home-listing-grid{grid-template-columns:1fr 1fr}.home-destination-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,175px)}.home-destination-grid .galle{grid-row:auto}.home-destination-grid .sigiriya{grid-column:auto}.home-benefits{grid-template-columns:1fr}.home-owner-cta{padding:30px;align-items:flex-start;flex-direction:column}.home-owner-cta>div:last-child{width:100%}.home-footer-grid{grid-template-columns:1fr 1fr}.home-footer-brand{grid-column:1/-1}}
@media(max-width:480px){.home-nav{width:min(100% - 24px,1180px)}.home-brand>span:last-child{font-size:13px}.home-hero{min-height:auto;padding-inline:13px}.home-hero h1{font-size:39px}.home-section{width:min(100% - 26px,1160px);padding-block:55px}.home-category-grid,.home-listing-grid,.home-benefit-grid,.home-destination-grid{grid-template-columns:1fr}.home-destination-grid{grid-template-rows:repeat(4,180px)}.home-listing-image{height:205px}.home-owner-cta{width:min(100% - 26px,1160px);margin-bottom:55px}.home-footer-grid{grid-template-columns:1fr}.home-footer-brand{grid-column:auto}.home-footer-grid>div:last-child{display:grid}.home-footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}}

@media (max-width: 1350px) {
  .admin-sidebar { width: 240px; }
  .admin-workspace { margin-left: 240px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-grid { grid-template-columns: 2fr 1fr; }
  .utility-rail { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .lower-grid { grid-template-columns: 1fr 1fr; }
  .audit-panel { grid-column: 1 / -1; }
  .pie-chart-grid { grid-template-columns: 1fr; }
  .pie-widget { min-height: auto; }
  .operations-widget-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .insight-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  /* Keep the full navigation through tablet widths so its submenus remain usable. */
  .type-grid { grid-template-columns: repeat(4, 1fr); }
  .analytics-grid, .lower-grid { grid-template-columns: 1fr; }
  .utility-rail { grid-column: auto; grid-template-columns: 1fr; }
  .audit-panel { grid-column: auto; }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .pie-chart-grid { gap: 0; }
  .operations-widget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .insight-widget-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 700px) {
  .admin-menu-toggle { display: grid; place-items: center; }
  .admin-sidebar { position: static; width: 100%; height: 66px; flex-direction: row; }
  .admin-brand { width: 100%; min-height: 66px; justify-content: flex-start; }
  .admin-brand > div { display: grid; }
  .admin-nav, .admin-profile { display: none; }
  /* .crud-ui .admin-nav {display:block} (unscoped, desktop-only in intent)
     otherwise outranks the display:none above by specificity, leaving the
     nav crammed next to the brand in the collapsed 66px bar on every plain
     crud-ui module page (Locations, Hotels, ...). Property-editor/hero-editor
     pages are unaffected - their sidebar is hidden via transform, not display.
     A single :not() with a selector list (rather than two chained :not()s)
     keeps this at the same specificity as .admin-sidebar.mobile-open .admin-nav
     below, so that rule - later in the cascade - still wins once opened. */
  .crud-ui:not(.property-editor, .hero-editor) .admin-nav,
  .crud-ui:not(.property-editor, .hero-editor) .admin-profile { display: none; }
  /* The hamburger toggles this class - without it, below 700px the nav had
     no way back at all (display:none with no reopen control). Reusing the
     .owner-sidebar.open full-screen-overlay pattern already established for
     the property-owner side of this same stylesheet rather than inventing a
     second mobile-nav mechanism. */
  .admin-sidebar.mobile-open {
    position: fixed;
    inset: 0;
    z-index: 40;
    width: 100%;
    height: 100vh;
    flex-direction: column;
  }
  .admin-sidebar.mobile-open .admin-nav,
  .admin-sidebar.mobile-open .admin-profile {
    display: grid;
  }
  .admin-sidebar.mobile-open .admin-nav { flex: 1; min-height: 0; overflow-y: auto; }
  .admin-workspace { margin-left: 0; }
  .admin-topbar { height: auto; min-height: 76px; padding: 14px 18px; flex-wrap: wrap; row-gap: 10px; justify-content: flex-start; column-gap: 12px; }
  .admin-topbar h1 { font-size: 21px; }
  .topbar-actions { width: 100%; justify-content: flex-start; }
  .search-box { display: none; }
  .add-hotel { min-height: 38px; padding-inline: 13px; }
  .admin-content { padding: 18px 14px 45px; }
  .kpi-grid, .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Total/Bookings by Property Type sit outside .admin-reference-board, so
     they never picked up its panel-title wrap + shrunk-filter treatment -
     below 700px the title text and the This Year/Year-select pair have no
     room to share one row and were overlapping/spilling past the card. */
  .panel-title { flex-wrap: wrap; row-gap: 8px; }
  .type-filter { flex-wrap: wrap; }
  .type-month-trigger { padding: 4px 6px; font-size: 9px; }
  /* Real <select> elements, not the month-trigger button - iOS Safari
     auto-zooms the whole page in when a form control with a computed
     font-size under 16px receives focus, so tapping either select at the
     9px size used everywhere else made the page jump/zoom and the option
     list open looking like it landed "somewhere else" relative to what was
     on screen a moment before. 16px is the documented threshold to avoid
     that zoom, so these two get a mobile-only bump the rest of the badge/
     select cluster doesn't need. */
  .type-mode-select, .type-year-select { padding: 6px 8px; font-size: 16px; }
  .type-month-panel { right: auto; left: 0; }
  .kpi-card { padding: 15px; }
  .analytics-grid, .lower-grid { gap: 0; }
  .utility-rail { gap: 10px; }
  .module-grid { grid-template-columns: 1fr; }
  .table-row { grid-template-columns: 22px 1.3fr .7fr; }
  .table-row span:nth-child(4), .table-row span:nth-child(5) { display: none; }
  .booking-list li { grid-template-columns: 38px 1fr auto; }
  .booking-list li > .strong:last-child { display: none; }
  .pie-layout { grid-template-columns: 1fr; }
  .pie-legend { width: min(330px, 100%); margin: 0 auto 12px; }
  .operations-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .operation-widget { min-height: 138px; padding: 14px; }
}

/* The sign-in page carries the site header now, which brings main.css with it.
   main.css strips the border off every input with `input:not([type="range"])`
   — a selector the plain `.customer-auth-input` class cannot outrank — so the
   auth fields restate their own frame at matching specificity. */
input.customer-auth-input,select.customer-auth-input,textarea.customer-auth-input{border:1px solid #868686;border-radius:4px;background:#fff;color:#1a1a1a}
input.customer-auth-input:focus,select.customer-auth-input:focus,textarea.customer-auth-input:focus{border-color:#006ce4}
input.customer-auth-input.is-readonly,select.customer-auth-input.is-readonly{background:#f5f5f5;color:#555}
/* The code boxes are stripped by the same main.css rule, and a box with no
   border is not a box - it reads as three loose digits floating on the page. */
input.otp-box{border:1px solid #868686;border-radius:6px;background:#fff;color:#1a1a1a}
input.otp-box:focus{border-color:#006ce4;box-shadow:0 0 0 3px rgba(0,108,228,.18)}
.otp-group.is-complete input.otp-box{border-color:#006ce4}
/* template-header.css leaves only 6px under the header because the other pages
   put the module tabs there. The auth pages have no tabs, so the bar needs the
   same 18px below the row as above it. */
.auth-page .header.header_2{padding-bottom:18px}
/* The template header is built for a page with room for it. On a phone the
   brand, the two switchers and the template's 10px-a-side gaps add up to about
   395px, which is 35px of sideways scroll on a 360px screen - and a page that
   slides under the thumb reads as broken however tidy the card below it is.
   The gaps tighten, the hairline dividers go, and the language control keeps
   its flag but drops its word. */
@media (max-width: 560px) {
  .auth-page .header__container { padding-inline: 12px; }
  /* Bootstrap's row hangs half a gutter outside its container on each side,
     which is the last few pixels of the overflow. The header row has its own
     spacing below, so it does not need the gutter at all. */
  .auth-page .header .row { --bs-gutter-x: 0; margin-inline: 0; }
  .auth-page .header .row.x-gap-20 > * { padding-inline: 4px; }
  .auth-page .header .w-1.h-20 { display: none; }
  .auth-page .header h2 a { margin-right: 0; font-size: .95rem; }
  .auth-page .header [data-x-label="lang"] { display: none; }
  .auth-page .header img.rounded-full { margin-right: 0; }
}
.planner-admin-pagination { padding:14px 18px; display:flex; align-items:center; justify-content:center; gap:6px; border-top:1px solid #e3ebf3; background:#fff; }
.planner-admin-pagination button { width:34px; height:34px; border:1px solid #d2dfeb; border-radius:8px; color:#426481; background:#fff; font:750 10px Jost,Arial,sans-serif; cursor:pointer; }
.planner-admin-pagination button:hover,.planner-admin-pagination button.active { color:#fff; border-color:#0873cf; background:#0873cf; }
.planner-admin-pagination button:disabled { opacity:.4; cursor:not-allowed; }
/* Owner/admin write the listing Overview as a multi-line textarea, but plain
   HTML collapses every newline into a single space, so paragraphs and list
   lines they typed on separate lines all ran together into one dense block
   on the listing page. Preserving the line breaks (without needing raw <br>
   markup) fixes that. */
.listing-overview-text { white-space: pre-line; }
.planner-admin-pagination span { margin-left:8px; color:#7e92a7; font-size:9px; font-weight:700; }

/* Admin sidebar: "?" help beside Attributes + its explainer popup */
.nav-help-row { position: relative; display: grid; }
.nav-help-row > a { padding-right: 34px; }
.nav-help-btn {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; border: 1px solid #b7d3f2; border-radius: 50%;
  background: #fff; color: #0874e8; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
}
.nav-help-btn:hover { background: #0874e8; color: #fff; }
.attr-help-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; }
.attr-help-modal[hidden] { display: none; }
.attr-help-backdrop { position: absolute; inset: 0; background: rgba(15, 30, 55, .45); }
.attr-help-card {
  position: relative; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 20px 50px rgba(15, 30, 55, .25);
  color: #33475f; font-size: 13.5px; line-height: 1.55;
}
.attr-help-card h3 { margin: 0 0 10px; color: #0f2a4a; font-size: 18px; }
.attr-help-card p { margin: 0 0 10px; }
.attr-help-card ol { margin: 0 0 12px; padding-left: 20px; }
.attr-help-card li { margin-bottom: 4px; }
.attr-help-label { color: #0874e8; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.attr-help-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.attr-help-tags span { padding: 4px 10px; border-radius: 999px; background: #eaf3ff; color: #0874e8; font-size: 12px; font-weight: 600; }
.attr-help-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: #667f9d; font-size: 22px; line-height: 1; cursor: pointer; }
.attr-help-ok { margin-top: 8px; padding: 9px 18px; border: 0; border-radius: 8px; background: #0874e8; color: #fff; font-weight: 600; cursor: pointer; }