/* ========================================
   RouteX - Corporate Dashboard Theme
   Light (default) + Dark via data-theme
   ======================================== */

:root, [data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #f0f2f5;
  --bg-hover: #e7eaef;
  --border: #d0d7de;
  --border-subtle: #e1e4e8;
  --text-primary: #1f2328;
  --text-secondary: #656d76;
  --text-muted: #848c94;
  --accent: #0969da;
  --accent-soft: rgba(9, 105, 218, 0.08);
  --accent-hover: #0860c7;
  --danger: #cf222e;
  --danger-soft: rgba(207, 34, 46, 0.08);
  --success: #1a7f37;
  --success-soft: rgba(26, 127, 55, 0.1);
  --warning: #9a6700;
  --warning-soft: rgba(154, 103, 0, 0.1);
  --orange: #bf3989;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
}

[data-theme="dark"] {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-hover: #30363d;
  --border: #30363d;
  --border-subtle: #21262d;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --accent: #58a6ff;
  --accent-soft: rgba(88, 166, 255, 0.12);
  --accent-hover: #79c0ff;
  --danger: #f85149;
  --danger-soft: rgba(248, 81, 73, 0.12);
  --success: #3fb950;
  --success-soft: rgba(63, 185, 80, 0.12);
  --warning: #d29922;
  --warning-soft: rgba(210, 153, 34, 0.12);
  --orange: #e94560;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
}

:root {
  --nav-rail-width: 88px;
  --topbar-height: 56px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; }

/* ========================================
   App Shell Layout
   ======================================== */

.app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ========================================
   Nav Rail (sidebar estreita esquerda)
   ======================================== */

.nav-rail {
  width: var(--nav-rail-width);
  min-width: var(--nav-rail-width);
  background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 12px;
  z-index: 100;
}

/* Logo com moldura 3D — puxada pro topo */
.nav-rail-logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 18px;
  padding: 5px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
  border: 1px solid var(--border);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.08),
    -3px -3px 8px rgba(255, 255, 255, 0.9),
    inset 1px 1px 1px rgba(255, 255, 255, 0.7),
    inset -1px -1px 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.nav-rail-logo::after {
  /* Borda interna tipo "passe-partout" do quadro */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
}
.nav-rail-logo { position: relative; }
.nav-rail-logo:hover {
  transform: translateY(-1px);
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.1),
    -3px -3px 8px rgba(255, 255, 255, 1),
    inset 1px 1px 1px rgba(255, 255, 255, 0.7),
    inset -1px -1px 1px rgba(0, 0, 0, 0.04);
}

.nav-rail-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* Dark mode: inverte as luzes/sombras da moldura */
[data-theme="dark"] .nav-rail-logo {
  background: linear-gradient(145deg, #1a1f2e, #0d1117);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.5),
    -3px -3px 8px rgba(255, 255, 255, 0.03),
    inset 1px 1px 1px rgba(255, 255, 255, 0.05),
    inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .nav-rail-logo::after {
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .nav-rail-logo:hover {
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.6),
    -3px -3px 8px rgba(255, 255, 255, 0.04),
    inset 1px 1px 1px rgba(255, 255, 255, 0.05),
    inset -1px -1px 1px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .nav-rail-logo img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.nav-rail-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  width: 100%;
  padding: 0 8px;
}

.nav-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  transition: all var(--transition);
  position: relative;
}

.nav-rail-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

.nav-rail-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.nav-rail-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-rail-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.nav-rail-item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nav-rail-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px;
}

/* ========================================
   Sub Nav (coluna com subitens de "Minha Frota")
   ======================================== */

.sub-nav {
  width: 240px;
  min-width: 240px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
  overflow: hidden;
}

.sub-nav.collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
}

.sub-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 240px;
}

.sub-nav-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.sub-nav-collapse {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.sub-nav-collapse:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.sub-nav-menu {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  min-width: 240px;
}

.sub-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.sub-nav-item:hover:not(.disabled) {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.sub-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.sub-nav-item.active svg {
  stroke: var(--accent);
}

.sub-nav-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sub-nav-item svg {
  flex-shrink: 0;
}

/* ========================================
   Main Area
   ======================================== */

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ========================================
   Topbar
   ======================================== */

.topbar {
  height: var(--topbar-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
}

.topbar-breadcrumb {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 140px;
}

.topbar-search {
  flex: 1;
  max-width: 480px;
  position: relative;
}

.topbar-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: all var(--transition);
}

.topbar-search input:focus {
  border-color: var(--accent);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.topbar-search::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848c94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.topbar-search kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.topbar-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.topbar-connection {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}

.connection-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all var(--transition);
}

.connection-dot.connected {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

/* ========================================
   View Container
   ======================================== */

#view-container {
  flex: 1;
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
}

.view {
  display: none;
  height: 100%;
  overflow: auto;
}

.view.active {
  display: flex;
  flex-direction: column;
}

.view::-webkit-scrollbar {
  width: 10px;
}
.view::-webkit-scrollbar-track { background: transparent; }
.view::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
  border: 2px solid var(--bg-secondary);
}

/* ========================================
   Dashboard (view Inicio)
   ======================================== */

.dashboard {
  padding: 24px 28px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
}

.dashboard-title h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dashboard-title p {
  font-size: 13px;
  color: var(--text-secondary);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
  transition: all var(--transition);
}

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.kpi-icon.accent { background: var(--accent-soft); color: var(--accent); }
.kpi-icon.success { background: var(--success-soft); color: var(--success); }
.kpi-icon.warning { background: var(--warning-soft); color: var(--warning); }
.kpi-icon.danger { background: var(--danger-soft); color: var(--danger); }

.kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.kpi-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

.kpi-delta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dashboard-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .dashboard-row { grid-template-columns: 1fr; }
}

.panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.panel-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.panel-body {
  padding: 16px 20px;
  flex: 1;
}

.panel-body.flush { padding: 0; }

#mini-map {
  width: 100%;
  height: 340px;
}

.activity-feed {
  max-height: 340px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
  flex-shrink: 0;
}

