/* ===========================================================
   SHELL — App shell layout, sidebar, topbar, profile, login
   =========================================================== */

/* Language switcher */
.qb-langsw { display: inline-flex; background: var(--qb-surface); border: 1px solid var(--qb-border);
  border-radius: var(--qb-r-md); padding: 3px; gap: 2px; }
.qb-langsw button { border: 0; background: transparent; height: 28px; min-width: 38px; padding: 0 10px;
  border-radius: var(--qb-r-sm); font-size: 12px; font-weight: 600; color: var(--qb-fg-2); cursor: pointer;
  transition: background-color .12s, color .12s; }
.qb-langsw button:hover { background: var(--qb-surface-3); color: var(--qb-fg-1); }
.qb-langsw button[aria-pressed="true"] { background: var(--qb-orange-light); color: var(--qb-orange-deep); font-weight: 700; }

/* --- Login -------------------------------------------------- */
#view-login { height: 100%; }
.login { min-height: 100%; display: grid; place-items: center; padding: var(--qb-s-24); position: relative; }
.login__lang { position: absolute; top: var(--qb-s-24); inset-inline-end: var(--qb-s-24); }
.login__card { width: 100%; max-width: 400px; background: var(--qb-surface); border: 1px solid var(--qb-border);
  border-radius: var(--qb-r-xl); box-shadow: var(--qb-shadow-lg); padding: var(--qb-s-48) var(--qb-s-32); }
.login__brand { display: flex; justify-content: center; margin-bottom: var(--qb-s-24); }
.login__brand .qb-brand { height: 52px; width: auto; }
.login__title { text-align: center; margin-bottom: var(--qb-s-8); }
.login__sub { text-align: center; color: var(--qb-fg-2); margin-bottom: var(--qb-s-32); }
.field { margin-bottom: var(--qb-s-16); }
.field > label { display: block; margin-bottom: var(--qb-s-8); }
.field .qb-input { width: 100%; }
.login__forgot { display: flex; justify-content: flex-end; margin: 0 0 var(--qb-s-16); color: var(--qb-fg-2); font-size: 13px; }
.login__error { color: var(--qb-danger); font-size: 13px; line-height: 1.4; padding: var(--qb-s-12) var(--qb-s-16);
  background: var(--qb-danger-bg); border-radius: var(--qb-r-md); margin-bottom: var(--qb-s-16); }
.login__submit { width: 100%; margin-top: var(--qb-s-8); }

/* --- App shell ---------------------------------------------- */
#view-app { height: 100%; }
.app { display: grid; height: 100%;
  grid-template-columns: var(--qb-sidebar-w-expanded) 1fr;
  grid-template-rows: var(--qb-topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main"; }
.app.is-collapsed { grid-template-columns: var(--qb-sidebar-w-collapsed) 1fr; }

/* Sidebar */
.sidebar { grid-area: sidebar; background: var(--qb-surface); border-inline-end: 1px solid var(--qb-border);
  display: flex; flex-direction: column; min-height: 0; }
.sidebar__brand { height: var(--qb-topbar-h); display: flex; align-items: center; gap: var(--qb-s-8);
  padding: 0 var(--qb-s-16); border-block-end: 1px solid var(--qb-border); overflow: hidden; }
.sidebar__brand .qb-logo-mark { display: none; }
.sidebar__brand .qb-brand { height: 40px; }
.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--qb-s-12) var(--qb-s-8); display: flex; flex-direction: column; gap: 2px; }
.sidebar__foot { padding: var(--qb-s-8); border-block-start: 1px solid var(--qb-border); }

/* Navitem */
.navitem { display: flex; align-items: center; gap: var(--qb-s-12); width: 100%; height: var(--qb-h-lg);
  padding: 0 var(--qb-s-12); border: 0; background: transparent; border-radius: var(--qb-r-lg);
  color: var(--qb-fg-2); cursor: pointer; font-size: 14px; font-weight: 500; text-align: start; }
