/* ==========================================================================
   theme-pro.css  -  camada visual profissional (carrega DEPOIS de admin.css)
   Nao altera estrutura nem logica: so aparencia. Para voltar ao visual
   anterior, basta remover a linha <link ... theme-pro.css> do index.html.
   ========================================================================== */

:root {
  --pro-navy-950: #0a1020;
  --pro-navy-900: #0f172a;
  --pro-navy-800: #172036;
  --pro-navy-700: #1e293b;
  --pro-blue-700: #1d4ed8;
  --pro-blue-600: #2563eb;
  --pro-blue-500: #3b82f6;
  --pro-blue-100: #dbeafe;
  --pro-blue-50: #eff6ff;
  --pro-bg: #f1f5f9;
  --pro-card: #ffffff;
  --pro-line: #e2e8f0;
  --pro-line-strong: #cbd5e1;
  --pro-ink: #0f172a;
  --pro-ink-2: #334155;
  --pro-muted: #64748b;
  --pro-green: #059669;
  --pro-green-bg: #ecfdf5;
  --pro-amber: #b45309;
  --pro-amber-bg: #fffbeb;
  --pro-red: #dc2626;
  --pro-red-bg: #fef2f2;
  --pro-radius: 14px;
  --pro-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px -10px rgba(15, 23, 42, .10);
  --pro-font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
  font-family: var(--pro-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--pro-ink);
}
button, input, select, textarea { font-family: var(--pro-font) !important; }
:focus-visible { outline: 2px solid var(--pro-blue-500); outline-offset: 2px; }
::selection { background: var(--pro-blue-100); color: var(--pro-navy-900); }

/* --------------------------------------------------------------------------
   LOGIN
   -------------------------------------------------------------------------- */
