/* App styles on top of Tabler. Keep this small: prefer Tabler classes in the views. */

/* Icons from /icons.svg. Tabler's .icon sets size and stroke width. */
.icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Top bar: scope switcher ---------- */
.topbar {
  border-bottom: 1px solid var(--tblr-border-color);
}
.topbar .navbar-brand img {
  height: 28px;
  width: auto;
}
.scope-switch {
  flex-wrap: nowrap;
}
.scope-switch .nav-link {
  white-space: nowrap;
}
.villa-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dot, var(--tblr-primary));
  margin-inline-end: 0.375rem;
}
/* ---------- Tab strips (top-bar switcher, Settings sections, Tasks tabs) ----------
   The selected tab is a solid fill so it can't be missed on the dark theme:
   the villa's colour inside a villa, a neutral grey in Overview (so it never looks like a villa). */
:root {
  --tab-active-bg: #424242;
  --tab-active-fg: #ffffff;
}
/* In the top bar the Overview button is always the neutral grey, whatever page is open;
   each villa button carries its own colour inline. */
.scope-switch > .nav-link:not([style]) {
  --tab-active-bg: #424242;
  --tab-active-fg: #ffffff;
}
.nav-segmented .nav-link.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-fg);
  font-weight: var(--tblr-font-weight-bold);
  border-color: transparent;
  box-shadow: none;
}
.nav-segmented .nav-link:not(.active):hover {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
}
/* Count badges and the villa dot stay readable on the fill. */
.nav-segmented .nav-link.active .badge {
  background: rgba(0, 0, 0, 0.28) !important;
  color: inherit !important;
}
.nav-segmented .nav-link.active .villa-dot {
  background: var(--tab-active-fg);
}

