.app-shell {
  min-height: 100vh;
  background-color: var(--nx-surface-canvas);
  color: var(--nx-text-primary);
}

.drawer {
  background: var(--nx-surface-base);
  color: var(--nx-text-secondary);
  border-inline-end: 1px solid var(--nx-border-subtle);
  box-shadow: var(--nx-elevation-none);
  padding: var(--nx-space-6) var(--nx-space-4);
}

.drawer .brand {
  gap: var(--nx-space-3);
  padding-bottom: var(--nx-space-5);
  margin-bottom: var(--nx-space-5);
  border-bottom-color: var(--nx-border-subtle);
}

.drawer .brand-mark {
  width: var(--nx-control-lg);
  height: var(--nx-control-lg);
  flex: 0 0 var(--nx-control-lg);
  background: var(--nx-brand-subtle);
  color: var(--nx-brand-primary-pressed);
  border: 1px solid var(--nx-brand-border);
  border-radius: var(--nx-radius-lg);
}

.drawer .brand-title {
  color: var(--nx-text-primary);
  font-size: var(--nx-type-title-size);
  font-weight: var(--nx-type-title-weight);
  line-height: var(--nx-type-title-line);
  letter-spacing: var(--nx-letter-spacing-default);
}

.drawer .brand-subtitle {
  color: var(--nx-text-tertiary);
  font-size: var(--nx-type-caption-size);
  font-weight: var(--nx-type-caption-weight);
  line-height: var(--nx-type-caption-line);
  letter-spacing: var(--nx-letter-spacing-default);
}

.drawer .sidebar-summary {
  padding: var(--nx-space-3) var(--nx-space-4);
  margin-bottom: var(--nx-space-6);
  background: var(--nx-surface-subtle);
  border: 1px solid var(--nx-border-subtle);
  border-radius: var(--nx-radius-lg);
}

.drawer .sidebar-summary-label {
  color: var(--nx-text-tertiary);
  font-size: var(--nx-type-caption-size);
  font-weight: var(--nx-type-caption-weight);
  line-height: var(--nx-type-caption-line);
  letter-spacing: var(--nx-letter-spacing-default);
}

.drawer .sidebar-summary-value {
  margin-top: var(--nx-space-1);
  color: var(--nx-text-secondary);
  font-size: var(--nx-type-body-md-size);
  font-weight: var(--nx-type-label-weight);
  line-height: var(--nx-type-body-md-line);
}

.drawer .nav-group {
  margin-bottom: var(--nx-space-5);
}

.drawer .nav-group-title {
  margin-bottom: var(--nx-space-2);
  color: var(--nx-text-tertiary);
  font-size: var(--nx-type-caption-size);
  font-weight: var(--nx-type-caption-weight);
  line-height: var(--nx-type-caption-line);
  letter-spacing: var(--nx-letter-spacing-default);
  text-transform: none;
}

.drawer .nav-group-items {
  gap: var(--nx-space-1);
}

.drawer .nav-link {
  min-height: var(--nx-control-md);
  gap: var(--nx-space-3);
  padding: var(--nx-space-2) var(--nx-space-3);
  background: transparent;
  color: var(--nx-text-secondary);
  border: 0;
  border-inline-start: var(--nx-edge-width) solid transparent;
  border-radius: var(--nx-radius-md);
  font-size: var(--nx-type-body-md-size);
  font-weight: var(--nx-type-body-md-weight);
  line-height: var(--nx-type-body-md-line);
  text-decoration: none;
  transition:
    background-color var(--nx-motion-fast) var(--nx-ease-standard),
    border-color var(--nx-motion-fast) var(--nx-ease-standard),
    color var(--nx-motion-fast) var(--nx-ease-standard);
}

.drawer .nav-link:hover {
  background: var(--nx-surface-subtle);
  color: var(--nx-text-primary);
}

.drawer .nav-link.active {
  background: var(--nx-surface-selected);
  color: var(--nx-text-primary);
  border-inline-start-color: var(--nx-edge-color);
  font-weight: var(--nx-type-label-weight);
}

.drawer .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nx-space-5);
  min-width: var(--nx-space-5);
  height: var(--nx-space-5);
  line-height: 1;
}

.main-content {
  min-height: 100vh;
  background-color: var(--nx-surface-canvas);
}

.app-header {
  margin-bottom: var(--nx-space-6);
}

.app-toolbar {
  min-height: var(--nx-header-height);
  padding: var(--nx-space-3) var(--nx-space-5);
  background: var(--nx-surface-base);
  border: 0;
  border-block-end: 1px solid var(--nx-border-subtle);
  border-radius: 0;
  box-shadow: var(--nx-elevation-none);
}

