/* HEADER-POSITION-2 — Add Header / Footer Free X/Y Position Control.
 * Adds safe top/bottom position presets and left/right side margin control on top of HEADER-STYLE-2.
 */

/* HEADER-PANEL-1 — Add Header / Footer right panel controls.
 * Scoped to the tool-owned right panel. Shared Start, Workspace, Export and Result surfaces remain shared-owned.
 */
.ept-add-header-footer-tool {
  display: grid;
  gap: 14px;
}

.ept-ahf-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.ept-ahf-panel__header h4 {
  margin: 4px 0 5px;
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
}

.ept-ahf-panel__header p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.ept-ahf-panel__icon {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.10);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.ept-ahf-tab-section {
  display: grid;
  gap: 13px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.ept-ahf-tab-section[hidden] {
  display: none !important;
}

.ept-ahf-section-title {
  display: grid;
  gap: 3px;
}

.ept-ahf-section-title strong {
  color: #111827;
  font-size: 13px;
}

.ept-ahf-section-title span,
.ept-ahf-help {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.ept-ahf-field {
  display: grid;
  gap: 7px;
}

.ept-ahf-field label {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.ept-ahf-field input,
.ept-ahf-field textarea,
.ept-ahf-field select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 12px;
  padding: 10px 11px;
  color: #111827;
  background: rgba(255, 255, 255, 0.94);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ept-ahf-field textarea {
  min-height: 74px;
  resize: vertical;
  line-height: 1.42;
}

.ept-ahf-field input:focus,
.ept-ahf-field textarea:focus,
.ept-ahf-field select:focus {
  border-color: rgba(37, 99, 235, 0.70);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  background: #fff;
}

.ept-ahf-field select:disabled {
  cursor: not-allowed;
  color: #64748b;
  background: rgba(241, 245, 249, 0.86);
}

.ept-ahf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ept-ahf-color {
  grid-template-columns: minmax(0, 42px) minmax(0, 1fr);
  align-items: end;
}

.ept-ahf-color label {
  grid-column: 1 / -1;
}

.ept-ahf-color input[type="color"] {
  height: 40px;
  padding: 4px;
}

.ept-ahf-summary {
  display: grid;
  gap: 8px;
}

.ept-ahf-summary > div {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(248, 250, 252, 0.74);
}

.ept-ahf-summary strong {
  color: #111827;
  font-size: 13px;
  line-height: 1.25;
}

.ept-ahf-summary span,
.ept-ahf-readiness {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.ept-ahf-readiness {
  border: 1px dashed rgba(37, 99, 235, 0.34);
  border-radius: 14px;
  padding: 10px 11px;
  background: rgba(37, 99, 235, 0.06);
}

@media (max-width: 720px) {
  .ept-ahf-grid,
  .ept-ahf-color {
    grid-template-columns: 1fr;
  }

  .ept-ahf-color input[type="color"] {
    width: 100%;
  }
}

/* HEADER-OVERLAY-1 — Header/Footer preview overlay consumer.
 * HEADER-DRAG-1 now enables drag/nudge on visible header/footer overlay objects.
 */
.ept-ahf-preview-line {
  position: absolute;
  z-index: 34;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
  text-rendering: geometricPrecision;
}

.ept-ahf-preview-line[hidden] {
  display: none !important;
}

.ept-ahf-preview-line--header {
  text-align: inherit;
}

.ept-ahf-preview-line--footer {
  text-align: inherit;
}

@media (max-width: 720px) {
  .ept-ahf-preview-line {
    max-width: calc(100% - 16px);
  }
}

/* HEADER-RANGE-1 — target pages basic range UI. */
.ept-ahf-inline-note {
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
}

.ept-ahf-target-feedback {
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 13px;
  padding: 9px 10px;
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.06);
  font-size: 12px;
  line-height: 1.45;
}

.ept-ahf-field input[aria-disabled="true"] {
  cursor: not-allowed;
  color: #64748b;
  background: rgba(241, 245, 249, 0.86);
}


/* HEADER-RANGE-1.1 — keep Add Header/Footer right panel usable when content is taller than the viewport. */
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-editor-panel-shell].ept-flow-workspace__panel {
  min-height: 0 !important;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-tool-panel-body] {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding-bottom: 18px !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-tool-panel-mount],
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-add-header-footer-tool,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-tab-section {
  min-width: 0 !important;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-field textarea {
  max-width: 100%;
}

@media (min-width: 921px) {
  .ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-editor-panel-shell].ept-flow-workspace__panel {
    max-height: min(760px, calc(100vh - 128px)) !important;
    overflow: hidden !important;
  }

  .ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-tool-panel-body] {
    max-height: calc(100vh - 250px) !important;
  }
}

@media (max-width: 920px) {
  .ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-editor-panel-shell].ept-flow-workspace__panel,
  .ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-tool-panel-body] {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* HEADER-RANGE-2 — quick target mode affordance. */
.ept-ahf-field select[data-ept-ahf-setting="targetPagesMode"] option[value="odd"],
.ept-ahf-field select[data-ept-ahf-setting="targetPagesMode"] option[value="even"],
.ept-ahf-field select[data-ept-ahf-setting="targetPagesMode"] option[value="first"],
.ept-ahf-field select[data-ept-ahf-setting="targetPagesMode"] option[value="last"],
.ept-ahf-field select[data-ept-ahf-setting="targetPagesMode"] option[value="exclude-first"],
.ept-ahf-field select[data-ept-ahf-setting="targetPagesMode"] option[value="exclude-last"] {
  font-weight: 600;
}


/* SHARED-WORKSPACE-FIX-2 compatibility cleanup.
   Header/Footer previously carried a temporary tool-local scroll guard from
   HEADER-RANGE-1.1. The shared workspace now owns panel height behavior, so the
   tool panel must not reintroduce an inner scrollbar after shared CSS loads. */
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-editor-panel-shell].ept-flow-workspace__panel {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-tool-panel-body] {
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
  scrollbar-gutter: auto !important;
  scrollbar-width: auto !important;
}


