:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#7c5cff;
  --accent-2:#00d4ff;
  --glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #071021 0%, #081223 60%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
}

.app{max-width:1200px;margin:18px auto;padding:12px}
.hero{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.hero h1{font-size:28px;margin:0}
.subtitle{color:var(--muted);margin:0}

.viewer{display:grid;grid-template-columns:200px 1fr 240px;gap:12px;align-items:start}
.image-wrap{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:6px}
.image-wrap img{display:block;max-width:100%;height:auto;border-radius:8px;filter:drop-shadow(0 10px 30px rgba(2,6,23,0.6))}
.overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

.day-controls{display:flex;justify-content:center;gap:8px;margin-top:12px}
.day-btn{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#e6eef6;cursor:pointer}
.day-btn.active{
  background: #ffe6b3;
  color: #3a2320;
  border-color: #a05a2c;
  font-weight: bold;
  box-shadow: 0 2px 8px #0002;
}

/* Unavailable region appearance: make dim and dark so they recede visually.
   For stronger effect (e.g., when a day like Fri is selected and many are booked)
   we'll apply a deeper darkening that reduces saturation and increases opacity.
*/
.region.unavailable{
  /* very dark neutral fill; keep a hair of tint from the hatch via mix-blend when present */
  fill:#060608 !important;
  stroke:#000000 !important;
  /* high opacity so the region appears nearly black */
  opacity:0.98 !important;
  /* desaturate underlying hatch/pattern */
  filter:grayscale(100%) contrast(0.85) brightness(0.6) !important;
  transition:opacity 120ms, filter 120ms;
}
.region.unavailable:hover{
  /* reveal slightly on hover so users can still see details */
  opacity:1 !important;
  filter:grayscale(0%) contrast(1) brightness(1) !important;
}

/* Booked regions: keep very dark and non-interactive when filtering by day */
.region.booked{fill:#000000 !important;stroke:#000000 !important;opacity:1 !important;filter:none !important;cursor:default}
.region.booked:hover{opacity:1}

/* Pending reservations: render as solid gray and non-interactive */
.region.pending{fill:#6b6b6b !important;stroke:#4d4d4d !important;opacity:1 !important;filter:none !important;cursor:default}
.region.pending:hover{opacity:1}

.panel{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}

.receipts{padding:12px}
.receipt-list{list-style:none;padding:0;margin:0;max-height:540px;overflow:auto}
.receipt-list li{padding:10px;border-radius:8px;margin-bottom:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);display:flex;flex-direction:column;gap:6px}
.receipt-list li .r-top{display:flex;justify-content:space-between;align-items:center}
.receipt-list li .r-name{font-weight:700;color:var(--accent-2)}
.receipt-list li .r-meta{font-size:13px;color:var(--muted)}
/* status badges for receipts */
.receipt-badge{display:inline-block;margin-left:10px;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.badge-booked{background:#071017;color:#ffdca3;border:1px solid rgba(0,0,0,0.2)}
.badge-pending{background:#3a3a3a;color:#fff;border:1px solid rgba(255,255,255,0.03)}
.badge-unknown{background:rgba(255,255,255,0.04);color:var(--muted);border:1px solid rgba(255,255,255,0.03)}
.receipt-list li.hint{color:var(--muted);font-style:italic}
.panel h2{margin-top:0}
.selected-list{list-style:none;padding:0;margin:0;max-height:300px;overflow:auto}
.selected-list li{padding:8px;border-radius:8px;margin-bottom:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);display:flex;justify-content:space-between;align-items:center}
.hint{color:var(--muted);font-style:italic}
.controls{margin-top:12px}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04222f;border:none;padding:10px 12px;border-radius:8px;cursor:pointer}
.btn:active{transform:translateY(1px)}

/* Details card for region info */
.details{margin-top:14px;background:var(--glass);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.details h3{margin:0 0 8px 0}
.details .details-body{color:#d8e6f2}
.details .muted{color:var(--muted)}

.capacity{font-size:15px;margin-bottom:8px}

/* Box note shown under capacity in the details panel */
.box-note{color:#ff4d4d;font-weight:600;margin-top:6px;margin-bottom:6px}

.amenities{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.amenity-list{display:flex;flex-wrap:wrap;gap:8px}
.amenity-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.03);cursor:pointer;border:1px solid rgba(255,255,255,0.03);font-size:14px;color:#e9f6fb}
.amenity-item::before{content:'';width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.02);display:inline-block}
.amenity-item.selected{background:linear-gradient(90deg, rgba(0,212,255,0.12), rgba(124,92,255,0.08));border-color:rgba(0,212,255,0.18)}
.amenity-item.selected::before{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:rgba(0,0,0,0.08)}

.price-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;border-top:1px dashed rgba(255,255,255,0.03)}
.price{font-weight:700;color:var(--accent-2)}

/* Booking form */
.booking-btn{display:inline-block;margin-top:12px;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04222f;border:none;cursor:pointer}
.booking-form{margin-top:12px;padding:12px;border-radius:8px;background:rgba(0,0,0,0.12);border:1px solid rgba(255,255,255,0.03)}
.booking-form label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.booking-form input, .booking-form select{width:100%;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#e6eef6}
.booking-form .row{display:flex;gap:8px}
.booking-form .row .col{flex:1}
.confirmation{margin-top:12px;padding:12px;border-radius:8px;background:linear-gradient(90deg,rgba(0,212,255,0.06),rgba(124,92,255,0.06));color:#02262a;font-weight:700}

.availability{display:flex;gap:8px;margin-top:10px}
.avail-btn{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);cursor:pointer}
.avail-btn.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#02262a;border-color:rgba(124,92,255,0.12)}

.reservation-controls{margin-top:12px}
.reservation-controls .availability{gap:12px}
.reserve-checkbox{width:18px;height:18px}
.reserve-checkbox:disabled{opacity:0.35;cursor:not-allowed}


.tooltip{position:fixed;transform:translate(-50%,-120%);background:rgba(2,6,23,0.96);padding:8px 10px;border-radius:8px;color:var(--accent-2);pointer-events:none;border:1px solid rgba(124,92,255,0.12);font-weight:600;transition:opacity 120ms,transform 120ms;opacity:0}
.tooltip[data-visible="true"]{opacity:1;transform:translate(-50%,-150%) scale(1.02)}

.region{fill:url(#hatch);stroke:rgba(124,92,255,0.22);stroke-width:2;pointer-events:all;cursor:pointer;transition:fill 120ms,stroke 120ms,opacity 120ms;opacity:0.75}
.region:hover{fill:rgba(124,92,255,0.12);stroke:rgba(0,212,255,0.6);opacity:0.9}
.region.selected{
  /* Bright solid yellow for clear visibility */
  fill: #ffd400 !important; /* vivid yellow */
  stroke: #b37f00 !important; /* slightly darker yellow/brown stroke */
  stroke-width: 2 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Available regions when filtering by day: solid green to indicate selectable/available */
.region.available{
  fill: #20a04a !important; /* pleasant green */
  stroke: #127033 !important; /* darker green stroke */
  stroke-width: 2 !important;
  opacity: 1 !important;
  filter: none !important;
}
.region.available:hover{
  fill: #28b55b !important;
  stroke: #0f5a2a !important;
}

/* When an available (green) region is selected, show it in yellow for high contrast */
.region.available.selected{
  fill: #ffd400 !important; /* vivid yellow */
  stroke: #b37f00 !important; /* darker yellow/brown stroke */
  stroke-width: 2 !important;
  opacity: 1 !important;
  filter: none !important;
}
.region.available.selected:hover{
  fill: #ffd400 !important;
  stroke: #b37f00 !important;
}

/* Remote in-use highlight (blue) */
.region.in-use:not(.selected){
  fill:#1d5fff !important;
  stroke:#0b3c99 !important;
  stroke-width:2 !important;
  opacity:1 !important;
  filter:none !important;
}
/* If a region is both selected locally and marked in-use remotely retain selection color */
.region.selected.in-use{
  /* keep yellow styling above; we could add a blue outline if desired */
  box-shadow:0 0 0 2px #1d5fff66;
}

.footer{color:var(--muted);margin-top:22px;text-align:center}

/* fixed copyright badge */
#fixedCopyright{position:fixed;right:14px;bottom:12px;background:linear-gradient(90deg,rgba(0,0,0,0.45),rgba(255,255,255,0.02));padding:8px 10px;border-radius:8px;color:var(--muted);font-size:13px;border:1px solid rgba(255,255,255,0.03)}

@media (max-width:900px){
  .viewer{grid-template-columns:1fr;gap:12px}
  .receipts{order:2}
  .panel{order:3}
}

/* Modal preview styles */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1200;visibility:hidden;opacity:0;transition:opacity 160ms, visibility 160ms}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.6)}
.modal-panel{position:relative;background:var(--card);border-radius:12px;padding:12px;width:min(1000px,94%);max-height:90vh;overflow:auto;box-shadow:0 10px 40px rgba(2,6,23,0.6);display:flex;flex-direction:column}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}
.modal-body{padding:8px 0}
.modal-close{background:transparent;border:none;color:#cfdff0;font-size:18px;cursor:pointer}
.preview-container{display:flex;gap:12px}
.preview-left{flex:0 0 640px}
.map-wrap-preview{position:relative;border:1px solid rgba(255,255,255,0.04);border-radius:8px;overflow:hidden}
.map-wrap-preview img{display:block;width:100%;height:auto}
.map-wrap-preview svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.preview-right{flex:1;color:#d8e6f2;padding:8px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#021a1c;padding:8px 12px;border-radius:8px;border:none}

/* Ensure modal print uses the modal content cleanly.
   Use display rules (not visibility) so non-modal content doesn't reserve space
   and force the preview to stack vertically to avoid horizontal clipping on page.
*/
@media print{
  /* hide everything first */
  body > * { display: none !important; }

  /* show only the modal (and its contents) when visible */
  .modal[aria-hidden="false"] { display: block !important; position: static !important; overflow: visible !important; }
  .modal[aria-hidden="false"] * { display: block !important; visibility: visible !important; }

  /* make the modal panel occupy the full printable page and remove chrome */
  /* Pin the modal to the top-left of the printable page so it appears on page 1 */
  .modal[aria-hidden="false"] { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; }
  .modal-panel { box-shadow: none !important; border-radius: 0 !important; width: 100% !important; max-height: none !important; padding: 8mm !important; margin: 0 !important; background: white !important; }

  /* hide interactive UI elements that shouldn't appear in the PDF */
  #modalClose, #modalClose2, #modalDownload, .modal-footer, .modal-close, .no-print { display: none !important; }

  /* layout preview horizontally so map and details sit side-by-side and fit on one page */
  .preview-container { display: flex !important; flex-direction: row !important; gap: 12px !important; align-items: flex-start !important; page-break-inside: avoid !important; }
  .preview-left { flex: 0 0 62% !important; max-width: 62% !important; }
  .preview-right { flex: 1 1 36% !important; max-width: 36% !important; }
  .map-wrap-preview { border: none !important; }

  /* constrain image height so it fits printable area; scale down as needed */
  /* Constrain image height to printable area so details fit beside it */
  .map-wrap-preview img { width: 100% !important; height: auto !important; max-height: calc(100vh - 120px) !important; object-fit: contain !important; }
  .map-wrap-preview svg { width: 100% !important; height: auto !important; }

  /* ensure modal title and details are readable */
  #modalTitle { font-size: 18pt !important; font-weight: 700 !important; margin-bottom: 8px !important; color: #111 !important; }
  .preview-right { color: #111 !important; background: transparent !important; }

  /* remove any fixed-positioned badges that might overlap */
  #fixedCopyright { display: none !important; }
}