#loginScreen.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(37, 99, 235, .55) 0%, transparent 62%),
    radial-gradient(800px 480px at 105% 108%, rgba(29, 78, 216, .45) 0%, transparent 60%),
    linear-gradient(160deg, #0a1020 0%, #0f1d3a 100%) !important;
}
#loginScreen .login-card {
  width: min(100%, 424px) !important;
  max-width: none !important;
  padding: 38px 36px 30px !important;
  background: #fff !important;
  color: var(--pro-ink) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 64px -24px rgba(2, 6, 23, .65), 0 0 0 1px rgba(255, 255, 255, .06) !important;
  text-align: left;
}
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 28px; }
.login-brand-mark {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 15px; margin-bottom: 18px; color: #fff;
  background: linear-gradient(145deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 12px 22px -10px rgba(37, 99, 235, .75);
}
.login-brand-mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#loginScreen .login-brand h1 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--pro-ink); }
#loginScreen .login-brand p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--pro-muted) !important; }
#loginScreen .field { margin-bottom: 16px; }
#loginScreen .field label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--pro-ink-2) !important; letter-spacing: .005em; }
#loginScreen .field input {
  width: 100%; min-height: 46px; padding: 0 14px;
  font-size: 14px; color: var(--pro-ink) !important;
  background: #fff !important; border: 1px solid var(--pro-line-strong) !important;
  border-radius: 11px !important; box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
#loginScreen .field input::placeholder { color: #94a3b8; }
#loginScreen .field input:hover { border-color: #94a3b8 !important; }
#loginScreen .field input:focus { outline: 0; border-color: var(--pro-blue-600) !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, .14) !important; }
#loginScreen .btn-login {
  width: 100%; min-height: 47px; margin-top: 6px; padding: 0 16px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .005em; color: #fff !important;
  background: linear-gradient(180deg, #2f6df0 0%, #1d4ed8 100%) !important;
  border: 0 !important; border-radius: 11px !important; cursor: pointer;
  box-shadow: 0 10px 18px -10px rgba(29, 78, 216, .85), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
#loginScreen .btn-login:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); background: linear-gradient(180deg, #2f6df0 0%, #1d4ed8 100%) !important; opacity: 1; }
#loginScreen .btn-login:active:not(:disabled) { transform: translateY(0); }
#loginScreen .btn-login:disabled { opacity: .65; cursor: wait; }
#loginScreen .login-error { min-height: 0; margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: #b91c1c !important; }
#loginScreen .login-error:not(:empty) { margin-top: 14px; padding: 10px 12px; background: var(--pro-red-bg); border: 1px solid #fecaca; border-radius: 10px; }
.login-footnote { margin: 22px 0 0; padding-top: 18px; text-align: center; font-size: 11.5px; color: #94a3b8; border-top: 1px solid #eef2f7; }

/* --------------------------------------------------------------------------
   BASE DO PAINEL
   -------------------------------------------------------------------------- */
html, body, #dashboard, #dashboard .admin-shell, #dashboard .admin-workspace { background: var(--pro-bg) !important; }
.sidebar-brand-row { display: none; }

/* --------------------------------------------------------------------------
   SIDEBAR (desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  #dashboard .admin-shell { grid-template-columns: 252px minmax(0, 1fr) !important; }
  #dashboard .admin-sidebar {
    width: 252px !important; min-width: 252px !important; max-width: 252px !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    padding: 22px 14px 16px !important; gap: 0 !important;
    background: linear-gradient(180deg, #0f172a 0%, #0a1020 100%) !important;
    border-right: 1px solid #1e293b !important; color: #e2e8f0 !important;
    overflow-y: auto;
  }
  #dashboard .sidebar-brand-row { display: flex; order: 0; align-items: center; gap: 12px; padding: 2px 8px 22px; margin-bottom: 4px; border-bottom: 1px solid rgba(148, 163, 184, .14); }
  #dashboard .sidebar-logo { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #3b82f6, #1d4ed8); box-shadow: 0 8px 16px -8px rgba(37, 99, 235, .8); }
  #dashboard .sidebar-logo svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #dashboard .sidebar-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  #dashboard .sidebar-brand-text strong { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dashboard .sidebar-brand-text small { margin-top: 2px; font-size: 11px; color: #94a3b8; }

  #dashboard .sidebar-section-label { order: 1; display: block !important; margin: 20px 10px 8px !important; font-size: 10.5px !important; font-weight: 700; letter-spacing: .14em; color: #64748b !important; }
  #dashboard .sidebar-nav { order: 2; display: flex !important; flex-direction: column; gap: 4px; margin: 0 !important; padding: 0 !important; }
  #dashboard .admin-sidebar .sidebar-link {
    display: flex !important; align-items: center; gap: 12px; width: 100% !important;
    min-height: 42px !important; padding: 0 12px !important;
    font-size: 13.5px; font-weight: 500; line-height: 1; text-decoration: none;
    color: #cbd5e1 !important; background: transparent !important;
    border: 1px solid transparent !important; border-radius: 10px !important; box-shadow: none !important;
    transition: background .15s, color .15s;
  }
  #dashboard .admin-sidebar .sidebar-link span { display: inline !important; white-space: nowrap; }
  #dashboard .admin-sidebar .sidebar-link svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none !important; stroke: currentColor !important; stroke-width: 1.8; opacity: .85; }
  #dashboard .admin-sidebar .sidebar-link:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
  #dashboard .admin-sidebar .sidebar-link.active { background: rgba(37, 99, 235, .22) !important; color: #fff !important; font-weight: 600; box-shadow: inset 3px 0 0 #3b82f6 !important; }
  #dashboard .admin-sidebar .sidebar-link.active svg { opacity: 1; color: #93c5fd; }

  #dashboard .sidebar-user-brand {
    order: 3; display: flex !important; align-items: center; justify-content: flex-start !important; gap: 11px;
    margin: auto 0 10px !important; padding: 10px 12px !important;
    background: rgba(255, 255, 255, .045); border: 1px solid rgba(148, 163, 184, .16) !important; border-radius: 12px;
  }
  #dashboard .sidebar-user-avatar {
    width: 38px !important; height: 38px !important; flex: 0 0 38px !important; display: grid !important; place-items: center;
    overflow: hidden; border-radius: 50% !important; cursor: pointer;
    color: #bfdbfe !important; background: #1e3a8a !important; border: 1px solid rgba(147, 197, 253, .35) !important; outline: 0 !important; box-shadow: none !important;
  }
  #dashboard .sidebar-user-avatar:hover { transform: none; color: #fff !important; background: #1d4ed8 !important; box-shadow: none !important; }
  #dashboard .sidebar-user-avatar svg { width: 20px !important; height: 20px !important; stroke: currentColor !important; stroke-width: 1.9 !important; fill: none; }
  #dashboard .sidebar-user-details { display: flex !important; flex-direction: column; gap: 1px !important; min-width: 0; flex: 1; }
  #dashboard .sidebar-user-details strong { font-size: 13px !important; font-weight: 600 !important; line-height: 1.3; color: #f1f5f9 !important; max-width: 100%; }
  #dashboard .sidebar-user-details small { font-size: 11px !important; line-height: 1.3; color: #94a3b8 !important; max-width: 100%; }

  #dashboard .sidebar-footer.sidebar-bottom-actions {
    order: 4; width: 100% !important; box-sizing: border-box;
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px;
    margin: 0 !important; padding: 12px 4px 0 !important; border-top: 1px solid rgba(148, 163, 184, .14) !important;
    font-size: 11.5px !important; font-weight: 500; color: #94a3b8 !important;
  }
  #dashboard .sidebar-footer .sidebar-status-dot { display: inline-block !important; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
  #dashboard .sidebar-footer .sidebar-logout {
    margin-left: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    padding: 6px 14px !important; font-size: 12px !important; font-weight: 600; white-space: nowrap;
    color: #cbd5e1 !important; background: transparent !important; border: 1px solid #334155 !important; border-radius: 8px !important; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  #dashboard .sidebar-footer .sidebar-logout:hover { color: #fecaca !important; background: rgba(239, 68, 68, .14) !important; border-color: rgba(239, 68, 68, .55) !important; }
}

/* --------------------------------------------------------------------------
   AREA PRINCIPAL: cabecalhos de pagina e cartoes
   -------------------------------------------------------------------------- */
#dashboard .admin-workspace .admin-main { padding: 28px clamp(20px, 2.4vw, 40px) 36px !important; }
.admin-main .dashboard-page-head, .admin-main .feature-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin: 0 0 22px !important; padding: 0 0 18px !important; border-bottom: 1px solid var(--pro-line) !important;
}
.admin-main .dashboard-page-head h2, .admin-main .feature-page-head h2 { margin: 4px 0 6px !important; font-size: clamp(22px, 2vw, 27px) !important; font-weight: 700 !important; letter-spacing: -.025em; color: var(--pro-ink) !important; }
.admin-main .dashboard-page-head p, .admin-main .feature-page-head p { max-width: 720px; margin: 0; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--pro-muted) !important; }
.admin-main .dashboard-eyebrow { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .14em !important; color: var(--pro-blue-600) !important; }

.admin-main .dashboard-chart-card, .admin-main .dashboard-city-card, .admin-main .dashboard-map-card, .admin-main .feature-card {
  background: var(--pro-card) !important; border: 1px solid var(--pro-line) !important; border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow) !important;
}
.admin-main .dashboard-card-head, .admin-main .online-users-heading, .admin-main .volume-history-head { padding: 18px 22px !important; border-bottom: 1px solid #eef2f7 !important; }
.admin-main .dashboard-card-head h3, .admin-main .online-users-heading h3, .admin-main .volume-history-head h3, .admin-main .permissions-list-wrap h3 { font-size: 15px !important; font-weight: 650 !important; letter-spacing: -.01em; color: var(--pro-ink) !important; }
.admin-main .dashboard-card-head p, .admin-main .online-users-heading p, .admin-main .volume-history-head p, .admin-main .permissions-list-wrap p { margin-top: 3px; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--pro-muted) !important; }
.admin-main .dashboard-map-chip, .admin-main .online-count { padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--pro-blue-700) !important; background: var(--pro-blue-50) !important; border: 1px solid var(--pro-blue-100) !important; border-radius: 999px; }
.admin-main .feature-card { padding: 22px !important; margin: 0 0 18px !important; }
.admin-main .feature-note { margin-top: 14px; padding: 11px 14px; font-size: 12.5px; line-height: 1.55; color: #475569; background: #f8fafc; border: 1px solid var(--pro-line); border-radius: 10px; }

/* Dashboard: ranking de cidades */
.dashboard-city-list, .dashboard-city-chart { padding: 8px 22px 20px; }
.dash-city-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.dash-city-row:last-child { border-bottom: 0; }
.dash-city-rank { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--pro-ink-2) !important; background: #f1f5f9 !important; border: 0 !important; border-radius: 8px; }
.dash-city-row:nth-child(-n+3) .dash-city-rank { color: var(--pro-blue-700) !important; background: var(--pro-blue-50) !important; }
.dash-city-content { flex: 1; min-width: 0; }
.dash-city-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 13.5px; color: var(--pro-ink-2) !important; }
.dash-city-label strong { font-size: 14px; font-weight: 700; color: var(--pro-ink); }
.dash-track { height: 8px !important; overflow: hidden; background: #eef2f7 !important; border-radius: 999px !important; }
.dash-fill { display: block; height: 100%; border-radius: 999px !important; }
.dash-fill.city { background: linear-gradient(90deg, #3b82f6, #2563eb) !important; }
.dash-empty { padding: 28px 0; text-align: center; font-size: 13.5px; color: var(--pro-muted) !important; }

/* Botoes */
.admin-main .btn-atualizar, .btn-atualizar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px !important; padding: 0 18px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .005em;
  color: #fff !important; background: var(--pro-blue-600) !important; border: 1px solid var(--pro-blue-600) !important; border-radius: 10px !important; cursor: pointer;
  box-shadow: 0 6px 12px -8px rgba(37, 99, 235, .8);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.admin-main .btn-atualizar:hover:not(:disabled), .btn-atualizar:hover:not(:disabled) { background: var(--pro-blue-700) !important; border-color: var(--pro-blue-700) !important; transform: translateY(-1px); }
.admin-main .btn-atualizar:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-secondary, .admin-main .permissions-actions .btn-secondary {
  min-height: 40px; padding: 0 16px; font-size: 13px; font-weight: 600; color: var(--pro-ink-2) !important; background: #fff !important;
  border: 1px solid var(--pro-line-strong) !important; border-radius: 10px !important; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-secondary:hover { background: #f8fafc !important; border-color: #94a3b8 !important; }

/* Formularios */
.admin-main input:not([type=checkbox]):not([type=radio]):not([type=file]), .admin-main select, .admin-main textarea {
  min-height: 42px; padding: 0 13px; font-size: 13.5px; color: var(--pro-ink) !important; background: #fff !important;
  border: 1px solid var(--pro-line-strong) !important; border-radius: 10px !important; transition: border-color .15s, box-shadow .15s;
}
.admin-main input:focus, .admin-main select:focus, .admin-main textarea:focus { border-color: var(--pro-blue-600) !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, .13) !important; }
.admin-main .permissions-form label, .admin-main .profile-form label, .admin-main .volume-form label, .admin-main .volume-history-head label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--pro-ink-2) !important; }
.admin-main input[readonly] { color: #475569 !important; background: #f8fafc !important; }

/* Tabelas */
.admin-main .permissions-list-wrap table, .admin-main .volume-table { font-size: 13px !important; }
.admin-main .permissions-list-wrap th, .admin-main .volume-table th {
  padding: 12px 14px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; text-align: left;
  color: #475569 !important; background: #f8fafc !important; border-bottom: 1px solid var(--pro-line) !important;
}
.admin-main .permissions-list-wrap td, .admin-main .volume-table td { padding: 13px 14px !important; color: var(--pro-ink-2) !important; border-bottom: 1px solid #f1f5f9 !important; }
.admin-main .volume-table tbody tr:hover td { background: #fafcff !important; }
.admin-main .volume-table-wrap, .admin-main .permissions-list-wrap { border-radius: 12px; }

/* --------------------------------------------------------------------------
   Correcoes da sidebar e titulos de pagina
   -------------------------------------------------------------------------- */
#dashboard .admin-main .dashboard-page-head .dashboard-eyebrow,
#dashboard .admin-main .feature-page-head .dashboard-eyebrow { display: block !important; }
#dashboard .admin-main .dashboard-page-head h2,
#dashboard .admin-main .feature-page-head h2 { display: block !important; }
@media (min-width: 761px) {
  #dashboard .admin-sidebar .sidebar-link { justify-content: flex-start !important; text-align: left !important; column-gap: 12px !important; }
  #dashboard .admin-sidebar .sidebar-link span { flex: 1 1 auto; text-align: left; }
  #dashboard .sidebar-user-brand { min-height: 0 !important; height: auto !important; }
}
.admin-main .volume-form .volume-save-button { order: 9; }

/* --------------------------------------------------------------------------
   MOTORISTAS: resumo, lista e detalhe
   -------------------------------------------------------------------------- */
#motoristasView .admin-grid-layout, #motoristasView .coluna-direita { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#motoristasView .stats-superiores {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important;
  margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
#motoristasView .stats-superiores .stat-card {
  position: relative; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important;
  min-height: 92px !important; height: auto !important; padding: 18px 20px !important;
  background: #fff !important; border: 1px solid var(--pro-line) !important; border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow) !important;
  overflow: hidden;
}
#motoristasView .stats-superiores .stat-card:after { content: none !important; display: none !important; }
#motoristasView .stats-superiores .stat-icon { display: grid !important; place-items: center; width: 46px !important; height: 46px !important; flex: 0 0 46px !important; border-radius: 12px !important; }
#motoristasView .stats-superiores .stat-icon svg { width: 22px !important; height: 22px !important; }
#motoristasView .stats-superiores .stat-total .stat-icon { color: var(--pro-blue-600) !important; background: var(--pro-blue-50) !important; }
#motoristasView .stats-superiores .stat-pendente .stat-icon { color: #d97706 !important; background: var(--pro-amber-bg) !important; }
#motoristasView .stats-superiores .stat-aprovado .stat-icon { color: var(--pro-green) !important; background: var(--pro-green-bg) !important; }
#motoristasView .stats-superiores .stat-reprovado .stat-icon { color: var(--pro-red) !important; background: var(--pro-red-bg) !important; }
#motoristasView .stats-superiores .stat-num { font-size: 28px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -.03em; color: var(--pro-ink) !important; }
#motoristasView .stats-superiores .stat-label { margin-top: 5px; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--pro-muted) !important; }

#motoristasView .fila-analise { gap: 18px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#motoristasView .lista-fila {
  gap: 8px !important; padding: 12px !important; background: #fff !important; color: var(--pro-ink) !important;
  border: 1px solid var(--pro-line) !important; border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow) !important;
}
#motoristasView .fila-titulo { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px !important; margin: 0 0 4px; background: transparent !important; border: 0 !important; border-bottom: 1px solid #eef2f7 !important; border-radius: 0 !important; }
#motoristasView .fila-titulo strong { font-size: 14.5px !important; font-weight: 700 !important; color: var(--pro-ink) !important; }
#motoristasView .fila-titulo span { font-size: 12px !important; color: var(--pro-muted) !important; }
#motoristasView .fila-item {
  display: grid; align-items: center; gap: 12px !important; padding: 12px !important; width: 100%; text-align: left; cursor: pointer;
  background: #fff !important; border: 1px solid transparent !important; border-radius: 12px !important; box-shadow: none !important;
  transition: background .15s, border-color .15s;
}
#motoristasView .fila-item + .fila-item { border-top: 1px solid transparent !important; }
#motoristasView .fila-item:hover { background: #f8fafc !important; border-color: var(--pro-line) !important; }
#motoristasView .fila-item.selecionado { background: var(--pro-blue-50) !important; border-color: #bfdbfe !important; box-shadow: inset 3px 0 0 var(--pro-blue-600) !important; }
#motoristasView .fila-iniciais { display: grid; place-items: center; width: 40px !important; height: 40px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .02em; color: #3730a3 !important; background: #e0e7ff !important; border: 0 !important; border-radius: 50% !important; }
#motoristasView .fila-identidade strong { font-size: 14px !important; font-weight: 600 !important; color: var(--pro-ink) !important; }
#motoristasView .fila-identidade small { font-size: 12px !important; color: var(--pro-muted) !important; }
#motoristasView .fila-situacao { padding: 4px 10px !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px !important; border: 1px solid transparent !important; white-space: nowrap; }
#motoristasView .fila-situacao.status-pendente { color: var(--pro-amber) !important; background: var(--pro-amber-bg) !important; border-color: #fde68a !important; }
#motoristasView .fila-situacao.status-aprovado { color: #047857 !important; background: var(--pro-green-bg) !important; border-color: #a7f3d0 !important; }
#motoristasView .fila-situacao.status-reprovado { color: #b91c1c !important; background: var(--pro-red-bg) !important; border-color: #fecaca !important; }

#motoristasView .fila-detalhe {
  padding: 24px 26px !important; background: #fff !important; color: var(--pro-ink-2) !important;
  border: 1px solid var(--pro-line) !important; border-radius: var(--pro-radius) !important; box-shadow: var(--pro-shadow) !important;
}
#motoristasView .fila-detalhe-topo { padding-bottom: 16px !important; margin-bottom: 4px; background: transparent !important; border-bottom: 1px solid #eef2f7 !important; }
#motoristasView .fila-detalhe-topo h2 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--pro-ink) !important; }
#motoristasView .fila-detalhe-topo p { margin-top: 4px; font-size: 12.5px !important; color: var(--pro-muted) !important; }
#motoristasView .fila-status-icone { width: 36px; height: 36px; display: inline-grid; place-items: center; font-size: 16px; background: #fff !important; border: 1px solid var(--pro-line-strong) !important; border-radius: 10px !important; cursor: pointer; transition: background .15s, border-color .15s; }
#motoristasView .fila-status-icone.aprovar:hover, #motoristasView .fila-status-icone.aprovar.active { background: var(--pro-green-bg) !important; border-color: #6ee7b7 !important; }
#motoristasView .fila-status-icone.recusar:hover, #motoristasView .fila-status-icone.recusar.active { background: var(--pro-red-bg) !important; border-color: #fca5a5 !important; }

