/* =====================================================================
   UI 2.0 — camada visual mobile first (carrega depois de style.css).
   Mesmas cores do Mercado Livre; aqui ficam layout, profundidade e
   animações. Base = celular; telas maiores via min-width.
   ===================================================================== */

:root {
  --radius: 14px;
  --radius-lg: 18px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-sm: 0 1px 2px rgba(45, 50, 119, .06), 0 2px 8px rgba(45, 50, 119, .05);
  --shadow-md: 0 4px 12px rgba(45, 50, 119, .08), 0 12px 28px rgba(45, 50, 119, .08);
  --shadow-lg: 0 18px 50px rgba(45, 50, 119, .22);
  --focus-ring: 0 0 0 4px rgba(52, 131, 250, .18);
  --nav-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 380px at 50% -160px, rgba(255, 230, 0, .38), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.4;
}

::selection { background: var(--ml-yellow); color: var(--ml-navy); }

/* ---------- Topo ---------- */
.topbar {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(45, 50, 119, .12);
  transition: box-shadow .3s var(--ease-out), padding .3s var(--ease-out);
  gap: 10px;
}
.topbar.is-scrolled { box-shadow: 0 8px 24px rgba(45, 50, 119, .18); }

.brand { font-size: 14px; min-width: 0; }
.brand img { height: 30px; transition: transform .5s var(--ease-spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.topbar .brand span { display: none; }

.topbar-right { gap: 8px; min-width: 0; }
/* No celular o status de conexão vira um ponto colorido */
.conn-status {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  padding: 0;
  font-size: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pending);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}
.topbar .conn-status.online { background: var(--accept); }
.topbar .conn-status.offline { background: var(--deny); animation: ui-heartbeat 1.6s ease-in-out infinite; }
.conn-status.online { animation: ui-soft-pop .5s var(--ease-spring); }

.userbar { gap: 6px; min-width: 0; }
.user-chip {
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  padding: 5px 10px;
}
.btn-logout { min-height: 32px; padding: 5px 12px; }

/* Seletores de SVC (super admin / pares) descem para uma segunda linha no celular */
.topbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.topbar-right > .sc-focus, .topbar-right > #scUserFocusWrap:not(.hidden) { order: 10; flex: 1 1 100%; display: flex; justify-content: flex-end; }
.sc-focus select, #scUserFocusWrap select { flex: 1 1 auto; max-width: 100%; min-height: 34px; font-size: 14px; }

/* ---------- Navegação: barra inferior no celular ---------- */
.tabs {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 50;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border: 1px solid rgba(45, 50, 119, .1);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  animation: ui-nav-in .6s var(--ease-spring) backwards;
}

.tab-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 4px 2px;
  border: 0;
  border-radius: 16px;
  font-size: 10.5px;
  line-height: 1.1;
  background: transparent;
  transition: color .3s var(--ease-out), transform .2s var(--ease-out);
}
.tab-btn:hover { background: transparent; }
.tab-btn:active { transform: scale(.92); }
.tab-btn .tab-ico { font-size: 19px; line-height: 1; transition: transform .45s var(--ease-spring); }
.tab-btn .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-btn.active { background: transparent; color: var(--ml-yellow); }
.tab-btn.active .tab-ico { transform: translateY(-1px) scale(1.18); }
.tabs:not(.has-indicator) .tab-btn.active { background: var(--ml-navy); }

.tab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 0;
  border-radius: 16px;
  background: var(--ml-navy);
  box-shadow: 0 6px 16px rgba(45, 50, 119, .35);
  transition: transform .5s var(--ease-spring), width .5s var(--ease-spring);
  pointer-events: none;
}

.tab-btn .badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 6px);
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.badge:not(.hidden) { animation: ui-badge-in .5s var(--ease-spring), ui-pulse 2.2s ease-out 1s infinite; }