/* ---------- Second bar: pages in the scope ---------- */
.subnav {
  --tblr-navbar-active-border-color: var(--tab-active-bg);
  min-height: 0;
  padding: 0;
  border-bottom: 1px solid var(--tblr-border-color);
}
/* On phones this is a horizontally scrolling strip, not a hamburger menu. */
.subnav .navbar-nav {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav .navbar-nav::-webkit-scrollbar {
  display: none;
}
.subnav .nav-link {
  white-space: nowrap;
  padding: 0.75rem 0.5rem;
  color: var(--tblr-secondary);
  border-bottom: 2px solid transparent;
}
.subnav .nav-link:hover {
  color: var(--tblr-body-color);
}
.subnav .nav-item.active > .nav-link {
  color: var(--tblr-body-color);
  font-weight: var(--tblr-font-weight-medium);
  /* same colour as the selected tab: the villa's colour, or grey in Overview */
  border-bottom-color: var(--tab-active-bg);
  background: none;
}
.subnav .nav-link-icon {
  margin-inline-end: 0.375rem;
}

/* ---------- Pages ---------- */
.accent-bar {
  height: 4px;
  background: var(--dot, var(--tblr-primary));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.logo-preview {
  max-height: 64px;
  max-width: 100%;
  object-fit: contain;
}
.logo-preview-dark {
  background: #182433;
  padding: 0.5rem;
  border-radius: var(--tblr-border-radius);
}
.logo-preview-light {
  background: #fff;
  padding: 0.5rem;
  border-radius: var(--tblr-border-radius);
}
.activity-diff td {
  word-break: break-word;
}

/* ---------- Print / invoice ---------- */
.print-sheet {
  max-width: 210mm;
  min-height: 297mm;
  margin: 1.5rem auto;
  padding: 10mm;
  background: #fff;
  color: #1d273b;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
}
.print-sheet .invoice-logo {
  max-width: 120px;
  height: auto;
}
/* Fallback when only the dark-UI (white) logo exists. */
.print-sheet .invoice-logo.inverted {
  filter: invert(1);
}
@media print {
  @page {
    size: A4;
    margin: 0;
  }
  body {
    background: #fff !important;
  }
  .print-sheet {
    margin: 0;
    box-shadow: none;
    /* A hair under A4, so the footer sits at the bottom without spilling onto a second page. */
    min-height: 296mm;
  }
}

/* Alpine: hide until initialised. */
[x-cloak] {
  display: none !important;
}

/* ---------- Bookings ---------- */
/* Pending bookings: outlined/dashed, so they stand apart from confirmed ones. */
.badge-pending {
  background: transparent;
  color: var(--tblr-warning);
  border: 1px dashed var(--tblr-warning);
}
.room-option {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 0.75rem;
}
.room-option.is-selected {
  border-color: var(--tblr-primary);
  background: color-mix(in oklab, var(--tblr-primary) 8%, transparent);
}
.room-option.is-booked {
  opacity: 0.6;
}
.totals-card {
  position: sticky;
  top: 1rem;
}
.totals-table td {
  padding: 0.25rem 0;
}

/* Booking list rows: a coloured bar on the left shows the arrival state. */
.booking-row {
  box-shadow: inset 3px 0 0 var(--state, transparent);
}
.booking-row-toggle {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background: none;
  color: inherit;
  text-align: start;
}
.booking-row-toggle:hover {
  background: var(--tblr-bg-surface-secondary);
}
.booking-row-chevron .icon {
  transition: transform 0.15s;
}
.booking-row-chevron.is-open .icon {
  transform: rotate(180deg);
}
.booking-row-details {
  padding: 0.25rem 1rem 1rem;
  border-top: 1px dashed var(--tblr-border-color);
  padding-top: 0.75rem;
}
.today-card {
  box-shadow: inset 3px 0 0 var(--state, transparent);
  border-radius: inherit;
}
/* Tonight's room grid on the villa dashboard. */
.room-tile {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 0.625rem 0.75rem;
  height: 100%;
}
/* Checked in → green; booked for tonight but not checked in yet → orange. */
.room-tile.is-inhouse {
  border-color: var(--tblr-green);
  background: color-mix(in oklab, var(--tblr-green) 10%, transparent);
}
.room-tile.is-expected {
  border-color: var(--tblr-orange);
  background: color-mix(in oklab, var(--tblr-orange) 8%, transparent);
}
.room-tile.is-held {
  border-style: dashed;
  border-color: var(--tblr-warning);
}

/* Date range picker (flatpickr dark theme), tuned to Tabler and the villa accent.
   The theme stylesheet loads after this file, so these rules are prefixed with body to win. */
body .flatpickr-calendar {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.35);
}
body .flatpickr-calendar.arrowTop::after,
body .flatpickr-calendar.arrowBottom::after {
  border-bottom-color: var(--tblr-bg-surface);
  border-top-color: var(--tblr-bg-surface);
}
body .flatpickr-months .flatpickr-month,
body .flatpickr-weekdays,
body span.flatpickr-weekday,
body .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--tblr-bg-surface);
}
body span.flatpickr-weekday {
  color: var(--tblr-secondary);
}
body .flatpickr-day:hover {
  background: var(--tblr-bg-surface-secondary);
  border-color: transparent;
}
body .flatpickr-day.selected,
body .flatpickr-day.startRange,
body .flatpickr-day.endRange,
body .flatpickr-day.selected:hover,
body .flatpickr-day.startRange:hover,
body .flatpickr-day.endRange:hover {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary-fg, #fff);
}
body .flatpickr-day.inRange,
body .flatpickr-day.inRange:hover {
  background: color-mix(in oklab, var(--tblr-primary) 25%, transparent);
  border-color: transparent;
  box-shadow: -5px 0 0 color-mix(in oklab, var(--tblr-primary) 25%, transparent), 5px 0 0 color-mix(in oklab, var(--tblr-primary) 25%, transparent);
}
body .flatpickr-day.startRange + .endRange:not(:nth-child(7n + 1)),
body .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)) {
  box-shadow: -10px 0 0 var(--tblr-primary);
}
body .flatpickr-day.today {
  border-color: var(--tblr-primary);
}
/* The visible picker input is read-only; keep it looking like a normal field. */
.flatpickr-input + input.form-control[readonly] {
  background-color: var(--tblr-bg-forms, var(--tblr-bg-surface));
  cursor: pointer;
}

