/* ─────────────────────────────────────────────────────────────────────────
   css/flex-inventory.css
   Scoped to flex-inventory.html only. Self-contained token block (--fi-*),
   matches the project's per-app CSS convention (no shared base file).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --fi-bg: #f5f6fa;
  --fi-surface: #ffffff;
  --fi-surface-alt: #f9fafc;
  --fi-border: #e2e5ec;
  --fi-text: #1a1f36;
  --fi-text-muted: #667085;
  --fi-accent: #4f46e5;
  --fi-accent-hover: #4338ca;
  --fi-accent-soft: #eef0fe;
  --fi-danger: #dc2626;
  --fi-danger-soft: #fef2f2;
  --fi-success: #16a34a;
  --fi-success-soft: #f0fdf4;
  --fi-warning: #b45309;
  --fi-warning-soft: #fffbeb;
  --fi-radius: 14px;
  --fi-radius-sm: 8px;
  --fi-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
  --fi-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fi-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

.fi-body {
  margin: 0;
  min-height: 100vh;
  background: var(--fi-bg);
  color: var(--fi-text);
  font-family: var(--fi-font);
  line-height: 1.5;
}

.fi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--fi-border);
  background: var(--fi-surface);
  color: var(--fi-text);
  border-radius: var(--fi-radius-sm);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.fi-btn:hover { border-color: #c9cee0; background: var(--fi-surface-alt); }
.fi-btn:active { transform: translateY(1px); }
.fi-btn:disabled { opacity: .5; cursor: not-allowed; }
.fi-btn-primary { background: var(--fi-accent); border-color: var(--fi-accent); color: #fff; }
.fi-btn-primary:hover { background: var(--fi-accent-hover); border-color: var(--fi-accent-hover); }
.fi-btn-ghost { background: transparent; border-color: transparent; }
.fi-btn-ghost:hover { background: var(--fi-surface-alt); }
.fi-btn-danger { color: var(--fi-danger); }
.fi-btn-danger:hover { background: var(--fi-danger-soft); border-color: #fecaca; }
.fi-btn-sm { padding: 5px 10px; font-size: 12.5px; }
.fi-link-btn {
  background: none; border: none; color: var(--fi-accent); font-weight: 600;
  font-size: 13.5px; cursor: pointer; padding: 4px 0; font-family: inherit;
}
.fi-link-btn:hover { text-decoration: underline; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius-sm);
  background: var(--fi-surface);
  color: var(--fi-text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--fi-accent-soft);
  outline-offset: 1px;
  border-color: var(--fi-accent);
}
textarea { font-family: var(--fi-mono); resize: vertical; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--fi-text-muted); margin-bottom: 4px; }

.fi-status { font-size: 13px; margin: 8px 0 0; min-height: 18px; }
.fi-status.fi-status-ok { color: var(--fi-success); }
.fi-status.fi-status-err { color: var(--fi-danger); }

/* ── Brand mark (shared between home + dashboard headers) ───────────────── */
.fi-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--fi-accent); color: #fff;
  font-weight: 800; font-size: 15px; letter-spacing: .02em;
  text-decoration: none; flex-shrink: 0;
}

/* ── HOME VIEW ────────────────────────────────────────────────────────── */
.fi-home { max-width: 880px; margin: 0 auto; padding: 56px 20px 80px; }
.fi-home-header { text-align: center; margin-bottom: 40px; }
.fi-home-header .fi-brand-mark { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; margin: 0 auto 16px; }
.fi-home-header h1 { font-size: 28px; margin: 0 0 8px; }
.fi-home-header p { color: var(--fi-text-muted); margin: 0; font-size: 15px; }

.fi-home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
@media (max-width: 640px) { .fi-home-actions { grid-template-columns: 1fr; } }

.fi-card {
  background: var(--fi-surface); border: 1px solid var(--fi-border);
  border-radius: var(--fi-radius); box-shadow: var(--fi-shadow); padding: 22px;
}
.fi-card h2 { font-size: 15px; margin: 0 0 12px; }
.fi-card input { margin-bottom: 10px; }
.fi-card .fi-btn { width: 100%; justify-content: center; }

