/* ===================== Owners Calendar (SCOPED) ===================== */
/* Everything here only affects the Owners Portal calendar panel */
#panel-cal {
  --line:#e5e7eb;
  --brand:#6366f1;
  --muted:#64748b;

  /* Arrival/Departure label colors for bottom chips */
  --arr-bg:#ecfdf5;    --arr-border:#10b981;  --arr-text:#065f46;
  --dep-bg:#fffbeb;    --dep-border:#f59e0b;  --dep-text:#7c2d12;
}

/* Two-month grid container (owners calendar) */
#panel-cal .cal-wrap{
  display:grid; grid-template-columns:1fr; gap:18px;
  padding:0.5rem 0.75rem 1rem;
}
@media (min-width:900px){
  #panel-cal .cal-wrap{ grid-template-columns:1fr 1fr; }
}
#panel-cal .cal-hdr{
  display:flex; align-items:center; justify-content:center;
  font-weight:700; margin:.25rem 0 .5rem;
}

/* Calendar grid & headers */
#panel-cal .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
#panel-cal .cal-dow,
#panel-cal .cal-cell{ background:#fff; min-height:92px; }
#panel-cal .cal-dow{ padding:6px 8px; font-size:12px; color:var(--muted); background:#f3f4f6; }
#panel-cal .cal-cell{ position:relative; cursor:pointer; }
#panel-cal .cal-date{ position:absolute; top:6px; right:8px; font-size:12px; color:var(--muted); }

/* Selection styles */
#panel-cal .sel-start, #panel-cal .sel-end{
  outline:2px solid var(--brand); outline-offset:-2px;
}
#panel-cal .in-range{
  background:linear-gradient(0deg, rgba(99,102,241,0.08), rgba(99,102,241,0.08));
}

/* Marks container used by JS (<b>,<i>,<u>) */
#panel-cal .cal-cell .marks b,
#panel-cal .cal-cell .marks i,
#panel-cal .cal-cell .marks u{
  display:inline-block; width:auto; margin:2px 2px 0 0; font-size:11px;
  padding:1px 6px; border-radius:6px; border:1px solid rgba(0,0,0,.08);
}
#panel-cal .cal-cell .marks b{ /* booking badge (teal) */
  border-color: rgba(20,184,166,.35);
  background:   rgba(20,184,166,.12);
  color:#0f766e; font-weight:600;
}
#panel-cal .cal-cell .marks i{ /* blackout badge (coral/gray) */
  border-color: rgba(239,68,68,.35);
  background:   rgba(239,68,68,.12);
  color:#991b1b; font-style:normal; /* avoid italics */
}
#panel-cal .cal-cell .marks u{ /* note badge */
  border-color:#c7d2fe;
  background:#eef2ff;
  color:#3730a3;
  text-decoration:none;
}

/* Optional “name chips” if your JS renders them */
#panel-cal .cell-names{
  position:absolute; left:6px; right:6px; bottom:4px;
  display:flex; flex-wrap:wrap; gap:4px;
}
#panel-cal .name{
  font-size:11px; padding:1px 6px; border-radius:999px; border:1px solid var(--line);
  white-space:nowrap; max-width:calc(50% - 4px); overflow:hidden; text-overflow:ellipsis;
}
#panel-cal .name-arr{ background:var(--arr-bg); border-color:var(--arr-border); color:var(--arr-text); }
#panel-cal .name-dep{ background:var(--dep-bg); border-color:var(--dep-border); color:var(--dep-text); }
#panel-cal .name-more{ background:#f1f5f9; border-color:#cbd5e1; color:#334155; }

/* Note icon button (📝) + popover – SCOPED */
#panel-cal .note-ico{
  position:absolute; top:6px; left:24px;
  font-size:14px; line-height:1; background:none; border:none; padding:0;
  cursor:pointer; display:none;
}
#panel-cal .has-note .note-ico{ display:block; }

#panel-cal .note-pop{ position:absolute; top:20px; right:4px; z-index:20; width:240px; background:#fff; border:1px solid var(--line);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:8px; }
#panel-cal .note-pop h5{ margin:0 0 6px; font-size:12px; font-weight:700; }
#panel-cal .note-row{ display:flex; gap:6px; align-items:flex-start; justify-content:space-between; margin:4px 0; font-size:12px; }
#panel-cal .note-text{ flex:1; white-space:pre-wrap; }
#panel-cal .note-del{ color:#b91c1c; font-size:11px; border:0; background:none; cursor:pointer; padding:0; }

/* Actions row buttons */
#panel-cal .cal-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:.5rem 0; }
#panel-cal .cal-msg{ margin-left:auto; font-size:13px; color:#475569; }

/* Safety: prevent legacy/global CSS from leaking in */
#panel-cal .legend,
#panel-cal .lg { display:none !important; }

/* ===================== PUBLIC REQUEST PORTAL (SCOPED) ===================== */
/* Support BOTH the modern .tp2-* structure and the older cal-wrap/cal-grid structure */

