/* =============================================================================
   dispatcher.css — لوحة الموزّع
   ============================================================================= */

.disp-main { padding-block: var(--sp-6) var(--sp-12); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head h1 { font-size: 1.7rem; }
.page-head p { color: var(--text-muted); }

/* شريط ملخّص الحالات (بلاطات قابلة للنقر للتصفية) */
.status-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.stat-tile {
  --c: var(--st-idle);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--border);
  cursor: pointer; transition: all var(--dur-fast) var(--ease); text-align: right;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stat-tile[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.stat-tile .swatch { width: 42px; height: 42px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.stat-tile .swatch svg { width: 22px; height: 22px; }
.stat-tile .num { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1; }
.stat-tile .lbl { color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.stat-tile[data-key="idle"]{--c:var(--st-idle)} .stat-tile[data-key="loading"]{--c:var(--st-loading)}
.stat-tile[data-key="enroute"]{--c:var(--st-enroute)} .stat-tile[data-key="arrived"]{--c:var(--st-arrived)}
.stat-tile[data-key="returning"]{--c:var(--st-returning)}

/* شريط أدوات */
.toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.toolbar .grow { flex: 1; min-width: 180px; }
.filter-select { min-width: 160px; }

/* لوحة الرحلات النشطة */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.trip-tile {
  --c: var(--st-idle);
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.trip-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trip-tile[data-status="loading"]{--c:var(--st-loading)} .trip-tile[data-status="enroute"]{--c:var(--st-enroute)}
.trip-tile[data-status="arrived"]{--c:var(--st-arrived)} .trip-tile[data-status="returning"]{--c:var(--st-returning)}
.trip-tile .edge { height: 5px; background: var(--c); }
.trip-tile .tt-body { padding: var(--sp-4) var(--sp-5); }
.tt-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tt-plate { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.tt-plate small { display: block; font-family: var(--font-body); font-weight: 500; color: var(--text-muted); font-size: .78rem; }
.tt-route { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: var(--sp-3); }
.tt-route svg { width: 18px; height: 18px; color: var(--c); flex: none; }
.tt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); font-size: .85rem; }
.tt-grid span { color: var(--text-muted); }
.tt-grid strong { font-weight: 700; }
.tt-foot { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
  background: var(--surface-2); }
.tt-foot .btn { flex: 1; }
.tt-warn { display: inline-flex; align-items: center; gap: 5px; color: var(--warn); font-size: .78rem; font-weight: 700; }
.tt-warn.overdue { color: var(--danger); }
.tt-warn svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .status-strip { grid-template-columns: repeat(2, 1fr); }
  .board { grid-template-columns: 1fr; }
}