.fi-recent h2 { font-size: 15px; margin: 0 0 12px; }
.fi-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fi-recent-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-sm);
  padding: 12px 16px; text-decoration: none; color: var(--fi-text);
}
.fi-recent-item:hover { border-color: var(--fi-accent); }
.fi-recent-item .fi-recent-name { font-weight: 600; }
.fi-recent-item .fi-recent-time { font-size: 12.5px; color: var(--fi-text-muted); flex-shrink: 0; }
.fi-empty-note { color: var(--fi-text-muted); font-size: 14px; }

/* ── DASHBOARD VIEW ───────────────────────────────────────────────────── */
.fi-dashboard { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; }

.fi-header {
  display: flex; align-items: center; gap: 14px;
  background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius);
  box-shadow: var(--fi-shadow); padding: 14px 18px; margin-bottom: 20px;
}
.fi-header-title { flex: 1; min-width: 0; }
.fi-list-name-input {
  border: 1px solid transparent; background: transparent; font-size: 18px; font-weight: 700;
  padding: 4px 8px; margin-left: -8px; width: auto; max-width: 100%;
}
.fi-list-name-input:hover, .fi-list-name-input:focus { border-color: var(--fi-border); background: var(--fi-surface); }
.fi-list-meta { display: block; font-size: 12.5px; color: var(--fi-text-muted); padding: 0 8px; }

.fi-error-banner {
  background: var(--fi-danger-soft); border: 1px solid #fecaca; color: var(--fi-danger);
  border-radius: var(--fi-radius-sm); padding: 14px 16px; font-size: 14px; margin-bottom: 20px;
}

/* ── Maintenance banner (Phase 3 — reconcile auto-run / stuck / failed) ──── */
.fi-maintenance-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-radius: var(--fi-radius-sm); padding: 12px 16px; font-size: 13.5px; margin-bottom: 20px;
}
.fi-maintenance-running {
  background: var(--fi-accent-soft); border: 1px solid #d7d9fb; color: var(--fi-accent-hover);
}
.fi-maintenance-failed {
  background: var(--fi-warning-soft); border: 1px solid #fde68a; color: var(--fi-warning);
}

.fi-fields-panel, .fi-field-form-panel, .fi-items-placeholder {
  background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius);
  box-shadow: var(--fi-shadow); padding: 20px; margin-bottom: 20px;
}
.fi-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fi-panel-head h2 { font-size: 16px; margin: 0; }

/* ── "Mga field" panel collapse toggle ───────────────────────────────────── */
.fi-panel-collapse-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 2px 0; margin: 0;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--fi-text); cursor: pointer;
}
.fi-panel-collapse-btn:hover { color: var(--fi-accent); }
.fi-panel-collapse-btn:focus-visible { outline: 2px solid var(--fi-accent-soft); outline-offset: 2px; border-radius: 4px; }
.fi-collapse-icon { display: inline-block; font-size: 11px; color: var(--fi-text-muted); }
.fi-panel-collapse-btn:hover .fi-collapse-icon { color: var(--fi-accent); }
#fi-fields-count { font-weight: 500; color: var(--fi-text-muted); font-size: 13px; }

.fi-fields-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fi-field-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--fi-border); border-radius: var(--fi-radius-sm); padding: 10px 12px;
}
.fi-field-row.fi-field-row-title { border-color: var(--fi-accent); background: var(--fi-accent-soft); }
.fi-field-row.fi-field-row-archived { opacity: .7; }
.fi-field-order-btns { display: flex; flex-direction: column; gap: 2px; }
.fi-field-order-btns button {
  border: none; background: none; cursor: pointer; color: var(--fi-text-muted);
  font-size: 11px; line-height: 1; padding: 3px; font-family: inherit;
}
.fi-field-order-btns button:hover { color: var(--fi-accent); }
.fi-field-order-btns button:disabled { opacity: .3; cursor: not-allowed; }
.fi-field-main { flex: 1; min-width: 0; }
.fi-field-label { font-weight: 600; }
.fi-field-title-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fi-accent); margin-left: 6px;
}
.fi-field-meta { font-size: 12.5px; color: var(--fi-text-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 8px; }
.fi-field-type-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--fi-surface-alt); border: 1px solid var(--fi-border); color: var(--fi-text-muted);
}
.fi-field-actions { display: flex; gap: 6px; flex-shrink: 0; }

