/* ======================================================================
   AESTHETIC INTEL — UI STABILITY / RECOVERY LAYER
   ----------------------------------------------------------------------
   Purpose:
   - keep the desktop app shell on a predictable 86px icon rail;
   - allow the sidebar to expand over content without moving the grid;
   - prevent main content/cards/grids from forcing horizontal drift;
   - preserve the existing mobile drawer behaviour;
   - provide one small, last-loaded layout authority after app.css/ui-v2.css.

   IMPORTANT:
   This file intentionally contains layout/sizing safety rules only.
   It does not alter API logic, dashboard calculations, colors for individual
   features, forms, permissions, routes, or database behaviour.
   ====================================================================== */

:root {
  --ai-stable-sidebar-collapsed: 86px;
  --ai-stable-sidebar-expanded: 260px;
  --ai-stable-shell-max: 1680px;
  --ai-stable-shell-gap: 18px;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

/* Never allow a grid/flex child to widen the whole application. */
.app-shell,
.main-content,
.app-content,
.main-content > *,
.app-content > *,
.panel,
.card,
.content-card,
.form-card,
.form-panel,
.table-wrap,
.responsive-table,
.ai-focus-page-head,
.ai-live-page-head,
.ai-live-head-actions,
.ai-live-period-filter {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Long labels/values should wrap inside their own card rather than stretching
   an entire dashboard row. */
.main-content p,
.main-content small,
.main-content td,
.main-content th,
.main-content strong,
.main-content span,
.app-content p,
.app-content small,
.app-content td,
.app-content th,
.app-content strong,
.app-content span {
  overflow-wrap: anywhere;
}

/* Tables retain their data; only the table wrapper scrolls when needed. */
.table-wrap,
.responsive-table,
.ai-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table,
.responsive-table table,
.ai-table-wrap table {
  width: 100%;
}

/* ======================================================================
   Desktop shell
   ====================================================================== */
@media (min-width: 1041px) {
  .app-body {
    padding: var(--ai-stable-shell-gap) !important;
  }

  .app-shell {
    width: min(100%, var(--ai-stable-shell-max)) !important;
    min-height: calc(100vh - (var(--ai-stable-shell-gap) * 2)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: var(--ai-stable-sidebar-collapsed) minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  /* The grid track remains 86px. The sidebar itself may expand to 260px and
     overlays the beginning of the content, so nothing jumps horizontally. */
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    width: var(--ai-stable-sidebar-collapsed) !important;
    min-width: var(--ai-stable-sidebar-collapsed) !important;
    max-width: var(--ai-stable-sidebar-expanded) !important;
    height: calc(100vh - (var(--ai-stable-shell-gap) * 2)) !important;
    max-height: none !important;
    align-self: start !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 120 !important;
  }

  .sidebar:hover,
  .sidebar:focus-within {
    width: var(--ai-stable-sidebar-expanded) !important;
    min-width: var(--ai-stable-sidebar-expanded) !important;
  }

  .main-content,
  .app-content {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Keep wide page headings inside the content column. */
  .page-head,
  .page-heading,
  .report-toolbar,
  .ai-focus-page-head,
  .ai-live-page-head {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .page-head > *,
  .page-heading > *,
  .report-toolbar > *,
  .ai-focus-page-head > *,
  .ai-live-page-head > * {
    min-width: 0;
  }

  /* The period selector is allowed to shrink instead of forcing the header
     wider than the page. */
  .ai-live-head-actions {
    max-width: min(100%, 720px) !important;
  }

  .ai-live-period-filter {
    width: min(100%, 430px);
    min-width: 300px;
  }
}

/* ======================================================================
   Tablet / mobile shell
   ====================================================================== */
@media (max-width: 1040px) {
  .app-body {
    padding: 0 !important;
  }

  .app-shell {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .main-content,
  .app-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 88px 20px 72px !important;
    border-radius: 0 !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(326px, 88vw) !important;
    min-width: 0 !important;
    max-width: min(326px, 88vw) !important;
    height: 100vh !important;
    max-height: none !important;
    transform: translateX(-104%) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 120 !important;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .sidebar-scrim {
    z-index: 110 !important;
  }

  .mobile-app-bar {
    z-index: 100 !important;
  }

  /* On mobile there is no collapsed icon rail: labels must always be visible. */
  .sidebar .brand-copy,
  .sidebar .sidebar-user-copy,
  .sidebar .nav-section-label,
  .sidebar .nav-link > .nav-text,
  .sidebar .nav-group-title > .nav-text {
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .sidebar .nav-link,
  .sidebar .nav-group,
  .sidebar .nav-group-title {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ai-focus-page-head,
  .ai-live-page-head,
  .page-head,
  .page-heading,
  .report-toolbar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .ai-focus-head-actions,
  .ai-live-head-actions {
    width: 100%;
    max-width: 100%;
  }

  .ai-live-period-filter {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 680px) {
  .main-content,
  .app-content {
    padding: 82px 14px 68px !important;
  }

  .page-head,
  .page-heading,
  .report-toolbar,
  .ai-focus-page-head,
  .ai-live-page-head {
    gap: 14px !important;
  }

  .page-head > .btn,
  .page-heading > .btn,
  .ai-focus-head-actions > .btn,
  .ai-live-head-actions > .btn {
    max-width: 100%;
  }
}

/* ======================================================================
   Reduced motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar *,
  .app-shell,
  .main-content,
  .app-content {
    transition-duration: .01ms !important;
  }
}