/* ═══════════════════════════════════════════════════════════════════════
   AFDC v2 Shared Primitives — mounted by every mockup after tokens
   Patterns that appeared in 8+/11 module redesigns so they belong in
   the shared layer, not duplicated per module.

   Link order in each mockup:
     <link rel="stylesheet" href="../../shared/design-tokens-v2.css">
     <link rel="stylesheet" href="../../shared/primitives-v2.css">
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════ ⌘K COMMAND PALETTE (every module opens it via Cmd+K) ═══════ */
.cmd-palette {
  display: none;
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  padding-top: 120px;
  animation: cmdFade .15s var(--ease);
}
.cmd-palette.open { display: flex; }
@keyframes cmdFade { from { opacity: 0; } to { opacity: 1; } }
.cmd-palette-inner {
  width: min(640px, 92vw);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: cmdSlideIn .2s var(--ease);
}
@keyframes cmdSlideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cmd-input-wrap {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border-subtle);
}
.cmd-input-wrap .icon { font-size: 18px; opacity: .5; }
.cmd-input {
  flex: 1; border: 0; background: transparent;
  font: inherit; font-size: var(--f-md); color: var(--fg);
  outline: none;
}
.cmd-kbd-hint {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--fg-dim);
  background: var(--bg-subtle); border: 1px solid var(--border-default);
  border-radius: var(--radius-xs); padding: 2px 6px;
}
.cmd-groups { max-height: 50vh; overflow-y: auto; padding: var(--s2) 0; }
.cmd-group-label {
  font-size: 10px; font-weight: var(--f-w-semibold);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-dim); padding: var(--s3) var(--s5) var(--s1);
}
.cmd-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s5); cursor: pointer;
  transition: background var(--t-fast);
}
.cmd-item:hover, .cmd-item.active {
  background: var(--primary-bg);
  color: var(--primary);
}
.cmd-item .cmd-icon {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--fg-muted);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.cmd-item:hover .cmd-icon, .cmd-item.active .cmd-icon {
  background: var(--primary-bg); color: var(--primary);
}
.cmd-item .cmd-label {
  flex: 1; font-size: var(--f-sm); font-weight: var(--f-w-medium);
}
.cmd-item .cmd-shortcut {
  font-family: var(--f-mono); font-size: 11px; color: var(--fg-dim);
}
.cmd-footer {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  display: flex; gap: var(--s4);
  font-size: 11px; color: var(--fg-muted);
  font-family: var(--f-mono);
}
.cmd-footer span { display: inline-flex; align-items: center; gap: 4px; }
.cmd-footer kbd {
  background: var(--bg); border: 1px solid var(--border-default);
  border-radius: 3px; padding: 1px 5px; font-size: 10px;
}

/* ═══════ SIDEBAR BRAND with OFFICIAL AFDC LOGO ═══════ */
.sidebar-brand {
  padding: var(--s4) var(--s4) var(--s3);
  display: flex; align-items: center; gap: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: var(--s2);
}
.sidebar-brand-logo {
  width: 160px; height: auto;
  background-image: var(--logo-horizontal-white);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}
.sidebar-brand-logo img {
  width: 160px; height: auto;
  display: block;
  filter: brightness(0) invert(1);  /* fallback white filter if img not transparent */
}
.sidebar-brand-text {
  font-size: 22px; font-weight: 700; color: #fff;
  display: none; /* hidden when logo image is used */
}

/* ═══════ RECORD DETAIL DRAWER (slides in from right) ═══════ */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 90vw);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-drawer);
  z-index: 90;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--s3);
}
.drawer-title { font-size: var(--f-lg); font-weight: var(--f-w-semibold); }
.drawer-sub { font-size: var(--f-xs); color: var(--fg-muted); margin-top: 2px; }
.drawer-actions { display: flex; gap: var(--s2); }
.drawer-close {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border-default);
  color: var(--fg-muted); cursor: pointer; font-size: 16px;
}
.drawer-close:hover { background: var(--bg-hover); color: var(--fg); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s5); }
.drawer-footer {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: flex-end; gap: var(--s3);
  background: var(--bg);
}
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(0,0,0,.3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base);
}
.drawer.open + .drawer-backdrop,
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* Drawer tabs */
.drawer-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle);
  padding: 0 var(--s5);
}
.drawer-tab {
  padding: 12px var(--s3); font-size: var(--f-xs);
  font-weight: var(--f-w-medium); color: var(--fg-muted);
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all var(--t-fast);
}
.drawer-tab:hover { color: var(--fg); }
.drawer-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--f-w-semibold); }

/* ═══════ MODULE SUBTAB NAV (?tab=X pattern) ═══════ */
.subtabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--s5); overflow-x: auto;
}
.subtab {
  padding: 12px 18px; font-size: var(--f-sm);
  font-weight: var(--f-w-medium); color: var(--fg-muted);
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: all var(--t-fast);
}
.subtab:hover { color: var(--fg); background: var(--bg-hover); }
.subtab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--f-w-semibold); }
.subtab .ct {
  display: inline-block; margin-left: 6px;
  font-size: 11px; padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-subtle); color: var(--fg-muted);
  font-family: var(--f-mono);
}
.subtab.active .ct { background: var(--primary-bg); color: var(--primary); }

