/* One content inset shared by all dashboard routes. Page wrappers add no second inset. */
.app-shell { --av-content-inset: 8px; --av-content-gap: 16px; --av-surface: #232429; --av-recess: #0b0c0f; }
.app-shell > .workspace > .main-frame > .main-content {
  padding: var(--av-content-inset);
  background: #050506;
  scroll-padding-block: var(--av-content-inset);
}
.app-shell .main-content #page-content { width: 100%; min-width: 0; margin: 0; }
/* The sticky forum filter remains readable while topics pass behind it. */
.app-shell .main-content .forum-board.forum-board-controls {
  background: #232429;
}
/* Cover the scrollport's outer inset and the two rounded corner cutouts. */
.app-shell .main-content .forum-board.forum-board-controls::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--av-content-inset));
  left: calc(-1 * var(--av-content-inset));
  right: calc(-1 * var(--av-content-inset));
  height: var(--av-content-inset);
  background: #050506;
  pointer-events: none;
}
.app-shell .main-content .forum-board.forum-board-controls::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  background:
    radial-gradient(circle at right bottom, transparent 11.5px, #050506 12px) left top / 12px 12px no-repeat,
    radial-gradient(circle at left bottom, transparent 11.5px, #050506 12px) right top / 12px 12px no-repeat;
  pointer-events: none;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-shell .main-content .forum-board.forum-board-controls {
    background: rgba(35, 36, 41, .82);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .app-shell .main-content .forum-board.forum-board-controls {
    background: #232429;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media print {
  .app-shell .main-content .forum-board.forum-board-controls {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .app-shell .main-content .forum-board.forum-board-controls::before,
  .app-shell .main-content .forum-board.forum-board-controls::after { display: none; }
}
.app-shell .main-content :is(.fll-community, .fll-analytics, .fll-lab-overview, .fll-impact-screen, .fll-ratings) {
  max-width: none; margin-inline: 0; padding: 0; background: transparent; border: 0; box-shadow: none;
}
.app-shell .main-content .fll-lab-overview-pane { padding: 0; }
.app-shell .main-content :is(.panel, .activity-card, .resource-card, .kpi, .card, .metric-card, .widget,
  .pdi-workspace-card, .fll-analytics-card, .fll-analytics-metric, .fll-analytics-head,
  .fll-ratings-card, .fll-ratings-summary, .fll-impact-map, .fll-recent-access, .fll-support-card) {
  background-color: var(--av-surface);
}
/* Content panels float directly in the black separating space. */
.app-shell .main-content :is(.marketing-page, .finance-content, .team-planner) {
  border: 0; box-shadow: none;
}
.app-shell .main-content .marketing-card {
  background-color: var(--av-surface);
  border-color: transparent;
  box-shadow: 0 7px 22px #0003;
}
.app-shell .main-content .marketing-card:hover { border-color: transparent; }
.app-shell .main-content .marketing-card:focus-visible { outline: 3px solid var(--yellow, #ffe326); outline-offset: 3px; }
.app-shell .main-content :is(.marketing-card-body, .marketing-card-content, .marketing-card-foot) { background: transparent; }
.app-shell .main-content :is(.fll-analytics-grid, .fll-analytics-metrics, .pdi-workspace-grid) { gap: var(--av-content-gap); }
.app-shell .main-content :is(.page-heading, .marketing-heading, .finance-page-heading) { margin-top: 0; }
/* Search has one magnifier while open; Escape and Close restore the launcher. */
.app-shell .app-topbar .unified-search.is-open > [data-search-toggle] { display: none; }
/* Evolution is a dialog, with a dark chart area and legible glass cards. */
.pdi-evolution-dialog { width: min(1200px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.pdi-evolution-dialog .student-pdi-history { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.pdi-evolution-dialog .student-pdi-trends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pdi-evolution-dialog .student-pdi-trend { min-width: 0; padding: 16px; background: #101115; border: 1px solid #ffffff16; border-radius: 14px; }
.pdi-evolution-dialog .student-pdi-trend svg { display: block; width: 100%; height: auto; max-height: 190px; }
.pdi-evolution-dialog .student-pdi-history-head { flex-wrap: wrap; gap: 12px; padding: 0 0 16px; background: transparent; }
@media (max-width: 900px) { .pdi-evolution-dialog .student-pdi-trends { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .app-shell { --av-content-inset: 6px; --av-content-gap: 14px; }
  .app-shell > .workspace > .main-frame > .main-content { padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
  .pdi-evolution-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .pdi-evolution-dialog .student-pdi-trends { grid-template-columns: minmax(0, 1fr); }
}
html.av-phone-layout .app-shell { --av-content-inset: 6px; --av-content-gap: 14px; }
html.av-phone-layout .app-shell > .workspace > .main-frame > .main-content { padding: var(--av-content-inset) var(--av-content-inset) max(20px, env(safe-area-inset-bottom, 0px)); }

/* Calendar: the outer surface and content cards are grey; the day grid is black. */
.app-shell:is([data-dashboard-page="team-calendar"], [data-dashboard-page="personal-calendar"]) .main-content {
  background-color: #24262b;
  background-image: none;
}

.app-shell .team-planner {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.app-shell .team-planner :is(.team-planner-scroll, .team-planner-grid, .team-planner-weekday, .team-planner-day, .team-planner-day.outside-month) {
  background: #08090b;
}

.app-shell .team-planner :is(.team-planner-scroll, .team-planner-day, .team-planner-weekday) {
  border-color: #35373d;
}

.app-shell .team-planner :is(.team-planner-event, .team-planner-activity-group, .team-planner-holiday, .team-planner-birthday) {
  background-color: #2c2e34;
  background-image: none;
  color: #f5f5f7;
}

/* Keep the existing area stripes and meeting/holiday/birthday border colours. */
.app-shell .team-planner .team-planner-event.is-meeting .team-planner-event-type {
  color: #ffc36e;
}

.app-shell .team-planner .team-planner-day.outside-month time {
  color: #999ca7;
}

.app-shell .team-planner .team-planner-activity-group .team-planner-group-row {
  background-color: transparent;
}

.app-shell .team-planner .team-planner-activity-group .team-planner-group-row:hover {
  background-color: #393c43;
}

.app-shell .team-planner-grid[aria-busy="true"] {
  opacity: .7;
  cursor: progress;
}

@media print {
  .app-shell:is([data-dashboard-page="team-calendar"], [data-dashboard-page="personal-calendar"]) .main-content,
  .app-shell .team-planner :is(.team-planner-scroll, .team-planner-grid, .team-planner-weekday, .team-planner-day, .team-planner-event, .team-planner-activity-group, .team-planner-holiday, .team-planner-birthday) {
    background: #fff !important;
    color: #111 !important;
  }
}

@media print {
  .app-shell > .workspace > .main-frame > .main-content,
  .app-shell .main-content :is(.panel,.card,.activity-card,.resource-card,.marketing-card,.pdi-workspace-card,.fll-analytics-card,.fll-analytics-metric) {
    background: #fff !important; color: #111 !important; box-shadow: none !important;
  }
}

/* Secondary metrics inherit the dark dashboard surface, not paper defaults. */
.app-shell .first-award-metric,
.app-shell .first-event-opr{background:var(--av-surface);color:#f5f7fb;border-color:rgba(255,255,255,.12)}
.app-shell .first-award-metric :is(strong,small,span),
.app-shell .first-event-opr :is(dt,dd){color:inherit}
.app-shell .workshop-state:not(.state-ready):not(.state-rejected):not(.state-producing){background:#303239;color:#f5f7fb}

/* Explicit menu navigation; never applied to polling or form submissions. */
@keyframes av-navigation-enter{from{opacity:0}to{opacity:1}}
.av-navigation-enter{animation:av-navigation-enter 160ms ease-out both}
@media(prefers-reduced-motion:reduce){.av-navigation-enter{animation:none}}
@media print{.av-navigation-enter{animation:none}}

@media print{
  .app-shell .first-award-metric,.app-shell .first-event-opr,
  .app-shell .workshop-state:not(.state-ready):not(.state-rejected):not(.state-producing){background:#fff;color:#111;border-color:#777}
}

/* Forum list: use the content inset once above the sticky filters. */
.app-shell > .workspace > .main-frame:has(.forum-board-controls){padding-top:0}