/* =============================================================================
   AEROSOPHIA COMPONENTS  ·  aerosophia-components.css
   Shared page-level component helpers promoted from the design_handoff
   prototype's app.css (Design System Roadmap R2 — toolbar / filter-chip /
   segmented / batch-bar — and the dashboard primitives: chart / donut /
   feed / row-actions / avatar / dropzone). Used by the converted admin
   surfaces (Projects, Dashboard, Users, …) so list/toolbar/data-viz chrome
   stays identical across pages.

   Token-only (every value is a var(--*) from aerosophia-ds.css) — zero new
   hex. Loads AFTER aerosophia-ds.css and BEFORE the legacy tenant style.css.
   ============================================================================= */

/* ---- toolbars + filter chips ---- */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--space-4);}
.filter-bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.filter-chip{display:inline-flex; align-items:center; gap:7px; background:var(--surface-0); border:1px solid var(--border-default);
  border-radius:var(--radius-pill); padding:5px 12px; font-size:.82rem; color:var(--text-secondary); cursor:pointer;}
.filter-chip:hover{border-color:var(--border-strong);}
.filter-chip.is-active{background:var(--accent-soft); border-color:transparent; color:var(--accent-active); font-weight:600;}
.filter-chip i.feather{width:14px; height:14px; font-size:14px;}
/* form controls embedded inside a filter chip read as borderless inline fields */
.filter-chip select.form-control,
.filter-chip input.form-control,
.filter-chip select.form-select{height:28px; font-size:.78rem; padding:0 8px; border:1px solid transparent;
  box-shadow:none; background:transparent; width:auto;}
.filter-chip--search input.form-control{min-width:220px;}
.filter-count{margin-left:auto; font-size:.75rem; color:var(--text-muted);}
.filter-count.has-filters{color:var(--accent-active); font-weight:600;}

.batch-bar{display:none; align-items:center; gap:12px; padding:10px 16px; background:var(--accent-soft); border:1px solid var(--brand-200);
  border-radius:var(--radius-md); margin-bottom:var(--space-3);}
.batch-bar.show{display:flex;}
.batch-bar .n{font-weight:700; color:var(--accent-active);}
.batch-bar .sp{flex:1;}

/* ---- segmented control (page-level) ---- */
.segmented{display:inline-flex; background:var(--surface-2); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:3px; gap:3px;}
.segmented button{border:none; background:none; font-size:.82rem; font-weight:600; color:var(--text-muted); padding:6px 12px; border-radius:var(--radius-sm);}
.segmented button.on{background:var(--surface-0); color:var(--text-primary); box-shadow:var(--elev-1);}

/* ---- tiny CSS bar chart + donut + legend (dashboard) ---- */
.chart{display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:8px;}
.chart .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%;}
.chart .col .bar{width:100%; max-width:30px; background:var(--accent); border-radius:4px 4px 0 0; transition:height var(--dur-base) var(--ease);}
.chart .col .bar.alt{background:var(--brand-300);}
.chart .col .lab{font-size:10px; color:var(--text-muted); font-variant-numeric:tabular-nums;}
.donut{width:128px; height:128px; border-radius:50%; flex:0 0 128px;}
.legend-list{display:flex; flex-direction:column; gap:8px;}
.legend-list .li{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-secondary);}
.legend-list .li .sw{width:11px; height:11px; border-radius:3px;}
.legend-list .li b{margin-left:auto; color:var(--text-primary); font-variant-numeric:tabular-nums;}

/* ---- row action buttons (table / card footers) ---- */
.row-actions{display:flex; gap:4px;}
.row-actions button{width:30px; height:30px; border:1px solid var(--border-subtle); background:var(--surface-0); color:var(--text-muted);
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;}
.row-actions button:hover{background:var(--surface-1); color:var(--text-primary);}
.row-actions button.danger:hover{background:var(--danger-50); color:var(--danger-600); border-color:var(--danger-500);}
.row-actions button i.feather{width:15px; height:15px; font-size:15px;}

/* ---- avatar chip + user cell ---- */
.avatar{width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-active);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 30px;}
.user-cell{display:flex; align-items:center; gap:10px;}
.user-cell .nm{font-weight:600;} .user-cell .em{font-size:12px; color:var(--text-muted);}

/* ---- upload dropzone ---- */
.dropzone{border:2px dashed var(--border-default); border-radius:var(--radius-lg); background:var(--surface-0); padding:36px; text-align:center; color:var(--text-muted);}
.dropzone .ic{width:56px; height:56px; border-radius:16px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.dropzone .ic i.feather{width:26px; height:26px; font-size:26px;}
.dropzone.drag{border-color:var(--accent); background:var(--brand-50);}

/* ---- generic feed / list item (dashboard latest records, activity) ---- */
.feed{display:flex; flex-direction:column;}
.feed .item{display:flex; gap:12px; padding:14px 4px; border-bottom:1px solid var(--border-subtle);}
.feed .item:last-child{border-bottom:none;}
.feed .item .ic{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 34px;}
.feed .item .ic i.feather{width:17px; height:17px; font-size:17px;}
.feed .item .bd{flex:1;}
.feed .item .bd .t{font-weight:600; font-size:.9rem;}
.feed .item .bd .d{font-size:.82rem; color:var(--text-muted); margin-top:2px;}
.feed .item .when{font-size:.78rem; color:var(--text-disabled); white-space:nowrap;}

/* ---- card grid (admin gallery layouts) ---- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-4);}