/* gce-buttons.css — the ONE button system for the filing desk (PJE-D9A09AEECCC7, DMS #36).
 *
 * Operator (2026-08-06): "make all the buttons the same shape and color and matching plain
 * English names." The audit found 184 buttons in 44 distinct ad-hoc styles. This file defines
 * ONE shape and a SMALL set of semantic color variants — color carries MEANING only, never
 * decoration. New tool buttons should use these classes; existing groups migrate to them in
 * phases (see the PLAN doc DOC-F5AADF590663).
 *
 * Light theme only (frontend rule). No dark surfaces here. */

/* ── Base: the one shape ─────────────────────────────────────────────────────── */
.gce-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 10px;
  background: #fff;
  color: #374151;
  font: 600 12px system-ui, -apple-system, sans-serif;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.gce-btn:hover { background: #f9fafb; }
.gce-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.gce-btn:disabled { opacity: .5; cursor: default; }

/* ── Variants: color = meaning, nothing else ─────────────────────────────────── */
/* primary — the single accent, for the ONE main action in a group */
.gce-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.gce-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* active / on — a toggle that is currently ON. `.gce-btn.on` is an alias so existing
   toggles that already flip an `.on` class adopt the look with no JS change. */
.gce-btn--active,
.gce-btn.on { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.gce-btn--active:hover,
.gce-btn.on:hover { background: #dbeafe; }

/* danger — stop / destructive */
.gce-btn--danger { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.gce-btn--danger:hover { background: #fee2e2; }

/* ── Optional: a labeled cluster wrapper for grouping related tools on the wall ── */
.gce-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}
.gce-btn-group > .gce-btn-group-label {
  font: 700 10px system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-right: 2px;
}

/* ── WALL buttons · MONOCHROME (operator 2026-08-07: "all buttons monochrome except
 * Edit, Save, Copy") ─────────────────────────────────────────────────────────────
 * Every wall control is neutral grey/white in one 6px/12px shape. The ONLY color on
 * the wall is a blue accent on the three core document actions — Edit · Save · Copy.
 * Menu hues (New=blue, Review/Reg=amber, Locked=red), the AI-mouse indigo, and the
 * review-cluster on-states are all flattened to grey. Done as scoped CSS here (no
 * filing_review.html / JS edits) so it doesn't tangle with another agent; .gce-project-bar
 * + !important win over the page's inline <style> and the JS-injected button styles. */
.gce-project-bar .tb > summary,
.gce-project-bar .proj-toprow > button,
.gce-project-bar .gce-mf-wall-btn,
.gce-project-bar .gce-cm-wall-btn,
.gce-project-bar .gce-ra-wall-btn,
.gce-project-bar .wall-aimouse {
  background: #fff !important; color: #374151 !important; border: 1px solid #d1d5db !important;
  border-radius: 6px !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 600 !important;
}
.gce-project-bar .tb > summary:hover,
.gce-project-bar .proj-toprow > button:hover,
.gce-project-bar .wall-aimouse:hover { background: #f9fafb !important; }

/* toggled / active → a monochrome "pressed" grey (was blue / amber / indigo / red) */
.gce-project-bar .wall-aimouse[aria-pressed="true"],
.gce-project-bar .gce-mf-wall-btn.active,
.gce-project-bar .gce-cm-wall-btn.on {
  background: #f3f4f6 !important; color: #111827 !important; border-color: #9ca3af !important;
}

/* THE EXCEPTION — Edit · Save · Copy carry the blue accent so the core actions read at
 * a glance. The Edit toggle (.gce-edit-toggle) already carries this blue; left as-is. */
.gce-project-bar #save-all-btn, .gce-project-bar [data-role="save-all-btn"],
.gce-project-bar #copy-all-btn-project, .gce-project-bar [data-role="copy-all-btn-project"] {
  background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe !important;
}
.gce-project-bar #save-all-btn, .gce-project-bar [data-role="save-all-btn"]:hover,
.gce-project-bar #copy-all-btn-project, .gce-project-bar [data-role="copy-all-btn-project"]:hover { background: #dbeafe !important; }

/* Operator 2026-08-07: remove the "N cross-doc numbers disagree" health chip from the
 * wall entirely (it read as a persistent nag). The File-lock indicator stays — it
 * usefully tells the operator the package is locked and needs unlocking to edit. */
.gce-project-bar #project-health-bar, .gce-project-bar [data-role="project-health-bar"] { display: none !important; }

/* ── P3 · FRAME toolbar · MONOCHROME (mirror the wall) · operator 2026-08-07 ───────
 * Every frame tool button + dropdown summary → one neutral 6px/12px shape. Flatten the
 * hue-coded summaries (Read=blue, Code=cyan) and colored buttons (Send=green, Save=blue,
 * Workflow=blue). Blue accent reserved for the three core actions — Edit · Save · Copy.
 * Scoped CSS only — no frame JS/markup edits; !important wins over the frame's own rules
 * and the per-button inline styles. Drawer contents (.tb-pop button) already share one
 * style and are left alone. (Chat-control strip + code-IDE toolbar are separate, later.) */
.section .actions .tb > summary,
.section .actions > button,
.section .fr-actionbar .fr-act {
  background: #fff !important; color: #374151 !important; border: 1px solid #d1d5db !important;
  border-radius: 6px !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 600 !important;
}
.section .actions .tb > summary:hover,
.section .actions > button:hover,
.section .fr-actionbar .fr-act:hover { background: #f9fafb !important; }

/* an OPEN dropdown reads as a monochrome "pressed" grey */
.section .actions .tb[open] > summary { background: #f3f4f6 !important; color: #111827 !important; border-color: #9ca3af !important; }

/* THE EXCEPTION — Edit · Save · Copy carry the blue accent (attribute selectors beat the
 * neutral rule above; Save keeps its meaning, Copy + Edit-menu gain it). */
.section .actions button[data-save],
.section .actions button[onclick*="copyDocContent"],
.section .actions .fr-edit-menu > summary,
.section .gce-edit-toggle {
  background: #eff6ff !important; color: #2563eb !important; border: 1px solid #bfdbfe !important;
}
.section .actions button[data-save]:hover,
.section .actions button[onclick*="copyDocContent"]:hover { background: #dbeafe !important; }
/* Save while enabled (dirty) stays the same accent — disabled just dims via the frame's own :disabled */

/* ── Edge controls → MONOCHROME (operator 2026-08-07: "flatten most so they look
 * similar") ──────────────────────────────────────────────────────────────────────
 * All are needed controls (none removable). Flatten COLOR only to the neutral palette;
 * keep each control's own compact SIZE so tight toggle rows don't reflow. On/active →
 * monochrome pressed grey (state stays legible). Scoped CSS only — no JS/markup edits.
 * Sorter=routing suggestions · Before you start=pre-edit read · Selection=format scope ·
 * Edits=edit history · Style/Source/Pin=frame view toggles · ¶=active text style. */

/* standalone mode pills — flatten fill + normalise radius to 6px */
.sorter-toggle-btn, .bys-open, .fmt-scope, .er-btn {
  background: #fff !important; color: #374151 !important; border: 1px solid #d1d5db !important; border-radius: 6px !important;
}
.sorter-toggle-btn:hover, .bys-open:hover, .fmt-scope:hover, .er-btn:hover { background: #f9fafb !important; }
.sorter-toggle-btn.on, .fmt-scope.on, .er-btn.on,
.sorter-toggle-btn[aria-pressed="true"], .fmt-scope[aria-pressed="true"] {
  background: #f3f4f6 !important; color: #111827 !important; border-color: #9ca3af !important;
}

/* frame compact view-toggle row (Style / Source / Pin / Edit / Rep) — colour only, size kept */
.fr-viewtoggle, .fr-edittoggle, .fr-reptoggle, .fr-pintoggle, .fr-styletoggle {
  color: #374151 !important; border-color: #d1d5db !important; background: #fff !important;
}
.fr-viewtoggle:hover, .fr-edittoggle:hover, .fr-reptoggle:hover, .fr-pintoggle:hover, .fr-styletoggle:hover,
.fr-viewtoggle.on, .fr-edittoggle.on, .fr-reptoggle.on, .fr-pintoggle.on, .fr-styletoggle.on {
  background: #f3f4f6 !important; color: #111827 !important; border-color: #9ca3af !important;
}

/* WYSIWYG style toolbar — active-format blue → monochrome grey, compact size kept */
.gce-wys-btn.is-active { background: #f3f4f6 !important; border-color: #9ca3af !important; color: #111827 !important; }
.gce-wys-btn:hover { background: #f3f4f6 !important; border-color: #d1d5db !important; }

/* ── Chat-control strip (per-frame conversation-mode row) → MONOCHROME · operator
 * 2026-08-07 (the "chat controller", done last) ──────────────────────────────────
 * Its on/off state is shown by TEXT (mode label · "✓" · "On"), NOT colour — so
 * flattening the colour loses no signal. SCOPED to .section .conv-ctrl-strip so the
 * RIGHT conversation rail (operator actively working there) is never touched. Compact
 * size kept. */
.section .conv-ctrl-strip .conv-cc {
  background: #fff !important; color: #374151 !important; border-color: #d1d5db !important;
}
.section .conv-ctrl-strip .conv-cc:hover { background: #f3f4f6 !important; border-color: #9ca3af !important; }
.section .conv-ctrl-strip .conv-cc.rec-toggle {
  background: #fff !important; color: #374151 !important; border-color: #d1d5db !important; font-weight: 600 !important;
}
.section .conv-ctrl-strip .conv-kind,
.section .conv-ctrl-strip .conv-chat-toggle {
  background: #fff !important; color: #64748b !important; border-color: #d1d5db !important;
}
.section .conv-ctrl-strip .conv-chat-toggle:hover { background: #f3f4f6 !important; border-color: #9ca3af !important; }
/* keep disabled controls visibly dimmed (non-conversation frames) */
.section .conv-ctrl-strip .conv-cc[disabled] { background: #f8fafc !important; color: #94a3b8 !important; border-color: #e5e7eb !important; }

/* ── Formatting-toolbar consolidation · P1 (PJE-D9A09AEECCC7, operator 2026-08-07) ──
 * WYSIWYG (html) frames had TWO bars: the live TipTap .gce-wys-toolbar (always in the
 * doc body) + a DEAD legacy .format-toolbar (execCommand on a display:none editor). Now:
 *  • the dead .format-toolbar is removed on any frame that has a live WYSIWYG toolbar;
 *  • the live WYSIWYG toolbar is COLLAPSED by default (clean doc body) and revealed by
 *    the header "✎ Format" toggle (adds .fmt-open on the .section).
 * :has() is supported in the operator's WebKit/Safari. */
.section:has(.gce-wys-toolbar) .format-toolbar { display: none !important; }
.section .gce-wys-toolbar { display: none !important; }
.section.fmt-open .gce-wys-toolbar { display: flex !important; flex-wrap: wrap; }