/* AppShell et conteneurs */

.k-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
}

.k-topbar {
  grid-column: 1 / -1;
  background: var(--color-surface);
  border-bottom: var(--border-1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  position: sticky;
  top: 0;
  z-index: 10;
}
.k-topbar__brand {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--fs-18);
  letter-spacing: -0.01em;
}
.k-topbar__tenant {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  border-left: var(--border-1);
  padding-left: var(--space-3);
}
.k-topbar__env {
  font-size: var(--fs-11);
  font-weight: 500;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.k-topbar__spacer { flex: 1; }
.k-topbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-12);
  color: var(--color-text-muted);
}
.k-topbar__avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--fs-12);
}

.k-nav {
  background: var(--color-surface);
  border-right: var(--border-1);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-nav__group { margin-top: var(--space-3); padding: 0 var(--space-3) 4px; font-size: var(--fs-11); font-weight: 600; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.k-nav__group:first-child { margin-top: 0; }
.k-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.k-nav__item:hover { background: var(--color-surface-alt); color: var(--color-text); }
.k-nav__item.is-active { background: var(--color-primary-soft); color: var(--color-primary-active); font-weight: 500; }
.k-nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }

.k-content {
  padding: var(--space-6);
  min-width: 0;
}

.k-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.k-page-head__title { letter-spacing: -0.01em; }
.k-page-head__subtitle { color: var(--color-text-muted); }
.k-page-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.k-breadcrumb { display: flex; gap: var(--space-2); font-size: var(--fs-12); color: var(--color-text-muted); }
.k-breadcrumb__sep { color: var(--color-text-soft); }
.k-breadcrumb__current { color: var(--color-text); font-weight: 500; }

.k-section { margin-bottom: var(--space-8); }
.k-section__title { margin-bottom: var(--space-4); font-size: var(--fs-20); }
.k-section__sub { color: var(--color-text-muted); margin-top: -8px; margin-bottom: var(--space-4); }

.k-grid { display: grid; gap: var(--space-4); }
.k-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .k-grid--4, .k-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .k-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .k-grid--2, .k-grid--3, .k-grid--4, .k-grid--6 { grid-template-columns: 1fr; }
  .k-app { grid-template-columns: 1fr; grid-template-rows: 56px auto 1fr; }
  .k-nav { display: none; }
}

.k-card {
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.k-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-3);
}
.k-card__title { font-size: var(--fs-16); font-weight: 600; }
.k-card__hint { font-size: var(--fs-12); color: var(--color-text-soft); }

.k-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.k-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.k-divider { height: 1px; background: var(--color-border); margin: var(--space-5) 0; }

.k-subnav {
  display: flex; gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: var(--border-1);
}
.k-subnav__item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.k-subnav__item:hover { color: var(--color-text); text-decoration: none; }
.k-subnav__item.is-active { color: var(--color-primary-active); border-bottom-color: var(--color-primary); font-weight: 500; }