/* driver/assets/style/fullscreen-views.css  (v1)
   Converte os modais/sheets do app MOTORISTA em PÁGINAS no estilo do painel
   do parceiro (/parceiro), igual ao /go: topbar e bottom-nav SEMPRE fixas,
   e a "tela" (menu, login, chat, código, avaliação) ocupa a área entre elas,
   deslizando da direita com o fundo (mapa + painel) recuando.

   Linguagem visual (mesma do merchant.css):
   fundo #F5F5F5 · cards brancos radius 16 · shadow 0 1px 4px rgba(0,0,0,.06)
   amarelo #F9D515 · texto #1A1A1A · lateral 16px, gaps 12px.

   NÃO mexe na lógica JS — estados continuam sendo .open / .is-open / .show /
   style.display. Aqui só reescrevemos a APRESENTAÇÃO. Carregado por último.

   Mecânica de "aberto" por tela:
   - #sideDrawer ......... .open / [aria-hidden="false"]
   - #authModal .......... .is-open
   - #chatSheet .......... .open
   - #codeModal .......... .show          - #actionCodeModal ... .show
   - #drvRateModal ....... style sem "none" (JS usa style.display=''/none)
   - #dlvCodeModal ....... style sem "none"
   Os display-based ficam SEMPRE display:flex (o esconder é o translateX). */

:root {
  --rv-topbar-h: calc(env(safe-area-inset-top) + 60px);
  --rv-bottomnav-h: calc(58px + env(safe-area-inset-bottom));
  --rv-bg: #F5F5F5;
  --rv-card: #FFFFFF;
  --rv-black: #1A1A1A;
  --rv-gray-500: #6B6B6B;
  --rv-gray-200: #E8E8E8;
  --rv-yellow: #F9D515;
  --rv-radius: 16px;
  --rv-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ============================================================
   1) CONTAINER DAS TELAS — entre topbar e bottom-nav
   ============================================================ */
#sideDrawer,
#authModal,
#chatSheet,
#codeModal,
#actionCodeModal,
#drvRateModal,
#dlvCodeModal {
  position: fixed !important;
  top: var(--rv-topbar-h) !important;
  bottom: var(--rv-bottomnav-h) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--rv-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  z-index: 500 !important;
  transform: translateX(100%);
  opacity: .6;
  /* fechada: invisível p/ cliques — visibility bloqueia até filhos com
     pointer-events próprio (ex: .modal-card do auth.css) */
  visibility: hidden;
  pointer-events: none;
  box-shadow: -8px 0 28px rgba(0,0,0,.14);
  transition: transform .30s cubic-bezier(.4,0,.2,1), opacity .30s ease,
              visibility .30s;
  will-change: transform, opacity;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* aberto = entra da direita (igual spa-enter-right do parceiro) */
#sideDrawer.open,
#sideDrawer[aria-hidden="false"],
#authModal.is-open,
#chatSheet.open,
#codeModal.show,
#actionCodeModal.show,
#drvRateModal:not([style*="none"]),
#dlvCodeModal:not([style*="none"]) {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* fundo (mapa + painel) recua — MESMOS valores do spa-exit-left do parceiro:
   translateX(-22%) + opacity .5 (sem scale, sem filtro) */
@media (prefers-reduced-motion: no-preference) {
  /* !important: base.css trava o mapa com transition:none !important */
  #map {
    transition: transform .30s cubic-bezier(.4,0,.2,1), opacity .30s ease !important;
  }
  /* sem !important: o JS (map.js) seta transition inline de height no painel */
  .panel#panel {
    transition: transform .30s cubic-bezier(.4,0,.2,1), opacity .30s ease;
  }
  body.rv-screen-open #map,
  body.rv-screen-open .panel#panel {
    transform: translateX(-22%);
    opacity: .5;
  }
}
/* desktop: -50% (centralização do panel-driver.css) - 22% (efeito) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  body.rv-screen-open #map,
  body.rv-screen-open .panel#panel {
    transform: translateX(-72%) !important;
  }
}

/* ============================================================
   2) OVERLAYS LEGADOS — páginas não usam véu/blur por cima
   ============================================================ */
