/* Management view (P6-02). Loaded after /styles.css and built on its colour variables. */

.management-content { width: 100%; min-width: 0; max-width: 78rem; }
.management-heading h1 { margin: 0 0 .35rem; }
.management-heading p { margin: .25rem 0 0; }
.management-content .eyebrow { margin: 0; color: var(--accent); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.management-content h2 { margin: 0; font-size: 1.25rem; }
.management-content h3 { margin: 0; font-size: 1rem; }
.management-content section { margin-top: 2rem; }
.management-content .heading-with-info h1,
.management-content .heading-with-info h2,
.management-content .heading-with-info h3 { margin: 0; }
.section-note { margin: .25rem 0 .75rem; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* What to show: the days and the department. */
.management-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: flex-end;
  margin: 1.25rem 0 .75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--panel);
}
.management-controls .field { min-width: 11rem; }
.management-controls .field-label { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; }
.management-controls label { margin: 0; }
.management-controls select,
.management-controls input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: .55rem .65rem;
  border: 1px solid #aeb8c3;
  border-radius: .4rem;
  background: #fff;
  color: inherit;
  font: inherit;
}
.management-controls .field > label { margin-bottom: .25rem; }
.management-controls .field.action { min-width: 0; }
.custom-dates { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.custom-dates .field { min-width: 10rem; }
select:focus-visible,
.table-scroll:focus-visible { outline: 3px solid #e0a62b; outline-offset: 3px; }
#management-status { min-height: 1.5rem; margin: .25rem 0 0; }
#management-body.is-loading { opacity: .6; }
#management-body:focus { outline: none; }

/* Needs attention: big numbers, flagged in words as well as colour. */
.tile-grid { display: grid; gap: 1rem; margin: .5rem 0 0; }
.tile-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-tile {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: .4rem solid var(--line);
  border-radius: .75rem;
  background: var(--panel);
}
.metric-tile.attention { border-color: var(--danger-line); border-left-color: var(--danger); background: var(--danger-bg); }
.metric-value { margin: .4rem 0 .1rem; font-size: 2.5rem; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric-value a { color: inherit; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: .1em; }
.metric-note { margin: 0; color: var(--muted); font-size: .9rem; }
.metric-tile.attention .metric-note { color: var(--ink); }
.attention-flag { color: var(--danger); }
.not-given { color: var(--muted); }

/* The terms of the response table, each with its help sign. */
.term-list { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.term-list li { font-weight: 650; }

/* Tables: the numbers in text, scrollable by keyboard when the page is narrow. */
.table-scroll { position: relative; margin: .5rem 0 0; overflow-x: auto; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel); }
.management-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.management-table th,
.management-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.management-table thead th { background: #eef2f5; font-size: .82rem; line-height: 1.3; }
.management-table tbody th { font-weight: 650; }
.management-table tbody tr:last-child th,
.management-table tbody tr:last-child td { border-bottom: 0; }
.management-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.management-table td.numeric { white-space: nowrap; }
.management-table td a { font-weight: 700; }
.small-table { width: auto; min-width: 18rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel); }
.table-pair { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.all-clear { margin: .5rem 0 0; padding: .7rem 1rem; border: 1px solid var(--ok-line); border-radius: .45rem; background: var(--ok-bg); color: var(--ok); font-weight: 650; }

/* Charts: bars with their values written beside them. */
.chart-figure { margin: .5rem 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); }
.chart-figure figcaption { margin-top: .5rem; }
.chart { max-width: 42rem; }
.bar-chart { display: block; width: 100%; height: auto; }
.chart-label,
.chart-value { fill: var(--ink); font: 13px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.chart-value { font-weight: 700; }
.chart-bar { fill: var(--accent); }
.chart-bar.attention { fill: var(--danger); }

/* Messages in place of the numbers. */
.management-state { max-width: 40rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); }
.management-state p { margin: 0 0 .75rem; }
.management-state p:last-child { margin-bottom: 0; }
.management-state.error { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }

@media (max-width: 1100px) {
  .tile-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .management-content { padding: 1.25rem 1rem 2rem; }
  .tile-grid.two,
  .tile-grid.three { grid-template-columns: 1fr; }
}