/* Reservation calendar — refined "clean + premium" theme.
   Goal: make vis-timeline stop looking like a default boxed table. We soften
   every internal border, give the header + parcel rail subtle surfaces, round
   and lift the whole panel, and render the reservation bars as premium pills
   (flat tinted fill, status dot, strong left accent) — no glow / translucency
   noise. Status hues stay in lock-step with PresentationStatusPalette so the
   legend matches. Everything scoped under .campinos-cal. */

/* ===================================== unified shell (toolbar + grid + legend)
   One rounded, lifted card wrapping the whole calendar surface. The toolbar is
   its header, the grid the body, the legend its footer — each a seamless
   section divided by a hairline, not a separate box. */
.cal-shell {
  border:1px solid #e6ebf2;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 16px 40px -24px rgba(15,23,42,.22);
  overflow:hidden;                 /* clip every section to the rounded corners */
}
.dark .cal-shell {
  border-color:#1f2a3d;
  background:#0b1220;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 50px -28px rgba(0,0,0,.8);
}

/* grid body — no frame of its own now; the shell provides it.
   min-height is load-bearing: the host must NOT be 0px tall when vis-timeline
   is constructed (auto height is 0 before the timeline paints its content), or
   vis comes up in a degenerate state — visible but with its .vis-loading-screen
   overlay stuck on top, eating hover + click until the next update(). A non-zero
   min-height makes construction measure a real box. */
.campinos-cal {
  background:transparent;
  height:auto !important;          /* hug the timeline, not the inline 70vh */
  min-height:240px;
  max-height:70vh;
  overflow:auto;
}
/* This calendar receives its full dataset synchronously in init() — there is no
   async item load — so the built-in loading overlay serves no purpose and must
   never block pointer events on the bars. */
.campinos-cal .vis-loading-screen { display:none !important; }

/* ============================================== kill vis-timeline's hard frame
   vis ships borders on every panel + heavy minor gridlines; that is the boxy
   look. Neutralise them, then add back only soft, intentional separators. */
