/*
    IT Reporting — stylesheet.

    ============================================================================
    EVERYTHING DOWN TO THE "SITE-SPECIFIC" MARKER IS SHARED WITH MCA AUDITOR.

    It is a deliberate copy of franwell-role-matrix/src/styles.css: the same
    Metrc palette, the same topbar, the same pill chips, ghost buttons and
    control bar. Copied rather than imported because step 5 of the build plan is
    to extract this block into a common IT.Site folder that both sites consume,
    and having the two files agree exactly is what makes that extraction a move
    rather than a rewrite.

    When you extract it: take everything above the marker, drop it in the shared
    folder, and delete it from BOTH sites. If you change anything above the
    marker before then, change it in both places or the extraction gets harder,
    not easier.
    ============================================================================
*/

/*
    The `hidden` attribute is honoured only by the user-agent stylesheet, which
    any author-level `display` declaration beats. Several components below set
    display:flex, so without this `hidden` on them is silently ignored.
*/
[hidden] { display: none !important; }

:root {
  --deep-forest: #213f39;
  --forest-mid: #6B7F7B;
  --forest-pale: #DADFDE;
  --sage: #C8DCCA;
  --sage-mid: #DAE8DC;
  --sage-pale: #EDF3ED;
  --kelly: #149F69;
  --highlighter: #E9F800;
  --peach: #FF9D6F;
  --cream: #F5F3E7;
  --mocha: #D6C4B6;
  --white: #ffffff;
  --clay: #B4632F;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--cream);
  color: var(--deep-forest);
  font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 13px;
  display: flex;
  flex-direction: column;
}

button, select, input { font-family: inherit; font-size: inherit; color: inherit; }

/* ---------- top bar ---------- */

.topbar {
  background: var(--deep-forest);
  color: var(--sage);
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  flex: none;
}

.topbar h1 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--white);
  letter-spacing: -0.01em;
}

.stat-strip { margin-left: auto; display: flex; gap: 20px; }

.stat { text-align: right; line-height: 1.15; }
.stat b {
  display: block;
  font-size: 16px;
  color: var(--white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--forest-pale);
}

/* ---------- control bar ---------- */

.controls {
  background: var(--white);
  border-bottom: 1px solid var(--forest-pale);
  padding: 9px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: none;
}

.chip-group { display: flex; gap: 4px; flex-wrap: wrap; }

.chip {
  border: 1px solid var(--forest-pale);
  background: var(--white);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--deep-forest); }
.chip[aria-pressed="true"] {
  background: var(--deep-forest);
  color: var(--sage);
  border-color: var(--deep-forest);
}
.chip:focus-visible { outline: 2px solid var(--kelly); outline-offset: 1px; }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }

.divider { width: 1px; height: 22px; background: var(--forest-pale); }

.control-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--forest-mid);
}

.ghost-button {
  border: 1px solid var(--deep-forest);
  background: transparent;
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
}
.ghost-button:hover { background: var(--deep-forest); color: var(--sage); }

select, input[type="date"] {
  background: var(--white);
  border: 1px solid var(--forest-pale);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
select:hover, input[type="date"]:hover { border-color: var(--deep-forest); }

.muted { color: var(--forest-mid); }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/*
    ============================================================================
    SITE-SPECIFIC — everything below belongs to IT Reporting alone.
    ============================================================================
*/

.page { flex: 1; overflow-y: auto; padding: 18px 22px 60px; }

/*
    Topbar action buttons.

    Lives BELOW the shared marker on purpose: MCA Auditor's topbar carries no
    buttons, so this is not part of the block being extracted. `.ghost-button`
    cannot be reused here — it draws a deep-forest border on a transparent
    background, which is invisible against the deep-forest topbar.
*/
.topbar-actions { display: flex; gap: 8px; }

.topbar-action {
  border: 1px solid var(--forest-mid);
  background: transparent;
  color: var(--sage);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.topbar-action:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--deep-forest);
}
.topbar-action:focus-visible {
  outline: 2px solid var(--highlighter);
  outline-offset: 2px;
}

/*
    Topbar button tooltip. Same palette and shadow as .chart-tooltip, with two
    differences: it wraps (these strings are full sentences, where the chart's
    are short rows) and it is position:fixed, because the topbar is a flex item
    that would clip an absolutely positioned child.
*/
.topbar-tooltip {
  position: fixed;
  z-index: 45;
  pointer-events: none;
  max-width: 260px;
  background: var(--deep-forest);
  color: var(--sage);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11.5px;
  line-height: 1.45;
  box-shadow: 0 4px 14px rgba(33, 63, 57, 0.28);
}

/*
    On the dark topbar a deep-forest tooltip would vanish into the bar itself.
    It hangs below onto the white control bar, so it reads there — but give it a
    hairline so it still separates if the layout ever changes.
*/
.topbar-tooltip { border: 1px solid rgba(200, 220, 202, 0.22); }