.activity-info {
  flex: 1;
  min-width: 0;
}

.activity-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.activity-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ========================================
   View Monitoramento (mapa + panel devices)
   ======================================== */

.monitoring-layout {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0;
}

.devices-panel {
  width: 320px;
  min-width: 320px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.devices-panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.devices-panel-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.devices-panel-header .subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.devices-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.device-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  margin-bottom: 4px;
}

.device-card:hover {
  background: var(--bg-tertiary);
}

.device-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.device-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.device-status.online {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.device-status.offline {
  background: var(--text-muted);
}

.device-info {
  flex: 1;
  min-width: 0;
}

.device-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-detail {
  font-size: 11px;
  color: var(--text-secondary);
}

.device-plate {
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.map-container {
  flex: 1;
  position: relative;
  min-width: 0;
}

#map, #map-trajetos {
  width: 100%;
  height: 100%;
}

.map-toolbar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  display: flex;
  padding: 4px;
  gap: 2px;
}

.map-toolbar-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.map-toolbar-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.map-toolbar-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Device info overlay */
.device-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  z-index: 500;
  min-width: 280px;
  max-width: 340px;
}

.device-overlay-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.device-overlay-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.info-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 8px 10px;
}

.info-card .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.info-card .value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.info-card .value .unit {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 2px;
}

.info-card.accent .value { color: var(--accent); }
.info-card.success .value { color: var(--success); }
.info-card.warning .value { color: var(--warning); }
.info-card.danger .value { color: var(--danger); }

.vehicle-info-bar {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--accent-soft);
}

.vehicle-info-bar .label {
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
}

.vehicle-info-bar .value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ========================================
   View Trajetos
   ======================================== */

.trajetos-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

.trajetos-sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  overflow-y: auto;
}

.trajetos-sidebar h3 {
  font-size: 14px;
  font-weight: 600;
}

.form-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-range {
  display: flex;
  gap: 8px;
}

.replay-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px;
}

.replay-box .replay-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.replay-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.replay-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-hover);
  outline: none;
}

.replay-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.replay-time {
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 52px;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stat-item {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 8px 10px;
}

.stat-item .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.stat-item .value {
  font-size: 14px;
  font-weight: 600;
}

/* ========================================
   View Cadastros (inline)
   ======================================== */

.cadastros-view {
  padding: 20px 28px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.cadastros-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.cadastros-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  margin-bottom: -1px;
}

.cadastros-tab:hover {
  color: var(--text-primary);
}

.cadastros-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* CRUD elements */
.crud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.crud-header h3 {
  font-size: 16px;
  font-weight: 600;
}

.crud-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.crud-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crud-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  transition: all var(--transition);
}

.crud-item:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.crud-item-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
}

.crud-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crud-item-info {
  flex: 1;
  min-width: 0;
}

.crud-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crud-item-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.crud-item-actions {
  display: flex;
  gap: 4px;
}

.crud-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.crud-icon-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.crud-icon-btn.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* Forms */
.crud-form {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-input, .form-select, .form-textarea {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: all var(--transition);
  width: 100%;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-textarea {
  resize: vertical;
  min-height: 70px;
}

.form-input:disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.form-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 20px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
}

.form-section-title:first-child {
  margin-top: 4px;
}

/* Preview do icone do veiculo */
.icon-preview {
  width: 100%;
  height: 42px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.icon-preview img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.form-info-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--accent);
  margin: 12px 0;
}

/* Slider de velocidade */
.speed-slider-container {
  position: relative;
  padding: 8px 0 32px;
}

.speed-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.form-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-hover);
  outline: none;
}

.form-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 3px solid var(--bg-primary);
}

.form-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--bg-primary);
}

.speed-value-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.photo-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.photo-upload-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  border: 2px solid var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

.photo-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload-info {
  flex: 1;
}

.photo-upload-label {
  font-size: 12px;
  font-weight: 600;
}

.photo-upload-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.photo-upload input[type="file"] {
  display: none;
}

/* Driver chips */
.driver-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.driver-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  font-size: 12px;
}

.driver-chip-primary {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.driver-chip .avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-primary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 11px;
}

.driver-chip .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.driver-chip .remove, .driver-chip .star {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
}

.driver-chip .remove { color: var(--text-muted); }
.driver-chip .remove:hover { color: var(--danger); }
.driver-chip .star { color: var(--warning); opacity: 0.3; }
.driver-chip-primary .star { opacity: 1; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-success { background: var(--success-soft); color: var(--success); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-muted { background: var(--bg-tertiary); color: var(--text-secondary); }

/* ========================================
   Buttons
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--text-muted);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger-soft);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

.btn-ghost:hover {
  background: var(--bg-tertiary);
}

/* ========================================
   Loading
   ======================================== */

#loading {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s;
}

#loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loader-text {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================
   Toast
   ======================================== */

#toast-container {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  animation: slideIn 0.25s ease;
  max-width: 340px;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }
.toast.info { border-left: 3px solid var(--accent); }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ========================================
   Empty State
   ======================================== */

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.4;
}

.empty-state-text {
  font-size: 13px;
  line-height: 1.5;
}

/* ========================================
   Leaflet Overrides
   ======================================== */

.leaflet-control-zoom {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}

.leaflet-control-zoom a {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
}

