/**
 * VETA RH Design System — Layouts
 * App shell, grids, container queries, accessibility, print.
 * All values reference --v-* tokens from tokens.css.
 *
 * T3.1 App Shell | T3.2 Sidebar Responsive | T3.3 Bento Grid
 * T3.4 Stats Grid | T3.5 Grid Auto | T3.6 Container Queries
 * T3.7 Skip Link | T3.8 Print
 */

/* === T3.1 — APP SHELL === */

.v-app {
  display: grid;
  grid-template-columns: var(--v-sidebar-width) 1fr;
  grid-template-rows: var(--v-topbar-height) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
.v-sidebar {
  grid-row: 1 / -1;
  background: var(--v-bg-surface);
  border-right: 1px solid var(--v-border-subtle);
  padding: var(--v-space-4);
  overflow-y: auto;
  transition: width var(--v-duration-normal) var(--v-ease-default),
              transform var(--v-duration-normal) var(--v-ease-default);
}
.v-topbar {
  background: var(--v-bg-elevated);
  border-bottom: 1px solid var(--v-border-subtle);
  padding: 0 var(--v-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: var(--v-z-sticky);
}
.v-hamburger {
  display: none;
  background: none;
  border: none;
  padding: var(--v-space-2);
  cursor: pointer;
  color: var(--v-text-primary);
  border-radius: var(--v-radius-sm);
}
.v-hamburger svg {
  width: var(--v-space-5);
  height: var(--v-space-5);
}
.v-content {
  padding: var(--v-page-padding);
  max-width: var(--v-content-max);
  margin: 0 auto;
  width: 100%;
}

/* === T3.2 — SIDEBAR COLLAPSE RESPONSIVE === */

/* Tablet: 768-1024px — collapsed sidebar (icons only) */
@media (max-width: 1024px) {
  .v-app { grid-template-columns: var(--v-sidebar-collapsed) 1fr; }
  .v-sidebar { width: var(--v-sidebar-collapsed); padding: var(--v-space-2); overflow-x: hidden; }
}
/* Mobile: < 768px — sidebar off-canvas */
@media (max-width: 767px) {
  .v-app { grid-template-columns: 1fr; }
  .v-sidebar {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--v-sidebar-width);
    z-index: var(--v-z-modal);
    transform: translateX(-100%);
    box-shadow: none;
  }
  .v-sidebar.v-sidebar-open {
    transform: translateX(0);
    box-shadow: var(--v-shadow-xl);
  }
  .v-hamburger { display: inline-flex; }
  .v-content { padding: var(--v-space-4); }
}
/* Overlay behind sidebar on mobile */
.v-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--v-bg-overlay);
  z-index: calc(var(--v-z-modal) - 1);
}
.v-sidebar-open ~ .v-sidebar-overlay { display: block; }

/* === T3.3 — BENTO GRID (dashboard) === */

.v-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--v-card-gap);
}
.v-bento-hero  { grid-column: span 8; }
.v-bento-side  { grid-column: span 4; }
.v-bento-third { grid-column: span 4; }
.v-bento-half  { grid-column: span 6; }
.v-bento-full  { grid-column: span 12; }

@media (max-width: 1024px) {
  .v-bento-hero, .v-bento-side { grid-column: span 12; }
  .v-bento-third { grid-column: span 6; }
}
@media (max-width: 768px) {
  .v-bento-third, .v-bento-half { grid-column: span 12; }
}

/* === T3.4 — STATS GRID === */

.v-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--v-space-4);
}

/* === T3.5 — GRID AUTO-FIT === */

.v-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--v-space-6);
}

/* === T3.6 — CONTAINER QUERIES === */

.v-widget { container-type: inline-size; }

@container (max-width: 300px) {
  .v-widget__title { font-size: var(--v-text-sm); }
  .v-widget__body  { padding: var(--v-space-2); }
}
@container (min-width: 500px) {
  .v-widget__title { font-size: var(--v-text-lg); }
  .v-widget__body  { padding: var(--v-space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--v-space-4); }
}
@supports not (container-type: inline-size) {
  .v-widget__title { font-size: var(--v-fluid-base); }
  .v-widget__body  { padding: var(--v-space-4); }
}

/* === T3.7 — SKIP LINK + ACCESSIBILITY === */

.v-skip-link {
  position: absolute;
  top: -100%;
  left: var(--v-space-4);
  z-index: var(--v-z-max);
  padding: var(--v-space-2) var(--v-space-4);
  background: var(--v-accent);
  color: var(--v-text-on-accent);
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  font-weight: var(--v-weight-semibold);
  border-radius: var(--v-radius-sm);
  text-decoration: none;
  box-shadow: var(--v-shadow-lg);
  transition: top var(--v-duration-fast) var(--v-ease-default);
}
.v-skip-link:focus { top: var(--v-space-4); }
[role="main"] { outline: none; }

/* === T3.8 — PRINT STYLESHEET === */

@media print {
  .v-sidebar, .v-topbar, .v-hamburger, .v-skip-link,
  .v-sidebar-overlay, nav, .v-back-link, .v-btn { display: none !important; }
  .v-app { display: block; }
  .v-content { max-width: none; padding: 0; margin: 0; }
  .v-card { box-shadow: none; border: 1px solid var(--v-border-default); break-inside: avoid; }
  .v-bento, .v-stats-grid, .v-grid-auto { display: block; }
  .v-bento > *, .v-stats-grid > *, .v-grid-auto > * { break-inside: avoid; margin-bottom: var(--v-space-4); }
  section { break-after: auto; }
}