/* driver/assets/style/panel-driver.css — redesign 99-style panel */

/* ── Topbar idêntica ao /go: barra amarela sólida colada no topo (padrão /parceiro)
   Status online/offline = indicador minimalista (dot + texto) ANTES do logo,
   sem mexer no HTML/JS (o JS troca textContent e classes status-on/off). */
.topbar{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 300;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
  pointer-events: none;
}
.topbar > *{ pointer-events: auto; }

.brand#topBrand{
  flex: 1;
  background: #F9D515;                            /* amarelo sólido da marca */
  border: none;
  border-radius: 0;                              /* colada, sem cantos */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  box-shadow: 0 2px 10px rgba(249,213,21,.35);
  cursor: pointer;
}

.brand#topBrand .topLeft{
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.brand#topBrand .topAvatar{
  width: 40px; height: 40px;
  border-radius: 14px; object-fit: cover;
  background: rgba(11,15,25,.08);
  border: 1.5px solid rgba(11,15,25,.10);
  flex-shrink: 0;
}
.brand#topBrand .topHello{
  display: flex; flex-direction: column; line-height: 1.05; min-width: 0;
}
.brand#topBrand .topHi{
  font-weight: 900; letter-spacing: .1px; font-size: 14px;
  color: rgba(11,15,25,.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand#topBrand .topSub{
  font-size: 12px; color: rgba(11,15,25,.62); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* lado direito: status (antes) + logo */
.brand#topBrand .topRight{
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.brand#topBrand .logo{
  order: 2;                                       /* logo por último */
  height: 24px; width: auto; display: block;
  object-fit: contain;
}

/* Status online/offline REMOVIDO da topbar (a informação já vive na home:
   #drvOnlineLabel + #drvBigToggle). O nó PERMANECE no DOM: o drvBigToggle
   dispara pill.click() e espelha o estado via MutationObserver — display:none
   não afeta .click() programático nem o observer. NÃO remover do HTML. */
#connPill{ display: none !important; }

/* status minimalista: bolinha + texto pequeno, ANTES do logo */
#connPill{
  order: 1;                                       /* vem antes do logo */
  min-width: 0 !important;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent !important;
  border: none !important;
  padding: 0 2px !important;
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .3px; text-transform: uppercase;
  color: rgba(11,15,25,.55) !important;
}
#connPill::before{
  content: "";
  width: 8px; height: 8px; border-radius: 999px;
  background: #ff4d4d;                            /* vermelho = offline (default) */
  box-shadow: 0 0 0 3px rgba(255,77,77,.18);
  flex-shrink: 0;
}
.pill.status-on#connPill,
#connPill.status-on{ color: rgba(20,140,70,.95) !important; }
.pill.status-on#connPill::before,
#connPill.status-on::before{
  background: #2ecc71;                            /* verde = online */
  box-shadow: 0 0 0 3px rgba(46,204,113,.20);
}

/* ── Float the panel above the bottom-nav (padrão /go, mapa fullscreen) ───
   O posicionamento vinha de base.css (.panel position:relative + margin-top:-34px).
   Aqui (último CSS carregado) reescrevemos com .panel#panel (especificidade maior)
   + !important para flutuar acima da bottomNav. NÃO usar !important em height:
   o JS animatePanelAutoHeight (map.js) anima panelEl.style.height — compatível com fixed. */
.panel#panel{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    /* 58px = altura base da bottomNav; +16px de respiro */
    bottom: calc(58px + env(safe-area-inset-bottom) + 16px) !important;
    top: auto !important;
    margin-top: 0 !important;
    width: 100% !important;
    z-index: 200;
    max-height: 56vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px){
    .panel#panel{
        left: 50% !important;
        transform: translateX(-50%);
        width: min(480px, calc(100% - 24px)) !important;
    }
}

/* ── Panel shell ──────────────────────────────────────────────────────── */
.panel {
    padding: 10px 14px calc(env(safe-area-inset-bottom) + 16px);
}
.panel::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(11,15,25,.14);
    margin: 0 auto 12px;
}
/* hide the old h3 title */
.panel > h3 { display: none; }

/* ── Online / Offline top row ─────────────────────────────────────────── */
.drvTopRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(11,15,25,.08);
    margin-bottom: 12px;
}

.drvOnlineLabel {
    font-size: 18px;
    font-weight: 1000;
    color: #111;
    line-height: 1.1;
    transition: color .2s ease;
}
.drvOnlineLabel.is-online { color: #1a9e55; }

.drvOnlineSub {
    font-size: 12px;
    color: rgba(11,15,25,.55);
    margin-top: 3px;
}

/* Big toggle */
.drvBigToggle {
    flex: 0 0 auto;
    width: 66px;
    height: 36px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(11,15,25,.14);
    position: relative;
    transition: background .22s ease;
    padding: 0;
}
.drvBigToggle.is-online { background: #2ecc71; }
.drvBigToggle.is-searching {
    background: #F9D515;
    animation: togglePulse .9s infinite alternate;
}
@keyframes togglePulse {
    from { box-shadow: 0 0 0 0 rgba(249,213,21,.5); }
    to   { box-shadow: 0 0 0 6px rgba(249,213,21,0); }
}
.drvToggleThumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
    transition: left .22s ease;
    pointer-events: none;
}
.drvBigToggle.is-online .drvToggleThumb,
.drvBigToggle.is-searching .drvToggleThumb {
    left: calc(100% - 32px);
}

/* ── Stats row ────────────────────────────────────────────────────────── */
.drvStatsRow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    margin-bottom: 12px;
}