/*
    The "not functional yet" notice shown when a placeholder topbar button is
    clicked. position:fixed rather than absolute because the topbar is a flex
    item in a column layout — an absolutely positioned child would be clipped
    by it and would scroll away from its button.
*/
.not-ready-notice {
  position: fixed;
  z-index: 40;
  max-width: 290px;
  background: var(--white);
  color: var(--deep-forest);
  border: 1px solid var(--forest-pale);
  border-left: 3px solid var(--clay);
  border-radius: 8px;
  padding: 11px 13px 10px;
  box-shadow: 0 6px 20px rgba(33, 63, 57, 0.18);
}

.not-ready-text {
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.45;
}

.not-ready-dismiss {
  border: 1px solid var(--forest-pale);
  background: transparent;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  cursor: pointer;
}
.not-ready-dismiss:hover { background: var(--sage-pale); border-color: var(--forest-mid); }

/* The button that opened the notice stays lit, so it is obvious what it belongs to. */
.topbar-action[aria-expanded="true"] {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--deep-forest);
}



/* ---------- banners ---------- */

.banner {
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.banner-warning {
  background: var(--white);
  border-left: 4px solid var(--peach);
}
.banner-warning ul { margin: 4px 0 0; padding-left: 20px; }
.banner-warning li { margin-bottom: 3px; }

.banner-error {
  background: var(--white);
  border-left: 4px solid var(--clay);
  color: var(--clay);
  font-weight: 600;
}

/*
    Source banner: which data is and is not behind the figures below.

    Solid highlighter rather than the peach left-bar the warnings use, because
    this is not a warning about the data — it is a caveat on every number on the
    page, and it has to survive being screenshotted and forwarded. Deep-forest
    on highlighter is a very high contrast pair, so it reads at a glance without
    a coloured text treatment fighting it.

    Not dismissible, on purpose. The moment somebody can close it, the page can
    be shown to an audience without it.
*/
.banner-source {
  background: var(--highlighter);
  color: var(--deep-forest);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.banner-source b { letter-spacing: 0.01em; }

.range-summary {
  color: var(--forest-mid);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------- team sections ---------- */

.team-section { margin-bottom: 26px; }

.team-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
}

.team-heading .team-sources {
  font-size: 11px;
  font-weight: 400;
  color: var(--forest-mid);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.card-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px) {
  .card-row { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border-radius: 10px;
  padding: 14px 16px;
}

.card h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--forest-mid);
  margin: 0 0 10px;
  font-weight: 600;
}

.card + .card { margin-top: 14px; }

.unconfigured-card {
  background: var(--white);
  border-left: 4px solid var(--mocha);
  border-radius: 10px;
  padding: 14px 16px;
  line-height: 1.5;
}

.unconfigured-card code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  background: var(--sage-pale);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- totals ---------- */

.total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--sage-pale);
}
.total-line:last-child { border-bottom: none; }
.total-line b { font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; }

.scope-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--forest-mid);
}

.backlog-card h3 { display: flex; align-items: center; gap: 7px; }

/* The backlog ignores the date range. That is easy to miss when it sits beside
   range-dependent numbers, so it is labelled rather than left to the footnote. */
.live-tag {
  background: var(--kelly);
  color: var(--white);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 9px;
  letter-spacing: 0.06em;
}

/* ---------- employee table ---------- */

table.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.report-table thead th {
  background: var(--deep-forest);
  color: var(--sage);
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 7px 10px;
  white-space: nowrap;
}
table.report-table thead th.numeric { text-align: right; }

table.report-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--sage-pale);
}
table.report-table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
table.report-table tbody tr:hover td { background: var(--sage-pale); }
table.report-table tbody tr:last-child td { border-bottom: none; }

td.employee-name { font-weight: 600; }
td.employee-email {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--forest-mid);
}

.legend {
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--forest-mid);
  line-height: 1.5;
}

table.type-table { margin-top: 2px; }
table.type-table td { padding: 5px 0; border-bottom: 1px solid var(--sage-pale); }
table.type-table thead th { padding: 6px 0; }
table.type-table tfoot td {
  padding-top: 7px;
  border-bottom: none;
  border-top: 2px solid var(--forest-pale);
  font-weight: 600;
}
table.type-table tbody tr:hover td { background: transparent; }

/* Direction of travel, not good-vs-bad: a growing backlog is worth noticing,
   not scolding, so this is a muted tint rather than a red alert. */
.net-growing { color: var(--clay); font-weight: 600; }

/* ---------- weekly raised vs closed ---------- */

/* Clay for work arriving, kelly for work cleared — the same reading as the net
   column in the table, so the two cards cannot tell different colour stories. */
.flow-raised { fill: var(--clay); }
.flow-closed { fill: var(--kelly); }

.flow-average-line { stroke-width: 1.5; stroke-dasharray: 5 4; }
.flow-average-raised { stroke: var(--clay); }
.flow-average-closed { stroke: var(--kelly); }

.weekly-verdict { margin: 0 0 10px; line-height: 1.5; }

.legend-key.key-raised { background: var(--clay); }
.legend-key.key-closed { background: var(--kelly); }
.legend-dash {
  display: inline-block;
  width: 16px;
  border-top: 1.5px dashed var(--forest-mid);
}
.legend-dash.dash-raised { border-top-color: var(--clay); }
.legend-dash.dash-closed { border-top-color: var(--kelly); }