#motoristasView .fleet-vehicle-hero, #motoristasView .fleet-route-panel, #motoristasView .fila-info-group {
  background: #fff !important; border: 1px solid var(--pro-line) !important; border-radius: 12px !important; box-shadow: none !important;
}
#motoristasView .fleet-eyebrow, #motoristasView .fleet-stats-label, #motoristasView .fleet-spec-grid small { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .1em !important; color: var(--pro-muted) !important; }
#motoristasView .fleet-vehicle-copy h3 { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--pro-ink) !important; }
#motoristasView .fleet-spec-grid > div, #motoristasView .fila-info { background: #f8fafc !important; border: 1px solid #eef2f7 !important; border-radius: 10px !important; }
#motoristasView .fleet-spec-grid strong, #motoristasView .fila-info strong { font-size: 13.5px !important; font-weight: 600 !important; color: var(--pro-ink) !important; }
#motoristasView .fila-info span { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .03em; color: var(--pro-muted) !important; }
#motoristasView .fleet-stats-panel h3, #motoristasView .fila-info-group h3, #motoristasView .fila-docs-heading h3, #motoristasView .fleet-section-heading h3 { font-size: 15px !important; font-weight: 650 !important; color: var(--pro-ink) !important; }
#motoristasView .fleet-stats-panel .fleet-stat-row span { font-size: 12.5px !important; color: var(--pro-muted) !important; }
#motoristasView .fleet-stats-panel .fleet-stat-row strong { font-size: 13px !important; font-weight: 600 !important; color: var(--pro-ink) !important; }
#motoristasView .fleet-stat-legend span { font-size: 12.5px; color: var(--pro-muted); }
#motoristasView .fleet-doc-meter { height: 9px !important; border-radius: 999px !important; overflow: hidden; background: #eef2f7 !important; }
#motoristasView .fleet-doc-meter .sent { background: linear-gradient(90deg, #10b981, #059669) !important; border-radius: 999px; }
#motoristasView .fleet-city-rank-row { font-size: 13px; }
#motoristasView .fleet-city-rank-track { height: 6px !important; border-radius: 999px !important; background: #e8eef5 !important; overflow: hidden; }
#motoristasView .fleet-city-rank-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #60a5fa, #2563eb) !important; }
#motoristasView .fila-docs-heading span { font-size: 12.5px !important; color: var(--pro-muted) !important; }
#motoristasView .fila-doc-toggle { padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--pro-ink-2) !important; background: #fff !important; border: 1px solid var(--pro-line-strong) !important; border-radius: 8px !important; cursor: pointer; }
#motoristasView .fila-doc-toggle.active { color: var(--pro-blue-700) !important; background: var(--pro-blue-50) !important; border-color: #bfdbfe !important; }
#motoristasView .fila-doc-row { background: #fff !important; border: 1px solid var(--pro-line) !important; border-radius: 10px !important; }
#motoristasView .fila-doc-texto strong { font-size: 13.5px !important; color: var(--pro-ink) !important; }
#motoristasView .fila-doc-texto small { font-size: 12px !important; color: var(--pro-muted) !important; }
#motoristasView .fila-doc-acao { width: 34px; height: 34px; background: #fff !important; border: 1px solid var(--pro-line-strong) !important; border-radius: 9px !important; cursor: pointer; }
#motoristasView .fila-doc-acao:hover { background: #f8fafc !important; border-color: #94a3b8 !important; }

