/*
 * DESA ONE new look ("Canopy"), sandbox preview flag `new_look` (UX redesign, 2026-10-09).
 *
 * Every rule here is scoped to html[data-look="canopy"]. That attribute is set
 * only when the preview flag is on, so with the flag off (live) this file
 * matches nothing and the app looks exactly as before. Colour, type, shape and
 * spacing only: no element is hidden, moved or renamed here.
 *
 * TEXAR is the DESA ONE logo font and is never used for text.
 */

/* ── Colour: Canopy (dark) ──────────────────────────────────────────────── */
html[data-look="canopy"] {
  color-scheme: dark;
  --void: #07110b;
  --deep: #0a1810;
  --surface: #0c1c12;
  --surface-strong: #112517;
  --gold: #49d488;
  --gold-text: #7fe3a9;
  --gold-lt: rgba(73, 212, 136, 0.12);
  --gold-border: rgba(73, 212, 136, 0.26);
  --sage: #49d488;
  --sage-bright: #7fe3a9;
  --sage-lt: rgba(73, 212, 136, 0.1);
  --white: #eef6f0;
  --cream: rgba(238, 246, 240, 0.9);
  --text: rgba(214, 232, 220, 0.84);
  --muted: rgba(167, 187, 173, 0.78);
  --faint: rgba(167, 187, 173, 0.5);
  --border: rgba(160, 230, 190, 0.12);
  --border-strong: rgba(160, 230, 190, 0.24);
  --field: rgba(160, 230, 190, 0.06);
  --field-ink: #eef6f0;
  --warn: #f0b46a;
  --danger: #ff8a7a;
  --shadow: rgba(0, 0, 0, 0.45);
  --callout-bg: var(--surface-strong);
  --callout-ink: #e3efe6;
  --callout-kicker: var(--gold-text);
  --callout-warn-bg: #3a2416;

  /* Type: Bricolage Grotesque for headings, Instrument Sans for everything else. */
  --serif: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape: soft, rounded, pill buttons. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --look-card: 22px;
  --look-inner: 14px;
}

/* ── Colour: Mist (light) ───────────────────────────────────────────────── */
html[data-look="canopy"][data-theme="light"] {
  color-scheme: light;
  --void: #eef4ef;
  --deep: #e3ece5;
  --surface: #f6faf7;
  --surface-strong: #ffffff;
  --gold: #1f8a57;
  --gold-text: #17704a;
  --gold-lt: rgba(31, 138, 87, 0.1);
  --gold-border: rgba(31, 138, 87, 0.26);
  --sage: #1f8a57;
  --sage-bright: #17704a;
  --sage-lt: rgba(31, 138, 87, 0.08);
  --forest-3: #dde9e0;
  --white: #0f2418;
  --cream: rgba(15, 36, 24, 0.9);
  --text: rgba(23, 48, 33, 0.86);
  --muted: rgba(55, 84, 66, 0.74);
  --faint: rgba(55, 84, 66, 0.5);
  --border: rgba(15, 60, 35, 0.12);
  --border-strong: rgba(15, 60, 35, 0.24);
  --field: #ffffff;
  --field-ink: #0f2418;
  --warn: #b0661f;
  --danger: #b4382c;
  --shadow: rgba(20, 60, 35, 0.12);
  --callout-bg: var(--surface-strong);
  --callout-ink: #173021;
  --callout-kicker: var(--gold-text);
  --callout-warn-bg: #fbeee2;
}

