.app-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: calc(100vh - 110px);
  gap: var(--space-5);
  width: min(1280px, 95%);
  margin: var(--space-5) auto;
}

.app-sidebar {
  background: #111b3d;
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  position: sticky;
  top: 20px;
  height: fit-content;
}

.app-sidebar h2 {font-size: 18px; margin-bottom: var(--space-4);}
.app-nav {list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.app-nav a {
  color: #c8d4ff;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  display: block;
}
.app-nav a.active, .app-nav a:hover {background:#203066;color:#fff;}

.app-main {display:grid; gap: var(--space-4);}
.app-topbar {
  display:flex; justify-content:space-between; align-items:center;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.app-breadcrumb{font-size:13px;color:var(--color-text-muted)}
.app-header {padding: 6px 2px;}
.app-grid-3 {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.app-grid-2 {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.metric-card {padding: 16px;}
.metric-card strong{display:block;font-size:27px;margin-bottom:8px;}

.data-table {width:100%; border-collapse: collapse; font-size:14px;}
.data-table th, .data-table td {padding: 10px; border-bottom:1px solid var(--color-border); text-align:right;}

@media (max-width: 980px) {
  .app-shell {grid-template-columns:1fr;}
  .app-grid-3, .app-grid-2 {grid-template-columns:1fr;}
  .app-sidebar {position:static;}
}