#motoristasView .fila-acoes-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
#motoristasView .fila-acoes .action-btn {
  min-height: 40px; padding: 0 16px !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--pro-ink-2) !important; background: #fff !important; border: 1px solid var(--pro-line-strong) !important; border-radius: 10px !important; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
#motoristasView .fila-acoes .action-btn:hover { background: #f8fafc !important; border-color: #94a3b8 !important; transform: none; }
#motoristasView .fila-acoes .action-btn.ficha-cadastro, #motoristasView .fila-acoes .action-btn.contrato-mei { color: #fff !important; background: var(--pro-blue-600) !important; border-color: var(--pro-blue-600) !important; }
#motoristasView .fila-acoes .action-btn.ficha-cadastro:hover, #motoristasView .fila-acoes .action-btn.contrato-mei:hover { background: var(--pro-blue-700) !important; border-color: var(--pro-blue-700) !important; }
#motoristasView .fila-acoes .action-btn.excluir { color: var(--pro-red) !important; border-color: #fecaca !important; }
#motoristasView .fila-acoes .action-btn.excluir:hover { background: var(--pro-red-bg) !important; border-color: #f87171 !important; }

/* Barra de busca e filtros */
#motoristasView .toolbar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 10px !important; align-items: center !important; }
#motoristasView .toolbar .search-wrap { padding: 0 14px !important; min-height: 42px; background: #fff !important; border: 1px solid var(--pro-line-strong) !important; border-radius: 10px !important; box-shadow: none !important; }
#motoristasView .toolbar .search-wrap:focus-within { border-color: var(--pro-blue-600) !important; box-shadow: 0 0 0 4px rgba(37, 99, 235, .13) !important; }
#motoristasView .toolbar .search-wrap input { min-height: 40px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#motoristasView .toolbar .filters { padding: 3px !important; background: #f1f5f9 !important; border: 1px solid var(--pro-line) !important; border-radius: 11px !important; gap: 2px; }
#motoristasView .toolbar .filter-btn { min-height: 34px; padding: 0 14px !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--pro-muted) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; }
#motoristasView .toolbar .filter-btn:hover { color: var(--pro-ink) !important; background: rgba(255, 255, 255, .7) !important; }
#motoristasView .toolbar .filter-btn.active { color: var(--pro-blue-700) !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .1) !important; }
#motoristasView .paginacao .pagina-btn { min-height: 36px; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: var(--pro-ink-2); background: #fff; border: 1px solid var(--pro-line-strong); border-radius: 9px; cursor: pointer; }
#motoristasView .empty-state { padding: 48px 20px; color: var(--pro-muted); }
#motoristasView .empty-state h3 { font-size: 16px; font-weight: 650; color: var(--pro-ink); }