.tooltip-swatch.swatch-raised { background: var(--clay); }

/* ---------- period comparison ---------- */

/* Direction only. More tickets closed is not automatically good and fewer is
   not automatically bad, so this deliberately avoids the red/green the flow
   card uses, where the direction does carry a judgement. */
.delta {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--forest-mid);
  background: var(--sage-pale);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
  white-space: nowrap;
}
.delta-flat { background: transparent; font-weight: 400; }

/* ---------- story point distribution ---------- */

table.point-table td { padding: 4px 0; }
table.point-table td.point-label { font-weight: 600; width: 68px; }
table.point-table td.point-label.point-unpointed { color: var(--clay); }
table.point-table td.point-bar-cell { width: auto; padding-right: 12px; }
table.point-table td.numeric { width: 56px; }

.point-bar {
  display: block;
  height: 9px;
  border-radius: 2px;
  background: var(--sage);
  min-width: 2px;
}
/* Unpointed is the row worth noticing, not a value in the scale. */
.point-bar-unpointed { background: var(--mocha); }

/* ---------- ticket type mix ---------- */

/* Six fills. Past that the palette repeats and the legend stops being
   readable, which means the configured list is too long for a stacked chart
   rather than something to work around. */
.mix-series-0 { fill: var(--deep-forest); background: var(--deep-forest); }
.mix-series-1 { fill: var(--kelly); background: var(--kelly); }
.mix-series-2 { fill: var(--sage); background: var(--sage); }
.mix-series-3 { fill: var(--forest-mid); background: var(--forest-mid); }
.mix-series-4 { fill: var(--mocha); background: var(--mocha); }
.mix-series-5 { fill: var(--peach); background: var(--peach); }
.tooltip-swatch.swatch-closed { background: var(--kelly); }
.net-shrinking { color: var(--kelly); font-weight: 600; }

/* ---------- charts ---------- */

/* position: relative so the tooltip can be placed in the chart's own
   coordinate space; being inside the scroll container means it tracks the
   chart rather than drifting when a long range is scrolled. */
.chart-wrap { overflow-x: auto; position: relative; }
.chart-wrap svg { display: block; }

/* Stacking colours, bottom segment first. Kelly is deliberately NOT used here:
   it is the accent this palette reserves for "the thing you are pointing at",
   and a permanent series in that colour would fight the hover. */
.chart-bar { fill: var(--sage); }
.chart-series-0 { fill: var(--sage); }
.chart-series-1 { fill: var(--forest-mid); }
.chart-series-2 { fill: var(--mocha); }

/* The hovered column is outlined rather than recoloured, so the split survives
   being pointed at. */
.chart-hover-outline {
  fill: none;
  stroke: var(--deep-forest);
  stroke-width: 1.5;
  rx: 1;
}
.chart-average-line { fill: none; stroke: var(--deep-forest); stroke-width: 1.5; }
.chart-axis-line { stroke: var(--forest-pale); stroke-width: 1; }
.chart-axis-text { fill: var(--forest-mid); font-size: 9px; }
.chart-grid-line { stroke: var(--sage-pale); stroke-width: 1; }

/* ---------- chart hover ---------- */

.chart-guide-line {
  stroke: var(--forest-mid);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-hover-dot {
  fill: var(--white);
  stroke: var(--deep-forest);
  stroke-width: 2;
}

/* pointer-events: none is what keeps the box from sitting under the cursor and
   chasing itself around the chart. */
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  background: var(--deep-forest);
  color: var(--sage);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(33, 63, 57, 0.28);
}

.chart-tooltip .tooltip-date {
  color: var(--white);
  font-weight: 600;
  margin-bottom: 3px;
}

.chart-tooltip .tooltip-row { display: flex; align-items: center; gap: 7px; }
.chart-tooltip .tooltip-muted { color: var(--forest-pale); }
.chart-tooltip .tooltip-total {
  border-top: 1px solid rgba(200, 220, 202, 0.25);
  margin-top: 3px;
  padding-top: 3px;
  color: var(--white);
  font-weight: 600;
}

.tooltip-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}
.swatch-average { background: var(--forest-pale); }
.swatch-blank { background: transparent; }

/* Tooltip swatches reuse the series classes so a colour can never drift between
   the bar and its label. `fill` is for SVG, `background` for the HTML swatch. */
.tooltip-swatch.chart-series-0 { background: var(--sage); }
.tooltip-swatch.chart-series-1 { background: var(--forest-mid); }
.tooltip-swatch.chart-series-2 { background: var(--mocha); }

/* ---------- chart legend ---------- */

.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 9px; }
.chart-legend .legend-entry { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--forest-mid); }
.legend-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.legend-key.chart-series-0 { background: var(--sage); }
.legend-key.chart-series-1 { background: var(--forest-mid); }
.legend-key.chart-series-2 { background: var(--mocha); }
.legend-line { display: inline-block; width: 16px; border-top: 1.5px solid var(--deep-forest); }

.chart-empty { padding: 26px 0; color: var(--forest-mid); text-align: center; }

.loading { padding: 40px 22px; color: var(--forest-mid); }