/* HEADER-TOKEN-1 — dynamic token helper in the Content tab. */
.ept-ahf-token-box {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  padding: 11px;
  background: rgba(37, 99, 235, 0.05);
}

.ept-ahf-token-box > div:first-child {
  display: grid;
  gap: 3px;
}

.ept-ahf-token-box strong {
  color: #111827;
  font-size: 12px;
  line-height: 1.3;
}

.ept-ahf-token-box span,
.ept-ahf-token-box small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.42;
}

.ept-ahf-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ept-ahf-token-list button {
  appearance: none;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 999px;
  padding: 6px 9px;
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.ept-ahf-token-list button:hover,
.ept-ahf-token-list button:focus-visible {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
  background: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* HEADER-TOKEN-2 — Token UX / Formatting Polish. */
.ept-ahf-token-format-list,
.ept-ahf-token-template-list {
  display: grid;
  gap: 7px;
}

.ept-ahf-token-format-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ept-ahf-token-format-list button,
.ept-ahf-token-template-list button {
  appearance: none;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 8px 9px;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.ept-ahf-token-format-list button {
  display: grid;
  gap: 3px;
}

.ept-ahf-token-format-list b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #1d4ed8;
  font-size: 10.5px;
  line-height: 1.18;
}

.ept-ahf-token-format-list span {
  color: #64748b;
  font-size: 10.5px;
}

.ept-ahf-token-template-list button {
  color: #1d4ed8;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.ept-ahf-token-format-list button:hover,
.ept-ahf-token-format-list button:focus-visible,
.ept-ahf-token-template-list button:hover,
.ept-ahf-token-template-list button:focus-visible {
  border-color: rgba(37, 99, 235, 0.50);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  background: #fff;
  outline: none;
  transform: translateY(-1px);
}

.ept-ahf-token-preview {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 13px;
  padding: 9px;
  background: rgba(248, 250, 252, 0.78);
}

.ept-ahf-token-preview[data-ept-ahf-token-warning="true"] {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(255, 251, 235, 0.74);
}

.ept-ahf-token-preview span {
  color: #475569;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ept-ahf-token-preview code {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  border-radius: 9px;
  padding: 7px 8px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 720px) {
  .ept-ahf-token-format-list {
    grid-template-columns: 1fr;
  }
}

/* HEADER-STYLE-1 — Basic Text Style: Bold / Italic / Underline. */
.ept-ahf-style-toggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ept-ahf-style-toggles label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 13px;
  padding: 9px 10px;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.ept-ahf-style-toggles label:hover,
.ept-ahf-style-toggles label:focus-within {
  border-color: rgba(37, 99, 235, 0.48);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.11);
  background: #fff;
  transform: translateY(-1px);
}

.ept-ahf-style-toggles input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: #2563eb;
}

.ept-ahf-style-toggles span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ept-ahf-style-feedback {
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 13px;
  padding: 9px 10px;
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.06);
  font-size: 12px;
  line-height: 1.45;
}