.fi-archived-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--fi-border); }
.fi-fields-list-archived { margin-top: 10px; }

.fi-field-flags { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
.fi-field-flags label {
  display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--fi-text);
  margin-bottom: 0; font-size: 13.5px;
}
.fi-field-flags input[type="checkbox"] { width: auto; }

.fi-field-extra { margin: 14px 0; }
.fi-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fi-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--fi-surface-alt);
  border: 1px solid var(--fi-border); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px;
}
.fi-chip button {
  border: none; background: none; cursor: pointer; color: var(--fi-text-muted); font-size: 13px;
  width: 18px; height: 18px; border-radius: 50%; line-height: 1; padding: 0;
}
.fi-chip button:hover { background: var(--fi-danger-soft); color: var(--fi-danger); }
.fi-chip-add { display: flex; gap: 8px; }
.fi-chip-add input { flex: 1; }

.fi-formula-toolbar { margin-bottom: 8px; }
.fi-formula-toolbar select { max-width: 260px; }
.fi-formula-preview {
  font-family: var(--fi-mono); font-size: 13px; color: var(--fi-text-muted);
  background: var(--fi-surface-alt); border-radius: var(--fi-radius-sm); padding: 8px 12px; margin-top: 8px;
  min-height: 18px; word-break: break-word;
}

.fi-form-error {
  background: var(--fi-danger-soft); border: 1px solid #fecaca; color: var(--fi-danger);
  border-radius: var(--fi-radius-sm); padding: 10px 12px; font-size: 13.5px; margin: 10px 0;
}
.fi-field-form-actions { display: flex; gap: 10px; margin-top: 16px; }

/* ── Grouping + summary rows (subtotals planning §9, Phase A5) ──────────── */
.fi-group-field-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.fi-group-field-row label { margin: 0; flex-shrink: 0; }
.fi-group-field-row select { width: auto; min-width: 220px; flex: 1; max-width: 320px; }
.fi-summary-rows-section { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--fi-border); }
.fi-summary-rows-section h3 { font-size: 14px; margin: 0; }
.fi-summary-formula-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fi-summary-insert-group { display: flex; gap: 6px; align-items: center; }
.fi-summary-insert-group select { width: auto; min-width: 100px; }
.fi-summary-formula-toolbar > select { width: auto; min-width: 180px; }

/* ── Summary-row BUILDER (Phase 6, summary-formula-builder planning) ────── */
.fi-summary-blankaszero-row {
  display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--fi-text);
  margin: 14px 0 0; font-size: 13.5px;
}
.fi-summary-blankaszero-row input[type="checkbox"] { width: auto; }

.fi-summary-builder-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fi-summary-builder-step {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border: 1px solid var(--fi-border); border-radius: var(--fi-radius-sm); padding: 8px 10px;
  background: var(--fi-surface-alt);
}
.fi-summary-builder-step select { width: auto; min-width: 90px; }
.fi-summary-builder-step select.fi-summary-step-kind { min-width: 150px; }
.fi-summary-builder-step input.fi-summary-step-number { width: auto; min-width: 100px; }
.fi-summary-builder-step .fi-summary-step-remove { margin-left: auto; }
.fi-summary-step-select { width: auto; margin: 0; accent-color: var(--fi-accent); }

.fi-summary-builder-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

.fi-formula-value-preview {
  font-family: var(--fi-mono); font-weight: 700; font-size: 15px; color: var(--fi-text);
}

/* The builder/Advanced mode switches reuse the app's shared .fi-link-btn
   (defined once, near the top of this file) — only the spacing below the
   preview lines is specific to them, so ONLY that is scoped here. An earlier
   pass redefined .fi-link-btn wholesale down here, which silently restyled
   the two pre-existing link buttons elsewhere in the app ("Ipakita ang mga
   naka-archive na field" and "Alisin ang mga filter"). */
#fi-summary-builder-to-advanced, #fi-summary-advanced-to-builder { margin-top: 4px; }

/* ── "Pangkatin" nested groups (Phase 7) — a group's <li> stacks its header,
   nested step list, and inner actions VERTICALLY instead of the flex ROW
   every plain step uses, so it reads as one visually-distinct block. ──── */
