/* ═══════════════════════════════════════════
   views.css — FleetOS v4 Page Layouts
═══════════════════════════════════════════ */

/* ── SHARED ──────────────────────────── */
.split-panel { display:flex; height:100%; overflow:hidden; }
.panel-left {
  display:flex; flex-direction:column;
  border-right:1px solid var(--border-s);
  background:var(--bg2); overflow:hidden;
}
.panel-right { flex:1; position:relative; overflow:hidden; }
.panel-scroll { flex:1; overflow-y:auto; }
.panel-header-bar {
  padding:14px 16px 10px; border-bottom:1px solid var(--border-s); flex-shrink:0;
}
.panel-title-sm { font-family:var(--font-display); font-size:13.5px; font-weight:600; }
.panel-sub-sm   { font-size:11px; color:var(--muted); margin-top:2px; }

.page-scroll {
  flex:1; overflow-y:auto; padding:20px 24px;
  display:flex; flex-direction:column; gap:18px;
}

/* ── DASHBOARD ───────────────────────── */
#view-dashboard { flex-direction:column; overflow:hidden; }

.dash-kpi-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding:14px 20px 0; flex-shrink:0;
}

.dash-body {
  display:grid; grid-template-columns:1fr 340px;
  gap:12px; flex:1; overflow:hidden; padding:12px 20px 16px;
}

/* Map card */
.map-card {
  background:var(--bg2); border:1px solid var(--border-s);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
}
.map-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--border-s); flex-shrink:0;
}
.map-card-title {
  font-family:var(--font-display); font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.live-pulse {
  width:8px; height:8px; background:var(--online); border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.3); }
}
.map-ctrl-btns { display:flex; gap:6px; }
.map-ctrl-btn {
  padding:5px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--glass);
  color:var(--muted); font-size:12px; font-weight:500;
  cursor:pointer; transition:all var(--transition);
  display:flex; align-items:center; gap:6px;
}
.map-ctrl-btn:hover,.map-ctrl-btn.active {
  background:var(--primary-l); color:var(--primary); border-color:var(--primary-bd);
}
#main-map, #event-mini-map, #playback-map, #geofence-map, #device-mini-map {
  width:100%; height:100%;
}

/* Fleet status panel */
.fleet-panel {
  background:var(--bg2); border:1px solid var(--border-s);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
}
.fleet-panel-header {
  padding:13px 16px 10px; border-bottom:1px solid var(--border-s); flex-shrink:0;
}
.fleet-panel-title { font-family:var(--font-display); font-size:13.5px; font-weight:600; margin-bottom:10px; }
.filter-tabs { display:flex; gap:3px; }
.filter-tab {
  padding:5px 14px; border-radius:20px; border:1px solid transparent;
  background:transparent; color:var(--muted); font-size:12px;
  cursor:pointer; transition:all var(--transition); font-family:var(--font-sans);
}
.filter-tab:hover { background:var(--bg-hover); color:var(--text-2); }
.filter-tab.active {
  background:var(--primary-l); color:var(--primary); border-color:var(--primary-bd);
}
.fleet-list { flex:1; overflow-y:auto; padding:6px; }

/* Device item in fleet list */
.device-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:var(--radius-sm);
  cursor:pointer; transition:background var(--transition);
  border:1px solid transparent; margin-bottom:2px;
}
.device-item:hover { background:var(--bg-hover); }
.device-item.selected { background:var(--primary-l); border-color:var(--primary-bd); }
.device-item-info { flex:1; min-width:0; }
.device-item-name {
  font-size:13px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text);
}
.device-item-meta { font-size:11px; color:var(--muted); margin-top:2px; }
.device-item-speed { font-size:12.5px; font-weight:600; text-align:right; flex-shrink:0; }
.device-item-speed.online  { color:var(--online); }
.device-item-speed.idle    { color:var(--idle); }
.device-item-speed.offline { color:var(--offline); }