.ept-ahf-preview-line {
  text-decoration-thickness: max(1px, 0.055em);
  text-underline-offset: 0.16em;
}

@media (max-width: 720px) {
  .ept-ahf-style-toggles {
    grid-template-columns: 1fr;
  }
}


/* HEADER-STYLE-2 — Opacity / Rotation / Font Family. */
.ept-ahf-advanced-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ept-ahf-field input[type="range"][data-ept-ahf-setting="opacity"] {
  padding-inline: 2px;
  accent-color: #2563eb;
}

.ept-ahf-field select[data-ept-ahf-setting="fontFamily"] {
  font-weight: 700;
}

.ept-ahf-preview-line {
  transform-origin: left bottom;
  will-change: transform, opacity;
}

@media (max-width: 720px) {
  .ept-ahf-advanced-style-grid {
    grid-template-columns: 1fr;
  }
}

/* HEADER-POSITION-1 — Advanced Position Presets. */
.ept-ahf-field select[data-ept-ahf-setting="headerPositionPreset"],
.ept-ahf-field select[data-ept-ahf-setting="footerPositionPreset"] {
  font-weight: 750;
}

.ept-ahf-position-feedback {
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 13px;
  padding: 9px 10px;
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.06);
  font-size: 12px;
  line-height: 1.45;
}

.ept-ahf-field input[type="number"][data-ept-ahf-setting="sideMargin"] {
  font-weight: 700;
}


/* HEADER-POSITION-2 — Free X/Y Position Control. */
.ept-ahf-free-position-box {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.82);
}

.ept-ahf-free-position-box > div:first-child {
  display: grid;
  gap: 2px;
}

.ept-ahf-free-position-box > div:first-child strong {
  font-size: 12px;
  color: #0f172a;
}

.ept-ahf-free-position-box > div:first-child span {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

.ept-ahf-checkline {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 750;
  color: #334155;
}

.ept-ahf-checkline input {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.ept-ahf-free-position-box input[disabled] {
  opacity: 0.62;
  cursor: not-allowed;
  background: rgba(226, 232, 240, 0.58);
}

/* HEADER-IMAGE-1 — Image / Logo Header Footer Foundation. */
.ept-ahf-image-box {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(37, 99, 235, 0.045);
}

.ept-ahf-image-box__head {
  display: grid;
  gap: 3px;
}

.ept-ahf-image-box__head strong {
  color: #0f172a;
  font-size: 12px;
  line-height: 1.3;
}

.ept-ahf-image-box__head span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ept-ahf-image-box__head span[data-ept-ahf-image-ready="true"] {
  color: #1d4ed8;
  font-weight: 700;
}

.ept-ahf-image-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ept-ahf-image-upload {
  display: grid;
  min-width: 0;
}

.ept-ahf-image-upload input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.ept-ahf-image-upload span,
.ept-ahf-image-upload-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 12px;
  padding: 8px 10px;
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.ept-ahf-image-upload:hover span,
.ept-ahf-image-upload:focus-within span,
.ept-ahf-image-upload-row button:hover,
.ept-ahf-image-upload-row button:focus-visible {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  background: #fff;
  outline: none;
  transform: translateY(-1px);
}

.ept-ahf-image-upload-row button:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(241, 245, 249, 0.72);
  box-shadow: none;
  transform: none;
}

.ept-ahf-image-preview {
  display: grid;
  place-items: center;
  min-height: 76px;
  border: 1px dashed rgba(148, 163, 184, 0.36);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
  overflow: hidden;
}

.ept-ahf-image-preview[data-ept-ahf-image-ready="true"] {
  border-style: solid;
  border-color: rgba(37, 99, 235, 0.22);
  background: #fff;
}

.ept-ahf-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 92px;
  object-fit: contain;
}

