html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #009b66;
}

.form-control:focus, .form-select:focus {
  border-color: #7fceb0;
  box-shadow: 0 0 0 0.25rem rgba(0, 155, 102, 0.25);
}

/* These live here (a plain global stylesheet) rather than in the CSS-isolated
   _Layout.cshtml.css, same reasoning as .btn-primary below: the <img> in the
   navbar logo doesn't reliably pick up its scope attribute the way its
   sibling <span>s do (an ASP.NET Core CSS-isolation quirk with tag-helper
   -processed elements), so a scoped rule silently didn't apply and the logo
   rendered at full (531x400) size instead of 30px tall. */
.navbar-logo {
  height: 30px;
  width: auto;
  display: block;
}

.navbar-divider {
  width: 1px;
  height: 22px;
  background-color: #dee2e6;
}

.navbar-brand-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #495057;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: #eef0f1;
}

/* The background photo, desaturated to a neutral gray (matching the TCG
   brand look) via a pseudo-element rather than `filter` directly on body --
   filter on body would gray out the real page content (buttons, links,
   the chart) along with the photo, which isn't the goal. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(244, 245, 246, 0.55), rgba(244, 245, 246, 0.55)),
    url("/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1);
}

/* --- Ticket dashboard --- */

.eyebrow-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f8388;
  margin-bottom: 0.5rem;
}

.eyebrow-label::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: #009b66;
  flex-shrink: 0;
}

/* Used where the eyebrow stands in for the page's H1 (see Agents.cshtml) --
   selectors scoped with .dashboard-header for the specificity to win over
   the plain `.dashboard-header h1` rule below, which would otherwise reset
   the font-size/margin back down since this element is itself an <h1>. */
.dashboard-header .eyebrow-label-lg {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.eyebrow-label-lg::before {
  width: 2rem;
  height: 3px;
}

.dashboard-header h1 {
  margin-bottom: 0.25rem;
  font-size: 1.75rem;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
}

.dashboard-header .period-label {
  color: #6c757d;
  margin-bottom: 0.5rem;
}

/* Section labels (Backlog and trend / Period activity / Key metrics / By
   agent). Styled as a divider + eyebrow rather than a plain heading, and
   spaced asymmetrically -- generous room above (plus the rule) separating
   it from the section before, tight room below binding it to the tiles/
   table it introduces -- so it's unambiguous which content belongs to
   which label. */
.dashboard-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #495057;
  margin: 2.5rem 0 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.dashboard-section-title:first-of-type {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: none;
}

/* Without this, the row/card's own top margin would win the collapse
   against the title's tighter bottom margin above, undoing the tight
   binding this is meant to create. */
.dashboard-section-title + .stat-tile-row,
.dashboard-section-title + .table-card,
.dashboard-section-title + .chart-card {
  margin-top: 0;
}

.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

/* A row with just one tile (Survey score) shouldn't stretch it to the full
   row width the way a grid column would -- keep it sized like its siblings. */
.stat-tile-row-single {
  display: flex;
}

.stat-tile,
.range-picker,
.table-card,
.chart-card {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0.5rem 1.5rem rgba(15, 40, 30, 0.12);
}

.range-picker {
  padding: 1rem;
}

.table-card {
  padding: 0.5rem 1.25rem;
  margin-bottom: 1.5rem;
}

.table-card .table {
  margin-bottom: 0;
}

/* Fixed column widths so a long header word (e.g. "Created & solved in
   period") wraps onto its own line instead of stretching the column --
   without table-layout: fixed the browser sizes columns to fit the
   longest unbroken word in the header, which was pushing the whole
   table too wide. */
.agent-table {
  table-layout: fixed;
  width: 100%;
}

.agent-table th {
  white-space: normal;
  word-wrap: break-word;
}

.agent-table th:nth-child(1) {
  width: 16%;
}

.agent-table th:nth-child(2) {
  width: 18%;
}

.agent-table th:nth-child(3) {
  width: 14%;
}

.agent-table th:nth-child(4) {
  width: 16%;
}

.agent-table th:nth-child(5) {
  width: 20%;
}

.agent-table th:nth-child(6) {
  width: 16%;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-tile:hover,
.stat-tile:focus {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 155, 102, 0.18);
  border-color: #7F7F82;
  color: inherit;
  text-decoration: none;
}

.stat-tile .stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #009b66;
}

.stat-tile .stat-label {
  font-size: 0.9rem;
  color: #495057;
}

/* A "detailed" tile (Open now, Total solved) swaps the plain <a> for a <div>
   wrapping a horizontal row: the main value/label (a link, unless it's a
   synthetic total with no single query behind it -- see stat-tile-main
   below), an arrow, and the two smaller linked sub-values (see stat-sub
   below) that make it up. */
.stat-tile-detailed {
  cursor: default;
}

.stat-tile-detail-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.stat-tile-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
}

a.stat-tile-main:hover .stat-value,
a.stat-tile-main:focus .stat-value {
  text-decoration: underline;
}

.stat-arrow {
  font-size: 1.25rem;
  color: #ced4da;
  line-height: 1;
}

