/* SP-344.A: Calendar diff overlay
   Theme: uses var(--..., fallback) pattern per SP-337 conventions.
   Tile modifier outlines are color-semantic (green/red/amber) and intentionally
   do not vary with theme — they represent diff status, not brand chrome. */

/* ── Banner ─────────────────────────────────────────────────────────────── */

.calendar-diff-overlay-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  margin: 0 0 8px 0;
  background: var(--bg-secondary, #fff4e6);
  color: var(--text-primary, #1a1a1a);
  border: 1px solid #DD5100;
  border-radius: 6px;
  font-size: 14px;
  flex-wrap: wrap;
}

.calendar-diff-overlay-banner-label {
  font-weight: 600;
  color: #DD5100;
}

.calendar-diff-overlay-banner-counts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.calendar-diff-overlay-count {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

.calendar-diff-overlay-count--added {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
  border: 1px solid #4caf50;
}

.calendar-diff-overlay-count--removed {
  background: rgba(214, 69, 69, 0.15);
  color: #d64545;
  border: 1px solid #d64545;
}

.calendar-diff-overlay-count--modified {
  background: rgba(255, 193, 7, 0.15);
  color: #b38600;
  border: 1px solid #ffc107;
}

.calendar-diff-overlay-count--moved {
  background: rgba(221, 81, 0, 0.15);
  color: #DD5100;
  border: 1px solid #DD5100;
}

/* F-036 (2026-04-25): Regenerate-mode banner counts. The reviewer fully
   replaced the deliverable set, so we show before/after totals + the net
   delta instead of the misleading "everything was added" raw counts. */
.calendar-diff-overlay-count--from,
.calendar-diff-overlay-count--to {
  background: rgba(0, 0, 0, 0.05);
  color: #444;
  border: 1px solid #ccc;
}

.calendar-diff-overlay-count--delta {
  background: rgba(221, 81, 0, 0.12);
  color: #DD5100;
  border: 1px solid #DD5100;
  font-weight: 600;
}

.calendar-diff-overlay-count--post-regen {
  background: rgba(76, 175, 80, 0.12);
  color: #2e7d32;
  border: 1px dashed #4caf50;
  font-style: italic;
}

.calendar-diff-overlay-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-diff-overlay-btn {
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: filter 0.15s, background 0.15s;
}

.calendar-diff-overlay-btn--accept {
  background: #4caf50;
  color: #fff;
  border-color: #3a9e3e;
}

.calendar-diff-overlay-btn--accept:hover {
  filter: brightness(1.08);
}

.calendar-diff-overlay-btn--reject {
  background: #d64545;
  color: #fff;
  border-color: #b93a3a;
}

.calendar-diff-overlay-btn--reject:hover {
  filter: brightness(1.08);
}

/* F-036 (2026-04-25): "Show details" opens the rich-summary modal on top
   of the calendar diff overlay. Brand orange to read as a primary CTA but
   visually distinct from Accept (green) / Reject (red) — it's not a
   decision, it's an inspection. */
.calendar-diff-overlay-btn--details {
  background: #fff;
  color: #DD5100;
  border-color: #DD5100;
}

.calendar-diff-overlay-btn--details:hover {
  background: #fff6ee;
}

.calendar-diff-overlay-dismiss {
  background: transparent;
  border: 1px solid var(--border-default, #cccccc);
  color: var(--text-primary, #1a1a1a);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}

.calendar-diff-overlay-dismiss:hover {
  background: var(--bg-tertiary, #f0f0f0);
}

/* ── Tile modifier classes ───────────────────────────────────────────────
   Applied alongside existing .cal-event + platform class.
   The ::before badge requires position: relative on the host element.    */

.cal-event.diff-tile--added {
  outline: 2px solid #4caf50;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3);
  position: relative;
}

.cal-event.diff-tile--added::before {
  content: '+';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #4caf50;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  z-index: 2;
}

.cal-event.diff-tile--removed {
  outline: 2px dashed #d64545;
  outline-offset: 1px;
  opacity: 0.55;
  text-decoration: line-through;
  position: relative;
}

.cal-event.diff-tile--removed::before {
  content: '\2212'; /* minus sign */
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #d64545;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  z-index: 2;
}

.cal-event.diff-tile--modified {
  outline: 2px solid #ffc107;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.3);
  position: relative;
}

.cal-event.diff-tile--modified::before {
  content: '\007E'; /* tilde */
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #ffc107;
  color: #1a1a1a;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  z-index: 2;
}

/* SP-358: Moved-from (original date, dimmed ghost) and moved-to (proposed new
   date, highlighted) tiles. Appear in pairs when a reviewer drags an event. */

/* F-036: Moved-from tiles are HIDDEN by default to keep the calendar legible.
   They reveal as a faint translucent ghost ONLY when the reviewer hovers the
   paired moved-to tile. JS toggles .is-hover-revealed on hover and draws the
   .move-pair-connector dashed line between the two tiles. */
.cal-event.diff-tile--moved-from {
  outline: 2px dashed #DD5100;
  outline-offset: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  position: relative;
}

.cal-event.diff-tile--moved-from.is-hover-revealed {
  opacity: 0.35;
}

.cal-event.diff-tile--moved-from::before {
  content: '\2192'; /* rightwards arrow */
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #DD5100;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 140ms ease;
}
.cal-event.diff-tile--moved-from.is-hover-revealed::before {
  opacity: 1;
}

/* Hover-driven connector line — JS draws an SVG into the calendar root and
   removes it on mouseout. Styled here so the line tones with the brand
   accent without needing inline styles. */
.move-pair-connector {
  pointer-events: none;
}

.cal-event.diff-tile--moved-to {
  outline: 2px solid #DD5100;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(221, 81, 0, 0.35);
  position: relative;
}

.cal-event.diff-tile--moved-to::before {
  content: '\2190'; /* leftwards arrow — "arrived here" */
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  background: #DD5100;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  line-height: 14px;
  text-align: center;
  z-index: 2;
}

/* SP-360 (UX): calendar comparison toggle in cal-nav-right */
.cal-compare-toggle {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid #DD5100;
  border-radius: 4px;
  color: #DD5100;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.15s;
  white-space: nowrap;
}
.cal-compare-toggle:hover {
  background: rgba(221, 81, 0, 0.1);
}
.cal-compare-toggle--on {
  background: #DD5100;
  color: #fff;
}
.cal-compare-toggle--on:hover {
  opacity: 0.85;
  background: #DD5100;
}
.cal-compare-toggle.hidden {
  display: none !important;
}