/* SIO — Mobile */


/* ═══════════════════════════════════════════
   SIO MOBILE — Android Chrome First
   Layout: Bottom Tab Bar + Cards + FAB
   Breakpoints: 768px tablet, 480px mobile
═══════════════════════════════════════════ */

/* ── Sidebar overlay ── */
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:198;backdrop-filter:blur(3px)}
#sidebar-overlay.visible{display:block}

/* ── Hamburger (tablet only) ── */
#mob-toggle{display:none;position:fixed;top:12px;left:12px;z-index:300;width:44px;height:44px;border-radius:10px;background:var(--surface);border:1px solid var(--border);align-items:center;justify-content:center;cursor:pointer;color:var(--text2);box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* ══════════════════════════════
   TABLET 481–768px
   Sidebar drawer + topbar intact
══════════════════════════════ */
@media(min-width:481px) and (max-width:768px){
  #sidebar{position:fixed;top:0;left:0;height:100dvh;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:200;box-shadow:6px 0 32px rgba(0,0,0,.18);width:260px}
  #sidebar.open{transform:translateX(0)}
  #main{margin-left:0}
  #mob-toggle{display:flex}
  .topbar{padding:0 16px 0 60px;min-height:54px}
  .content{padding:16px}
  .form-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .fin-result-bar{grid-template-columns:repeat(2,1fr)}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
  .modal{max-width:calc(100vw - 40px)!important;width:calc(100vw - 40px)!important;margin:20px auto}
  .form-grid.cols-2{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════
   MOBILE ≤480px — Redesign total
══════════════════════════════ */
@media(max-width:480px){

  /* Hide desktop elements */
  #sidebar{display:none!important}
  #mob-toggle{display:none!important}
  .topbar{display:none!important}
  .desktop-table{display:none!important}
  #stats-apt-despesas{display:none}

  /* Main container */
  #main{margin-left:0!important;padding-bottom:72px;min-height:100dvh;background:var(--bg)}

  /* Pages */
  .page{padding:0}
  .content{padding:12px 12px 20px!important}

  /* ── BOTTOM TAB BAR ── */
  #bottom-nav{
    display:flex!important;
    position:fixed;bottom:0;left:0;right:0;z-index:300;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:6px 0 calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 20px rgba(0,0,0,.1);
  }
  .bnav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;padding:4px 2px;
    border:none;background:none;cursor:pointer;
    color:var(--text3);font-family:inherit;font-size:10px;font-weight:600;
    letter-spacing:.01em;min-height:52px;
    transition:color .15s;position:relative;
  }
  .bnav-item svg{stroke-width:2;transition:stroke .15s}
  .bnav-item.active{color:var(--accent)}
  .bnav-item.active svg{stroke:var(--accent)}
  .bnav-item.active::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:2px;background:var(--accent);border-radius:0 0 2px 2px}
  
  /* FAB button in center */
  .bnav-fab{
    flex-shrink:0;width:56px;height:56px;border-radius:18px;
    background:linear-gradient(135deg,var(--accent),#1D4ED8);
    color:#fff!important;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(37,99,235,.45);
    margin-top:-18px;
    transition:transform .15s,box-shadow .15s;
    flex-direction:column;
    min-height:unset!important;
  }
  .bnav-fab:active{transform:scale(.93);box-shadow:0 2px 10px rgba(37,99,235,.4)}

  /* ── HOME PAGE (mobile-specific) ── */
  #mobile-home{display:block}
  .mobile-home-header{
    padding:16px 14px 12px;
    display:flex;justify-content:space-between;align-items:center;
  }
  .mobile-home-greeting{font-size:17px;font-weight:700;color:var(--text)}
  .mobile-home-sub{font-size:12px;color:var(--text3);margin-top:2px}
  .mobile-home-avatar{width:38px;height:38px;border-radius:12px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;font-size:15px}

  /* Month selector pill */
  .mobile-month-bar{display:flex;align-items:center;gap:8px;padding:0 14px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mobile-month-bar::-webkit-scrollbar{display:none}
  .month-chip{flex-shrink:0;padding:7px 16px;border-radius:99px;border:1px solid var(--border);background:var(--surface);font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .15s}
  .month-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

  /* KPI strip */
  .mobile-kpi-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
  .mobile-kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 12px}
  .mobile-kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:6px}
  .mobile-kpi-val{font-size:16px;font-weight:700;font-family:'JetBrains Mono',monospace;line-height:1}
  .mobile-kpi-sub{font-size:10px;color:var(--text3);margin-top:4px}

  /* Section header */
  .mobile-section-header{display:flex;justify-content:space-between;align-items:center;padding:6px 14px 10px}
  .mobile-section-title{font-size:13px;font-weight:700;color:var(--text)}
  .mobile-section-link{font-size:12px;color:var(--accent);font-weight:600}

  /* ── VENDA CARDS ── */
  .mobile-cards{display:block!important}
  .venda-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:8px;transition:box-shadow .12s}
  .venda-card:active{box-shadow:0 0 0 2px var(--accent)}
  .vc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
  .vc-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
  .vc-sub{font-size:11px;color:var(--text3);margin-top:3px}
  .vc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
  .vc-item{background:var(--surface2);border-radius:8px;padding:8px 10px}
  .vc-item-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:3px}
  .vc-item-val{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace}
  .vc-footer{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--border)}
  .vc-date{font-size:11px;color:var(--text3)}
  .vc-actions{display:flex;gap:6px}

  /* ── QUICK ADD SHEET ── */
  #quick-add-sheet{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.5);align-items:flex-end}
  #quick-add-sheet.open{display:flex!important}
  #quick-add-content{background:var(--surface);width:100%;border-radius:20px 20px 0 0;padding:12px 16px calc(80px + env(safe-area-inset-bottom));animation:slideUp .25s cubic-bezier(.4,0,.2,1)}
  .qa-handle{width:36px;height:4px;border-radius:99px;background:var(--border2);margin:0 auto 20px}
  .qa-title{font-size:13px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}
  .qa-btn{display:flex;align-items:center;gap:14px;width:100%;padding:16px 14px;border:1px solid var(--border);background:var(--surface2);border-radius:14px;cursor:pointer;font-family:inherit;margin-bottom:8px;transition:background .12s;text-align:left}
  .qa-btn:active{background:var(--surface3)}
  .qa-icon{font-size:26px;flex-shrink:0;width:44px;height:44px;background:var(--surface);border-radius:12px;display:flex;align-items:center;justify-content:center}
  .qa-label{font-size:15px;font-weight:700;color:var(--text)}
  .qa-sub{font-size:12px;color:var(--text3);margin-top:2px}
  .qa-cancel{width:100%;padding:16px;border:none;background:transparent;border-radius:14px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--text3);margin-top:4px}

  /* ── MOBILE FECHAMENTO ── */
  .mobile-fech-cards{display:flex;flex-direction:column;gap:10px;padding:12px}
  .mobile-fech-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
  .mobile-fech-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:8px}
  .mobile-fech-val{font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;margin-bottom:4px}
  .mobile-fech-sub{font-size:11px;color:var(--text3)}
  .mobile-fech-divider{height:1px;background:var(--border);margin:12px 0}

  /* ── MODALS → BOTTOM SHEET ── */
  .modal-overlay{align-items:flex-end!important;padding:0!important}
  .modal{
    border-radius:20px 20px 0 0!important;
    margin:0!important;
    max-width:100vw!important;
    width:100vw!important;
    max-height:94dvh!important;
    overflow-y:auto;
    padding:0 16px calc(20px + env(safe-area-inset-bottom))!important;
    border-top:none!important;
  }
  .modal::before{content:'';display:block;width:36px;height:4px;border-radius:99px;background:var(--border2);margin:12px auto 18px}
  .modal-header{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
  .modal-title{font-size:17px;font-weight:700}
  .modal-close{width:34px;height:34px;border-radius:9px;background:var(--surface2)}
  .section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}

  /* Form inputs — big touch targets */
  input:not([type=checkbox]),select,textarea{
    min-height:50px!important;font-size:16px!important;
    padding:13px 14px!important;border-radius:11px!important;
    -webkit-appearance:none;
  }
  .input-prefix{min-height:50px!important;font-size:15px;padding:0 13px}
  .input-group{border-radius:11px!important}
  label{font-size:12px!important;font-weight:600!important;margin-bottom:6px!important;display:block}
  .form-group{margin-bottom:2px}
  .form-grid.cols-2,.form-grid.cols-3,[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}

  /* Modal footer buttons */
  .modal-footer-btns{display:flex;gap:10px;margin-top:20px}
  .modal-footer-btns .btn{flex:1;min-height:50px;justify-content:center;font-size:15px;border-radius:12px}

  /* Calc box */
  .calc-box{border-radius:12px;padding:14px}
  .calc-row{padding:6px 0;font-size:13px}

  /* ── FINANCEIRO MOBILE ── */
  .fin-result-bar{grid-template-columns:1fr 1fr!important;gap:8px}
  .fin-result-card{padding:12px 10px;border-radius:12px}
  .fin-result-val{font-size:15px}
  .fin-result-label{font-size:9px}

  /* ── AUTH SCREEN MOBILE ── */
  #auth-screen{padding:0;align-items:flex-end;justify-content:flex-end}
  #auth-theme-btn{top:16px;right:16px;bottom:auto;position:fixed}
  .auth-card{
    border-radius:24px 24px 0 0!important;
    padding:0 20px calc(28px + env(safe-area-inset-bottom))!important;
    max-width:100vw!important;width:100vw!important;
    animation:slideUp .3s cubic-bezier(.4,0,.2,1)!important;
    max-height:96dvh;overflow-y:auto;
  }
  .auth-card::before{content:'';display:block;width:36px;height:4px;border-radius:99px;background:var(--border2);margin:14px auto 20px}
  .auth-logo-mark{width:50px;height:50px;border-radius:15px;font-size:24px}
  .auth-logo h1{font-size:20px}
  .auth-logo{margin-bottom:22px}
  .auth-form input{min-height:50px!important;font-size:16px!important}
  .auth-btn{min-height:52px!important;font-size:16px!important;border-radius:13px!important}
  .auth-tab{min-height:40px;font-size:13px}
  .auth-tabs{margin-bottom:22px}

  /* Period filters → horizontal scroll */
  .period-bar,.chip-group,.filter-row{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:2px;gap:8px}
  .period-bar::-webkit-scrollbar,.chip-group::-webkit-scrollbar{display:none}
  .chip,.filter-chip{white-space:nowrap;flex-shrink:0;min-height:36px;padding:7px 16px;font-size:12px;border-radius:99px}

  /* Cards/stat rows */
  .stats-row{grid-template-columns:1fr 1fr!important;gap:8px}
  .stat-card{padding:12px 10px;border-radius:12px}
  .stat-value{font-size:18px}

  .card{border-radius:14px;margin-bottom:10px}
  .card-header{padding:14px;flex-wrap:wrap;gap:8px}
  .card-body{padding:12px 14px}
  .btn{min-height:40px}
  .btn-sm{min-height:38px;padding:8px 14px;font-size:12px}
  .btn-xs{min-height:34px;padding:5px 10px;font-size:11px}
}

/* ── VERY SMALL (≤360px) ── */
@media(max-width:360px){
  .mobile-kpi-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
  .vc-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr!important}
}

@keyframes slideUp{
  from{transform:translateY(60px);opacity:.5}
  to{transform:translateY(0);opacity:1}
}

@media(max-width:480px){
  #quick-add-sheet{display:none!important}
  #quick-add-sheet.open{display:none!important}
}