.navitem:hover { background: var(--qb-surface-3); color: var(--qb-fg-1); }
.navitem.is-active { background: var(--qb-orange-light); color: var(--qb-orange-deep); font-weight: 700; }
.navitem svg { width: 20px; height: 20px; flex: none; }
.navitem__label { flex: 1; white-space: nowrap; overflow: hidden; }

/* Collapsed sidebar */
.is-collapsed .navitem { justify-content: center; padding: 0; }
.is-collapsed .navitem__label, .is-collapsed .navitem .qb-badge { display: none; }
.is-collapsed .sidebar__brand { justify-content: center; padding: 0; }
.is-collapsed .sidebar__brand .qb-logo-word, .is-collapsed .sidebar__brand .qb-brand { display: none !important; }
.is-collapsed .sidebar__brand .qb-logo-mark { display: block; }

/* Topbar */
.topbar { grid-area: topbar; background: var(--qb-surface); border-block-end: 1px solid var(--qb-border);
  display: flex; align-items: center; gap: var(--qb-s-12); padding: 0 var(--qb-s-16); }
.topbar__title { flex: 1; }
.iconbtn { width: 40px; height: 40px; border-radius: var(--qb-r-lg); border: 1px solid transparent;
  background: transparent; color: var(--qb-fg-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.iconbtn:hover { background: var(--qb-surface-3); color: var(--qb-fg-1); }
.iconbtn svg { width: 20px; height: 20px; }

/* Profile & menu */
.profile { position: relative; }
.profile__btn { display: flex; align-items: center; gap: var(--qb-s-8); height: 44px; padding: 0 var(--qb-s-8);
  border-radius: var(--qb-r-lg); border: 0; background: transparent; cursor: pointer; }
.profile__btn:hover { background: var(--qb-surface-3); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--qb-orange-light);
  color: var(--qb-orange-deep); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.profile__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.profile__name { font-size: 13px; font-weight: 600; color: var(--qb-fg-1); }
.profile__role { font-size: 11px; color: var(--qb-fg-2); }
.menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 230px; background: var(--qb-surface);
  border: 1px solid var(--qb-border); border-radius: var(--qb-r-lg); box-shadow: var(--qb-shadow-lg); padding: var(--qb-s-8); z-index: 50; }
.menu__item { display: flex; align-items: center; gap: var(--qb-s-12); width: 100%; height: var(--qb-h-md);
  padding: 0 var(--qb-s-12); border: 0; background: transparent; border-radius: var(--qb-r-md);
  color: var(--qb-fg-1); font-size: 14px; cursor: pointer; text-align: start; }
.menu__item:hover { background: var(--qb-surface-3); }
.menu__item svg { width: 18px; height: 18px; color: var(--qb-fg-2); }
.menu__sep { height: 1px; background: var(--qb-border); margin: var(--qb-s-8) 0; }
.menu__group { display: flex; gap: 4px; padding: 0 var(--qb-s-4) var(--qb-s-4); }
.menu__group .qb-btn { flex: 1; }
.menu__grouplabel { padding: var(--qb-s-4) var(--qb-s-12); }
.menu__tenant { font-size: 12px; color: var(--qb-fg-3); padding: var(--qb-s-4) var(--qb-s-12); }

/* Main + screens */
.main { grid-area: main; overflow-y: auto; padding: var(--qb-s-24); }
.screen { max-width: 1100px; margin: 0 auto; }
.screen__head { display: flex; align-items: center; gap: var(--qb-s-12); margin-bottom: var(--qb-s-16); flex-wrap: wrap; }
.screen__head .spacer { flex: 1; }

/* Scrim (mobile drawer backdrop) */
.scrim { position: fixed; inset: 0; background: var(--qb-border-overlay); z-index: 55; }

/* --- Responsive: ≤768px — sidebar → drawer, 1-column -------- */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .app.is-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--qb-sidebar-w-expanded);
    z-index: 60; transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--qb-shadow-lg); }
  html[dir="rtl"] .sidebar { transform: translateX(102%); }
  .app.drawer-open .sidebar { transform: translateX(0); }
  .main { padding: var(--qb-s-16); }
  .profile__meta { display: none; }
}