@media screen {
  .content-area { --dashboard-gap: clamp(.875rem, 1.4vw, 1.25rem); }
  /* Flow spacing for independent panels. Cards inside grids use the grid gap. */
  :is(.content-area, .record-updates, .school-data, .sf10-repository-page) > :where(.panel, .dashboard-grid, .dashboard-summary-grid, .sdms-category-data) {
    margin-block-end: var(--dashboard-gap);
  }
  .dashboard-layout .dashboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dashboard-gap);
    padding: 0;
    margin: 0 0 var(--dashboard-gap);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .dashboard-layout .dashboard-heading-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .875rem;
    align-items: start;
    flex: 1 1 22rem;
    min-inline-size: 0;
  }
  .dashboard-layout .dashboard-heading-copy > div { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-body .content-area.dashboard-layout .dashboard-header h1 {
    font-size: clamp(1.25rem, 1rem + 1.15vw, 1.8rem);
    line-height: 1.2;
    margin: .12em 0 .2em;
  }
  .dashboard-layout .dashboard-header p { margin: 0; }
  .dashboard-layout .dashboard-header .eyebrow { color: #326481 !important; }
  .dashboard-layout .dashboard-header .role-badge { color: #234f69; border-color: #d4e3ef; }
  .dashboard-layout .dashboard-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #e7f2fc;
  }
  .dashboard-layout .dashboard-icon img { display: block; inline-size: 1.25rem; block-size: 1.25rem; object-fit: contain; }
  .dashboard-layout .dashboard-heading-copy > .dashboard-icon { inline-size: 2.875rem; block-size: 2.875rem; }
  .dashboard-layout .dashboard-heading-copy > .dashboard-icon img { inline-size: 1.5rem; block-size: 1.5rem; }
  .dashboard-layout :is(.metric-grid, .dashboard-action-grid, .class-card-grid, .workspace-home-grid, .assessment-grid, .sdms-category-grid, .current-class-grid, .archive-metrics) {
    container: dashboard-cards / inline-size;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--dashboard-gap);
    margin-bottom: var(--dashboard-gap);
    > * {
      --card-columns: 1;
      flex: 0 0 calc((100% - (var(--card-columns) - 1) * var(--dashboard-gap)) / var(--card-columns));
      min-inline-size: 0;
    }
  }
  .dashboard-layout :is(.workspace-home-grid, .metric-grid) { max-inline-size: none; }
  .dashboard-layout .workspace-home-card { border: 1px solid #dce8ef; background-color: #fff; overflow-wrap: anywhere; }
  .dashboard-layout .workspace-home-card:is(:hover, :focus-visible) { background-color: #f7fbfe; }
  @container dashboard-cards (min-width: 18rem) {
    .dashboard-layout .workspace-home-grid > * { --card-columns: 2; }
  }
  @container dashboard-cards (min-width: 28rem) {
    .dashboard-layout :is(.metric-grid, .archive-metrics) > * { --card-columns: 2; }
  }
  @container dashboard-cards (min-width: 34rem) {
    .dashboard-layout :is(.dashboard-action-grid, .class-card-grid, .assessment-grid, .sdms-category-grid, .current-class-grid) > * { --card-columns: 2; }
  }
  @container dashboard-cards (min-width: 41rem) {
    .dashboard-layout .workspace-home-grid > * { --card-columns: 3; }
  }
  @container dashboard-cards (min-width: 43rem) {
    .dashboard-layout :is(.metric-grid, .archive-metrics) > * { --card-columns: 3; }
  }
  @container dashboard-cards (min-width: 54rem) {
    .dashboard-layout :is(.dashboard-action-grid, .class-card-grid, .assessment-grid, .sdms-category-grid, .current-class-grid) > * { --card-columns: 3; }
  }
  @container dashboard-cards (min-width: 59rem) {
    .dashboard-layout :is(.metric-grid, .workspace-home-grid, .archive-metrics) > * { --card-columns: 4; }
  }
  @container dashboard-cards (min-width: 66rem) {
    .dashboard-layout :is(.dashboard-action-grid, .class-card-grid, .assessment-grid, .sdms-category-grid, .current-class-grid) > * { --card-columns: 4; }
  }
  .dashboard-layout :is(.assessment-grid, .class-card-grid, .current-class-grid) > :is(.empty-state, .empty-inline) { flex-basis: 100%; }
  .dashboard-layout .current-class-grid { margin-bottom: 0; }
  .dashboard-layout .metric-card { min-inline-size: 0; padding: .875rem; }
  .dashboard-layout .metric-card > div:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
  .dashboard-layout .metric-icon { flex-shrink: 0; }
  .dashboard-layout .dashboard-action-card:has(> .dashboard-icon) {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 1rem;
  }
  .dashboard-layout .dashboard-action-card:has(> .dashboard-icon)::before { display: none; }
  .dashboard-layout .dashboard-action-copy { display: block; min-inline-size: 0; overflow-wrap: anywhere; }
  .dashboard-layout :is(.dashboard-action-card, .workspace-home-card, .module-tabs a):focus-visible {
    outline: 2px solid #1465a1;
    outline-offset: 3px;
  }
  .dashboard-layout :is(.dashboard-header, .panel-heading) > :is(.sf10-actions, .assessment-actions, .workspace-actions, .adm-board-controls) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
  }
  .dashboard-layout .module-tabs a { display: inline-flex; align-items: center; gap: .4rem; }
  .dashboard-layout .module-tabs .dashboard-icon { background: transparent; inline-size: 1.125rem; block-size: 1.125rem; }
  .dashboard-layout .module-tabs .dashboard-icon img { inline-size: 100%; block-size: 100%; }
  .dashboard-layout .adm-board-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
  .dashboard-layout .adm-board-legend span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
  .dashboard-layout .adm-board-legend i { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: #217da8; }
  .dashboard-layout .adm-board-legend .adm-legend-idle { background: #64748b; }
  .dashboard-layout .archive-metric { display: flex; align-items: start; gap: .75rem; }
  .dashboard-layout .archive-metric > div { display: grid; gap: .2rem; }
  .content-area .workspace-filter { margin-block: 0 var(--dashboard-gap); }
  .content-area .workspace-filter.personnel-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
  .content-area .workspace-filter .filter-actions { flex-wrap: wrap; }
  .content-area .dashboard-learner-search { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
  .content-area .dashboard-learner-search label { flex: 0 1 30rem; min-inline-size: 0; }
  .content-area .dashboard-learner-search input { display: block; width: 100%; margin-top: .3rem; }
  .content-area .workspace-filter.header-search {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .content-area .workspace-filter.header-search input {
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }
  .content-area .workspace-filter.header-search input:focus-visible { outline: 2px solid #1465a1; outline-offset: 2px; }
  .dashboard-layout .adm-schedule-field { display: grid; gap: .3rem; }
  .dashboard-layout .adm-schedule-field :is(input, textarea, select) { inline-size: 100%; }
  .dashboard-layout .adm-schedule-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
  .dashboard-layout .adm-schedule-filter select { flex: 1 1 15rem; min-inline-size: 0; }
  .dashboard-layout .adm-schedule-details {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin: 1rem 0 0;
  }
  .dashboard-layout .adm-schedule-details dt { color: #4c6478; font-size: .8rem; font-weight: 650; }
  .dashboard-layout .adm-schedule-details dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
  .dashboard-layout .adm-schedule-details > div:last-child { flex: 1 1 14rem; min-inline-size: 0; }
  .dashboard-layout .adm-emergency-detail { min-inline-size: 10rem; overflow-wrap: anywhere; }
  .dashboard-layout :is(.adm-schedule-actions, .adm-schedule-pagination) { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
  .dashboard-layout .adm-schedule-pagination { justify-content: center; margin-top: .875rem; }
  .dashboard-layout .adm-accent-blue { --adm-accent-color: #229fe2; --adm-pastel: #e9f4ff; }
  .dashboard-layout .adm-accent-purple { --adm-accent-color: #9b5ff4; --adm-pastel: #f2edff; }
  .dashboard-layout .adm-accent-amber { --adm-accent-color: #eeac31; --adm-pastel: #fff1e3; }
  .dashboard-layout .adm-accent-teal { --adm-accent-color: #16b695; --adm-pastel: #e6f6ed; }
  .dashboard-layout .adm-tracker-overview { margin: 0 0 var(--dashboard-gap); }
  .dashboard-layout .adm-tracker-intro { margin-bottom: .65rem; }
  .dashboard-layout .adm-tracker-intro h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
  .dashboard-layout .adm-tracker-intro p,
  .dashboard-layout .adm-tracker-card p { margin: 0; color: #4c6478; font-size: .84rem; }
  .dashboard-layout .adm-tracker-rail,
  .dashboard-layout .adm-tracker-details { display: grid; align-content: start; gap: var(--dashboard-gap); min-width: 0; }
  .dashboard-layout .adm-tracker-rail .adm-tracker-card { background: var(--adm-pastel, #e9f4ff); }
  .dashboard-layout .adm-tracker-card { display: grid; align-content: start; gap: .65rem; min-inline-size: 0; margin: 0; }
  .dashboard-layout .adm-tracker-card header { display: flex; align-items: center; gap: .65rem; }
  .dashboard-layout .adm-tracker-card h3 { margin: 0; font-size: 1rem; }
  .dashboard-layout .adm-tracker-card .btn { justify-self: start; }
  .dashboard-layout .adm-tracker-count { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .dashboard-layout .adm-tracker-breakdown,
  .dashboard-layout .adm-tracker-reasons { display: grid; gap: .25rem; margin: 0; padding: 0; }
  .dashboard-layout .adm-tracker-breakdown > div {
    display: flex; align-items: baseline; justify-content: space-between; gap: .65rem;
    padding: .35rem 0; border-bottom: 1px solid #e2ebf2; font-size: .88rem;
  }
  .dashboard-layout .adm-tracker-breakdown dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
  .dashboard-layout .adm-tracker-reasons { list-style: none; }
  .dashboard-layout .adm-tracker-reasons li + li { padding-top: .35rem; border-top: 1px solid #e2ebf2; }
  .dashboard-layout .adm-tracker-reasons p { color: var(--ink); overflow-wrap: anywhere; }
  .dashboard-layout .adm-tracker-reasons small { color: #4c6478; }
  .dashboard-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(23rem, (100% - var(--dashboard-gap)) / 2)), 1fr));
    gap: var(--dashboard-gap);
    margin-bottom: var(--dashboard-gap);
  }
  .dashboard-chart {
    min-inline-size: 0;
    margin: 0 0 var(--dashboard-gap);
    padding: clamp(.875rem, 1.6vw, 1.25rem);
    border: 1px solid #d7e5ef;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
  }
  .dashboard-chart-grid > .dashboard-chart { margin: 0; }
  .dashboard-chart figcaption { font-size: 1rem; font-weight: 750; margin-bottom: .85rem; }
  .dashboard-chart-note { margin: .65rem 0 0; color: #4c6478; font-size: .8rem; }
  .dashboard-bars, .dashboard-donut-key { list-style: none; margin: 0; padding: 0; }
  .dashboard-bars { display: grid; gap: .65rem; }
  .dashboard-bars li { min-inline-size: 0; font-size: .85rem; }
  .dashboard-bar-label { overflow-wrap: anywhere; }
  .dashboard-bars--horizontal li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; }
  .dashboard-bars--horizontal .dashboard-bar-track { grid-row: 2; grid-column: 1 / -1; block-size: .65rem; }
  .dashboard-bar-track { display: flex; border-radius: 4px; background: #eaf1f7; }
  .dashboard-bar-fill { display: block; inline-size: var(--bar-size); min-inline-size: 1px; border-radius: inherit; background: #216da8; }
  .dashboard-bars--vertical {
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.2rem, 1fr);
    overflow-x: auto;
    padding-bottom: .35rem;
    overscroll-behavior-inline: contain;
  }
  .dashboard-bars--vertical:focus-visible { outline: 2px solid #1465a1; outline-offset: 2px; }
  .dashboard-bars--vertical li { display: grid; grid-template-rows: auto 7rem 1fr; justify-items: center; gap: .4rem; text-align: center; }
  .dashboard-bars--vertical .dashboard-bar-track { grid-row: 2; inline-size: min(70%, 2.5rem); block-size: 100%; align-items: end; }
  .dashboard-bars--vertical .dashboard-bar-label { grid-row: 3; }
  .dashboard-bars--vertical strong { grid-row: 1; }
  .dashboard-bars--vertical .dashboard-bar-fill { inline-size: 100%; block-size: var(--bar-size); min-block-size: 1px; }
  .dashboard-donut-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
  .dashboard-donut {
    display: grid;
    place-items: center;
    inline-size: 7rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#216da8 var(--share), #8c9baa var(--share));
  }
  .dashboard-donut > span {
    display: grid;
    place-content: center;
    text-align: center;
    inline-size: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
  }
  .dashboard-donut small { color: #4c6478; }
  .dashboard-donut-key { flex: 1 1 10rem; display: grid; gap: .45rem; }
  .dashboard-donut-key li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45rem; font-size: .85rem; }
  .dashboard-donut-key li::before { content: ""; inline-size: .65rem; block-size: .65rem; border-radius: 50%; background: #216da8; }
  .dashboard-donut-key li:nth-child(2)::before { background: #8c9baa; }
  @media (max-width: 520px) {
    .dashboard-layout .dashboard-heading-copy { gap: .625rem; flex-basis: 100%; }
    .dashboard-layout .dashboard-heading-copy > .dashboard-icon { inline-size: 2.25rem; block-size: 2.25rem; }
    .dashboard-layout .dashboard-heading-copy > .dashboard-icon img { inline-size: 1.125rem; block-size: 1.125rem; }
    .dashboard-layout .dashboard-header > .role-badge { white-space: normal; }
    .dashboard-layout .adm-board-toolbar { align-items: flex-start; }
  }
}
@media print {
  .dashboard-icon, .dashboard-bar-track, .dashboard-donut { display: none; }
}