/* Base tokens */
#rqCalendar { --line:#e5e7eb; --muted:#9aa6b2; --ink:#1f2937; }

/* Outer wrapper */
#rqCalendar .tp2-cal-wrap{display:grid; gap:1rem; max-width:920px; margin:1rem auto;}

/* Two-month grid wrapper (new + fallback) */
#rqCalendar .tp2-cal-grids,
#rqCalendar .cal-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
@media (max-width: 820px){
  #rqCalendar .tp2-cal-grids,
  #rqCalendar .cal-wrap{ grid-template-columns:1fr; }
}

/* Month card headers (new + fallback) */
#rqCalendar .tp2-cal-month,
#rqCalendar .cal-hdr{
  display:flex; align-items:center; justify-content:center;
  padding:.75rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line); background:#fafafa;
  border-top-left-radius:12px; border-top-right-radius:12px;
}

/* Month card body/grid (new + fallback) */
#rqCalendar .tp2-cal,
#rqCalendar .cal-grid{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  overflow:hidden;
}

/* Week header row (new + fallback) */
#rqCalendar .tp2-cal-week,
#rqCalendar .cal-dow-row{
  display:grid; grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid var(--line); background:#fcfcfd;
}
#rqCalendar .tp2-cal-week span,
#rqCalendar .cal-dow{
  font-size:.78rem; color:var(--muted); text-align:center; padding:.4rem 0;
}

/* Day grid (new + fallback) */
#rqCalendar .tp2-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
#rqCalendar .cal-grid .cal-cell{ display:flex; align-items:center; justify-content:center; }

/* Day cell (new + fallback) */
#rqCalendar .tp2-day,
#rqCalendar .cal-cell{
  height:44px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative; cursor:pointer; user-select:none;
  font-weight:600; color:var(--ink); background:#fff;
}
#rqCalendar .tp2-day:nth-child(7n),
#rqCalendar .cal-cell:nth-child(7n){ border-right:none; }

/* Selection ring (new + fallback) */
#rqCalendar .tp2-day.is-selected{ background:#dbeafe; }
#rqCalendar .tp2-day.is-range-start::after,
#rqCalendar .tp2-day.is-range-end::after,
#rqCalendar .cal-cell.sel-start::after,
#rqCalendar .cal-cell.sel-end::after{
  content:""; position:absolute; inset:4px; border:2px solid #60a5fa; border-radius:10px; pointer-events:none;
}
#rqCalendar .cal-cell.sel{ background: linear-gradient(0deg, rgba(99,102,241,0.08), transparent); }

/* CTA row (if present) */
#rqCalendar .tp2-cal-cta{display:flex; gap:.75rem; align-items:center; justify-content:flex-end;}
#rqCalendar .tp2-badge{font:600 .9rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial; padding:.45rem .65rem; border-radius:999px; background:#f1f5f9; color:#334155;}
#rqCalendar .tp2-cta{display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1rem; border-radius:10px; border:1px solid #dbe2ea; background:#eff6ff; color:#0b4a79; font-weight:700; cursor:pointer;}
#rqCalendar .tp2-cta:disabled{opacity:.5; cursor:not-allowed;}
#rqCalendar .tp2-ghost{padding:.55rem .85rem; border-radius:10px; border:1px dashed #cbd5e1; background:#fff; color:#475569; cursor:pointer;}

/* ===== Request Portal: fallback for older calendar markup (.cal-grid / .dow / .cal-cell) ===== */
#rqCalendar .cal-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
@media (max-width:820px){
  #rqCalendar .cal-wrap{ grid-template-columns:1fr; }
}

#rqCalendar .cal-grid{
  /* make the month a 7-column grid */
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  overflow:hidden;
}

/* the weekday header cells that your JS creates as .dow */
#rqCalendar .dow{
  text-align:center;
  font-size:.78rem;
  color:var(--muted);
  padding:.4rem 0;
  background:#fcfcfd;
  border-bottom:1px solid var(--line);
}

/* day cells */
#rqCalendar .cal-cell{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  color:#1f2937;
  background:#fff;
}

/* remove right border on last column (works across header + each days row) */
#rqCalendar .cal-grid > :nth-child(7n){ border-right:none; }

/* selection ring compatibility with older markup */
#rqCalendar .cal-cell.sel{
  background: linear-gradient(0deg, rgba(96,165,250,0.14), transparent);
}
#rqCalendar .cal-cell.sel-start::after,
#rqCalendar .cal-cell.sel-end::after{
  content:"";
  position:absolute;
  inset:4px;
  border:2px solid #60a5fa;
  border-radius:10px;
  pointer-events:none;
}

/* optional month title (if you render .cal-hdr above each .cal-grid) */
#rqCalendar .cal-hdr{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.75rem;
  font-weight:600;
  color:#1f2937;
  border-bottom:1px solid var(--line);
  background:#fafafa;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}