/* 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. */

/* Local feature token block (legitimate token-def home; hex here is OK).
   Diff-status colors (added=green, removed=red, modified=amber) are
   feature-semantic and intentionally do NOT track the brand accent — they
   encode review status, not chrome. The "moved" status reuses the brand
   accent. Brand orange routes through canonical --color-accent. */
:root {
  --cd-added:       var(--v-success, #4caf50);  /* diff status: added (green) */
  --cd-added-dark:  color-mix(in srgb, var(--v-success, #4caf50) 78%, #000);  /* added button border */
  --cd-added-deep:  color-mix(in srgb, var(--v-success, #4caf50) 70%, #000);  /* post-regen text */
  --cd-removed:     var(--v-error, #d64545);  /* diff status: removed (red) */
  --cd-removed-dark:color-mix(in srgb, var(--v-error, #d64545) 80%, #000);  /* removed button border */
  --cd-modified:    var(--v-warning, #ffc107);  /* diff status: modified (amber) */
  --cd-modified-txt:color-mix(in srgb, var(--v-warning, #ffc107) 72%, #000);  /* modified count text (AA on tint) */
  --cd-neutral-txt: var(--color-ink-muted, #444);  /* from/to count text (neutral) */
  --cd-neutral-bd:  var(--color-line, #ccc);        /* from/to count border (neutral) */
  --cd-on-status:   var(--color-on-accent, #fff);   /* text/icon on a status fill */
  --cd-ink:         var(--color-ink, #1a1a1a);      /* tilde badge ink on amber */
  --cd-details-hov: var(--rb-orange-tint, #fff6ee); /* details btn hover tint */
  --cd-moved:       var(--color-accent, #DD5100);   /* diff status: moved (brand accent) */
}

/* ── 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(--color-ink, #1a1a1a);
  border: 1px solid var(--color-accent, #DD5100);
  border-radius: var(--radius-sm, 6px);
  font-size: 14px;
  flex-wrap: wrap;
}

.calendar-diff-overlay-banner-label {
  font-weight: 600;
  color: var(--color-accent, #DD5100);
}

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

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

.calendar-diff-overlay-count--added {
  background: color-mix(in srgb, var(--v-success, #4caf50) 15%, transparent);
  color: var(--cd-added);
  border: 1px solid var(--cd-added);
}

.calendar-diff-overlay-count--removed {
  background: color-mix(in srgb, var(--v-error, #d64545) 15%, transparent);
  color: var(--cd-removed);
  border: 1px solid var(--cd-removed);
}

.calendar-diff-overlay-count--modified {
  background: color-mix(in srgb, var(--v-warning, #ffc107) 15%, transparent);
  color: var(--cd-modified-txt);
  border: 1px solid var(--cd-modified);
}

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

/* 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: color-mix(in srgb, var(--text-muted, #999) 12%, transparent);
  color: var(--cd-neutral-txt);
  border: 1px solid var(--cd-neutral-bd);
}

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

.calendar-diff-overlay-count--post-regen {
  background: color-mix(in srgb, var(--v-success, #4caf50) 12%, transparent);
  color: var(--cd-added-deep);
  border: 1px dashed var(--cd-added);
  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: var(--radius-sm, 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: var(--cd-added);
  color: var(--cd-on-status);
  border-color: var(--cd-added-dark);
}

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

.calendar-diff-overlay-btn--reject {
  background: var(--cd-removed);
  color: var(--cd-on-status);
  border-color: var(--cd-removed-dark);
}

.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: var(--color-surface, #fff);
  color: var(--color-accent, #DD5100);
  border-color: var(--color-accent, #DD5100);
}

.calendar-diff-overlay-btn--details:hover {
  background: var(--cd-details-hov);
}

.calendar-diff-overlay-dismiss {
  background: transparent;
  border: 1px solid var(--color-line, #cccccc);
  color: var(--color-ink, #1a1a1a);
  padding: 4px 12px;
  border-radius: var(--radius-sm, 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 var(--cd-added);
  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: var(--cd-added);
  color: var(--cd-on-status);
  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 var(--cd-removed);
  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: var(--cd-removed);
  color: var(--cd-on-status);
  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 var(--cd-modified);
  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: var(--cd-modified);
  color: var(--cd-ink);
  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 var(--cd-moved);
  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: var(--cd-moved);
  color: var(--cd-on-status);
  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 var(--cd-moved);
  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: var(--cd-moved);
  color: var(--cd-on-status);
  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 var(--color-accent, #DD5100);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-accent, #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: var(--color-accent, #DD5100);
  color: var(--cd-on-status);
}
.cal-compare-toggle--on:hover {
  opacity: 0.85;
  background: var(--color-accent, #DD5100);
}
.cal-compare-toggle.hidden {
  display: none !important;
}