/* FRONTLINE REDESIGN PASS 3 — composite components */

/* KPI / stat cards */
.wb-kpis,.maintenance-management-grid,.meta-kpis,.tire-primary-kpis,.tire-health-metrics-v7{
  gap:10px;
}
.wb-kpi,.maintenance-management-card,.meta-kpis article,.tire-ops-kpi,.tire-dense-metric,.tire-health-metric-v7{
  position:relative;
  min-height:96px;
  padding:13px 14px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-top:1px solid var(--border);
  border-radius:8px;
  box-shadow:none;
  color:var(--text-primary);
  text-align:left;
}
.wb-kpi:hover,.maintenance-management-card:hover,.meta-kpis article:hover,.tire-ops-kpi:hover,.tire-dense-metric:hover,.tire-health-metric-v7:hover{
  background:var(--bg-raised);
  border-color:var(--border-strong);
}
.wb-kpi span,.maintenance-management-card span,.meta-kpis article>span,.tire-ops-kpi span,.tire-dense-metric span,.tire-health-metric-v7 span{
  color:var(--text-secondary);
  font-size:11px;
  font-weight:600;
  line-height:1.25;
}
.wb-kpi strong,.maintenance-management-card strong,.meta-kpis article>strong,.tire-ops-kpi strong,.tire-dense-metric strong,.tire-health-metric-v7 strong{
  display:block;
  margin-top:7px;
  color:var(--text-primary);
  font-size:26px;
  line-height:1;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}
.wb-kpi small,.maintenance-management-card small,.meta-kpis article>small,.tire-ops-kpi small,.tire-dense-metric small,.tire-health-metric-v7 small{
  display:block;
  margin-top:7px;
  color:var(--text-tertiary);
  font-size:10.5px;
  line-height:1.25;
}
.wb-kpi.red strong,.maintenance-management-card.red strong,.tire-ops-kpi.bad strong,.tire-dense-metric.bad strong,.tire-health-metric-v7.bad strong{color:var(--danger-text)}
.wb-kpi.amber strong,.maintenance-management-card.amber strong,.tire-ops-kpi.warn strong,.tire-dense-metric.warn strong,.tire-health-metric-v7.warn strong{color:var(--warning-text)}
.wb-kpi.green strong,.maintenance-management-card.green strong,.tire-ops-kpi.good strong,.tire-dense-metric.good strong,.tire-health-metric-v7.good strong{color:var(--success-text)}
.wb-kpi.blue strong,.maintenance-management-card.blue strong{color:var(--info-text)}
.wb-kpi:before,.maintenance-management-card:before,.tire-ops-kpi:before,.tire-dense-metric:before,.tire-health-metric-v7:before{display:none}
.wb-kpi i{right:12px;bottom:10px;color:var(--text-tertiary);font-size:10px}

/* workbench composite panels */
.wb-panel,.smart-summary-v3,.wb-action-main,.maintenance-task-panel,.maintenance-history-panel,.tire-ops-panel,.meta-panel{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:none;
}
.wb-panel>header,.maintenance-task-panel>header,.maintenance-history-panel>header,.tire-ops-panel>header,.meta-panel>header{
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
}
.wb-panel>header h3,.maintenance-task-panel>header h3,.maintenance-history-panel>header h3,.tire-ops-panel>header h3,.meta-panel>header h3{
  color:var(--text-primary);
  font-size:14px;
  font-weight:650;
}
.wb-panel>header p,.maintenance-task-panel>header p,.maintenance-history-panel>header p,.tire-ops-panel>header p,.meta-panel>header p{
  color:var(--text-secondary);
  font-size:10.5px;
}

/* generic data tables */
.az-list-table,.maintenance-history-table,.maintenance-task-table,.meta-table,.tire-queue-table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  background:var(--bg-surface);
  font-variant-numeric:tabular-nums;
}
.az-list-table thead th,.maintenance-history-table thead th,.maintenance-task-table thead th,.meta-table thead th,.tire-queue-table thead th{
  height:36px;
  padding:0 10px;
  background:var(--bg-raised);
  color:var(--text-secondary);
  border-bottom:1px solid var(--border);
  font-size:10px;
  font-weight:650;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.az-list-table tbody td,.maintenance-history-table tbody td,.maintenance-task-table tbody td,.meta-table tbody td,.tire-queue-table tbody td{
  height:40px;
  padding:5px 10px;
  background:var(--bg-surface);
  color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle);
  font-size:12px;
}
.az-list-table tbody tr:hover td,.maintenance-history-table tbody tr:hover td,.maintenance-task-table tbody tr:hover td,.meta-table tbody tr:hover td,.tire-queue-table tbody tr:hover td{
  background:var(--bg-raised);
}
.meta-table-wrap,.tire-list-wrap{background:var(--bg-surface);border:0;box-shadow:none}