.drawerOverlay { display: none !important; }
body.drawer-open::before, body.drawer-open::after,
body.chat-open::before,   body.chat-open::after,
body.modal-open::before,  body.modal-open::after { display: none !important; content: none !important; }

/* barras sempre por cima e ativas */
.topbar { z-index: 1100 !important; }
.bottomNav { z-index: 1000 !important; }

/* handles de arrastar não existem em página */
#sideDrawer .drawerHandle,
#chatSheet .chatTop::before,
#codeModal .codeSheetTop::before,
#actionCodeModal .codeSheetTop::before { display: none !important; }

/* ============================================================
   3) MENU (sideDrawer) — página de conta estilo parceiro
   ============================================================ */
#sideDrawer { padding: 0 0 16px !important; }

/* header do motorista: card branco */
#sideDrawer .drawerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 16px 12px;
  padding: 16px;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
  border-bottom: none;
}
#sideDrawer .drvAvatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 2px solid var(--rv-yellow);
}
#sideDrawer .drvName { font-size: 16px; font-weight: 800; color: var(--rv-black); }
#sideDrawer .drawerClose {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: none;
  background: #F5F5F5;
  color: var(--rv-black);
  flex: 0 0 auto;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* sections (status, veículo, carteira): cards brancos */
#sideDrawer .drawerSection {
  margin: 0 16px 12px;
  padding: 14px 16px;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}
#sideDrawer .drawerSection .drawerTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--rv-gray-500);
  margin-bottom: 8px;
}
#sideDrawer .statusCard,
#sideDrawer .activeVehicleCard {
  background: #FAFAFA;
  border: 1px solid #F0F0F0;
  border-radius: 12px;
}

/* menu: card branco com divisórias finas */
#sideDrawer .drawerMenu {
  margin: 0 16px 12px;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
  overflow: hidden;
}
#sideDrawer .drawerMenuItem {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid #F0F0F0;
  font-size: 15px;
  font-weight: 600;
  color: var(--rv-black);
  text-align: left;
  cursor: pointer;
}
#sideDrawer .drawerMenuItem:last-of-type { border-bottom: none; }
#sideDrawer .drawerMenuItem .chev { color: #C5C5C5; font-size: 18px; }
#sideDrawer .drawerMenuItem:active { background: #FAFAFA; }

/* "Deslogar" destacado em vermelho, card próprio */
#sideDrawer .drawerMenu .drawerItem {
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-top: 8px solid var(--rv-bg);
  font-size: 15px;
  font-weight: 700;
  color: #E53935;
  text-align: left;
  cursor: pointer;
}

/* sub-painéis (carteira, veículos, perfil…): página PRÓPRIA — cobrem o menu
   inteiro (inset:0), fundo cinza da página e entram deslizando como navegação */
@keyframes rvPageIn {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
#sideDrawer .vehiclesPanel,
#sideDrawer #vehicleDetailBox.vehicleDetailBox {
  background: var(--rv-bg);
  padding: 4px 0 16px;
  animation: rvPageIn .25s cubic-bezier(.4,0,.2,1);
  z-index: 5; /* garante que cobre header/menu por completo */
}
#sideDrawer .vehiclesPanelHeader,
#sideDrawer #vehicleDetailBox .vehicleDetailHeader {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px 10px;
  border-bottom: none;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#sideDrawer .vehiclesPanelTitle,
#sideDrawer .vehicleDetailTitle {
  font-size: 17px; font-weight: 800; color: var(--rv-black);
}
#sideDrawer .btnBack,
#sideDrawer #btnBackVehicleDetail.vehicleBtn {
  width: 36px; min-width: 36px; height: 36px;
  border-radius: 999px;
  border: none;
  background: var(--rv-card);
  box-shadow: var(--rv-shadow);
  color: var(--rv-black);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
#sideDrawer .drawerBody { padding: 4px 16px 16px; }
#sideDrawer .drawerBody .input {
  background: var(--rv-card);
  border: 1px solid var(--rv-gray-200);
  border-radius: 12px;
}
#sideDrawer .drawerList .drawerCard,
#sideDrawer .vehiclesList > * {
  background: var(--rv-card);
  border: none;
  border-radius: 14px;
  box-shadow: var(--rv-shadow);
}

/* ============================================================
   4) LOGIN/CADASTRO (authModal) — página de autenticação
   ============================================================ */
