/* shell.css — app shell structure at each breakpoint.
   Values from the banking app's components.css (app bar, tab bar, F08/F26);
   colours for phone/tablet live in mobile.css, for desktop in desktop.css.
   DOM order: .app-bar, main.content, nav.nav, footer.app-footer. */

.app-shell { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
.content {
  flex:1 1 auto; overflow-y:auto; position:relative; overscroll-behavior:contain;
  padding:var(--space-5) max(16px, env(safe-area-inset-right)) var(--space-10) max(16px, env(safe-area-inset-left));
}
.content:focus { outline:none; }
.page { max-width:1400px; margin-inline:auto; }

/* ---------- App bar ---------------------------------------------------- */
.app-bar {
  height:calc(56px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) var(--space-2) 0 var(--space-4);
  display:flex; align-items:center; gap:8px; flex:none;
  background:var(--surface); border-bottom:1px solid var(--border); position:relative; z-index:3;
}
.app-bar__brand { display:flex; align-items:center; gap:10px; min-width:0; color:inherit; text-decoration:none; font-weight:700; letter-spacing:.02em; }
.app-bar__brand img { width:30px; height:30px; border-radius:6px; background:#FFFFFF; padding:2px; flex:none; }
.app-bar__name { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-bar__spacer { flex:1 1 auto; }
.app-bar__actions { display:flex; align-items:center; gap:2px; flex:none; }
.app-bar .icon-btn { color:inherit; }
.app-bar .menu__panel { color:var(--text); }

/* ---------- Navigation: bottom tab bar on phones ----------------------- */
.nav {
  height:calc(64px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); flex:none;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  background:var(--surface); border-top:1px solid var(--border);
}
.nav__label, .nav__sep { display:none; }
.nav__item {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0;
  color:var(--text-muted); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
}
.nav__item .icon { width:46px; height:30px; padding:4px 11px; border-radius:var(--radius-full); transition:background-color var(--dur) var(--ease); }
.nav__item[aria-current="page"] { color:var(--brand); font-weight:700; }
.nav__item[aria-current="page"] .icon { background:var(--brand-subtle); }
.nav__text { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Two classes, so these beat .nav__item's display:flex above. */
.nav__item.nav__item--desktop { display:none; }

/* ---------- Tablet: 80px left rail ------------------------------------- */
@media (min-width: 768px) {
  .nav {
    position:fixed; top:0; left:0; bottom:0; width:80px; height:auto; z-index:2;
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    padding:calc(24px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
    border-top:0; border-right:1px solid var(--border);
  }
  .nav__item { padding:10px 2px; flex:none; }
  .app-bar, .content { margin-left:80px; }
  .content { padding-inline:max(24px, env(safe-area-inset-left)); }
}

/* ---------- Desktop: 240px sidebar below a full-width top bar ---------- */
@media (min-width: 1200px) {
  .app-bar { margin-left:0; padding-right:var(--space-4); }
  .app-bar__brand { flex:0 0 228px; }
  .nav { top:56px; bottom:38px; width:240px; padding:12px; gap:2px; overflow-y:auto; }
  .nav__label { display:block; margin:6px 0 4px; padding:0 14px; font-size:11px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color:var(--nav-label, var(--text-muted)); }
  .nav__sep { display:block; width:100%; margin:8px 0; border:0; border-top:1px solid var(--border); }
  .nav__item.nav__item--desktop { display:flex; }
  .nav__item.nav__item--more { display:none; }
  .nav__item {
    flex-direction:row; justify-content:flex-start; gap:10px; padding:8px 14px; border-radius:6px;
    font-size:14px; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--nav-text, var(--text));
  }
  .nav__item .icon { width:18px; height:18px; padding:0; border-radius:0; }
  .nav__item:hover { background:var(--brand-subtle); color:var(--text); }
  .nav__item[aria-current="page"] { background:var(--brand); color:var(--on-brand); font-weight:600; }
  .nav__item[aria-current="page"] .icon { background:none; }
  .content { margin-left:240px; padding:var(--space-6) var(--space-8) var(--space-10); }
}

/* ---------- Footer: desktop only (CRM .crm-footer) --------------------- */
.app-footer { display:none; }
@media (min-width: 1200px) {
  .app-footer { display:flex; align-items:center; justify-content:center; flex:none; height:38px;
    font-size:12px; letter-spacing:.02em; position:relative; z-index:2; }
}

/* ---------- Signed-out pages (login, password change) ------------------ */
.auth-shell { min-height:100dvh; display:flex; flex-direction:column; }
.auth-main { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.auth-card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:32px 24px; }
.auth-card__brand { display:flex; align-items:center; gap:12px; margin-bottom:24px; font-weight:700; font-size:18px; }
.auth-card__brand img { width:40px; height:40px; border-radius:8px; background:#FFFFFF; padding:3px; border:1px solid var(--border); }
.auth-card__title { font-size:22px; font-weight:700; margin-bottom:6px; }
.auth-card__lede { margin:0 0 24px; color:var(--text-muted); font-size:15px; }
.auth-card .form-grid { grid-template-columns:minmax(0,1fr); }
.auth-card .form-actions { margin-top:var(--space-5); }
.auth-card .form-actions .btn { width:100%; }

/* The console's mark in the top bar (F26): never mistaken for a customer's workspace. */
.platform-mark { display:inline-flex; align-items:center; flex:none; padding:2px 8px; border:1px solid currentColor;
  border-radius:var(--radius-full); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
@media (min-width: 1200px) { .app-bar__brand--platform { flex:0 0 auto; } }  /* room for the mark */