.app-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { padding: 27px 14px 16px; background: var(--brand-dark); display: flex; flex-direction: column; z-index: 50; }
.brand { gap: 10px; padding: 0 10px; margin-bottom: 30px; }
.brand-mark { width: 35px; height: 35px; }
.brand strong { font-size: 19px; font-weight: 650; letter-spacing: -.6px; }
.brand small { color: #a3c9bf; font-size: 10px; font-weight: 400; letter-spacing: .4px; }
.nav-list { gap: 20px; }
.nav-list a { gap: 11px; min-height: 40px; padding: 9px 12px; font-size: 12px; font-weight: 450; border-radius: 7px; color: #c2d8d2; }
.nav-list a .ui-icon { width: 17px; height: 17px; }
.nav-list a:hover { background: #ffffff0c; border-color: transparent; }
.nav-list a.is-active { background: #ffffff13; border-color: #ffffff09; box-shadow: inset 3px 0 var(--color-accent); color: #fff; font-weight: 600; }
.nav-group-label { padding: 0 12px; color: #91b7ad; font-size: 9px; font-weight: 500; letter-spacing: 1.5px; }
.nav-group { gap: 3px; }
.portal-switch-link { color: #c2d8d2 !important; border-color: #ffffff12 !important; }
.sidebar-footer { margin-top: auto; padding: 30px 10px 4px; }
.sidebar-note { padding: 14px; margin: 0 0 15px; border: 1px solid #ffffff16; border-radius: 9px; color: #b4cec6; font-size: 11px; }
.sidebar-note strong { display: block; color: #ecf6f2; margin: 8px 0 4px; font-size: 12px; font-weight: 550; }
.sidebar-collapse { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: #b4cec6; font-size: 11px; padding: 8px 0; }
.main-shell { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; min-height: var(--topbar-height); padding: 13px 30px; gap: 18px; background: #fffffffa; border-bottom: 1px solid var(--border); box-shadow: none; }
.topbar-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-heading::before { content: ''; width: 1px; height: 22px; background: var(--border); margin-right: 3px; }
.topbar .eyebrow { display: none; }
.topbar h1 { font-size: 13px; font-weight: 550; color: #475467; letter-spacing: 0; }
.workspace { padding: 28px 30px 32px; max-width: 1800px; margin: auto; min-width: 0; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.topbar-actions .primary-button { font-size: 12px; min-height: 35px; }
.topbar-search { margin-left: auto; display: flex; align-items: center; gap: 9px; background: #f8fafb; color: var(--muted); padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; width: min(355px, 30vw); font-size: 11px; text-align: left; }
.topbar-search .ui-icon { width: 16px; height: 16px; }
.topbar-search kbd { margin-left: auto; font: inherit; border: 1px solid #e2e6eb; padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.topbar-tools { display: flex; align-items: center; gap: 12px; }
.user-menu { position: relative; border-left: 1px solid var(--border); padding-left: 15px; }
.user-menu summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-avatar, .customer-avatar { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: none; background: #e3f1eb; border: 1px solid #d3e6dd; color: var(--brand); font-weight: 650; font-size: 12px; border-radius: 50%; }
.user-meta { font-size: 11px; }
.user-meta strong, .user-meta small { display: block; }
.user-meta small { color: var(--muted); font-size: 10px; }
.user-dropdown { position: absolute; top: calc(100% + 15px); right: 0; padding: 7px; width: 190px; border: 1px solid var(--border); background: #fff; border-radius: 9px; box-shadow: 0 8px 30px #1018281a; }
.user-dropdown button { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--text); border-radius: 5px; padding: 9px 12px; font-size: 12px; }
.user-dropdown button:hover { background: var(--bg); }
.topbar .icon-button { color: #667085; width: 34px; height: 34px; min-height: 34px; border: 0; background: transparent; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 10px 16px; background: #fff; z-index: 200; border-radius: 6px; }
.skip-link:focus { top: 10px; }
.mobile-bottom-nav { display: none; }
body.auth-locked .mobile-bottom-nav { display: none; }
.login-screen { background: #f3f7f5; }
.login-panel { padding: 36px; border-radius: 16px; box-shadow: 0 12px 48px #0638320b; }
.login-panel .eyebrow { color: var(--brand); }
body.sidebar-collapsed { --sidebar-width: 76px; }
body.sidebar-collapsed .brand { padding: 0 6px; }
body.sidebar-collapsed .brand span, body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .sidebar-note, body.sidebar-collapsed .sidebar-collapse span { display: none; }
body.sidebar-collapsed .nav-list a { justify-content: center; padding: 11px 0; }
body.sidebar-collapsed .sidebar-footer { padding: 20px 12px 0; }
body.sidebar-collapsed .brand-mark { width: 32px; }
body.sidebar-collapsed .sidebar-collapse .ui-icon { transform: rotate(180deg); }
@media (min-width: 821px) and (max-width: 1100px) { :root { --sidebar-width: 190px; } .workspace { padding: 24px; } .topbar { padding-inline: 24px; gap: 12px; } .user-meta, .topbar-search kbd { display: none; } .topbar-search { width: 240px; } }
@media (max-width: 820px) {
  :root { --topbar-height: 64px; }
  .app-shell, body.sidebar-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; height: 100dvh; transform: translateX(-100%); transition: transform 180ms; padding-top: 24px; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: grid; }
  .sidebar-collapse { display: none; }
  .sidebar-backdrop { z-index: 40; }
  .topbar { padding: 12px 18px; flex-wrap: nowrap; gap: 10px; }
  .topbar-heading::before { display: none; }
  .topbar h1 { font-size: 13px; white-space: nowrap; }
  .topbar-search { width: 34px; border: 0; background: transparent; margin-left: auto; padding: 8px; }
  .topbar-search span, .topbar-search kbd, .user-meta { display: none; }
  .topbar-tools { gap: 6px; }
  .user-menu { padding-left: 8px; }
  .user-avatar { width: 29px; height: 29px; font-size: 10px; }
  .topbar-actions { display: none; }
  .workspace { padding: 22px 18px 100px; }
  .mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 35; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; padding: 8px 6px max(8px, env(safe-area-inset-bottom)); background: #fffffffa; border-top: 1px solid var(--border); box-shadow: 0 -4px 20px #10182804; }
  .mobile-bottom-nav a, .mobile-bottom-nav button { display: flex; align-items: center; flex-direction: column; gap: 4px; padding: 3px; border: 0; background: none; font-size: 10px; color: #667085; min-height: 44px; justify-content: center; }
  .mobile-bottom-nav .is-active { color: var(--brand); font-weight: 650; }
  .mobile-bottom-nav .quick-add { background: var(--brand); color: #fff; border-radius: 13px; width: 43px; height: 43px; justify-self: center; }
  body.sidebar-collapsed .brand span, body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .nav-label { display: initial; }
  body.sidebar-collapsed .nav-list a { justify-content: flex-start; padding: 9px 12px; }
}
@media print { .sidebar-footer, .mobile-bottom-nav, .skip-link, .ui-dialog { display: none !important; } }

@media (min-width: 821px) { .sidebar-close, .mobile-menu { display: none; } }
#route-title:focus, #app:focus { outline: none; }

@media (max-width: 820px) { .desktop-workspaces { display: none !important; } }

@media (min-width: 821px) { body.sidebar-collapsed .nav-label { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }