:root{--primary:#2563eb;--bg:#f8fafc;--text:#0f172a;--border:#e2e8f0;}
html,body{width:100%; max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{background:var(--bg); font-family:sans-serif; color:var(--text); margin:0;}

/* Evita "zoom" automático no iOS ao focar/clicar em inputs (font-size < 16px) */
input, select, textarea, button{font-size:16px;}
.vf-shell{max-width:500px; margin:0 auto; padding:15px; padding-bottom:80px; box-sizing:border-box;}
.vf-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:15px; margin-bottom:15px;}
.vf-form label{display:block; font-size:12px; margin:10px 0 5px; color:#64748b;}
.vf-field-title{display:block; font-size:14px; margin:10px 0 6px; color:#334155; font-weight:800; letter-spacing:-0.01em;}
.vf-form input{width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; box-sizing:border-box;}
/* iOS/Safari costuma aplicar um fundo cinza em inputs type=date; forçamos branco para manter o padrão do app */
.vf-form input[type="date"]{background:#fff; color:var(--text);}
.vf-input-group{position:relative; display:flex; align-items:center;}
/* Compat: o markup do formulário usa .vf-input-prefix-wrap */
.vf-input-prefix-wrap{position:relative; display:flex; align-items:center;}
.vf-input-prefix{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#64748b; font-weight:700; font-size:12px; pointer-events:none;}
/*
  IMPORTANT: .vf-form input{padding:10px;} has higher specificity than a plain
  class selector, so we must target the input explicitly to ensure the prefix
  never overlaps the typed value.
*/
.vf-form input.vf-input-has-prefix{padding-left:46px;}
.vf-select{width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; background:#fff;}
.vf-input{width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; box-sizing:border-box; background:#fff;}
.vf-input-sm{padding:8px; border:1px solid var(--border); border-radius:8px;}
.vf-filter{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.vf-filter-left{min-width:220px; flex:1;}
.vf-filter-right{display:flex; gap:10px;}
.vf-filter-label{font-size:11px; color:#64748b; margin:0 0 5px;}
.vf-filter-actions{display:flex; align-items:flex-end;}
.vf-btn-ghost{background:#fff; border:1px solid var(--border); color:#0f172a;}
.vf-btn{padding:10px 20px; border-radius:8px; border:none; cursor:pointer; font-weight:bold;}
.vf-btn-primary{background:var(--primary); color:#fff;}
.vf-btn-sm{font-size:10px; padding:4px 8px; margin-top:5px; cursor:pointer; border:1px solid var(--border); background:#fff;}
.vf-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:15px;}
.vf-stat{background:#fff; padding:15px; border-radius:12px; border:1px solid var(--border);}
.vf-stat-label{font-size:11px; color:#64748b;}
.vf-stat-value{font-size:16px; font-weight:bold;}
.vf-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border);}
.vf-row-placa{font-size:18px; font-weight:900; letter-spacing:0.02em;}
.vf-row-sub{font-size:13px; color:#64748b; margin-top:2px;}
.vf-pos,.vf-neg{font-size:14px; font-weight:800;}

/* List head + filters */
.vf-card-head{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:0 0 10px;}
.vf-list-filter{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;}

/* Lista: busca por placa + toggle */
.vf-list-tools{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; width:100%; margin-top:8px;}
.vf-list-search{flex:1; min-width:220px;}
.vf-list-toggle{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; color:#0f172a; font-weight:700; user-select:none; cursor:pointer;}
.vf-list-toggle input{width:18px; height:18px;}

/* Day dividers */
.vf-day-divider{position:relative; margin:14px 0 6px;}
.vf-day-divider::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--border);}
.vf-day-divider span{position:relative; z-index:1; background:#fff; padding:0 10px; margin-left:6px; font-size:12px; color:#64748b; font-weight:700;}

.vf-row-actions{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px;}
.vf-btn-sm.vf-danger{color:#ef4444; border-color:#fecaca;}
.vf-empty{padding:20px; text-align:center; color:#94a3b8;}

/* Layout helpers */
.vf-card-title{font-size:16px; font-weight:900; margin:0 0 10px;}

.vf-grid{display:grid; grid-template-columns:1fr; gap:15px;}
.vf-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.vf-actions .vf-btn{background:#fff; border:1px solid var(--border); color:#0f172a;}
.vf-actions .vf-btn-primary{border:none;}

.vf-mobile-nav{
  position:fixed;
  bottom:0; left:0; right:0;
  background:#fff;
  display:flex;
  justify-content:space-around;
  gap:6px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  z-index:9999;
}
.vf-mnav-btn{
  background:none;
  border:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px 12px;
  min-width:88px;
  border-radius:12px;
  font-weight:600;
  color:#64748b;
}
.vf-mnav-btn .vf-mnav-ico{display:flex; line-height:0; font-size:20px;}
/* Compat: o markup usa .vf-mnav-txt */
.vf-mnav-btn .vf-mnav-lab,
.vf-mnav-btn .vf-mnav-txt{font-size:12px; line-height:1;}
.vf-mnav-btn.active{color:var(--primary); background:#eff6ff;}
.vf-sidebar{display:none;}

@media (min-width: 1024px){
    .vf-shell{max-width:1000px; display:flex; gap:20px; padding-bottom:20px;}
    .vf-sidebar{display:block; width:250px; background:#fff; border-radius:12px; padding:20px; border:1px solid var(--border); height:fit-content; position:sticky; top:20px;}
    .vf-mobile-nav{display:none;}
    .vf-content{flex:1;}
    .vf-nav-btn{display:block; width:100%; text-align:left; padding:10px; margin-bottom:5px; border:none; background:none; cursor:pointer; font-weight:bold; color:#64748b;}
    .vf-nav-btn.active{background:var(--bg); color:var(--primary); border-radius:8px;}
    .vf-grid{display:grid; grid-template-columns:1fr 1fr; gap:15px;}
}

/* Fullscreen mode overrides */
html, body{height:100%;}
html{margin-top:0 !important;}
#wpadminbar{display:none !important;}
body.vf-fullscreen{margin:0;}
html.vf-fullscreen, body.vf-fullscreen{min-height:100%; overflow-x:hidden;}
body.vf-fullscreen{overflow-y:auto;}

body.vf-fullscreen .vf-shell{max-width:none; width:100%; height:100vh; margin:0; padding:0; padding-bottom:0; display:block; box-sizing:border-box;}
@media (min-width:1024px){
  body.vf-fullscreen .vf-shell{display:flex; gap:0;}
  body.vf-fullscreen .vf-sidebar{display:block; width:260px; height:100vh; position:sticky; top:0; border-radius:0; border-top:none; border-left:none; border-bottom:none;}
  body.vf-fullscreen .vf-content{flex:1; height:100vh; overflow:auto; padding:20px;}
}
@media (max-width:1023px){
  /* Small top breathing room for mobile too */
body.vf-fullscreen .vf-shell{
  /* padding simétrico + safe-areas (evita "margem" desigual no iOS) */
  padding-top:calc(15px + env(safe-area-inset-top, 0px) + 8px);
  padding-left:calc(15px + env(safe-area-inset-left, 0px));
  padding-right:calc(15px + env(safe-area-inset-right, 0px));
  padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));
  height:auto;
  min-height:100vh;
  overflow:auto;
}
}


/* Desktop polish for fullscreen */
@media (min-width:1024px){
  body.vf-fullscreen{background:var(--bg);}
  body.vf-fullscreen .vf-sidebar{
    position:sticky;
    top:0;
    align-self:stretch;
    padding:22px 16px;
    overflow:auto;
  }
  body.vf-fullscreen .vf-brand{
    font-size:18px;
    margin:0 0 18px;
  }
  body.vf-fullscreen .vf-content{
    /* Extra top padding so the header never feels "colado" no topo */
    padding:calc(28px + env(safe-area-inset-top, 0px) + 12px) 32px 28px;
    background:var(--bg);
  }
  body.vf-fullscreen .vf-content .vf-screen{
    max-width:1200px;
    margin:0 auto;
  }
  body.vf-fullscreen canvas{
    max-height:360px;
  }
  body.vf-fullscreen .vf-card{
    border-radius:14px;
  }
  body.vf-fullscreen .vf-filter{justify-content:space-between;}
  body.vf-fullscreen .vf-filter-actions{margin-left:auto;}
}


/* PWA install banner */
.vf-install-banner{
  position:fixed;
  left:12px; right:12px;
  bottom:calc(74px + env(safe-area-inset-bottom));
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 10px 25px rgba(15,23,42,.12);
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:10000;
}
.vf-install-text{font-size:13px; color:#334155; line-height:1.25;}
.vf-install-text strong{display:block; font-size:14px; color:#0f172a; margin-bottom:2px;}
.vf-install-actions{display:flex; gap:8px; align-items:center;}
@media (min-width: 768px){
  .vf-install-banner{left:auto; right:18px; max-width:420px; bottom:18px;}
}


/* =====================================================
   LOGIN/APP CLEANUP: esconde cabeçalho/rodapé do tema
   quando o app estiver ativo (incluindo tela de login)
===================================================== */
body.vf-fullscreen #wpadminbar{display:none !important;}
body.vf-fullscreen html{margin-top:0 !important;}

/* Temas clássicos */
body.vf-fullscreen header,
body.vf-fullscreen footer,
body.vf-fullscreen .site-header,
body.vf-fullscreen .site-footer,
body.vf-fullscreen #masthead,
body.vf-fullscreen #colophon{
  display:none !important;
}

/* Block themes (Twenty Twenty-Five, etc.) */
body.vf-fullscreen .wp-site-blocks > header,
body.vf-fullscreen .wp-site-blocks > footer{
  display:none !important;
}

/* Containers do tema */
body.vf-fullscreen #page,
body.vf-fullscreen .site,
body.vf-fullscreen .wp-site-blocks{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* Tela de login precisa permitir rolagem se necessário */
body.vf-fullscreen.vf-login{overflow:auto !important; height:auto !important; min-height:100vh !important;}
body.vf-fullscreen.vf-login .vf-auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px;}

/* Força um visual SaaS consistente no login (evita CSS do tema) */
body.vf-fullscreen.vf-login{background:#f6f7fb !important;}
body.vf-fullscreen.vf-login .vf-login-card{width:100%; max-width:420px; padding:22px !important; border-radius:16px;}
body.vf-fullscreen.vf-login .vf-login-card h2{
  margin:0 0 14px 0 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size:30px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-0.02em;
}
body.vf-fullscreen.vf-login #vf-login-form{display:flex; flex-direction:column; gap:12px;}
body.vf-fullscreen.vf-login #vf-login-form input{
  width:100% !important;
  display:block !important;
  box-sizing:border-box;
  padding:12px 14px !important;
  border-radius:12px !important;
  font-size:16px !important;
  line-height:1.2 !important;
}
body.vf-fullscreen.vf-login #vf-login-form button{
  width:100%;
  padding:12px 14px !important;
  border-radius:12px !important;
  font-size:16px !important;
}

@media (max-width: 520px){
  body.vf-fullscreen.vf-login .vf-auth-wrap{padding:14px;}
  body.vf-fullscreen.vf-login .vf-login-card{padding:18px !important;}
  body.vf-fullscreen.vf-login .vf-login-card h2{font-size:28px !important;}
}





/* --- Login SaaS (v5.1.5) --- */
body.vf-fullscreen.vf-login .vf-login-card{
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}
body.vf-fullscreen.vf-login .vf-login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
body.vf-fullscreen.vf-login .vf-login-mark{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,.10);
  font-size:22px;
}
body.vf-fullscreen.vf-login .vf-login-title{
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:18px;
  line-height:1.1;
}
body.vf-fullscreen.vf-login .vf-login-sub{
  font-size:13px;
  opacity:.75;
  margin-top:2px;
}
body.vf-fullscreen.vf-login .vf-login-h{
  margin:14px 0 6px 0 !important;
  font-size:28px !important;
}
body.vf-fullscreen.vf-login .vf-login-p{
  margin:0 0 14px 0 !important;
  opacity:.78;
  font-size:14px;
  line-height:1.35;
}
body.vf-fullscreen.vf-login .vf-field{display:block;}
body.vf-fullscreen.vf-login .vf-label{
  display:block;
  font-size:12px;
  margin:0 0 6px 2px;
  opacity:.75;
}
body.vf-fullscreen.vf-login .vf-login-btn{
  height:46px;
  font-weight:800;
}
body.vf-fullscreen.vf-login .vf-login-foot{
  margin-top:10px;
  font-size:12px;
  opacity:.75;
  text-align:center;
}



/* Mobile fix: evitar overflow que causa zoom/escala estranha em alguns browsers (iOS) */
html, body{width:100%; max-width:100%; overflow-x:hidden;}
@media (max-width: 520px){
  .vf-shell{
    max-width:100%;
    padding-top:calc(12px + env(safe-area-inset-top, 0px));
    padding-left:calc(12px + env(safe-area-inset-left, 0px));
    padding-right:calc(12px + env(safe-area-inset-right, 0px));
    padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .vf-filter{gap:10px;}
  .vf-filter-left{min-width:0; width:100%;}
  .vf-filter-right{width:100%; flex-wrap:wrap;}
  .vf-filter-right > *{flex:1 1 140px; min-width:0;}
  .vf-filter-actions{width:100%;}
  .vf-filter-actions .vf-btn{width:100%;}
  /* Inputs menores no mobile, sem quebrar layout */
  .vf-form input, .vf-select{max-width:100%;}
}

/* Dashboard charts */
.vf-charts{display:grid; grid-template-columns:2fr 1fr; gap:12px;}
@media (max-width: 900px){.vf-charts{grid-template-columns:1fr;}}
.vf-charts .vf-card{overflow:hidden;}
.vf-charts canvas{width:100% !important; height:auto !important;}