/* =========================================================
   School Bus App — Premium Shell Final
   Camada global de UI/UX para Ionic/Capacitor
   Mantém a identidade laranja/creme do SBA e melhora o app inteiro.
   ========================================================= */
:root{
  --sba-orange:#E19951;
  --sba-orange-strong:#C88043;
  --sba-orange-dark:#9C602C;
  --sba-cream:#FFF4EE;
  --sba-bg:#F6EFE8;
  --sba-surface:#FFFFFF;
  --sba-surface-soft:#FFFBF7;
  --sba-ink:#1F2328;
  --sba-muted:#74685D;
  --sba-line:rgba(215,196,178,.76);
  --sba-line-strong:rgba(205,181,158,.92);
  --sba-success:#149866;
  --sba-danger:#D9534F;
  --sba-warning:#E5A21A;
  --sba-radius-sm:14px;
  --sba-radius-md:20px;
  --sba-radius-lg:28px;
  --sba-shadow-soft:0 10px 24px rgba(41,31,21,.07);
  --sba-shadow-card:0 18px 42px rgba(41,31,21,.11);
  --sba-shadow-float:0 26px 68px rgba(41,31,21,.16);
  --sba-font:Inter,Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sba-safe-top:env(safe-area-inset-top,0px);
  --sba-safe-bottom:env(safe-area-inset-bottom,0px);
}

html{ background:var(--sba-bg); }
body.sba-app{
  font-family:var(--sba-font) !important;
  color:var(--sba-ink) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(225,153,81,.20), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.86), transparent 28%),
    linear-gradient(180deg,#FFF8F2 0%, #F6EFE8 46%, #F4EAE0 100%) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.sba-app::before{ z-index:118; }
body.logged{ min-height:100svh; }

/* Header global — para telas internas, mantendo Home com header próprio */
body.logged header:not(.header-home){
  min-height:calc(58px + var(--sba-safe-top));
  padding:calc(10px + var(--sba-safe-top)) 14px 10px !important;
  background:linear-gradient(180deg, rgba(225,153,81,.98) 0%, rgba(213,137,66,.94) 48%, rgba(255,246,236,.94) 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.38) !important;
  box-shadow:0 16px 36px rgba(139,84,32,.18) !important;
}
body.logged header:not(.header-home) .hdr-title{
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:-.03em !important;
  text-shadow:0 1px 1px rgba(96,48,0,.14);
}
body.logged header:not(.header-home) .icon-btn{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:0 10px 22px rgba(93,49,8,.12) !important;
}

/* Containers internos — aparência de app premium */
main.container,
#app,
#mgmtView,
#walletView,
#cadastroView,
#chamadasView,
#mapaChamadaView,
#callMaps,
#perfilView,
#sobreView,
#novoCadastroView,
#novosAlunosView,
#reativarAlunosView,
#desativarAlunosView,
#revisaoPagamentosView,
#docManagerView,
#diarioBordoView,
#routesView,
#bizPremiumView,
#meuAppView,
#relatoriosView,
#aniversariosView,
#pixRespView,
#ajudaView,
#linkCadastroView,
#paxEditorView,
#termosView{
  width:min(100%,1120px) !important;
  margin-inline:auto !important;
  padding-inline:clamp(14px,3.2vw,26px) !important;
}
body.has-tabbar #app,
body.has-tabbar #mgmtView,
body.has-tabbar #walletView,
body.has-tabbar [id$="View"],
body.has-tabbar #callMaps{
  padding-bottom:calc(var(--sba-safe-bottom) + var(--tabbar-height,82px) + 30px) !important;
}