.leaflet-control-zoom a:hover {
  background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .leaflet-tile-container img {
  filter: brightness(0.9);
}

/* Vehicle marker */
.vehicle-marker {
  position: relative;
  width: 48px !important;
  height: 48px !important;
}

.vehicle-marker-inner {
  width: 36px;
  height: 36px;
  background: var(--orange);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: transform 0.5s ease;
}

.vehicle-marker-inner.moving {
  box-shadow: 0 2px 12px rgba(191, 57, 137, 0.5);
}

/* Marcador com imagem do veiculo (estilo rastreador profissional) */
.vehicle-marker-pin {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.vehicle-marker-pin.moving .vehicle-marker-img img {
  filter: drop-shadow(0 0 6px var(--pin-color, var(--accent)));
}

.vehicle-marker-img {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.vehicle-marker-img img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

/* Badge de ignicao - fica sempre na traseira do veiculo (rotaciona junto com a imagem) */
.vehicle-ignition-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* Badge fora do container rotacionado (fallback do marcador sem imagem) */
.vehicle-ignition-badge.no-rotate {
  bottom: -2px;
  left: auto;
  right: -2px;
  transform: none;
}

.vehicle-ignition-badge.on,
.vehicle-ignition-badge.moving {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: ignitionPulse 2s infinite;
}

.vehicle-ignition-badge.idle {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  animation: ignitionPulse 2.5s infinite;
}

.vehicle-ignition-badge.off {
  background: #374151;
}

.vehicle-ignition-badge.offline {
  background: #9ca3af;
}

.vehicle-ignition-badge.unknown {
  background: #fbbf24;
}

@keyframes ignitionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.vehicle-marker-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ========================================
   View: Minha conta
   ======================================== */
.account-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 28px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 900px;
}
.account-photo-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.account-photo {
  width: 180px; height: 180px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--text-muted);
}
.account-photo img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.account-photo-hint { font-size: 11px; color: var(--text-muted); }

.account-fields { display: flex; flex-direction: column; gap: 18px; }

.account-role-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-radius: 20px;
  font-size: 13px; font-weight: 600;
  width: fit-content;
}

.account-contact-row {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted);
}
.account-contact-row input { flex: 1; }

.account-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 4px 0;
}

.account-password-btn {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
}

/* KPI clicavel (leva pra outro lugar ao clicar) */
.kpi-card.clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kpi-card.clickable::after {
  content: '→';
  position: absolute;
  top: 12px; right: 14px;
  color: var(--text-muted);
  font-size: 14px;
  opacity: 0.5;
  transition: all 0.15s;
}
.kpi-card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.kpi-card.clickable:hover::after {
  opacity: 1;
  transform: translateX(3px);
  color: var(--accent);
}

/* Badge de contador OS no botao toolbar */
.map-toolbar-btn#btn-toggle-ixc {
  position: relative;
}
.map-toolbar-btn#btn-toggle-ixc[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -6px; right: -6px;
  background: #f97316;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.map-toolbar-btn#btn-toggle-ixc.loading svg {
  animation: ixcSpin 1s linear infinite;
}
@keyframes ixcSpin { to { transform: rotate(360deg); } }

/* Toggle de trails: borda colorida quando ativo */
.map-toolbar-btn#btn-toggle-trails.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Multi-select custom (Utils.multiSelect) */
.multiselect-host { position: relative; }
.ms-control {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  cursor: pointer;
  min-height: 34px;
  font-size: 12px;
}
.ms-control:focus, .ms-control:hover { border-color: var(--accent); }
.ms-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-width: 0; }
.ms-placeholder { color: var(--text-muted); font-size: 12px; padding: 2px 4px; }
.ms-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 11px; font-weight: 500;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-tag-x {
  cursor: pointer; font-weight: 700; line-height: 1;
  opacity: 0.85;
}
.ms-tag-x:hover { opacity: 1; }
.ms-arrow { color: var(--text-muted); font-size: 10px; flex-shrink: 0; }