/* Toasts e janela de confirmacao */
.toast-admin { border-radius: 12px !important; border: 1px solid var(--pro-line); box-shadow: 0 14px 30px -12px rgba(15, 23, 42, .25) !important; font-weight: 500; }
.modal-confirm-box { border-radius: 18px !important; box-shadow: 0 30px 60px -24px rgba(2, 6, 23, .5) !important; }

/* Cartao do usuario na sidebar: seletor mais forte para vencer regras antigas (#dashboard .sidebar-brand.sidebar-user-brand) */
@media (min-width: 761px) {
  #dashboard .sidebar-brand.sidebar-user-brand {
    order: 3; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 11px !important;
    width: 100% !important; margin: auto 0 10px !important; padding: 10px 12px !important; min-height: 0 !important;
    background: rgba(255, 255, 255, .045) !important; border: 1px solid rgba(148, 163, 184, .16) !important; border-radius: 12px !important; box-shadow: none !important;
  }
}
#motoristasView .fila-info-group h3 { font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .09em; text-transform: uppercase; color: var(--pro-ink-2) !important; }


/* ==========================================================================
   MOBILE (<= 760px)  -  camada final, carrega por ultimo.
   Corrige: sidebar de 52px que empurrava o conteudo para fora da tela
   (scroll lateral / textos cortados), botao "Sair" escondido no celular,
   zoom automatico do iOS ao tocar em campos e altura 100vh nos navegadores moveis.
   Para desfazer: apagar este bloco inteiro.
   ========================================================================== */
