/* ============================================================
   Quotation Generator — native layout
   The form now uses the app's own .card / .field / .field-row / .section-title /
   .chip / .btn components (see quotation.js), so it matches the rest of the app
   and is fully theme-aware. This block only adds: the two-column page layout,
   the sticky action panel, styling for the parts the generator injects at
   runtime (event-day cards, team/venue chips, custom rows) which can't carry
   app classes directly, and the date/side chip active state. Scoped to .qg-scope.
   ============================================================ */

.qg-scope form{ margin: 0; }

/* Wide screens: form on the left, sticky actions on the right. Stacks on mobile. */
.qg-grid{ display: block; }
.qg-grid > .qg-main > .section-title:first-child{ margin-top: 0; }
@media (min-width: 1000px){
  .qg-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .qg-side{ position: sticky; top: 88px; }
}
.qg-main{ min-width: 0; }
.qg-main > .card{ margin-bottom: 4px; }

/* Brand mark on the action panel — the same logo that prints on the PDF. */
.qg-brand{ display: flex; justify-content: center; margin-bottom: 4px; }
.qg-brand__logo{ max-width: 130px; height: auto; opacity: 0.95; }

/* Chip rows (side, quotation-no helpers, date chips, includes). Chips themselves
   reuse the global .chip class; here we only lay them out and add the active state
   (the engine marks a chosen chip with .selected, the app uses .active). */