/* ── Page ───────────────────────────────────────────────────────────────── */
html[data-look="canopy"] body {
  background:
    radial-gradient(ellipse 70% 60% at 80% -10%, rgba(73, 212, 136, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(73, 212, 136, 0.07), transparent 65%),
    var(--void);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

html[data-look="canopy"][data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 60% at 80% -10%, rgba(31, 138, 87, 0.1), transparent 60%),
    var(--void);
}


/* ── Readable sizes ─────────────────────────────────────────────────────────
   Generated from every rule in styles.css and staff.css that set text below
   12px (9px → 12px, 10px → 12.5px, 11px → 13px). */
html[data-look="canopy"] body .attention-badge,
html[data-look="canopy"] body .cash-proof-link,
html[data-look="canopy"] body .file-cell .card-button,
html[data-look="canopy"] body .fo-head-title,
html[data-look="canopy"] body .fo-source,
html[data-look="canopy"] body .metric span,
html[data-look="canopy"] body .pill,
html[data-look="canopy"] body .status-cell .edit-id-button,
html[data-look="canopy"] body .status-cell .mark-ready-button,
html[data-look="canopy"] body .step strong,
html[data-look="canopy"] body th {
  font-size: 12px;
}

html[data-look="canopy"] body .capture-file-button,
html[data-look="canopy"] body .cash-open-expense small,
html[data-look="canopy"] body .confirm-summary dt,
html[data-look="canopy"] body .file-fallback span,
html[data-look="canopy"] body .inhouse-room-source,
html[data-look="canopy"] body .language,
html[data-look="canopy"] body .metric span,
html[data-look="canopy"] body .page-section-label,
html[data-look="canopy"] body .report-hero > article > span,
html[data-look="canopy"] body .room-source-label,
html[data-look="canopy"] body .staff-identity strong,
html[data-look="canopy"] body .status-pill,
html[data-look="canopy"] body .status-row span,
html[data-look="canopy"] body .step strong,
html[data-look="canopy"] body .team-intro span,
html[data-look="canopy"] body .text-button,
html[data-look="canopy"] body button {
  font-size: 12.5px;
}

html[data-look="canopy"] body .accountant-file-input span,
html[data-look="canopy"] body .cash-option-check,
html[data-look="canopy"] body .field-error,
html[data-look="canopy"] body .inhouse-asof,
html[data-look="canopy"] body .inhouse-group-title,
html[data-look="canopy"] body .inhouse-preference,
html[data-look="canopy"] body .schedule-day strong,
html[data-look="canopy"] body .settings-form legend,
html[data-look="canopy"] body .step span,
html[data-look="canopy"] body .team-access-badges span,
html[data-look="canopy"] body label,
html[data-look="canopy"] body select.room-assign {
  font-size: 13px;
}

/* Sentence case everywhere: the old all-caps, wide-tracked labels read as a
   terminal. Small eyebrows keep a light uppercase. */
html[data-look="canopy"] body * {
  text-transform: none;
  letter-spacing: normal;
}

html[data-look="canopy"] body .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

html[data-look="canopy"] body :is(h1, h2, h3, h4, legend) {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

html[data-look="canopy"] body label,
html[data-look="canopy"] body label > span {
  font-size: 13px;
  color: var(--muted);
}

/* ── Cards and panels ───────────────────────────────────────────────────── */
html[data-look="canopy"] body :where(
  .panel, .status-panel, .settings-panel, .staff-header, .staff-login-card, .camera-card, .consent,
  .confirm-summary div, .restaurant-success-panel, .inhouse-booking-panel,
  .settings-form fieldset, .schedule-default, .schedule-day, .team-row,
  .sumsub-frame, .file-fallback, .id-progress, .capture,
  .email-chip-input, .modal-card, .cash-card, .metric
) {
  border-radius: var(--look-card);
}

html[data-look="canopy"] body #camera,
html[data-look="canopy"] body #signaturePad {
  border-radius: var(--look-card);
}

html[data-look="canopy"] body :is(.panel, .status-panel, .settings-panel, .staff-header, .staff-login-card, .modal-card) {
  box-shadow: 0 30px 60px -40px var(--shadow);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
html[data-look="canopy"] body :is(input, select, textarea, .password-toggle) {
  border-radius: var(--look-inner);
  font-size: 15px;
}

html[data-look="canopy"] body :is(input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]), select) {
  height: 48px;
}

/* ── Buttons: readable size, pill shape ─────────────────────────────────── */
html[data-look="canopy"] body :is(button:not(.step):not([class*="uppy-"]), .text-button, .capture-file-button) {
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  min-height: 46px;
  padding-inline: 20px;
}

html[data-look="canopy"] body :is(button[type="submit"], #nextStep, .capture-file-button.primary-capture-button) {
  box-shadow: 0 10px 30px -14px rgba(73, 212, 136, 0.7);
}

html[data-look="canopy"][data-theme="light"] body :is(button[type="submit"], #nextStep, .capture-file-button.primary-capture-button) {
  box-shadow: 0 10px 24px -14px rgba(31, 138, 87, 0.6);
}

html[data-look="canopy"] body .theme-toggle {
  align-self: flex-end;
  min-height: 46px;
  padding-inline: 16px;
  font-size: 13px;
}

/* On a phone the panels run edge to edge, so round corners would be cut off. */
@media (max-width: 760px) {
  html[data-look="canopy"] body :is(.panel, .status-panel, .settings-panel) {
    border-radius: 0;
  }
}

/* ── Guest check-in steps ───────────────────────────────────────────────── */
html[data-look="canopy"] body .step strong {
  font-size: 13px;
}

html[data-look="canopy"] body .step span {
  font-family: var(--display);
}

/* Light mode: the old cream panels and fields come from fixed colours in
   styles.css, so they are restated here from the Mist tokens. */
