/* ============================================================
   calendar.css — The .cal-page and all its children
   This file is ONLY for the white calendar paper.
   Never apply neon/dark UI styles here.
   ============================================================ */

/* ── Page container ───────────────────────────────────────── */
.cal-page {
  background: var(--cal-bg);
  color: var(--cal-txt);
  border-radius: 3px;
  /* Aggressive float shadow — makes the paper glow against dark bg */
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: var(--preview-w);
  transition: height 0.3s;
}

/* ── Photo zone ───────────────────────────────────────────── */
.photo-zone {
  height: var(--photo-h);
  background: #c8d4e0;
  position: relative;
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  overflow: hidden;
  transition: height 0.25s;
}
.photo-zone.gone { height: 0 !important; overflow: hidden; }

.pslot {
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #c8d4e0;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s;
}
.pslot:hover { background: #b8c8d8; }
.pslot.has-img { background: transparent; }

.pslot img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; top: 0; left: 0;
  pointer-events: none;
}

.drop-hint {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; pointer-events: none; padding: 8px;
}
.drop-icon { font-size: 1.1rem; opacity: 0.5; }
.drop-txt {
  font-size: 0.58rem; color: #7a93a8;
  font-weight: 700; text-align: center; line-height: 1.3;
}

/* DPI badge */
.dpi-badge {
  position: absolute; bottom: 5px; right: 5px;
  padding: 2px 6px; border-radius: 3px;
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.04em; pointer-events: none;
  font-family: 'Poppins', sans-serif;
}
.dpi-badge.great { background: #059669; color: white; }
.dpi-badge.good  { background: #0284c7; color: white; }
.dpi-badge.warn  { background: #d97706; color: white; }
.dpi-badge.bad   { background: #dc2626; color: white; }

.dpi-tooltip {
  position: absolute; bottom: 28px; right: 5px;
  background: rgba(0,0,0,0.9); color: white;
  font-size: 0.6rem; padding: 5px 9px; border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap; display: none; pointer-events: none;
  line-height: 1.5;
}
.dpi-badge.warn:hover ~ .dpi-tooltip,
.dpi-badge.bad:hover ~ .dpi-tooltip { display: block; }

.rm-btn {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: white;
  border: none; cursor: pointer; font-size: 0.75rem;
  display: none; align-items: center; justify-content: center;
  font-family: inherit;
}
.pslot.has-img:hover .rm-btn { display: flex; }
.pslot.dragover {
  outline: 2px dashed #3b82f6;
  outline-offset: -3px;
  background: rgba(59,130,246,0.1) !important;
}

/* ── Calendar body ────────────────────────────────────────── */
.cal-body {
  flex: 1; padding: 8px 10px 7px;
  display: flex; flex-direction: column; min-height: 0;
}

.month-hdr { text-align: center; margin-bottom: 5px; flex-shrink: 0; }
.month-name {
  font-family: var(--cal-fh);
  font-size: 1.2rem; font-weight: 800;
  color: var(--cal-txt); letter-spacing: -0.03em; line-height: 1;
}
.month-year {
  font-family: var(--cal-fh);
  font-size: 0.6rem; font-weight: 600;
  color: var(--cal-mut); letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 1px;
}

/* ── Grid ─────────────────────────────────────────────────── */
.cal-grid { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.wk-hdr {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; margin-bottom: 2px; flex-shrink: 0;
}
.wh {
  font-family: var(--cal-fd); font-size: 0.58rem; font-weight: 700;
  color: var(--cal-mut); text-align: center; padding: 1px 0;
  letter-spacing: 0.05em; text-transform: uppercase;
}

.cal-rows {
  flex: 1; display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px; min-height: 0;
}
.cal-row { display: contents; } /* keep for backward compat, cells go direct to cal-rows */

/* Row mode overrides — control row heights via grid-template-rows */
.cal-rows.mode-6 { grid-template-rows: repeat(6, 1fr); }

.cal-rows.mode-5.rows-4 { grid-template-rows: repeat(4, 1fr) 0fr 0fr; }
.cal-rows.mode-5.rows-5 { grid-template-rows: repeat(5, 1fr) 0fr; }
.cal-rows.mode-5.rows-6 { grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr 0.5fr; }

.cal-rows.mode-auto.rows-4 { grid-template-rows: repeat(4, 1fr); }
.cal-rows.mode-auto.rows-5 { grid-template-rows: repeat(5, 1fr); }
.cal-rows.mode-auto.rows-6 { grid-template-rows: repeat(6, 1fr); }

.cell {
  border: 1px solid var(--cal-bdr); border-radius: 2px;
  padding: var(--cal-cp);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cal-bg); transition: background 0.2s;
}
.cell.empty { background: transparent; border-color: transparent; }
.cell.hday { background: var(--cal-hbg); }
.cell.today { border-color: var(--cal-acc); border-width: 1.5px; }

.dnum {
  font-family: var(--cal-fd);
  font-size: var(--cal-dnsize);
  font-weight: var(--cal-dnwt);
  color: var(--cal-txt); line-height: 1;
  text-align: var(--cal-dnalign); width: 100%;
}
.ev {
  font-family: var(--cal-fb);
  font-size: var(--cal-hlsize);
  font-weight: 600; color: var(--cal-htxt);
  line-height: 1.15; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev.moon { color: var(--cal-mut); font-size: 0.65em; }
.ev.more { color: var(--cal-mut); opacity: 0.6; }

/* ── Theme swatches ───────────────────────────────────────── */
.themes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tsw {
  border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: border-color 0.12s;
  aspect-ratio: 3/4; display: flex; flex-direction: column;
}
.tsw.on { border-color: var(--neon-blue); box-shadow: var(--shadow-glow-blue); }
.tsw:hover:not(.on) { border-color: rgba(255,255,255,0.2); }
.tsw-ph { flex: 0 0 32%; }
.tsw-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 2px; }
.tsw-cell { border-radius: 1px; }
.tsw-name { font-size: 0.55rem; font-weight: 700; padding: 2px 3px; text-align: center; }

/* ── Photo layout picker ──────────────────────────────────── */
.pl-picker { display: flex; gap: 5px; }
.pl-opt {
  flex: 1; aspect-ratio: 3/4; border-radius: 7px;
  border: 2px solid rgba(255,255,255,0.08); background: var(--bg-input);
  cursor: pointer; display: flex; flex-direction: column;
  overflow: hidden; transition: border-color 0.12s;
  padding: 3px; gap: 2px;
}
.pl-opt.on { border-color: var(--neon-blue); box-shadow: var(--shadow-glow-blue); }
.pl-opt:hover:not(.on) { border-color: rgba(255,255,255,0.2); }
.pl-ph-row { display: flex; gap: 1px; }
.pl-ph { background: var(--text-muted); opacity: 0.35; border-radius: 2px; flex: 1; height: 22px; }
.pl-cal { flex: 1; background: rgba(255,255,255,0.15); border-radius: 2px; opacity: 0.4; }

/* ── Custom event list items ──────────────────────────────── */
.ev-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-input); border-radius: 6px; padding: 5px 8px;
}
.ev-date { font-size: 0.65rem; color: var(--text-muted); font-weight: 700; min-width: 28px; }
.ev-name { flex: 1; font-size: 0.74rem; color: var(--text-main); }
.ev-rm {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 0.85rem; padding: 0; line-height: 1;
}
.ev-rm:hover { color: #ef4444; }

/* Sprint 3: Weekend colors */
/* Weekend header colors — always use --cal-wknd (independent of cell mode) */
.wk-hdr .wknd-sun, .wk-hdr .wknd-sat { color: var(--cal-wknd); }

/* ── Event labels: bottom-up, full names, auto-shrink ───── */
.cal-events {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  overflow: hidden;
  min-height: 0;
}
.ev {
  font-family: var(--cal-fb);
  font-size: var(--cal-hlsize);
  font-weight: 600;
  color: var(--cal-htxt);
  line-height: 1.2;
  /* No truncation — full names always */
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  hyphens: auto;
}
.ev.moon  { color: var(--cal-mut); }
.ev.more  { color: var(--cal-mut); opacity: 0.6; }

/* ── Photo frame for pan/zoom ────────────────────────────── */
.photo-frame {
  position: absolute;
  width: 100%; height: 100%;
  overflow: hidden;
}
.photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* overridden by applyPhotoAdjustment */
  display: block;
  pointer-events: none;
  transition: transform 0.05s; /* smooth zoom */
}

/* ── Date number row (date + moon inline) ──────────────────── */
.dnum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
}
/* Moon sits in its own corner, number in its own corner */
.dnum-row .dnum { flex: 1; }           /* number takes all remaining space */
.dnum-row .moon-svg { flex-shrink: 0; } /* moon stays its natural size */

/* ── Moon SVG icons ────────────────────────────────────────── */
.moon-svg { flex-shrink: 0; overflow: visible; }

/* Base moon colors — follow text color */
.moon-fill        { fill: var(--cal-txt); }
.moon-stroke      { fill: none; stroke: var(--cal-txt); stroke-width: 1.2; }
.moon-stroke-only { fill: none; stroke: var(--cal-txt); stroke-width: 1.2; }

/* Text/soft modes on colored cells — moon matches cell event color */
.cell.hday-text .moon-fill,
.cell.hday-soft .moon-fill   { fill: var(--cell-color); }
.cell.hday-text .moon-stroke-only,
.cell.hday-soft .moon-stroke-only { stroke: var(--cell-color); }

/* Full mode — always white (holiday and weekend cells) */
.cell.hday-full .moon-fill,
.cell.wknd-full.wknd-sun .moon-fill,
.cell.wknd-full.wknd-sat .moon-fill  { fill: white; }
.cell.hday-full .moon-stroke-only,
.cell.wknd-full.wknd-sun .moon-stroke-only,
.cell.wknd-full.wknd-sat .moon-stroke-only { stroke: white; }

/* ── Uniform circular color pickers ──────────────────────────
   Applies everywhere: sidebar controls + feed source rows     */
input[type=color] {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  cursor: pointer;
  padding: 1px !important;
  background: none !important;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}
input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* ── Weekday header — accommodate long names ──────────────── */
.wh {
  font-family: var(--cal-fd);
  font-size: 0.58rem; font-weight: 700;
  color: var(--cal-mut); text-align: center;
  padding: 1px 1px;
  letter-spacing: 0.02em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Sprint 4: Photo adjustment overlay ─────────────────────── */
.photo-adj-overlay {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 25, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px 8px;
  width: 200px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: all;
  font-family: 'Poppins', sans-serif;
}

.photo-adj-overlay::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15,15,25,0.96);
}