.drvStat {
    text-align: center;
    padding: 8px 4px;
}

.drvStatVal {
    font-size: 17px;
    font-weight: 1000;
    color: #111;
    line-height: 1.1;
}

.drvStatLbl {
    font-size: 11px;
    color: rgba(11,15,25,.52);
    margin-top: 3px;
    font-weight: 700;
    letter-spacing: .2px;
}

.drvStatDivider {
    width: 1px;
    background: rgba(11,15,25,.10);
    margin: 6px 0;
}

/* ── Status message ───────────────────────────────────────────────────── */
.drvStatus {
    border-radius: 16px;
    padding: 11px 14px;
    background: rgba(11,15,25,.04);
    border: 1px solid rgba(11,15,25,.08);
    font-size: 13px;
    font-weight: 700;
    color: rgba(11,15,25,.72);
    text-align: center;
}

/* ── Pending button ───────────────────────────────────────────────────── */
#btnPending {
    height: 50px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 1000;
    background: #F9D515;
    border: none;
    color: #111;
    letter-spacing: -.1px;
}
#btnPending:active { transform: translateY(1px); }

/* ── Offer box ────────────────────────────────────────────────────────── */
#offerBox {
    background: rgba(11,15,25,.03);
    border: 1px solid rgba(11,15,25,.10);
    border-radius: 18px;
    padding: 14px;
    margin-top: 12px;
}
#offerInfo {
    font-size: 14px;
    font-weight: 900;
    color: #111;
    margin-bottom: 10px;
}
#offerBox .row { gap: 8px; }
#offerBox .btn { height: 48px; border-radius: 14px; }

/* ── Delivery offer box ───────────────────────────────────────────────── */
.dlvBox {
    background: rgba(11,15,25,.03);
    border: 1px solid rgba(11,15,25,.10);
    border-radius: 18px;
    padding: 14px;
    margin-top: 12px;
}
.dlvActions { display: flex; gap: 8px; margin-top: 10px; }
.dlvActions .btn { height: 48px; border-radius: 14px; }

/* ── Bottom navigation (3 abas: Início · Ganhos · Conta) ──────────────────
   Padrão do app cliente (/go). 58px de altura sincroniza com o bottom do
   .panel#panel (calc(58px + ...)). */
.bottomNav{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: stretch;
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 24px rgba(0,0,0,.10), 0 -1px 0 rgba(0,0,0,.06);
}
.bnTab{
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  border: none; background: transparent;
  cursor: pointer; padding: 6px 0 2px;
  color: rgba(11,15,25,.35);
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.bnTab.active{ color: rgba(11,15,25,.90); }
.bnIcoWrap{
  width: 50px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background .18s, transform .12s;
}
.bnTab.active .bnIcoWrap{ background: #F9D515; }
.bnTab:active .bnIcoWrap{ transform: scale(0.92); }
.bnIco{ font-size: 20px; display: flex; align-items: center; justify-content: center; }
.bnIco svg{
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  display: block;
}
.bnTab.active .bnIco svg{ stroke-width: 2.2; }
.bnLabel{ font-size: 10px; font-weight: 700; letter-spacing: .3px; line-height: 1; }

/* ── Desktop: app confinado numa coluna mobile central (~480px), padrão /parceiro
   Mapa + topbar + painel + bottom-nav numa coluna de 480px centralizada,
   como um celular no meio da tela. Laterais escuras. */
@media (min-width: 1024px){
  html, body{ background: #0b0f19; }

  #app{
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.5);
  }

  #map{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 480px !important;
    max-width: 480px !important;
  }

  .topbar{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 480px !important;
    max-width: 480px !important;
  }

  .panel#panel{
    left: 50% !important;
    transform: translateX(-50%);
    width: 480px !important;
    max-width: 480px !important;
  }

  .bottomNav{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 480px !important;
    max-width: 480px !important;
    border-left: 1px solid rgba(0,0,0,.06);
    border-right: 1px solid rgba(0,0,0,.06);
  }

  /* ── Modais / sheets / drawer confinados na coluna ─────────────────────
     left:50% + margin-left:-240px (NÃO translateX — esses usam translateY p/ animar). */
  .sideDrawer,
  .chatSheet,
  .modal.codeSheetModal{
    left: 50% !important;
    right: auto !important;
    width: 480px !important;
    max-width: 480px !important;
    margin-left: -240px !important;
  }
  .drawerOverlay{
    left: 50% !important;
    right: auto !important;
    width: 480px !important;
    margin-left: -240px !important;
  }
  /* modais centralizados (auth, código, avaliação) -> limita largura, mantém o flex-center */
  #authModal,
  #codeModal,
  #drvRateModal{
    left: 50% !important;
    right: auto !important;
    width: 480px !important;
    margin-left: -240px !important;
  }
  #authModal .modal-card,
  #authModal .modal-auth-v2{
    max-width: 420px !important;
  }
}