/* Login, menu do usuário, permissões e versão de celular */
body.logged-out > header, body.logged-out > main, body.logged-out > .errorbar { display: none !important; }
.login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.login-box { width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; text-align: center; }
.login-box h2 { margin: 0 0 6px; font-size: 1.2rem; }
.login-box label { display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--muted); font-size: .85rem; }
.login-box input { padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 1rem; }
.login-box input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.login-logo { width: 96px; margin: 0 auto; filter: drop-shadow(0 4px 12px #0009); }
.login-err { color: var(--danger); min-height: 1.2em; margin: 0; font-weight: 600; }

.user-area { position: relative; margin-left: auto; order: 2; }
.user-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.user-menu { position: absolute; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 6px; padding: 10px; z-index: 20; min-width: 200px; }
.user-menu .btn { justify-content: flex-start; text-align: left; }
.topbar .brand { order: 1; }
.topbar .tabs { order: 4; width: 100%; }
.topbar .actions { order: 3; }

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.tabs .tab { white-space: nowrap; flex: 0 0 auto; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; margin-left: 4px; }

.gauges { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; }

textarea { font: inherit; }

/* ----- celular ----- */
@media (max-width: 760px) {
  .topbar { padding: 10px 12px; gap: 8px; padding-top: max(10px, env(safe-area-inset-top)); }
  .logo { width: 38px; }
  h1 { font-size: 1rem; }
  .sub #motd { display: none; }
  .actions { width: 100%; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .actions .btn { padding: 8px 4px; font-size: .8rem; }
  .user-area #userBtn .muted { display: none; }
  .layout:not([hidden]) { display: block !important; padding: 10px !important; }
  .page { padding: 10px !important; }
  .page-head { flex-direction: column; align-items: stretch !important; }
  .page-head h2 { font-size: 1.15rem; }
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-logo { width: 90px !important; }
  .duo, .ag-grid, .ag-grid.two { grid-template-columns: 1fr !important; }
  .gauges { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .info-card { grid-column: 1 / -1; }
  .card { padding: 12px !important; }
  .modal { padding: 8px !important; align-items: flex-end !important; }
  .modal-box, .modal-box.wide { width: 100% !important; max-width: 100% !important; max-height: 92vh; overflow: auto; border-radius: 16px 16px 0 0 !important; }
  .shop-layout, .map-layout { grid-template-columns: 1fr !important; }
  .console { max-height: 260px; }
  .btn { min-height: 38px; }
  input, select, textarea { font-size: 16px; } /* iPhone não dá zoom */
}
@media (display-mode: standalone) {
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
}
.toast { z-index: 60; }