/* The panel's own stylesheet. The look is PanelTheme's; what is here lays out
   the panel's own elements, and reaches a MudBlazor component only through a
   class it was handed by its Class or ActiveClass parameter -- never through
   a .mud-* selector, whose markup MudBlazor owns and changes between majors. */

:root {
  /* The two amber roles MudBlazor's palette has no slot for: a chosen row's
     ground and ink. Alexandros.App's Themes/Light.xaml values. */
  --panel-amber-tint: #FFE2B3;
  --panel-amber-ink: #783F01;
}

/* Figures line up down every column. */
body {
  font-variant-numeric: tabular-nums;
}

/* Routes' FocusOnNavigate moves focus to a page's h1 after each navigation,
   for a screen reader; the focus is not the keyboard's, so it draws no ring. */
h1:focus {
  outline: none;
}

/* The window's own bar and the pane beside the page, each parted from what
   it borders by a hairline rather than a shadow. */
.app-bar {
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

.nav-pane {
  border-right: 1px solid var(--mud-palette-lines-default);
}

/* The page in view: MudNavLink's ActiveClass, so MudBlazor's own active
   look (which is Primary, the focus blue) never applies. */
.nav-chosen {
  background-color: var(--panel-amber-tint);
  color: var(--panel-amber-ink);
  font-weight: 600;
}

/* The page is one viewport tall and scrolls inside itself, so a report can
   give its grid or list the height left under its header and toolbar
   instead of guessing at that height. */
.page {
  box-sizing: border-box;
  height: calc(100vh - var(--mud-appbar-height));
  height: calc(100dvh - var(--mud-appbar-height));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

/* A report's two rows (DatePickingLayout): its title on the left and the
   figures it is about on the right, then its toolbar, the parts 12 apart.
   Both wrap on a narrow screen. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 28px;
}

.page-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 28px;
}

.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* MudBlazor's pickers and selects grow to fill a flex row; a toolbar's parts
   keep the widths they were given and sit 12 apart instead, and on a phone
   narrower than a part they shrink to the page rather than scroll it sideways. */
.page-toolbar > * {
  flex: 0 0 auto;
  max-width: 100%;
}

/* The header of a figure column in a MudDataGrid (its HeaderClass). The
   grid lays a header's title and sort button out as a flex row, which
   text-align does not move, so the title would stop short of the figures
   under it by the button's width. Right to left, the row puts the title
   flush right over them and the sort button to its left, as Material sets a
   numeric column. */
.figure-head {
  direction: rtl;
}

/* A select's floating panel (its PopoverClass): with no shadow, the heavier
   Edge is what parts it from the card it opens over. */
.panel-popover {
  border: 1px solid var(--mud-palette-lines-inputs);
}

/* The grid or list that takes the rest of the page's height, which it
   needs as a definite height to virtualize. Never shorter than a screenful
   of rows: on a short screen the page scrolls instead. */
.page-fill {
  flex: 1 1 0;
  min-height: 360px;
}

/* A list that takes .page-fill's height scrolls inside it. */
.page-list {
  overflow-y: auto;
}

/* A shift's card (Shifts): who and when on the left, its breakdown beside
   it, under it on a narrow screen. An open shift is pending, so its card
   takes the amber edge and its "still open" the amber ink. */
.shift-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 28px;
}

.shift-card-meta {
  flex: 0 0 11rem;
}

.shift-card-table {
  flex: 1 1 30rem;
  min-width: 0;
}

.shift-card-open {
  border-color: var(--mud-palette-secondary);
}

.shift-open {
  color: var(--panel-amber-ink);
  font-weight: 600;
}

/* A breakdown's card (Insights): its chart over time and its ranking side by
   side, the ranking under it on a narrow screen. min-width lets a chart
   shrink with its card rather than hold the width it was first drawn at. */
.insights-charts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.insights-timeline {
  flex: 3 1 32rem;
  min-width: 0;
}

.insights-ranking {
  flex: 1 1 18rem;
  min-width: 0;
}

/* The key's colour beside its name in a breakdown's table: the series it is
   drawn in, so the table also reads as the charts' legend. */
.series-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
}

@media (max-width: 599.98px) {
  .page {
    padding: 16px;
  }

  /* iOS Safari zooms the page into any field whose text is under 16px when
     it is tapped. MudBlazor sets a field's text in Subtitle1 (PanelTheme),
     so its size variable is the one to raise; html:root outranks the :root
     block MudThemeProvider writes after this sheet. */
  html:root {
    --mud-typography-subtitle1-size: 1rem;
  }
}