/* Shared dashboard indicators. Screen only: printed documents retain their existing layout. */
@media screen {
  :root {
    --dashboard-kpi-value-size: 35.2px;
    --dashboard-kpi-label-size: 13px;
    --dashboard-kpi-height: 104px;
    --dashboard-kpi-padding: 14px 16px;
  }
  :is(.stats > .stat, .portfolio-indicators .stat, .nr-kpi, .hr-stats > div, .time-stats > div) {
    --kpi-from: #092e8b;
    --kpi-to: #075fce;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #ffffff26;
    border-radius: 11px;
    background: linear-gradient(115deg, var(--kpi-from), var(--kpi-to));
    color: #fff;
    box-shadow: 0 4px 12px #16365313, inset 0 1px 0 #ffffff14;
  }
  :is(.stats > .stat, .portfolio-indicators .stat):nth-child(4n + 2) {
    --kpi-from: #064a57; --kpi-to: #08776f;
  }
  :is(.stats > .stat, .portfolio-indicators .stat):nth-child(4n + 3) {
    --kpi-from: #922800; --kpi-to: #b94600;
  }
  :is(.stats > .stat, .portfolio-indicators .stat):nth-child(4n + 4) {
    --kpi-from: #340487; --kpi-to: #7e20d3;
  }
  :is(.stats > .stat, .portfolio-indicators .stat, .nr-kpi, .hr-stats > div, .time-stats > div)::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 58px; height: 58px;
    background: linear-gradient(135deg, #ffffff1c, #ffffff05);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    pointer-events: none;
    z-index: -1;
  }
  .stats > .stat :is(.stat-label, .stat-number, .stat-foot, .label, strong, b, small, em, a),
  .portfolio-indicators .stat :is(.stat-label, .stat-number, .stat-foot, em),
  .nr-kpi :is(span, strong), .hr-stats > div :is(small, strong) { color: #fff; }
  .stats > .stat a { text-decoration: underline; text-underline-offset: 2px; }
  .stats > .stat .stat-label svg { color: #fff; background: #ffffff1a; }
  :is(.stats > .stat, .stats.client-directory-stats > .stat, .portfolio-indicators .stat, .nr-kpi, .hr-stats > div):not(:where(.payment-sheet *)) {
    min-height: var(--dashboard-kpi-height);
    padding: var(--dashboard-kpi-padding);
    font-size: var(--dashboard-kpi-label-size);
  }
  :is(.stats > .stat, .stats.client-directory-stats > .stat, .portfolio-indicators .stat):not(:where(.payment-sheet *)) > :is(.stat-label, .label),
  .nr-approved-workspace .nr-kpi > span, .nr-kpi > span, .hr-stats > div > small:first-child {
    font-size: var(--dashboard-kpi-label-size);
    line-height: 1.35;
  }
  :is(.stats > .stat, .stats.client-directory-stats > .stat, .portfolio-indicators .stat, .nr-kpi, .hr-stats > div):not(:where(.payment-sheet *)) > :is(.stat-number, strong, b) {
    display: block;
    margin: 6px 0 0;
    font-size: var(--dashboard-kpi-value-size);
    font-weight: 650;
    line-height: 1.18;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
  }
  .stats > .stat.stat-green, .stats > .stat.green, .nr-kpi.online {
    --kpi-from: #076243; --kpi-to: #008453;
  }
  .stats > .stat.stat-amber, .stats > .stat.warn,
  .stats > .stat.portfolio-card-pending, .nr-kpi.power {
    --kpi-from: #922800; --kpi-to: #b94600;
  }
  .stats > .stat.stat-purple, .nr-kpi.pending {
    --kpi-from: #340487; --kpi-to: #7e20d3;
  }
  .stats > .stat.stat-blue, .nr-kpi.verified {
    --kpi-from: #065b78; --kpi-to: #007d9e;
  }
  .stats > .stat.portfolio-card-collected {
    --kpi-from: #092e8b; --kpi-to: #075fce;
  }
  .stats > .stat.portfolio-card-overdue, .nr-kpi.los {
    --kpi-from: #a11736; --kpi-to: #c32648;
  }
  .nr-kpi.offline { --kpi-from: #34495d; --kpi-to: #5b7288; }
  #ticket-stats .stat:nth-child(1) { --kpi-from: #922800; --kpi-to: #b94600; }
  #ticket-stats .stat:nth-child(2) { --kpi-from: #092e8b; --kpi-to: #075fce; }
  #ticket-stats .stat:nth-child(3) { --kpi-from: #076243; --kpi-to: #008453; }
  #ticket-stats .stat:nth-child(4) { --kpi-from: #a11736; --kpi-to: #c32648; }
  .nr-kpi:hover { filter: brightness(1.04); box-shadow: 0 5px 15px #16365326; }
  .nr-kpi:focus-visible { outline: 3px solid #082f49; outline-offset: 3px; }
  .payment-sheet .stats > .stat > strong { font-size: 17px; line-height: 1.25; }

  /* HR indicators use the network palette with contrast for small white labels. */
  :is(.hr-stats, .time-stats) > div:nth-child(n) {
    --kpi-from: #006580;
    --kpi-to: #007b98;
    border: 1px solid #ffffff26;
    background: linear-gradient(115deg, var(--kpi-from), var(--kpi-to));
  }
  :is(.hr-stats, .time-stats) > div:nth-child(2) {
    --kpi-from: #006f56;
    --kpi-to: #008365;
  }
  :is(.hr-stats, .time-stats) > div:nth-child(3) {
    --kpi-from: #a94600;
    --kpi-to: #bf5300;
  }
  :is(.hr-stats, .time-stats) > div:nth-child(4) {
    --kpi-from: #4f119e;
    --kpi-to: #741bc3;
  }
  :is(.hr-stats, .time-stats) > div::after {
    background: #ffffff0a;
  }
  :is(.hr-stats, .time-stats) > div > :is(small, strong) { color: #fff; }
  .time-stats > div > input { max-width: 100%; }
}
@media screen and (max-width: 760px) {
  :root {
    --dashboard-kpi-value-size: 28px;
    --dashboard-kpi-label-size: 12px;
    --dashboard-kpi-height: 92px;
    --dashboard-kpi-padding: 10px 12px;
  }
}

@media screen and (max-width: 360px) {
  :is(.stats.monthly-stats, .stats:has(> .stat > .stat-number)):not(:where(.payment-sheet *)) {
    grid-template-columns: minmax(0, 1fr);
  }
}