/* kanban */
.kanban-board,.board-columns,.az-kanban{
  gap:10px;
  background:transparent;
}
.kanban-col,.board-column,.az-kanban-col{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:none;
}
.kanban-col>header,.board-column>header,.az-kanban-col>header{
  min-height:42px;
  padding:8px 9px;
  background:transparent;
  border-bottom:1px solid var(--border);
}
.stage-title b,.kanban-col>header b,.board-column>header b{
  color:var(--text-primary);
  font-size:12px;
  font-weight:650;
}
.kanban-card,.az-card,.board-card{
  margin:7px;
  padding:10px;
  background:var(--bg-surface);
  color:var(--text-primary);
  border:1px solid var(--border);
  border-radius:7px;
  box-shadow:none;
}
.kanban-card:hover,.az-card:hover,.board-card:hover{
  background:var(--bg-surface);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-sm);
}
.kanban-card h4,.kanban-card b,.az-card h4,.az-card b,.board-card h4,.board-card b{
  color:var(--text-primary);
  font-size:12px;
  line-height:1.35;
}
.kanban-card p,.kanban-card small,.az-card p,.az-card small,.board-card p,.board-card small{
  color:var(--text-secondary);
  font-size:10.5px;
  line-height:1.35;
}
.kanban-card .pill,.az-card .pill,.board-card .pill{
  border:0;
  background:var(--neutral-soft);
  color:var(--neutral-text);
}

/* alert / notice */
.meta-alert,.maintenance-source-summary,.fleet-alert,.access-warning,.tire-inline-msg{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg-raised);
  color:var(--text-secondary);
  box-shadow:none;
}
.meta-alert,.tire-inline-msg.bad{
  background:var(--danger-soft);
  border-color:color-mix(in srgb,var(--danger) 28%,var(--border));
  color:var(--danger-text);
}
.tire-inline-msg.ok{
  background:var(--success-soft);
  border-color:color-mix(in srgb,var(--success) 28%,var(--border));
  color:var(--success-text);
}
.maintenance-source-summary{
  background:var(--warning-soft);
  border-color:color-mix(in srgb,var(--warning) 28%,var(--border));
  color:var(--warning-text);
}

/* empty / loading / placeholder */
.empty-state,.fleet-empty,.wb-empty,.meta-chart-empty,.access-editor-empty,.generic,.placeholder{
  color:var(--text-secondary);
}
.empty-state,.fleet-empty,.wb-empty,.meta-chart-empty,.access-editor-empty{
  padding:26px 18px;
  border:1px dashed var(--border-strong);
  border-radius:8px;
  background:var(--bg-raised);
  text-align:center;
  font-size:12px;
}
.skeleton,.wb-skeleton-grid i{
  position:relative;
  overflow:hidden;
  background:var(--bg-raised);
  border-color:var(--border);
}
.skeleton:after,.wb-skeleton-grid i:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-primary) 5%,transparent),transparent);
  transform:translateX(-100%);
  animation:crmSkeleton 1.4s linear infinite;
}
@keyframes crmSkeleton{to{transform:translateX(100%)}}

/* unified placeholder pages */
.generic{
  max-width:920px;
  margin:0 auto;
  padding:34px 0;
  text-align:left;
}
.generic>span{
  display:inline-block;
  margin-bottom:5px;
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
}
.generic>h1{
  margin:0;
  color:var(--text-primary);
  font-size:22px;
  font-weight:650;
}
.generic>p{
  margin:6px 0 18px;
  color:var(--text-secondary);
  font-size:12px;
}
.genericcards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
.genericcards article{
  padding:14px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:none;
}
.genericcards b,.genericcards small{display:block}
.genericcards b{font-size:11px;color:var(--text-secondary)}
.genericcards strong{display:block;margin:8px 0 5px;font-size:24px;color:var(--text-primary)}
.genericcards small{font-size:10.5px;color:var(--text-tertiary)}
.generic .panel.placeholder{padding:22px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px}
.generic .panel.placeholder>i{
  display:block;
  width:100%;
  height:10px;
  margin:9px 0;
  background:var(--bg-raised);
  border-radius:4px;
}
.generic .panel.placeholder>i:nth-last-child(1){width:54%}

/* charts */
.meta-charts-row{gap:10px;margin-bottom:10px}
.meta-chart-panel{
  min-height:320px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px;
}
.meta-chart-shell{padding:10px 12px 8px}
.meta-chart-legend{
  min-height:24px;
  color:var(--text-secondary);
  font-size:10.5px;
  gap:12px;
}
.meta-line-chart text{
  fill:var(--text-tertiary);
  font-family:var(--font-sans);
  font-size:10px;
}
.meta-line-chart .grid,.meta-line-chart [data-grid]{
  stroke:var(--border-subtle);
}
.meta-chart-kicker{
  color:var(--text-tertiary);
  font-size:10px;
}

/* Meta account cards */
.meta-account-cards{gap:10px}
.meta-account-cards>button{
  padding:12px 14px;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:none;
  color:var(--text-primary);
}
.meta-account-cards>button:hover{background:var(--bg-raised);border-color:var(--border-strong)}
.meta-account-cards>button.active{background:var(--accent-soft);border-color:var(--accent)}

/* responsive composite rules */