/* Shared per-employee dashboard anatomy (Technician Dashboard, 2026-07-29 —
   first of 8 role dashboards from the "Patient portal ATP productivity
   module" claude.ai/design project; Cody's explicit ask is Technician ONLY
   for now, but this file holds the pieces of the shared anatomy that are
   truly generic across every future role, so they don't get redefined
   per-dashboard template. Genuinely role-specific shapes (productivity
   panel bars, work-order/case-list cards, role-specific side panels) stay
   in each dashboard's own template - see modules/tech_dashboard.py's
   docstring for the reasoning on what's shared vs. not at this stage.

   The existing ATP Dashboard (templates/dashboard/view.html) predates this
   file and still defines its own equivalent classes inline - intentionally
   left alone rather than retrofitted, to avoid regression risk on a
   working, tested screen for a refactor nobody asked for yet. Wire it onto
   this shared file when the 2nd role dashboard is actually built. */

.dash-header { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1875rem; flex: 0 0 auto;
}
.dash-name { font-size: 1.3125rem; font-weight: 700; color: var(--color-ink); line-height: 1.2; }
.dash-meta { font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.08em; color: var(--color-text-tertiary); margin-top: 0.25rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 0.75rem; margin-bottom: 1.125rem; }
.stat-value { font-size: 1.875rem; font-weight: 800; margin: 0.375rem 0 0.1875rem; color: var(--color-ink); }
.stat-value.tone-primary { color: var(--color-primary); }
.stat-value.tone-signal { color: var(--color-signal); }
.stat-value.tone-success { color: var(--color-success); }
.stat-sub { font-size: 0.6875rem; color: var(--color-text-tertiary); font-family: var(--font-mono); }

.filter-row { display: flex; align-items: center; gap: 0.5625rem; margin-bottom: 0.6875rem; flex-wrap: wrap; }
.search-box { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 0.5625rem; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); padding: 0 0.6875rem; }
.search-box span { color: var(--color-text-tertiary); font-size: 0.875rem; }
.search-box input { flex: 1; border: none; background: transparent; outline: none; color: var(--color-ink); font-size: 0.8125rem; padding: 0.625rem 0; }

.segmented { display: flex; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); padding: 0.1875rem; }
.segmented button {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border: none; background: transparent; color: var(--color-text-tertiary);
  border-radius: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer;
}
.segmented button.selected { background: var(--color-primary); color: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-bottom: 0.5625rem; }
.chip {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 1.25rem; padding: 0.375rem 0.6875rem; border: 1px solid var(--color-hairline);
  background: transparent; color: var(--color-text-secondary); cursor: pointer;
}
.chip.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.select-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.select-row select {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; color: var(--color-text-secondary);
  background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-md);
  padding: 0 0.625rem; height: 38px; cursor: pointer;
}

.empty-state { text-align: center; color: var(--color-text-tertiary); padding: 2.125rem 1.25rem; font-size: 0.875rem; border: 1px dashed var(--color-hairline); border-radius: 0.75rem; }

.dash-body { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.dash-col-main { flex: 2 1 340px; min-width: 270px; display: flex; flex-direction: column; gap: 0.75rem; }
.dash-col-side { flex: 1 1 250px; min-width: 230px; display: flex; flex-direction: column; gap: 0.875rem; }

/* This Week calendar - generic enough to be shared by any future dashboard
   that wants a week strip + day agenda. */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.week-day {
  min-height: 52px; border: 1px solid var(--color-hairline); border-radius: 0.5625rem; background: var(--color-surface2);
  cursor: pointer; padding: 0.375rem 0 0.3125rem; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.week-day.is-today { border-color: var(--color-primary); }
.week-day.is-selected { background: var(--color-primary); border-color: var(--color-primary); }
.week-day.is-selected .week-day-name, .week-day.is-selected .week-day-num { color: #fff; }
.week-day-name { font-family: var(--font-mono); font-size: 0.53125rem; letter-spacing: 0.06em; color: var(--color-text-tertiary); }
.week-day-num { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.week-day-dots { display: flex; gap: 3px; height: 5px; }
.week-day-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); }
.week-day.is-selected .week-day-dot { background: #fff; }
.week-agenda-row { display: flex; gap: 0.625rem; align-items: flex-start; }
.week-agenda-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; background: var(--color-primary); }
.week-agenda-dot.overdue { background: var(--color-signal); }

@media (max-width: 640px) {
  .dash-col-main, .dash-col-side { flex-basis: 100%; }
}