html[data-look="canopy"][data-theme="light"] body :is(.panel, .status-panel, .staff-login-card, .metric, .toolbar, .report-panel, .table-panel, .settings-panel) {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-color: var(--border);
}

html[data-look="canopy"][data-theme="light"] body .steps {
  background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
}

html[data-look="canopy"][data-theme="light"] body :is(input, select, textarea) {
  background: var(--field);
  border-color: var(--border-strong);
}

/* Counter rows: the cards stand on their own, without the old tinted tray. */
html[data-look="canopy"] body .metric-grid {
  background: transparent;
  border: 0;
  overflow: visible;
}

/* Header buttons keep their own height when the row wraps on a phone. */
html[data-look="canopy"] body .topbar-controls > :is(button, .text-button) {
  align-self: center;
}

/* ── Depth: glow, grain and glass (as in the founder-reviewed mockup) ───────
   The old grid lines go; two soft green glows sit behind the page; the fine
   grain that was already there at near-zero strength becomes visible; panels
   become frosted glass with a faint top highlight. */
html[data-look="canopy"] body {
  background: var(--void);
}

html[data-look="canopy"] body::before {
  background-image:
    radial-gradient(55% 45% at 88% -8%, rgba(73, 212, 136, 0.24), transparent 70%),
    radial-gradient(45% 40% at -8% 108%, rgba(73, 212, 136, 0.13), transparent 70%),
    radial-gradient(30% 25% at 45% 40%, rgba(73, 212, 136, 0.045), transparent 70%);
  background-size: auto;
}