/* Always show the vertical scrollbar, so the layout doesn't shift between short and long pages. */
html {
  overflow-y: scroll;
}
/* Pop-ups: Bootstrap locks the background by setting overflow:hidden (plus scrollbar padding) on
   <body>. Because <html> scrolls here (rule above), that would clip the page to one screen and
   make the background jump to the top while a pop-up is open. So the body's overflow is pinned
   and the pop-up layer keeps scrolling to itself instead (wheel and touch scrolling over it
   don't pass through to the page behind).
   This must apply always, not only under .modal-open: Bootstrap sets the inline overflow and
   measures the page BEFORE it adds that class, and the jump happens in that instant. */
body {
  overflow: visible !important;
  padding-right: 0 !important;
}
.modal {
  overscroll-behavior: contain;
}

/* Guest search results on the booking form: solid background over the fields below. */
.guest-results {
  z-index: 10;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
}
.guest-results .list-group-item {
  background: var(--tblr-bg-surface);
}
.guest-results .list-group-item:hover,
.guest-results .list-group-item:focus {
  background: var(--tblr-bg-surface-secondary);
}

/* Month heading on booking lists: fixed width so the arrows don't move between months. */
.month-label {
  width: 12.5rem;
  text-align: center;
  font-size: 1.5rem;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .month-label {
    width: 10.5rem;
    font-size: 1.25rem;
  }
}

/* Booking status buttons: one size, a little larger than small buttons, wrapping on narrow screens. */
.status-btn {
  font-size: 0.9375rem;
  padding: 0.5rem 0.5rem;
  white-space: normal;
  line-height: 1.25;
}
@media (max-width: 575.98px) {
  /* Narrow screens: icon above the label so three buttons fit side by side. */
  .status-btn {
    flex-direction: column;
    gap: 0.25rem;
  }
  .status-btn .icon {
    margin: 0;
  }
}

/* Currency choice for a new booking */
.currency-choice:hover {
  border-color: var(--tblr-primary);
}

/* Open button at the end of every booking row. */
.booking-row-open {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 0.875rem;
  border-inline-start: 1px solid var(--tblr-border-color);
  color: var(--tblr-primary);
  font-weight: var(--tblr-font-weight-medium);
  text-decoration: none;
}
.booking-row-open:hover {
  background: color-mix(in oklab, var(--tblr-primary) 12%, transparent);
  color: var(--tblr-primary);
  text-decoration: none;
}

/* ---------- Charts (server-rendered SVG, see lib/chart.js) ---------- */
.bar-chart {
  position: relative;
}
.bar-chart-scroll {
  overflow-x: auto;
}
.bar-chart-svg {
  display: block;
  width: 100%;
  min-width: 34rem; /* scroll sideways on phones rather than shrinking the text */
  height: auto;
}
.chart-grid {
  stroke: var(--tblr-border-color);
  stroke-width: 1;
  opacity: 0.6;
}
.chart-axis {
  stroke: var(--tblr-secondary);
  stroke-width: 1;
}
.chart-tick {
  fill: var(--tblr-secondary);
  font-size: 11px;
}
.chart-band {
  fill: transparent;
}
.chart-band.is-active {
  fill: var(--tblr-bg-surface-secondary);
}
.chart-bar {
  transition: opacity 0.1s;
}
.chart-bar.is-dim {
  opacity: 0.45;
}
.chart-hit {
  cursor: default;
  outline: none;
}
.chart-hit:focus-visible {
  stroke: var(--tblr-primary);
  stroke-width: 1.5;
}
.chart-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}
.chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 11rem;
  padding: 0.5rem 0.625rem;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  font-size: 0.8125rem;
  pointer-events: none;
}
.chart-tooltip-title {
  color: var(--tblr-secondary);
  margin-bottom: 0.25rem;
}
.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.chart-tooltip-key {
  width: 0.75rem;
  height: 3px;
  border-radius: 2px;
  flex: none;
}
.chart-tooltip-name {
  color: var(--tblr-secondary);
}
.chart-tooltip-total {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--tblr-border-color);
}