.adj-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.adj-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 26px;
  flex-shrink: 0;
  text-align: right;
}
.adj-row input[type=range] {
  flex: 1;
  accent-color: #1d8cf8;
  height: 3px;
}
.adj-val {
  font-size: 0.6rem;
  color: #1d8cf8;
  font-weight: 700;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.adj-reset {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
  border-radius: 5px;
  font-size: 0.6rem;
  padding: 3px 7px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: center;
  transition: all 0.15s;
  margin-top: 1px;
}
.adj-reset:hover { border-color: #fd5d93; color: #fd5d93; }

/* Photo slot: show adjustment icon on hover when has-img */
.pslot.has-img .adj-hint {
  position: absolute;
  top: 4px; left: 4px;
  background: rgba(0,0,0,0.5);
  color: white;
  border-radius: 4px;
  font-size: 0.6rem;
  padding: 2px 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  font-family: 'Poppins', sans-serif;
}
.pslot.has-img:hover .adj-hint { opacity: 1; }

/* ── Cell color modes — driven by --cell-color set per-cell in JS ─ */

/* ── TEXT mode: colored text/number, white background ── */
.cell.hday-text  .dnum,
.cell.wknd-text.wknd-sun .dnum,
.cell.wknd-text.wknd-sat .dnum { color: var(--cell-color); }

.cell.hday-text .ev  { color: var(--cell-color); }

/* Weekday headers stay colored via --cal-wknd in text mode */
.wknd-sun, .wknd-sat { /* handled by .wk-hdr rules below */ }

/* ── SOFT mode: light tint bg, colored text/number ── */
.cell.hday-soft {
  background: color-mix(in srgb, var(--cell-color, #3b82f6) 12%, var(--cal-bg));
}
.cell.hday-soft .dnum,
.cell.hday-soft .ev  { color: var(--cell-color); }

.cell.wknd-soft.wknd-sun,
.cell.wknd-soft.wknd-sat {
  background: color-mix(in srgb, var(--cell-color, #ef4444) 10%, var(--cal-bg));
}
.cell.wknd-soft.wknd-sun .dnum,
.cell.wknd-soft.wknd-sat .dnum { color: var(--cell-color); }

/* ── FULL mode: solid color bg, white text ── */
.cell.hday-full {
  background: var(--cell-color, #3b82f6);
}
.cell.hday-full .dnum,
.cell.hday-full .ev { color: white; }

.cell.wknd-full.wknd-sun,
.cell.wknd-full.wknd-sat { background: var(--cell-color, #ef4444); }
.cell.wknd-full.wknd-sun .dnum,
.cell.wknd-full.wknd-sat .dnum,
.cell.wknd-full.wknd-sun .ev,
.cell.wknd-full.wknd-sat .ev { color: white; }

/* ── Weekday header weekend coloring (text mode uses --cal-wknd, always) ── */
.wk-hdr .wknd-sun,
.wk-hdr .wknd-sat { color: var(--cal-wknd); }

/* ── Compact adj overlay — zoom only, drag to pan ─────────── */
.photo-adj-overlay {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10,10,20,0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 5px 8px;
  pointer-events: all;
  font-family: 'Poppins', sans-serif;
  /* Positioned at bottom of slot via inline style — overlays the photo */
}
.adj-label {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.adj-overlay input[type=range],
.photo-adj-overlay input[type=range] {
  flex: 1;
  accent-color: #1d8cf8;
  height: 3px;
  min-width: 60px;
}
.adj-val {
  font-size: 0.6rem;
  color: #1d8cf8;
  font-weight: 700;
  width: 26px;
  text-align: right;
  flex-shrink: 0;
}
.adj-reset {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.adj-reset:hover { color: #fd5d93; }

/* ── DPI dot — positioned on photo-zone, not inside slot ──── */
/* Move dot to top-right of the photo-zone container */
.photo-zone { position: relative; }
.dpi-zone-dot {
  position: absolute;
  top: -5px; right: -5px;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--bg-panel, #27293d);
  z-index: 20;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ── Grab cursor when photo loaded ────────────────────────── */
.pslot.has-img { cursor: grab; }
.pslot.has-img:active { cursor: grabbing; }
/* Small drag hint shown on hover */
.pslot.has-img::after {
  content: 'drag to pan · click to zoom';
  position: absolute;
  bottom: 6px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: white; font-size: 0.55rem;
  padding: 2px 7px; border-radius: 10px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.03em;
}

/* ── Sprint 5: Custom Events Popover ──────────────────────── */
.ev-popover {
  position: fixed;
  z-index: 300;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 12px 14px;
  width: 210px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  font-family: 'Poppins', sans-serif;
}
.ev-popover-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.ev-popover-date {
  font-size: 0.7rem; font-weight: 700;
  color: var(--neon-blue, #1d8cf8);
  letter-spacing: 0.04em;
}
.ev-popover-close {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; font-size: 1rem; padding: 0; line-height: 1;
}
.ev-popover-close:hover { color: #fd5d93; }

.ev-popover-list { margin-bottom: 8px; }
.ev-popover-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.ev-popover-item:last-child { border-bottom: none; }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ev-item-name { flex: 1; font-size: 0.72rem; color: rgba(255,255,255,.85); }
.ev-item-del {
  background: none; border: none; color: rgba(255,255,255,.25);
  cursor: pointer; font-size: 0.75rem; padding: 0; line-height: 1;
  flex-shrink: 0;
}
.ev-item-del:hover { color: #fd5d93; }

.ev-add-form { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ev-add-form input[type=text] {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; color: white;
  font-size: 0.75rem; padding: 6px 9px;
  font-family: inherit; outline: none;
  transition: border-color .15s;
}
.ev-add-form input[type=text]:focus { border-color: var(--neon-blue, #1d8cf8); }
.ev-add-form input[type=text]::placeholder { color: rgba(255,255,255,.3); }
.ev-add-row { display: flex; gap: 6px; align-items: center; }
.ev-add-btn {
  flex: 1; background: var(--neon-blue, #1d8cf8);
  border: none; border-radius: 6px; color: white;
  font-size: 0.72rem; font-weight: 700; padding: 6px;
  cursor: pointer; font-family: inherit; transition: opacity .15s;
}
.ev-add-btn:hover { opacity: .85; }

/* ── Custom event cell coloring — mirrors holiday modes ──── */
.cell.custom-ev-text .dnum,
.cell.custom-ev-text .ev { color: var(--cell-color); }

.cell.custom-ev-soft {
  background: color-mix(in srgb, var(--cell-color, #1d8cf8) 12%, var(--cal-bg));
}
.cell.custom-ev-soft .dnum,
.cell.custom-ev-soft .ev { color: var(--cell-color); }

.cell.custom-ev-full { background: var(--cell-color, #1d8cf8); }
.cell.custom-ev-full .dnum,
.cell.custom-ev-full .ev,
.cell.custom-ev-full .moon-fill { color: white; fill: white; }
.cell.custom-ev-full .moon-stroke-only { stroke: white; }

/* ── Month header drag-and-snap ─────────────────────────── */
.month-hdr {
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.1s;
  position: relative;
}
/* Subtle drag indicator — only visible on hover */
.month-hdr::before {
  content: '⠿';
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--cal-mut);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.month-hdr:hover::before { opacity: 0.45; }
.month-hdr:hover { cursor: grab; }

.pslot.has-img:hover::after { opacity: 1; }
/* Don't show hint when overlay is open */
.pslot.has-img:has(.photo-adj-overlay)::after { display: none; }

/* ── DPI badge — hover-only, color-coded pill ─────────── */
.dpi-dot-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 0.58rem;
  font-weight: 700;
  color: white;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.dpi-tooltip {
  display: none; /* shown via JS on hover in future */
  position: absolute;
  right: 0; top: calc(100% + 4px);
  background: rgba(10,10,20,0.92);
  color: white;
  font-size: 0.6rem;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.dpi-page-dot:hover .dpi-tooltip { display: block; }
.dpi-page-dot { pointer-events: all !important; }