.ept-ahf-image-preview span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.ept-ahf-image-feedback {
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 13px;
  padding: 9px 10px;
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.06);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .ept-ahf-image-upload-row {
    grid-template-columns: 1fr;
  }
}

/* HEADER-IMAGE-2 — Image Export + Preview Binding. */
.ept-ahf-preview-image {
  position: absolute;
  z-index: 33;
  display: block;
  box-sizing: border-box;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
  transform-origin: left bottom;
  will-change: opacity;
}

.ept-ahf-preview-image[hidden] {
  display: none !important;
}

.ept-ahf-image-feedback[data-ept-ahf-image-binding="active"] {
  border-color: rgba(37, 99, 235, 0.30);
}

/* HEADER-DRAG-1 — Drag Header/Footer Preview Position. */
.ept-ahf-drag-feedback {
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: 13px;
  padding: 9px 10px;
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.06);
  font-size: 12px;
  line-height: 1.45;
}

.ept-ahf-drag-feedback[data-ept-ahf-drag-ready="true"] {
  border-color: rgba(22, 163, 74, 0.26);
  color: #166534;
  background: rgba(22, 163, 74, 0.06);
}

.ept-ahf-preview-line[data-ept-draggable-overlay="ahf-header-footer"],
.ept-ahf-preview-image[data-ept-draggable-overlay="ahf-header-footer"] {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.ept-ahf-preview-line[data-ept-draggable-overlay="ahf-header-footer"]:hover,
.ept-ahf-preview-line[data-ept-draggable-overlay="ahf-header-footer"]:focus-visible,
.ept-ahf-preview-line[data-ept-draggable-overlay="ahf-header-footer"][data-ept-overlay-selected="true"],
.ept-ahf-preview-image[data-ept-draggable-overlay="ahf-header-footer"]:hover,
.ept-ahf-preview-image[data-ept-draggable-overlay="ahf-header-footer"]:focus-visible,
.ept-ahf-preview-image[data-ept-draggable-overlay="ahf-header-footer"][data-ept-overlay-selected="true"] {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 3px;
}

.ept-ahf-preview-line[data-ept-draggable-overlay="ahf-header-footer"].is-dragging,
.ept-ahf-preview-line[data-ept-draggable-overlay="ahf-header-footer"][data-ept-overlay-dragging="true"],
.ept-ahf-preview-image[data-ept-draggable-overlay="ahf-header-footer"].is-dragging,
.ept-ahf-preview-image[data-ept-draggable-overlay="ahf-header-footer"][data-ept-overlay-dragging="true"] {
  cursor: grabbing;
}

.ept-ahf-preview-line[data-ept-ahf-drag-state="keyboard"],
.ept-ahf-preview-image[data-ept-ahf-drag-state="keyboard"] {
  outline-style: dashed;
}

/* HEADER-PRESET-1/2 — Header Footer Preset Foundation + Custom Preset Save/Restore. */
.ept-ahf-preset-list {
  display: grid;
  gap: 9px;
}

.ept-ahf-preset-list button {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: 14px;
  padding: 11px 12px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.ept-ahf-preset-list button b {
  color: #111827;
  font-size: 12px;
  line-height: 1.25;
}

.ept-ahf-preset-list button span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.ept-ahf-preset-list button:hover,
.ept-ahf-preset-list button:focus-visible {
  border-color: rgba(37, 99, 235, 0.48);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
  background: #fff;
  outline: none;
  transform: translateY(-1px);
}

.ept-ahf-preset-feedback {
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 13px;
  padding: 9px 10px;
  color: #1e3a8a;
  background: rgba(37, 99, 235, 0.06);
  font-size: 12px;
  line-height: 1.45;
}


/* HEADER-PRESET-2 — Save / Restore Custom Preset. */
.ept-ahf-custom-preset-box {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.78);
}

.ept-ahf-section-title--small {
  margin: 0;
}

.ept-ahf-custom-preset-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ept-ahf-custom-preset-save input {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 12px;
  padding: 9px 10px;
  color: #0f172a;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

.ept-ahf-custom-preset-save button,
.ept-ahf-custom-preset-item__actions button {
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 12px;
  padding: 8px 10px;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.07);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ept-ahf-custom-preset-list {
  display: grid;
  gap: 8px;
}

.ept-ahf-custom-preset-empty {
  border: 1px dashed rgba(148, 163, 184, 0.55);
  border-radius: 12px;
  padding: 10px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}

.ept-ahf-custom-preset-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 13px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.86);
}