/* ---------- Tasks ---------- */
.task-item.is-overdue {
  box-shadow: inset 3px 0 0 var(--tblr-red);
}
.task-item.is-done .task-title {
  color: var(--tblr-secondary);
  text-decoration: line-through;
}
/* Large tick target for phones. */
.task-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 2px solid var(--tblr-border-color-active, var(--tblr-secondary));
  border-radius: 50%;
  background: transparent;
  color: transparent;
}
button.task-tick:hover {
  border-color: var(--tblr-green);
  color: var(--tblr-green);
}
.task-tick.is-done {
  border-color: var(--tblr-green);
  background: var(--tblr-green);
  color: #fff;
}
button.task-tick.is-done:hover {
  background: transparent;
  color: var(--tblr-green);
}
.task-tick.is-locked {
  cursor: default;
}
.task-tick .icon {
  margin: 0;
}
/* Editing task lists */
.task-edit {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--tblr-border-color);
}
.task-edit-number {
  flex: none;
  width: 1.5rem;
  padding-top: 0.5rem;
  color: var(--tblr-secondary);
  text-align: center;
}

/* Task photos */
.task-photo {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.task-photo img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--tblr-border-radius);
  border: 1px solid var(--tblr-border-color);
}
.task-photo-remove {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tblr-red);
  color: #fff;
}
.task-photo-remove .icon {
  width: 12px;
  height: 12px;
  margin: 0;
  stroke-width: 2.5;
}
/* While a photo uploads */
.task-photo-busy {
  display: none;
}
.task-photo-add.htmx-request .task-photo-label {
  display: none;
}
.task-photo-add.htmx-request .task-photo-busy {
  display: inline;
}
.task-photo-add.htmx-request label {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Section headings: sit above a card of rows, smaller than the page title ---------- */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.625rem;
  margin: 0 0 0.5rem;
  padding-inline: 0.125rem;
}
.section-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--tblr-font-weight-bold);
}
.section-hint {
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
}
.section-count {
  margin-inline-start: auto;
  color: var(--tblr-secondary);
  font-size: 0.8125rem;
}

/* ---------- Notifications: bell in the top bar + panel ---------- */
.bell {
  position: relative;
  color: var(--tblr-secondary);
}
.bell:hover {
  color: var(--tblr-body-color);
}
.bell-badge {
  position: absolute;
  top: 0;
  inset-inline-end: -0.125rem;
  line-height: 1;
  pointer-events: none;
}
.bell-badge .badge {
  min-width: 1.125rem;
  padding: 0.1875rem 0.3125rem;
  font-size: 0.6875rem;
}
.notif-panel {
  --tblr-offcanvas-width: 26rem;
}
.notif-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
}
.notif {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  border-inline-start: 3px solid transparent;
}
.notif.is-unread {
  border-inline-start-color: var(--tblr-red);
  background: var(--tblr-bg-surface-secondary);
}
.notif-icon {
  flex: none;
  margin-top: 0.125rem;
}
.notif-main {
  flex: 1;
  min-width: 0;
}
.notif-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  margin-bottom: 0.125rem;
  color: var(--tblr-secondary);
  font-size: 0.75rem;
}
.notif-villa {
  display: inline-flex;
  align-items: center;
  font-weight: var(--tblr-font-weight-bold);
  color: var(--tblr-body-color);
}
.notif-message {
  display: block;
  color: var(--tblr-body-color);
  overflow-wrap: anywhere;
}
a.notif-message:hover {
  text-decoration: underline;
}
.notif-dismiss {
  flex: none;
}

