:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173e3c;background:#f4f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:88px;border-bottom:1px solid #dce2d9;display:flex;align-items:center;justify-content:space-between;padding:0 max(6vw,24px)}.brand{font-weight:750;font-size:23px;text-decoration:none;color:inherit;letter-spacing:-1px}.brand span{color:#9bb099;margin:0 8px}.badge{font-size:12px;background:#e5ebdb;padding:8px 12px;border-radius:30px;font-weight:650}main{max-width:1120px;margin:0 auto;padding:58px 28px 24px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:#5b7467}h1{font-size:clamp(38px,6vw,64px);letter-spacing:-2.5px;line-height:1.07;margin:20px 0}p{line-height:1.6}.intro{max-width:600px;color:#60716a;font-size:17px;margin-bottom:36px}.layout{display:grid;grid-template-columns:1.15fr 1fr;gap:24px}.card{background:#fff;border:1px solid #dfe5dc;border-radius:20px;padding:28px}.section-top{display:flex;align-items:center;gap:13px}.step{font-size:11px;background:#edf1e9;border-radius:50%;padding:9px;color:#617a68}h2{font-size:19px;margin:0;letter-spacing:-.4px}.endpoint{font-family:monospace;font-size:12px;background:#f4f6f1;padding:14px;border-radius:9px;overflow-wrap:anywhere;margin:22px 0}button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:13px 17px;font-size:14px;font-weight:650}button:disabled{opacity:.6;cursor:wait}.primary{background:#173e3c;color:#fff}.primary span{margin-left:20px}.secondary{background:#eaf0e4;color:#173e3c}.hint,.footnote{font-size:12px;color:#6c7a70}.status{padding:14px;border-radius:9px;background:#f2f4ef;font-size:14px;line-height:1.6;margin:22px 0 15px}.status[data-state=error]{background:#fff1e9;color:#8a4024}.status[data-state=success]{background:#e7f3e7;color:#25592f}summary{font-size:13px;cursor:pointer;color:#5f7265}pre{font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f6f1;padding:14px;border-radius:8px;max-height:300px;overflow:auto}ul{list-style:none;padding:5px 0;margin-bottom:20px}li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid #edf0e8}li>span{color:#8d9b85;font-size:12px;padding-top:3px}li strong{font-size:15px}li p{font-size:13px;color:#6c7a70;margin:5px 0 0}.footnote{margin-top:30px}footer{display:flex;align-items:center;gap:15px;justify-content:space-between;color:#6c7a70;font-size:12px;margin:26px 0}label{display:block;font-size:13px;margin:18px 0 7px}input{width:100%;padding:12px;border:1px solid #b7c6b6;border-radius:8px;font:inherit}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}hr{border:0;border-top:1px solid #dfe5dc;margin:26px 0}:focus-visible{outline:3px solid #b89641;outline-offset:3px}[hidden]{display:none!important}@media(max-width:720px){header{height:72px}.layout{grid-template-columns:1fr}main{padding:36px 20px 20px}.card{padding:23px}h1{letter-spacing:-1.5px}footer{flex-wrap:wrap}.brand{font-size:20px}}
.heading-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.heading-row h1{font-size:48px}.filter-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:end}.filter-grid label{margin:0 0 8px}select{width:100%;min-height:46px;border:1px solid #b7c6b6;border-radius:8px;padding:10px;background:white;color:#173e3c;font:inherit}.bookings{padding-top:24px}.booking{width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) auto auto;gap:20px;align-items:center;text-align:left;background:white;border-radius:0;border-bottom:1px solid #e8ece4;padding:24px 0;font-weight:400;color:#173e3c}.booking:hover{background:#f7f9f3}.booking-meta{display:block;font-size:12px;color:#6c7a70;margin-top:6px}.booking-status{font-size:12px;border-radius:20px;background:#edf2e7;padding:7px 10px}.view-link{font-size:12px}.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:25px}.empty{padding:40px 0;text-align:center;color:#6c7a70}dialog{border:1px solid #dfe5dc;border-radius:18px;padding:28px;color:#173e3c;width:min(700px,calc(100% - 28px));max-height:85dvh;overflow:auto}dialog::backdrop{background:#142f2cb0}.detail-grid{display:grid;grid-template-columns:145px 1fr;gap:16px;font-size:14px}.detail-grid dt{color:#6c7a70}.detail-grid dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:800px){.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-grid>div:first-child{grid-column:1/-1}.heading-row{flex-wrap:wrap}.heading-row h1{font-size:38px}.booking{grid-template-columns:minmax(0,1fr) auto;gap:12px}.booking>div:nth-child(2){grid-row:2;grid-column:1}.booking-status{grid-column:2;grid-row:1}.view-link{grid-column:2;grid-row:2}.detail-grid{grid-template-columns:110px 1fr}main{padding-top:30px}.intro{margin-bottom:16px}}

/* Form controls must shrink inside grid tracks, including native Android dates. */
.filter-grid > *, .booking > *, .heading-row > * { min-width: 0; }
input, select { display: block; min-width: 0; max-width: 100%; width: 100%; min-height: 48px; font-size: 16px; }
select { text-overflow: ellipsis; }
input[type="date"] { inline-size: 100%; min-inline-size: 0; }
.booking strong, .booking-meta, .status { overflow-wrap: anywhere; }
.heading-row { margin-bottom: 16px; }
.pagination { flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
  .filter-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .filter-grid > div:first-child { grid-column: auto; }
  .filter-grid > button { width: 100%; min-height: 48px; }
  .card { padding: 20px; }
  header { padding-inline: 20px; gap: 12px; }
  .badge { font-size: 11px; text-align: center; }
  .heading-row > button { min-height: 48px; }
  .booking { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .booking > div:nth-child(2), .booking-status, .view-link { grid-column: 1; grid-row: auto; }
  .booking-status { justify-self: start; }
  dialog { padding: 20px; }
  .detail-grid { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .detail-grid dd { margin-bottom: 12px; }
}

.booking-dates { display: grid; gap: 6px; }
.booking-date { display: block; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.5; color: #173e3c; overflow-wrap: anywhere; }

.booking-customer { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: #173e3c; overflow-wrap: anywhere; }
/* Booking details: clear sections with phone-sized controls. */
dialog { padding: 0; width: min(720px,calc(100% - 24px)); background: #f7f8f3; }
dialog > .heading-row { position: sticky; top: 0; z-index: 1; padding: 16px 22px; margin: 0; background: #fff; border-bottom: 1px solid #dfe5dc; }
#detail-body { padding: 24px; }
.detail-hero { padding: 0 0 22px; }
.detail-hero h3 { margin: 10px 0 6px; font-size: 25px; letter-spacing: -.6px; overflow-wrap: anywhere; }
.detail-guest { margin: 0 0 16px; font-size: 17px; }
.stay-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; background: #173e3c; color: #fff; padding: 20px; border-radius: 12px; }
.stay-label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 7px; opacity: .8; }
.stay-dates strong { font-size: 18px; font-weight: 600; }
.money-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 22px 0; }
.money-grid > div { padding: 14px; background: #fff; border: 1px solid #dfe5dc; border-radius: 10px; min-width: 0; }
.money-grid strong { font-size: 17px; overflow-wrap: anywhere; }
.detail-section { padding: 20px 0; border-top: 1px solid #dfe5dc; }
.detail-section h3, .editor-heading { margin: 0 0 16px; font-size: 17px; }
.contact-grid { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 12px; font-size: 14px; }
.contact-grid dt { color: #64746a; }.contact-grid dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.note-box { padding: 16px; margin-top: 10px; background: #fff; border-radius: 10px; border: 1px solid #e1e7dc; }.note-box p { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.extra-details { margin: 12px 0 22px; }.detail-actions { display: flex; padding-top: 12px; }.detail-actions button { width: 100%; min-height: 48px; }
.edit-fields { border: 0; padding: 0; margin: 0; min-width: 0; }.edit-field { min-width: 0; margin-bottom: 18px; }.edit-field label { margin: 0 0 8px; }.edit-dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
textarea { display: block; width: 100%; max-width: 100%; min-width: 0; padding: 12px; border: 1px solid #b7c6b6; border-radius: 8px; font: inherit; font-size: 16px; color: #173e3c; resize: vertical; }
.edit-actions { display: flex; flex-wrap: wrap; gap: 10px; }.edit-actions button { min-height: 48px; flex: 1 1 160px; }.edit-actions .primary { order: -1; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:600px) { dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }dialog > .heading-row { padding: 12px 16px; flex-wrap: nowrap; gap: 10px; }dialog > .heading-row h2 { font-size: 17px; }#detail-body { padding: 18px; }.stay-dates { padding: 16px; gap: 12px; }.stay-dates strong { font-size: 16px; }.money-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }.money-grid > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.money-grid .stay-label { margin: 0; }.contact-grid { grid-template-columns: minmax(0,1fr); gap: 5px; }.contact-grid dd { margin-bottom: 10px; }.edit-dates { grid-template-columns: minmax(0,1fr); gap: 0; }.edit-actions { flex-direction: column; }.edit-actions button { flex: none; width: 100%; } }

/* Compact workspace header: reserve vertical space for filters and bookings. */
body > header { height: 52px; padding-inline: max(3vw,16px); }
body > header .brand { font-size: 20px; }
body > header .badge { padding: 5px 10px; }
main { padding-top: 12px; }
.workspace-heading { flex-wrap: nowrap; gap: 12px; margin-bottom: 12px; }
.workspace-heading h1 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.7px; }
.workspace-heading > button { min-height: 44px; padding: 10px 14px; flex-shrink: 0; }
#filters { margin-bottom: 16px; }
@media(max-width:600px) {
  body > header { height: 48px; }
  main { padding: 10px 16px 16px; }
  .workspace-heading { margin-bottom: 10px; }
  .workspace-heading h1 { font-size: 25px; }
}

/* Supplied white/orange logo on the brand's dark header. */
body > header { background: #173e3c; }
body > header .brand { display: flex; align-items: center; min-height: 44px; min-width: 0; }
.brand img { display: block; width: auto; height: 40px; max-width: 160px; object-fit: contain; }
@media(max-width:600px) { .brand img { height: 36px; } }
.header-actions { display: flex; align-items: center; gap: 12px; }.header-actions form { margin: 0; }.logout-button { min-height: 44px; padding: 8px 10px; color: white; background: transparent; font-size: 13px; }
.login-main { max-width: 460px; margin: 30px auto; }.login-card h1 { margin: 0 0 22px; font-size: 28px; letter-spacing: -.7px; }.login-card form > .primary { width: 100%; min-height: 48px; margin-top: 24px; }.login-card .hint { margin-bottom: 0; }.login-card input { min-width: 0; }
@media(max-width:600px) { .login-main { margin-top: 18px; }.header-actions { gap: 5px; } }

input[type="hidden"] { display: none !important; }

.pin-input { text-align: center; font-size: 32px; font-weight: 650; letter-spacing: .45em; padding-left: calc(12px + .45em); min-height: 64px; font-variant-numeric: tabular-nums; }.request-another { margin-top: 12px; width: 100%; min-height: 44px; }

/* Reservation cards: property, stay dates, customer, then reservation number. */
#list { display: grid; gap: 12px; }
#list .booking { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; width: 100%; padding: 16px; border: 1px solid #cbd5ca; border-radius: 12px; background: #fff; color: #173e3c; text-align: left; }
#list .booking[data-status="conflict"] { background: #fff9ed; border-color: #d9ba7e; }
#list .booking-info { min-width: 0; }
#list .booking-property { margin: 0; font-size: 17px; font-weight: 750; line-height: 1.35; letter-spacing: -.2px; overflow-wrap: anywhere; }
#list .booking-dates { display: block; margin-top: 5px; }
#list .booking-date { font-size: 15px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
#list .booking-customer { margin-top: 10px; font-size: 14px; line-height: 1.45; }
#list .booking-meta { margin-top: 3px; font-size: 13px; line-height: 1.4; color: #586b61; }
#list .booking-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding-top: 12px; border-top: 1px solid #dfe5dc; }
#list .booking-status { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; font-weight: 600; line-height: 1.4; color: #586b61; }
#list .booking-status-icon { flex-shrink: 0; }
#list .booking[data-status="conflict"] .booking-status { color: #845006; }
#list .booking[data-status="confirmed"] .booking-status { color: #356643; }
#list .booking-view { min-height: 44px; padding: 10px 14px; border: 1px solid #41665b; border-radius: 8px; background: #fff; color: #173e3c; font-size: 14px; font-weight: 650; line-height: 1.4; white-space: nowrap; }
#list .booking-view:hover { background: #edf3ed; border-color: #173e3c; }
#list .booking-view:active { background: #dfeadd; }
@media(min-width:801px) {
  #list .booking { grid-template-columns: minmax(0,1fr) auto; gap: 24px; padding: 18px 20px; }
  #list .booking-actions { border-top: 0; padding-top: 0; justify-content: flex-end; gap: 24px; }
}
@media(max-width:380px) {
  .bookings.card { padding: 14px; }
  #list .booking-view { width: 100%; }
}
/* Quick month keeps custom arrival dates available below it on phones. */
.filter-grid > .quick-month { grid-column: 1 / -1; }
.quick-month-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.filter-grid .quick-month-heading label { margin: 0; }
.quick-month-controls { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 8px; max-width: 420px; }
.quick-month-controls > * { min-width: 0; }
.quick-month-controls button { min-height: 48px; padding: 6px; font-size: 25px; line-height: 1; }
#quick-month { width: 100%; min-width: 0; min-inline-size: 0; color: #173e3c; background: white; font-weight: 600; }
#month-help { display: block; margin-top: 6px; line-height: 1.4; }
@media(max-width:600px) {
  .filter-grid > .quick-month { grid-column: 1 / -1; }
  .quick-month-controls { max-width: none; }
}
/* Occupancy comes from reservation form fields, not reserved unit quantity. */
.guest-section.detail-section { padding: 20px 0 0; border-top: 0; }
.guest-section h3 { margin-bottom: 10px; }
.guest-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0; }
.guest-counts > div { min-width: 0; padding: 12px; border: 1px solid #dfe5dc; border-radius: 10px; background: #fff; }
.guest-counts dt { font-size: 12px; line-height: 1.4; color: #586b61; }
.guest-counts dd { margin: 5px 0 0; font-size: 22px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Guest counts remain side by side on phones, with numeric touch keyboards. */
.edit-guests { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.edit-guests .edit-field { margin-bottom: 0; }
.edit-guest-total { margin: 8px 0 18px; font-size: 14px; }

/* Served reservations take priority over the conflict card background. */
#list .booking[data-lomarengas-served="true"] { background: #edf5fc; border-color: #8bb5d8; }
/* Product rows and draft controls fit phone-sized reservation dialogs. */
.reservation-products { margin-top: 20px; }
.product-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #dfe5dc; font-size: 14px; }
.product-row > div { min-width: 0; overflow-wrap: anywhere; }
.product-row > strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.product-description { display: block; color: #586b61; font-size: 13px; line-height: 1.5; margin-top: 4px; }
.product-total { border-bottom: 0; }
.edit-products { margin: 0 0 20px; padding: 20px 0; border-top: 1px solid #dfe5dc; border-bottom: 1px solid #dfe5dc; min-width: 0; }
.edit-products h3 { margin: 0 0 10px; font-size: 17px; }
.edit-products > .hint { margin: 8px 0 12px; line-height: 1.5; }
.edit-product-list { display: grid; gap: 12px; min-width: 0; }
.edit-product-card { min-width: 0; padding: 14px; background: #fff; border: 1px solid #ccd7cb; border-radius: 10px; }
.product-name { display: block; overflow-wrap: anywhere; font-size: 15px; }
.product-quantity { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: end; gap: 8px; margin-top: 12px; }
.product-quantity .edit-field { margin: 0; }
.product-quantity label { margin-bottom: 6px; }
.product-quantity button { min-height: 48px; padding: 8px; font-size: 22px; }
.product-quantity input { text-align: center; }
.product-quantity > *, .custom-price-fields > * { min-width: 0; }
.product-remove { display: block; min-height: 44px; padding: 10px 0; margin-top: 6px; background: transparent; color: #963e29; text-decoration: underline; font-size: 13px; }
.edit-product-card > .edit-field { margin: 12px 0 0; }
.custom-price-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.custom-price-fields .edit-field { margin-bottom: 0; }
.product-add { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.product-add > label, .product-add > select { grid-column: 1 / -1; margin: 0; min-width: 0; }
.product-add > button { min-height: 48px; }
.product-summary { margin: 18px 0 12px; display: grid; gap: 10px; }
.product-summary > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.product-summary dt { color: #586b61; font-size: 14px; }
.product-summary dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media(max-width:380px) { .edit-product-card { padding: 12px; }.product-add { grid-template-columns: minmax(0,1fr); }.product-summary > div { flex-wrap: wrap; gap: 4px; } }