@import url('./components.css');

.sg-app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sg-sidebar-width) minmax(0, 1fr); background: var(--sg-color-neutral-50); }
.sg-app-sidebar { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: var(--sg-space-6) var(--sg-space-4); border-right: 1px solid var(--sg-color-neutral-200); background: var(--sg-color-neutral-0); overflow-y: auto; }
.sg-brand { display: flex; align-items: center; gap: var(--sg-space-3); padding: 0 var(--sg-space-2) var(--sg-space-6); }
.sg-brand__logo { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; object-fit: contain; }
.sg-brand__name { margin: 0; font-size: var(--sg-text-md); font-weight: 800; color: var(--sg-brand-gray-dark); }
.sg-brand__product { margin: 0.1rem 0 0; color: var(--sg-color-neutral-500); font-size: var(--sg-text-xs); }
.sg-app-nav__group { margin-top: var(--sg-space-6); }
.sg-app-nav__label { padding: 0 var(--sg-space-3) var(--sg-space-2); color: var(--sg-color-neutral-500); font-size: var(--sg-text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.sg-app-main { min-width: 0; }
.sg-app-header { position: sticky; top: 0; z-index: 10; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-6); padding: 0 var(--sg-space-8); border-bottom: 1px solid var(--sg-color-neutral-200); background: var(--sg-color-neutral-0); }
.sg-app-header__title { min-width: 0; }
.sg-app-header__eyebrow { margin: 0 0 0.15rem; color: var(--sg-color-neutral-500); font-size: var(--sg-text-xs); font-weight: 700; }
.sg-app-header__heading { margin: 0; font-size: var(--sg-text-xl); line-height: var(--sg-leading-tight); }
.sg-app-header__actions { display: flex; align-items: center; gap: var(--sg-space-3); }
.sg-avatar { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--sg-brand-blue); background: var(--sg-color-primary-100); font-size: var(--sg-text-sm); font-weight: 800; }
.sg-app-content { padding: var(--sg-space-8); }
.sg-content-grid { display: grid; gap: var(--sg-space-6); }
.sg-content-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sg-content-grid--two { grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.65fr); }
.sg-action-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-4); margin-bottom: var(--sg-space-6); }
.sg-action-bar__title { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sg-action-bar__title h1 { margin: 0; font-size: var(--sg-text-3xl); line-height: var(--sg-leading-tight); }
.sg-action-bar__title p { margin: 0; color: var(--sg-color-neutral-600); }
.sg-quick-actions { display: flex; flex-wrap: wrap; gap: var(--sg-space-3); }
.sg-kpi { min-height: 8rem; display: flex; flex-direction: column; justify-content: space-between; }
.sg-kpi__delta { font-size: var(--sg-text-sm); font-weight: 700; }
.sg-kpi__delta--positive { color: var(--sg-brand-green); }
.sg-kpi__delta--negative { color: var(--sg-color-danger-600); }
.sg-section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-4); margin-bottom: var(--sg-space-4); }
.sg-section-title h2 { margin: 0; font-size: var(--sg-text-lg); }
.sg-section-title a { color: var(--sg-brand-blue); font-size: var(--sg-text-sm); font-weight: 700; }
.sg-empty-state { padding: var(--sg-space-8); border: 1px dashed var(--sg-color-neutral-300); border-radius: var(--sg-radius-lg); text-align: center; color: var(--sg-color-neutral-600); }
.sg-empty-state strong { display: block; color: var(--sg-color-neutral-900); }
.sg-bottom-nav { display: none; }

@media (max-width: 64rem) {
  .sg-content-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-content-grid--two { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .sg-app-shell { grid-template-columns: 1fr; padding-bottom: 4.75rem; }
  .sg-app-sidebar { display: none; }
  .sg-app-header { position: sticky; min-height: 4rem; padding: 0 var(--sg-space-4); }
  .sg-app-header__actions .sg-btn--secondary { display: none; }
  .sg-app-content { padding: var(--sg-space-4); }
  .sg-action-bar { align-items: flex-start; flex-direction: column; }
  .sg-action-bar__title h1 { font-size: var(--sg-text-2xl); }
  .sg-content-grid--stats { grid-template-columns: 1fr; }
  .sg-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 4.25rem; padding: var(--sg-space-2); box-sizing: border-box; border-top: 1px solid var(--sg-color-neutral-200); background: var(--sg-color-neutral-0); box-shadow: 0 -8px 24px rgba(31, 41, 55, 0.08); }
  .sg-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; border-radius: var(--sg-radius-md); color: var(--sg-color-neutral-600); text-decoration: none; font-size: 0.68rem; font-weight: 700; }
  .sg-bottom-nav__item span:first-child { font-size: 1.05rem; line-height: 1; }
  .sg-bottom-nav__item:hover { background: var(--sg-color-neutral-100); color: var(--sg-color-neutral-900); }
  .sg-bottom-nav__item[aria-current="page"] { color: var(--sg-brand-blue); background: var(--sg-color-primary-50); }
}