/* Shared page shell only. This file intentionally does not define business layouts or workflows. */

@media screen {
  .app-shell {
    grid-template-columns: var(--erp-sidebar-width) minmax(0, 1fr);
    min-height: 100dvh;
    background: var(--erp-bg);
  }

  .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    width: var(--erp-sidebar-width);
    height: 100dvh;
    overflow-y: auto;
    padding: var(--erp-space-5) var(--erp-space-3);
    border-right: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    background: var(--erp-surface-raised);
    color: var(--erp-text);
    box-shadow: none;
  }

  .brand {
    gap: var(--erp-space-3);
    margin-bottom: var(--erp-space-5);
  }

  .brand-mark {
    width: var(--erp-control-height-md);
    height: var(--erp-control-height-md);
    border-radius: var(--erp-radius-md);
    background: var(--erp-primary);
    color: #fff;
  }

  .brand strong { color: var(--erp-text); }

  .brand span,
  .user-panel span { color: var(--erp-text-muted); }

  .sidebar nav {
    gap: var(--erp-space-1);
  }

  .sidebar nav a {
    min-height: var(--erp-control-height-md);
    gap: var(--erp-space-3);
    border: var(--erp-border-width) solid transparent;
    border-radius: var(--erp-radius-md);
    color: var(--erp-text-secondary);
    padding: 8px var(--erp-space-3);
    transition: background-color var(--erp-duration-fast) var(--erp-ease-standard),
      border-color var(--erp-duration-fast) var(--erp-ease-standard),
      color var(--erp-duration-fast) var(--erp-ease-standard);
  }

  .sidebar nav a .tf-icon {
    color: var(--erp-text-muted);
  }

  .sidebar nav a:hover {
    border-color: transparent;
    background: var(--erp-surface-hover);
    color: var(--erp-text);
  }

  .sidebar nav a.active {
    border-color: color-mix(in srgb, var(--erp-primary) 26%, var(--erp-border));
    background: var(--erp-surface-selected);
    color: var(--erp-primary-active);
    font-weight: var(--erp-font-weight-semibold);
  }

  .sidebar nav a.active .tf-icon { color: var(--erp-primary); }

  .sidebar nav a:focus-visible,
  .brand-home:focus-visible {
    outline: none;
    box-shadow: var(--erp-shadow-focus);
  }

  .brand-home:hover { background: transparent; }

  .user-panel {
    gap: var(--erp-space-1);
    border-top-color: var(--erp-border);
    color: var(--erp-text);
    padding-top: var(--erp-space-3);
  }

  .system-info-footer {
    font-size: 12px;
    line-height: 1.4;
  }

  .system-info-footer strong {
    font-size: 12px;
    font-weight: var(--erp-font-weight-semibold);
  }

  .system-info-identity,
  .system-version {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--erp-space-1);
    min-width: 0;
  }

  .system-environment-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 1px 6px;
    border-radius: var(--erp-radius-pill);
    font-size: 11px;
    font-weight: var(--erp-font-weight-semibold);
    line-height: 1.2;
  }

  .system-environment-badge.is-deploy {
    color: var(--erp-success);
    background: var(--erp-surface-success-subtle);
  }

  .system-environment-badge.is-production {
    color: var(--erp-info);
    background: var(--erp-surface-info-subtle);
  }

  .system-environment-badge.is-development {
    color: var(--erp-text-secondary);
    background: var(--erp-surface-muted);
  }

  .system-backup-label {
    margin-top: var(--erp-space-1);
    font-weight: var(--erp-font-weight-semibold);
  }

  .system-backup-value {
    overflow-wrap: anywhere;
  }

  .workspace {
    width: min(100%, var(--erp-content-max-width));
    min-width: 0;
    margin-inline: auto;
    padding: var(--erp-page-padding);
  }

  .topbar {
    align-items: flex-start;
    gap: var(--erp-page-gap);
    margin-bottom: var(--erp-section-gap);
  }

  .topbar h1 {
    color: var(--erp-text);
    font-size: var(--erp-font-size-2xl);
    line-height: var(--erp-line-height-tight);
  }

  .topbar p {
    color: var(--erp-text-muted);
    font-size: var(--erp-font-size-sm);
    line-height: var(--erp-line-height-normal);
    margin-bottom: var(--erp-space-1);
  }

  .topbar-actions {
    align-items: center;
    gap: var(--erp-space-2);
  }

  .company-grid {
    gap: 0;
    margin-bottom: var(--erp-section-gap);
  }

  .company-tile {
    border-color: var(--erp-border);
    background: var(--erp-surface);
  }

  .company-tile.active {
    border-color: var(--erp-primary);
    background: var(--erp-surface-selected);
  }

  .company-tile span {
    background: var(--erp-surface-subtle);
    color: var(--erp-primary);
  }

  .company-tile small { color: var(--erp-text-muted); }
}

@media screen and (max-width: 1100px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    width: 100%;
    height: auto;
    max-height: none;
    padding: var(--erp-space-3);
    border-right: 0;
    border-bottom: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
  }

  .sidebar nav {
    gap: var(--erp-space-1);
  }

  .sidebar nav a {
    flex: 0 0 auto;
  }

  .user-panel { display: none; }
}

@media screen and (max-width: 760px) {
  .workspace {
    padding: var(--erp-space-4);
  }

  .topbar {
    gap: var(--erp-space-3);
    margin-bottom: var(--erp-space-4);
  }

  .topbar h1 { font-size: var(--erp-font-size-xl); }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .company-grid { margin-bottom: var(--erp-space-4); }
}

@media screen and (max-width: 390px) {
  .sidebar { padding-inline: var(--erp-space-2); }

  .brand { margin-bottom: var(--erp-space-3); }

  .workspace { padding: var(--erp-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar nav a { transition: none; }
}