.campinos-cal .vis-timeline { border:none; }
.campinos-cal .vis-panel.vis-center,
.campinos-cal .vis-panel.vis-left,
.campinos-cal .vis-panel.vis-right,
.campinos-cal .vis-panel.vis-top,
.campinos-cal .vis-panel.vis-bottom { border-color:#eef2f7; }
.campinos-cal .vis-time-axis .vis-grid.vis-vertical { border-color:#f1f5f9; }     /* day columns — barely there */
.campinos-cal .vis-foreground .vis-group { border-bottom:1px solid #f1f5f9; }     /* row separators */
.campinos-cal .vis-foreground .vis-group:last-child { border-bottom:none; }

/* Uniform, roomier rows: floor every CENTER-panel group + its label to the same
   height so empty parcel rows are as tall as ones holding a reservation (vis
   only grows rows that contain an item, which otherwise leaves the labels
   bunched). MUST be scoped to .vis-panel.vis-center — an unscoped
   ".vis-background .vis-group" also matches the AXIS panel's marker groups
   (.vis-panel.vis-background.vis-vertical .vis-axis .vis-group), inflating them
   so they overlay the items and swallow hover + click. */
.campinos-cal .vis-panel.vis-center .vis-foreground .vis-group,
.campinos-cal .vis-panel.vis-center .vis-background .vis-group,
.campinos-cal .vis-labelset .vis-label { min-height:44px; }

.dark .campinos-cal .vis-panel.vis-center,
.dark .campinos-cal .vis-panel.vis-left,
.dark .campinos-cal .vis-panel.vis-right,
.dark .campinos-cal .vis-panel.vis-top,
.dark .campinos-cal .vis-panel.vis-bottom { border-color:#172132; }
.dark .campinos-cal .vis-time-axis .vis-grid.vis-vertical { border-color:#141e2e; }
.dark .campinos-cal .vis-foreground .vis-group { border-bottom-color:#141e2e; }

/* ===================================================================== header
   The day/month strip across the top + the month label. */
.campinos-cal .vis-panel.vis-top { background:#f8fafc; border-bottom:1px solid #e6ebf2; }
.campinos-cal .vis-time-axis .vis-text { color:#64748b; }
.campinos-cal .vis-time-axis .vis-text.vis-minor { font-size:13px; font-weight:600; color:#334155; padding-top:3px; }
.campinos-cal .vis-time-axis .vis-text.vis-major { font-size:12px; font-weight:700; color:#475569; letter-spacing:.02em; text-transform:capitalize; }

.dark .campinos-cal .vis-panel.vis-top { background:#0d1626; border-bottom-color:#1f2a3d; }
.dark .campinos-cal .vis-time-axis .vis-text { color:#94a3b8; }
.dark .campinos-cal .vis-time-axis .vis-text.vis-minor { color:#e2e8f0; }
.dark .campinos-cal .vis-time-axis .vis-text.vis-major { color:#cbd5e1; }

/* =============================================================== parcel rail */
.campinos-cal .vis-panel.vis-left { background:#f8fafc; border-right:1px solid #e6ebf2; }
.campinos-cal .vis-labelset .vis-label .vis-inner { font-weight:500; font-size:13px; color:#475569; padding:0 14px; }
.dark .campinos-cal .vis-panel.vis-left { background:#0d1626; border-right-color:#1f2a3d; }
.dark .campinos-cal .vis-labelset .vis-label .vis-inner { color:#94a3b8; }

/* ============================================================ weekend shading */
.campinos-cal .vis-time-axis .vis-grid.vis-saturday,
.campinos-cal .vis-time-axis .vis-grid.vis-sunday { background:#f8fafc; }
.dark .campinos-cal .vis-time-axis .vis-grid.vis-saturday,
.dark .campinos-cal .vis-time-axis .vis-grid.vis-sunday { background:#0e1a30; }

/* =========================================================== reservation pills
   Flat tinted fill + 4px left accent + a status dot. Each status declares
   --bg / --tx / --ac; light & dark only re-declare those three. */
.campinos-cal .vis-item.res {
  --bg:#eef2ff; --tx:#1e293b; --ac:#6366f1;
  background:var(--bg);
  color:var(--tx);
  border:1px solid var(--ac);
  border-left-width:4px;
  border-radius:9px;
  font-size:12px;
  font-weight:600;
  box-shadow:0 1px 1px rgba(15,23,42,.05);
}
.campinos-cal .vis-item.res .vis-item-content { padding:5px 11px; letter-spacing:-0.01em; display:flex; align-items:center; }
.campinos-cal .vis-item.res .vis-item-content::before {
  content:""; width:7px; height:7px; border-radius:50%; margin-right:7px; flex:none;
  background:var(--ac); box-shadow:0 0 0 2px color-mix(in srgb, var(--ac) 25%, transparent);
}
.campinos-cal .vis-item.res:hover { filter:brightness(1.05); }
.campinos-cal .vis-item.res.vis-selected { box-shadow:0 0 0 2px var(--ac), 0 4px 10px -4px rgba(15,23,42,.3); }

/* status palette — light */
.campinos-cal .s-Draft           { --bg:#f5f3ff; --tx:#5b21b6; --ac:#8b5cf6; }
.campinos-cal .s-Confirmed       { --bg:#faf5ff; --tx:#7e22ce; --ac:#a855f7; }
.campinos-cal .s-DueToday        { --bg:#f3e8ff; --tx:#6b21a8; --ac:#9333ea; }
.campinos-cal .s-OnSiteUnpaid    { --bg:#e0f2fe; --tx:#075985; --ac:#0284c7; border-left-style:dashed; }
.campinos-cal .s-OnSitePaid      { --bg:#e0f2fe; --tx:#075985; --ac:#0ea5e9; }
.campinos-cal .s-AwaitingBilling { --bg:#fef3c7; --tx:#92400e; --ac:#f59e0b; }
.campinos-cal .s-Settled         { --bg:#d1fae5; --tx:#065f46; --ac:#10b981; }
.campinos-cal .s-Departed        { --bg:#f1f5f9; --tx:#475569; --ac:#94a3b8; }
.campinos-cal .s-NoShow          { --bg:#ffe4e6; --tx:#9f1239; --ac:#f43f5e; }
.campinos-cal .s-Cancelled       { --bg:#fce7f3; --tx:#9d174f; --ac:#ec4899; text-decoration:line-through; }
.campinos-cal .s-Block           { --ac:#ef4444; --tx:#991b1b;
                                   background:repeating-linear-gradient(45deg,#fee2e2,#fee2e2 6px,#fecaca 6px,#fecaca 12px); }

/* status palette — dark (deeper fills, light text, bright accent) */
.dark .campinos-cal .s-Draft           { --bg:#2e1065; --tx:#ddd6fe; --ac:#a78bfa; }
.dark .campinos-cal .s-Confirmed       { --bg:#3b0764; --tx:#f0abfc; --ac:#d946ef; }
.dark .campinos-cal .s-DueToday        { --bg:#4c1d95; --tx:#e9d5ff; --ac:#c084fc; }
.dark .campinos-cal .s-OnSiteUnpaid    { --bg:#0c4a6e; --tx:#bae6fd; --ac:#38bdf8; }
.dark .campinos-cal .s-OnSitePaid      { --bg:#0c4a6e; --tx:#bae6fd; --ac:#38bdf8; }
.dark .campinos-cal .s-AwaitingBilling { --bg:#78350f; --tx:#fde68a; --ac:#fbbf24; }
.dark .campinos-cal .s-Settled         { --bg:#064e3b; --tx:#a7f3d0; --ac:#34d399; }
.dark .campinos-cal .s-Departed        { --bg:#1e293b; --tx:#94a3b8; --ac:#64748b; }
.dark .campinos-cal .s-NoShow          { --bg:#4c0519; --tx:#fecdd3; --ac:#fb7185; }
.dark .campinos-cal .s-Cancelled       { --bg:#500724; --tx:#fbcfe8; --ac:#f472b6; }
.dark .campinos-cal .s-Block           { --ac:#ef4444; --tx:#fecaca;
                                         background:repeating-linear-gradient(45deg,#3a1414,#3a1414 6px,#481919 6px,#481919 12px); }

/* ========================================= current-time: top pin + fading line */
.campinos-cal .vis-current-time {
  width:2px;
  background:linear-gradient(180deg, #f43f5e 0%, rgba(244,63,94,.4) 32%, rgba(244,63,94,0) 72%);
}
.campinos-cal .vis-current-time::before {
  content:""; position:absolute; top:0; left:-3px;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:7px solid #f43f5e;
}

/* =================================================================== hover card */
.campinos-cal-card { position:fixed; z-index:50; width:300px; background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 12px 32px -10px rgba(15,23,42,.3); padding:12px 14px; font-size:13px; pointer-events:none; }
.campinos-cal-card h4 { margin:0 0 6px; font-size:14px; }
.dark .campinos-cal-card { background:#0f172a; border-color:#1e293b; color:#e2e8f0; }