html[data-look="canopy"] body::after {
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

html[data-look="canopy"][data-theme="light"] body::before {
  background-image:
    radial-gradient(55% 45% at 88% -8%, rgba(31, 138, 87, 0.14), transparent 70%),
    radial-gradient(45% 40% at -8% 108%, rgba(31, 138, 87, 0.08), transparent 70%);
}

html[data-look="canopy"][data-theme="light"] body::after {
  opacity: 0.3;
}

html[data-look="canopy"] body :is(.panel, .status-panel, .staff-login-card, .staff-header, .metric, .toolbar, .report-panel, .table-panel, .settings-panel, .fo-section, .cash-card, .modal-card) {
  background: linear-gradient(180deg, rgba(170, 240, 200, 0.075), rgba(170, 240, 200, 0.025));
  border-color: rgba(170, 240, 200, 0.12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -40px rgba(0, 0, 0, 0.7);
}

html[data-look="canopy"][data-theme="light"] body :is(.panel, .status-panel, .staff-login-card, .staff-header, .metric, .toolbar, .report-panel, .table-panel, .settings-panel, .fo-section, .cash-card, .modal-card) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  border-color: rgba(15, 60, 35, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 50px -36px rgba(20, 60, 35, 0.35);
}

/* Counter cards fill one row however many a hotel has (six with the public
   form allowance), two to a row on a phone, instead of a fixed five that
   pushed the sixth onto a row of its own. */
html[data-look="canopy"] body .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 640px) {
  html[data-look="canopy"] body .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Header views read as one tab bar, as in the mockup: quiet text tabs, the
   current one filled. Same buttons, same order, same behaviour. */
html[data-look="canopy"] body .staff-header .topbar-controls > button[data-view] {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
  padding-inline: 14px;
}

html[data-look="canopy"] body .staff-header .topbar-controls > button[data-view]:hover {
  color: var(--white);
  background: var(--gold-lt);
}

html[data-look="canopy"] body .staff-header .topbar-controls > button[data-view].is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}

html[data-look="canopy"] body .staff-header .topbar-controls > .tenant-dashboard-link {
  border-color: var(--border);
  color: var(--muted);
}

/* Staff header (founder, 2026-10-10): the DESA ONE logo on top, "Property
   Control" and the section name under it; language, name/role and Log out
   on one row at one height. The language label stays for screen readers. */
html[data-look="canopy"] body .staff-header .brand-lockup {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  gap: 4px;
}

html[data-look="canopy"] body .staff-header .brand-logo-link {
  grid-row: auto;
  margin-bottom: 6px;
}

html[data-look="canopy"] body .staff-header .brand-lockup img {
  width: 112px;
}

html[data-look="canopy"] body .staff-header .language > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html[data-look="canopy"] body .staff-header .topbar-controls {
  align-items: center;
}

html[data-look="canopy"] body .staff-header .topbar-controls > :is(button, .text-button, .staff-identity),
html[data-look="canopy"] body .staff-header .topbar-controls .language select {
  height: 44px;
  min-height: 44px;
  align-self: center;
}

html[data-look="canopy"] body .staff-header .staff-identity {
  border-radius: 999px;
  padding-block: 0;
}

html[data-look="canopy"] body .staff-header .language select {
  border-radius: 999px;
  padding-block: 0;
}

/* Views and the light/dark switch on the first row; language, name/role and
   Log out together on the second. */
html[data-look="canopy"] body .staff-header .topbar-controls::before {
  content: "";
  flex-basis: 100%;
  order: 1;
}

html[data-look="canopy"] body .staff-header .topbar-controls > :is(.language, .staff-identity, #logoutButton) {
  order: 2;
}

@media (max-width: 640px) {
  html[data-look="canopy"] body .staff-header .topbar-controls > .language {
    flex: 0 0 auto;
    width: auto;
  }

  html[data-look="canopy"] body .staff-header .topbar-controls .language select {
    width: 84px;
  }

  html[data-look="canopy"] body .staff-header .topbar-controls > .staff-identity {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  html[data-look="canopy"] body .staff-header .staff-identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  /* On a phone the name is enough; the role is in Team. */
  html[data-look="canopy"] body .staff-header .staff-identity strong {
    display: none;
  }
}

/* guest_stay_summary, only while the Canopy preview is on. */
html[data-look="canopy"] body .stay-summary {
  margin-bottom: 22px;
  padding: 14px 16px;
  border-radius: var(--look-inner);
  background: var(--gold-lt);
  border-color: var(--gold-border);
}

html[data-look="canopy"] body .stay-summary-text {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--white);
}

html[data-look="canopy"] body .stay-summary-change {
  min-height: 34px;
  margin-left: 8px;
  padding-inline: 14px;
  background: transparent;
  color: var(--gold-text);
  border-color: var(--gold-border);
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
}

/* guest_passport_film, only while the Canopy preview is on. */
html[data-look="canopy"] .passport-film-stage {
  border-radius: var(--look-card);
  border-color: var(--border-strong);
  background: var(--surface);
}

html[data-look="canopy"] .passport-film.is-done .passport-film-stage {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

html[data-look="canopy"] .passport-film-tick {
  background: var(--gold);
  color: var(--void);
}

html[data-look="canopy"] .passport-film-steps li {
  font-family: var(--sans);
  font-size: 15px;
}

html[data-look="canopy"] .passport-film-steps li[data-state="active"]::before {
  border-color: var(--gold);
  background: var(--gold-lt);
}

html[data-look="canopy"] .passport-film-steps li[data-state="done"]::before {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}

html[data-look="canopy"] .passport-film.is-overlay {
  background: rgba(7, 17, 11, 0.86);
}

html[data-look="canopy"][data-theme="light"] .passport-film.is-overlay {
  background: rgba(238, 244, 239, 0.92);
}

/* The waiting screen is solid: nothing of the page behind shows through. */
html[data-look="canopy"] body .passport-film.is-overlay {
  background:
    radial-gradient(55% 45% at 85% -8%, rgba(73, 212, 136, 0.18), transparent 70%),
    var(--void);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-look="canopy"] body .passport-film.is-overlay .passport-film-stage {
  width: min(86vw, 420px);
}

/* phone_country_search, only while the Canopy preview is on. */
html[data-look="canopy"] .phone-country-box {
  min-height: 48px;
  border-radius: var(--radius-sm);
  border-color: var(--border);
  background: var(--field);
  color: var(--field-ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html[data-look="canopy"] .phone-country-box:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-lt);
}

html[data-look="canopy"] .phone-country-panel {
  border-radius: var(--look-card);
  border-color: var(--border-strong);
  background: var(--surface-strong);
  box-shadow: 0 18px 40px var(--shadow);
}

html[data-look="canopy"] .phone-country-search-label,
html[data-look="canopy"] .phone-country-group,
html[data-look="canopy"] .phone-country-option {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

html[data-look="canopy"] .phone-country-search-label {
  color: var(--white);
  font-size: 15px;
}

html[data-look="canopy"] .phone-country-group {
  color: var(--gold-text);
  font-size: 13px;
}

html[data-look="canopy"] .phone-country-option {
  border-radius: 10px;
  color: var(--white);
  font-size: 16px;
}

html[data-look="canopy"] .phone-country-option[aria-selected="true"] {
  background: var(--gold-lt);
  color: var(--white);
}

html[data-look="canopy"] .phone-country-sheet.is-phone .phone-country-panel {
  border-radius: 22px 22px 0 0;
}

html[data-look="canopy"] .phone-country-sheet.is-phone .phone-country-backdrop {
  background: rgba(7, 17, 11, 0.72);
}

html[data-look="canopy"][data-theme="light"] .phone-country-sheet.is-phone .phone-country-backdrop {
  background: rgba(15, 36, 24, 0.35);
}