/* Data Export (DataExport.jsx). Builds on index.css: lv-header, lv-search, lv-table, lv-pill, lv-cb,
   jb-input, jb-field, jb-empty, btn-add, btn-filter, btn-export, link-btn, auth-error, op-modal-check. */

.dx-page { display: flex; flex-direction: column; gap: 16px; }
.dx-page .lv-header { margin-bottom: 0; }

/* stepper */
.dx-stepper { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; }
.dx-step { display: flex; align-items: center; flex: 1; min-width: 0; }
.dx-step:first-child { flex: 0 0 auto; }
.dx-step + .dx-step::before { content: ''; flex: 1; height: 2px; background: #e3e9e4; margin: 0 10px; min-width: 12px; }
.dx-step--done + .dx-step--done::before { background: #125c58; }
.dx-step button { display: flex; align-items: center; gap: 8px; border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; color: #72807b; }
.dx-step-no { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #fff; border: 1px solid #d4e0d8; color: #72807b; flex-shrink: 0; }
.dx-step--done .dx-step-no { background: #125c58; border-color: #125c58; color: #fff; }
.dx-step-name { font-size: 14px; font-weight: 500; white-space: nowrap; }
.dx-step--on .dx-step-name { color: #193b38; font-weight: 700; }
.dx-step button:focus-visible { outline: 2px solid #8fbab5; outline-offset: 3px; border-radius: 8px; }

.dx-err { margin: 0; }
.dx-help { font-size: 13.5px; color: #72807b; margin: 0 0 -4px; }
.dx-muted { font-size: 12.5px; color: #72807b; margin: 0 0 10px; }
.dx-inline { font-weight: 400; margin: 0; }
.dx-pad { padding: 8px 0; }

/* cards */
.dx-card { background: #fff; border: 1px solid #e3e9e4; border-radius: 12px; padding: 16px; min-width: 0; }
.dx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dx-card-head h3, .dx-side h3 { font-size: 15px; font-weight: 700; color: #193b38; margin: 0; }
.dx-links { display: flex; gap: 14px; }
.dx-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dx-stack--tight { gap: 8px; }

/* step 1: categories | fields | selected */
.dx-fields { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 320px); gap: 14px; align-items: start; }
.dx-cats { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dx-cat { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; font-family: inherit; font-size: 14px; color: #3d524d; text-align: left; }
.dx-cat span:first-child { flex: 1; }
.dx-cat:hover { background: #fafbf8; }
.dx-cat--on { background: #e6f2ee; border-color: #c4ddd8; color: #103e3d; font-weight: 600; }
.dx-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #125c58; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.dx-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.dx-field { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #3d524d; }
.dx-field:hover { background: #fafbf8; }
.dx-field--on { background: #e6f2ee; }
.dx-field--on:hover { background: #e0edff; }
.dx-field-name { flex: 1; }
.dx-picked { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid #e3e9e4; border-radius: 8px; margin-bottom: 6px; font-size: 13.5px; color: #3d524d; }
.dx-picked span { flex: 1; min-width: 0; }
.dx-x { background: none; border: none; color: #99a39d; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px; font-family: inherit; }
.dx-x:hover { color: #dc2626; background: #fee2e2; }

/* steps 2 and 3: content + summary on the right */
.dx-with-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.dx-side-row { padding: 10px 0; border-top: 1px solid #eef3ef; }
.dx-side h3 { margin-bottom: 8px; }
.dx-side-head { display: flex; align-items: center; justify-content: space-between; }
.dx-side-head span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #72807b; }
.dx-side-val { font-size: 13.5px; color: #3d524d; margin-top: 4px; line-height: 1.45; }

.dx-range { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.dx-range .jb-input { min-height: 32px; box-sizing: border-box; }
.dx-sel { min-height: 32px; box-sizing: border-box; cursor: pointer; }
.dx-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border: 1px solid #e3e9e4; border-radius: 10px; background: #fafbf8; }
.dx-filter .dx-x { margin-left: auto; }
.dx-val { width: 150px; min-height: 32px; box-sizing: border-box; }
.dx-arrow { color: #99a39d; font-size: 12px; }

/* chips */
.dx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dx-chip-wrap { display: inline-flex; gap: 6px; align-items: center; }
.dx-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid #d4e0d8; background: #fff; color: #3d524d; font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.dx-chip:hover { border-color: #99a39d; }
.dx-chip--on { background: #125c58; border-color: #125c58; color: #fff; }
.dx-chip--on:hover { background: #103e3d; border-color: #103e3d; }

/* grouping */
.dx-grp-on { margin-bottom: 4px; }
.dx-grp { display: flex; flex-direction: column; gap: 10px; transition: opacity .15s; }
.dx-grp--off { opacity: .45; pointer-events: none; }
.dx-label { font-size: 12px; font-weight: 700; color: #3d524d; margin-top: 6px; }
.dx-agg-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dx-agg-name { font-size: 13px; color: #3d524d; min-width: 170px; }

/* step 4 */
.dx-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dx-summary .btn-filter { padding: 5px 10px; font-size: 12.5px; }
.dx-line { font-size: 13px; color: #3d524d; margin-bottom: 4px; }
.dx-line b { color: #193b38; font-weight: 600; }
.dx-total { font-size: 13px; color: #3d524d; white-space: nowrap; }
.dx-table-wrap { overflow-x: auto; border: 1px solid #e3e9e4; border-radius: 10px; transition: opacity .15s; }
.dx-busy { opacity: .5; pointer-events: none; }
.dx-table th { cursor: grab; user-select: none; border-bottom: 1px solid #e3e9e4; }
.dx-table th:hover { color: #193b38; }
.dx-table td { white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.dx-num { text-align: right; font-variant-numeric: tabular-nums; }
.dx-th--sorted { background: #fafbf8 !important; color: #193b38 !important; }
.dx-th--drag { opacity: .4; }
.dx-grip { color: #d4e0d8; margin-right: 5px; }
.dx-sort { color: #125c58; margin-left: 5px; font-size: 10px; }
.dx-tz { margin: 8px 0 0; }
.dx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.dx-actions .dx-muted { margin: 0; }
.dx-actions .btn-export:disabled { background: #8fbab5; cursor: not-allowed; }
.dx-pager { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dx-pager .dx-muted { margin: 0; }
.dx-pg { padding: 5px 10px; min-width: 32px; justify-content: center; }
.dx-pg:disabled { opacity: .45; cursor: not-allowed; }
.dx-page-of { font-size: 12.5px; color: #3d524d; min-width: 90px; text-align: center; }
.dx-note { margin-top: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 13px; padding: 9px 12px; border-radius: 8px; }

/* footer */
.dx-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dx-footer-left { display: flex; gap: 8px; }
.dx-reset { color: #72807b; }
.dx-next { padding: 10px 18px; font-size: 14px; }

@media (max-width: 1100px) {
  .dx-fields { grid-template-columns: 200px minmax(0, 1fr); }
  .dx-fields > :last-child { grid-column: 1 / -1; }
  .dx-with-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .dx-fields { grid-template-columns: minmax(0, 1fr); }
  .dx-cats { flex-direction: row; flex-wrap: wrap; }
  .dx-cat { width: auto; }
  .dx-step-name { display: none; }
  .dx-step--on .dx-step-name { display: inline; }
  .dx-pager { margin-left: 0; }
  .dx-val { width: 120px; }
}