/* Custom report builder (Material 3 components come from styles.css). */
.wide-only { display: inline-flex; }
.narrow-only { display: none; }

.builder {
  display: grid; gap: 24px; max-width: 1600px; margin: 0 auto; padding: 8px 24px 48px; align-items: start;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(0, 1.35fr);
  grid-template-areas: "setup catalogue report";
}
.pane { background: var(--md-surface-low); border-radius: var(--md-shape-xl); padding: 20px; min-width: 0; }
.setup-pane { grid-area: setup; display: grid; gap: 16px; }
.catalogue-pane { grid-area: catalogue; }
.report-pane { grid-area: report; position: sticky; top: 72px; }
.preview-wrap { max-width: 1600px; margin: 0 auto; padding: 0 24px 48px; }
.builder { padding-bottom: 24px; }
.page-progress { position: fixed; top: 64px; left: 0; right: 0; z-index: 25; }

.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; margin-bottom: 8px; }
.pane-head h2, .section-title { display: flex; align-items: center; gap: 8px; }
.pane-head h2 .material-symbols-outlined, .section-title .material-symbols-outlined { font-size: 20px; color: var(--md-primary); }
.section-title { margin-top: 8px; }
.btn.compact { height: 36px; padding: 0 12px; }

#birth-form { display: grid; gap: 16px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.row-lang { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; min-width: 0; }
.time-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-width: 0; }
.segmented.small label { padding: 0 10px; font-size: 13px; }
.segmented.small label:has(input:checked)::before { content: none; }
#city { padding-right: 44px; }

/* switches */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  padding: 4px 0;
}
.switch-row > span { display: flex; flex-direction: column; min-width: 0; }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; cursor: pointer; margin: 0;
  width: 52px; height: 32px; border-radius: 16px;
  background: var(--md-surface-highest); border: 2px solid var(--md-outline);
  transition: background .15s var(--md-ease), border-color .15s;
}
.switch::before {
  content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--md-outline); transform: translateY(-50%);
  transition: left .15s var(--md-ease), width .15s, height .15s, background .15s;
}
.switch:checked { background: var(--md-primary); border-color: var(--md-primary); }
.switch:checked::before { left: 22px; width: 24px; height: 24px; background: var(--md-on-primary); }
.switch:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.switch.small { width: 44px; height: 26px; }
.switch.small::before { left: 5px; width: 12px; height: 12px; }
.switch.small:checked::before { left: 19px; width: 18px; height: 18px; }

/* catalogue */
.search-field {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; margin-bottom: 12px;
  border-radius: 24px; background: var(--md-surface-highest); color: var(--md-on-surface-variant);
}
.search-field input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent;
  color: var(--md-on-surface); font: 400 16px/24px "Roboto", sans-serif;
}
.search-field:focus-within { outline: 2px solid var(--md-primary); }
.catalogue { display: grid; gap: 4px; }
.group-head {
  display: flex; align-items: center; gap: 8px; margin: 12px 4px 4px; color: var(--md-primary);
}
.group-head:first-child { margin-top: 0; }
.group-head .material-symbols-outlined { font-size: 18px; }
.subgroup-head { margin: 8px 4px 2px; color: var(--md-on-surface-variant); }
.block-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; min-height: 56px;
  border-radius: var(--md-shape-m); background: var(--md-surface); cursor: pointer;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.block-item:hover { background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface)); }
.block-item:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.block-item.added { border-color: var(--md-outline-variant); }
.block-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.block-text .label-large { overflow-wrap: anywhere; }
.block-text .body-small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.added-badge {
  flex: none; font: 500 11px/16px "Roboto", sans-serif; padding: 0 6px; border-radius: 8px;
  background: var(--md-tertiary-container); color: var(--md-on-tertiary-container);
}
.add-btn { color: var(--md-primary); }
.no-match { padding: 24px 8px; text-align: center; }

/* presets */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.presets-label { color: var(--md-on-surface-variant); margin-right: 4px; }
.chip.preset { cursor: pointer; }
.chip.preset:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.chip.preset .material-symbols-outlined { color: var(--md-primary); }
.report-hint { margin: 0 0 12px; }
.inline-icon { font-size: 16px; vertical-align: -3px; }

/* report list */
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.report-item {
  display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 0; min-height: 60px;
  border-radius: var(--md-shape-m); background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant); touch-action: pan-y; flex: none;
}
.report-item.dragging { box-shadow: var(--md-elev-3); background: var(--md-surface-high); position: relative; z-index: 5; }
.report-item.page-break { border-top: 3px solid var(--md-primary); }
.drag-handle {
  flex: none; width: 36px; align-self: stretch; display: grid; place-items: center; cursor: grab;
  color: var(--md-on-surface-variant); touch-action: none; border: none; background: transparent;
}
.drag-handle:active { cursor: grabbing; }
.report-index {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 500 12px/1 "Roboto", sans-serif; background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.report-text { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 8px; }
.report-text .label-large { overflow-wrap: anywhere; }
.newpage-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: none; padding: 0 4px; }
.newpage-toggle .label-medium { color: var(--md-on-surface-variant); }
.item-actions { display: flex; flex: none; }
.item-actions .icon-btn { width: 36px; height: 36px; }
.item-actions .icon-btn .material-symbols-outlined { font-size: 20px; }
.item-actions .icon-btn:disabled { opacity: .3; cursor: default; }
.empty-report { display: grid; justify-items: center; gap: 4px; padding: 32px 16px; text-align: center; color: var(--md-on-surface-variant); }
.empty-report .material-symbols-outlined { font-size: 36px; color: var(--md-primary); }
.generate-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--md-outline-variant);
}

/* preview */
.preview-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#pdf-frame { width: 100%; height: 85vh; min-height: 560px; border: none; border-radius: var(--md-shape-m); background: #fff; }

@media (min-width: 1201px) {
  .report-pane { max-height: calc(100vh - 88px); display: flex; flex-direction: column; }
  .report-list { overflow-y: auto; flex: 1 1 auto; min-height: 120px; scrollbar-width: thin; padding-right: 2px; }
}
@media (max-width: 1200px) {
  .builder { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
             grid-template-areas: "setup report" "catalogue report"; }
}
@media (max-width: 900px) {
  .builder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "setup" "report" "catalogue";
             padding: 0 12px 32px; gap: 16px; }
  .report-pane { position: static; }
  .preview-wrap { padding: 0 12px 32px; }
}
@media (max-width: 600px) {
  .wide-only { display: none; }
  .narrow-only { display: inline-grid; }
  .page-progress { top: 56px; }
  .pane { padding: 16px; border-radius: var(--md-shape-l); }
  .row-2 { grid-template-columns: minmax(0, 1fr); }
  .report-item { flex-wrap: wrap; padding: 6px 4px 6px 0; }
  .report-text { flex-basis: calc(100% - 72px); }
  .report-item .newpage-toggle { margin-left: 40px; }
  .item-actions { margin-left: auto; }
  .generate-bar { flex-direction: column; align-items: stretch; }
  .generate-bar .btn { width: 100%; }
  #pdf-frame { height: 70vh; min-height: 420px; }
}