.ms-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 320px;
  display: none;
  flex-direction: column;
}
.ms-dropdown.open { display: flex; }
.ms-search {
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
}
.ms-options {
  flex: 1;
  overflow-y: auto;
  max-height: 240px;
}
.ms-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  transition: background 0.1s;
}
.ms-option:hover { background: var(--bg-secondary); }
.ms-option.checked { background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 500; }
.ms-option input { cursor: pointer; flex-shrink: 0; }
.ms-option span {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-actions {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-secondary);
  font-size: 11px;
}
.ms-btn-clear {
  background: transparent; border: none;
  color: var(--danger); font-size: 11px; font-weight: 500;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.ms-btn-clear:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.ms-count { color: var(--text-muted); }

/* Tabs do painel esquerdo (Devices / OS) */
.devices-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.devices-tab {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
}
.devices-tab:hover { color: var(--text-primary); }
.devices-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.devices-tab-pane {
  display: none;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
}
.devices-tab-pane.active { display: flex; }

/* Painel de filtros de OS */
.os-filters {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  max-height: 50%;
  overflow-y: auto;
  flex-shrink: 0;
}
.filter-group { margin-bottom: 10px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-label {
  display: block;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.filter-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: all 0.15s;
}
.filter-chip:hover { background: var(--bg-secondary); }
.filter-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.filter-chip.prio-critica.active { background: #dc2626; border-color: #dc2626; }
.filter-chip.prio-alta.active    { background: #ea580c; border-color: #ea580c; }
.filter-chip.prio-normal.active  { background: #2563eb; border-color: #2563eb; }
.filter-chip.prio-baixa.active   { background: #16a34a; border-color: #16a34a; }

/* Lista de OS na sidebar */
.os-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.os-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  transition: background 0.15s;
}
.os-list-item:hover { background: var(--bg-secondary); }
.os-list-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px; flex-shrink: 0;
}
.os-list-dot.prio-critica { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.2); }
.os-list-dot.prio-alta    { background: #ea580c; }
.os-list-dot.prio-normal  { background: #2563eb; }
.os-list-dot.prio-baixa   { background: #16a34a; }
.os-list-info { flex: 1; min-width: 0; }
.os-list-title {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.os-list-sub {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.os-list-meta {
  font-size: 10px; color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* Marcador OS IXC: icone de DOCUMENTO colorido por prioridade */
.os-marker { background: none; border: none; }
.os-doc-marker {
  position: relative;
  width: 32px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  transition: transform 0.15s;
}
.os-doc-marker::before {
  /* Corpo do documento */
  content: '';
  position: absolute;
  top: 0; left: 3px;
  width: 26px; height: 34px;
  background: currentColor;
  border: 2px solid #fff;
  border-radius: 4px;
  clip-path: polygon(0 0, 80% 0, 100% 25%, 100% 100%, 0 100%);
  z-index: 1;
}
.os-doc-marker::after {
  /* Pontinha do pin */
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  z-index: 0;
}
.os-doc-marker svg {
  position: relative; z-index: 2;
  margin-top: -3px;
}
.os-doc-marker:hover { transform: scale(1.15); }

/* Cores por prioridade (C=Critica no IXC = vermelho forte, U=Urgente tratado igual C) */
.os-doc-marker.prio-critica { color: #dc2626; }   /* vermelho vivo */
.os-doc-marker.prio-urgente { color: #dc2626; }
.os-doc-marker.prio-alta    { color: #ea580c; }   /* laranja */
.os-doc-marker.prio-normal  { color: #2563eb; }   /* azul */
.os-doc-marker.prio-baixa   { color: #16a34a; }   /* verde */

/* Pulso suave em OS criticas pra chamar atencao */
.os-doc-marker.prio-critica {
  animation: criticaPulse 1.8s infinite;
}
@keyframes criticaPulse {
  0%, 100% { filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35)); }
  50% { filter: drop-shadow(0 0 10px rgba(220,38,38,0.8)); }
}

/* Badge de prioridade */
.badge-prio {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-prio.prio-critica { background: rgba(220,38,38,0.15); color: #991b1b; }
.badge-prio.prio-urgente { background: rgba(220,38,38,0.15); color: #991b1b; }
.badge-prio.prio-alta    { background: rgba(234,88,12,0.15); color: #9a3412; }
.badge-prio.prio-normal  { background: rgba(37,99,235,0.15); color: #1e40af; }
.badge-prio.prio-baixa   { background: rgba(22,163,74,0.15); color: #14532d; }

[data-theme="dark"] .badge-prio.prio-critica { color: #fca5a5; }
[data-theme="dark"] .badge-prio.prio-urgente { color: #fca5a5; }
[data-theme="dark"] .badge-prio.prio-alta    { color: #fdba74; }
[data-theme="dark"] .badge-prio.prio-normal  { color: #93c5fd; }
[data-theme="dark"] .badge-prio.prio-baixa   { color: #86efac; }

.os-icon-header.prio-critica { background: rgba(220,38,38,0.15); }

.badge-status-os {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; background: var(--bg-tertiary); color: var(--text-primary);
}

/* Dropdown de ações da OS (backoffice) */
.os-actions-wrap { display: inline-block; flex-shrink: 0; margin-right: 8px; }
.pwd-modal-header { gap: 8px; }
#os-actions-btn { white-space: nowrap; }
.os-actions-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 8px; min-width: 220px; z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); padding: 4px 0;
}
.os-actions-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 14px;
  background: transparent; border: none; color: var(--text);
  font-size: 13px; cursor: pointer;
}
.os-actions-menu button:hover { background: var(--bg-secondary); }
.os-actions-menu button.danger-action { color: var(--danger); }
.os-actions-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Modal OS completa */
.os-modal-panel {
  position: relative;
  width: min(960px, 96vw);
  height: min(720px, 92vh);
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: svPanelIn 0.22s ease;
}
.os-icon-header {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 16px;
}
.os-icon-header.prio-urgente { background: rgba(220,38,38,0.15); }
.os-icon-header.prio-alta    { background: rgba(234,88,12,0.15); }
.os-icon-header.prio-normal  { background: rgba(37,99,235,0.15); }
.os-icon-header.prio-baixa   { background: rgba(22,163,74,0.15); }

.os-modal-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}

.os-tabs {
  display: flex; gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.os-tab {
  padding: 12px 16px;
  background: transparent; border: none;
  color: var(--text-muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.os-tab:hover { color: var(--text-primary); }
.os-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.os-tab .tab-count {
  display: inline-block; margin-left: 4px;
  background: var(--accent); color: #fff;
  min-width: 18px; padding: 0 5px; height: 16px;
  border-radius: 8px; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center;
}

.os-tab-pane {
  display: none;
  padding: 18px;
  animation: fadeIn 0.2s;
}
.os-tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.os-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.os-field { display: flex; flex-direction: column; gap: 3px; }
.os-field.full { grid-column: 1 / -1; }
.os-field label {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.os-field-value {
  font-size: 14px; color: var(--text-primary);
  padding: 6px 0;
}
.os-field-value a { color: var(--accent); text-decoration: none; }
.os-field-text {
  font-size: 13px; color: var(--text-primary);
  background: var(--bg-secondary);
  padding: 10px 12px;
  border-radius: 6px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 240px; overflow-y: auto;
  line-height: 1.5;
}

.os-msg-list { display: flex; flex-direction: column; gap: 10px; }
.os-msg {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
}
.os-msg.client { border-left-color: #f59e0b; }
.os-msg-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 6px;
}
.os-msg-head b { font-size: 13px; color: var(--text-primary); }
.os-msg-body { font-size: 13px; color: var(--text-primary); line-height: 1.4; white-space: pre-wrap; }

.os-contract-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 12px 14px;
}

@media (max-width: 768px) {
  .os-modal-panel { width: 100vw; height: 100vh; border-radius: 0; max-width: none; max-height: none; }
  .os-field-grid { grid-template-columns: 1fr; }
}

/* Botao IXC ativo no map toolbar */
.map-toolbar-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Badge de conexao instavel */
.badge-unstable {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
  white-space: nowrap;
}
[data-theme="dark"] .badge-unstable { color: #fcd34d; }

/* Date-range com rotulos + atalhos de periodo */
.date-range { display: flex; flex-direction: column; gap: 8px; }
.datetime-field {
  display: flex; flex-direction: column; gap: 4px;
}
.datetime-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-left: 2px;
}
.datetime-field input[type="datetime-local"] {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.quick-periods {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.btn-quick {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-quick:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}
.btn-quick.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Live marker em Trajetos (pulsa quando periodo inclui agora) */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(9, 105, 218, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(9, 105, 218, 0); }
}

/* Pulso no pin do veiculo em modo live (em Trajetos quando periodo inclui agora) */
.vehicle-marker .vehicle-marker-pin.live-marker {
  animation: liveVehiclePulse 1.8s infinite;
}
.vehicle-marker .vehicle-marker-inner.live-marker {
  box-shadow: 0 0 0 4px rgba(9, 105, 218, 0.45);
  animation: livePulse 1.8s infinite;
}
@keyframes liveVehiclePulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(9, 105, 218, 0.7)); }
  50% { filter: drop-shadow(0 0 8px rgba(9, 105, 218, 0.9)); }
}

/* Chart 7 dias em Trajetos */
.daily-chart-summary {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.daily-chart-summary .lbl { color: var(--text-muted); }

.daily-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  height: 160px;
}
.daily-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  cursor: help;
}
.daily-bar-value {
  font-size: 10px;
  color: var(--text-primary);
  font-weight: 600;
  min-height: 12px;
}
.daily-bar-bg {
  flex: 1;
  width: 100%;
  background: var(--bg-tertiary);
  border-radius: 3px 3px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.daily-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, transparent) 100%);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s;
}
.daily-bar:hover .daily-bar-fill { background: var(--success); }
.daily-bar-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: capitalize;
  text-align: center;
  line-height: 1.2;
}

/* Botao danger (pra modal de delete) */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
}
.btn-danger:hover { opacity: 0.9; }

/* Audit log list */
.audit-list { display: flex; flex-direction: column; }
.audit-row {
  display: flex; gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
}
.audit-row:last-child { border-bottom: none; }
.audit-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
.audit-body { flex: 1; min-width: 0; }
.audit-line1 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.audit-line2 { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Debug console (Monitor de Rastreador) */
.debug-legend {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0;
  font-size: 11px;
}
.debug-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.debug-badge.kind-login    { background: #e0f2fe; color: #0369a1; }
.debug-badge.kind-heartbeat{ background: #ede9fe; color: #6d28d9; }
.debug-badge.kind-tracker  { background: #dcfce7; color: #15803d; }
.debug-badge.kind-obd      { background: #fef3c7; color: #b45309; }
.debug-badge.kind-obd_mute { background: #f3f4f6; color: #6b7280; }
.debug-badge.kind-raw      { background: #fae8ff; color: #86198f; }
.debug-badge.kind-error    { background: #fee2e2; color: #b91c1c; }

[data-theme="dark"] .debug-badge.kind-login    { background: rgba(3,105,161,0.25); color: #7dd3fc; }
[data-theme="dark"] .debug-badge.kind-heartbeat{ background: rgba(109,40,217,0.25); color: #c4b5fd; }
[data-theme="dark"] .debug-badge.kind-tracker  { background: rgba(21,128,61,0.25); color: #86efac; }
[data-theme="dark"] .debug-badge.kind-obd      { background: rgba(180,83,9,0.25); color: #fcd34d; }
[data-theme="dark"] .debug-badge.kind-obd_mute { background: rgba(107,114,128,0.25); color: #d1d5db; }
[data-theme="dark"] .debug-badge.kind-raw      { background: rgba(134,25,143,0.25); color: #f0abfc; }
[data-theme="dark"] .debug-badge.kind-error    { background: rgba(185,28,28,0.25); color: #fca5a5; }

.debug-console {
  background: #0d1117;
  color: #c9d1d9;
  border-radius: 6px;
  padding: 12px;
  max-height: 420px;
  overflow-y: auto;
  font-family: 'SF Mono', Monaco, Menlo, Consolas, 'Roboto Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid var(--border);
}
.debug-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  flex-wrap: wrap;
}
.debug-row:last-child { border-bottom: none; }
.debug-row:hover { background: rgba(255,255,255,0.04); }
.debug-time {
  color: #8b949e;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
}
.debug-body { flex: 1; min-width: 0; word-break: break-word; }
.debug-row.kind-obd_mute { opacity: 0.6; }
.debug-row.kind-error { background: rgba(248,81,73,0.08); }

.dbg-kv { white-space: nowrap; color: #c9d1d9; }
.dbg-kv b { color: #58a6ff; font-weight: 500; }
.dbg-kv.alarm { color: #f85149; }
.dbg-kv.alarm b { color: #f85149; }
.dbg-kv.warn { color: #d29922; }
.dbg-raw {
  color: #8b949e;
  font-size: 11px;
  word-break: break-all;
}

@media (max-width: 768px) {
  .debug-console { max-height: 300px; font-size: 11px; }
  .debug-legend { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; }
}

/* Preview de branding (logo + nome) */
.brand-preview-rail {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.brand-preview-rail-logo {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--bg-primary);
  border-radius: 8px;
}
.brand-preview-rail-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.brand-preview-rail-name {
  font-weight: 700; font-size: 16px; color: var(--text-primary);
}

/* Modal de redefinir senha */
.pwd-modal-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
}
.pwd-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.pwd-modal-panel {
  position: relative;
  width: min(420px, 92vw);
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: svPanelIn 0.2s ease;
}
.pwd-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.pwd-modal-header h3 { margin: 0; font-size: 15px; color: var(--text-primary); }
.pwd-modal-close {
  background: transparent; border: none; color: var(--text-muted);
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pwd-modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.pwd-modal-body {
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.pwd-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
  .account-card { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .account-photo { width: 140px; height: 140px; }
}

/* ========================================
   Popup do veiculo (ao clicar no marcador)
   ======================================== */
.vehicle-popup-container .leaflet-popup-content-wrapper {
  padding: 0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.vehicle-popup-container .leaflet-popup-content {
  margin: 0; width: 320px !important;
}
.vehicle-popup-container .leaflet-popup-tip { background: var(--bg-primary); }
.vehicle-popup-container .leaflet-popup-close-button {
  color: var(--text-muted) !important; font-size: 22px !important;
  padding: 6px 8px !important;
}

.vehicle-popup {
  padding: 14px 14px 12px 14px;
}

.vehicle-popup-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 10px;
}
.vehicle-popup-title {
  font-weight: 600; font-size: 14px; color: var(--text-primary);
  line-height: 1.3;
}
.vehicle-popup-subtitle {
  font-size: 12px; color: var(--accent);
  font-weight: 500;
  margin-top: 3px;
  line-height: 1.3;
}

.vehicle-popup-address {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 12px; color: var(--text-primary);
  margin-bottom: 10px;
}
.vehicle-popup-address svg {
  flex-shrink: 0; margin-top: 2px; color: var(--accent);
}
.popup-address-text { line-height: 1.4; }

.vehicle-popup-info {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
  font-size: 12px;
}
.popup-info-line {
  display: flex; justify-content: space-between; gap: 8px;
}
.popup-info-line .label { color: var(--text-muted); }
.popup-info-line .value { color: var(--text-primary); font-weight: 500; }

.vehicle-popup-actions {
  display: flex; gap: 6px;
}
.vehicle-popup-actions .btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px;
}

/* ========================================
   Pegman (Street View draggable)
   ======================================== */
.pegman-btn {
  cursor: grab;
  padding: 4px !important;
  background: linear-gradient(180deg, #fff 0%, #f6f8fa 100%) !important;
  transition: transform 0.15s, box-shadow 0.2s;
  user-select: none;
}
.pegman-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}
.pegman-btn:active, .pegman-btn.dragging { cursor: grabbing; }
.pegman-btn.dragging { opacity: 0.35; }
.pegman-btn svg { display: block; pointer-events: none; }

/* Ghost seguindo o cursor enquanto arrasta */
.pegman-ghost {
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
  transition: transform 0.05s;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.pegman-ghost svg { width: 36px; height: 40px; display: block; }

/* Map container em modo "drop zone" (enquanto o Pegman esta sendo arrastado) */
.map-container .leaflet-container.pegman-drop-zone { cursor: crosshair; }
.map-container .leaflet-container.pegman-hover {
  outline: 3px dashed rgba(251, 192, 45, 0.8);
  outline-offset: -3px;
}

/* ========================================
   Street View overlay (iframe embutido)
   ======================================== */
.street-view-overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: none;
  align-items: center; justify-content: center;
}
.street-view-overlay.active { display: flex; }

.street-view-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

.street-view-panel {
  position: relative;
  width: min(92vw, 1200px);
  height: min(86vh, 760px);
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: svPanelIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes svPanelIn {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.street-view-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.street-view-title { font-weight: 600; color: var(--text-primary); font-size: 14px; }
.street-view-coords {
  font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 6px;
}
.street-view-close {
  background: transparent; border: none; color: var(--text-primary);
  width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.street-view-close:hover { background: var(--bg-tertiary); }

.street-view-btn-google {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: opacity 0.15s;
}
.street-view-btn-google:hover { opacity: 0.9; }

.street-view-body {
  flex: 1;
  position: relative;
  display: flex;
  background: #0f0f0f;
}
.street-view-iframe {
  flex: 1;
  width: 100%; border: 0;
  background: #000;
}

.street-view-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 40px;
  background: var(--bg-secondary);
  text-align: center;
}
.street-view-empty-icon { font-size: 48px; opacity: 0.5; }
.street-view-empty-text { color: var(--text-primary); }

/* Spinner enquanto carrega */
.street-view-overlay.loading .street-view-body::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: svSpin 0.8s linear infinite;
  z-index: 1;
}
@keyframes svSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

body.no-scroll { overflow: hidden; }

/* ========================================
   Status do device (4 estados: offline|off|idle|moving + unknown)
   ======================================== */
.device-status.status-moving  { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.device-status.status-idle    { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
.device-status.status-off     { background: #374151; }
.device-status.status-offline { background: #9ca3af; }
.device-status.status-unknown { background: #fbbf24; }

.badge-status {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-status.status-moving  { background: rgba(34,197,94,0.15);  color: #15803d; }
.badge-status.status-idle    { background: rgba(245,158,11,0.15); color: #b45309; }
.badge-status.status-off     { background: rgba(55,65,81,0.12);   color: #374151; }
.badge-status.status-offline { background: rgba(156,163,175,0.18);color: #4b5563; }
.badge-status.status-unknown { background: rgba(251,191,36,0.18); color: #92400e; }

[data-theme="dark"] .badge-status.status-moving  { color: #4ade80; }
[data-theme="dark"] .badge-status.status-idle    { color: #fbbf24; }
[data-theme="dark"] .badge-status.status-off     { color: #d1d5db; background: rgba(55,65,81,0.3); }
[data-theme="dark"] .badge-status.status-offline { color: #9ca3af; }
[data-theme="dark"] .badge-status.status-unknown { color: #facc15; }

/* ========================================
   Auth-gated layout (esconde chrome na tela de login)
   ======================================== */
body.view-login .nav-rail,
body.view-login .sub-nav,
body.view-login .topbar { display: none !important; }
body.view-login .main-area { margin: 0; }
body.view-login .app-shell { display: block; }

/* ========================================
   Login view
   ======================================== */
.login-container {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 40px 16px;
}
.login-card {
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 40px; max-width: 420px; width: 100%;
}
.login-logo {
  text-align: center;
  margin-bottom: 12px;
}
.login-logo img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}
.login-card h2 { margin: 0; text-align: center; color: var(--text-primary); }
.login-subtitle { text-align: center; color: var(--text-muted); margin: 4px 0 20px; font-size: 13px; }

[data-theme="dark"] .login-logo img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.login-form .form-group { margin-bottom: 14px; }
.login-error {
  color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
  padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ========================================
   Nav-rail badge (alertas)
   ======================================== */
.nav-rail-item { position: relative; }
.nav-rail-badge {
  position: absolute; top: 4px; right: 8px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--nav-rail-bg, var(--bg-primary));
}

/* ========================================
   Search global dropdown
   ======================================== */
.topbar-search { position: relative; }
.search-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow-md);
  z-index: 100; max-height: 360px; overflow-y: auto;
}
.search-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg-secondary); }

/* ========================================
   Alertas
   ======================================== */
.alerts-list { display: flex; flex-direction: column; }
.alert-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.alert-item:hover { background: var(--bg-secondary); }
.alert-item.unack { background: color-mix(in srgb, var(--warning) 6%, transparent); }
.alert-item.unack:hover { background: color-mix(in srgb, var(--warning) 10%, transparent); }
.alert-item.ack { opacity: 0.65; }
.alert-icon { font-size: 22px; width: 40px; text-align: center; }
.alert-info { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; color: var(--text-primary); }
.alert-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.alert-actions { display: flex; gap: 4px; }

/* ========================================
   Groups / fuel / cercas — listas reutilizam .crud-item
   ======================================== */
.group-list, .fuel-list { display: flex; flex-direction: column; }

.badge-danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ========================================
   Mobile UI — elementos especificos (escondidos no desktop)
   ======================================== */
.topbar-menu-btn {
  display: none;              /* so aparece em mobile */
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 40px; height: 40px;
  border-radius: 8px;
  align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.topbar-menu-btn:hover { background: var(--bg-secondary); }

.mobile-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s;
}
.mobile-backdrop.active {
  display: block;
  opacity: 1;
}

/* ========================================
   Responsive — Tablet (<= 768px)
   ======================================== */
@media (max-width: 768px) {
  /* Nav-rail vira off-canvas drawer */
  .nav-rail {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 240px; min-width: 240px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    padding: 16px 0 16px;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
  }
  .nav-rail.open {
    transform: translateX(0);
  }
  .nav-rail-logo {
    width: 72px; height: 72px;
    margin: 0 auto 18px;
  }
  /* Items da nav-rail em linha (horizontal) no drawer, estilo lista */
  .nav-rail-menu, .nav-rail-footer {
    padding: 0 8px;
    width: 100%;
  }
  .nav-rail-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    min-height: 48px;          /* tap target grande */
  }
  .nav-rail-item svg {
    width: 20px; height: 20px;
    flex-shrink: 0;
  }
  .nav-rail-item span {
    text-align: left;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
  }
  .nav-rail-badge {
    top: 50%; right: 16px; transform: translateY(-50%);
    position: absolute;
    border: none;
  }

  /* Sub-nav vira tabs horizontais no topo */
  .sub-nav {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto;
    flex-direction: column;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sub-nav-header {
    padding: 8px 12px;
  }
  .sub-nav-header h2 { font-size: 14px; }
  .sub-nav-collapse { display: none; }
  .sub-nav-menu {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 8px 8px;
    gap: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sub-nav-menu::-webkit-scrollbar { display: none; }
  .sub-nav-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 8px 14px;
    white-space: nowrap;
    min-height: 38px;
  }
  .sub-nav-item svg { width: 14px; height: 14px; }

  /* Topbar mais compacta com botao menu */
  .topbar {
    padding: 0 12px;
    gap: 8px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bg-primary);
  }
  .topbar-menu-btn { display: inline-flex; }
  .topbar-breadcrumb {
    flex: 1; min-width: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-search {
    display: none;             /* botao de busca aparece quando clica em algo */
  }
  .topbar-search.mobile-open {
    display: block;
    position: absolute;
    top: 56px; left: 0; right: 0;
    padding: 8px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    z-index: 95;
  }
  .topbar-connection { display: none; }

  /* Main area */
  .main-area { width: 100%; overflow-x: hidden; }

  /* Dashboard */
  .dashboard { padding: 16px 12px; }
  .dashboard-header { margin-bottom: 16px; }
  .dashboard-header h1 { font-size: 22px; }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .kpi-card { padding: 14px; }
  .kpi-value { font-size: 22px; }
  .dashboard-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Monitoramento — bottom sheet no painel de devices */
  .monitoring-layout {
    flex-direction: column;
    height: calc(100vh - 56px);   /* desconta topbar */
    position: relative;
  }
  .map-container {
    flex: 1;
    min-height: 50vh;
    position: relative;
  }
  .devices-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    max-height: 50vh;
    min-height: 140px;
    height: 35vh;
    transform: translateY(calc(100% - 56px));  /* so mostra header */
    transition: transform 0.3s ease;
    z-index: 50;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }
  .devices-panel.expanded {
    transform: translateY(0);
    height: 60vh;
    max-height: 60vh;
  }
  .devices-panel-header {
    padding: 12px 16px 10px;
    cursor: pointer;
    user-select: none;
    position: relative;
    flex-shrink: 0;
  }
  .devices-panel-header::before {
    content: '';
    position: absolute; top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
  }
  .devices-list {
    overflow-y: auto;
    max-height: calc(60vh - 60px);
  }

  /* Map toolbar */
  .map-toolbar {
    top: 12px !important;
    right: 12px !important;
    gap: 4px !important;
  }
  .map-toolbar-btn {
    width: 38px !important;
    height: 38px !important;
  }
  .device-overlay {
    bottom: 40vh !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    padding: 12px !important;
  }

  /* Trajetos — sidebar vira seção normal com scroll */
  .trajetos-layout {
    flex-direction: column;
    height: calc(100vh - 56px);
  }
  .trajetos-sidebar {
    width: 100%;
    min-width: 0;
    max-height: 45vh;
    overflow-y: auto;
    padding: 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .trajetos-sidebar h3 { font-size: 15px; }
  .date-range { flex-direction: column; gap: 6px; }
  #tr-daily-chart { display: none; }       /* oculta grafico em mobile pra economizar espaco */
  .daily-chart-bars { height: 100px; }

  /* Cadastros/Frota */
  .cadastros-view { padding: 12px; }
  .crud-header { flex-wrap: wrap; gap: 8px; }
  .crud-header h3 { font-size: 16px; }
  .crud-item {
    padding: 12px;
    gap: 10px;
  }
  .crud-item-photo {
    width: 48px; height: 48px;
    flex-shrink: 0;
  }
  .crud-item-title { font-size: 14px; }
  .crud-item-subtitle { font-size: 12px; }
  .crud-item-actions { gap: 4px; }
  .crud-icon-btn {
    min-width: 36px;
    min-height: 36px;
  }

  /* Forms */
  .form-grid, .form-grid.cols-3 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .form-input, .form-select, .form-textarea {
    font-size: 16px !important;  /* previne zoom do iOS */
    min-height: 44px;
  }
  .btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .btn-sm {
    min-height: 36px;
    padding: 6px 12px;
  }

  /* Modais em tela cheia no mobile */
  .pwd-modal-panel,
  .street-view-panel {
    width: 100% !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Login */
  .login-card {
    border: none;
    box-shadow: none;
    padding: 24px;
    max-width: 100%;
  }
  .login-logo img { width: 120px; height: 120px; }

  /* Account */
  .account-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 18px;
  }
  .account-photo { width: 140px; height: 140px; }

  /* Alertas */
  .alert-item { padding: 12px; gap: 10px; }
  .alert-icon { font-size: 18px; width: 28px; }
  .alert-title { font-size: 13px; }
  .alert-meta { font-size: 11px; }

  /* Popup do veiculo - menor em mobile */
  .vehicle-popup-container .leaflet-popup-content {
    width: 280px !important;
  }

  /* Hide search dropdown no mobile (busca fica na topbar overlay) */
  .search-dropdown {
    position: fixed !important;
    top: 108px !important;   /* topbar + search overlay */
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100vh - 120px) !important;
  }

  /* Esconde login-view chrome se aparecer em mobile (ja esconde) */
  body.view-login { padding: 0; }
  body.view-login .login-container {
    min-height: 100vh;
    padding: 20px;
  }
}

/* ========================================
   Responsive — Mobile pequeno (<= 480px)
   ======================================== */
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { padding: 12px; }
  .kpi-value { font-size: 20px; }

  .dashboard-header h1 { font-size: 20px; }
  .dashboard-header p { font-size: 13px; }

  .account-photo { width: 120px; height: 120px; }
  .login-logo img { width: 100px; height: 100px; }

  .devices-panel {
    transform: translateY(calc(100% - 48px));
  }
  .devices-panel.expanded { height: 65vh; max-height: 65vh; }
}

/* ========================================
   Landscape em mobile — ajustes extras
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-rail-logo { display: none; }
  .devices-panel { max-height: 80vh; }
  .devices-panel.expanded { height: 90vh; }
  .login-logo img { width: 80px; height: 80px; }
}

/* ========================================
   Rotas — abas e tabela (v2.6)
   ======================================== */
.rotas-view {
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}
.rotas-tabs {
  display: inline-flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.rotas-tab {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: .45rem .9rem;
  border-radius: 6px;
  font-size: .88em;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rotas-tab:hover { color: var(--text-primary); }
.rotas-tab.active {
  background: var(--bg-primary);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.data-table {
  border-collapse: collapse;
  font-size: .9em;
}
.data-table th,
.data-table td {
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.data-table th {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.data-table tr:hover td { background: var(--bg-hover, rgba(0,0,0,.02)); }
.stop-row .form-input { padding: .35rem .5rem; font-size: .85em; }

/* Editor visual de rotas */
.route-editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 500px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.route-editor-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.route-editor-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  flex: 1;
  overflow: hidden;
}
.route-editor-map {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.route-editor-sidebar {
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow-y: auto;
  padding: .8rem;
}
.route-editor-help {
  background: var(--bg-primary);
  border-left: 3px solid var(--accent);
  padding: .55rem .7rem;
  font-size: .85em;
  margin-bottom: .8rem;
  border-radius: 0 6px 6px 0;
  color: var(--text-muted);
}
.route-editor-help strong { color: var(--text-primary); }
.route-editor-meta { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.re-stop-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: .55rem;
  overflow: hidden;
  transition: background .25s;
}
.re-stop-card.stop-highlight { background: rgba(9,105,218,0.12); }
.re-stop-card-head {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.re-stop-card-body { padding: .4rem .55rem .6rem; }
.re-stop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: .75em;
  flex-shrink: 0;
}
.re-stop-label { flex: 1; padding: .3rem .5rem; font-size: .85em; }
.re-stop-coords {
  font-family: ui-monospace, monospace;
  font-size: .7em;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.re-stop-slider { width: 100%; }

/* Pin numerado no mapa do editor */
.re-stop-marker { background: none; border: none; }
.re-stop-pin {
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: .85em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border: 2px solid #fff;
}

/* Monitor live de execução */
.exec-monitor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 500px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.exec-monitor-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.exec-monitor-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  flex: 1;
  overflow: hidden;
}
.exec-monitor-map { width: 100%; height: 100%; }
.exec-monitor-sidebar {
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow-y: auto;
  padding: .8rem;
}
.em-stop-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: 6px;
  padding: .5rem .65rem;
  margin-bottom: .45rem;
  font-size: .88em;
}
.em-stop-card.visited { border-left-color: #16a34a; }
.em-stop-card.next    { border-left-color: #ea580c; background: rgba(234,88,12,0.05); }
.em-stop-title { display: flex; align-items: center; gap: .4rem; }
.em-stop-meta  { color: var(--text-muted); font-size: .75em; margin-top: .15rem; }
.em-kpi {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .5rem .7rem;
  margin-bottom: .4rem;
}
.em-kpi-label { font-size: .7em; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.em-kpi-value { font-size: 1.1em; font-weight: 600; }

/* Pulse pra veículo em movimento no monitor */
.veh-pulse {
  background: none; border: none;
}
.veh-pulse-dot {
  width: 18px; height: 18px;
  background: #22c55e;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: vehPulse 2s infinite;
}
@keyframes vehPulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

@media (max-width: 768px) {
  .rotas-tabs { width: 100%; }
  .rotas-tab { flex: 1; }
  .stop-row { grid-template-columns: 24px 1fr 80px 80px 60px 24px !important; gap: .25rem !important; }
  .route-editor-body, .exec-monitor-body { grid-template-columns: 1fr; }
  .route-editor-sidebar, .exec-monitor-sidebar { border-left: 0; border-top: 1px solid var(--border); max-height: 40vh; }
}