@media (max-width: 760px) {
  html { max-width: 100%; overflow-x: hidden !important; -webkit-text-size-adjust: 100%; }
  body { max-width: 100%; overflow-x: clip; } /* clip (e nao hidden) para nao quebrar o position:sticky da barra */

  /* Estrutura: barra superior + conteudo em coluna unica */
  html body #dashboard .admin-shell {
    display: flex !important; flex-direction: column !important; grid-template-columns: none !important;
    width: 100% !important; max-width: 100% !important; height: auto !important;
    min-height: 100vh !important; min-height: 100dvh !important; border-radius: 0 !important;
  }
  html body #dashboard .admin-workspace { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; }
  html body #dashboard .admin-workspace > .admin-main { padding: 14px 12px 28px !important; min-width: 0 !important; max-width: 100% !important; }

  /* Barra superior fixa: perfil + Sair (linha 1) e abas de navegacao (linha 2) */
  html body #dashboard .admin-shell .admin-sidebar {
    position: sticky !important; top: 0 !important; z-index: 60 !important; flex: 0 0 auto !important;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; align-content: flex-start !important;
    gap: 8px 10px !important; width: 100% !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; min-height: 0 !important; padding: 9px 12px 9px !important; margin: 0 !important;
    background: #0f172a !important; border: 0 !important; border-bottom: 1px solid #1e293b !important; border-radius: 0 !important;
    box-shadow: 0 4px 14px -8px rgba(2, 6, 23, .55) !important; overflow: visible !important;
  }
  html body #dashboard .admin-sidebar .sidebar-brand-row,
  html body #dashboard .admin-sidebar .sidebar-section-label { display: none !important; }

  html body #dashboard .admin-sidebar .sidebar-brand.sidebar-user-brand {
    order: 1 !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important;
    margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  html body #dashboard .admin-sidebar .sidebar-user-avatar {
    width: 38px !important; height: 38px !important; flex: 0 0 38px !important; margin: 0 !important; display: grid !important; place-items: center !important;
    overflow: hidden !important; border-radius: 50% !important; color: #bfdbfe !important; background: #1e3a8a !important; border: 1px solid rgba(147, 197, 253, .35) !important; box-shadow: none !important;
  }
  html body #dashboard .admin-sidebar .sidebar-user-avatar svg { width: 20px !important; height: 20px !important; }
  html body #dashboard .admin-sidebar .sidebar-user-details { display: flex !important; flex-direction: column !important; min-width: 0 !important; flex: 1 1 auto !important; }
  html body #dashboard .admin-sidebar .sidebar-user-details strong,
  html body #dashboard .admin-sidebar .sidebar-user-details small { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  html body #dashboard .admin-sidebar .sidebar-user-details strong { font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #f1f5f9 !important; }
  html body #dashboard .admin-sidebar .sidebar-user-details small { font-size: 11px !important; line-height: 1.25 !important; color: #94a3b8 !important; }

  /* Rodape da sidebar vira so o botao Sair (antes ficava display:none no celular) */
  html body #dashboard .admin-sidebar .sidebar-footer.sidebar-bottom-actions {
    order: 2 !important; display: flex !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; font-size: 0 !important; line-height: 0 !important;
  }
  html body #dashboard .admin-sidebar .sidebar-footer .sidebar-status-dot { display: none !important; }
  html body #dashboard .admin-sidebar .sidebar-footer .sidebar-logout {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: auto !important; min-width: 64px !important; max-width: none !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 16px !important;
    font-size: 12.5px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important;
    color: #e2e8f0 !important; background: transparent !important; border: 1px solid #334155 !important; border-radius: 10px !important;
  }
  html body #dashboard .admin-sidebar .sidebar-footer .sidebar-logout:active { background: rgba(239, 68, 68, .18) !important; border-color: rgba(239, 68, 68, .55) !important; color: #fecaca !important; }

  /* Abas de navegacao */
  html body #dashboard .admin-sidebar .sidebar-nav {
    order: 3 !important; display: flex !important; flex: 0 0 100% !important; flex-direction: row !important; gap: 6px !important;
    width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html body #dashboard .admin-sidebar .sidebar-nav::-webkit-scrollbar { display: none; }
  html body #dashboard .admin-sidebar .sidebar-link {
    display: flex !important; flex: 1 0 auto !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
    width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 12px !important;
    font-size: 12.5px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important;
    color: #cbd5e1 !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid transparent !important; border-radius: 10px !important; box-shadow: none !important;
  }
  html body #dashboard .admin-sidebar .sidebar-link span { display: inline !important; font-size: 12.5px !important; }
  html body #dashboard .admin-sidebar .sidebar-link svg { display: block !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; color: inherit !important; opacity: .9 !important; }
  html body #dashboard .admin-sidebar .sidebar-link.active,
  html body #dashboard .admin-sidebar .sidebar-link[aria-current=page] { color: #fff !important; font-weight: 600 !important; background: rgba(37, 99, 235, .38) !important; border-color: rgba(96, 165, 250, .45) !important; box-shadow: none !important; }
  html body #dashboard .admin-sidebar .sidebar-link[hidden] { display: none !important; }

  /* Campos: 16px evita o zoom automatico do iPhone ao focar */
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
  #loginScreen.login-screen { min-height: 100vh; min-height: 100dvh; padding: 16px; align-items: center; }
  #loginScreen .login-card { padding: 30px 22px 24px !important; border-radius: 18px !important; }

  /* Avisos (toast) ocupam a largura da tela */
  .toast-container { top: 10px !important; left: 10px !important; right: 10px !important; max-width: none !important; }
}