.fi-summary-builder-group {
  flex-direction: column; align-items: stretch; gap: 0;
  border-color: var(--fi-accent); background: var(--fi-accent-soft);
  padding: 10px;
  /* MUST override the flex-wrap:wrap inherited from .fi-summary-builder-step.
     That value is correct for a plain step (a ROW of controls that should
     wrap onto extra LINES), but on this column-direction container wrapping
     spills content into extra COLUMNS instead — so the group grew sideways
     and dragged its whole subtree past the container, measured at 176px off
     the edge of a 375px phone as soon as anything was grouped. */
  flex-wrap: nowrap;
}
.fi-summary-group-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fi-summary-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fi-accent);
}
.fi-summary-builder-nested {
  margin: 10px 0 10px 20px; padding-left: 12px; border-left: 2px solid var(--fi-accent);
}
.fi-summary-group-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 20px; }

/* ── Phone layout ────────────────────────────────────────────────────────────
   iOS Safari zooms the whole page in whenever a focused field's font-size is
   under 16px, and never zooms back out — at the 14px base every form in this
   app triggered it, not just the builder. Bumping to 16px on small screens is
   the standard way to suppress that.

   The builder's desktop min-widths cannot fit a phone once nesting indents
   them, so each wide control takes its own full-width line instead, and the
   per-level indent shrinks from 20px to 8px to keep three levels usable. */
@media (max-width: 640px) {
  input[type="text"], input[type="number"], select, textarea { font-size: 16px; }

  .fi-summary-builder-step select,
  .fi-summary-builder-step input.fi-summary-step-number { min-width: 0; }
  .fi-summary-builder-step select.fi-summary-step-kind,
  .fi-summary-builder-step select.fi-summary-step-field,
  .fi-summary-builder-step select.fi-summary-step-choice,
  .fi-summary-builder-step select.fi-summary-step-scope,
  .fi-summary-builder-step select.fi-summary-step-row,
  .fi-summary-builder-step input.fi-summary-step-number { flex: 1 1 100%; }

  .fi-summary-builder-nested { margin-left: 8px; padding-left: 8px; }
  .fi-summary-group-actions { margin-left: 8px; }
  .fi-summary-builder-toolbar .fi-btn { flex: 1 1 auto; justify-content: center; }
}

.fi-items-panel { background: var(--fi-surface); border: 1px solid var(--fi-border); border-radius: var(--fi-radius); box-shadow: var(--fi-shadow); padding: 20px; margin-bottom: 20px; }

/* ── Toolbar: search + filters toggle + sort ─────────────────────────────── */
.fi-items-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.fi-items-toolbar #fi-search-input { flex: 1; min-width: 180px; }
.fi-sort-group { display: flex; align-items: center; gap: 6px; }
.fi-sort-label { margin: 0; font-size: 13px; color: var(--fi-text-muted); white-space: nowrap; }
.fi-sort-group select { width: auto; min-width: 140px; }

.fi-filters-panel {
  background: var(--fi-surface-alt); border: 1px solid var(--fi-border); border-radius: var(--fi-radius-sm);
  padding: 14px; margin-bottom: 14px;
}
.fi-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.fi-filter-row:last-of-type { margin-bottom: 0; }
.fi-filter-row label { margin: 0; min-width: 120px; flex-shrink: 0; }
.fi-filter-row input, .fi-filter-row select { width: auto; min-width: 140px; flex: 1; max-width: 220px; }
.fi-filter-range { display: flex; align-items: center; gap: 6px; }
.fi-filter-range span { color: var(--fi-text-muted); font-size: 12.5px; }

/* ── Table ────────────────────────────────────────────────────────────── */
.fi-table-wrap { overflow-x: auto; border: 1px solid var(--fi-border); border-radius: var(--fi-radius-sm); }
.fi-items-table { width: 100%; border-collapse: collapse; font-size: 13.5px; white-space: nowrap; }
.fi-items-table th, .fi-items-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--fi-border); }
.fi-items-table thead th {
  background: var(--fi-surface-alt); font-weight: 700; color: var(--fi-text-muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0;
}
.fi-items-table th.fi-sortable { cursor: pointer; user-select: none; }
.fi-items-table th.fi-sortable:hover { color: var(--fi-accent); }
.fi-items-table tbody tr:hover { background: var(--fi-surface-alt); }
.fi-items-table tbody tr:last-child td { border-bottom: none; }
.fi-cell-blank { color: #b0b6c4; }
.fi-cell-missing-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--fi-warning);
  background: var(--fi-warning-soft); border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}
