/* ============================================================
   fields.css — new field types (select/date/checkbox/currency/
   long text/file), the board toolbar (group-by / sum-by) and the
   per-column total. Loaded last so it can lean on earlier atoms.
   ============================================================ */

/* ---- option colour system --------------------------------
   Each option carries one seed colour (--oc); chips, dots and
   column markers derive tint / text from it with color-mix, so
   they stay legible in both light and dark themes. */
.opt--honey{--oc:#D99A1C}
.opt--green{--oc:#3E8E5A}
.opt--blue{--oc:#3B76C0}
.opt--purple{--oc:#7A5AB0}
.opt--red{--oc:#C0553B}
.opt--teal{--oc:#2E9B92}
.opt--pink{--oc:#C0568F}
.opt--gray{--oc:#7C766B}

.selchip{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  border-radius:var(--r-pill);padding:3px 10px;font-size:.82rem;font-weight:600;
  background:color-mix(in srgb, var(--oc,var(--muted)) 15%, var(--surface));
  color:color-mix(in srgb, var(--oc,var(--muted)) 68%, var(--ink));
  border:1px solid color-mix(in srgb, var(--oc,var(--muted)) 32%, transparent);
}
.selchip--sm{font-size:.75rem;padding:2px 9px}
.selchip__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.optdot{width:11px;height:11px;border-radius:4px;flex:none;transform:rotate(45deg);background:var(--oc,var(--line-2))}

/* coloured stage dot on a grouped-by-select column */
.kcol__dot{background:var(--oc,var(--accent))}

/* ---- select options editor (add-field form) ---- */
.optedit{display:flex;flex-direction:column;gap:7px;padding:1px 0}
.optedit__row{display:flex;align-items:center;gap:8px}
.optedit__name{flex:1;min-width:0;border:none;background:var(--sink);border-radius:var(--radius-xs);padding:7px 10px;font-size:.88rem}
.optedit__name:focus{outline:none;background:var(--accent-tint)}
.optedit__x{padding:4px}
.optedit__add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line-2);background:transparent;color:var(--muted);border-radius:var(--r-pill);padding:4px 11px;font-weight:600;font-size:.8rem}
.optedit__add:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint)}

/* ---- currency symbol picker ---- */
.addfield__symrow{flex-wrap:wrap}
.addfield__lbl{color:var(--muted);font-size:.82rem}
.symchip{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--radius-xs);min-width:30px;padding:5px 9px;font-weight:600;font-size:.92rem;color:var(--ink-2)}
.symchip--on{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-ink)}

/* ---- checkbox toggle (drawer) ---- */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;position:relative}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__knob{position:relative;width:38px;height:22px;border-radius:var(--r-pill);background:var(--line-2);transition:background .15s ease;flex:none}
.switch__knob::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform .16s cubic-bezier(.2,.9,.3,1.2)}
.switch--on .switch__knob{background:var(--accent)}
.switch--on .switch__knob::after{transform:translateX(16px)}
.switch__lbl{font-size:.9rem;color:var(--ink-2);font-weight:500}

/* ---- currency input (drawer) ---- */
.curr{display:flex;align-items:stretch}
.curr__sym{display:grid;place-items:center;padding:0 .6em;color:var(--muted);background:var(--sink);border:1px solid var(--line-2);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);font-weight:600}
.curr .input{border-radius:0 var(--radius-sm) var(--radius-sm) 0;flex:1;min-width:0}

/* ---- long-text (drawer) ---- */
.input--area{resize:none;min-height:2.5em;line-height:1.45;overflow:hidden}

/* ---- file field (drawer) ---- */
.filef{display:flex;flex-direction:column;gap:8px}
.filef__list{display:flex;flex-direction:column;gap:6px}
.fileitem{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:6px 9px;font-size:.86rem}
.fileitem__ic{color:var(--muted);display:grid;place-items:center;flex:none}
.fileitem__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
a.fileitem__name:hover{color:var(--accent-ink);text-decoration:underline}
.fileitem__sz{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--muted);flex:none}
.fileitem__x{flex:none}
.filef__actions{display:flex;gap:8px}

