/* ==========================================================================
   APF — Badge Fields (single-row cards + smooth dropdowns)
   Layout goals:
     • Each field = its own row/card (no multi-col grid in cards mode)
     • Collapsed row shows ONLY the field type pill (and chevron)
     • Smooth, styled dropdowns for “Edit” and “Position”
   Scopes:
     A) Panel/tokens
     B) Cards mode (ai-flexcards) — single-column rows
     C) Dropdown styling + animations
     D) Collapsed-state rules (type-only)
     E) Inputs, buttons, utilities
   ========================================================================== */

/* ============================== A) PANEL/TOKENS ============================== */
details[data-apf-collapsible="badge_fields"] .apf-badge__body.apf-fields-panel{
  --apf-font: var(--font-ui, system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);

  /* Dark-first palette with light fallbacks */
  --apf-surface-0: var(--surface-0,#0b0b0d);
  --apf-surface-1: var(--surface-1,#121217);
  --apf-surface-2: var(--surface-2,#1a1a22);
  --apf-border:    var(--border,#2a2d36);
  --apf-text:      var(--text-high,#e6edf7);
  --apf-text-mid:  var(--text-mid,#b8c3d4);
  --apf-c1:        var(--ctl-c1,#6aa6ff);
  --apf-c2:        var(--ctl-c2,#9e7bff);
  --apf-c3:        var(--ctl-c3,#35d3a7);
  --apf-danger:    var(--danger,#ff5c73);

  /* Surfaces */
  --tbl-bg:       color-mix(in oklch,var(--apf-surface-0) 70%,transparent);
  --tbl-row:      color-mix(in oklch,var(--apf-surface-1) 78%,transparent);
  --tbl-row-alt:  color-mix(in oklch,var(--apf-surface-1) 82%,transparent);
  --tbl-head:     color-mix(in oklch,var(--apf-surface-2) 84%,transparent);
  --tbl-bd:       color-mix(in oklch,var(--apf-border) 78%,transparent);
  --tbl-text:     var(--apf-text);
  --tbl-text-dim: var(--apf-text-mid);
  --tbl-focus:    color-mix(in oklch,var(--apf-c1) 45%,var(--tbl-bd));
  --tbl-accent1:  var(--apf-c1);
  --tbl-accent2:  var(--apf-c2);

  --radius:       clamp(10px,1rem,14px);
  --radius-sm:    10px;
  --t:            .18s cubic-bezier(.25,.9,.25,1);
  --t-slow:       .32s cubic-bezier(.2,.8,.2,1);

  font-family:var(--apf-font);
  color:var(--tbl-text);
}
@media (prefers-color-scheme: light){
  details[data-apf-collapsible="badge_fields"] .apf-badge__body.apf-fields-panel{
    --apf-text:#101318; --apf-text-mid:#4c5667;
    --tbl-bg:  color-mix(in oklch,#fff 92%,transparent);
    --tbl-row: color-mix(in oklch,#fff 98%,transparent);
    --tbl-row-alt:color-mix(in oklch,#f7f8fb 96%,transparent);
    --tbl-head:color-mix(in oklch,#f6f7fa 96%,transparent);
    --tbl-bd:  color-mix(in oklch,#ced6e0 70%,transparent);
  }
}

/* Wrapper */
details[data-apf-collapsible="badge_fields"] .apf-fields-table-wrap{
  background:var(--tbl-bg);
  border:1px solid var(--tbl-bd);
  border-radius:calc(var(--radius) - 2px);
  padding:.6rem;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  overflow:visible;
}

/* ============================== B) CARDS MODE =============================== */
/* Created by JS: <div class="ai-fields-list ai-flexcards"> */
details[data-apf-collapsible="badge_fields"] .ai-fields-list.ai-flexcards{
  display:grid;
  grid-template-columns:1fr;         /* <- single column: each element in its own row */
  gap:.7rem;
}

/* Card shell (row) */
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.ai-card{
  display:grid; gap:.55rem;
  background:var(--tbl-row);
  border:1px solid var(--tbl-bd);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:.65rem .7rem;
  position:relative;
  overflow:visible;
  transition:box-shadow var(--t),outline var(--t),border-color var(--t);
}
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.ai-card.row-active{
  border-color:var(--tbl-focus);
  outline:1.5px solid var(--tbl-focus);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}

/* Head: chevron + type pill + primary */
details[data-apf-collapsible="badge_fields"] .ai-card-head{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:.55rem; align-items:center; min-width:0;
}
details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-type{min-width:10ch}

/* Collapser */
details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-collapse{
  inline-size:1.45rem; block-size:1.45rem;
  display:grid; place-items:center;
  border-radius:calc(var(--radius-sm) - 3px);
  border:1px solid var(--tbl-bd);
  background:linear-gradient(180deg,var(--tbl-row),color-mix(in oklch,var(--tbl-row) 88%,#000));
  cursor:pointer; transition:background var(--t),transform var(--t);
}
details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-collapse::before{
  content:""; width:.6rem; height:.6rem;
  border-right:2px solid var(--tbl-text); border-bottom:2px solid var(--tbl-text);
  transform:rotate(45deg); transition:transform var(--t);
}
details[data-apf-collapsible="badge_fields"] .ai-row.is-collapsed .ai-card-head .ft-collapse::before{ transform:rotate(-45deg) }

/* Type pill */
details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-type-pill{
  appearance:none; min-width:90px; font-weight:900; letter-spacing:.01em;
  color:#fff; padding:.38rem .9rem .38rem .58rem; border-radius:999px;
  border:1px solid color-mix(in oklch,var(--tbl-bd) 85%,var(--tbl-accent2) 18%);
  background:linear-gradient(135deg,color-mix(in oklch,var(--tbl-accent1) 24%,#000),color-mix(in oklch,var(--tbl-accent2) 24%,#000));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 16px rgba(0,0,0,.16);
  cursor:pointer; transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
@media (hover:hover){
  details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-type-pill:hover{
    transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.28);
  }
}

/* Head: primary input (text, url, etc) kept inline but can hide when collapsed */
details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-primary{
  min-height:2rem; border:1px solid var(--tbl-bd); border-radius:var(--radius-sm);
  background:color-mix(in oklch,var(--tbl-row) 84%,transparent);
  color:var(--tbl-text); padding:.42rem .6rem; line-height:1.2;
  transition:border-color var(--t),box-shadow var(--t),background var(--t),opacity var(--t);
}
details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-img-wrap{
  display:flex; align-items:center; gap:.4rem; min-width:0; width:100%;
}
details[data-apf-collapsible="badge_fields"] .ai-card-head .ft-img-wrap .ft-src{flex:1 1 auto; min-width:0}

/* Thin id row + actions (will hide when collapsed) */
details[data-apf-collapsible="badge_fields"] .ai-card-row.row-id{
  display:grid; grid-template-columns:auto 1fr; gap:.45rem; align-items:center;
}
details[data-apf-collapsible="badge_fields"] .ai-card-row.row-actions{
  display:flex; gap:.4rem; justify-content:flex-end;
}

/* ======================= C) DROPDOWNS + ANIMATIONS ========================== */
/* Sections use <details class="ai-card-section"> with <summary> */
details[data-apf-collapsible="badge_fields"] .ai-card-section{
  border:1px solid var(--tbl-bd);
  border-radius:var(--radius-sm);
  background:color-mix(in oklch,var(--tbl-row) 92%,transparent);
  overflow:hidden;
  transition:border-color var(--t),background var(--t);
}

/* Styled summary header */
details[data-apf-collapsible="badge_fields"] .ai-card-section > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:.55rem .7rem; font-weight:900; letter-spacing:.01em;
  color:var(--tbl-text);
  background:
    linear-gradient(180deg,var(--tbl-row),color-mix(in oklch,var(--tbl-row) 86%,#000));
  position:relative;
}
/* Remove native marker */
details[data-apf-collapsible="badge_fields"] .ai-card-section > summary::-webkit-details-marker{display:none}

/* Chevron */
details[data-apf-collapsible="badge_fields"] .ai-card-section > summary::after{
  content:""; position:absolute; right:.7rem; top:50%;
  width:.55rem; height:.55rem; transform:translateY(-50%) rotate(-45deg);
  border-right:2px solid var(--tbl-text); border-bottom:2px solid var(--tbl-text);
  transition:transform var(--t);
}
details[data-apf-collapsible="badge_fields"] .ai-card-section[open] > summary::after{
  transform:translateY(-50%) rotate(45deg);
}

/* Animated content wrapper
   Markup expectation inside section:
   <div class="ai-sec-anim"><div class="ai-sec-inner">…fields…</div></div>
*/
details[data-apf-collapsible="badge_fields"] .ai-card-section .ai-sec-anim{
  display:block; overflow:hidden;
  max-height:0; opacity:.0;
  transition:max-height var(--t-slow), opacity var(--t), filter var(--t);
  filter:blur(2px);
}
details[data-apf-collapsible="badge_fields"] .ai-card-section[open] .ai-sec-anim{
  max-height:1000px; /* big enough for contents */
  opacity:1; filter:blur(0);
}

/* Fields grid inside content */
details[data-apf-collapsible="badge_fields"] .ai-card-section .ai-field{
  display:grid; grid-template-columns: 12ch 1fr; gap:.55rem;
  align-items:center; padding:.55rem .7rem; border-top:1px solid var(--tbl-bd);
}
details[data-apf-collapsible="badge_fields"] .ai-card-section .ai-label{
  font-weight:800; color:var(--tbl-text-mid); white-space:nowrap;
}
details[data-apf-collapsible="badge_fields"] .ai-card-section .dual{
  display:grid; grid-template-columns:1fr minmax(70px,100px); gap:.45rem; align-items:center;
}

/* Optional widths/height group that JS may reveal */
details[data-apf-collapsible="badge_fields"] .ai-card-section .wh-hidden{
  display:grid; gap:.5rem; padding:.4rem .7rem;
}

/* ======================= D) COLLAPSED (TYPE-ONLY) =========================== */
/* Toggle “type-only” by adding .is-collapsed to .ai-row (JS already does) */
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.is-collapsed .ai-card-row,
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.is-collapsed .ai-card-section,
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.is-collapsed .ai-card-head .ft-primary,
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.is-collapsed .ai-card-head-actions{
  display:none !important;
}
/* Keep: head with chevron + type pill only */
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.is-collapsed .ai-card-head{
  grid-template-columns:auto auto; /* chevron + type pill */
}
details[data-apf-collapsible="badge_fields"] .ai-flexcards .ai-row.is-collapsed{
  padding:.5rem .6rem;
}

/* ======================= E) INPUTS / BUTTONS / UTILS ======================== */
details[data-apf-collapsible="badge_fields"] .ai-flexcards input[type="text"],
details[data-apf-collapsible="badge_fields"] .ai-flexcards input[type="number"],
details[data-apf-collapsible="badge_fields"] .ai-flexcards input[type="color"],
details[data-apf-collapsible="badge_fields"] .ai-flexcards input[type="file"],
details[data-apf-collapsible="badge_fields"] .ai-flexcards select,
details[data-apf-collapsible="badge_fields"] .ai-flexcards textarea{
  appearance:none; box-sizing:border-box; width:100%;
  color:var(--tbl-text);
  background:color-mix(in oklch,var(--tbl-row) 86%,transparent);
  border:1px solid var(--tbl-bd); border-radius:var(--radius-sm);
  padding:.42rem .55rem; line-height:1.2;
  transition:border-color var(--t), box-shadow var(--t), background var(--t), transform var(--t);
}
details[data-apf-collapsible="badge_fields"] .ai-flexcards :where(input,select,textarea):focus{
  outline:none; border-color:var(--tbl-focus);
  background:color-mix(in oklch,var(--tbl-row) 76%,transparent);
  box-shadow:0 0 0 2px color-mix(in oklch,var(--tbl-accent1) 28%,transparent);
  transform:translateY(-1px);
}
details[data-apf-collapsible="badge_fields"] .ai-flexcards input[type="color"]{padding:.2rem; height:2rem}
details[data-apf-collapsible="badge_fields"] .ai-flexcards select{padding-right:1.4rem}

/* Subtoggle buttons (Edit/Position) kept but hidden when collapsed */
details[data-apf-collapsible="badge_fields"] .ai-card-head-actions{
  display:flex; gap:.35rem; align-items:center; justify-content:flex-end;
}
details[data-apf-collapsible="badge_fields"] .ai-subtoggle{
  appearance:none; padding:.32rem .6rem; border-radius:999px; font-weight:900; font-size:.86rem;
  color:var(--tbl-text-dim); background:color-mix(in oklch,var(--tbl-row) 82%,transparent);
  border:1px solid var(--tbl-bd); cursor:pointer;
  transition:color var(--t), background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
details[data-apf-collapsible="badge_fields"] .ai-subtoggle[aria-expanded="true"]{
  color:var(--tbl-text); border-color:var(--tbl-focus);
  background:linear-gradient(135deg,color-mix(in oklch,var(--tbl-accent1) 12%,var(--tbl-row)),color-mix(in oklch,var(--tbl-accent2) 12%,var(--tbl-row)));
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tbl-accent1) 24%,transparent);
}
@media (hover:hover){
  details[data-apf-collapsible="badge_fields"] .ai-subtoggle:hover{ transform:translateY(-1px) }
}

/* Upload minis & destructive */
details[data-apf-collapsible="badge_fields"] .btn-upload-mini{
  padding:.28rem .5rem; border-radius:.6rem; font-weight:900; font-size:.85rem; color:#fff;
  border:1px solid color-mix(in oklch,var(--tbl-accent1) 40%,var(--tbl-bd));
  background:linear-gradient(135deg,color-mix(in oklch,var(--tbl-accent1) 22%,#000),color-mix(in oklch,var(--tbl-accent2) 22%,#000));
}
details[data-apf-collapsible="badge_fields"] .button.button-link.btn-del{
  padding:.32rem .6rem; border-radius:.6rem; font-weight:900; font-size:.85rem; color:#fff;
  border:1px solid color-mix(in oklch,var(--apf-danger) 55%,#ffffff22);
  background:linear-gradient(135deg,color-mix(in oklch,var(--apf-danger) 70%,#000),color-mix(in oklch,var(--apf-danger) 50%,#000));
}

/* Dual (range+number) in cards */
details[data-apf-collapsible="badge_fields"] .dual input[type="range"]{
  --track-h:4px; --thumb:14px; height:1.7rem; background:transparent; border:0; padding:0;
}
details[data-apf-collapsible="badge_fields"] .dual input[type="range"]::-webkit-slider-runnable-track{
  height:var(--track-h); background:color-mix(in oklch,var(--tbl-text) 18%,transparent); border-radius:999px;
}
details[data-apf-collapsible="badge_fields"] .dual input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:var(--thumb); height:var(--thumb); border-radius:8px;
  background:linear-gradient(135deg,var(--tbl-accent1),var(--tbl-accent2));
  margin-top:calc((var(--track-h) - var(--thumb))/2);
  box-shadow:0 0 0 1px color-mix(in oklch,var(--tbl-accent2) 35%,transparent) inset;
}
details[data-apf-collapsible="badge_fields"] .dual input[type="range"]::-moz-range-thumb{
  width:var(--thumb); height:var(--thumb); border:0; border-radius:8px;
  background:linear-gradient(135deg,var(--tbl-accent1),var(--tbl-accent2));
}

/* Table mode (legacy) — keep minimal so cards are primary */
details[data-apf-collapsible="badge_fields"] .apf-fields-table-wrap .ai-fields-table{ display:none !important; }

/* Scrollbars */
details[data-apf-collapsible="badge_fields"] .apf-fields-table-wrap::-webkit-scrollbar{height:10px;width:10px}
details[data-apf-collapsible="badge_fields"] .apf-fields-table-wrap::-webkit-scrollbar-thumb{
  background:color-mix(in oklch,var(--tbl-bd) 90%,var(--tbl-accent2) 12%);
  border-radius:999px;border:2px solid transparent;background-clip:padding-box;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  details[data-apf-collapsible="badge_fields"] .apf-fields-table-wrap *{
    transition:none !important; filter:none !important;
  }
}
/* --- Compact, responsive columns inside the dropdowns --- */
/* Target the content wrapper the JS already creates: .ai-sec-inner */
.ai-fields-list .ai-card-section .ai-sec-inner{
  display:grid;
  /* 2–3 columns automatically, shrink to 1 on narrow panes */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 12px;
  align-items:start;
}

/* Each field becomes a little card */
.ai-fields-list .ai-card-section .ai-field{
  display:flex;
  flex-direction:column;        /* label on top, control below */
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--tbl-bd, #2a2d36);
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in oklch, var(--tbl-row, #121217) 94%, transparent);
}

/* Tighter labels */
.ai-fields-list .ai-card-section .ai-label{
  font-weight: 700;
  font-size: 12.5px;
  color: var(--tbl-text-mid, #b8c3d4);
}

/* Inputs fill their field card */
.ai-fields-list .ai-card-section .ai-field :where(input, select, textarea){
  width:100%;
  min-height: 34px;
}

/* Dual (range + number) sits as a row within the field card */
.ai-fields-list .ai-card-section .ai-field.dual{
  flex-direction: column;        /* label on top */
}

.ai-fields-list .ai-card-section .ai-field.dual > .ai-label{
  margin-bottom: 2px;
}

/* Keep range + number on one line, compact spacing */
.ai-fields-list .ai-card-section .ai-field.dual > input[type="range"],
.ai-fields-list .ai-card-section .ai-field.dual > input[type="number"]{
  margin: 0;
}

.ai-fields-list .ai-card-section .ai-field.dual{
  /* inner row for the two controls */
}
.ai-fields-list .ai-card-section .ai-field.dual{
  display:grid;
  grid-template-columns: 1fr minmax(70px,100px);
  gap: 8px;
}

/* Width/Height wrapper becomes two columns too */
.ai-fields-list .ai-card-section .wh-hidden{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 12px;
  padding: 0;                   /* match the new field cards */
}

/* Make Edit/Position summaries compact */
.ai-fields-list .ai-card-section > summary{
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.2;
}

/* Small screens: stack to single column */
@media (max-width: 640px){
  .ai-fields-list .ai-card-section .ai-sec-inner,
  .ai-fields-list .ai-card-section .wh-hidden{
    grid-template-columns: 1fr;
  }
}

/* Optional: reduce vertical padding in Position section to feel tighter */
.ai-fields-list .section-style .ai-sec-inner .ai-field{
  padding: 6px 8px;
}