/* ---------- Invoice / quotation (print sheet) ---------- */
.print-sheet .doc-meta td {
  padding: 0.0625rem 0;
  text-align: right;
}
.print-sheet .doc-meta td:first-child {
  padding-inline-end: 0.75rem;
  color: #667382;
}
.print-sheet .doc-meta td:last-child {
  font-weight: 600;
}
/* Stay details: a small bordered table (villa on top, then two rows of two). */
.print-sheet .doc-stay {
  width: 100%;
  border-collapse: collapse;
}
.print-sheet .doc-stay td {
  width: 50%;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--tblr-border-color);
  vertical-align: top;
}
.print-sheet .doc-label {
  display: block;
  color: #667382;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* The footer is pushed to the bottom of the sheet, however short the document is. */
.print-sheet {
  display: flex;
  flex-direction: column;
}
.print-sheet .doc-footer {
  margin-top: auto;
  padding-top: 2rem;
  text-align: center;
}
.print-sheet .doc-thanks {
  margin-bottom: 0.75rem;
  color: #667382;
}
.print-sheet .doc-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tblr-border-color);
  font-size: 0.8125rem;
}
.print-sheet .doc-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  white-space: nowrap;
}
.print-sheet .doc-contact .icon {
  width: 0.9375rem;
  height: 0.9375rem;
  color: #667382;
}
.print-sheet .doc-lines tbody tr:last-child td {
  border-bottom: 0;
}
.print-sheet .doc-totals td {
  padding: 0.25rem 0.75rem;
}
/* Same thin light line as the rest of the page. */
.print-sheet .doc-totals .doc-total td {
  border-top: 1px solid var(--tblr-border-color);
  font-weight: 700;
}
/* Settings → taxes: order arrows */
.tax-move {
  --tblr-btn-padding-y: 0;
  height: 1.25rem;
}
.print-sheet .doc-totals td:last-child {
  white-space: nowrap;
}
/* On a phone screen the sheet gets narrow margins so the lines fit (printing still uses A4 margins). */
@media screen and (max-width: 575.98px) {
  .print-sheet {
    padding: 8mm 4mm;
  }
  .print-sheet .doc-lines th,
  .print-sheet .doc-lines td {
    padding-inline: 0.25rem;
    font-size: 0.8125rem;
  }
}

/* Status labels next to a page heading keep their normal badge size. */
.page-title .badge {
  font-size: 0.75rem;
  font-weight: var(--tblr-font-weight-medium);
}

/* ---------- Borderless look ----------
   Cards, the two navigation bars, pop-ups, menus and the notifications panel have no outline;
   they stand out by their fill. Lines inside cards (headers, rows) stay. */