.ept-ahf-custom-preset-item[data-ept-ahf-active-custom-preset="true"] {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
}

.ept-ahf-custom-preset-item__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ept-ahf-custom-preset-item__text strong,
.ept-ahf-custom-preset-item__text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ept-ahf-custom-preset-item__text strong {
  color: #0f172a;
  font-size: 12px;
}

.ept-ahf-custom-preset-item__text span {
  color: #64748b;
  font-size: 11px;
}

.ept-ahf-custom-preset-item__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ept-ahf-custom-preset-item__actions button[data-ept-ahf-delete-custom-preset] {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.07);
}

.ept-ahf-custom-preset-save button:hover,
.ept-ahf-custom-preset-save button:focus-visible,
.ept-ahf-custom-preset-item__actions button:hover,
.ept-ahf-custom-preset-item__actions button:focus-visible {
  outline: none;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

@media (max-width: 560px) {
  .ept-ahf-custom-preset-save,
  .ept-ahf-custom-preset-item {
    grid-template-columns: 1fr;
  }

  .ept-ahf-custom-preset-item__actions {
    justify-content: stretch;
  }

  .ept-ahf-custom-preset-item__actions button {
    flex: 1 1 auto;
  }
}


/* SHARED-WORKSPACE-FIX-3 compatibility: shared right-panel chrome now owns
   the compact identity row. Hide the old Add Header/Footer intro card inside
   the shared panel so the first active controls are visible immediately. */
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-tool-panel-mount] .ept-ahf-panel__header {
  display: none !important;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] [data-ept-tool-panel-mount] .ept-add-header-footer-tool {
  gap: 10px !important;
}

/* HEADER-POLISH-1 — Header Footer UI Final Polish.
   UI-only density pass for the fully unlocked Add Header/Footer panel.
   Keeps export, result guard, history and shared workspace contracts unchanged. */
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-add-header-footer-tool {
  gap: 9px !important;
}

.ept-ahf-polish-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 14px;
  padding: 9px 10px;
  color: #1e293b;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.72));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
}

.ept-ahf-polish-summary strong {
  min-width: 0;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.25;
}

.ept-ahf-polish-summary span {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.25;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-tab-section {
  gap: 10px;
  border-radius: 16px;
  padding: 12px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-section-title {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-section-title strong {
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-section-title span,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-help {
  font-size: 11px;
  line-height: 1.36;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-field {
  gap: 5px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-field label {
  font-size: 11.5px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-field input,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-field textarea,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-field select {
  border-radius: 11px;
  padding: 9px 10px;
  font-size: 12.5px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-field textarea {
  min-height: 64px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-grid,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-advanced-style-grid {
  gap: 8px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-token-box,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-free-position-box,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-image-box,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-custom-preset-box {
  gap: 8px;
  border-radius: 14px;
  padding: 10px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-token-list,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-token-format-list,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-token-template-list,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-preset-list {
  gap: 7px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-token-list button,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-token-format-list button,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-token-template-list button,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-preset-list button,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-custom-preset-save button,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-custom-preset-item__actions button {
  border-radius: 11px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-style-toggles {
  gap: 7px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-style-toggles label,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-checkline {
  border-radius: 12px;
  font-size: 11.5px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-style-toggles label {
  padding: 8px 9px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-summary > div {
  border-radius: 12px;
  padding: 8px 9px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-summary strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-summary span,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-readiness,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-target-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-position-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-style-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-image-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-drag-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-preset-feedback {
  font-size: 11.5px;
  line-height: 1.36;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-readiness,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-target-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-position-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-style-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-image-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-drag-feedback,
.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-preset-feedback {
  border-radius: 12px;
  padding: 8px 9px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-image-preview {
  min-height: 62px;
  border-radius: 12px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-image-preview img {
  max-height: 76px;
}

.ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-custom-preset-save {
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
}

@media (max-width: 560px) {
  .ept-ahf-polish-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .ept-ahf-polish-summary span {
    text-align: left;
    white-space: normal;
  }

  .ept-bench.ept-mode-production[data-context-key="add-header-footer"] .ept-ahf-summary {
    grid-template-columns: 1fr;
  }
}