/* ═══════ THREE-PANE LAYOUT (Inbox, Documents) ═══════ */
.three-pane {
  display: grid;
  grid-template-columns: 260px 380px 1fr;
  gap: 0;
  height: calc(100vh - 140px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pane + .pane { border-left: 1px solid var(--border-subtle); }
.pane-header {
  padding: var(--s4); border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.pane-title { font-size: var(--f-sm); font-weight: var(--f-w-semibold); }
.pane-body { flex: 1; overflow-y: auto; }

/* ═══════ KANBAN (CRM, Procurement, Logistics, Production) ═══════ */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s3);
}
.kanban-col {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  min-height: 400px;
}
.kanban-col-header {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
}
.kanban-col-title {
  font-size: var(--f-xs);
  font-weight: var(--f-w-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-secondary);
  display: flex; align-items: center; gap: 6px;
}
.kanban-col-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
}
.kanban-col-count {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--fg-muted);
  background: var(--bg);
  padding: 2px 7px; border-radius: var(--radius-full);
}
.kanban-col-body {
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
  flex: 1;
}
.kanban-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-xs);
  cursor: grab;
  transition: all var(--t-fast);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card-title { font-size: var(--f-sm); font-weight: var(--f-w-semibold); margin-bottom: 4px; }
.kanban-card-sub { font-size: var(--f-xs); color: var(--fg-muted); }
.kanban-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s2);
  font-size: 11px; color: var(--fg-dim);
}

/* ═══════ KEYBOARD HINTS (J/K, ⌘K, ?) ═══════ */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  font-family: var(--f-mono); font-size: 10px;
  font-weight: var(--f-w-semibold);
  background: var(--bg); border: 1px solid var(--border-default);
  border-radius: 4px; color: var(--fg-muted);
  box-shadow: 0 1px 0 var(--border-default);
}
.kbd-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--fg-dim);
}

/* ═══════ AVATAR + GRADIENT (users) ═══════ */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--f-w-semibold); font-size: var(--f-xs); color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  flex-shrink: 0;
}
.avatar-lg { width: 48px; height: 48px; font-size: var(--f-sm); }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.green { background: linear-gradient(135deg, var(--cta), #57D163); }
.avatar.amber { background: linear-gradient(135deg, #B45309, #F59E0B); }
.avatar.blue  { background: linear-gradient(135deg, #1D4ED8, #64B5F6); }

/* ═══════ STATUS STEPPER (deals, shipments, invoices) ═══════ */
.stepper {
  display: flex; align-items: center; gap: 0;
  padding: var(--s2) 0;
}
.stepper-step {
  display: flex; align-items: center;
  gap: var(--s2);
  flex: 1; min-width: 0;
}
.stepper-bubble {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-subtle); color: var(--fg-muted);
  border: 2px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--f-w-bold);
  flex-shrink: 0;
  transition: all var(--t-base);
}
.stepper-step.done .stepper-bubble {
  background: var(--cta); color: #fff; border-color: var(--cta);
}
.stepper-step.active .stepper-bubble {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-bg);
}
.stepper-line {
  flex: 1; height: 2px; background: var(--bg-muted);
}
.stepper-step.done + .stepper-line { background: var(--cta); }
.stepper-label {
  font-size: 10px; font-weight: var(--f-w-medium);
  color: var(--fg-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ═══════ SLA / AGE BADGES ═══════ */
.sla {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 10px; font-weight: var(--f-w-semibold);
  padding: 2px 6px; border-radius: var(--radius-xs);
}
.sla.ok { background: var(--cta-bg); color: var(--cta); }
.sla.warn { background: var(--warning-bg); color: var(--warning); }
.sla.breach { background: var(--danger-bg); color: var(--danger); animation: slaBreachPulse 2s infinite; }
@keyframes slaBreachPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ═══════ INLINE ROW ACTIONS (Attio hover pattern) ═══════ */
.row-actions {
  display: flex; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast);
}
tr:hover .row-actions,
.hover-row:hover .row-actions {
  opacity: 1; pointer-events: auto;
}
.row-action-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--fg-muted); font-size: 12px;
  cursor: pointer; transition: all var(--t-fast);
}
.row-action-btn:hover {
  background: var(--primary-bg); color: var(--primary);
  border-color: var(--primary-border);
}

/* ═══════ ZERO-STATE TEACHER (empty-states that teach) ═══════ */
.zero-teach {
  padding: var(--s9) var(--s6);
  text-align: center;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}
.zero-teach-icon {
  font-size: 48px; opacity: .4; margin-bottom: var(--s4);
}
.zero-teach-title {
  font-size: var(--f-lg); font-weight: var(--f-w-semibold);
  color: var(--fg); margin-bottom: var(--s2);
}
.zero-teach-text {
  font-size: var(--f-sm); color: var(--fg-muted);
  max-width: 480px; margin: 0 auto var(--s5); line-height: 1.6;
}
.zero-teach-actions {
  display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap;
}

/* ═══════ SPARKLINE ═══════ */
.sparkline {
  display: flex; align-items: flex-end; gap: 2px;
  height: 28px;
}
.sparkline span {
  flex: 1;
  background: var(--primary-bg);
  border-radius: 2px 2px 0 0;
  transition: background var(--t-base);
}
.sparkline.success span { background: var(--cta-bg); }
.sparkline.danger span { background: var(--danger-bg); }

/* ═══════ TIMELINE (activity feed in drawers) ═══════ */
.timeline { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s2) 0; }
.timeline-item {
  display: flex; gap: var(--s3);
  position: relative;
}
.timeline-item::before {
  content: ''; position: absolute;
  left: 15px; top: 32px; bottom: -16px;
  width: 2px; background: var(--border-subtle);
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0; z-index: 1;
}
.timeline-content { flex: 1; padding-top: 4px; }
.timeline-title { font-size: var(--f-sm); font-weight: var(--f-w-medium); color: var(--fg); }
.timeline-meta { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }