/* ── 13. COMPONENTS ───────────────────────────────────────────── */

/* Toast */
#toast-container, .sa-toast-container {
  position:fixed; top:var(--space-4); right:var(--space-4);
  z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--space-2);
  pointer-events:none;
}
.toast {
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
  font-size:var(--text-xs); font-weight:600;
  display:flex; align-items:center; gap:var(--space-2);
  box-shadow:var(--shadow-md);
  animation:toastIn .25s ease;
  max-width:300px;
  pointer-events:all;
}
@keyframes toastIn  { from { transform:translateX(100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes toastOut { to   { transform:translateX(100%); opacity:0; } }
.toast.removing { animation:toastOut .2s ease forwards; }
.toast.success  { background:var(--green);  color:#000; }
.toast.error    { background:var(--red);    color:#fff; }
.toast.info     { background:var(--blue);   color:#fff; }
.toast.warn     { background:var(--amber);  color:#000; }

/* Skeleton */
@keyframes shimmer { 0% { background-position:-600px 0; } 100% { background-position:600px 0; } }
.skeleton { background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%); background-size:600px 100%; animation:shimmer 1.4s infinite linear; border-radius:var(--radius-sm); color:transparent; pointer-events:none; }
.skeleton-text  { height:14px; border-radius:4px; }
.skeleton-title { height:22px; border-radius:4px; width:60%; }

/* Spinner */
.spinner { width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:auto; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-6) var(--space-5); gap:var(--space-3); color:var(--text3); }

/* Empty states */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-6) var(--space-5); text-align:center; color:var(--text3); min-height:200px; }
.empty-state-icon { width:52px; height:52px; border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:var(--space-4); flex-shrink:0; }
.empty-state-title { font-size:var(--text-sm); font-weight:700; color:var(--text2); margin-bottom:var(--space-2); }
.empty-state-desc  { font-size:var(--text-xs); color:var(--text3); max-width:280px; line-height:1.6; margin-bottom:var(--space-4); }
.empty-state.error   .empty-state-icon { background:var(--red-l);   color:var(--red);   }
.empty-state.success .empty-state-icon { background:var(--green-l); color:var(--green); }
.empty-state.offline .empty-state-icon { background:var(--amber-l); color:var(--amber); }
.empty-state.search  .empty-state-icon { background:var(--blue-l);  color:var(--blue);  }
/* Legacy empty aliases */
.empty, .sa-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-6) var(--space-5); text-align:center; color:var(--text3); }
.empty-icon, .sa-empty-icon { font-size:36px; margin-bottom:var(--space-3); opacity:.35; }
.empty-title { font-size:var(--text-sm); font-weight:700; color:var(--text2); margin-bottom:var(--space-1); }
.empty-desc  { font-size:var(--text-xs); color:var(--text3); max-width:260px; }

/* Dropdown */
.dropdown-menu { position:absolute; top:calc(100% + var(--space-1)); left:0; background:var(--surface); border:1px solid var(--border2); border-radius:var(--radius-md); box-shadow:var(--shadow-md); min-width:160px; max-width:280px; z-index:var(--z-dropdown); overflow:hidden; animation:scaleIn .15s ease; }
@keyframes scaleIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
.dropdown-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); font-size:var(--text-xs); color:var(--text2); cursor:pointer; transition:background var(--t); border:none; background:none; width:100%; text-align:left; font-family:var(--font); }
.dropdown-item:hover { background:var(--surface2); color:var(--text); }
.dropdown-item.danger { color:var(--red); }
.dropdown-item.danger:hover { background:var(--red-l); }
.dropdown-divider { height:1px; background:var(--border); margin:var(--space-1) 0; }

/* Tooltip */
[data-tooltip] { position:relative; }
[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--surface3); color:var(--text); font-size:10px; font-weight:600; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; z-index:var(--z-tooltip); }
[data-tooltip]:hover::after { opacity:1; }

/* Driver bars */
.driver-row { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); }
.driver-name { font-size:var(--text-xs); font-weight:600; color:var(--text); min-width:65px; flex-shrink:0; }
.driver-bar-wrap { flex:1; height:5px; background:var(--surface3); border-radius:3px; overflow:hidden; min-width:0; }
.driver-bar { height:100%; border-radius:3px; }
.driver-count { font-size:var(--text-xs); font-weight:700; color:var(--text2); min-width:18px; text-align:right; flex-shrink:0; }

/* Activity feed */
.activity-item { display:flex; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-icon { width:30px; height:30px; border-radius:var(--radius-sm); background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.activity-text { flex:1; min-width:0; }
.activity-title  { font-size:var(--text-xs); font-weight:600; color:var(--text); }
.activity-detail { font-size:10px; color:var(--text3); margin-top:2px; }
.activity-meta   { text-align:right; flex-shrink:0; }
.activity-amount { font-size:var(--text-xs); font-weight:700; color:var(--accent); }
.activity-time   { font-size:10px; color:var(--text3); margin-top:2px; }