/* Filtros e campos — menos “formulário”, mais produto */
.filters{
  display:grid !important;
  gap:12px !important;
  padding:14px !important;
  margin:12px 0 14px !important;
  border:1px solid var(--sba-line) !important;
  border-radius:var(--sba-radius-lg) !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:var(--sba-shadow-soft) !important;
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
}
.filters .lbl,
.lbl{
  margin:2px 2px -4px !important;
  color:var(--sba-muted) !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.input,
.select,
.search-box,
.form-field{
  border:1px solid rgba(215,196,178,.88) !important;
  background:rgba(255,255,255,.96) !important;
  border-radius:18px !important;
  box-shadow:0 8px 18px rgba(41,31,21,.055) !important;
  min-height:50px !important;
}
.input input,
.select select,
.search-box input,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select{
  font-family:var(--sba-font) !important;
  color:var(--sba-ink) !important;
}
.input:focus-within,
.select:focus-within,
.search-box:focus-within,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus{
  border-color:rgba(225,153,81,.95) !important;
  box-shadow:0 0 0 4px rgba(225,153,81,.13), 0 10px 22px rgba(41,31,21,.06) !important;
  outline:none !important;
}

/* Botões e ações */
.btn,
button.btn,
.action-btn,
.primary-btn,
.secondary-btn{
  border-radius:18px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  min-height:46px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease !important;
}
.btn:not(.ghost):not(.outline):not(.danger),
.primary-btn{
  background:linear-gradient(180deg,#E9A460 0%, #D88E47 100%) !important;
  color:#fff !important;
  border:1px solid rgba(199,126,61,.92) !important;
  box-shadow:0 14px 26px rgba(216,142,71,.24) !important;
}
.btn.ghost,
.btn.outline,
.secondary-btn{
  background:#fff !important;
  color:#9C602C !important;
  border:1px solid rgba(225,153,81,.34) !important;
  box-shadow:0 8px 18px rgba(41,31,21,.055) !important;
}
.btn:active,
button:active{ transform:scale(.985); }
.btn:disabled,
button:disabled{ opacity:.48 !important; transform:none !important; box-shadow:none !important; }

/* Cards, listas e estados vazios */
.card,
.panel,
.summary-card,
.item-card,
.list-card,
.student-card,
.payment-card,
#list > *,
#walletGrid > *,
.mgmt-card{
  border:1px solid var(--sba-line) !important;
  border-radius:var(--sba-radius-lg) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:var(--sba-shadow-soft) !important;
}
.list{
  display:grid !important;
  gap:12px !important;
}
.empty,
.empty-state{
  border:1px dashed rgba(205,181,158,.92) !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.74) !important;
  color:var(--sba-muted) !important;
  padding:28px 18px !important;
  text-align:center !important;
  font-weight:800 !important;
}

/* Carteirinha/financeiro — refino sem alterar a lógica */
.wallet-head{
  border-radius:0 0 30px 30px !important;
  background:linear-gradient(180deg,#E19951 0%, #C88043 100%) !important;
  color:#fff !important;
  box-shadow:0 18px 42px rgba(142,82,26,.20) !important;
  padding-top:calc(12px + var(--sba-safe-top)) !important;
}
.wallet-head .back{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:16px !important;
}
.wallet-summary,
.wallet-grid{
  width:min(100%,1120px) !important;
  margin-inline:auto !important;
  padding-inline:clamp(14px,3.2vw,26px) !important;
}
.wallet-summary{
  margin-top:14px !important;
}
.wallet-grid{
  display:grid !important;
  gap:12px !important;
}

/* Bottom navigation — referência bancária, usando laranja SBA */
#sba-tabbar{ z-index:9999 !important; }
#sba-tabbar .wrap{
  max-width:780px !important;
  padding:8px 12px calc(max(10px, var(--sba-safe-bottom) + 8px)) !important;
}
#sba-tabbar .bar{
  border-radius:28px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(215,196,178,.86) !important;
  box-shadow:0 18px 44px rgba(41,31,21,.15) !important;
  backdrop-filter:blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(180%) !important;
  padding:5px !important;
  gap:3px !important;
}
#sba-tabbar button{
  border-radius:22px !important;
  min-height:62px !important;
  color:#6E6257 !important;
}
#sba-tabbar button .ico{
  width:37px !important;
  height:34px !important;
  border-radius:15px !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:18px !important;
}
#sba-tabbar button .lbl{
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}
#sba-tabbar button.active{
  background:linear-gradient(180deg,#FFF4E9 0%, #FFE5CB 100%) !important;
  color:#A8662E !important;
}
#sba-tabbar button.active::before{ display:none !important; }
#sba-tabbar button.active .ico{
  background:#fff !important;
  box-shadow:0 8px 18px rgba(210,137,65,.17) !important;
}