.app-toolbar .header-left {
  gap: var(--nx-space-4);
}

.app-toolbar .menu-toggle {
  width: var(--nx-control-md);
  height: var(--nx-control-md);
  min-width: var(--nx-control-md);
  padding: 0;
  background: var(--nx-surface-base);
  color: var(--nx-text-secondary);
  border: 1px solid var(--nx-border-default);
  border-radius: var(--nx-radius-md);
  box-shadow: var(--nx-elevation-none);
  transition:
    background-color var(--nx-motion-fast) var(--nx-ease-standard),
    border-color var(--nx-motion-fast) var(--nx-ease-standard),
    color var(--nx-motion-fast) var(--nx-ease-standard);
}

.app-toolbar .menu-toggle:hover {
  background: var(--nx-surface-subtle);
  color: var(--nx-text-primary);
  border-color: var(--nx-border-control-hover);
}

.app-toolbar .menu-toggle:active {
  background: var(--nx-brand-subtle);
  color: var(--nx-brand-foreground);
  border-color: var(--nx-brand-border);
}

.app-toolbar .page-kicker {
  color: var(--nx-brand-primary-pressed);
  font-size: var(--nx-type-caption-size);
  font-weight: var(--nx-type-caption-weight);
  line-height: var(--nx-type-caption-line);
  letter-spacing: var(--nx-letter-spacing-default);
}

.app-toolbar .page-title {
  margin: 0;
  color: var(--nx-text-primary);
  font-size: var(--nx-type-title-size);
  font-weight: var(--nx-type-title-weight);
  line-height: var(--nx-type-title-line);
  letter-spacing: var(--nx-letter-spacing-default);
}

.app-toolbar .header-actions {
  gap: var(--nx-space-3);
}

.app-toolbar .status-pill {
  padding: var(--nx-space-1) var(--nx-space-3);
  background: var(--nx-surface-sunken);
  color: var(--nx-text-tertiary);
  border: 1px solid var(--nx-border-subtle);
  border-radius: var(--nx-radius-full);
  font-size: var(--nx-type-caption-size);
  font-weight: var(--nx-type-caption-weight);
  line-height: var(--nx-type-caption-line);
}

.app-toolbar .quick-actions .btn,
.app-toolbar .inline-form .btn {
  min-height: var(--nx-control-sm);
  border-radius: var(--nx-radius-md);
  font-size: var(--nx-type-label-size);
  font-weight: var(--nx-type-label-weight);
  line-height: var(--nx-type-label-line);
  transition:
    background-color var(--nx-motion-fast) var(--nx-ease-standard),
    border-color var(--nx-motion-fast) var(--nx-ease-standard),
    color var(--nx-motion-fast) var(--nx-ease-standard);
}

.app-toolbar .quick-actions .btn-primary {
  background: var(--nx-brand-primary);
  color: var(--nx-brand-foreground);
  border-color: var(--nx-brand-primary);
}

.app-toolbar .quick-actions .btn-primary:hover {
  background: var(--nx-brand-primary-hover);
  border-color: var(--nx-brand-primary-hover);
}

.app-toolbar .quick-actions .btn-primary:active {
  background: var(--nx-brand-primary-pressed);
  color: var(--nx-brand-foreground);
  border-color: var(--nx-brand-primary-pressed);
}

.app-toolbar .quick-actions .btn-secondary,
.app-toolbar .inline-form .btn-secondary {
  background: var(--nx-surface-base);
  color: var(--nx-text-secondary);
  border-color: var(--nx-border-default);
}

.app-toolbar .quick-actions .btn-secondary:hover,
.app-toolbar .inline-form .btn-secondary:hover {
  background: var(--nx-surface-subtle);
  color: var(--nx-text-primary);
  border-color: var(--nx-border-control-hover);
}

@media screen and (max-width: 1024px) {
  .drawer {
    background: var(--nx-surface-base);
    box-shadow: var(--nx-elevation-panel) !important;
  }

  .app-toolbar {
    gap: var(--nx-space-3);
  }
}

@media screen and (max-width: 639px) {
  .app-header {
    margin-bottom: var(--nx-space-4);
  }

  .app-toolbar {
    min-height: auto;
    padding: var(--nx-space-3);
  }

  .app-toolbar .header-left {
    width: 100%;
    gap: var(--nx-space-3);
  }

  .app-toolbar .header-actions {
    width: 100%;
    gap: var(--nx-space-2);
  }
}