#authModal .modal-card,
#authModal .modal-auth-v2 {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}
#authModal .authHeader {
  position: static !important;
  background: transparent !important;
  border-bottom: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  padding: 16px 16px 0 !important;
}
#authModal .authLogo { text-align: center; }
#authModal .authLogo img { height: 30px; }

#authModal #btnAuthClose {
  position: absolute !important;
  left: 14px; right: auto !important;
  top: 14px !important;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--rv-card);
  box-shadow: var(--rv-shadow);
  border: none;
  color: var(--rv-black);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}

#authModal .authTabs {
  display: flex;
  gap: 0;
  margin: 14px 16px 0;
  background: #ECECEC;
  border-radius: 12px;
  padding: 3px;
}
#authModal .authTab {
  flex: 1;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  font-weight: 700;
  color: var(--rv-gray-500);
  padding: 9px 0 !important;
}
#authModal .authTab.on,
#authModal .authTab.is-active {
  background: var(--rv-card) !important;
  color: var(--rv-black) !important;
  box-shadow: var(--rv-shadow);
}

#authModal .authView { flex: 0 0 auto !important; }
#authModal .authPad {
  margin: 14px 16px 16px;
  padding: 18px 16px !important;
  background: var(--rv-card);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow);
}

/* ============================================================
   5) CHAT — header de página + mensagens sobre fundo cinza
   ============================================================ */
#chatSheet .chatTop {
  flex: 0 0 auto;
  padding: 12px 16px;
  background: var(--rv-card);
  border-bottom: 1px solid #EFEFEF;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#chatSheet .chatClose {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: #F5F5F5;
  border: none;
  color: var(--rv-black);
}
#chatSheet .chatMsgs { flex: 1 1 auto; background: var(--rv-bg); }
#chatSheet .chatComposer {
  flex: 0 0 auto;
  background: var(--rv-card);
  border-top: 1px solid #EFEFEF;
  padding-bottom: 10px;
}

/* ============================================================
   6) CÓDIGO / AVALIAÇÃO — conteúdo em card no topo da página
   ============================================================ */
#codeModal .codeSheet,
#actionCodeModal .codeSheet,
#drvRateModal .codeSheet,
#dlvCodeModal .dlvCodeSheet {
  width: auto !important;
  max-width: none !important;
  margin: 16px !important;
  padding: 18px 16px !important;
  background: var(--rv-card) !important;
  border: none !important;
  border-radius: var(--rv-radius) !important;
  box-shadow: var(--rv-shadow) !important;
  transform: none !important;
}
#codeModal .codeSheetTop,
#actionCodeModal .codeSheetTop,
#drvRateModal .codeSheetTop { padding-top: 0 !important; }

/* botão secundário (Pular/Cancelar) neutro, não amarelo */
#drvRateModal .btn.btn-ghost,
#dlvCodeModal .btn.btn-ghost {
  background: var(--rv-card) !important;
  border: 1px solid var(--rv-gray-200) !important;
  color: var(--rv-black) !important;
  border-radius: 12px;
}

/* ============================================================
   7) DESKTOP — coluna central de 480px (app no meio)
   ============================================================ */
@media (min-width: 1024px) {
  /* o #app faz o papel do .app-shell do parceiro (overflow-x:hidden):
     vira containing block dos elementos fixed e CLIPA o slide na coluna. */
  #app {
    transform: translateZ(0);
    overflow: clip;
  }
  #sideDrawer, #authModal, #chatSheet,
  #codeModal, #actionCodeModal, #drvRateModal, #dlvCodeModal {
    left: 50% !important; right: auto !important;
    width: 480px !important; margin-left: -240px !important;
  }
}

/* ============================================================
   8) ACESSIBILIDADE — sem animação para quem preferir
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #sideDrawer, #authModal, #chatSheet,
  #codeModal, #actionCodeModal, #drvRateModal, #dlvCodeModal {
    transition: opacity .15s ease !important; transform: none !important;
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  #sideDrawer.open, #sideDrawer[aria-hidden="false"],
  #authModal.is-open, #chatSheet.open,
  #codeModal.show, #actionCodeModal.show,
  #drvRateModal:not([style*="none"]), #dlvCodeModal:not([style*="none"]) {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
}