/* ---- board toolbar: group-by / sum-by ---- */
.board-scope{flex:1;min-height:0;display:flex;flex-direction:column}
.board-toolbar{display:flex;align-items:center;gap:10px;padding:2px 22px 10px;flex-wrap:wrap}
.ctl{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 8px 5px 12px;color:var(--muted)}
.ctl__lbl{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.board-total{margin-left:auto;font-size:.9rem;color:var(--ink-2)}
.board-total b{font-family:"IBM Plex Mono",monospace;color:var(--ink);font-weight:600}

/* ---- per-column total + read-only column name ---- */
.kcol__foot{margin-top:2px;padding:8px 6px 3px;border-top:1px dashed var(--line-2);font-size:.84rem;color:var(--ink-2);font-family:"IBM Plex Mono",monospace;display:flex;gap:7px;align-items:center}
.kcol__foot-k{color:var(--muted)}
.kcol--none{opacity:.9}
.kcol__name--ro{flex:1;min-width:0;padding:3px 5px;font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- card chips for the new types ---- */
.kchip-sel{display:inline-flex;flex-wrap:wrap;gap:4px}
.chip--check{background:var(--good-tint);color:var(--good);gap:5px;font-weight:600}

/* ---- table cells for the new types ---- */
.td-center{text-align:center}
.cell-check{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;margin:0 auto;display:block}
.cell-input--date{font-family:inherit;color:var(--ink)}

/* ---- field editing: entry points ---- */
.th-edit{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;cursor:pointer}
.th-edit:hover{color:var(--ink-2)}
.th-edit__ic{opacity:0;transition:opacity .12s ease;color:var(--muted)}
.th-edit:hover .th-edit__ic{opacity:.9}
.dfield__label{position:relative}
.dfield__edit{opacity:0;border:none;background:transparent;color:var(--muted);padding:2px;border-radius:5px;display:inline-grid;place-items:center;transition:opacity .12s ease}
.dfield:hover .dfield__edit,.dfield__edit:focus-visible{opacity:1}
.dfield__edit:hover{background:var(--sink);color:var(--ink)}

/* restore hidden fields (table foot) */
.table-foot{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.foot-hidden-lbl{color:var(--muted);font-size:.8rem;margin-left:12px}
.foot-hidden{display:inline-flex;align-items:center;gap:5px;border:1px dashed var(--line-2);background:transparent;color:var(--muted);border-radius:var(--r-pill);padding:4px 10px;font-size:.8rem;font-weight:600}
.foot-hidden:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint)}

/* ---- field editor panel ---- */
.fe-locked{display:flex;align-items:center;gap:8px;background:var(--sink);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;color:var(--ink-2);font-size:.85rem}
.fe-hint{color:var(--muted);font-size:.8rem;margin-top:6px}
.fe-multi{margin-top:2px}
.fe-order{display:flex;align-items:center;gap:12px}
.fe-pos{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--muted)}
.optdot--btn{border:none;cursor:pointer;padding:0}
.optdot--btn:hover{outline:2px solid var(--line-2);outline-offset:2px}
.optdot--btn[disabled]{cursor:default;opacity:.6}
.fe-order-hint{line-height:1.4;margin-top:8px}
.fe-grip-glyph{letter-spacing:-2px;color:var(--muted)}

/* field editor stacks to the LEFT of the record drawer: narrower panel,
   its right offset animates if the drawer opens/closes while it's open */
.slideover__panel{transition:transform .3s cubic-bezier(.22,.61,.36,1), margin-right .3s cubic-bezier(.22,.61,.36,1)}
.slideover__panel--narrow{width:min(42vw,440px)}
@media (max-width:900px){ .slideover__panel--narrow{width:100%} }

/* ---- reorder fields by dragging in the record drawer ---- */
.dfield__grip{color:var(--line-2);cursor:grab;display:inline-grid;place-items:center;padding:2px;border-radius:5px;margin-left:-4px;flex:none;touch-action:none}
.dfield__grip:hover{color:var(--muted);background:var(--sink)}
.dfield__grip:active{cursor:grabbing}
.dfield--dragging{opacity:.35}
.dfield-drop{height:0;border-top:2px dashed var(--accent);margin:3px 6px}
.drag-ghost.dfield-ghost{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:6px 8px;box-shadow:var(--shadow-pop)}