/* ── EVENTS ──────────────────────────── */
#view-events { flex-direction:row; }
.events-sidebar { width:360px; min-width:360px; }
.event-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; cursor:pointer;
  border-bottom:1px solid var(--border-s);
  transition:background var(--transition);
}
.event-item:hover { background:var(--bg-hover); }
.event-item.selected { background:var(--primary-l); }
.event-type-icon {
  width:34px; height:34px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.event-item-body { flex:1; min-width:0; }
.event-item-title { font-size:13px; font-weight:500; color:var(--text); }
.event-item-device { font-size:11px; color:var(--muted); margin-top:3px; }
.event-item-time { font-family:var(--font-mono); font-size:10px; color:var(--muted); flex-shrink:0; }

.event-detail-pane { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.event-detail-map { height:260px; flex-shrink:0; }
.event-detail-body {
  flex:1; overflow-y:auto; padding:18px;
  display:flex; flex-direction:column; gap:16px;
}
.vehicle-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vstatus-card {
  background:var(--bg3); border:1px solid var(--border-s);
  border-radius:var(--radius); padding:13px 15px;
}
.vstatus-label { font-size:10px; color:var(--muted); letter-spacing:1.2px; text-transform:uppercase; }
.vstatus-value { font-family:var(--font-display); font-size:22px; font-weight:600; margin-top:4px; }
.vstatus-unit  { font-size:10px; color:var(--muted); }

/* ── PLAYBACK ────────────────────────── */
#view-playback { flex-direction:column; }
.playback-map-wrap { flex:1; position:relative; overflow:hidden; }
.playback-controls-bar {
  flex-shrink:0; background:var(--bg2);
  border-top:1px solid var(--border-s); padding:14px 20px;
}
.pb-top-row {
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px; flex-wrap:wrap;
}
.pb-title { font-family:var(--font-display); font-size:13.5px; font-weight:600; }
.pb-stats-strip { display:flex; gap:20px; margin-left:auto; }
.pb-stat { text-align:right; }
.pb-stat-val { font-family:var(--font-display); font-size:13.5px; font-weight:600; }
.pb-stat-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; }
.timeline-track {
  height:5px; background:var(--bg4);
  border-radius:4px; cursor:pointer; overflow:hidden; margin-bottom:10px;
}
.timeline-fill { height:100%; background:linear-gradient(90deg,var(--primary),#818cf8); border-radius:4px; }
.pb-btn-row { display:flex; align-items:center; gap:8px; }
.pb-play {
  width:40px; height:40px; border-radius:50%; font-size:16px;
  background:linear-gradient(135deg,var(--primary),var(--primary-d));
  border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition); box-shadow:0 4px 14px rgba(99,102,241,0.35);
}
.pb-play:hover { transform:scale(1.06); }
.pb-time-disp { font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-left:auto; }
select.pb-speed-sel { width:auto; padding:5px 10px; font-family:var(--font-mono); font-size:12px; }

/* ── REPORTS ─────────────────────────── */
#view-reports { flex-direction:column; }
.kpi-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.charts-row { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.chart-card {
  background:var(--bg2); border:1px solid var(--border-s);
  border-radius:var(--radius-lg); padding:18px 20px;
}
.chart-title { font-family:var(--font-display); font-size:13.5px; font-weight:600; margin-bottom:14px; }
.bar-chart { display:flex; align-items:flex-end; gap:5px; height:100px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bar-fill {
  width:100%; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--primary),#818cf8); opacity:0.72; min-height:4px;
  transition:opacity .15s;
}
.bar-fill:hover { opacity:1; }
.bar-lbl { font-size:9px; color:var(--muted); }

/* ── GEOFENCES ───────────────────────── */
#view-geofences { flex-direction:row; }
.geofences-sidebar { width:300px; min-width:300px; }
.geofence-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; cursor:pointer;
  border-bottom:1px solid var(--border-s);
  transition:background var(--transition);
}
.geofence-item:hover { background:var(--bg-hover); }
.geofence-item.selected { background:var(--primary-l); }
.geofence-color-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.geofence-item-name { flex:1; font-size:13px; font-weight:500; color:var(--text); }
.geofence-item-type { font-size:11px; color:var(--muted); }
.geofence-map-wrap { flex:1; position:relative; overflow:hidden; }
.geofence-draw-toolbar {
  position:absolute; top:14px; left:14px; z-index:400; display:flex; gap:6px;
}
.draw-btn {
  background:var(--bg2); border:1px solid var(--border-m);
  color:var(--text-2); border-radius:var(--radius-sm);
  padding:7px 13px; font-size:12px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:all var(--transition); box-shadow:var(--shadow-s);
}
.draw-btn:hover { color:var(--primary); border-color:var(--primary-bd); }
.draw-btn.active { background:var(--primary-l); color:var(--primary); border-color:var(--primary-bd); }

/* ── DEVICES ─────────────────────────── */
#view-devices { flex-direction:column; }

/* ── NOTIFICATIONS ───────────────────── */
#view-notifications { flex-direction:column; }
.notif-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 18px; cursor:pointer;
  border-bottom:1px solid var(--border-s);
  transition:background var(--transition);
}
.notif-item:hover { background:var(--bg-hover); }
.notif-item.unread { background:rgba(99,102,241,0.04); }
.notif-icon {
  width:34px; height:34px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.notif-body { flex:1; }
.notif-title { font-size:13.5px; font-weight:500; color:var(--text); }
.notif-desc  { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.notif-time  { font-family:var(--font-mono); font-size:10px; color:var(--muted); flex-shrink:0; }
.notif-unread-dot { width:7px; height:7px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:5px; }

/* ── USERS / DRIVERS ─────────────────── */
#view-users, #view-drivers { flex-direction:column; }
.driver-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.driver-card {
  background:var(--bg2); border:1px solid var(--border-s);
  border-radius:var(--radius-lg); padding:18px 20px;
  display:flex; flex-direction:column; gap:14px;
  transition:all var(--transition);
}
.driver-card:hover { border-color:var(--border-m); transform:translateY(-2px); box-shadow:var(--shadow-s); }
.driver-card-top { display:flex; align-items:center; gap:12px; }
.driver-avatar {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff;
}
.driver-name { font-size:14px; font-weight:600; color:var(--text); }
.driver-sub  { font-size:11.5px; color:var(--muted); margin-top:2px; }
.driver-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.driver-stat { background:var(--bg3); border-radius:var(--radius-sm); padding:10px 12px; }
.driver-stat-lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.9px; }
.driver-stat-val { font-size:14px; font-weight:500; margin-top:3px; color:var(--text); }

/* ── SETTINGS ────────────────────────── */
#view-settings { flex-direction:column; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.settings-section { background:var(--bg2); border:1px solid var(--border-s); border-radius:var(--radius-lg); overflow:hidden; }
.settings-section-header {
  padding:14px 20px; border-bottom:1px solid var(--border-s);
  font-family:var(--font-display); font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:9px;
}
.settings-section-body { padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.setting-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 0; border-bottom:1px solid var(--border-s);
}
.setting-row:last-child { border-bottom:none; padding-bottom:0; }
.setting-label { font-size:13.5px; font-weight:500; color:var(--text); }
.setting-desc  { font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ── ATTR PANEL ──────────────────────── */
.attr-panel {
  position:absolute; bottom:0; left:0; right:0; z-index:450;
  background:var(--bg2);
  border-top:1px solid var(--border-m);
  flex-direction:column;
  box-shadow:var(--shadow-up);
}

/* Header */
.attr-panel-top {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px 8px; flex-shrink:0;
  border-bottom:1px solid var(--border-s);
}
.attr-panel-name {
  font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--text);
}
.attr-panel-meta {
  font-size:11px; color:var(--muted); padding-left:6px;
  border-left:1px solid var(--border-s); margin-left:2px;
}
.attr-panel-status { margin-left:auto; }
.attr-panel-close {
  width:22px; height:22px; border-radius:5px;
  background:transparent; border:1px solid var(--border-s);
  color:var(--muted); font-size:14px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition); margin-left:6px; line-height:1;
}
.attr-panel-close:hover { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-bd); }