/* Modais, overlays e bottom sheets */
.modal,
.sheet,
.bottom-sheet,
.bot-sheet,
.viewer-card,
.dialog,
#viewer .modal,
#successView > div{
  border-radius:28px !important;
  border:1px solid rgba(215,196,178,.82) !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:var(--sba-shadow-float) !important;
}
.backdrop,
#menuDim,
#uiTabsOverlay,
#loading-overlay{
  backdrop-filter:blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(160%) !important;
}

/* Login também precisa parecer produto premium */
.login-wrap{
  background:
    radial-gradient(circle at top right, rgba(225,153,81,.22), transparent 30%),
    linear-gradient(180deg,#FFF6EE 0%,#F6EFE8 100%) !important;
}
.login{
  border:1px solid rgba(215,196,178,.78) !important;
  border-radius:32px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 28px 70px rgba(41,31,21,.14) !important;
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
}
.login-title{
  font-weight:900 !important;
  letter-spacing:-.045em !important;
  color:#1F2328 !important;
}
.login .btn{ text-transform:none !important; }

/* Responsividade real para telas pequenas e tablets */
@media (min-width:700px){
  .filters{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; }
  .filters .lbl{ grid-column:auto; }
}
@media (min-width:980px){
  .filters{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:520px){
  :root{ --sba-radius-lg:24px; --sba-radius-md:18px; }
  body.logged header:not(.header-home){ min-height:calc(54px + var(--sba-safe-top)); }
  main.container,#app,#mgmtView,#walletView,[id$="View"]{ padding-inline:12px !important; }
  .filters{ margin-top:8px !important; padding:12px !important; border-radius:24px !important; }
  .input,.select,.search-box{ min-height:48px !important; border-radius:16px !important; }
  .btn,button.btn,.action-btn,.primary-btn,.secondary-btn{ min-height:44px !important; border-radius:16px !important; }
  #sba-tabbar .wrap{ padding-inline:8px !important; }
  #sba-tabbar .bar{ border-radius:24px !important; }
  #sba-tabbar button{ min-height:58px !important; border-radius:19px !important; }
  #sba-tabbar button .lbl{ font-size:10px !important; }
}
@media (max-width:370px){
  #sba-tabbar button .lbl{ font-size:9px !important; }
  #sba-tabbar button .ico{ width:32px !important; height:30px !important; }
  .filters .lbl{ font-size:10px !important; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}


/* SBA v5.4 - correções globais de contraste e overflow */
*{ box-sizing:border-box; }
body.sba-app{ overflow-x:hidden; }
#sba-tabbar .wrap{ max-width:860px !important; }
#sba-tabbar button[data-tab="modules"] .ico{ font-size:21px !important; }
@media(max-width:420px){
  #sba-tabbar .wrap{ padding-inline:6px !important; }
  #sba-tabbar button{ min-height:58px !important; padding-left:1px !important; padding-right:1px !important; }
  #sba-tabbar button .lbl{ font-size:9.5px !important; }
}
.card,.panel,.summary-card,.item-card,.list-card,.student-card,.payment-card,.mgmt-card{ color:var(--sba-ink) !important; }
.card *:not(.btn):not(button):not(.badge):not(.pill),
.panel *:not(.btn):not(button):not(.badge):not(.pill){ max-width:100%; }
img,video{ max-width:100%; }

/* Home possui shell próprio; evita herdar paddings globais de [id$="View"] */
#homeView,
#homeHost{
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  padding-inline:0 !important;
}