/* ═══════════════════════════════════════════
   VEDÊ — Layout v2: fixed mobile nav
   ═══════════════════════════════════════════ */

#screen-app { display:flex; flex-direction:column; min-height:100vh; }

/* Header */
#app-header { position:fixed; top:0; left:0; right:0; z-index:200; background:var(--bg-card); border-bottom:1px solid var(--border); height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.header-brand { display:flex; align-items:center; gap:8px; }
.header-logo { font-family:var(--font-display); font-style:italic; font-weight:800; font-size:20px; color:var(--text); letter-spacing:-.5px; }
.btn-sidebar-toggle { background:none; border:none; color:var(--text-muted); font-size:20px; padding:6px 8px; border-radius:var(--r-sm); line-height:1; display:flex; align-items:center; transition:color var(--ease),background var(--ease); }
.btn-sidebar-toggle:hover { color:var(--text); background:var(--bg-hover); }
.header-right { display:flex; align-items:center; gap:8px; }
.header-user-label { font-size:10px; font-weight:700; color:var(--text-muted); background:var(--bg-hover); padding:4px 10px; border-radius:var(--r-pill); border:1px solid var(--border-2); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout { background:none; border:1px solid var(--border-2); color:var(--text-muted); font-size:10px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); transition:all var(--ease); white-space:nowrap; }
.btn-logout:hover { color:var(--danger); border-color:var(--danger-border); background:var(--danger-bg); }

/* App body */
#app-body { display:flex; padding-top:var(--header-h); min-height:100vh; }

/* Sidebar */
#sidebar { position:fixed; top:var(--header-h); left:0; bottom:0; width:var(--sidebar-w); background:var(--bg-card); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:10px 8px; overflow-y:auto; z-index:150; transition:transform .25s ease,width .25s ease; transform:translateX(-100%); }
#sidebar.collapsed { width:var(--sidebar-coll); padding:8px 4px; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm); cursor:pointer; border:none; background:none; color:var(--text-muted); font-family:var(--font-body); font-size:12px; font-weight:500; width:100%; text-align:left; transition:all var(--ease); white-space:nowrap; overflow:hidden; position:relative; }
.nav-item:hover { color:var(--text); background:var(--bg-hover); }
.nav-item.active { color:var(--primary); background:var(--primary-bg); font-weight:700; }
.nav-item-icon { font-size:16px; flex-shrink:0; }
.nav-item-label { flex:1; overflow:hidden; text-overflow:ellipsis; }
.nav-badge { background:var(--danger); color:#fff; font-size:9px; font-weight:700; min-width:18px; height:18px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; padding:0 4px; flex-shrink:0; }
#sidebar.collapsed .nav-item { padding:10px; justify-content:center; gap:0; }
#sidebar.collapsed .nav-item-label { display:none; }
#sidebar.collapsed .nav-badge { position:absolute; top:4px; right:4px; }
.sidebar-toggle-btn { background:none; border:none; color:var(--text-faint); font-size:11px; font-weight:700; padding:8px 12px; text-align:right; width:100%; transition:color var(--ease); margin-top:8px; flex-shrink:0; border-top:1px solid var(--border); }
.sidebar-toggle-btn:hover { color:var(--text); }
#sidebar.collapsed .sidebar-toggle-btn { text-align:center; }

/* Sidebar overlay */
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:140; }
#sidebar-overlay.visible { display:block; }

/* Content */
#content { flex:1; min-width:0; padding:16px 16px calc(var(--nav-h) + 20px); margin-left:0; transition:margin-left .25s ease; }

/* Bottom nav */
#bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--bg-card); border-top:1px solid var(--border); z-index:200; height:var(--nav-h); padding-bottom:env(safe-area-inset-bottom,0px); }
.bottom-nav-items { display:flex; align-items:stretch; height:100%; }
.bottom-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 4px; cursor:pointer; border:none; background:none; color:var(--text-faint); font-family:var(--font-body); font-size:9px; font-weight:600; transition:color var(--ease); position:relative; min-width:0; }
.bottom-nav-item.active { color:var(--primary); }
.bottom-nav-item:active { background:var(--bg-hover); }
.bottom-nav-icon { font-size:22px; line-height:1; flex-shrink:0; }
.bottom-nav-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bottom-nav-badge { position:absolute; top:4px; right:calc(50% - 22px); background:var(--danger); color:#fff; font-size:8px; font-weight:700; min-width:15px; height:15px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* FAB */
.fab { position:fixed; bottom:calc(var(--nav-h) + 14px); right:16px; width:52px; height:52px; border-radius:14px; background:var(--primary); border:none; color:var(--bg); font-size:26px; box-shadow:0 4px 20px rgba(235,150,111,.4); z-index:50; transition:all var(--ease); display:none; align-items:center; justify-content:center; }
.fab:hover { background:var(--primary-dk); transform:scale(1.05); }
.fab.visible { display:flex; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:500; display:flex; align-items:flex-end; justify-content:center; }
.modal { background:var(--bg-card); border:1px solid var(--border-2); border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; max-width:540px; max-height:92vh; overflow-y:auto; padding:22px 20px 32px; border-bottom:none; }
.modal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.modal-title { font-family:var(--font-display); font-style:italic; font-weight:700; font-size:18px; color:var(--text); line-height:1.2; flex:1; padding-right:12px; }
.modal-close { background:none; border:none; color:var(--text-faint); font-size:20px; line-height:1; padding:2px 6px; border-radius:var(--r-sm); flex-shrink:0; }
.modal-close:hover { color:var(--text); background:var(--bg-hover); }

/* Desktop */
/* Mobile sidebar open state */
#sidebar.mobile-open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.5); }

@media (min-width:768px) {
  #sidebar { transform:translateX(0); }
  #bottom-nav { display:none; }
  #content { margin-left:var(--sidebar-w); padding:24px 28px 32px; }
  #content.sidebar-collapsed { margin-left:var(--sidebar-coll); }
  .fab { bottom:24px; right:24px; }
  .modal-overlay { align-items:center; }
  .modal { border-radius:var(--r-xl); max-width:560px; border-bottom:1px solid var(--border-2); }
  .screen-center { padding:60px 40px; }
  .auth-cards { flex-direction:row; flex-wrap:wrap; }
  .auth-card { flex:1; min-width:160px; }
  .stats-grid { grid-template-columns:repeat(4,1fr); }
}