/* ============================================================================
   editor.css — WYSIWYG edit-mode chrome for Pressbox.

   Loaded inside any rendered league site. When body has class .edit-mode,
   every element with data-editable shows the green dashed outline + ✎ pencil
   on hover and accepts clicks. Otherwise the site renders normally.

   The halo pattern (white inner ring + dark outer border) makes affordances
   visible against any template background — yellow, grass-green, hardwood,
   navy, white, even the same green as the pencil itself.
   ============================================================================ */

/* ============================================================================
   Accessibility: respect the user's "reduce motion" system setting.
   This file is loaded into every rendered league site, so adding the rule
   here gives every template a11y-compliant motion handling for free.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --pbe-green:        #43a047;
  --pbe-green-deep:   #2e7d32;
  --pbe-purple:       #9333ea;
  --pbe-red:          #e53935;
  --pbe-ink:          #1a2233;
  --pbe-ink-dim:      #5b6b86;
  --pbe-line:         #d4dae3;
  --pbe-card:         #ffffff;
}

/* ============================================================================
   TOP BAR — preview / edit mode toggle (lives in the rendered site's top nav)
   ============================================================================ */

.pbe-modebar {
  position: fixed; bottom: 20px; right: 20px;        /* moved to bottom-right so it never collides with template top bars */
  display: flex; gap: 6px; align-items: center;
  padding: 6px;
  background: rgba(13, 17, 23, 0.96);
  border: 2px solid #ffd54f;                          /* gold border = visible on any background */
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(255, 213, 79, 0.20);
  z-index: 2147483647;                                /* max int — beats any template z-index */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pbe-modebar .pbe-mode {
  padding: 6px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pbe-modebar .pbe-mode:hover { color: #fff; }
.pbe-modebar .pbe-mode.on {
  background: #ffd54f;
  color: #0d1117;
}
.pbe-modebar .pbe-gear {
  margin-left: 4px; padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 14px;
}
.pbe-modebar .pbe-gear:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ============================================================================
   AFFORDANCE — green dashed outline + ✎ pencil for editable elements
   ============================================================================ */

/* In edit mode, every data-editable becomes interactive AND always visibly marked
   so admins can see what's clickable without having to hover-hunt. */
body.edit-mode [data-editable]:not([data-editable=""]) {
  position: relative;
  cursor: pointer;
  outline: 2px dashed var(--pbe-green);
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.20);
}

/* Hover: deepen the green outline + light green tint. Don't force a
   bright white pill — that makes surrounding row cells look dim by
   comparison (eye adjusts to the bright spot). Keep text color inherited
   so the row reads with its normal theme contrast. */
body.edit-mode [data-editable]:hover {
  outline-width: 3px;
  outline-color: var(--pbe-green-deep);
  background: rgba(67, 160, 71, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Active (clicked / being edited): solid green outline + brighter halo */
body.edit-mode [data-editable].pbe-active {
  outline: 3px solid var(--pbe-green);
  outline-offset: 4px;
  border-radius: 4px;
  background: rgba(67, 160, 71, 0.10);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.70),
    0 0 0 6px rgba(0, 0, 0, 0.40);
}

/* Body-level pencil portal — rendered as a sibling of <body> so it CAN'T
   be clipped by any parent's overflow:hidden. Position is managed in JS
   via getBoundingClientRect. Halo pattern (white inner ring + dark outer
   border + drop shadow) keeps it visible against any template background. */
.pbe-portal-pencil {
  position: absolute;
  width: 18px; height: 18px;
  background-color: var(--pbe-green);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 3px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 9998;
  opacity: 0.85;
  transition: opacity 0.12s, transform 0.12s, box-shadow 0.12s;
}
.pbe-portal-pencil:hover {
  opacity: 1;
  transform: scale(1.18);
}
.pbe-portal-pencil.pbe-active {
  opacity: 1;
  transform: scale(1.18);
  background-color: var(--pbe-green-deep);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 0 0 3px rgba(67, 160, 71, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.30);
}
.pbe-portal-pencil.pbe-derived {
  background-color: var(--pbe-purple);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  cursor: not-allowed;
}
body.edit-mode [data-editable][data-derived="true"] { cursor: not-allowed; }
body.edit-mode [data-editable][data-derived="true"]:hover { outline-color: var(--pbe-purple); }

/* Brand badge — hide in preview mode when empty, show in edit mode so
   admin can click the empty square to add text or upload a logo. */
body:not(.edit-mode) #brand-badge:empty { display: none !important; }

/* Empty-field placeholder — shows ghost "+ Add …" text in edit mode when
   an editable element has no value. Prevents the data-loss-with-no-recovery
   trap (deleted name → blank field → user has no idea what to type back). */
body.edit-mode [data-editable]:empty::before {
  content: "+ Add value";
  opacity: 0.55;
  font-style: italic;
  font-weight: 500;
  pointer-events: none;
}
body.edit-mode [data-editable][data-edit-label]:empty::before {
  content: "+ Add " attr(data-edit-label);
}

/* ============================================================================
   POPOVER — anchored to the clicked element, contains the editor for one field
   ============================================================================ */

.pbe-popover {
  position: absolute;
  background: #fff;
  border: 1.5px solid var(--pbe-green);
  border-radius: 10px;
  padding: 14px 14px 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.20);
  min-width: 280px;
  max-width: 360px;
  z-index: 10000;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  color: var(--pbe-ink);
}
.pbe-popover::before {
  content: '';
  position: absolute;
  top: -7px; left: var(--pbe-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1.5px solid var(--pbe-green);
  border-top: 1.5px solid var(--pbe-green);
}
.pbe-popover.pbe-flip-up::before {
  top: auto; bottom: -7px;
  border-left: 0; border-top: 0;
  border-right: 1.5px solid var(--pbe-green);
  border-bottom: 1.5px solid var(--pbe-green);
}

.pbe-popover .pbe-crumb {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pbe-green);
  margin-bottom: 6px;
}
.pbe-popover .pbe-source {
  display: inline-block;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.pbe-popover .pbe-source.site         { background: #fef3c7; color: #92400e; }
.pbe-popover .pbe-source.season       { background: #ddd6fe; color: #5b21b6; }
.pbe-popover .pbe-source.press_box    { background: #fce7f3; color: #9d174d; }
.pbe-popover .pbe-source.announcements{ background: #fee2e2; color: #991b1b; }
.pbe-popover .pbe-source.branding     { background: #cffafe; color: #155e75; }
.pbe-popover .pbe-source.account      { background: #d1fae5; color: #065f46; }
.pbe-popover .pbe-source.co_admins,
.pbe-popover .pbe-source.notifications,
.pbe-popover .pbe-source.custom_links { background: #f1f5f9; color: #475569; }

.pbe-popover h5 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 3px;
  color: var(--pbe-ink);
}
.pbe-popover .pbe-hint {
  font-size: 11px;
  color: var(--pbe-ink-dim);
  line-height: 1.4;
  margin-bottom: 10px;
}
.pbe-popover label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pbe-ink-dim);
  margin-bottom: 4px;
}
.pbe-popover input[type="text"],
.pbe-popover input[type="url"],
.pbe-popover input[type="email"],
.pbe-popover input[type="tel"],
.pbe-popover input[type="number"],
.pbe-popover input[type="date"],
.pbe-popover input[type="time"],
.pbe-popover input[type="color"],
.pbe-popover select,
.pbe-popover textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--pbe-line);
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--pbe-ink);
  margin-bottom: 8px;
}
.pbe-popover input[type="color"] { height: 38px; padding: 4px; cursor: pointer; }
.pbe-popover textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.pbe-popover input:focus, .pbe-popover select:focus, .pbe-popover textarea:focus {
  outline: none;
  border-color: var(--pbe-green);
  box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.18);
}
.pbe-popover .pbe-count {
  font-size: 10px;
  color: var(--pbe-ink-dim);
  text-align: right;
  margin-top: -4px;
  margin-bottom: 8px;
}
.pbe-popover .pbe-count.over { color: var(--pbe-red); font-weight: 600; }

.pbe-popover .pbe-actions {
  display: flex; gap: 6px; align-items: center;
  margin-top: 6px;
}
.pbe-popover .pbe-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--pbe-line);
  background: #fff;
  color: var(--pbe-ink);
  cursor: pointer;
  font-family: inherit;
}
.pbe-popover .pbe-btn:hover { background: #f1f4f9; }
.pbe-popover .pbe-btn.pbe-primary {
  background: var(--pbe-green);
  color: #fff;
  border-color: var(--pbe-green);
}
.pbe-popover .pbe-btn.pbe-primary:hover { background: var(--pbe-green-deep); }
.pbe-popover .pbe-btn.pbe-discard {
  color: var(--pbe-red);
  border: 0;
  background: transparent;
  margin-left: auto;
}

/* Tooltip for derived fields (purple lock) */
.pbe-tooltip {
  position: absolute;
  background: var(--pbe-ink);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.30);
  z-index: 10001;
  pointer-events: none;
}
.pbe-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--pbe-ink);
}

/* ============================================================================
   SAVE TOAST — small flash after successful save
   ============================================================================ */

.pbe-toast {
  /* Top-right (just below the EDIT MODE banner) instead of bottom-center —
     avoids obscuring tab/footer content during edits. */
  position: fixed; top: 56px; right: 16px;
  transform: translateY(-12px);
  background: var(--pbe-ink);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
  z-index: 10002;
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s;
}
.pbe-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.pbe-toast .pbe-toast-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pbe-green);
  box-shadow: 0 0 8px var(--pbe-green);
}

/* === Hide the legacy .pbe-modebar — only #pbe-edit-toggle is the canonical Edit Mode toggle === */
.pbe-modebar { display: none !important; }