.card {
  border-color: transparent;
  box-shadow: none;
}
.topbar,
.subnav {
  --tblr-navbar-border-color: transparent;
  border: 0;
  box-shadow: none;
}
/* The top bar is a shade darker than the page bar under it. */
[data-bs-theme="dark"] .topbar {
  background: color-mix(in srgb, var(--tblr-bg-surface) 72%, #000);
}
.modal {
  --tblr-modal-border-width: 0;
}
.dropdown-menu {
  --tblr-dropdown-border-width: 0;
}
.offcanvas {
  --tblr-offcanvas-border-width: 0;
}
.modal-content,
.dropdown-menu,
.offcanvas,
.offcanvas.offcanvas-end {
  border: 0;
}
/* Plain buttons: no outline, a little lighter than what they sit on. */
[data-bs-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not([class*="btn-outline-"]):not([class*="btn-ghost-"]):not(.btn-link):not(.btn-close) {
  --tblr-btn-bg: color-mix(in srgb, var(--tblr-bg-surface) 86%, #fff);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-bg-surface) 78%, #fff);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-bg: color-mix(in srgb, var(--tblr-bg-surface) 72%, #fff);
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-disabled-bg: color-mix(in srgb, var(--tblr-bg-surface) 92%, #fff);
  --tblr-btn-disabled-border-color: transparent;
  --tblr-btn-box-shadow: none;
}
/* Coloured outline buttons (Cancel, Money in / out…): a light tint of their colour instead of the outline. */
[data-bs-theme="dark"] .btn[class*="btn-outline-"] {
  --tblr-btn-bg: color-mix(in srgb, var(--tblr-btn-color) 14%, transparent);
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-border-color: transparent;
  --tblr-btn-disabled-border-color: transparent;
  --tblr-btn-box-shadow: none;
}

/* ---------- Booking page: Financials tiles ---------- */
.fin-tile {
  height: 100%;
  padding: 0.5rem 0.25rem;
  border-radius: var(--tblr-border-radius);
}
.fin-in {
  background: color-mix(in srgb, var(--tblr-green) 14%, transparent);
}
.fin-out {
  background: color-mix(in srgb, var(--tblr-red) 14%, transparent);
}
.fin-balance {
  background: color-mix(in srgb, var(--tblr-secondary) 16%, transparent);
}
/* Activity: the "Load more" row */
.load-more {
  color: var(--tblr-secondary);
}
.load-more.htmx-request {
  opacity: 0.5;
  pointer-events: none;
}

/* Close / Print above the sheet: centred, with the same gap above them as between them and the page. */
.print-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 0;
}
/* Invoice lines are as compact as the totals under them. */
.print-sheet .doc-lines th,
.print-sheet .doc-lines td {
  padding: 0.25rem 0.75rem;
}
.print-sheet .doc-lines th {
  padding-block: 0.375rem;
}
/* Number and date without labels: the number stands out, the date is plain. */
.print-sheet .doc-meta td[colspan] {
  padding-inline-end: 0;
  color: inherit;
  font-weight: 600;
}
.print-sheet .doc-meta tr:last-child td[colspan] {
  font-weight: 400;
  color: #667382;
}

/* ---------- Invoice: the sums continue in the lines table ---------- */
.print-sheet .doc-amount {
  width: 1%;
  white-space: nowrap;
}
.print-sheet .doc-lines td:last-child {
  white-space: nowrap;
}
.print-sheet .doc-lines tr.doc-sum td,
.print-sheet .doc-lines tr.doc-total td {
  border-bottom: 0;
}
.print-sheet .doc-lines tr.doc-sum-first td {
  padding-top: 0.625rem;
}
.print-sheet .doc-lines tr.doc-total td {
  border-top: 1px solid var(--tblr-border-color);
  font-weight: 700;
  padding-block: 0.5rem;
}

/* ---------- Overview: villa cards ---------- */
.villa-card-logo {
  max-height: 56px;
  max-width: 140px;
}
.villa-card-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 1.5rem;
}
.villa-card-figures > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
@media (max-width: 575.98px) {
  .villa-card-figures {
    grid-template-columns: 1fr;
  }
}

/* ---------- Calendar: rooms × days ---------- */
.cal-scroll {
  overflow-x: auto;
  border-radius: inherit;
}
.cal {
  --room-w: 5rem;
  /* Narrow enough for a whole month to fit a desktop page without scrolling sideways. */
  --day-w: 2rem;
  --lane-h: 1.5rem;
  min-width: calc(var(--room-w) + var(--days) * var(--day-w));
}
.cal-row {
  display: grid;
  grid-template-columns: var(--room-w) 1fr;
  border-top: 1px solid var(--tblr-border-color);
}
.cal-row.cal-head {
  border-top: 0;
}
/* The room names stay put while the days scroll sideways. */
.cal-room {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--tblr-bg-surface);
  border-right: 1px solid var(--tblr-border-color);
  font-size: 0.8125rem;
  font-weight: var(--tblr-font-weight-medium);
  line-height: 1.2;
  /* A narrow column: long room names go onto a second line instead of being cut off. */
  overflow-wrap: anywhere;
}
.cal-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--days), minmax(var(--day-w), 1fr));
  min-height: calc(var(--lanes, 1) * (var(--lane-h) + 0.25rem) + 0.5rem);
}
.cal-head .cal-track {
  min-height: 0;
}
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.375rem 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--tblr-secondary);
}
.cal-day strong {
  font-size: 0.8125rem;
  color: var(--tblr-body-color);
}
.cal-cell,
.cal-day {
  border-left: 1px solid color-mix(in srgb, var(--tblr-border-color) 55%, transparent);
}
.cal-cell:first-child,
.cal-day:first-child {
  border-left: 0;
}
.cal-cell.is-weekend,
.cal-day.is-weekend {
  background: color-mix(in srgb, var(--tblr-body-color) 4%, transparent);
}
.cal-cell.is-today,
.cal-day.is-today {
  background: color-mix(in srgb, var(--tblr-orange) 16%, transparent);
}
.cal-day.is-today strong {
  color: var(--tblr-orange);
}
a.cal-cell:hover {
  background: color-mix(in srgb, var(--tblr-body-color) 10%, transparent);
}
/* Bars sit over the day cells on a grid of half-days. */
.cal-bars {
  position: absolute;
  inset: 0.375rem 0;
  display: grid;
  grid-template-columns: repeat(calc(var(--days) * 2), minmax(0, 1fr));
  grid-auto-rows: var(--lane-h);
  row-gap: 0.25rem;
  pointer-events: none;
}
.cal-bar {
  pointer-events: auto;
  min-width: 0;
  margin-inline: 1px;
  padding: 0 0.375rem;
  border-radius: 0.3125rem;
  background: var(--bar, var(--tblr-primary));
  color: var(--bar-fg, #fff);
  font-size: 0.75rem;
  font-weight: var(--tblr-font-weight-medium);
  line-height: var(--lane-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.cal-bar:hover {
  color: var(--bar-fg, #fff);
  filter: brightness(1.12);
  text-decoration: none;
}
/* Pending: striped and outlined, so it never looks like a firm booking. */
.cal-bar.is-pending,
.cal-key.is-pending {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--bar, var(--tblr-primary)) 38%, transparent) 0 6px,
    color-mix(in srgb, var(--bar, var(--tblr-primary)) 16%, transparent) 6px 12px);
  color: var(--tblr-body-color);
  outline: 1px dashed var(--bar, var(--tblr-primary));
  outline-offset: -1px;
}
.cal-bar.is-pending:hover {
  color: var(--tblr-body-color);
}
/* Guests who have left: faded. */
.cal-bar.is-left {
  opacity: 0.55;
}
/* A stay that started before this month, or runs on into the next, has a flat end. */
.cal-bar.from-before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-inline-start: 0;
}
.cal-bar.goes-on {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-inline-end: 0;
}
.cal-villa {
  border-top: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface-secondary);
  font-weight: var(--tblr-font-weight-bold);
  font-size: 0.8125rem;
}
.cal-villa > span {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
}
.cal-key {
  width: 1.5rem;
  height: 0.75rem;
  border-radius: 0.1875rem;
  background: var(--tab-active-bg, var(--tblr-primary));
  --bar: var(--tab-active-bg, var(--tblr-primary));
}
@media (max-width: 575.98px) {
  .cal {
    --day-w: 2.125rem;
  }
}

/* ---------- Reports → Booking costs ---------- */
.costs-row {
  cursor: pointer;
}
.costs-caret {
  display: inline-flex;
  vertical-align: middle;
  margin-inline-end: 0.375rem;
  color: var(--tblr-secondary);
  transition: transform 0.15s;
}
.costs-caret.is-open {
  transform: rotate(90deg);
}
.costs-detail > td {
  background: var(--tblr-bg-surface-secondary);
}
.costs-detail .table {
  --tblr-table-bg: transparent;
}