/* Tuva eier-app, a computer from 900 px (SPEC-crm-list.md F10): the menu moves to the left, as it already does from 1024 px
   (app.css, SPEC-passord-desktop P9). This file only adds the 900-1023 px band; from 1024 px app.css does it. Under 900 px nothing here applies. */
/* The logo and the business name at the top of the sidebar (the approved sketch); the phone's bottom bar hides them. */
.tabbrand{display:none}
@media (min-width:900px){
  .tabbrand{display:block;padding:0 10px 14px}
  .tabbrand .tbname{display:flex;align-items:center;gap:10px;font-weight:800;font-size:26px;line-height:1}
  .tabbrand img{width:30px;height:30px}
  .tabbrand .tbbiz{color:var(--muted);font-size:13px;margin-top:8px;overflow-wrap:break-word}
}
@media (min-width:900px) and (max-width:1023.98px){
  .app{max-width:none;margin:0;box-shadow:none;background:var(--surface)}
  .tabbar{left:0;top:0;bottom:0;transform:none;width:220px;max-width:none;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:28px 14px;border-top:0;border-right:1px solid var(--line)}
  .tabbar button{flex-direction:row;justify-content:flex-start;gap:14px;min-height:50px;padding:0 16px;font-size:16px;text-align:left;width:100%}
  .tabbar button[aria-current="page"]{background:var(--surface-3)}
  .tabbar .tbadge{position:static;margin:0 0 0 auto}
  .view{margin-left:220px;padding-bottom:48px}
  .view.nonav{margin-left:0;padding-bottom:24px}
  .toast{left:calc(50% + 110px);max-width:560px}
  .login{max-width:480px;margin:0 auto}
  .view.nonav > .login{min-height:100vh}
  body.insupport .tabbar{top:64px}
}

/* Six tabs on a very small phone: a little less space around the labels, so «Innstillinger» and «Customers» stay whole. */
@media (max-width:359px){.tabbar button{padding:0 2px;letter-spacing:-.02em}.tabbar{padding-left:2px;padding-right:2px}}