.fi-cell-stale-badge {
  display: inline-block; font-size: 10.5px; color: var(--fi-text-muted); font-style: italic; margin-left: 4px;
}
.fi-cell-divzero {
  color: var(--fi-text-muted); cursor: help; border-bottom: 1px dotted var(--fi-text-muted);
}
.fi-items-totals-row td { font-weight: 700; background: var(--fi-surface-alt); border-top: 2px solid var(--fi-border); }
.fi-items-totals-row.fi-totals-stale td { border-top-style: dashed; color: var(--fi-text-muted); cursor: help; }

/* ── Mobile totals block (Phase 2, mobile-totals plan) ───────────────────
   The tfoot Kabuuan row splits its label and each field's number across
   separate <td>s aligned to that field's own column. On a phone the table
   overflows sideways well before every column fits (measured: a 4-column
   list already needs 689px against a ~291px visible strip), so a showTotal
   field past the visible edge has no visible number without swiping. This
   block re-lists the same server-computed totals as stacked "label: value"
   lines instead — the same pattern renderSummaryValueRows() already uses
   successfully on mobile (one cell, not split across columns).
   `:empty` hides the block when there's nothing to show (no items, or no
   showTotal fields) without a separate JS-toggled class. Only visible
   ≤640px — #fi-items-totals-row is hidden there so the same numbers never
   show twice; above that breakpoint this block stays display:none and the
   existing tfoot row is untouched. */
.fi-mobile-totals { display: none; }
.fi-mobile-totals-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.fi-mobile-totals-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--fi-border); font-size: 13.5px;
}
.fi-mobile-totals-row:last-of-type { border-bottom: none; }
.fi-mobile-totals-label { color: var(--fi-text-muted); }
.fi-mobile-totals-value { font-weight: 700; }
.fi-mobile-totals-stale-note { font-size: 12px; color: var(--fi-text-muted); font-style: italic; margin: 8px 0 0; }

/* ── Mobile group-subtotal block (Phase 3, mobile-totals plan) — same
   ≤640px-only, :empty-hides pattern as .fi-mobile-totals above, but a
   <details> so N groups worth of totals stay collapsed by default instead
   of dumping N*M lines under the item list. Reuses .fi-mobile-totals-title/
   -row/-stale-note for the entries inside it. ─────────────────────────── */
.fi-mobile-group-totals { display: none; }
.fi-mobile-group-totals summary {
  font-weight: 700; font-size: 13px; cursor: pointer; color: var(--fi-accent);
}
.fi-mobile-group-totals summary:hover { color: var(--fi-accent-hover); }
.fi-mobile-group-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--fi-border); }
.fi-mobile-group-block:first-of-type { margin-top: 12px; }
.fi-mobile-group-block .fi-mobile-totals-title { font-size: 12.5px; }

/* ── Mobile summary-formula block (Phase 4, mobile-totals plan) — same
   ≤640px-only, :empty-hides pattern, reusing .fi-mobile-totals-row/-label/
   -value for each named summary row's "label: value" line. Unlike the group
   block this isn't collapsible — summary rows are user-defined named totals,
   not one entry per group choice, so there's no natural collapsed/expanded
   split to make. ─────────────────────────────────────────────────────────  */
.fi-mobile-summary-values { display: none; }

@media (max-width: 640px) {
  #fi-items-totals-row { display: none; }
  .fi-group-subtotal-row, .fi-subtotal-note-row, .fi-summary-value-row { display: none; }
  .fi-mobile-totals {
    display: block; background: var(--fi-surface-alt); border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius-sm); padding: 12px 14px; margin-top: 12px;
  }
  .fi-mobile-totals:empty { display: none; }
  .fi-mobile-group-totals {
    display: block; background: var(--fi-surface-alt); border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius-sm); padding: 12px 14px; margin-top: 12px;
  }
  .fi-mobile-group-totals:empty { display: none; }
  .fi-mobile-summary-values {
    display: block; background: var(--fi-surface-alt); border: 1px solid var(--fi-border);
    border-radius: var(--fi-radius-sm); padding: 12px 14px; margin-top: 12px;
  }
  .fi-mobile-summary-values:empty { display: none; }
}