.qg-scope .qg-chip-row,
.qg-scope #sideSelection,
.qg-scope #dateChips,
.qg-scope .include-chip-container{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.qg-scope .chip.selected{ background: var(--accent); border-color: var(--accent); color: #fff; }
.qg-scope .chip.selected:hover{ background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* Sidebar action buttons all stack full-width. */
.qg-side .btn + .btn{ margin-top: 10px; }

/* "Select All" toggle (includes + team) reuses .btn; add its chosen state. */
.qg-scope .toggle-btn.selected-all{ background: var(--accent); border-color: var(--accent); color: #fff; }

/* Add-buttons (Add Event Day / Add Custom Include) — accent-tinted. */
.qg-scope .qg-add-btn{ margin-top: 12px; color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.qg-scope .qg-add-btn:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }

.qg-words{ font-style: italic; color: var(--ink-soft); margin-top: 6px; font-size: 12.5px; }
.qg-note{ color: var(--stamp-red); font-weight: 600; margin-top: 5px; font-size: 12.5px; }
.qg-scope .error-message{ color: var(--stamp-red); font-size: 12px; margin: 4px 0 0; }
.qg-scope .file-name-display{ font-size: 12px; color: var(--ink-soft); margin-top: 8px; text-align: center; }
.qg-scope a{ color: var(--accent); }

/* ---- Runtime-injected markup (event blocks, team sections, custom rows) ----
   These are generated by quotation-engine.js with its own class names, so they
   can't use .card/.field directly. We restyle them here using the same tokens so
   they read as native cards/fields and stay theme-aware. ---- */

/* Event-day card */
.qg-scope .event-block{
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: 16px; margin: 14px 0; box-shadow: var(--shadow-sm);
}
.qg-scope .event-block h4{ font-family: var(--font-display); font-size: 16px; color: var(--ink); margin: 0 0 12px; }
.qg-scope .event-block > div{ margin-bottom: 12px; }
.qg-scope .event-block label,
.qg-scope .event-details label{ display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 6px; letter-spacing: 0.2px; }
.qg-scope .team-section{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.qg-scope .team-section strong,
.qg-scope .team-members strong{ display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin: 10px 0 6px; letter-spacing: 0.2px; }
.qg-scope .team-chips,
.qg-scope .team-members,
.qg-scope .same-team-section,
.qg-scope .venue1-address-container,
.qg-scope .venue2-address-container{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; align-items: center; }
.qg-scope .same-team-label{ display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--accent); margin-right: 4px; }

/* Utility buttons the engine injects (no .btn class available on them) — give them
   the app's button look via tokens so they match and follow the theme. */
.qg-scope .toggle-btn,
.qg-scope .toggle-venue2-btn,
.qg-scope .add-custom-btn,
.qg-scope .remove-custom,
.qg-scope .remove-day{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); cursor: pointer; border-radius: 27px;
  border: 1px solid var(--line-strong); background: var(--paper-raised); color: var(--ink);
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; margin: 6px 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.qg-scope .toggle-btn:hover,
.qg-scope .toggle-venue2-btn:hover{ background: var(--paper-sunken); }
.qg-scope .toggle-btn:active,
.qg-scope .toggle-venue2-btn:active,
.qg-scope .add-custom-btn:active,
.qg-scope .remove-custom:active,
.qg-scope .remove-day:active{ transform: scale(0.97); }
.qg-scope .add-custom-btn{ color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.qg-scope .add-custom-btn:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
.qg-scope .remove-custom,
.qg-scope .remove-day{ color: var(--stamp-red); border-color: var(--stamp-red); background: var(--stamp-red-bg); }
.qg-scope .remove-custom:hover,
.qg-scope .remove-day:hover{ background: var(--stamp-red); color: #fff; }

/* Custom team-member / custom-include rows — sunken sub-cards. */
.qg-scope .custom-team-member,
.qg-scope .custom-price-container,
.qg-scope #customIncludesContainer > *{
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--paper-sunken); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 10px; margin: 8px 0;
}
.qg-scope .custom-role,
.qg-scope .custom-name,
.qg-scope .custom-contact,
.qg-scope .custom-price,
.qg-scope .custom-quantity,
.qg-scope .custom-role-input,
.qg-scope .custom-inc-name,
.qg-scope .custom-inc-type,
.qg-scope .custom-include-price,
.qg-scope .custom-pictures{ flex: 1 1 130px; width: auto; }
.qg-scope .custom-price-container label,
.qg-scope .custom-team-member label{ flex-basis: 100%; margin: 0 0 2px; }
.qg-scope .remove-custom{ flex: 0 0 auto; margin: 0; }

/* ============================================================
   Agreement Generator — native layout
   The form is built from the app's own .card / .field / .btn / .chip
   components, so it matches the rest of the app by default. This block only
   adds the two-column page layout, the sticky action panel, the date-chip
   active state, and a couple of brand touches. Scoped under .ag-scope.
   ============================================================ */

.ag-scope form{ margin: 0; }

/* Wide screens: form on the left, sticky actions on the right. Stacks on mobile. */
.ag-grid{ display: block; }
.ag-grid > .ag-main > .section-title:first-child{ margin-top: 0; }
@media (min-width: 1000px){
  .ag-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .ag-side{ position: sticky; top: 88px; }
}
.ag-main{ min-width: 0; }

/* Intro clause — plain text, no call-out card / colored bar (reads as body copy). */
.ag-scope .static-text{
  background: transparent; border: 0; border-radius: 0;
  padding: 0 2px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px;
}
.ag-scope .static-text strong{ color: var(--ink); }

/* Brand mark on the action panel — this is the same logo that prints on the PDF. */
.ag-brand{ display: flex; justify-content: center; margin-bottom: 4px; }
.ag-brand__logo{ max-width: 130px; height: auto; opacity: 0.95; }

/* Date chips come from the engine with .selected — map that onto the app's active look. */
.ag-scope .ag-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ag-scope .ag-chips .chip{ margin: 0; }
.ag-scope .ag-chips .chip.selected{ background: var(--accent); border-color: var(--accent); color: #fff; }
.ag-scope .ag-chips .chip.selected:hover{ background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.ag-scope .error-message{ color: var(--stamp-red); font-size: 12px; margin: 4px 0 0; }
.ag-scope .file-name-display,
.esign-scope .file-name-display{ font-size: 12px; color: var(--ink-soft); margin-top: 8px; text-align: center; }

/* ============================================================
   v39 — shared QG/AG mobile polish + "currently editing" badge
   ============================================================ */

/* Designed "Currently editing: <file>" indicator (both tools use .file-name-display).
   Shows as an accent pill with a file icon and a soft live dot, truncating long names.
   Visibility stays JS-driven: the engines set inline display:flex to show / none to hide;
   this only styles the pill and keeps it hidden until then. */
.qg-scope .file-name-display,
.ag-scope .file-name-display,
.esign-scope .file-name-display{
  display: none; align-items: flex-start; gap: 8px;
  /* Floats at the top of the tool (below the app header) so the imported file is always
     visible while you scroll the form, instead of being buried down by the import button. */
  position: sticky; top: calc(var(--topbar-h) + 8px); z-index: 6;
  margin: 0 0 14px; padding: 10px 13px; text-align: left;
  background: var(--accent-soft); border: 1px solid var(--accent);
  /* A 999px pill only works on one line; generated filenames are long, so it wrapped
     into a giant lozenge with the icon and dot flung to opposite corners. A modest
     radius reads correctly whether the name takes one line or three. */
  border-radius: 12px; color: var(--accent); font-size: 12px; font-weight: 600;
  max-width: 100%; line-height: 1.45;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  box-shadow: 0 4px 14px rgba(28,34,48,0.10);
}
/* Below the sidebar breakpoint the mobile header is shorter — pin under that instead. */
@media (max-width: 900px){
  .qg-scope .file-name-display,
  .ag-scope .file-name-display,
.esign-scope .file-name-display{ top: calc(56px + env(safe-area-inset-top) + 8px); }
}
.qg-scope .file-name-display::before,
.ag-scope .file-name-display::before,
.esign-scope .file-name-display::before{
  content: "\f044"; /* fa-pen-to-square */
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; flex-shrink: 0;
  margin-top: 2px;   /* optically centre the icon on the FIRST line, not the block */
}
.qg-scope .file-name-display::after,
.ag-scope .file-name-display::after,
.esign-scope .file-name-display::after{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-left: auto; flex-shrink: 0; margin-top: 5px;
  animation: editing-pulse 1.6s ease-in-out infinite;
}
@keyframes editing-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.35; } }

/* Mobile: the action panel (Generate) sits right under the form with too little
   air on phones — give it a clear gap. On wide screens it's a sticky grid column,
   so this only applies where the layout stacks. */
@media (max-width: 999px){
  .ag-side, .qg-side{ margin-top: 18px; }

  /* AG pricing fields were cramped side-by-side with long labels; stack them
     vertically (full-width "up/down") so both read cleanly on a phone. */
  .ag-scope .ag-price-row{ flex-direction: column; gap: 0; }
  .ag-scope .ag-price-row .field{ width: 100%; }
}

/* ---- Select All / Deselect All affordance --------------------------------
   The old default state looked like a plain neutral button, so it wasn't obvious
   it was a select control. Give it an accent-outlined look ("tap to select") that
   fills solid when everything is selected ("tap to deselect"). */
.qg-scope .toggle-btn{
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper-raised);
  font-weight: 700;
}
.qg-scope .toggle-btn:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
.qg-scope .toggle-btn.selected-all{ background: var(--accent); border-color: var(--accent); color: #fff; }
.qg-scope .toggle-btn.selected-all:hover{ background: var(--accent-hover, var(--accent)); color: #fff; }

/* "Continue to Agreement" handoff button — accent-outlined so it reads as the next step. */
.qg-scope .btn-agreement-handoff{ border-color: var(--accent); color: var(--accent); }
.qg-scope .btn-agreement-handoff:hover{ background: var(--accent-soft); }