:root {
  --brand-red: #bc3028;
  --sidebar-width: 256px;
}
.app-shell { background: #f5f6f8; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 20; background: white; padding: 10px 16px; }
.skip-link:focus { top: 12px; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width);
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--brand-red); color: white; z-index: 10;
}
.sidebar-heading { padding: 32px 26px 24px; }
.sidebar-brand { display: flex; flex-direction: column; gap: 24px; text-decoration: none; color: white; }
.sidebar-brand img { width: 100%; height: auto; display: block; }
.sidebar-brand > span { font-size: 25px; font-weight: 350; letter-spacing: -.5px; }
.sidebar-brand strong { font-weight: 750; }
.sidebar-nav { display: flex; flex-direction: column; gap: 6px; padding: 4px 14px 24px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  color: white; text-decoration: none; border-radius: 7px; font-size: 15px;
  border: 1px solid transparent; line-height: 1.45;
}
.sidebar-nav a:hover { background: rgba(0,0,0,.10); }
.sidebar-nav a[aria-current="page"] { background: rgba(0,0,0,.19); border-color: rgba(255,255,255,.16); font-weight: 700; }
.sidebar-nav svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.nav-separator { height: 1px; background: rgba(255,255,255,.23); margin: 16px 14px; }
.sidebar-account { margin-top: auto; padding: 24px 28px; border-top: 1px solid rgba(255,255,255,.23); }
.sidebar-account > span { display: block; font-size: 14px; font-weight: 650; }
.sidebar-account small { display: block; font-size: 12px; margin: 2px 0 16px; }
.sidebar-account .logout { border-color: rgba(255,255,255,.55); color: white; width: 100%; text-align: left; }
.sidebar :focus-visible { outline: 2px solid white; outline-offset: 3px; }
.menu-toggle { display: none; }
.app-shell .app-workspace { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.app-workspace > main { flex: 1; }
.workspace-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px clamp(24px, 3vw, 56px); border-bottom: 1px solid #e1e5e8; background: white; color: #52656c; font-size: 13px; }
.environment-tag { border: 1px solid #e4d5d3; background: #fdf4f3; color: #91251f; border-radius: 20px; padding: 3px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.workspace-footer { padding: 0 clamp(24px, 3vw, 56px) 24px; color: #52656c; font-size: 12px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px; background: var(--brand-red); color: white; }
.login-brand img { display: block; width: 180px; height: auto; }
.login-brand > span { font-size: 24px; font-weight: 650; }
.login-shell .workspace-footer { text-align: center; }
@media (min-width: 761px) and (max-width: 1080px) {
  :root { --sidebar-width: 222px; }
  .sidebar-heading { padding: 26px 24px; }
  .sidebar-nav a { padding: 11px 9px; gap: 9px; font-size: 14px; }
  .estimate-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .sidebar { position: sticky; top: 0; width: 100%; max-height: 100dvh; }
  .sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; }
  .sidebar-brand { flex-direction: row; align-items: center; gap: 18px; }
  .sidebar-brand img { width: 112px; }
  .sidebar-brand > span { font-size: 20px; }
  .menu-toggle { display: block; border: 1px solid rgba(255,255,255,.65); background: transparent; color: white; padding: 7px 12px; font-size: 14px; }
  .sidebar-nav, .sidebar-account { display: none; }
  .sidebar[data-open="true"] .sidebar-nav { display: flex; }
  .sidebar[data-open="true"] .sidebar-account { display: block; }
  .sidebar-account { padding: 16px 28px; }
  .app-shell .app-workspace { margin-left: 0; min-height: calc(100vh - 74px); }
  .workspace-bar { padding: 12px 20px; }
  .app-workspace > main { padding: 28px 20px 40px; }
  .workspace-footer { padding: 0 20px 24px; }
  .grid, .form-grid, .filters, .estimate-filters, .line-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .sidebar-brand > span { display: none; } }
@media print {
  .sidebar, .workspace-bar, .skip-link { display: none !important; }
  .app-shell .app-workspace { margin: 0; display: block; }
  .app-workspace > main { padding: 0; }
}
.grid > .card + .card { margin-top: 0; }