/* Scrollable row */
.attr-scroll { overflow-x:auto; overflow-y:hidden; flex-shrink:0; }
.attr-scroll::-webkit-scrollbar { height:3px; }
.attr-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── PRIMARY METRICS STRIP ───────────── */
.attr-metrics {
  display:flex; align-items:flex-start;
  width:max-content; min-width:100%;
}
.attr-metric {
  display:flex; flex-direction:column;
  padding:10px 18px 10px 16px;
  border-right:1px solid var(--border-s);
  flex-shrink:0; min-width:72px;
}
.attr-metric:first-child { padding-left:16px; }
.attr-metric:last-child  { border-right:none; }

/* Label always at top, same height across all cells */
.attr-metric-label {
  font-size:9px; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--muted2); white-space:nowrap;
  height:14px; line-height:14px; /* fixed height so values all start at same Y */
  margin-bottom:5px;
}
.attr-metric-value {
  font-size:13.5px; font-weight:500;
  line-height:1; white-space:nowrap; color:var(--text);
}
.attr-metric-value.lg   { font-size:18px; font-weight:600; }
.attr-metric-value.mono { font-family:var(--font-mono); font-size:11.5px; font-weight:400; color:var(--muted); }
.attr-metric-unit {
  font-size:9px; color:var(--muted); margin-top:3px; line-height:1;
}

/* Status pill inside metric — fixed height matches value line-height */
.attr-pill {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:3px; font-size:11px; font-weight:500;
  white-space:nowrap; width:fit-content; line-height:1.4;
  font-family:var(--font-mono); letter-spacing:0.2px;
}
.attr-pill-on   { background:var(--success-bg); color:var(--success); border:1px solid var(--success-bd); }
.attr-pill-off  { background:var(--glass);      color:var(--muted);   border:1px solid var(--border-s); }
.attr-pill-warn { background:var(--warn-bg);    color:var(--warn);    border:1px solid var(--warn-bd); }
.attr-pill-move { background:var(--primary-l);  color:var(--primary); border:1px solid var(--primary-bd); }

/* ── EXTRAS ROW (chip tags for everything else) */
.attr-extras {
  display:flex; align-items:center; gap:4px; flex-wrap:nowrap;
  padding:6px 14px 7px; width:max-content;
  border-top:1px solid var(--border-s);
}
.attr-extras:empty { display:none; }
.attr-extra-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:4px; font-size:10.5px;
  background:var(--bg3); border:1px solid var(--border-s);
  white-space:nowrap; flex-shrink:0;
}
.attr-extra-chip .ek { color:var(--muted); }
.attr-extra-chip .ev { font-family:var(--font-mono); font-size:10px; color:var(--text-2); }
.attr-extra-chip .ev.ev-true  { color:var(--success); }
.attr-extra-chip .ev.ev-false { color:var(--muted); }
.attr-extra-chip .ev.ev-num   { color:var(--primary); }

/* ── NOTIFICATIONS TABLE ─────────────── */
#view-notifications { flex-direction:column; }

.notif-type-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  margin:0 auto;
}
.notif-type-name {
  font-size:13px; font-weight:500; color:var(--text);
}
.notif-type-key {
  font-size:10.5px; color:var(--muted); margin-top:2px;
  font-family:var(--font-mono);
}
.notif-channel-tag {
  display:inline-flex; align-items:center;
  padding:2px 7px; border-radius:3px; font-size:10.5px; font-weight:500;
  background:color-mix(in srgb, var(--tc) 12%, transparent);
  color:var(--tc);
  border:1px solid color-mix(in srgb, var(--tc) 22%, transparent);
  margin-right:4px; margin-bottom:2px;
  white-space:nowrap;
}