@media (max-width: 760px) {
  /* Motoristas: resumo em 2 colunas (antes eram 4 colunas estreitas e so os icones apareciam) */
  #motoristasView .stats-superiores { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 12px !important; }
  #motoristasView .stats-superiores .stat-card { min-height: 72px !important; padding: 12px !important; gap: 10px !important; }
  #motoristasView .stats-superiores .stat-icon { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }
  #motoristasView .stats-superiores .stat-num { font-size: 22px !important; }
  #motoristasView .stats-superiores .stat-label { font-size: 10.5px !important; letter-spacing: .06em !important; white-space: nowrap; }
}


@media (max-width: 760px) {
  /* Detalhe do cadastro no celular. O admin.css escondia o detalhe (display:none!important com IDs) e forcava a lista;
     estes seletores tem mais especificidade e alternam lista OU detalhe pela classe mobile-detail-open (controlada no admin.js). */
  html body #motoristasView #filaAnalise #filaDetalhe { display: none !important; }
  html body #motoristasView #filaAnalise.mobile-detail-open #filaDetalhe {
    display: grid !important; width: 100% !important; max-width: none !important; margin: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "back" "head" "hero" "route" "actions" "info" "docs-head" "docs" !important;
    grid-auto-flow: row !important; align-content: start !important; align-items: start !important; gap: 12px !important; padding: 12px !important;
  }
  html body #motoristasView #filaAnalise.mobile-detail-open #entregadoresList { display: none !important; }
  html body #motoristasView #filaAnalise { scroll-margin-top: 112px; }
  html body #motoristasView #filaDetalhe > .fila-voltar-mobile {
    display: none !important;
  }
  html body #motoristasView #filaAnalise.mobile-detail-open #filaDetalhe > .fila-voltar-mobile {
    display: inline-flex !important; grid-area: back; align-items: center; justify-self: start; min-height: 40px; margin: 0; padding: 0 14px;
    font: inherit; font-size: 13px; font-weight: 600; color: #1d4ed8; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; cursor: pointer;
  }
}

@media (max-width: 760px) {
  /* Detalhe: botoes de acao com area de toque confortavel (44px) em 2 colunas */
  html body #motoristasView .fila-acoes-botoes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body #motoristasView .fila-acoes .action-btn { width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 0 10px !important; font-size: 13px !important; white-space: normal !important; }
  html body #motoristasView .fila-status-icone { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  html body #motoristasView .fila-doc-toggle { min-height: 40px; padding: 0 16px; }
}