/* ---------- Estrutura ---------- */
main {
  max-width: 1180px;
  padding: 14px 12px calc(var(--nav-h) + 34px + var(--safe-bottom));
}
body:not(:has(.tabs)) main { padding-bottom: 28px; }
/* Transportadora no celular: formulário, notificações e depois o histórico (o sino leva às notificações) */
main:has(#requestForm) { display: flex; flex-direction: column; }
main:has(#requestForm) > * { order: 3; }
main:has(#requestForm) > .grid { order: 1; }
main:has(#requestForm) > #notifCard { order: 2; scroll-margin-top: 80px; }

.card {
  border: 1px solid rgba(45, 50, 119, .07);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ml-navy);
  font-size: 13px;
  letter-spacing: .06em;
}
.card > h2::before, .card-header h2::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--ml-yellow), #ffc800);
  box-shadow: 0 0 0 1px rgba(45, 50, 119, .12);
}
.card-header { gap: 10px; }

.grid { gap: 14px; grid-template-columns: 1fr; }

/* Troca de aba: painel e cards entram em cascata */
.tab-panel.active { animation: ui-panel-in .5s var(--ease-out) backwards; }
.tab-panel.active > .card,
.tab-panel.active > div > .card,
.tab-panel.active > .grid > .card {
  animation: ui-rise .6s var(--ease-out) backwards;
}
.tab-panel.active > :nth-child(2) .card, .tab-panel.active > .card:nth-child(2) { animation-delay: .05s; }
.tab-panel.active > :nth-child(3) .card, .tab-panel.active > .card:nth-child(3) { animation-delay: .1s; }
.tab-panel.active > :nth-child(4) .card, .tab-panel.active > .card:nth-child(4) { animation-delay: .15s; }
.tab-panel.active > :nth-child(n+5) .card, .tab-panel.active > .card:nth-child(n+5) { animation-delay: .2s; }

/* ---------- Formulários ---------- */
input, textarea, select {
  min-height: 44px;
  font-size: 16px; /* evita o zoom automático do iOS */
  border-radius: 12px;
  background: #fff;
  border-color: #d5d9e4;
  transition: border-color .2s, box-shadow .25s var(--ease-out), background .2s;
}
input[type="checkbox"], input[type="radio"] { min-height: 0; }
input:hover, textarea:hover, select:hover { border-color: #b9bfd3; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
form label { font-weight: 600; }
.row { flex-direction: column; gap: 0; }

/* ---------- Botões ---------- */
.btn {
  position: relative;
  overflow: hidden;
  min-height: 44px;
  border-radius: 12px;
  transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, opacity .2s, filter .2s;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-sm { min-height: 38px; border-radius: 10px; }
.btn-primary { box-shadow: 0 6px 16px rgba(52, 131, 250, .32); }
.btn-accept { box-shadow: 0 6px 14px rgba(0, 166, 80, .28); }
.btn-deny { box-shadow: 0 6px 14px rgba(255, 64, 83, .26); }
.btn:disabled { box-shadow: none; }

.ui-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: scale(0);
  animation: ui-ripple .6s var(--ease-out) forwards;
  pointer-events: none;
}

.segmented {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  padding: 3px;
  background: rgba(45, 50, 119, .05);
  border-radius: 999px;
  gap: 2px;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented-btn {
  flex: 0 0 auto;
  min-height: 36px;
  border-color: transparent;
  transition: background .3s var(--ease-out), color .2s, transform .2s var(--ease-out), box-shadow .3s;
}
.segmented-btn:hover { border-color: transparent; background: rgba(255, 255, 255, .7); }
.segmented-btn:active { transform: scale(.94); }
.segmented-btn.active { box-shadow: 0 4px 12px rgba(52, 131, 250, .35); animation: ui-soft-pop .35s var(--ease-spring); }

/* ---------- Fila ---------- */
.toolbar { gap: 10px; }
.toolbar .filter-input, .queue-carrier-filter, .queue-carrier-filter select { flex: 1 1 100%; width: 100%; max-width: 100%; }
.toolbar .spacer { display: none; }
.toolbar .queue-carrier-filter select { flex: none; }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.bulk-bar .selected-count { flex: 1 1 100%; }
/* No celular as ações em massa só aparecem quando há seleção */
.bulk-bar:not(:has(#bulkAccept:not(:disabled))) { display: none; }
.bulk-bar .btn { flex: 1 1 0; padding-inline: 10px; }

/* Com algo selecionado, a barra de ações flutua acima da navegação */
.bulk-bar:has(#bulkAccept:not(:disabled)) {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(var(--nav-h) + 26px + var(--safe-bottom));
  z-index: 45;
  width: auto;
  padding: 10px;
  background: var(--ml-navy);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: ui-sheet-in .45s var(--ease-spring);
}
.bulk-bar:has(#bulkAccept:not(:disabled)) .selected-count { color: var(--ml-yellow); font-weight: 700; }

.request-item {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(45, 50, 119, .09);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s, opacity .3s;
  overflow: hidden;
}
.request-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border);
}
.request-item:has(.tipo-ambulancia)::before { background: var(--deny); }
.request-item:has(.tipo-atribuicao)::before { background: var(--primary); }
.request-item:has(.status-aceito)::before { background: var(--accept); }
.request-item:has(.status-recusado)::before { background: var(--deny); }
.request-item:has(.row-check:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(52, 131, 250, .16), var(--shadow-sm); }

.request-item .content { min-width: 0; }
.request-item .details { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 12.5px; gap: 5px 12px; }
.request-item .details strong { color: var(--text); }
.request-item .justificativa, .request-item .justificativa-recusa { border-radius: 8px; background: var(--panel-2); }
.request-item .justificativa-recusa { background: rgba(255, 64, 83, .07); }

.queue-item { flex-wrap: wrap; }
.queue-item .content { flex: 1 1 calc(100% - 50px); }
.queue-item .actions { flex-direction: row; width: 100%; margin-left: 0; gap: 8px; }
.queue-item .actions .btn { flex: 1 1 0; min-height: 46px; font-size: 14px; }
.queue-item input[type="checkbox"] { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; }

.queue-number { background: var(--ml-navy); color: var(--ml-yellow); border-color: var(--ml-navy); }

.waiting-timer { border-radius: 999px; transition: color .3s, background .3s, border-color .3s; }
.waiting-timer.is-late { color: var(--deny); background: rgba(255, 64, 83, .1); border-color: var(--deny); animation: ui-heartbeat 1.6s ease-in-out infinite; }

/* Entrada de itens novos e saída ao decidir */
.ui-enter { animation: ui-rise .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.ui-enter.ui-fresh { animation: ui-rise .55s var(--ease-out) backwards, ui-flash 1.8s ease-out .3s; }
.ui-leaving-accept { animation: ui-leave-right .55s var(--ease-out) forwards; pointer-events: none; }
.ui-leaving-deny { animation: ui-leave-left .55s var(--ease-out) forwards; pointer-events: none; }

.empty-state { padding: 34px 12px; }
#emptyQueue:not(.hidden) { animation: ui-soft-pop .6s var(--ease-spring); font-size: 15px; }
.empty-state.is-loading {
  border-radius: 12px;
  color: transparent;
  background: linear-gradient(90deg, #eef0f6 0%, #f8f9fc 40%, #eef0f6 80%) 0 0 / 200% 100%;
  animation: ui-shimmer 1.2s linear infinite;
  min-height: 90px;
}

.stats span { background: #fff; font-weight: 600; }

/* ---------- Dashboard ---------- */
.dashboard-header-actions { justify-content: flex-start; }
/* Seis atalhos de período: grade 3 x 2 no celular */
.dashboard-header-actions .segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 100%;
  width: 100%;
  border-radius: 16px;
  overflow: visible;
}
.dashboard-header-actions .segmented-btn { width: 100%; }
.dashboard-header-actions > .btn { flex: 1 1 calc(50% - 5px); }
.daily-date { flex: 1 1 calc(50% - 5px); }
.daily-date input { flex: 1; min-width: 0; }
.dashboard-carrier-filter, .dashboard-carrier-filter select { flex: 1 1 100%; width: 100%; }

.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(45, 50, 119, .08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: ui-rise .5s var(--ease-out) backwards;
}
.kpi::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ml-yellow);
  transform-origin: left;
  animation: ui-grow-x .8s var(--ease-out) .2s backwards;
}
.kpi-accept::after { background: var(--accept); }
.kpi-deny::after { background: var(--deny); }
.kpi-pending::after { background: var(--pending); }
.kpi-primary::after { background: var(--primary); }
.kpi-grid > .kpi:nth-child(2) { animation-delay: .04s; }
.kpi-grid > .kpi:nth-child(3) { animation-delay: .08s; }
.kpi-grid > .kpi:nth-child(4) { animation-delay: .12s; }
.kpi-grid > .kpi:nth-child(5) { animation-delay: .16s; }
.kpi-grid > .kpi:nth-child(6) { animation-delay: .2s; }
.kpi-grid > .kpi:nth-child(7) { animation-delay: .24s; }
.kpi-grid > .kpi:nth-child(8) { animation-delay: .28s; }
.kpi-value { font-size: 24px; letter-spacing: -.01em; }

.motivo-fill, .cmp-bar span { transform-origin: left; animation: ui-grow-x .9s var(--ease-out) backwards; }
.motivo-row:nth-child(3) .motivo-fill { animation-delay: .05s; }
.motivo-row:nth-child(4) .motivo-fill { animation-delay: .1s; }
.motivo-row:nth-child(5) .motivo-fill { animation-delay: .15s; }
.motivo-row:nth-child(n+6) .motivo-fill { animation-delay: .2s; }
.motivo-fill { background: linear-gradient(90deg, var(--ml-navy), #4a51a8); }

.daily-plot svg rect:not(.daily-hit) {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: ui-grow-y .7s var(--ease-out) backwards;
}

.pending-category-grid, .cycle-route-grid, .cmp-grid { grid-template-columns: 1fr; }
.pending-category, .cycle-route-card, .cmp-card { background: #fff; border-color: rgba(45, 50, 119, .08); box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.pending-notification.has-pending .pending-total { animation: ui-pulse-amber 2.4s ease-out infinite; }

.admin-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left / 24px 100% no-repeat local,
    linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(45, 50, 119, .16), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(45, 50, 119, .16), transparent) right / 10px 100% no-repeat scroll;
}
.admin-table th { white-space: nowrap; }
.admin-table tbody tr { transition: background .2s; }
.admin-table tbody tr:hover td { background: rgba(255, 230, 0, .12); }

/* ---------- Notificações, avisos e toasts ---------- */
.notif-item { border-radius: 12px; background: #fff; animation: ui-rise .45s var(--ease-out) backwards; }
.notif-unread { box-shadow: var(--shadow-sm); }
.notif-bell { min-height: 34px; transition: transform .3s var(--ease-spring), background .2s; }
.notif-bell:has(.badge:not(.hidden)) { animation: ui-ring 2.8s ease-in-out infinite; }

.notice-stack { top: calc(64px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; max-width: none; }
.notice {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-lg);
  animation: ui-notice-in .6s var(--ease-spring) backwards;
}
.notice::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, .7);
  transform-origin: left;
  animation: ui-drain 10s linear forwards;
}

.toast {
  left: 12px;
  right: 12px;
  bottom: calc(var(--nav-h) + 28px + var(--safe-bottom));
  max-width: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: ui-toast-in .5s var(--ease-spring) backwards;
}
body:not(:has(.tabs)) .toast { bottom: calc(16px + var(--safe-bottom)); }
.toast.toast-success { background: var(--accept); }
.toast.toast-info { background: var(--ml-navy); }

/* ---------- Diálogo de recusa: folha inferior no celular ---------- */
.refusal-dialog {
  margin: auto 0 0;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(18px + var(--safe-bottom));
  box-shadow: var(--shadow-lg);
}
.refusal-dialog[open] { animation: ui-sheet-in .5s var(--ease-spring) backwards; }
.refusal-dialog[open]::backdrop { animation: ui-fade-in .3s ease backwards; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.refusal-dialog::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  margin: -8px auto 14px;
  border-radius: 999px;
  background: #d5d9e4;
}
.refusal-actions .btn { flex: 1 1 0; }

/* ---------- Login ---------- */
.login-wrap { position: relative; overflow: hidden; min-height: calc(100vh - 70px); }
.login-wrap::before, .login-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .55;
  animation: ui-float 14s ease-in-out infinite alternate;
}
.login-wrap::before { width: 340px; height: 340px; background: var(--ml-yellow); top: -80px; left: -90px; }
.login-wrap::after { width: 300px; height: 300px; background: rgba(52, 131, 250, .45); bottom: -90px; right: -80px; animation-delay: -6s; }
.login-card {
  position: relative;
  z-index: 1;
  padding: 26px 20px;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  animation: ui-card-in .8s var(--ease-spring) backwards;
}
.login-card .brand { flex-direction: column; text-align: center; font-size: 17px; }
.login-card .brand img { animation: ui-logo-in 1s var(--ease-spring) .15s backwards; }
.login-card .btn-primary { min-height: 50px; font-size: 15px; }
.login-error:not(.hidden) { animation: ui-shake .45s ease; }

.site-footer { padding-bottom: calc(var(--nav-h) + 36px + var(--safe-bottom)); }
body:not(:has(.tabs)) .site-footer { padding-bottom: 26px; }

/* =====================================================================
   Telas maiores
   ===================================================================== */
@media (min-width: 560px) {
  .topbar .brand span { display: inline; }
  .conn-status { width: auto; height: auto; padding: 3px 10px; font-size: 11px; border: 1px solid; border-radius: 999px; background: transparent; box-shadow: none; }
  .topbar .conn-status.online, .topbar .conn-status.offline { background: transparent; }
  .row { flex-direction: row; gap: 12px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .volume-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .request-item .details { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .user-chip { max-width: 260px; }
  .topbar-right { flex-wrap: nowrap; }
  .topbar-right > .sc-focus, .topbar-right > #scUserFocusWrap:not(.hidden) { order: 0; flex: 0 1 auto; }
  .sc-focus select, #scUserFocusWrap select { max-width: 180px; }
  .notice-stack { left: auto; right: 20px; width: 360px; }
  .toast { left: auto; right: 20px; width: 360px; }
  .refusal-dialog {
    margin: auto;
    width: min(500px, calc(100vw - 32px));
    border-radius: 20px;
    padding: 24px;
  }
  .refusal-dialog[open] { animation: ui-dialog-in .45s var(--ease-spring) backwards; }
  .refusal-dialog::before { display: none; }
  .refusal-actions .btn { flex: 0 0 auto; }
  .pending-category-grid, .cycle-route-grid, .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  main { padding: 22px 20px calc(var(--nav-h) + 40px); }
  .card { padding: 20px 22px; }
  .grid { grid-template-columns: 1.2fr 1fr; }
  .toolbar .filter-input { flex: 0 1 220px; }
  .queue-carrier-filter { flex: 0 1 220px; width: 220px; }
  .toolbar .queue-carrier-filter select { width: 100%; }
  .bulk-bar, .bulk-bar:not(:has(#bulkAccept:not(:disabled))) { display: flex; width: auto; margin-left: auto; flex-wrap: nowrap; }
  .bulk-bar .selected-count { flex: 0 0 auto; }
  .bulk-bar .btn { flex: 0 0 auto; }
  .bulk-bar:has(#bulkAccept:not(:disabled)) { left: 0; right: 0; margin-inline: auto; width: max-content; padding: 10px 12px 10px 18px; }
  .queue-item { flex-wrap: nowrap; }
  .queue-item .content { flex: 1 1 auto; }
  .queue-item .actions { flex-direction: column; width: auto; margin-left: auto; }
  .queue-item .actions .btn { flex: 0 0 auto; min-height: 40px; min-width: 120px; }
  .dashboard-header-actions { justify-content: flex-end; }
  .dashboard-header-actions .segmented { display: flex; flex: 0 1 auto; width: auto; border-radius: 999px; }
  .dashboard-header-actions .segmented-btn { width: auto; }
  .dashboard-header-actions > .btn, .daily-date { flex: 0 0 auto; }
  .dashboard-carrier-filter, .dashboard-carrier-filter select { flex: 0 0 auto; width: 220px; }
  .kpi-value { font-size: 28px; }
  main:has(#requestForm) { display: block; }
  .login-card { padding: 34px 30px; }
}

/* Desktop: navegação volta para o topo */
@media (min-width: 1200px) {
  .topbar { padding: 10px 28px; }
  .brand img { height: 34px; }
  .brand { font-size: 16px; }
  .tabs {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 4px;
    background: rgba(45, 50, 119, .08);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
  }
  .tab-btn {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
  }
  .tab-btn .tab-ico { font-size: 16px; }
  .tab-btn.active .tab-ico { transform: scale(1.12); }
  .tab-indicator { top: 4px; bottom: 4px; border-radius: 999px; }
  .tab-btn .badge { position: static; box-shadow: none; }
  main { padding-bottom: 40px; }
  .site-footer { padding-bottom: 26px; }
  .bulk-bar:has(#bulkAccept:not(:disabled)) { bottom: 24px; }
  .toast { bottom: 24px; }
}

/* Super admin tem mais itens no topo: em telas médias o nome do app some e o e-mail encurta */
@media (min-width: 1200px) and (max-width: 1499px) {
  .topbar:has(#svcsTabBtn:not(.hidden)) .brand span { display: none; }
  .topbar:has(#svcsTabBtn:not(.hidden)) .user-chip { max-width: 150px; }
  .topbar:has(#svcsTabBtn:not(.hidden)) .tab-btn { padding: 8px 12px; }
  .topbar:has(#svcsTabBtn:not(.hidden)) .sc-focus select { max-width: 150px; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
  .topbar:has(#svcsTabBtn:not(.hidden)) .user-chip { display: none; }
}

/* Interações de mouse */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--shadow-md); }
  .request-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
  .btn:active:not(:disabled) { transform: scale(.96); }
  .tab-btn:hover:not(.active) .tab-ico { transform: translateY(-2px) rotate(-6deg); }
  .notif-bell:hover { transform: rotate(-10deg) scale(1.06); }
}

/* =====================================================================
   Animações
   ===================================================================== */
@keyframes ui-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ui-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-soft-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ui-badge-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ui-pulse { 0% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(255, 64, 83, .55); } 70% { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(255, 64, 83, 0); } 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(255, 64, 83, 0); } }
@keyframes ui-pulse-amber { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } }
@keyframes ui-heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.05); } }
@keyframes ui-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 230, 0, .9), var(--shadow-sm); background: #fffbe0; } 100% { box-shadow: 0 0 0 14px rgba(255, 230, 0, 0), var(--shadow-sm); background: var(--panel); } }
@keyframes ui-leave-right { 0% { transform: none; } 30% { transform: scale(.98); background: rgba(0, 166, 80, .1); border-color: var(--accept); } 100% { opacity: .2; transform: translateX(60%) rotate(2deg); } }
@keyframes ui-leave-left { 0% { transform: none; } 30% { transform: scale(.98); background: rgba(255, 64, 83, .1); border-color: var(--deny); } 100% { opacity: .2; transform: translateX(-60%) rotate(-2deg); } }
@keyframes ui-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ui-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ui-shimmer { to { background-position: -200% 0; } }
@keyframes ui-ripple { to { transform: scale(2.6); opacity: 0; } }
@keyframes ui-nav-in { from { opacity: 0; transform: translateY(120%); } to { opacity: 1; transform: none; } }
@keyframes ui-sheet-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes ui-dialog-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ui-notice-in { from { opacity: 0; transform: translateX(110%) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ui-drain { to { transform: scaleX(0); } }
@keyframes ui-ring { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(14deg); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-4deg); } }
@keyframes ui-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes ui-card-in { from { opacity: 0; transform: translateY(30px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes ui-logo-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes ui-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }

/* Quem prefere menos movimento recebe a interface sem animações */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}