/* ── CONTACT POPUP ───────────────────── */
.contact-popup {
  flex-direction:column;
  background:var(--bg2); border-top:1px solid var(--border-s);
  max-height:52%; overflow:hidden;
  box-shadow:var(--shadow-up); flex-shrink:0;
}
.contact-popup-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px; border-bottom:1px solid var(--border-s); flex-shrink:0;
}
.contact-popup-title { font-family:var(--font-display); font-size:13.5px; font-weight:600; }
.contact-popup-close {
  width:24px; height:24px; border-radius:6px; background:var(--glass);
  border:1px solid var(--border); color:var(--muted); font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.contact-popup-close:hover { background:var(--bg-hover); color:var(--text); }
.contact-popup-body {
  overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:10px;
}
.cp-vehicle-hero {
  background:var(--bg3); border:1px solid var(--border-s); border-radius:var(--radius);
  padding:12px 14px; display:flex; flex-direction:column; gap:5px;
}
.cp-plate-badge {
  font-family:var(--font-display); font-size:18px; font-weight:600;
  letter-spacing:1px; color:var(--primary);
}
.cp-veh-name { font-size:13px; font-weight:500; color:var(--text); }
.cp-veh-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.cp-tag {
  padding:2px 8px; border-radius:20px; font-size:10.5px;
  background:var(--glass); border:1px solid var(--border); color:var(--muted);
}
.cp-tag-green  { background:var(--success-bg); color:var(--success); border-color:var(--success-bd); }
.cp-tag-yellow { background:var(--warn-bg);    color:var(--warn);    border-color:var(--warn-bd); }
.cp-tag-red    { background:var(--danger-bg);  color:var(--danger);  border-color:var(--danger-bd); }
.cp-contact-rows { display:flex; flex-direction:column; gap:6px; }
.cp-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--radius-sm);
  background:var(--glass); border:1px solid var(--border-s);
}
.cp-row-icon  { font-size:15px; flex-shrink:0; }
.cp-row-body  { flex:1; min-width:0; }
.cp-row-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.9px; }
.cp-row-val   { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-row-link  { color:var(--primary); }
.cp-row-link:hover { opacity:0.8; }
.cp-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cp-detail { background:var(--glass); border:1px solid var(--border-s); border-radius:var(--radius-sm); padding:7px 9px; }
.cp-det-lbl { font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2px; }
.cp-det-val { font-size:12px; font-weight:500; color:var(--text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-det-val.mono { font-family:var(--font-mono); font-size:11px; }
.cp-notes { font-size:12px; color:var(--muted); line-height:1.55; padding:9px 10px; background:var(--glass); border:1px solid var(--border-s); border-radius:var(--radius-sm); }
.cp-actions { display:flex; gap:6px; padding-top:3px; }
.cp-actions .btn { flex:1; justify-content:center; font-size:12px; padding:7px 8px; }

/* ── MINI BADGES ─────────────────────── */
.mini-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 6px; border-radius:5px; font-size:9.5px; font-weight:500; white-space:nowrap;
}
.mb-green  { background:var(--success-bg); color:var(--success); border:1px solid var(--success-bd); }
.mb-red    { background:var(--danger-bg);  color:var(--danger);  border:1px solid var(--danger-bd); }
.mb-yellow { background:var(--warn-bg);    color:var(--warn);    border:1px solid var(--warn-bd); }
.mb-blue   { background:var(--info-bg);    color:var(--info);    border:1px solid var(--info-bd); }

/* ── RESPONSIVE ──────────────────────── */
@media (max-width:1200px) {
  :root { --sidebar-w:220px; }
  .dash-kpi-row { grid-template-columns:repeat(2,1fr); }
  .dash-body { grid-template-columns:1fr 300px; }
  .kpi-strip { grid-template-columns:repeat(3,1fr); }
  .charts-row { grid-template-columns:1fr; }
  .settings-grid { grid-template-columns:1fr; }
}
@media (max-width:860px) {
  :root { --sidebar-w:56px; }
  .nav-label, .user-info, .sidebar-logo span:not(.sidebar-logo-mark),
  .topbar-brand-name, .nav-group-label { display:none; }
  .topbar-brand { width:56px; justify-content:center; padding:0; }
  .user-chip { justify-content:center; }
  .dash-body { grid-template-columns:1fr; }
  .events-sidebar { width:280px; min-width:280px; }
  .geofences-sidebar { width:240px; min-width:240px; }
}