/* ── Group subtotals + summary rows (subtotals planning §9, Phase A6) ───── */
.fi-subtotal-row td { font-weight: 600; background: var(--fi-surface-alt); border-top: 1px solid var(--fi-border); }
.fi-group-subtotal-row:first-of-type td { border-top: 2px solid var(--fi-border); }
.fi-subtotal-label { font-weight: 700; }
.fi-subtotal-note-row td {
  font-size: 12px; font-style: italic; color: var(--fi-text-muted); font-weight: 400;
  background: var(--fi-surface-alt); padding-top: 2px; padding-bottom: 8px; border-top: none;
}
.fi-summary-value-row:first-of-type td { border-top: 2px dashed var(--fi-border); }
.fi-summary-value-row .fi-subtotal-label { font-weight: 600; }
.fi-row-actions-cell { text-align: right; }
.fi-row-actions-cell .fi-btn + .fi-btn { margin-left: 6px; }

.fi-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.fi-pagination button {
  border: 1px solid var(--fi-border); background: var(--fi-surface); border-radius: var(--fi-radius-sm);
  padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--fi-text); font-family: inherit;
}
.fi-pagination button:hover:not(:disabled) { border-color: var(--fi-accent); color: var(--fi-accent); }
.fi-pagination button:disabled { opacity: .4; cursor: not-allowed; }
.fi-pagination button.fi-page-current { background: var(--fi-accent); border-color: var(--fi-accent); color: #fff; }
.fi-pagination .fi-page-ellipsis { color: var(--fi-text-muted); padding: 0 4px; }

/* ── Item form ────────────────────────────────────────────────────────── */
.fi-item-form-row { margin-bottom: 14px; }
.fi-item-form-row.fi-item-form-row-yesno { display: flex; align-items: center; gap: 8px; }
.fi-item-form-row.fi-item-form-row-yesno label { margin: 0; }
.fi-item-form-calc {
  font-family: var(--fi-mono); background: var(--fi-surface-alt); border-radius: var(--fi-radius-sm);
  padding: 9px 12px; font-size: 14px; color: var(--fi-text);
}
.fi-required-mark { color: var(--fi-danger); margin-left: 2px; }
.fi-draft-note {
  background: var(--fi-accent-soft); color: var(--fi-accent-hover); border-radius: var(--fi-radius-sm);
  padding: 10px 12px; font-size: 13.5px; margin: 0 0 14px;
}
.fi-conflict-note {
  background: var(--fi-warning-soft); color: var(--fi-warning); border: 1px solid #fde68a;
  border-radius: var(--fi-radius-sm); padding: 10px 12px; font-size: 13.5px; margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ── Admin (Phase 7) ──────────────────────────────────────────────────── */
.fi-admin-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700;
  background: var(--fi-accent-soft); color: var(--fi-accent-hover); border-radius: 999px;
  padding: 4px 10px; flex-shrink: 0;
}
.fi-size-tier-badge {
  display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
}
.fi-size-tier-normal { background: var(--fi-success-soft); color: var(--fi-success); }
.fi-size-tier-warning { background: var(--fi-warning-soft); color: var(--fi-warning); }
.fi-size-tier-capped { background: var(--fi-danger-soft); color: var(--fi-danger); }
.fi-admin-list-name { font-weight: 600; }
.fi-admin-list-name a { color: var(--fi-text); text-decoration: none; }
.fi-admin-list-name a:hover { color: var(--fi-accent); text-decoration: underline; }

.fi-empty-state {
  text-align: center; padding: 60px 20px; background: var(--fi-surface);
  border: 1px dashed var(--fi-border); border-radius: var(--fi-radius);
}
.fi-empty-state h2 { font-size: 18px; margin: 0 0 8px; }
.fi-empty-state p { color: var(--fi-text-muted); margin: 0 0 18px; }

.fi-loading { text-align: center; color: var(--fi-text-muted); padding: 60px 20px; font-size: 14px; }