@layer tokens, base, layout, components, views;

@layer layout {
  .g-app { min-height: 100dvh; display: grid; grid-template-columns: var(--g-sidebar) minmax(0, 1fr); }
  .g-main { min-width: 0; display: flex; flex-direction: column; min-height: 100dvh; }
  .g-page { padding: 0 32px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 1280px; width: 100%; }
  .g-page__head { padding: 28px 32px 20px; display: flex; align-items: center; gap: 16px; max-width: 1280px; width: 100%; }
  .g-page__head > div:first-child { flex: 1; min-width: 0; }
  .g-sub { font-size: 13px; color: var(--g-muted); font-weight: 500; }

  /* Barre latérale */
  .g-side { position: sticky; top: 0; height: 100dvh; background: var(--g-surface); border-right: 1px solid var(--g-line); padding: 20px 16px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
  .g-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .g-brand__mark { width: 32px; height: 32px; border-radius: var(--g-r-md); background: var(--g-brand); color: var(--g-on-brand); display: grid; place-items: center; }
  .g-nav__item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--g-r-md); color: var(--g-ink-2); font-weight: 600; width: 100%; border: 0; background: transparent; text-align: left; }
  .g-nav__item:hover { background: var(--g-surface-2); }
  .g-nav__item[aria-current="page"] { background: var(--g-brand-soft); color: var(--g-brand-ink); }
  .g-nav__item--kid { height: 44px; }
  .g-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-nav__meta { font-size: 13px; font-weight: 500; }
  .g-nav__meta--danger { color: var(--g-danger-ink); font-weight: 600; }
  .g-nav__group { margin: 18px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-muted); }
  .g-grow { flex: 1; }
  .g-side__foot { border-top: 1px solid var(--g-line); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }

  /* Mobile */
  .g-mtop, .g-bottomnav { display: none; }

  @media (max-width: 1023px) {
    .g-app { grid-template-columns: 72px minmax(0, 1fr); }
    .g-side { padding: 16px 12px; align-items: center; }
    .g-brand { padding: 0 0 16px; }
    .g-brand__text, .g-nav__label, .g-nav__meta, .g-nav__group, .g-side__foot span:not(.g-nav__badge) { display: none; }
    .g-nav__item { width: 48px; height: 48px; padding: 0; justify-content: center; position: relative; }
    .g-nav__item .g-avatar { margin: 0; }
    .g-nav__badge { position: absolute; top: 4px; right: 2px; }
    .g-page { padding: 0 24px 32px; }
    .g-page__head { padding: 24px 24px 16px; }
  }

  @media (max-width: 767px) {
    .g-app { display: block; }
    .g-side { display: none; }
    .g-main { min-height: 100dvh; padding-bottom: calc(64px + var(--g-safe-bottom)); }
    .g-mtop { display: flex; align-items: center; gap: 4px; height: calc(56px + var(--g-safe-top)); padding: var(--g-safe-top) 16px 0; position: sticky; top: 0; z-index: 20; background: var(--g-bg); }
    .g-mtop h1 { flex: 1; min-width: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .g-mtop__back { width: 44px; height: 44px; margin-left: -12px; display: grid; place-items: center; border: 0; background: transparent; color: var(--g-ink-2); }
    .g-page { padding: 0 16px 24px; gap: 12px; }
    .g-page__head { display: none; }
    .g-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(64px + var(--g-safe-bottom)); padding-bottom: var(--g-safe-bottom); background: var(--g-surface); border-top: 1px solid var(--g-line); }
    .g-bottomnav a { flex: 1; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--g-muted); position: relative; }
    .g-bottomnav a[aria-current="page"] { color: var(--g-brand-ink); font-weight: 700; }
    .g-bottomnav .g-count { position: absolute; top: 6px; left: 56%; }
  }
}