.stat-subrow {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.stat-subrow-op {
  font-size: 0.75rem;
  color: #ced4da;
}

.stat-sub {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
}

.stat-sub-value {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  color: #6c757d;
}

.stat-sub-label {
  font-size: 0.75rem;
  color: #adb5bd;
}

a.stat-sub:hover,
a.stat-sub:focus {
  text-decoration: underline;
}

.metric-link,
.ticket-table a {
  color: #009b66;
  text-decoration: none;
}

.metric-link:hover,
.metric-link:focus,
.ticket-table a:hover,
.ticket-table a:focus {
  text-decoration: underline;
  color: #009b66;
}

/* --- Ticket trend chart --- */

.chart-card {
  padding: 1rem 1.25rem 0.5rem;
  margin-top: 1.5rem;
  position: relative;
}

.chart-header h2 {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.chart-subtitle {
  color: #6c757d;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.trend-chart {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
}

.chart-gridline {
  stroke: #dee2e6;
  stroke-width: 1;
}

.chart-axis-label,
.chart-x-label {
  font-size: 11px;
  fill: #6c757d;
}

.chart-area {
  fill: #009b66;
  fill-opacity: 0.1;
  stroke: none;
}

.chart-line {
  stroke: #009b66;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  fill: #009b66;
  stroke: #ffffff;
  stroke-width: 2;
}

.chart-dot-active {
  r: 6;
}

.chart-point-label {
  font-size: 11px;
  font-weight: 700;
  fill: #009b66;
}

.chart-crosshair {
  stroke: #7F7F82;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -100%) translateY(-10px);
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  color: #212529;
}

.chart-tooltip strong {
  color: #009b66;
}

/* Report footer for print/PDF only -- hidden on screen (the real <footer> in
   _Layout.cshtml already covers that); shown via the print rule below. */
.print-footer {
  display: none;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.4rem;
  border-top: 1px solid #dee2e6;
  font-size: 0.7rem;
  color: #6c757d;
}

/* --- Print / PDF export ---
   Triggered by the "Export PDF" button (window.print()). Strips the
   background photo and glass-card effects (they don't render in print and
   just waste ink), drops chrome that isn't part of the report (nav,
   footer, the date-range form, the export button itself), and lays out
   landscape since the by-agent table is wide. Shrinking the root font-size
   scales down every rem-based padding/margin/font-size on the page at once
   (everything below is sized in rem) so the report fits on one page --
   but two things on this page are NOT rem-scaled and need explicit
   shrinking here: the trend chart's SVG (a fixed 700:220 viewBox scaled by
   width, so its rendered height doesn't shrink with the root font-size at
   all -- constrained directly below) and each dashboard-section-title's
   padding-top/border (rem-based, but still adds up across 4 of them, so
   it's cut further here on top of the root shrink). */
@media print {
  @page {
    /* "landscape" alone only sets orientation, not paper dimensions --
       without an explicit size the PDF engine falls back to whatever the
       system/printer default page size is, which is how this ended up much
       wider than a normal sheet with the content only filling part of it.
       Pin it to a real, known size. */
    size: letter portrait;
    margin: 0.3in;
  }

  html {
    font-size: 12px;
  }

  .no-print,
  header,
  footer,
  .range-picker {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    margin-bottom: 0;
  }

  body::before {
    display: none !important;
  }

  .dashboard-header {
    margin-bottom: 0;
  }

  .dashboard-header h1,
  .dashboard-header .period-label,
  .eyebrow-label-lg {
    text-shadow: none;
  }

  .eyebrow-label {
    margin-bottom: 0.2rem;
  }

  .dashboard-header .period-label {
    margin-bottom: 0.2rem;
  }

  .stat-tile-row {
    margin-top: 0.55rem;
    gap: 0.6rem;
  }

  /* A subtle brand-green rule instead of generic gray, so section breaks
     read as part of the report's own identity rather than borrowed UI
     chrome -- matches the eyebrow's accent dash above the title. */
  .dashboard-section-title {
    margin: 0.7rem 0 0.35rem !important;
    padding-top: 0.35rem !important;
    border-top: 2px solid #bfe3cd !important;
  }

  .dashboard-section-title:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  .stat-tile,
  .table-card,
  .chart-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
    break-inside: avoid;
  }

  .stat-tile {
    padding: 0.65rem 0.95rem;
  }

  .stat-tile-detail-row {
    gap: 0.55rem;
  }

  .table-card {
    margin-bottom: 0;
  }

  .chart-card {
    margin-top: 0.4rem;
    padding: 0.5rem 0.85rem 0.3rem;
  }

  .chart-header h2 {
    font-size: 0.95rem;
    margin-bottom: 0.12rem;
  }

  .chart-subtitle {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }

  /* The SVG scales by width normally (height:auto keeps its 700:220 aspect
     ratio, which doesn't shrink with the root font-size above) -- pinning
     an explicit height here is what actually compacts it. preserveAspectRatio
     on the element (already "xMidYMid meet") letterboxes it centered rather
     than distorting. */
  .trend-chart {
    height: 130px;
  }

  .chart-tooltip {
    display: none !important;
  }

  .agent-table th,
  .agent-table td {
    padding: 0.42rem 0.6rem;
  }

  .agent-table tr {
    break-inside: avoid;
  }

  .print-footer {
    display: flex !important;
  }
}

/* Bootstrap's .btn-primary is defined in _Layout.cshtml.css, but ASP.NET's
   CSS isolation only scopes it to markup written directly in _Layout.cshtml
   -- it doesn't reach buttons rendered from other views via @RenderBody(),
   so it's redefined here (a plain global stylesheet) to actually take effect. */
.btn-primary {
  color: #fff;
  background-color: #009b66;
  border-color: #007e53;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #007e53;
  border-color: #006a46;
}