/* Bosh sahifa only — the layout that makes sense for the overview and nowhere
   else: hero + tiles at the very top, bento grid spans, no in-card scrolling.
   The look itself (shell, cards, charts, motion) is theme.css, shared by every
   page. */
/* the hero opens the page and already names it — the title bar only stays on
   small screens, where it carries the menu button */
@media (min-width: 1001px) { .page-home .appbar { display: none; } }

/* hero + tiles sit above the filters, flush with the top */
.page-home .home-top { padding: 12px var(--gutter) 0; max-width: 1640px; width: 100%; margin: 0 auto; }
.page-home .home-top > * + * { margin-top: 0; }
.page-home .filters { margin-top: 16px; }
.page-home .wrap.home { padding-top: 0; }
.page-home .wrap.home > .section:first-of-type { margin-top: 30px; }

/* the controls need two rows on most screens; a two-row sticky bar would sit
   over every card, so on this page the toolbar scrolls away with the hero */
.page-home .filters { position: relative; top: auto; }

.page-home .tiles {
  position: relative; z-index: 2;
  margin-top: calc(-1 * clamp(36px, 3.4vw, 44px));
  padding: 0 clamp(8px, 1.6vw, 20px);
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* 5 tiles never leave one orphan: 5 across, then 3 + 2, then 2 + 2 + 1 */
@media (max-width: 1180px) { .page-home .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ========================================================== bento grid */
.page-home .grid {
  gap: 18px; align-items: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.page-home .grid > .card { grid-column: span 6; display: flex; flex-direction: column; }
.page-home .grid > .card--wide { grid-column: 1 / -1; }
.page-home [data-card="distribution"]   { grid-column: span 7; }
.page-home [data-card="share_building"] { grid-column: span 5; }
/* the two time cards are .card--wide elsewhere; here they sit side by side */
.page-home .grid > [data-card="by_day_count"].card--wide,
.page-home .grid > [data-card="by_day_avg"].card--wide { grid-column: span 6; }
.page-home [data-card="by_building"],
.page-home [data-card="by_pair"],
.page-home [data-card="by_criterion"]   { grid-column: span 4; }
.page-home [data-card="by_department"]  { grid-column: span 5; }
.page-home [data-card="teachers"]       { grid-column: span 7; }
.page-home .grid--tables > .card        { grid-column: span 4; }
@media (max-width: 1180px) {
  .page-home .grid > .card, .page-home .grid > [data-card] { grid-column: span 6; }
  .page-home .grid > [data-card="by_day_count"].card--wide, .page-home .grid > [data-card="by_day_avg"].card--wide,
  .page-home .grid > [data-card="teachers"], .page-home .grid--tables > [data-card="by_subject"] { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-home .grid > .card, .page-home .grid > [data-card] { grid-column: 1 / -1; }
}


/* ------------------------------------------------- no scrolling inside cards */
/* every card shows all of its content: charts are drawn to the card's width,
   tables wrap their text, the recent list grows to its full length */
.page-home .card__body,
.page-home [data-card="recent"] .card__body { overflow: visible; max-height: none; padding-right: 0; }
.page-home .card__body table { table-layout: auto; }
.page-home .card__body td, .page-home .card__body th { white-space: normal; overflow-wrap: break-word; }
.page-home .card__body td.num, .page-home .card__body th.num { white-space: nowrap; overflow-wrap: normal; }
.page-home .card__body svg { max-width: 100%; height: auto; }
.page-home .card__body td.wrap-cell { min-width: 0; }
.page-home .card__body th, .page-home .card__body td { padding-left: 8px; padding-right: 8px; }
.page-home .card__body th:first-child, .page-home .card__body td:first-child { padding-left: 4px; }

.page-home .card__note { padding-left: 45px; }

@media (max-width: 640px) { .page-home .tiles { padding: 0 6px; } }

@media (max-width: 640px) { .page-home .card__note { padding-left: 0; } }