/* Safety net for the two top-level views only: if Bootstrap ever fails to
   load, the app must not flash login and app at once. Deliberately scoped by
   id — a blanket `.d-none` rule here would out-rank Bootstrap's responsive
   `d-sm-*` utilities (same specificity, both !important, this file loads
   later) and permanently hide anything marked `d-none d-sm-inline`. */
#loginView.d-none,
#appView.d-none { display: none !important; }

body { padding-bottom: 4rem; }

.month-label { min-width: 14rem; }

/* The viewer's own row is pinned to the top by the server; make it read as
   pinned rather than just as another row that happens to be first. */
#reportBody tr.is-me > * {
  background-color: rgba(13, 110, 253, .16);
  box-shadow: none;
}
#reportBody tr.is-me > *:first-child {
  box-shadow: inset 3px 0 0 var(--bs-primary);
}
#reportBody tr.is-me { border-bottom: 2px solid rgba(13, 110, 253, .45); }

.hours-cell { font-variant-numeric: tabular-nums; }

#reportBody tr.report-row { cursor: pointer; }

.skeleton-row td {
  color: transparent;
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-row td { animation: none; }
}

/* On a phone the man-day column is the whole point, so drop the secondary
   sub-lines rather than pushing it off-screen. */
@media (max-width: 575.98px) {
  #reportBody .row-email { display: none; }
  #mdHint { display: none; }
  /* Rank and the working-days count are the same for everyone, so they are the
     first to go when six columns will not fit a phone. The count still appears
     in the note under the table. */
  #appView .col-rank,
  #appView .col-workdays { display: none; }
  #reportBody .row-decimal { display: none; }
  #appView .table > :not(caption) > * > * { padding: .5rem .35rem; }
  #appView table { font-size: .95rem; }
  #appView thead th { white-space: nowrap; }

  /* The year modal keeps all five columns — every one of them varies per
     month — so it gets tighter cells instead of hidden ones. */
  #yearModal .table > :not(caption) > * > * { padding: .45rem .3rem; }
  #yearModal table { font-size: .9rem; }
  #yearModal thead th { white-space: nowrap; }
  #yearModal .modal-body { padding-left: .75rem; padding-right: .75rem; }
}